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

/*************************************************************************************************************************
* デフォルト：640px以下用の記述
*************************************************************************************************************************/
main,
.topTxt,
#reason,
#step,
#price,
#use,
#info{ padding:0 10px;}


/* main
**********************************************************************/
main{ display: block; overflow: hidden; }
main .wrap{ padding:50px 0; position: relative;}
main .wrap:before{ content: ""; display: block; background: url("img/main_bg01.png") no-repeat; background-size: contain; width: 600px; height: 400px; position: absolute; top: 30px; right: -230px;}

main .txt{ position: relative;}
main .sec_icon{ width: 132px; position: absolute; top: -40px; left:350px; z-index: 10; }
@media print, screen and (max-width:641px){ main .sec_icon{ left:270px;} }

main .txt h1{ font-size: 30px; font-weight: bold; line-height: 1; letter-spacing: 4px;}
main .txt h1 .big{ font-size: 40px;}
main .txt h1 .big span{ font-family: "myriad", sans-serif; font-size: 70px; font-weight: 600;}

main .txt p{ margin-top: 28px; font-size: 16px;}
main .txt .btn{ margin: 34px auto 0;}

main .imgBox{ margin-top: 36px; position: relative; }
main .imgBox img{ max-width: 809px;}


/* topTxt
**********************************************************************/
.topTxt{ background: #1e9696; color: #fff; }

.topTxt .wrap{ justify-content: space-between; max-width: 800px; padding:60px 0; }
.topTxt .imgBox{ max-width: 200px; margin:0 auto; position: relative; overflow: hidden; border-radius: 33px; z-index: 1;}
.topTxt .imgBox:before{ content: ""; display: block; background: #f5fafa; width: 90%; height: 98%; position: absolute; top: 9px; left: 10px;}

.topTxt .imgBox img{ display: block; position: relative; z-index: 100;}
.topTxt .imgBox video{ width: 91%; position: absolute; top: 10px; left: 9px;}

.topTxt dl{ margin-top:40px;}
.topTxt dt{ font-size: 20px; font-weight: bold; text-align: center; }
.topTxt dd{ margin-top: 16px; line-height: 2;}

.topTxt .btn{ margin: 40px auto 0; line-height: 1.8;}


/* reason
**********************************************************************/
#reason ul{ display:flex; flex-wrap:wrap; justify-content: space-between;}
#reason li{ margin-top: 20px; padding-top: 120px; background-size: 100px!important;}
#reason li:first-child{ margin: 0; }

#reason li:nth-child(1){ background: url("img/reason_img01.png") no-repeat center top; }
#reason li:nth-child(2){ background: url("img/reason_img02.png") no-repeat center top; }
#reason li:nth-child(3){ background: url("img/reason_img03.png") no-repeat center top; }

#reason h3{ font-size: 16px; font-weight: bold; text-align: center;}
#reason p{ margin-top: 12px; font-size: 12px; color: #666; letter-spacing: 0;}


/* case
**********************************************************************/
#case{ background: url("img/case_bg01.png") no-repeat center top; background-size: cover;}
#case .wrap{ max-width: none; }
#case .secTit{ color: #fff;}

#case ul{ flex-wrap:wrap; }
#case li{ background: #fff; background-size: 70px auto!important; padding: 20px 20px 20px 120px; border-top: #1e9696 2px solid; }
#case li:first-child{ border-top: none;}

#case li:nth-child(1){ background: url("img/case_img01.png") no-repeat 26px 30px,#fff;}
#case li:nth-child(2){ background: url("img/case_img02.png") no-repeat 26px 30px,#fff;}
#case li:nth-child(3){ background: url("img/case_img03.png") no-repeat 26px 30px,#fff;}
#case li:nth-child(4){ background: url("img/case_img04.png") no-repeat 26px 30px,#fff;}

#case h3{ font-size: 16px; font-weight: bold; color: #1e9696; }
#case p{ margin-top: 14px; letter-spacing: 0;}


/* step
**********************************************************************/
#step ul{ flex-wrap:wrap; justify-content: space-between; position: relative;}
#step ul:before{ content: ""; display: none; background: #1e9696; width: 80%; height: 2px; position: absolute; top: 38px; left: 50%; -webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);}
#step li{ padding-top: 170px; margin-top: 30px; background-size: 130px auto!important; position: relative; text-align: center;}

#step li:nth-child(1){ background: url("img/step_img01.svg") no-repeat center 78px;}
#step li:nth-child(2){ background: url("img/step_img02.svg") no-repeat center 78px;}
#step li:nth-child(3){ background: url("img/step_img03.svg") no-repeat center 78px;}
#step li:nth-child(4){ background: url("img/step_img04.svg") no-repeat center 78px;}

#step li:before{ content: ""; display: block; background-size: cover!important; width: 38px; height: 57px; margin-left: -19px; position: absolute; top: 0; left: 50%; }

#step li:nth-child(1):before{ background: url("img/step_tit01.png") no-repeat; }
#step li:nth-child(2):before{ background: url("img/step_tit02.png") no-repeat; }
#step li:nth-child(3):before{ background: url("img/step_tit03.png") no-repeat; }
#step li:nth-child(4):before{ background: url("img/step_tit04.png") no-repeat; }

#step h3{ font-size: 16px; font-weight: bold;}
#step p{ margin-top: 12px; font-size: 12px; color: #666; letter-spacing: 0;}


/* price
**********************************************************************/
#price{ background: #f5fafa;}
#price .mTxt{ margin-bottom: 36px; font-size: 18px; font-weight: bold; color: #666; text-align: center;}

#price .detail{ justify-content: space-between;}
#price .detail,
#price .txt{ max-width: 520px; margin:0 auto;}

#price .detail > li{ background: #fff; margin-top: 10px; padding:24px 10px 20px; text-align: center; border: #eee 1px solid;}
#price .detail > li:first-child{ margin-top: 0;}

#price h3{ margin-bottom: 20px;  font-size: 16px;}
#price .detail p{ font-size: 32px; color: #1e9696; }

#price .big{ display: inline-block; font-family: "myriad", sans-serif; margin:0 4px; font-size: 72px; font-weight: bold; line-height:1; letter-spacing: -1px;}
#price .sms .big span{ letter-spacing: -8px;}
#price .small{ display: inline-block; margin: 30px 0 0 4px; font-size: 10px; color: #666; vertical-align: top; }

#price .free{ margin-top: -14px; display:flex;}
#price .free li{ width: 50%; border-left: #eee 1px solid;}
#price .free li:first-child{ border-left: none;}

#price .free h4{ margin-bottom: 4px; font-size: 12px; color: #666;}
#price .free p{ font-size: 20px;}
#price .free .big{ font-size: 64px;}

#price .txt{ text-align: right;}
#price .attention{ margin-top: 6px; font-size: 12px; color: #666; letter-spacing: 0;}


/* use
**********************************************************************/
#use .wrap{ padding-bottom: 20px;}
#use ul{display: flex; flex-wrap: wrap; margin: -3.33% 0 0 -3.33%;}
#use li{ background: #f5fafa; width: 46.6%; margin: 3.33% 0 0 3.33%; border: #eee 1px solid; }
#use li a{ display: block; padding: 14px 14px 16px 14px;}

#use li p{ margin-top: 12px; font-size: 14px; font-weight: bold; color: #1e9696; text-align: center; letter-spacing: 0;}
#use li p span{ display: block; margin-top: 10px; font-size: 12px; color: #666;}


/* info
**********************************************************************/
#info .wrap{ max-width: 800px; }

#info ul{ margin-top: -10px; border-bottom: #eee 1px solid;}
#info li{ padding:16px 0; border-top: #eee 1px solid;}

#info ul div{ display:flex; }

#info .day{ font-family: 'Lato', sans-serif; color: #999;}
#info .group{ background: #1e9696; width: 80px; height: 24px; padding-top: 3px; margin: 2px 0 0 16px; font-size: 10px; color: #fff; text-align: center; border-radius: 12px; vertical-align: top; letter-spacing: 0;}
#info p{ margin:10px 0 0; letter-spacing: 0;}
#info a{ text-decoration: underline;}


/*************************************************************************************************************************
* 641px以上用の記述
*************************************************************************************************************************/
@media print, screen and (min-width:641px){
	br.sppc{ display: none;}

	/* main
	**********************************************************************/
	main .txt h1{ font-size: 38px; }
	main .txt h1 .big{ font-size: 60px;}
	main .txt h1 .big span{ font-size: 90px; }


	/* reason
	**********************************************************************/
	#reason li{ width: 30%; margin-top: 0; padding-top: 164px; background-size: 140px!important;}


	/* case
	**********************************************************************/
	#case .wrap{ padding-bottom:120px;}


	/* step
	**********************************************************************/
	#step ul{ display:flex; }
	#step ul:before{ display: block;}
	#step li{ width: 22%; margin: 0; padding-top: 214px;}

	#step li:nth-child(1){ background: url("img/step_img01.svg") no-repeat center 108px;}
	#step li:nth-child(2){ background: url("img/step_img02.svg") no-repeat center 108px;}
	#step li:nth-child(3){ background: url("img/step_img03.svg") no-repeat center 108px;}
	#step li:nth-child(4){ background: url("img/step_img04.svg") no-repeat center 108px;}

	#step li:nth-child(2) br.sp375{ display: none;}


	/* use
	**********************************************************************/
	#use .wrap{ padding-bottom: 60px;}
	#use li{ width: 30%;}
	#use li a{ padding: 20px 20px 24px 20px;}


	/* info
	**********************************************************************/
	#info .wrap{ padding-bottom: 120px;}

	#info li{ display:flex; }
	#info ul div{ justify-content: space-between; width: 23%; }
	#info .group{ margin-left: 0;}
	#info p{ margin:0 0 0 22px; }
}


@media print, screen and (min-width:760px) {
	main .wrap:before{ top: 0;}
	main .txt .btn{ margin: 34px 0 0;}
	main .imgBox{ width: 600px; margin-top: 0; position: absolute; top: 40px; right: -240px;}
}


@media print, screen and (min-width:880px) {

	/* main
	**********************************************************************/
	main .wrap{ padding:148px 0; }
	main .wrap:before{ width: 900px; height: 632px; margin-top:0; right: -340px; }
	main .imgBox{ width: auto; top: 66px; right: -300px; }


	/* topTxt
	**********************************************************************/
	.topTxt .wrap{ display:flex; padding:80px 0; }
	.topTxt .imgBox{ width: 25%; margin: 0; }

	.topTxt dl{ width: 68%; margin-top:40px;}
	.topTxt dt{ text-align: left; }
	.topTxt .btn{ margin: 30px 0 0;}
}


/*************************************************************************************************************************
* 980px以上用の記述
*************************************************************************************************************************/
@media print, screen and (min-width:980px) {
	br.sppc{ display: block;}


	/* main
	**********************************************************************/
	main .wrap:before{ right: -240px;}
	main .imgBox{ right: -200px;}


	/* case
	**********************************************************************/
	#case ul{ display:flex; }
	#case li{ background-size: 84px auto!important; width: 50%; padding: 40px 40px 40px 160px; border-left: #1e9696 2px solid; }
	#case li:nth-child(odd){ border-left: none;}
	#case li:nth-child(-n+2){ border-top: none;}

	#case li:nth-child(1){ background: url("img/case_img01.png") no-repeat 38px 54px,#fff;}
	#case li:nth-child(2){ background: url("img/case_img02.png") no-repeat 38px 54px,#fff;}
	#case li:nth-child(3){ background: url("img/case_img03.png") no-repeat 38px 54px,#fff;}
	#case li:nth-child(4){ background: url("img/case_img04.png") no-repeat 38px 54px,#fff;}


	/* price
	**********************************************************************/
	#price .detail{ display:flex; }
	#price .detail,
	#price .txt{ max-width: none;}

	#price .detail > li{ width: 32%; margin-top:0; }
	#price h3{ margin-bottom: 26px;  }


	/* use
	**********************************************************************/
	#use li a .img{ overflow: hidden;}
	#use li a .img img{ transition: all .3s ease-in-out 0s; }
	#use li a:hover .img img{ transform: scale(1.075);}

	#use li p{ margin-top: 18px; font-size: 16px; }
	#use li p span{ margin-top: 14px; font-size: 14px; }


	/* info
	**********************************************************************/
	#info a:hover{ text-decoration: none; }
}


@media print, screen and (min-width:1020px) {

	/* main
	**********************************************************************/
	main .imgBox{ right: -170px;}
}