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

@media screen and (max-width: 768px) {
	body {
		font-size:4vw !important; 
	}
	#wrap{
		margin:0;
	}
	.img-100{
		width:100%;
		height:auto;
	}
	.img-90{
		width:90%;
		height:auto;
		margin:0 5%;
	}
	.img-50{
		width:50%;
		height:auto;
		margin:0 25%;
	}
	.sp-img-w80{width:80px;}
	.sp-none{
		display:none;
	}
	header{
		display: none;
	}
	#wrap section{
		width:94%;
		margin:0 3%;
	}
	.flex-bt{
		display: block;
	}
	
	/*font*/
	
	.f-left-sp{text-align:left !important;}
	
	/*font*/
	.fs-15{font-size:3vw;}
	.fs-24{font-size:4vw;}
	.fs-28{font-size:6vw;}
	.fs-32{font-size:7vw;}
	.fs-38{font-size:8vw;}
	.fs-48{font-size:12vw !important;}
	.fs-64{font-size:10vw;}
	.fs-74{font-size:12vw;}
	
	/*margin*/
	.mb10{margin-bottom:5px;}
	.mb20{margin-bottom:10px;}
	.mb40{margin-bottom:20px;}
	.mb80{margin-bottom:40px;}
	.mg40{margin:20px;}
	.mr20{ margin-right:10px;}
	.mr40{ margin-right:20px;}
	.sp-mb20{margin-bottom:20px;}
	
	/*padding*/
	.pd20{padding:10px 3%;}
	.pd40{padding:10px 5%;}
	.ptb40{padding:20px 0;}
	.ptb80{padding:40px 0;}
	
	/*block_three*/
	.w60{width:100%;}
	.w40 li{width:90%;}
	.w50 li{width:98%;}
	
	.sp-block{display:block;}

	/*H2*/
	h2{
		font-size:7.5vw;
		padding:0 0.5em;
		display:block;
	}
	/*点線大*/
	h2 .inner_b::before, h2 .inner_b::after{
		width: 30px;
		height: 57px;
		bottom:0;
	}
	h2 .line_kon::before{
		background: url(../images/line_kon_l.png) left bottom no-repeat;
		background-size: 30px 57px;
	}
	h2 .line_kon::after{
		background: url(../images/line_kon_r.png) left bottom no-repeat;
		background-size: 30px 57px;
	}
	h2 .line_blue::before{
		background: url(../images/line_blue_l.png) left bottom no-repeat;
		background-size: 30px 57px;
	}
	h2 .line_blue::after{
		background: url(../images/line_blue_r.png) left bottom no-repeat;
		background-size: 30px 57px;
	}
	/*点線小*/
	h2 .inner_s::before, h2 .inner_s::after{
		width: 15px;
		height: 31px;
		bottom:5px;
	}
	h2 .inner_s::before{
		left:3em;
	}
	h2 .inner_s::after{
		right:3em;
	}
	h2 .line_red::before{
		background: url(../images/line_red_l.png) left bottom no-repeat;
		background-size: 15px 31px;
	}
	h2 .line_red::after{
		background: url(../images/line_red_r.png) left bottom no-repeat;
		background-size: 15px 31px;
	}
	h2 .line_konS::before{
		background: url(../images/line_konS_l.png) left bottom no-repeat;
		background-size: 15px 31px;
		margin-left:-1.5em;
		bottom:0;
	}
	h2 .line_konS::after{
		background: url(../images/line_konS_r.png) left bottom no-repeat;
		background-size: 15px 31px;
		margin-right:-1.5em;
		bottom:0;
	}
	/*吹き出し*/
	.fuki p{
		font-size: 6vw;
		padding: 0.25em 0.5em;
	}
	.fuki_bgblue p{
		margin:0 0 20px 0;
	}
	/*H3*/
	h3{
		font-size:7vw;
	}
	.h3_line::before {
		width:30px;
		height: 2px;
	}
	/*====================================
	 header
	====================================*/
	header {
		padding: 10px 0;
		height:30px;
		position:relative;
	}
	header .container {
		max-width: 94%;
		padding:0 3%;
	}
	header .container .logo img {
		height: 20px;
	}
	header .container .tel img {
		height: 20px;
	}
	/*main*/
	.main{
		padding:0;
		background:none;
	}
	
	/*about*/
	.about{
		border:3px solid #36abfc;
		padding: 20px 5% 10px 5%;
	}
	.about .qtt{
		margin: 0 0 0 -25px;
		width:50px;
		line-height: 50px;
		top:-50px;
	}
	.about h3{
		font-size: 6vw;
	}
	.about p{
		font-size: 3.5vw;
	}
	
	/*reason*/
	.reason{
		background: #eaebdb;
		width: 100%;
		padding: 0;
		min-height: auto;
		border-radius: 0 0 20px 20px ;
	}
	.reason h3{
		font-size: 6.5vw;
		padding: 1em 0 0.5em 0;
	}
	.reason h3:after{
		width: 30px;
		height: 2px;
	}
	.reason ul{
		padding:0 5%;
	}
	.reason li{
		font-size: 4vw;
		padding: 0 0 15px 50px;
	}
	.reason li:nth-child(1), .reason li:nth-child(2), .reason li:nth-child(3){
		background-size: 40px auto;
	}
	/*pack*/
	#wrap .menu section{
		width: 94%;
	}
	.pack{
		width: 100%;
		padding: 0 0 20px 0;
		margin: 0 0 20px 0;
	}
	.pack .ttl{
		font-size:6.5vw;
		margin: 15px 0;
	}
	.pack .free{
		font-size: 18px;
	}
	.pack .price{
		font-size: 4.5vw;
	}
	.pack .price span{
		font-size: 10vw;
	}
	.pack .cv-btn{
		width: calc(100% - 60px);
		padding: 10px;
		margin: 0 auto;
	}
	.pack .cv-btn a{
		font-size: 6vw;
	}
	/*option*/
	.otoku{
		padding: 1rem 3%;
		font-size: 18px;
	}
	.otoku .fs-32{
		font-size: 7vw;
	}
	.option{
		padding: 0 3%;
		margin: 0 auto 20px auto;
		width: 100%;
	}
	.option li{
		padding:  10px 0;
		margin: 0;
	}
	.option li:last-child{
		border-bottom: none;
		padding: 10px 0;
	}
	.option li h3{
		font-size: 20px;
		margin: 0;
	}
	.option li p{
		font-size: 13px;
	}
	.option li .f-mdl s{
		font-size: 17px;
	}
	.option li .fc-red{
		font-size: 28px;
	}
	.more{
		width: 100%;
	}
	.more .fs-28{
		font-size: 6vw;
	}
	.more ul{
		padding: 0 0 10px 0;
		display: block; /*追加（2023_0104） */
	}
	.more li{
		font-size: 4vw;
        padding: 0 0 0 25px;
        margin: 0 2rem 0 0;
	}
	.more li:first-child{
		width: 100%;
	}
	.more li:last-child{
		margin: 0 0 0 0; /*margin: 0 0 0 2; から変更（2023_0104） */
	}
	.more p{
		font-size: 4vw;
	}
	.more .fs-38{
		font-size: 8vw;
	}
	
	/*select_box*/
	.select_ttl:before{
		width:52px;
		height: 64px;
		left:0;
		margin-left:0;
		background: url(../images/bear_01.png) left 0 no-repeat;
		background-size:52px 64px;
	}
	.select_ttl:after{
		width:71px;
		height: 72px;
		right:0;
		margin-right:0;
		background: url(../images/bear_02.png) left 0 no-repeat;
		background-size:71px 72px;
	}
	.select_box dt{
		font-size:6vw;
	}
	.select_box dd{
		padding:10px 3%;
	}
	.btn_select_box{
		font-size:6vw;
		display:block;
	}
	.btn_select_box a{
		padding:0 1em;
	}
	.select_last ul{
		padding:0;
	}
	.select_last p{
		position: relative;
		right:0;
	}
	/*option*/

	
	/*step*/
	.step-comment{
		margin: 40px 0 20px 0;
	}
	.step-comment dt{
		font-size: 4vw;
	}
	.step-comment dt span{
		padding: 5px 10px;
	}
	.step-comment dd{
		padding: 15px;
		font-size: 5.5vw;
	}
	.step li{
		font-size: 1em;
		margin: 0 20px 0 0;
	}
	.step li:after{
		background-size: 12px auto;
		width: 12px;
		height: 20px;
		top: 50%;
		right: -17px;
	}
	.step li p:before{
		width: 25px;
		height: 25px;
		margin: 0.5em 0.25em 0 0;
	}

	/*area*/
	.area{
		height:auto;
	}
	.area li:nth-child(1){
		position: relative;
		border:4px solid #e5e5e5;
		width:100%;
		font-size:4vw;
		margin: 0 0 20px 0;
		top: 0;
		transform: none;
	}
	.area li:nth-child(2){
		position: relative;
		text-align: center;
		left:0;
		top: 0;
	}
	.area li:nth-child(2) img{
		width: 70%;
	}
	/*voice*/
	.yorokobi h2{
		margin:-60px 0 20px 0;
	}
	.voice li{
		padding:3px 5px;
		font-size:4vw;
		margin:0 0.5em 0 0;
		display: inline;
		text-align:center;
	}
	/*faq*/
	.faq dl{
		font-size: 1em;
		padding: 15px 5%;
	}
	.faq dt{
		padding: 0 0 0 1.5em;
	}
	.faq dt:before{
		font-size: 1.1em;
		top:-0.2em;
	}
	.faq dd{
		padding: 0 0 0 1.5em;
	}
	.faq dd:before{
		font-size: 1.1em;
	}
	/*caution*/
	.caution{
		padding:20px 5%;
	}
	.caution h3{
		font-size: 6vw;
	}

	/*cv*/
	.cv{
		padding:20px 5%;
		font-size:4vw;
	}
	.cv2{
		padding: 20px 5% 40px 5%;
	}
	.cv dt{
		padding: 5px 10px;
	}
	.cv dd span{
		font-size: 5.5vw;
	}
	.cv dd span:before{
		width: 11px;
		height: 14px;
		background-size: 11px auto;
		left: -20px;
	}
	.cv dd span:after{
		width:11px;
		height:14px;
		right: -20px;
		background-size: 11px auto;
	}
	.cv-btn{
		width: calc(100% - 30px);
		padding: 10px 15px;
	}
	.cv-btn a{
		font-size: 6.5vw;
		line-height: 1.3;
		text-align: center;
		background-size: 12px auto;
	}

	
	/*====================================
	 FOOTER
	====================================*/
	footer{
		font-size:1em;
	}
	footer .mb15{ margin-bottom:15px;}
	
	footer .container {
		padding:10px 3%;
		width:94%;
	}
	footer ul {
		padding-bottom: 10px;
	}
	footer ul li a {
		font-size:4vw;
		padding: 0 0.5em;
	}
	#scrollUp{
		bottom:50px;
	}
	#scrollUp img{
		width:50px;
	}
}