/* ---------------------- mainImgArea ---------------------- */


#mainImgArea {
	width: 100%;
	margin :0;
	padding: 0;
	position: relative;
  border-top: 4px solid #000;
  border-bottom: 4px solid #000;
}
	  
  #mainImgArea div {
    width: 100%;
    height: auto;
	}


/* ---------------------- topBannerArea ---------------------- */
#welcomeArea {
	width: 100%;
	margin :0;
	padding: 0;
  background: #111;
  box-shadow: 00px 0px 7px 6px rgba(0, 0, 0, 0.32);
}
	  
  #welcomeArea .inner {
    width:100%;
    margin: 0 auto;
    padding: 2rem 2rem 1rem;
    color: #fff;
	}
    #welcomeArea .inner h1 {
      margin: 0 0 1rem;
      font-size: 2rem;
    }
      #welcomeArea .inner p {
        font-size: 1rem;
        font-weight: 300;
        line-height: 1.4;
      }

/* ---------------------- topBannerArea ---------------------- */

.topBannerArea {
	display: block;
	width:100%;
  height: auto;
	margin :0;
	padding: 30px 20px;
}
  .topBannerArea .inner {
	  display: flex;
	  flex-wrap: wrap;
      width:100%;
      height: auto;
      margin :0 auto;
      padding: 0;
  }
      a.topBanner01,
      a.topBanner02 {
      display: flex;
      justify-content: center;
      align-items: center;
		  flex-wrap: wrap;
		  font-size: 3vw;
		  line-height: 1.2;
		  text-decoration: none;
		  color: #fff;
      width:100%;
      height: auto;
      margin :0 auto;
      padding: 20px 20px;
		  position: relative;
      }
        a.topBanner01 {
            background: #65c3ff;
        }
        a.topBanner02 {
            background: #bea480;
        }
          a.topBanner01 strong,
          a.topBanner02 strong {
              display: block;
			  font-size: 3.6vw;
			  line-height: 1.2;
			  padding-top: 16px;
          }	  
            a.topBanner01:before,
            a.topBanner02:before {
            position: absolute;
            content: '';
            width: 0px;
            height: 0px;
            z-index: 1;
          }
            a.topBanner01:before,
            a.topBanner02:before {
            top: 0;
            left: -30px;
            width: 46px;
            height: 100%;
            background:
            linear-gradient(to bottom left, transparent 50%, #fff 50%) no-repeat top left/100% 50%,
            linear-gradient(to top left, transparent 50%, #fff 50%) no-repeat bottom left/100% 50%;
          }



/* ---------------------- topImageArea  ---------------------- */

.topImageArea {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	width:100%;
    height: auto;
	margin :0;
	padding: 0;
}
  .topImageArea a {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      width:50%;
      height: auto;
      margin :0;
      padding: 0;
      text-decoration: none;
	  box-shadow : 0 0 0 1px #fff;
	  
		overflow: hidden;
  }
    .topImageArea figure {
        display: flex;
        align-items: center;
        width:100%;
        height: auto;
        margin :0;
        padding: 0;
		overflow: hidden;
    }
    .topImageArea img {
        display: flex;
        align-items: center;
        width:100%;
        height: auto;
        margin :0;
        padding: 0;
		overflow: hidden;
    }
    .topImageArea span {
        display: flex;
        align-items: center;
        justify-content: center;
        width:100%;
        height: auto;
        margin :0;
        padding: 20px 0;
        font-weight: 500;
        font-size: 2.4vw;
        line-height: 1;
        letter-spacing: 1px;
        color: #fff;
		overflow: hidden;
    }

.bg-orange01 { background: #F9A745; }
.bg-orange02 { background: #F99145; }
.bg-blue01 { background: #5567A2; }
.bg-green01 { background: #8BA255; }









/* ---------------------- infoArea SNS & Banner ---------------------- */
 
.infoArea {
    width:100%;
    height: auto;
    margin :0 auto;
    padding: 100px 0;
}

/* SNS */
.infoArea div.snsColumns {
    display: flex;
    flex-wrap: nowrap;
justify-content: space-around;
align-items: stretch;
}
  .infoArea div.snsColumns div.item {
      width: 40%;
      height: auto;
      margin: 0;
  } 

/* Banner */
.infoArea div.bannerColumns {
    text-align: center;
    display: flex;
justify-content: center;
max-width: 1200px;
}
.infoArea div.bannerColumns a {
    width: auto;
    margin: 0 auto 20px;
} 
  .infoArea div.bannerColumns a figure img {
      width: 200px;
      height: auto;
      margin: 0 auto;
      border: 1px solid #ccc;
  } 




/* ---------------------- linkArea ---------------------- */

.linkArea {
	width:100%;
  height: auto;
	margin :0 auto;
	padding: 40px 20px;
	background-size:contain;
	background-attachment: fixed;
}
  .linkArea div.inner {
	  display: block;
	  padding: 0 20px;
  }

  /* Banner */
    .linkArea div.bannerColumns {
      display: flex;
	  justify-content: space-between;
	  align-items: center;
	  flex-wrap: wrap;
    }
    .linkArea div.bannerColumns a {
        width: auto;
        margin: 0 auto 20px;
    } 
      .linkArea div.bannerColumns a figure img {
          width: auto;
          height: auto;
          margin: 0 auto;
          border: 1px solid #ccc;
      } 




/* ---------------------- youtube ---------------------- */

#youtubeArea {
	width:100%;
    height: auto;
	margin :0 auto;
	padding: 40px 20px;
}
  #youtubeArea h1 {
      font-size: 20px;
      line-height: 1.2;
      letter-spacing: 2px;
      width:100%;
      height: auto;
      margin: 0 auto 40px;
      padding: 0 0 0 0;
	  text-align: center;
  }

  #youtubeArea div.inner {
	  display: block;
	  padding: 0 40px;
  }