@charset "UTF-8";

/**
 * プロトタイプ
----------------------------------------------------------------*/
/* 初期設定 */
body{
	font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	font-size:14px;
	line-height:1.6;
}
a{
	color:rgb(171,205,3);
	transition:color .2s;
}
a.hover{ color:rgb(213,230,129); }
p{ text-align:justify; }
img{ max-width:100%; }
.spacer{ margin-bottom:40px; }
.c{ text-align:center; }
.r{ text-align:right; }
.l{ text-align:left; }
.bmargin{ padding-bottom:80px !important; }
.bmargin10{ padding-bottom:10px !important; }
strong{ color:rgb(222,130,178); }
strong.green{ color:rgb(171,205,3); }
strong.blue{ color:rgb(3,110,184); }
strong.red{ color:rgb(195,27,35); }
.caution{ color:rgb(195,27,35); }
.hr{
	border-bottom:1px solid black;
	max-width:60px;
}
.yt{
	position:relative;
	width:100%;
	height:0;
	padding-bottom:56.25%;
	overflow:hidden;
	margin-bottom:50px;
}
.yt > iframe{
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
}
.fb{
	max-width:100%;
	text-align:center;
}
.gm > iframe{
	display:block;
	height:512px;
}

/* スマホ分岐 */
.sp{ display:none; }
@media screen and (max-width: 768px){
	.pc{ display:none; }
	.sp{ display:block; }
}

/* レイアウト */
.base{
	max-width:1024px;
	margin:0 auto;
}
.narrowbase{
	max-width:640px;
	margin:0 auto;
	padding:40px;
	box-sizing:border-box;
	font-size:120%;
	letter-spacing:.1em;
}
@media screen and (max-width: 768px){
	.base{ max-width:none; }
	.narrowbase{ padding:20px; }
}

/* 余白 */
.bmargin{ padding-bottom:80px !important; }
.tmargin{ padding-top:80px !important; }
.bmargin.narrow{ padding-bottom:40px !important; }
.tmargin.narrow{ padding-top:40px !important; }
.bmargin.xnarrow{ padding-bottom:20px !important; }
.tmargin.xnarrow{ padding-top:20px !important; }
.bmargin.xxnarrow{ padding-bottom:10px !important; }
.tmargin.xxnarrow{ padding-top:10px !important; }

/**
 * ヘッダー
----------------------------------------------------------------*/
/* ヘッドカード */
#hcard{
	position:fixed;
	left:0;
	right:0;
	z-index:100;
}
@media screen and (max-width: 768px){
	#hcard{ position:absolute; }
}

/* ロゴ */
.logo{
	display:flex;
	justify-content:center;
	background:url("https://mukta6910.com/wp-content/themes/mukta6910/image/interface/bg/loop_yoga_alpha.png") scroll repeat center center;
}
.logo a{
	display:block;
	margin:0;
	transition:background .2s;
}
.logo a.hover{ background:rgba(0,0,0,.05); }
@media screen and (max-width: 768px){
	.logo{ justify-content:flex-start; }
}
@media screen and (max-width: 640px){
	.logo a > img{ height:50px; }
}

/**
 * フッター
----------------------------------------------------------------*/
/* お問い合わせボックス */
.contactbox{
	background:rgb(246,250,229) url("https://mukta6910.com/wp-content/themes/mukta6910/image/interface/bg/contactbox.png") scroll no-repeat right bottom;
	text-align:center;
}
.contactbox > h2{
	font-size:300%;
	padding:80px 20px 0;
}
.contactbox > .tel{
	font-size:400%;
	color:rgb(0,0,0);
	transition:color .2s;
	padding:0 20px;
}
.contactbox > .tel::before{
	content:'';
	display:inline-block;
	background:url("https://mukta6910.com/wp-content/themes/mukta6910/image/interface/icons/tel_green.png") scroll no-repeat center center / contain;
	width:42px;
	height:42px;
	padding-right:6px;
}
.contactbox > .tel.hover{ color:rgb(171,205,3); }
.contactbox > p{
	font-size:180%;
	line-height:2;
	letter-spacing:.2em;
	color:rgb(96,96,96);
	text-align:center;
	background:rgba(255,255,255,.8);
	padding:20px 20px 10px;
	max-width:400px;
	box-sizing;border-box;
	margin:20px auto 0;
}
.contactbox > p > small{
	display:block;
	line-height:1.5;
}
.contactbox > .buttons > a{
	display:inline-block;
	background:rgb(171,205,3);
	border-radius:4px;
	transition:background .2s;
	margin:20px;
}
.contactbox > .buttons > a.hover{ background:rgb(0,162,154); }
@media screen and (max-width: 768px){
	.contactbox{ background-size:contain; }
	.contactbox > h2{
		font-size:160%;
		padding-top:40px;
	}
	.contactbox > .tel{ font-size:260%; }
	.contactbox > .tel::before{
		width:30px;
		height:30px;
	}
	.contactbox > p{
		font-size:150%;
		line-height:1.7;
		margin:20px 20px 0;
		max-width:none;
	}
	.contactbox > .buttons{ padding:20px 0; }
	.contactbox > .buttons > a{
		margin:10px;
		max-width:260px;
	}
}

