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

/*************************************************************************************************************************
* デフォルト：640px以下用の記述
*************************************************************************************************************************/
.detail{ background: #f5fafa; padding:0 10px;}
.detail .wrap{ padding: 40px 0 60px;}

article .secTit{ margin-bottom: 20px; font-size: 24px; }

.innerFlow{ background: #fff; margin-top: 34px;}
.innerFlow li{ align-items: flex-start; justify-content: space-between; padding:30px 20px 20px; position: relative; border-top: #eee 1px solid;}
.innerFlow li:first-child{ border-top: none;}

.innerFlow li:before,
.innerFlow li:after{ content: ""; display: block; width: 0; height: 0; position: absolute; top: -1px; left: 50%; }
.innerFlow li:before{ margin-left: -8px; border: 15px solid transparent; border-top: 15px solid #eee; }
.innerFlow li:after{ margin-left: -7px; border: 14px solid transparent; border-top: 14px solid #fff;}
.innerFlow li:first-child:before,
.innerFlow li:first-child:after{ display: none;}

.innerFlow .txt{ position: relative; padding: 0 0 0 64px;}
.innerFlow .txt:before{ content: ""; display: block; background-size: contain!important; width: 40px; height: 78px; position: absolute; top: 8px; left: 0;}

.innerFlow li:nth-child(1) .txt:before{ background: url("img/flow_num01.png") no-repeat;}
.innerFlow li:nth-child(2) .txt:before{ background: url("img/flow_num02.png") no-repeat;}
.innerFlow li:nth-child(3) .txt:before{ background: url("img/flow_num03.png") no-repeat;}
.innerFlow li:nth-child(4) .txt:before{ background: url("img/flow_num04.png") no-repeat;}

.innerFlow h3{ margin-bottom: 10px; font-size: 18px; font-weight: bold; color: #1e9696;}
.innerFlow li p{ letter-spacing: 0;}
.innerFlow li p a{ text-decoration: underline;}
.innerFlow li .btn{ margin: 20px 0 0;}

.innerFlow img{ display: block; max-width: 342px; margin: 20px auto; border: #eee 1px solid;}

.cms{ margin-top: 60px;}
.cms .secTit{ font-size: 20px; }
.cms ul{ justify-content: space-between; margin-top: 40px; }

.cms li{ background-size: 80px!important; padding: 126px 20px 40px; position: relative; text-align: center;}
.cms li:nth-child(1){ background: url("img/cms_img01.png") no-repeat center 30px,#fff; }
.cms li:nth-child(2){ background: url("img/cms_img02.png") no-repeat center 30px,#fff; margin-top: 15px; }

.cms h4{ margin-bottom: 8px; font-size: 16px; font-weight: bold;}
.cms p a{ color: #1e9696;}
.cms .btn{ margin-top: 22px;}

.cms .soon{ background: rgba(0,0,0,0.9); width: 100%; height: 100%; position: absolute; top: 0; left: 0; color: #fff; font-size: 16px; font-weight: bold; }
.cms .soon p{ width: 100%; position: absolute; top: 50%; left: 50%; -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%);}


/*************************************************************************************************************************
* 641px以上用の記述
*************************************************************************************************************************/
@media print, screen and (min-width:641px){
	.detail .wrap{ padding: 66px 0 120px;}

	.innerFlow li{ display:flex; padding:40px; }
	.innerFlow .txt{ width: 64%; }
	.innerFlow img{ width: 33%; margin: 0;}

	.cms{ margin-top: 85px;}
	.cms .secTit{ font-size: 24px; }
}


@media print, screen and (min-width:720px){
	.cms ul{ display:flex; margin-top: 50px;}
	.cms li{ width: 48%; }
	.cms li:nth-child(2){ margin-top: 0;}
}


/*************************************************************************************************************************
* 980px以上用の記述
*************************************************************************************************************************/
@media print, screen and (min-width:980px){
	.innerFlow .txt{ padding: 20px 0 0 96px;}
	.innerFlow .txt:before{ width: 56px; top: 28px;}

	.innerFlow p a:hover{ text-decoration: none;}

	.cms p a:hover{ text-decoration: underline;}
}