/*=================================================
 * CSS for PC
 * ================================================= */

/** ALL **/
body{	background: #fff;}
header{	height: 120px; margin-bottom: 0;}
.pan{
	position: relative;
	margin-top: -24px;
	z-index: 1;
}


/** function **/

#function{
	padding: 80px 0 0 0;
}

.slide_bg h3{
	position: relative;
	font-family: "Rounded Mplus 1c";
	font-size: 34px;
	font-weight: 400;
	line-height: 1.2;
	text-align: center;
	margin: 0 auto 50px auto;
	padding: 0 0 20px 0;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}
.slide_bg h3:before{
	content: "";
	width: 340px;
	height: 2px;
	background: #f683c6;
	position: absolute;
	bottom: -2px;
	right: calc(50% - 170px);
	border-radius: 1px;
}
.slide_bg h3:after{
	content: "";
	width: 20px;
	height: 20px;
	background: #fff;
	border-left: 2px solid #f683c6;
	border-bottom: 2px solid #f683c6;
	position: absolute;
	bottom: -13px;
	right: calc(50% - 10px);
	-webkit-transform: rotate(-45deg);
	   -moz-transform: rotate(-45deg);
	    -ms-transform: rotate(-45deg);
	     -o-transform: rotate(-45deg);
	        transform: rotate(-45deg);
}
.slide_bg h3 br{	display: none;}
.slide_p{
	font-size: 14px;
	line-height: 20px;
	text-align: center;
	margin: 0 0 45px 0;
}
.slide_p br{	display: none;}


/** top_pc **/

#top_pc{
	width: 600px;
	height: 338px;
	font-size: 0;
	line-height: 0;
	margin: 0 auto 60px auto;
	padding: 13px 0 0 0;
	background: url(img/waku_pc.png) no-repeat top center;
	background-size: 100% auto;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}
#top_pc .a_slider{
	width: 465px;
	margin: 0 auto;
}
#top_pc .a_slider img{
	width: 100%;
	height: auto;
}


/** func_list **/

.func_list{
	width: 1100px;
	font-size: 0;
	line-height: 0;
	margin: 0 auto 30px auto;
}
.func_list ul{
	display: flex;
	flex-wrap: wrap;
	width: 100%;
}
.func_list li{
	display: inline-flex;
	justify-content: flex-start;
	width: calc(100% / 3 - 60px);
	margin: 0 30px 50px 30px;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}
.func_list li div{
	order: 2;
	flex: 1;
	text-align: left;
}
.func_list li div h3{
	font-family: "Rounded Mplus 1c";
	font-size: 18px;
	font-weight: normal;
	line-height: 1.2;
	color: #89622b;
	margin: 0 0 5px 0;
}
.func_list li div p{
	font-size: 13px;
	line-height: 1.6;
}
.func_list li img{
	order: 1;
	width: 50px;
	height: 42px;
	margin-right: 15px;
}


/** btm_pc **/

#btm_slide{
	padding: 100px 0;
	background: #fff3fa;
}
#btm_slide h3:after{	background: #fff3fa;}

#btm_slide_in{
	display: flex;
	justify-content: center;
}
#btm_pc{
	width: 834px;
	height: 470px;
	font-size: 0;
	line-height: 0;
	margin: 0 20px 0 0;
	padding: 15px 0 0 0;
	background: url(img/waku_pc.png) no-repeat top center;
	background-size: 100% auto;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}
#btm_pc .c_slider{
	width: 641px;
	margin: 0 auto;
}
#btm_pc .c_slider img,
#btm_sp .c_slider img{
	width: 100%;
	height: auto;
}
#btm_sp{
	width: 227px;
	height: 470px;
	font-size: 0;
	line-height: 0;
	margin: 0 0 0 20px;
	padding: 47px 0 0 0;
	background: url(img/waku_sp.png) no-repeat top center;
	background-size: 100% auto;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}
#btm_sp .c_slider{
	width: 199px;
	margin: 0 auto;
}





/*=================================================
 * CSS for SP
 * ================================================= */

@media screen and (max-width: 650px) {

	.pan{ margin-top: 0px;}

	/** ALL **/
	body::before,
	body::after{	display: none;}
	header,header.fixed{	height: 0;}
	main{	padding: 78px 0 0 0;}

	/** function **/
	#function{	padding: 30px 0 0 0;}
	.slide_bg{
		padding: 0 10px;
	}
	.slide_bg h3{
		width: auto;
		font-size: 20px;
		line-height: 1.2;
		margin: 0 0 30px 0;
		padding: 0 0 10px 0;
	}
	.slide_bg h3 br{	display: inline;}
	.slide_bg h3:before{
		content: "";
		width: 150px;
		height: 2px;
		bottom: -2px;
		right: calc(50% - 75px);
	}
	.slide_bg h3:after{
		width: 14px;
		height: 14px;
		bottom: -9px;
		right: calc(50% - 7px);
	}
	.slide_p{
		font-size: 13px;
		line-height: 20px;
		text-align: center;
		margin: 0 0 25px 0;
	}
	.slide_p br{	display: inline;}


	/** top_pc **/
	#top_pc,
	#btm_pc{
		width: 80%;
		height: auto;
		aspect-ratio: 600 / 338;
		font-size: 0;
		line-height: 0;
		margin: 0 auto 30px auto;
		padding: 1.8vw 9vw 0 9vw;
		background: url(img/waku_pc.png) no-repeat top center;
		background-size: 100% auto;
		-webkit-box-sizing: border-box;
		   -moz-box-sizing: border-box;
		        box-sizing: border-box;
	}
	#top_pc .a_slider,
	#btm_pc .a_slider{
		width: 100%;
		margin: 0 auto;
	}
	#top_pc .a_slider img,
	#btm_pc .a_slider img{
		width: 100%;
		height: auto;
	}


	/** func_list **/
	.func_list{
		width: auto;
		margin: 0;
		padding: 0 20px;
	}
	.func_list ul{
		display: block;
	}
	.func_list li{
		display: flex;
		width: 100%;
		margin: 0 0 25px 0;
		-webkit-box-sizing: border-box;
		   -moz-box-sizing: border-box;
		        box-sizing: border-box;
	}
	.func_list li div h3{
		font-size: 16px;
		margin-bottom: 3px;
	}
	.func_list li div p{
		font-size: 13px;
	}
	.func_list li img{
		width: 40px;
		height: 33px;
		margin-right: 10px;
	}



	/** btm_pc **/

	#btm_slide{
		padding: 30px 10px;
		background: #ffedfb;
	}
	#btm_slide h3:after{	background: #ffedfb;}

	#btm_slide_in{
		display: block;
	}
	#btm_sp{
		width: 180px;
		height: 373px;
		margin: 0 auto;
		padding-top: 37px;
	}
	#btm_pc .c_slider{
		width: 100%;
		margin: 0 auto;
	}
	#btm_sp .c_slider{
		width: 158px;
	}
	
}