@charset "utf-8";
/* ------------------------------------------------------------ common */

main{ padding: 90px 0;}

h2{ margin: 0 auto; background: url(../images/index/bg_h2.png) center 90px/300px no-repeat; line-height: 200%; text-align: center; }
h2 strong{ /* display: block; */ /* padding: 10px 0 25px; */ font-size: 75px; line-height: 150%; }
h2 small{ font-size: 20px; letter-spacing: 0.1em; }
h2 span{ font-family: "futura-pt", sans-serif; font-weight: 500; }



/* ------------------------------------------------------------ fv */
.haurt{ background: url(../images/index/bg_fv.jpg) center top no-repeat; }

#fv{ padding: 75px 0 140px; }
#fv h2{ width: 1015px; background: none; line-height: 100%; }
#fv h2 strong{ display: block; line-height: 150%; text-align: center; line-height: 1; font-size: 50px; }
#fv h2 span{ font-size: 50px; font-weight: 700; }
#fv h2 img{ width: 100%; height: auto; padding: 0 0 55px; }

#fv p{ width: 250px; margin: 50px auto 0; text-align: center; padding: 5px 0 4px; font-size: 20px; color: #41c0b3; border: 1px solid #41c0b3; border-radius: 50px; }


#fv #news{ position: relative; padding: 50px 0 0; }
#fv #news h3{ text-align: center; }
#fv #news h3 span{ font-size: 30px; font-weight: 600; font-style: normal; font-family: futura-pt, sans-serif; }

#fv #news dl{ position: relative; width: 810px; margin: 0 auto; box-sizing: border-box; padding: 25px 0 10px 25px; border-bottom: 1px solid #e86a7f; }
#fv #news dl:nth-of-type(even){ border-bottom: 1px solid #41b9ad; }

#fv #news dl:before{ bottom: -2px; left: -10px; position: absolute; content: ""; width: 20px; height: 20px; background: url(../images/common/icn_hurt.svg) center/cover no-repeat; }
#fv #news dl:nth-of-type(even):before{ background: url(../images/common/icn_hurt02.svg) center/cover no-repeat; }

#fv #news dl dt{ font-size: 20px; font-family: "futura-pt", sans-serif; font-weight: 600; font-style: normal; color: #707070; }
#fv #news dl dd{ position: relative; padding: 15px 50px 0 0; line-height: 170%; }
#fv #news dl a dd:after{ position: absolute; content: ""; width: 20px; height: 20px; top: 50%; right: 15px; transform: translate(0,-50%); background: url(../images/common/icn_arrow.svg) center/cover no-repeat; }
#fv #news dl a{ display: block; }

#fv #news dl:nth-of-type(odd) a:hover dd:after{ background: url(../images/common/icn_arrow03.svg) center/cover no-repeat; }
#fv #news dl:nth-of-type(even) a:hover dd:after{ background: url(../images/common/icn_arrow02.svg) center/cover no-repeat; }


  
/* ------------------------------------------------------------ about */
#about{ padding: 0 0 100px; }
#about h2{ width: 305px; }
#about h2 span{ text-align: center; }
#about h2 small{ display: block; text-align: right; }
#about h3{ padding: 50px 0 50px; text-align: center; font-weight: 600; line-height: 150%; font-size: 36px; }
#about p{ line-height: 200%; text-align: center; }



/* ------------------------------------------------------------ efforts */
#efforts{ padding: 120px 0 100px; background: url(../images/index/bg_efforts.png) center 20px no-repeat; }
#efforts h2{ width: 430px; }
#efforts h2 small{ display: block; padding: 0 60px 0 0; text-align: right;  }
#efforts h2 span{ text-align: center; }

#efforts ul{ padding: 40px 0 0; }
#efforts ul li{ margin: 0 0 20px; padding: 30px 40px; position: relative; box-shadow: 6.428px 7.66px 25px 0px rgba(4, 0, 0, 0.1); background: #fff; box-sizing: border-box; border-radius: 10px; }
#efforts ul li .num{ position: absolute;top: 10px; left: 10px; width: 62px; z-index: 10; }
#efforts ul li .num img{ width: 100%; height: auto; }

#efforts ul li .item{ float: left; width: 260px; }
#efforts ul li .item img{ width: 100%;  height: auto; }