/* フッターカード */
#fcard{
	background:url("https://mukta6910.com/wp-content/themes/mukta6910/image/interface/bg/loop_yoga.png") scroll repeat center center;
	padding:80px 0;
}
#fcard > div{ display:flex; }
#fcard > div > *{ width:50%; }
#fcard > div > div > p > small{
	font-size:inherit;
	display:block;
}
#fcard > div > div > p > ruby{
	font-size:200%;
	display:block;
	padding:16px 0 6px;
	letter-spacing:.1em;
}
#fcard > div > div > p > ruby > rt{ text-align:left; }
#fcard > div > div > .tel{
	font-size:180%;
	color:rgb(222,130,178);
	letter-spacing:.1em;
	display:inline-block;
}
#fcard > div > div > .tel::before{
	content:'';
	display:inline-block;
	background:url("https://mukta6910.com/wp-content/themes/mukta6910/image/interface/icons/tel_pink.png") scroll no-repeat center center / contain;
	width:20px;
	height:20px;
	padding-right:4px;
}
#fcard > div > div > .tel.hover{ color:rgb(171,205,3); }
#fcard > div > div > .tel.hover::before{ background-image:url("https://mukta6910.com/wp-content/themes/mukta6910/image/interface/icons/tel_green.png"); }
#fcard > div > div > address{
	font-size:90%;
	color:rgb(96,96,96);
	display:block;
}
@media screen and (max-width: 768px){
	#fcard{ padding:40px 20px; }
	#fcard > div{ display:block; }
	#fcard > div > *{
		width:auto;
		text-align:center;
	}
	#fcard > div > div > p{ text-align:center; }
}

/* 著作権表記 */
#cr{
	background:rgb(0,0,0);
	color:white;
	padding:8px 10px;
	text-align:center;
}
@media screen and (max-width: 768px){
	#cr{ padding-bottom:140px; }
}

/**
 * プライマリナビゲーション
----------------------------------------------------------------*/
#pnav{
	background:rgba(0,0,0,.4);
	color:white;
	padding:0 20px;
	text-align:center;
	position:fixed;
	top:100px;
	left:0;
	right:0;
	z-index:100;
}
#pnav > ul{
	display:flex;
	justify-content:center;
	align-items:flex-end;
}
#pnav > ul > li > a{
	line-height:20px;
	padding:10px;
	display:block;
	font-weight:bold;
	color:white;
	letter-spacing:.2em;
	transition:background .2s;
}
#pnav > ul > li > a.hover{ background:rgb(0,0,0,.5); }
@media screen and (max-width: 1200px){
	#pnav > ul{
		flex-wrap:wrap;
		height:80px;
	}
}

