html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
}

html{
	background:#99cc66;
}

p, li, a, h1, h2, h3, h4, h5{
	font-family: 'Noto Serif JP', serif;
	font-weight: 200;
}
 h1, h2, h3, h4, h5{
	font-weight: 400 !important; 
}
/*					 		*/
/*			header			*/
/*							*/
header{
	background-color:rgb(255,255,255);
}

header .navbar_brand{
	height:56px;
	margin-top:1px;
}


.navbar_menu > ul > li{
	background-color:#99cc66;
}

.navbar_menu > ul > li{
    border-top-color: white;
}

.navbar_menu > ul > li a{
	color:#fff;
}

.navbar_brand{
	height:40px;
	left:50%;
}

header .tel, header .line{
	display:none;
}

@media screen and (min-width: 568px) {
	header{
		height:120px;
		box-shadow: none;
	
	}
	nav{
		max-width:100%;
		height:50px;
	}
	
	.navbar_brand{
		top:40px;
		left: 15px;
		overflow: hidden;
		transform: translate(0, -50%);		
	}
	
	header .tel, header .line{
		display:block;
		position: absolute;
		width:auto;
		margin:0;
		top:48px;				
		transform: translate(0, -50%);		
		
	}
	header .tel{
		height:41.5px;
		right: 50px;
	}
	
	header .line{
		height:28px;
		top:49px;
		right: 15px;
	}
	
	.navbar_menu{
		top:80px;
		transform: translate(0,0);
	}
	
	.navbar_menu  > ul{
		height:30px;
		padding:3px 0 7px 0;
		background-color:#99cc66;
	}

	.navbar_menu > ul > li{
		border-right: none;
		padding-left:0.44em;
		padding-right:0.44em;
	}
	
	/*	mini menu		*/	
	header.mini{
		height:36px !important;
		box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
		background-color:#99cc66;		
		transition: box-shadow 0.5s;		
	}
	header.mini .navbar_brand{
		display:none;
	}
	header.mini .navbar_menu{
		top:17px;
	}
	
	header.mini .navbar_menu  > ul{
		padding:4px 0 6px 0;
	}
	
	header.mini .tel{
		display:none;
	}
	header.mini .line{
		top:18px;
		z-index:1002;
	}

}


@media screen and (min-width: 768px) {
	.navbar_brand{
		left:30px;
		width:auto;
	}
	header .line{
		right: 30px;
	}
	header .tel{
		right: 65px;
	}
	.navbar_menu > ul > li{
		border-right: none;
		padding-left:0.88em;
		padding-right:0.88em;
	}
}

/*					 		*/
/*			main			*/
/*							*/
@media screen and (min-width: 568px) {
	main {
		top:53px;
	}
}


/*					 		*/
/*			topImage		*/
/*							*/
#topImage{
	position:relative;
}

#topImage img:first-child{
	position:absolute;
}
#topImage img:nth-child(2){
	position:relative;
	z-index:1;
}
#banner{
	position: relative;
	top:-10vw;
	margin-bottom:0.5em;
	z-index:2;
}
#banner a{
	opacity: 1 !important;
}
@media screen and (min-width: 1072px) {
	#banner{
		top:-111px;
		margin-bottom:0;	
	}
}


main .selection{
	text-align:center !important;	
	margin-bottom:4em;
}

main .selection > *{
	text-align:center !important;
}

main .selection div{
	  text-align: initial;
}


main .selection p{
	line-height:2.2em;
	margin-bottom:0;
}


main .selection > h4{
	font-size:1.25em;
	line-height:2.2em;
	color:#99cc66;
	margin:3em auto 0 auto;
	padding-bottom:0;
}


@media screen and (min-width: 568px) {
	main .selection{
		margin-bottom:5em;
	}
}
@media screen and (min-width: 768px) {
	main .selection{
		margin-bottom:7.5em;
	}
}
@media screen and (min-width: 1024px) {
	main .selection{
		margin-bottom:10em;
	}
}

