@charset "UTF-8";

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

	.ver_pc {display: none;}
	.ver_sp {display: block;}
	.contents,
	footer .footBox {padding-left: 20px; padding-right: 20px; }

/* header */
header .headBox .logo_sp {
	width: 100%;
	margin-left: -5%;
}
header .headBox .titleBoxwrap {
	background-size: cover;
}
header .headBox .titleBoxwrap .contents .btn {
	left:5vw;
	bottom:14vw;
	width: 60vw;
	height: 100px;
	line-height: 98px;
}
header .headBox .titleBoxwrap .contents .btn:before {
	height:50px;
}

#menuBoxwrap { 
	display: block;
	width: 100%;
	top:0;
	left: -100%;
	position: fixed;
	z-index: 9999;
	transition: 0.4s ease-in-out; 
}
#menuBoxwrap.open {
	left:0;
}
.menuBox {
	box-sizing: border-box;
	padding:20px;
	height: 100vh;
}
.menuBox .menu {
	display: block;
	padding:0;
	border-top: 1px solid #fff;
}
.menuBox .menu li {
	border:none;
	padding:0;
	border-bottom: 1px solid #fff;
}
.menuBox .menu li a {
	display: block;
	padding:20px 0;
	font-size: 18px;
	line-height: 1em;
}

/* navi */
.navi { position: fixed; right:20px; bottom:20px;}
.navi { width: 40px; display:block; line-height:1em; z-index:9999; transition: .3s; }
.navi .menuBtn {
	display: inline-block; position: relative; width: 40px; height:30px; 
	background-color:#4a8aa0;  padding:10px 0px 0px;
	box-shadow: 1px 1px 1px #fff,
             -1px 1px 1px #fff,
             1px -1px 1px #fff,
             -1px -1px 1px #fff;
}
.menu-icon {display: block; position: absolute; top: 50%; left: 50%; width: 24px; height: 2px; margin: -1px 0 0 -12px; background: #fff; transition: .2s;}
.menu-icon:before,.menu-icon:after {display: block; content: ""; position: absolute; top: 50%; left: 0; width: 24px; height: 2px; background: #fff; transition: .3s;}
.menu-icon:before {margin-top: -8px;}
.menu-icon:after {margin-top: 6px;}
.menuBtn:hover .menu-icon:before {margin-top: -10px;}
.menuBtn:hover .menu-icon:after {margin-top: 8px;}

.navi.close .name {overflow: hidden; }
.navi.close .name:before { display: inline-block; width: 100%; content: 'CLOSE';}
.navi.close .menuBtn .menu-icon { background-color: #4a8aa0; }
.navi.close .menuBtn .menu-icon:before, .navi.close .menuBtn .menu-icon:after {margin-top: 0;}
.navi.close .menuBtn .menu-icon:before { -webkit-transform: rotate(-45deg); transform: rotate(-45deg);}
.navi.close .menuBtn .menu-icon:after { -webkit-transform: rotate(-135deg); transform: rotate(-135deg);}

/* menu sp */
#mainMenu {
	position: fixed; 
	top:0; left: -100%; z-index:9999; display: block; width: 80%; height: 100%; background-color: #fff; color: #000;
	padding: 0;
	transition: 0.4s ease-in-out;
	margin:0;
}
#mainMenu li a {display: block; padding: 10px; border-bottom:solid #eeeeee 1px; color: #000; text-decoration: none; font-size: 15px; font-weight: bold;}

#mainMenu.open {left: 0;}


.contents .whiteBox .imgBox {
	overflow-x: scroll;
}
.contents .whiteBox .imgBox .scl_arrow {display: block;}
.contents .whiteBox .imgBox .scl_arrow:after {
	display: inline-block;
	content:'';
	margin:auto auto auto 10px;
	border-left:10px solid #e5504c;
	border-top:6px solid transparent;
	border-bottom:6px solid transparent;
}
}


@media only screen and (max-width:700px) {
	header .headBox .titleBoxwrap .contents .btn {
		width: 66vw;
		height: 60px;
		line-height: 56px;
		font-size: 5vw;
	}
	header .headBox .titleBoxwrap .contents .btn:before {
		height: 30px;
	}
	header .headBox .titleBoxwrap .contents .btn:after {
		right: 10px;
	}
	section,
	section.greyBgwrap {
		padding-top: 50px;
		padding-bottom: 50px;
	}
	.contents h2 {
		font-size: 5vw;
	}
	.contents h2 b {
		margin-top: 10px;
		font-size: 6vw;
	}
	.contents .whiteBox {
		padding:40px 20px;
	}
	.contents .whiteBox .twoClm .left {
		float: none;
		text-align: center;
		width: 100%;
		margin-bottom: 10px;
	}
	.contents .whiteBox .twoClm .right {
		padding-left: 0;
	}
	.elementBox .titleBox {
		font-size: 5vw;
	}
	.elementBox .priceBox {
		padding: 15px 0;
		font-size: 5vw;
	}
	.elementBox .priceBox .pb02 b {
		display: block;
		position: relative;
		padding-top: 60px;
	}
	.elementBox .priceBox .pb02 b:before {
		position: absolute;
		top:25px;
		left:50%;
		margin-left: -20px;
		transform: rotate(90deg);
	}
	.elementBox .priceBox .pb04 b {
		display: block;
		font-size: 8vw;
	}
	.contents .btn {
		font-size: 4vw;
	}
	.contents .btn:after {
		right: 15px;
	}
	section.btnBox .contents .btn.btnRed {
		font-size: 7vw;
	}
	.contents .textCenter {
		text-align: left;
		font-size: 16px;
	}
	.contents .textCenter br {display: none;}
	.routineClm .left,
	.routineClm .right {
		float: none;
		width: 100%;
	}
	.routineClm .right {
		margin-top: 40px;
	}
	.routineClm .right .photo {
		float: none;
		width: 100%;
		text-align: center;
	}
	.routineClm .right .text {
		margin-top: 20px;
		padding-left: 0;
	}
	.contents .whiteBox dl {
		border-left:1px solid #4a8aa0;
		border-bottom:1px solid #4a8aa0;

	}
	.contents .whiteBox dl dt {
		float: none;
		width: 100%;
		border:none;
	}
	.contents .whiteBox dl dd {
		border-left: none;
		border:none;
	}

	.contents .whiteBox dl dd ul br.sp-none {display: none;}

	footer .footBox .footBox_left,
	footer .footBox .footBox_right {
		float: none;
		text-align: center;
	}
	footer .footBox .footBox_left .deco_none {line-height: 1.5em;}
}