/**
 * 画面右固定ナビゲーション
----------------------------------------------------------------*/
#rnav{
	position:fixed;
	top:210px;
	right:0;
	z-index:1000;
}
#rnav > ul > li > a{
	display:block;
	width:45px;
	height:120px;
	position:relative;
}
#rnav > ul > li > a::before,
#rnav > ul > li > a::after{
	display:block;
	content:'';
	width:100%;
	height:100%;
	position:absolute;
	transition:opacity .2s;
	top:0;
	background:scroll no-repeat center center / cover;
}
#rnav > ul > li > a::before{ z-index:-1; }
#rnav > ul > li > a::after{ z-index:-2; }
#rnav > ul > li.rnav_stores > a::before{ background-image:url("https://mukta6910.com/wp-content/themes/mukta6910/image/interface/buttons/fixedright/stores.png"); }
#rnav > ul > li.rnav_stores > a::after{ background-image:url("https://mukta6910.com/wp-content/themes/mukta6910/image/interface/buttons/fixedright/stores_ov.png"); }
#rnav > ul > li.rnav_reservation > a::before{ background-image:url("https://mukta6910.com/wp-content/themes/mukta6910/image/interface/buttons/fixedright/reservation.png"); }
#rnav > ul > li.rnav_reservation > a::after{ background-image:url("https://mukta6910.com/wp-content/themes/mukta6910/image/interface/buttons/fixedright/reservation_ov.png"); }
#rnav > ul > li.rnav_shop > a::before{ background-image:url("https://mukta6910.com/wp-content/themes/mukta6910/image/interface/buttons/fixedright/shop.png"); }
#rnav > ul > li.rnav_shop > a::after{ background-image:url("https://mukta6910.com/wp-content/themes/mukta6910/image/interface/buttons/fixedright/shop_ov.png"); }
#rnav > ul > li > a.hover::before{ opacity:0; }
@media screen and (max-height: 800px){
	#rnav{ top:50px; }
}

/**
 * 画面左固定ナビゲーション
----------------------------------------------------------------*/
#lnav{
	position:fixed;
	left:20px;
	bottom:20px;
	z-index:1000;
}
#lnav > ul > li > a{
	display:block;
	width:80px;
	height:80px;
	border-radius:50%;
	position:relative;
	transition:box-shadow .2s;
}
#lnav > ul > li > a::before,
#lnav > ul > li > a::after{
	display:block;
	content:'';
	width:100%;
	height:100%;
	position:absolute;
	transition:opacity .2s;
	top:0;
	border-radius:50%;
}
#lnav > ul > li > a::before{
	background:linear-gradient(45deg, rgb(255,192,7), rgb(243,67,54), rgb(155,39,175));
	z-index:-1;
}
#lnav > ul > li > a::after{
	background:linear-gradient(225deg, rgb(255,192,7), rgb(243,67,54), rgb(155,39,175));
	z-index:-2;
}
#lnav > ul > li > a.hover{ box-shadow:0 0 10px 4px rgb(243,67,54, .3); }
#lnav > ul > li > a.hover::before{ opacity:0; }

/**
 * モバイルナビゲーション
----------------------------------------------------------------*/
#spnav{
	position:fixed;
	bottom:0;
	left:0;
	right:0;
	background:url("https://mukta6910.com/wp-content/themes/mukta6910/image/interface/bg/loop_yoga_alpha.png") scroll repeat center center;
	z-index:1000;
	padding:10px 0 20px;
}
#spnav > ul{ display:flex; }
#spnav > ul > li > a{
	display:block;
	margin:0 10px;
	box-sizing:border-box;
	transition:background .2s;
	border-radius:4px;
}
#spnav > ul > li > a.hover{ background:rgb(0,0,0,.05); }
#spnav > ul > li:not(:first-child){ border-left:1px solid #ccc; }

/**
 * グローバルナビゲーション
----------------------------------------------------------------*/
#gnav{
	background:rgba(0,0,0,.7);
	position:fixed;
	top:-100%;
	left:0;
	right:0;
	z-index:2000;
	opacity:0;
	transition:opacity .4s;
}
#gnav.hover{
	opacity:1;
	top:140px;
}
#gnav > .logo{ display:none; }
#menu,
#close{
	position:fixed;
	display:block;
	background:none;
	border:none;
	top:0;
	right:0;
	width:100px;
	height:100px;
	transition:background .2s;
	display:none;
	z-index:2000;
}
#menu{ background:rgb(247,247,247); }
#close{ background:rgb(229,229,229); }
#menu.hover{ background:rgb(96,96,96); }
#close.hover{ background:white; }
@media screen and (max-width: 1200px){
	#gnav.hover{ top:180px; }
}
@media screen and (max-width: 768px){
	#menu{ display:block; }
	#gnav{
		position:fixed;
		top:-100%;
		bottom:100%;
		left:0;
		right:0;
		overflow-y:scroll;
		-webkit-overflow-scrolling:touch;
		opacity:1;
		transition:top .2s, bottom .2s;
	}
	#gnav > .logo{ display:block; }
	#gnav > .megamenu,
	#gnav > .megamenu2{ padding-bottom:100px; }
	#gnav.hover{ top:0; }
	body.clicked #gnav{
		top:0;
		bottom:0;
	}
	body.clicked #close{ display:block; }
}
@media screen and (max-width: 640px){
	#menu,
	#close{
		width:50px;
		height:50px;
	}
}

