@charset "UTF-8";

/* indexkv ---------------------------------------*/

.indexkv-wrapper{}

.indexkv{
	padding:35px 0 35vw;
	position:relative;
	background: url(../img/kv_img.png) no-repeat center bottom;
	background-size: 100%;
}

.indexkv-lead{
	font-size:15px;
	font-weight:bold;
	line-height: 1.4;
	padding: 11px 13px;
	border-radius: 40px;
	background-color: #15b7b7;
	color: #fff;
	text-align:center;
	max-width: 300px;
	margin: 0 auto 20px;
}

.indexkv-message{
	margin: 0 auto 30px;
	max-width: 300px;
}

.indexkv-logo{
	margin: 0 auto 30px;
	max-width: 240px;
}

.indexkv-badge{
}


/* concept ---------------------------------------*/

.indexconcept{}

.indexconcept-head{
	text-align: center;
	background: #000;
	padding: 23px 0px 40px;
	background-color: #11609a;
	color: #fff;
	line-height: 1;
}

.indexconcept-shoulder{
	font-size:12px;
	margin-bottom: 10px;
	font-family: 'Arial';
	letter-spacing:0.1em;
}

.indexconcept-title{
	font-size:24px;
	font-family:HiraginoSans-W7;
	letter-spacing:0.1em;
}

.indexconcept-fukidashi{
	background: url(../img/bg_dot.png) repeat left top;
	background-size: 33px;
	padding: 20px 15px 90px;
	position:relative;
}

.indexconcept-fukidashi-comment{
	max-width: 400px;
	margin: 0 auto;
}

.indexconcept-fukidashi-illust{
	position:absolute;
	right: 0;
	bottom: -10px;
	width: 130px;
}

/* kikkake ---------------------------------------*/

.indexkikkake{
  padding: 46.5px 8px 11px;
  background-color: #15b7b7;
  color: #fff;
  text-align:center;
}

.indexkikkake-head{margin-bottom: 30px;}

.indexkikkake-title{
	font-family: HiraginoSans-W7;
	font-size:26px;
	letter-spacing:0.1em;
	position:relative;
	display: inline-block;
	margin-bottom: 10px;
}

.indexkikkake-title span{font-size:32px;}

.indexkikkake-title::before,
.indexkikkake-title::after{
	display:block;
	content:'';
	background:#fff;
	background-size:100%;
	width:4px;
	height:46px;
	position:absolute;
	top:3px;
}

.indexkikkake-title::before{
	transform:translate(0,0) rotate(-25deg);
	left:-20px;
}

.indexkikkake-title::after{
	transform:translate(0,0) rotate(25deg);
	right:-20px;
}

.indexkikkake-text{
	font-size:14px;
	line-height: 2;
}

.indexkikkake-image{
	background: #fff;
	padding: 20px 10px;
	border-radius:10px;
}


/* howto ---------------------------------------*/

.indexhowto{
	padding: 40px 0;
	margin-bottom: 30px;
}

.indexhowto-title{
	text-align:center;
	margin-bottom: 30px;
}

.indexhowto-title img{
	width: 180px;
}

.indexhowto-step{
	position:relative;
	padding: 0 20px 0 40px;
}

.indexhowto-step-line{
	position:absolute;
	left: 10px;
	top: 50%;
	transform: translate(0,-50%);
	width: 14px;
}

.indexhowto-step-list{}

.indexhowto-step-item{
	padding: 5px 6px 20px;
	border-radius: 8px;
	border: solid 1px #cce1e8;
	background-color: #f5fbfd;
	margin-bottom: 16px;
}

.indexhowto-step-flex{
	display:flex;
	justify-content:space-between;
	align-items:center;
	flex-wrap:wrap;
}

.indexhowto-step-image{width: 100px;}

.indexhowto-step-head{
	width: calc(100% - 100px);
	color: #11609a;
	line-height: 1.5;
}

.indexhowto-step-head p{
	font-family: Arial;
	font-size:12px;
	font-weight:bold;
	margin-bottom: 5px;
}

.indexhowto-step-title{
	font-family: HiraginoSans-W7;
	font-size: 18px;
	letter-spacing:0.07em;
	padding-right: 5px;
}

.indexhowto-step-text{
	font-size:13px;
	line-height: 1.9;
	padding: 2px 10px 0 15px;
	letter-spacing:0.1em;
}

.indexhowto-step-text-strong{
	color: #F79C20;
	font-weight:bold;
	letter-spacing:0.1em;
	font-size:14px;
	line-height: 1.7;
}