/*					 		*/
/*			greeting		*/
/*							*/
#greeting img{
	width:50vw;
	margin-bottom:2em;
}
@media screen and (min-width: 568px) {
	#greeting img{
		width:300px;
		margin-bottom:2.5em;
	}	
}
@media screen and (min-width: 768px) {
	#greeting img{
		margin-bottom:3em;
	}	
}

/*					 			*/
/*			骨盤ダイエット		 */
/*								*/
#kotsuban h1{
	font-size:10vw;
	margin:0 0 0.5em 0;
}
#kotsuban h2{
	font-size:4.5vw;
}

#kotsuban ul{
	list-style:none;
	margin:3em 0 0 0;
	padding:0;
}

#kotsuban li{
	margin-bottom:0;
	padding:1.5em 1.5em;
}
#kotsuban li:first-child{
	background: #f0f0f0;
}
#kotsuban li:nth-child(2){
	background: #ffe0e9;
}

#kotsuban li .ok h3{
	color: #99cc66;
}

#kotsuban li img{
	float:right;
	width:20vw;
}

#kotsuban h3{
	float:left;
	width:calc(100% - 20vw - 1.5em);
	margin:0.25em 0 1em 0;
}

#kotsuban li p{
	float:left;
	width:calc(100% - 20vw - 1.5em);
	margin-bottom:1em;
	line-height:1.8em;
	text-align:left;	
}

@media screen and (min-width: 568px) {
	#kotsuban h1{
		font-size:3em;
	}	
	#kotsuban h2{
		font-size:1.5em;
	}
	
	#kotsuban ul{
		display: flex;
	}
	#kotsuban li{
		width:50%;
	}
	
	#kotsuban li .ok,
	#kotsuban li .ng{
		width:calc((540px - 3em) / 2);		
		max-width:calc((540px - 3em) / 2);
	}

	#kotsuban li .ng{
		padding-left:0;		
		margin-left:auto;		
	}
	#kotsuban li .ok{
		padding-right:0;
	}
	
	#kotsuban li img{
		width:80px;
	}

	#kotsuban h3,
	#kotsuban li p{
		font-size:0.9em;
		width:calc((540px - 3em) / 2 - 80px - 1em);
	}
}
@media screen and (min-width: 768px) {
	#kotsuban li .ok,
	#kotsuban li .ng{
		width:calc((720px - 3em) / 2);		
		max-width:calc((720px - 3em) / 2);
	}
	#kotsuban h3,
	#kotsuban li p{
		font-size:1em;
		width:calc((720px -3em) / 2 - 80px - 2em);
	}	
}

/*					 			*/
/*			ひとつのサロン		 */
/*								*/
#salon h2{
	font-size:9vw;
	margin:0;
	color: #99cc66;
}
#salon h3{
	font-size:4vw;
	margin-bottom:0.5em;
}

#salon p{
	margin-bottom:0;
}

#salon ul{
	list-style:none;
	margin:3em 1.5em 0 1.5em;
	padding:0;
}

#salon li{
	margin-bottom:4em;
}
#salon li:nth-child(3){
	margin-bottom:0;
}

#salon img{
	height:auto;
	width:90%;
	margin-left:5%;
	border-radius: 50%;
}

#salon h4{
	text-align:center;
}
#salon h5{
	color: #99cc66;
	margin-bottom:0;
	left:50%;
	transform: translateX(-50%);
	margin-top:0.75em;
}
#salon h5.marker_l::after{
	background:#99cc66;
}


@media screen and (min-width: 568px) {
	#salon h2{
		font-size:3em;
	}	
	#salon h3{
		font-size:1.1em;
	}
	
	#salon ul{
		width:540px;
		margin-left:auto;
		margin-right:auto;
		display: flex;
	}
	#salon li{
		width:calc((100% - 2em) / 3);
		font-size:0.9em;
		margin-right:1em;
		margin-bottom:0;
	}
	#salon li:nth-child(3){
		margin-right:0;
	}
	#salon img{
		width:100%;
		margin-left:0;
	}
}

@media screen and (min-width: 768px) {
	#salon ul{
		width:720px;
	}
	#salon li{
		width:calc((100% - 4em) / 3);
		font-size:1em;
		margin-right:2em;
	}
}