#efforts ul li .txt{ float: right; width: 735px; }
#efforts ul li .txt h3{ padding: 0 0 30px; font-size: 24px; font-weight: 600; } 
#efforts ul li .txt p{ line-height: 200%; }


#efforts ul li:first-of-type .num{ width: 110px; }
#efforts ul li:first-of-type .item{ width: 430px; }
#efforts ul li:first-of-type .txt{ width: 550px; }
#efforts ul li:first-of-type .txt h3{ font-size: 32px; font-feature-settings: "palt"; }



/* ------------------------------------------------------------ 
	animation
------------------------------------------------------------ */
.img-wrap {
  overflow: hidden;
  position: relative;
}

.img-wrap:before {
  animation: img-wrap 1s ease-out forwards;
  animation-delay: 3s;
  background: #fff;
  bottom: 0;
  content: '';
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}

@keyframes img-wrap {
  100% {
    transform: translateX(100%);
  }
}

@-webkit-keyframes img-wrap {
  100% {
    transform: translateX(100%);
  }
}



/* ------------------------------------------------------------ recruit */
#recruit{ padding: 70px 0 60px; background: url(../images/index/bg_recruite.jpg) center top/cover no-repeat; }
#recruit .box{ width: 560px; }

#recruit h2{ width: 280px; background: url(../images/index/bg_green.png) center 90px/270px no-repeat; margin: 0; text-align: left; }
#recruit h2 small{ display: block; padding: 0 20px 0 0; text-align: right; }
#recruit h3{ padding: 40px 0 15px; font-size: 36px; font-weight: 600; line-height: 150%; }
#recruit p{ padding: 0 0 40px; line-height: 200%; }

#recruit .fes{ display: block; width: 340px; padding: 18px 0; font-size: 15px; color: #fff; border-radius: 50px; text-align: center; }



/* ------------------------------------------------------------ facility */
#facility{ padding: 100px 0 70px; background: url(../images/index/bg_facilities.jpg) center top/cover no-repeat; }
#facility h2{ padding: 0 0 50px; background: none; line-height: 140%; text-align: left; }
#facility h2 span{ padding: 0; margin-bottom: -10px; }
#facility h2 small{ font-size: 40px; font-weight: 700; padding: 0 0 0 10px; }

#facility .map{ width: 100%; height: 400px; }
#facility .map iframe{ width: 100%; height: 100%; border: none; }



/* ------------------------------------------------------------ ribbon */
.overlay{ position: absolute; background: rgba(255, 248, 231, 0.375); width: 100%; height: 100%; top: 0; left: 0; z-index: -1; }

#ribbon{ overflow: hidden; position: relative; padding: 140px 0 100px; /* background: url(../images/index/bg_ribbon.jpg) center top/cover no-repeat; */ }
#ribbon h2{ width: 660px;  background: url(../images/index/bg_orange.png) center 90px/300px no-repeat; text-align: center; }
#ribbon h2 small{ padding: 0 0 0 200px; }
#ribbon h2 span{ line-height: 125%; }

#ribbon h3{ padding: 40px 0 0; font-size: 36px; font-weight: 600; line-height: 150%; text-align: center; }
#ribbon h4{ padding: 70px 0 40px; font-size: 24px; font-weight: 600; text-align: center; }
#ribbon p{ padding: 0 0 40px; line-height: 200%; text-align: center; }
#ribbon .orange{ display: block; box-sizing: border-box; padding: 15px 0 0; margin: 0 auto; width: 320px; height: 70px; font-size: 15px; text-align: center; line-height: 150%; background: #ffa776; border-radius: 50px; color: #fff; }



/* ------------------------------------------------------------ organize */
#organize{ padding: 100px 0; background: url(../images/index/bg_organize.jpg) center top/cover no-repeat; }
#organize h2{ padding-bottom: 50px; font-size: 40px; font-weight: 700; text-align: center; background: url(../images/index/bg_h2.png) center 70px/300px no-repeat; }

#organize .w_box{ overflow-y: scroll; height: 320px; padding: 40px 70px; margin: 20px 0 50px; background: #fff; box-sizing: border-box; }
#organize .w_box p{ line-height: 180%; }

