@charset "utf-8";
/* CSS Document */

/*-----------------------------------------------------------------------------
	PC SP 共通
-----------------------------------------------------------------------------*/
html{
	font-size:62.5%;/*16px × 62.5% = 10px*/
}
body{
	font-family: "VentiCF-Bold";
	font-size: 1.5rem;
	font-weight: 700;
	color: #31373a;
	letter-spacing: 0em;
	position: relative;
	line-height: 1.2;
}
a{
	color: #31373a;
}
img{
	width: 100%;
	max-width:100%;
	vertical-align:bottom;
	height: auto;
}

/* typography */
.hiragino{
	font-family: "ヒラギノ角ゴ ProN W3","HiraKakuProN-W3","ヒラギノ角ゴ Pro W3","HiraKakuPro-W3","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS Pgothic","Osaka",sans-serif,Helvetica, Helvetica Neue, Arial, Verdana , 'Noto Sans JP', sans-serif;;
}



.flex{
	display: flex;
	align-items: center;
	justify-content: center;
}


@font-face {
	font-family: 'signpainter';
	src: url('../font/signpainter.woff2') format('woff2');
  }
  .signpainter {
	font-family: signpainter;
  }
  @font-face {
	font-family: 'VentiCF-Bold';
	src: url('../font/venti/VentiCF-Bold.woff2') format('woff2');
  }



@font-face {
	font-family:'VentiCF-Medium';
	src: url('../font/venti/VentiCF-Medium.otf') format('opentype');
}


  .eng {
	font-family: VentiCF-Bold;
  }
  .no {
	font-family: VentiCF-Bold;
  }

  .medi{
	font-family: VentiCF-Medium;
  }
/*全共通*/

.slide-in {
	overflow: hidden;
	  display: inline-block;
  }
  
  .slide-in_inner {
	display: inline-block;
  
  }
  
  /*左右のアニメーション*/
  .leftAnime{
	  opacity: 0;/*事前に透過0にして消しておく*/
  }
  
  .slideAnimeLeftRight {
	animation-name:slideTextX100;
	animation-duration:0.8s;
	animation-fill-mode:forwards;
	  opacity: 0;
  }
  
  @keyframes slideTextX100 {
	from {
	transform: translateX(-100%); /*要素を左の枠外に移動*/
		  opacity: 0;
	}
  
	to {
	transform: translateX(0);/*要素を元の位置に移動*/
	  opacity: 1;
	}
  }
  
  .slideAnimeRightLeft {
	animation-name:slideTextX-100;
	animation-duration:0.8s;
	animation-fill-mode:forwards;
	  opacity: 0;
  }
  
  
  @keyframes slideTextX-100 {
	from {
	transform: translateX(100%);/*要素を右の枠外に移動*/
	  opacity: 0;
	}
  
	to {
	transform: translateX(0);/*要素を元の位置に移動*/
	  opacity: 1;
	}
  }

  
.fadeUp{
	animation-name:fadeUpAnime;
	animation-duration:0.5s;
	animation-fill-mode:forwards;
	opacity:0;
	}
	
	@keyframes fadeUpAnime{
	  from {
		opacity: 0;
	  transform: translateY(100px);
	  }
	
	  to {
		opacity: 1;
	  transform: translateY(0);
	  }
	}
	
	
	/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
	 
	.fadeUpTrigger{
		opacity: 0;
	}

	
/*-----------------------------------------------------------------------------
	PC
-----------------------------------------------------------------------------*/
@media screen and (min-width:768px){


	#wrap{
		overflow: hidden;
		z-index: 1001;
	}


	.pc{
		display: block;
	}
	.sp{
		display: none;
	}


main{
	position: relative;
    top: -80px;
}
/*-------------------------
セクションタイトル
-------------------------*/

.section_heading .eng{
	color: #5c8cc9;
	text-align: center;
	font-weight: bold;
	font-size: 40px;
}

.section_heading .eng span{
	font-weight: bold;
}
.section_heading .jp{
	font-weight: bold;
	text-align: center;
	font-size: 50px;
	margin-top: 2.0624vw;
    letter-spacing: -.04em;
}
.section_heading .jp span{
	font-weight: bold;
}
/*-------------------------
体験申し込みボタン
-------------------------*/
.trial_reserve_bt {
	width: 30.1022vw;
  /*  min-width: 433.4721px;*/
    margin: 0 auto;
    height: 9vw;
    position: relative;
   /* min-height: 90.2695px;*/
}

.trial_bt{
	position: absolute;
	top: 0;
	left: 0;
	transition: all .5s;
}

.trial_bt_hover:hover{
	opacity: 0;
	transition: all .5s;
}


}

/*-----------------------------------------------------------------------------
	SP
-----------------------------------------------------------------------------*/
@media screen and (max-width:767px){
	body{
		font-weight: 300;
	}
	#wrap{
		width: 100%;
		overflow: hidden;
	}
	.pc{
		display: none;
	}
	.sp{
		display: block;
	}
	main{
		position: relative;
		top: -16vw;
	}
.trial_reserve_bt{
	width: 66.6666667vw;
	min-width: unset;
	margin: 0 auto;
}

/*-------------------------
セクションタイトル
-------------------------*/

.section_heading .eng{
	color: #5c8cc9;
	text-align: center;
	font-weight: bold;
	font-size: 5.33vw;

}
.section_heading .jp{
	font-weight: bold;
	text-align: center;
	font-size: 6.6666667vw;
	margin-top: 3.6vw;
	letter-spacing: -.05em;

}

.section_heading .eng span{
	font-weight: bold;
}

.section_heading .jp span{
	font-weight: bold;
}
}


/*-----------------------------------------------------------------------------
	SP
-----------------------------------------------------------------------------*/
@media screen and (max-width:1080px) and (min-width:768px) {
    .section_heading .jp {
        font-size: 3.8rem;
        margin-top: 1.0624vw;
    }

    .section_heading .eng {
        font-size: 3.5rem;
}
}