/*					 			*/
/*			ビフォーアフター	 */
/*								*/
#before_after {
	background-color: #99cc66;
	padding:2em 0;
}

#before_after h2{
	font-size:9vw;
	margin-bottom:0.75em;
	color: #fff;
}
#before_after h3{
	font-size:4vw;
	margin-bottom:0.5em;
	color: #fff;
}
#before_after h4{
	font-size:4vw;
	margin:0.5em 1em;
	color: #99cc66;
}

#before_after p{
	margin:0 1em;
	line-height:1.8em;	
}

#before_after img{
	width:100%;
	max-height:50vw;
	height:auto;	
}

#before_after .voice{
	background-color:#fff;
	border-bottom:1.5em solid #99cc66;
}

#before_after .voice div{
	position: relative;	
}

#before_after ul{
	margin:0;
	padding:0;
	list-style: none;
	display:flex;
	position: relative;
}

#before_after li{
	padding:0.5em 1em 0.5em 1em;
	width:50%;
	text-align:center;
}
#before_after li:first-child{
	background: #f0f0f0;
	padding-right:0.5em;
}
#before_after li:nth-child(2){
	background: rgb(153, 204, 102, 0.1);
	padding-left:0.5em;
	color:#99cc66;
}
#before_after li img{
	margin-top:0.5em;
}

#before_after .voice dl{
	position: absolute;	
	bottom:1.5em;
	left:50%;
	transform: translateX(-50%);
}

#before_after .voice dt, #before_after .voice dd{
	display: block;
	margin:0 0 0.5em 0;
	padding:0.25em 0.5em;
	background:#f6ab3b;
	color:#fff;
	font-size:4vw;
}

@media screen and (min-width: 568px) {
	#before_after h2{
		font-size:3em;
	}	
	#before_after h3{
		font-size:1.2em;
	}
	#before_after h4{
		font-size:1.2em;
	}
	#before_after .contents{
		padding-bottom:0;
	}
	
	#before_after ul{
		height:100%;
		margin:0;
	}	
	#before_after li{
		margin:0;
		padding-bottom:0.25em;
	}	
	#before_after p{
		font-size:0.8em;
		margin:0 -1.5em 1em 1.5em;
	}
	#before_after img{
		max-height:188px;
	}
	
	#before_after .voice dl{
		left:40%;
		bottom:0.5em;
		transform: translateX(-25.5%);
	}
	
	#before_after .voice dt, #before_after .voice dd{
		font-size:1em;
	}
}
@media screen and (min-width: 768px) {
	#before_after p{
		font-size:0.9em;
	}
	#before_after img{
		max-height:150px;
	}

	#before_after .voice dl{
		left:45%;
		transform: translateX(-32.5%);
	}

}

@media screen and (min-width: 1024px) {
	#before_after p{
		font-size:1em;
	}
	#before_after img{
		max-height:200px;
	}		

	#before_after .contents{
		max-width:720px;
		
	}
	
	#before_after .voice dl{
		left:45%;
		transform: translateX(-30%);
	}
	
}

/*					 			*/
/*			ショップアクセス	 */
/*								*/
#shop_access {
	position:relative;
}

#shop_access .contents{
	position: relative;;
	justify-content: center;
	z-index:10;
}
#shop_access h2{
	font-size:9vw;
	margin-bottom:0.5em;
}
#shop_access h3{
	font-size:4vw;
	color: #99cc66;	
	margin-bottom:2em;
}
#shop_access img{
	margin-bottom:0.5em;
}


#shop_access ul{
	list-style:none;
	margin:0 0 0 0.5em;
	padding:0;
}

#shop_access li{
	margin-bottom:0;
}

@media screen and (min-width: 568px) {
	#shop_access h2{
		font-size:3em;
	}	
	#shop_access h3{
		font-size:1.2em;
	}
	#shop_access ul{
		margin:0;
	}
	
	#shop_access img.bottomImg{
		width:100%;
		display:block;
	}
	#shop_access .info{
		padding-bottom:5em;
	}
}
@media screen and (min-width: 768px) {
	#shop_access .info{
		padding-bottom:7.5em;
	}
}
@media screen and (min-width: 1024px) {
	#shop_access .info{
		padding-bottom:10em;
	}
}