#organize .download{ width: 300px; margin: 0 auto; }
#organize .download a{ height: 40px; box-sizing: border-box; padding: 10px 0 0 20px; border: 1px solid #41c0b3; border-radius: 50px; text-align: center; display: block; background: #fff url(../images/common/icn_pdf.svg) calc(50% - 80px) center/15px no-repeat; font-size: 20px; color: #41c0b3; }



/* ------------------------------------------------------------ 
	animation
------------------------------------------------------------ */

#canvas_box {
	position: absolute;
	width: 100%;
	height: 100%;
}

#canvas_box canvas {
	position: fixed;
	max-width: 3000px;
	max-height: 3000px;
	width: 3000px;
	height: 3000px;
	top: 0;
	bottom: 0;
	right: 50%;
	left: 50%;
	margin: auto;
	-webkit-transform: translate(-50%,0);
	-ms-transform: translate(-50%,0);
	transform: translate(-50%,0);
	z-index: -2;
}

@media only screen and (max-width:640px){
	#canvas_box canvas {
		width: 200vw;
		height: 200vw;
	}
}



.glowAnime span{ opacity: 0; }
.glowAnime.glow span{ opacity: 1; animation: glow_anime_on 1s ease forwards; }

@keyframes glow_anime_on{
	0% { opacity:0; color: #41c0b3; }
	50% { opacity:1; color: #41c0b3; }
	100% { opacity:1; color: #000; }
}

@-webkit-keyframes glow_anime_on{
	0% { opacity:0; color: #41c0b3; }
	50% { opacity:1; color: #41c0b3; }
	100% { opacity:1; color: #000; }
}



.load-fade{ opacity: 0; visibility: hidden; transition: 1s ease; }
.load-fade.done{ opacity: 1; visibility: visible; transition: 1s ease; }

.fade-up{ opacity: 0; visibility: hidden; transform: translateY(50px); transition: 1s ease; } 
.fade-up.done{ opacity: 1; visibility: visible; transform: translateY(0); transition: 1s ease; }





/* ------------------------------------------------------------
	mobile 
------------------------------------------------------------ */
@media only screen and (max-width: 640px) {

	main{ padding: 50px 0 0;}
	
	h2{ background: url(../images/index/bg_h2.png) center 45px/200px no-repeat; }
	h2 strong{ /* padding: 10px 0 0; */ font-size: 50px; line-height: 120%; }
	h2 small{ font-size: 17px; font-weight: 600; }
	
	
		
	/* ------------------------------------------------------------ fv */
	.haurt{ background: none; }
	
	#fv{ padding: 30px 0 50px; background: url(../images/index/bg_fv-sp.jpg) center top/100% no-repeat; }
	#fv h2{ line-height: 0; width: 100%; height: auto; font-size: 25px; font-weight: 600; }
	#fv h2 strong{ line-height: 80%; }
	#fv h2 span{ font-size: 25px; }
	#fv h2 img{ padding: 0 0 25px; }
	#fv p{ width: 200px; height: 35px; box-sizing: border-box; padding: 9px 0 0; margin: 20px auto 10px; font-size: 14px; }
	
	#fv #news{ margin: 0; padding: 40px 0 0; }
	#fv #news h3{ top: 25px; }
	#fv #news h3 span{ font-size: 25px; }
	
	#fv #news dl{ width: 100%; padding: 15px 0 10px 20px; }
	#fv #news dl dt{ position: relative; width: 100%; font-size: 13px; }
	#fv #news dl dd:after{ right: 0; }
/* 	#fv #news dl dt:after{ position: absolute; content: ""; width: 35px; height: 1px; background: #707070; top: 6px; left: 75px; } */
	#fv #news dl dd{ width: 100%; padding: 15px 35px 0 0; box-sizing: border-box; font-size: 13px; }
	
	#fv .item{ width: 80%; height: auto; margin: 0 auto; }
	
	
	
	/* ------------------------------------------------------------ about */
	#about{ padding: 15px 0 40px; background: url(../images/index/bg_about-sp.jpg) center 20px/100% no-repeat; }
	#about h2{ width: 200px; }
	#about h3{ padding: 30px 0 15px; font-size: 24px; }
	#about p{ padding: 0 0 15px; font-size: 12px; }
	
	#about .item{ width: 80%; height: auto; margin: 0 auto; }
	
	
	
	/* ------------------------------------------------------------ efforts */
	#efforts{ padding: 0 0 30px; background: url(../images/index/bg_efforts-sp.png) center 120px/100% no-repeat, url(../images/index/bg_efforts02-sp.png) center 50%/100% no-repeat,url(../images/index/bg_efforts-sp.png) center calc(100% - 100px)/100% no-repeat; }
	#efforts h2{ width: 320px; background: url(../images/index/bg_h2.png) center 45px/280px no-repeat; }
	#efforts h2 small{ padding: 0 20px 0 0; }
	
	#efforts ul{ padding: 30px 0 0; }
	#efforts ul li{ margin: 0 0 20px; padding: 20px; box-shadow: 6px 7px 15px 0px rgba(4, 0, 0, 0.1); }
	
	#efforts ul li .num{ width: 40px; }
	#efforts ul li .item,
	#efforts ul li:first-of-type .item,
	#efforts ul li .txt,
	#efforts ul li:first-of-type .txt{ float: none; width: 100%; }
	
	#efforts ul li .txt{ padding: 20px 0 0; }
	#efforts ul li .txt h3{ padding: 0 0 10px; font-size: 19px; line-height: 150%; }
	#efforts ul li .txt p{ font-size: 12px; }
	
	#efforts ul li:first-of-type .num{ width: 70px; }
	#efforts ul li:first-of-type .txt h3{ font-size: 19px; line-height: 150%; }
	
	
	
	/* ------------------------------------------------------------ recruit */
	#recruit{ padding: 10px 0 50px; background: none; }
	#recruit .box{ width: 100%; padding: 30px 0 0; }
	
	#recruit h2{ width: 250px; margin: 0 auto; background: url(../images/index/bg_green.png) center 45px/240px no-repeat; text-align: center; }
	#recruit h2 small{ padding: 0; }
	#recruit h3{ padding: 10px 0 7px; font-size: 19px; }
	#recruit p{ padding: 0 0 20px; font-size: 13px; }
	
	#recruit .fes{ width: 100%; margin: 0; padding: 18px 0; font-size: 13px; height: 50px; box-sizing: border-box; }
	#recruit .item{ width: 100%; height: auto; }
	
	
	
	/* ------------------------------------------------------------ facility */
	#facility{ padding: 50px 0 40px; }
	#facility h2{ padding: 0 0 10px; }
	#facility h2 small{ padding: 0; font-size: 25px; }
	#facility h2 img{ width: 100%; height: auto; }
	
	#facility .map{ height: 345px; width: 345px; margin: 0 auto;}

	/* ------------------------------------------------------------ ribbon */
	#ribbon{ padding: 50px 0; /* background: url(../images/index/bg_ribbon.jpg) left top/cover no-repeat; */ }
	#ribbon h2{ width: 250px; background: url(../images/index/bg_orange.png) center 105px/250px no-repeat; }
	#ribbon h2 small{ padding: 0 0 0 110px; }
	#ribbon h2 span{ line-height: 100%; }
	#ribbon h2 strong{ line-height: 100%; }
	
	#ribbon h3{ padding: 5px 0 0; font-size: 22px; }
	#ribbon h4{ padding: 30px 0 10px; font-size: 20px; }
	#ribbon p{ padding: 0 0 20px; font-size: 13px; }
	
	#ribbon .orange{ padding: 8px 0 0; width: 100%; height: 50px; font-size: 13px; }
 
	/* ------------------------------------------------------------ organize */
	#organize{ padding: 50px 0; }
	#organize h2{ padding-bottom: 30px; font-size: 26px; background: url(../images/index/bg_h2.png) center 40px/170px no-repeat; }
	
	#organize .w_box{ height: 240px; padding: 20px 25px; margin: 20px 0 30px; }
	#organize .w_box p{ font-size: 11px; }
	
	#organize .download{ width: 60%; }
	#organize .download a{ height: 30px; padding: 7px 0 0 10px; background: #fff url(../images/common/icn_pdf.svg) calc(50% - 50px) center/12px no-repeat; font-size: 12px; }




}