/**
 * フッターナビゲーション
----------------------------------------------------------------*/
#fnav{
	background:rgba(0,0,0,.6);
	position:relative;
}
#fnav:before{
	content:'';
	display:block;
	position:absolute;
	top:0;
	bottom:0;
	right:0;
	left:0;
	background:url("https://mukta6910.com/wp-content/themes/mukta6910/image/interface/bg/fcard.png") scroll no-repeat center top / cover;
	z-index:-1;
}
#fcard > div > figure > a{ transition:opacity .2s; }
#fcard > div > figure > a.hover{ opacity:.6; }
@media screen and (max-width: 768px){
	#fnav:before{ background-image:url("https://mukta6910.com/wp-content/themes/mukta6910/image/interface/bg/fcard_sp.png"); }
}

/**
 * メガメニュー
----------------------------------------------------------------*/
.megamenu{
	max-width:864px;
	padding:40px;
	font-size:15px;
	line-height:1.8;
}
.megamenu a{
	color:white;
	transition:color .2s;
}
.megamenu a.hover{ color:rgb(171,205,3); }
.megamenu > ul{
	display:flex;
	margin:0 -20px;
}
.megamenu > ul > li{
	width:33.3333%;
	padding:0 20px;
	box-sizing:border-box;
}
.megamenu > ul > li:not(:first-child){ border-left:1px solid rgba(255,255,255,.5); }
.megamenu > ul > li > figure{ margin-bottom:10px; }
.megamenu > ul > li > figure > a{
	display:block;
	transition:background .2s;
	border-radius:4px;
}
.megamenu > ul > li > figure > a.hover{ background:rgba(255,255,255,.2); }
.megamenu > ul > li > ul > li > a{
	text-overflow:ellipsis;
	overflow:hidden;
	white-space:nowrap;
	display:block;
}
.megamenu > footer{
	padding-top:40px;
	display:flex;
}
.megamenu > footer > ul > li:not(:last-child){ margin-bottom:20px; }
.megamenu > footer > ul > li > a{
	display:block;
	width:240px;
	min-height:50px;
	border:1px solid white;
	text-align:center;
	border-radius:4px;
	letter-spacing:.2em;
	color:white;
	transition:background .2s;
	box-sizing:border-box;
	padding:10px 2px;
}
.megamenu > footer > ul > li > a.hover{
	background:rgba(255,255,255,.2);
	color:white;
}
.megamenu > footer > footer > figure > img{
	max-width:none;
	margin-bottom:10px;
}
.megamenu > footer > div{
	width:500px;
	display:flex;
	padding:0 10px;
}
.megamenu > footer > div > ul{
	padding:0 10px;
	width:33.3333%;
}
.megamenu > footer > div > ul > li > a{
	text-overflow:ellipsis;
	overflow:hidden;
	white-space:nowrap;
	display:block;
}
@media screen and (max-width: 768px){
	.megamenu > ul{
		display:block;
		margin:0;
		font-size:16px;
		border-bottom:1px solid rgba(255,255,255,.5);
		padding-bottom:20px;
	}
	.megamenu > ul > li{
		width:auto;
		padding:0;
	}
	.megamenu > ul > li:not(:first-child){
		border-left:none;
		border-top:1px solid rgba(255,255,255,.5);
		padding-top:20px;
		margin-top:20px;
	}
	.megamenu > ul > li > ul > li{ text-align:center; }
	.megamenu > ul > li > ul > li > a{
		overflow:visible;
		white-space:normal;
		display:inline;
	}
	.megamenu > footer{ display:block; }
	.megamenu > footer > ul{ display:flex; }
	.megamenu > footer > ul > li{
		width:50%;
		margin-bottom:20px;
	}
	.megamenu > footer > ul > li:not(:last-child){
		margin-bottom:0;
		padding-right:10px;
	}
	.megamenu > footer > ul > li:last-child{ padding-left:10px; }
	.megamenu > footer > ul > li > a{
		width:auto;
		font-size:14px;
		letter-spacing:0;
	}
	.megamenu > footer > div{
		width:100%;
		margin:0 -20px;
		flex-wrap:wrap;
		justify-content:center;
	}
	.megamenu > footer > div > ul{
		width:50%;
		box-sizing:border-box;
	}
	.megamenu > footer > div > ul:nth-last-child(1),
	.megamenu > footer > div > ul:nth-last-child(2){
		margin-top:20px;
	}
	.megamenu > footer > div > ul > li > a{ padding:2px 10px; }
}
@media screen and (max-width: 640px){
	.megamenu{ padding:20px; }
}