.bottomImg{
	position:absolute;
	bottom:0;
}

.bottomImg img{
	display:none;
}
#map{
	margin-top:3em;
}

@media screen and (min-width: 568px) {
	.bottomImg img{
		width:100%;
		opacity:0.3;
		display:block;
	}
	#map{
		margin-top:-8px;
	}
}



/*					 		*/
/*			campaign		*/
/*							*/
#campaign .wrap{
	background:#f6ab3b;
	padding:2em 1em;
	color:#fff;
}

#campaign h2{
	left:50%;
	transform: translateX(-50%);
	font-size:9vw;
	margin-bottom:0;
}

#campaign h2::after{
	background:#fff;
}

#campaign h3{
	font-size:7vw;
	text-align:center;
	margin:0.5em 0;
}
#campaign h4,h5{
	color:yellow;
}
#campaign h4{
	text-align:center;
	margin:1em 0;
}
#campaign h5{
	margin-bottom:2em;
}

#campaign ul{
	list-style:none;
	margin:0;
	padding:0;
}
#campaign{
	display:flex;
}

#campaign li img{
	width:50px;
	border-radius: 50%;
	margin-right:1em;
	vertical-align: middle;
}
#campaign li p{
	display:inline-block;
}

#campaign .free{
	margin-bottom:1em;
	line-height:1.8em;
}
#campaign .free img{
	float:right;	
	width:40%;
	height:auto;
	margin-left:0.5em;
	object-fit:contain;
}

#campaign a img{
	width:100%;
	margin-bottom:0.5em;
}

@media screen and (min-width: 568px) {
	#campaign .contents{
		max-width:calc(540px - 3em);
	}
	
	#campaign .wrap{
		padding:2em 1.5em;
	}

	#campaign h2{
		font-size:3em;
	}	
	#campaign h3{
		font-size:2em;
		margin-bottom:1em;
	}	
	
	#campaign h4,#campaign h5{
		font-size:1.22em;
	}
	#campaign h4{
		margin-top:2em;
	}
	
	#campaign .free img{
		width:200px;
		margin-top:-120px;
	}
	
	#campaign a img{
		margin-bottom:1.5em;
	}
}

@media screen and (min-width: 768px) {
	#campaign .contents{
		max-width:calc(720px - 3em);
	}
	#campaign li{
		font-size:1.2em;
	}		
}

/*					 		*/
/*			footer			*/
/*							*/
footer{
	margin-top:0.75em;
}
footer{
	color:#fff;
}

footer .logo {
    height: 96px;
    width: auto;
	margin-bottom:1.25em;
}
footer a{
	color:#fff;
	margin-right:1em;
}
footer a:last-child{
	margin-right:0;
}

footer p{
	line-height:2em;
	margin-bottom:1.5em;
}

footer .copyright {
	background: #fff;
	color:#333;
    margin: 1.33em 0 33vw 0 !important;
}

footer .mobile{
	bottom:-5px;
	height:auto;
	box-shadow: 0 -0.25rem .75rem rgba(0, 0, 0, .25);
}


@media screen and (min-width: 568px) {
	footer{
		margin-top:4em;
	}
	footer .logo {
		margin-bottom:2em;
	}
	footer .copyright {
		margin-bottom:0 !important;
	}
	
}



/*					 		*/
/*			1280px	over	*/
/*							*/


@media screen and (min-width: 1072px) {
	html{
		background-color:white;
		height:100%;
	}
	
	body{
		background:#99cc66;
		box-shadow: 0 0 3rem -1.5rem hsl(200 50% 20% / 60%);
		min-height:100%;
		overflow-x: hidden;
	}
	
	html > body{
	  height: auto; /* 要素を超えた分の背景が伸びないブラウザ用 */
	}	
	
	body, header, footer{
		width:1072px;
		margin-left:auto;
		margin-right:auto;
	}
	
	footer{
		background:#99cc66;	
	}
}