/* indexrecommend ---------------------------------------*/

.indexrecommend-inner{
	padding: 70px 20px 10px;
	background: #F5FBFD;
	border-top: 1px solid #CCE1E8;
	position:relative;
}

.indexrecommend-medal{
	position:absolute;
	left: 50%;
	top: -50px;
	transform: translate(-50%,0);
	width: 96px;
}

.indexrecommend-title{
	max-width: 301px;
	margin: 0 auto;
	padding: 0 0px 37px;
}

.indexrecommend-list{}

.indexrecommend-item{
	margin-bottom: 20px;
	border-radius:10px;
	border: 1px solid #15B7B7;
	overflow: hidden;
}

.indexrecommend-item-head{
	background: #15B7B7;
	color: #fff;
	line-height: 1;
	padding: 16px 20px;
}

.indexrecommend-item-title{font-weight:bold;}

.indexrecommend-item-detail{
	background: #fff;
	padding: 15px 25px;
}

.indexrecommend-item-detail p{
	font-size:13px;
	line-height: 2;
	text-align: justify;
}


/* indexcta ---------------------------------------*/

.indexcta{
	background:url(../img/bg_dot_transparent.png) repeat center top #F79C20;
	background-size: 33px;
	color: #fff;
	text-align:center;
}

.indexcta-inner{
	padding: 40px 20px;
}

.indexcta-image{}
.indexcta-image img{
	width: 280px;
}

.indexcta-head{margin-bottom: 20px;}

.indexcta-title{
	font-weight:bold;
	font-size:20px;
	display: inline-block;
	position:relative;
}

.indexcta-title::before,
.indexcta-title::after{
	display:block;
	content:'';
	background:#fff;
	background-size:100%;
	width:4px;
	height:46px;
	position:absolute;
	top:13px;
}

.indexcta-title::before{
	transform:translate(0,0) rotate(-25deg);
	left:-20px;
}

.indexcta-title::after{
	transform:translate(0,0) rotate(25deg);
	right:-20px;
}

.indexcta-btn{}

.indexcta-link{margin-top: 30px;}

.indexcta-link a{
	font-size:14px;
	display: inline-block;
	color: #fff;
	text-decoration:underline;
}

.indexcta-link a:hover{text-decoration:none;}


/* indexsns ---------------------------------------*/

.indexsns{
	padding: 40px 20px 16px;
	text-align:center;
}

.indexsns-inner{
	padding: 30px 30px 40px;
	border-radius: 8px;
	border: solid 1px #cce1e8;
	background-color: #f5fbfd;
	margin-bottom: 16px;
}

.indexsns-title{
	font-size:20px;
	font-weight:bold;
	color: #15B7B7;
	line-height: 1.7;
	margin-bottom: 20px;
}

.indexsns-head p{
	color: #98A6B5;
	font-size:12px;
	line-height: 1.5;
}

.indexsns-list{
	text-align:center;
	font-size:0px;
	margin-top: 20px;
}

.indexsns-list li{
	display: inline-block;
	margin: 0 20px;
}


/* indexfixedcta ---------------------------------------*/

.indexfixedcta{
	position: fixed;
	left: 0;
	bottom: 10px;
	width: 100%;
	z-index: 100;
	text-align:center;
}

.indexfixedcta-comment{
	display: inline-block;
	background: #F79C20;
	color: #fff;
	font-size:11px;
	font-weight:bold;
	line-height: 1.3;
	padding: 5px 10px;
	border-radius:10px;
	border:1px solid #fff;
	margin-bottom: 10px;
	box-shadow:0px 3px 5px rgba(0,0,0,0.3);
	position:relative;
}

.indexfixedcta-comment::before{
	display:block;
	content:'';
	border-right:6px solid transparent;
	border-left:6px solid transparent;
	border-top:8px solid #fff;
	position:absolute;
	left:50%;
	bottom: -8px;
	transform:translate(-50%,0);
}

.indexfixedcta-comment::after{
	display:block;
	content:'';
	border-right:6px solid transparent;
	border-left:6px solid transparent;
	border-top:8px solid #F79C20;
	position:absolute;
	left:50%;
	bottom: -6px;
	transform:translate(-50%,0);
}

.indexfixedcta .btn{height: 44px;}
.indexfixedcta .btn::after{
	width: 20px;
	height: 20px;
	right: 10px;
}



/* pc */
@media screen and (min-width: 769px){


}