/**
 * メガメニュー2
----------------------------------------------------------------*/
.megamenu2{
	max-width:944px;
	padding:40px;
	font-size:15px;
	line-height:1.8;
}
.megamenu2 a{
	color:white;
	transition:color .2s, background .2s;
}
.megamenu2 a.hover{ color:rgb(171,205,3); }
.megamenu2 section{
	background:rgba(255,255,255,.1);
	border-radius:5px;
}
.megamenu2 > div{
	display:flex;
	gap:20px;
	flex-direction:row-reverse;
}
.megamenu2 > div > section.servicenav_concierge{
	max-width:332px;
	width:100%;
	box-sizing:border-box;
	border:4px solid;
	border-image:linear-gradient(-225deg, rgb(235,180,208), rgb(204,225,103), rgb(153,217,214)) 1;
}
.megamenu2 > div > section.servicenav_concierge > a{
	display:flex;
	align-items:center;
	justify-content:center;
	flex-direction:column;
	height:100%;
}
.megamenu2 > div > section.servicenav_concierge > a.hover{
	background:rgba(255,255,255,.1);
	border-image:linear-gradient(-225deg, rgb(0,162,154), rgb(222,130,178), rgb(171,205,3)) 1;
}
.megamenu2 > div > section.servicenav_studio{
	width:100%;
	display:flex;
	border-radius:5px;
	transition:background .2s;
	align-items:center;
	justify-content:center;
}
.megamenu2 > div > section.servicenav_studio.hover{ background:rgba(255,255,255,.2); }
.megamenu2 > div > section.servicenav_studio > h2 > a{
	display:block;
	transition:opacity .2s;
}
.megamenu2 > div > section.servicenav_studio > h2 > a.hover{ opacity:.7; }
.megamenu2 > div > section.servicenav_studio > ul{
	padding:5px 20px;
	margin:15px 0;
	border-left:1px solid rgba(255,255,255,.5);
}
.megamenu2 > ul{
	display:flex;
	flex-wrap:wrap;
	gap:20px;
	margin-top:20px;
}
.megamenu2 > ul > li{ width:calc((100% - 40px) / 3); }
.megamenu2 > ul > li > section > a{
	display:block;
	border-radius:5px;
}
.megamenu2 > ul > li > section > a.hover{ background:rgba(255,255,255,.2); }
.megamenu2 > ul > li > section.servicenav_jha > a{ background:rgba(239,240,233,.7); }
.megamenu2 > ul > li > section.servicenav_jha > a.hover{ background:rgba(239,240,233,.9); }
.megamenu2 > ul > li > section.servicenav_seikotsu > a{ background:rgba(255,255,255,.7); }
.megamenu2 > ul > li > section.servicenav_seikotsu > a.hover{ background:rgba(255,255,255,.9); }
.megamenu2 > ul > li > section.servicenav_shop > a{ background:rgba(87,87,87,.9)  scroll repeat center center; }
.megamenu2 > ul > li > section.servicenav_shop > a.hover{ background:rgba(87,87,87,.5)  scroll repeat center center; }
.megamenu2 > ul > li > section > a > img{
	max-width:276px;
	width:100%;
	margin:0 auto;
	display:block;
}
.megamenu2 > footer{
	margin-top:40px;
	display:flex;
	gap:20px;
}
.megamenu2 > footer > ul{
	display:flex;
	flex-direction:column;
	gap:10px;
	min-width:240px;
}
.megamenu2 > footer > ul > li > a{
	display:block;
	border-radius:5px;
	border:1px solid white;
	padding:10px 20px;
	text-align:center;
	letter-spacing:.1em;
	font-size:120%;
	transition:border .2s, background .2s;
}
.megamenu2 > footer > ul > li > a.hover{
	border:1px solid transparent;
	background:rgb(171,205,3);
	color:white;
}
.megamenu2 > footer > div{
	display:flex;
	gap:20px;
	width:100%;
}
.megamenu2 > footer > div > ul{ width:calc((100% - 40px) / 3); }
.megamenu2 > footer > div > footer > figure{
	border-radius:3px;
	overflow:hidden;
	min-width:100px;
}
.megamenu2 > footer > div > footer > a{
	display:block;
	background:rgba(6,199,85);
	border-radius:3px;
	margin-top:10px;
	width:100px;
}
.megamenu2 > footer > div > footer > a.hover{ background:rgba(5,156,66); }
@media screen and (max-width: 960px){
	.megamenu2 > div{ flex-direction:column; }
	.megamenu2 > div > section.servicenav_studio > h2 > a > img{
		max-width:276px;
		width:100%;
	}
	.megamenu2 > div > section.servicenav_concierge{ margin:0 auto; }
	.megamenu2 > ul > li{ width:calc((100% - 20px) / 2); }
	.megamenu2 > footer{
		flex-direction:column;
	}
	.megamenu2 > footer > ul{
		flex-direction:row;
		flex-wrap:wrap;
	}
	.megamenu2 > footer > ul > li{ width:calc((100% - 10px) / 2); }
}
@media screen and (max-width: 670px){
	.megamenu2 > div > section.servicenav_studio{ flex-direction:column; }
	.megamenu2 > div > section.servicenav_studio > ul{
		width:calc(100% - 40px);
		margin:0 20px 10px;
		padding:10px 0;
		text-align:center;
		border-top:1px solid rgba(255,255,255,.5);
		border-left:none;
	}
	.megamenu2 > ul{
		margin-top:10px;
		gap:10px;
	}
	.megamenu2 > ul > li{ width:100%; }
	.megamenu2 > footer{ margin-top:20px; }
	.megamenu2 > footer > ul > li > a{
		padding:6px 10px;
		letter-spacing:0;
		font-size:100%;
	}
	.megamenu2 > footer > div{ flex-wrap:wrap; }
	.megamenu2 > footer > div > ul,
	.megamenu2 > footer > div > footer{
		width:calc((100% - 20px) / 2);
	}
}
@media screen and (max-width: 512px){
	.megamenu2{ padding:40px 20px; }
}

/**
 * スクロール位置アニメーション
----------------------------------------------------------------*/
#hcard,
#pnav,
#gnav{ transition:margin-top .2s; }
body.scrolldown #hcard,
body.scrolldown #pnav,
body.scrolldown #gnav{ margin-top:-100px; }
@media screen and (max-width: 768px){
	body.scrolldown #hcard,
	body.scrolldown #pnav,
	body.scrolldown #gnav{ margin-top:0; }
}

/**
 * ポップアップ
----------------------------------------------------------------*/
#popup{
	background:white;
	border-radius:10px 10px 0 0;
	position:fixed;
	bottom:0;
	right:20px;
	z-index:1000;
	width:400px;
	box-shadow:0 0 10px rgba(0,0,0,.1);
}
#popup > header{ margin-top:-20px; }
#popup > header > a{ transition:opacity .2s; }
#popup > header > a.hover{ opacity:.7; }
#popup > div{ padding:20px; }
#popup > div > a{
	background:rgb(171,205,3);
	display:block;
	color:white;
	padding:10px 20px;
	margin-top:10px;
	border-radius:4px;
	text-align:center;
	transition:background .2s;
}
#popup > div > a.hover{ background:rgb(222,130,178); }
@media screen and (max-width: 768px){
	#popup{
		left:0;
		right:0;
		width:auto;
		bottom:calc(100vw / 768 * 144.16);
	}
	#popup > header{ margin-top:0; }
	#popup > div{ display:none; }
}
/*
@media screen and (max-width: 460px){
	#popup{
		left:20px;
		width:auto;
	}
	#popup > header{ margin-top:calc((100vw - 40px) / 400 * -20); }
}
@media screen and (max-width: 400px){
	#popup{
		left:0;
		right:0;
	}
	#popup > header{ margin-top:0; }
	#popup > header > a > img.pc{ display:none; }
	#popup > header > a > img.sp{ display:block; }
	#popup > div{ display:none; }
}
*/

/**
 * コンテンツ
----------------------------------------------------------------*/
#cont{ min-height:600px; }