@charset "utf-8";
/* レイアウトサイズ

         1
210px  100%
┏━━━━━━━━━━━┓

*/

/*
基本カラー1：		#ff254d
基本カラー2：		#ff254d
アクセントカラー1
アクセントカラー2
アクセントカラー3

囲い線			 #c2c2c2;
*/


/* web fonts
======================================================= */

/*@import url(http://fonts.googleapis.com/css?family=Lato:300,400,400italic);*/

/*===================================================== */
/* html tags
======================================================= */
/* タグ初期化 設定*/
html{
	height: 100%;
	padding:0;
	margin: 0;
}

body {
	position: relative;
	text-align:left;
	padding:0;
	margin:0;

	line-height:1.3em;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	background:#f3f5fc;
}
a{
	text-decoration:none;
	color:#2e0303;
}
a:hover{
	color:#520707;
	text-decoration:underline;
}
h1,h2,h3,h4,h5{margin:0;padding:0;}
h2{
	width:86%;
	margin:0 auto 18px;
	padding:20px 0 20px 28px;
	font-size:20px;
	font-weight:100;
	background:url(../images/common/h2_icon.png) no-repeat left center;
	background-size:14px;
}
h3{}
p,ul,li{margin:0;padding:0;}
li{list-style:none;}
img{border:0; width:100%;}
table{border-collapse: collapse;}
th,td{padding:2%;}


/* クリアフィックス */

/*【clearfix決定版】*/
section:after,article:after,#wrapper:after,#container:after,#inner:after,.section:after,.wrap:after,.inner:after,#navi:after,#footer .footMenu:after{
	content:url(../images/spacer.gif);/* 1x1の透過gif */
	display:block;
	clear:both;
	height:0;
}
.clearfix:after{
	content:url(../images/spacer.gif);/* 1x1の透過gif */
	display:block;
	clear:both;
	height:0;
}
/*【clearfix for IE7 over】*/
.clearfix_for_ie7{zoom: 1;}


/* ユーティリティ */
.inner{width:auto;}
.section{width:auto;}    /*囲み*/
.wrap{width:auto;} 		/*大囲み*/
.box{width:auto;}     /*float用小枠*/
.left{float:left;} /*左寄せ*/
.right{float:right;}/*右寄せ*/
.clear{clear:both;}/*解除*/
.d_table{display: table; table-layout: auto;}
.d_tcell{display: table-cell;}

.circle{     /*角丸*/
	border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
}
/*===================================================== */
/* 共通設定
======================================================= */


/*===================================================== */
/* LAYOUT
======================================================= */

#wrapper{
	width:100%;

}
header#header{
	margin: 0;
	padding: 0 0;
}
#container{
	width:100%;
	margin:auto;
}
.contents{
	width:100%;
	margin:0 auto 10px;
	padding:0 ;
}
#inner{	/* conentsの内枠 */
	width:auto;
	margin:auto;
	padding:0;
}


/*===================================================== */
/* DESIGN
======================================================= */
/* header
======================================================= */

#header_fixArea{
	position:fixed;
	width:100%;
	/* padding:2%; */
	background:rgba(24,41,80,0.95);
	box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.05);
	z-index:999;
	box-sizing: border-box;
}
.menu{
	position: absolute;
	top:44px;
	right: 3%;
	font-size: 10px;
	z-index: 9999;
	color: #fff;
}

#header .inner{
	position:relative;
	margin:auto;
    padding-top:10vh;
    background:#f3f5fc;
}

/* logo */

#header h1#logo{
	width:55%;
	margin:auto;
    padding:0.4rem 0;
}

#header .catch{
	text-align:center;
	font-size: 0.75rem;
	font-weight:100;
	margin:0 0 1rem;
    line-height: 1.8;
}

#header .studioArea{
	margin:0 0 1.3rem;
	line-height:1;

}
#header .studioArea ul{
	display: flex;
	align-items: center;
	justify-content: space-between;
	width:70%;
	margin:auto;
	padding:0;
}
#header .studioArea ul li{
	display: block;
	width:45%;
	line-height: 1.8rem;
	text-align: center;
}
#header .studioArea span.name{
	display: block;
}
#header .studioArea span.name a{
	display: block;
	padding:0 0.2rem;
	background:#283458;
	color: #e1dcca;
	border-radius:3px;
	color:#ddd;
	font-size: 0.8rem;
}
#header .studioArea span.name a:hover{
	color: #aaa;
	text-decoration: none;
}

/* contact wrap */

#header .login-wrap{
	width:94%;
	margin:0 auto 20px;
}

/* login */

#header .login{
	float:left;
	width:45%;
	border: 1px solid #353535;
}
#header .login a{
	display: block;
	padding:8% 2% 8% 20%;
	color: #353535;
	background:url(../images/common/header/login_icon.png) no-repeat 4% center;
	font-size: small;
	line-height: 1;
	text-decoration:none;
	text-align:center;
}
#header .login a:hover{
	background:url(../images/common/header/login_icon.png) no-repeat 4% center #f2f2f2;
}



/* slide_navi
======================================================= */

.slide_navi{
	width:100%;
	margin:0 auto 0px;
	padding: 0;
}
.slide_navi .reservation{
	margin-bottom:2em;
}
.slide_navi .reservation a{
	display: block;
	width:90%;
	margin: 0 auto ;
	text-align: center;
	background:#e70e41;
	text-decoration:none;
	color: #fff;
	border-radius:50vmax;
    line-height: 2.6;
}

/**/

.slide_navi nav > ul{
	width:100%;
	text-align:left;
	margin:0 0 15px;
	border-collapse: collapse;
}
.slide_navi nav > ul li{
	margin:0;
	line-height:50px;
	color:#353535;
	text-align:left;
	box-sizing:border-box;
	border-bottom:1px solid #eee;
}
.slide_navi  nav ul > li > a{
	display: block;
	width:100%;
	height:100%;
	padding:1% 1% 1% 15%;
	box-sizing: border-box;
	color:#353535;
	font-size:0.85rem;
	font-weight: bold;
	border-collapse: collapse;
	border: none;
	line-height:50px;

	background:url('../images/common/icon.png') no-repeat #fff 6% center;
	background-size:10px;
}

.slide_navi  nav ul > li ul{
	text-align: left;
}
.slide_navi  nav ul > li ul li{
}
.slide_navi  nav ul > li ul a{
	display: block;
	padding:0 10px 0 15%;
	border-bottom:3px solid #999;
	background:#283458;
	color: #e1dcca;
	font-size: 0.85rem;

}

/* 電話用 */
.slide_navi .tel{
	width:86%;
	margin:0 auto 30px;
	text-align: left;
}
.slide_navi .tel .open{
	margin:0 auto 10px;
	font-size: 13px;
}
.slide_navi .tel a{
	display: block;
	padding:2% 3% 2% 45px;
	line-height: 1.8;
	border:1px solid #d0d0d0;
	border-radius:10px;
	font-size: 1.2rem;
	font-weight: bold;
	text-align:center;
	box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.05);

background-color: #FFF;
background-image:url('../images/common/tel_icon.png');
background-position: 10px center;
background-repeat:no-repeat;
background-size:25px;

}
.slide_navi .tel span{
	margin-right: 20px;
	font-size: 20px;
}
.slide_navi .tel strong{
	font-size: 30px;
}

/* discountArea
=======================================================*/
#discountArea{
	width:100%;
	margin:0 auto 15px;
	padding:3% 2% 0;
	background:#f9f7c5;
	text-align:center;
	box-sizing: border-box;
}
#discountArea h3{
	margin: 0 0 12px;
}
#discountArea .inner{
	padding:0;
}
#discountArea section {
	position: relative;
	margin:5px auto ;
	padding:0;
	text-align:center;
}
#discountArea .img{
}

/*===================================================== */
/* contact
======================================================= */

.contents .contact{
	padding:25px 0;

}

/*===================================================== */
/* footer
======================================================= */

#footer{
}

#footer #footerSns a{
	display: inline-block;
	width:150px;
	margin: 0 15px;
}
#footer #footerSns a img{
	width:100%;
}

#footer #footerInner{
	position: relative;
	width:1200px;
	margin:0px auto 10px;
	padding: 25px 10px;
	-moz-border-radius:4px;
    -webkit-border-radius:4px;
    border-radius:4px;
}


#footer #footerNavi{
    margin-bottom:2rem
}

#footer #footerNavi ul.cate{
}
#footer #footerNavi ul.cate li{
	display: inline-block;
	margin:0 35px 0 0;
	padding-left:12px;
	line-height:2.2;
	background:url(../images/common/footnavi_icon.gif) no-repeat left center;
}
#footer #footerNavi ul.cate li a{
	color:#444;
	font-size:11px;
}
#footer #footerNavi a:visited{
	text-decoration:none;
}
#footer #footerNavi a:link{
	text-decoration:none;
}
#footer #footerNavi a:hover{
	text-decoration:underline;
}
/**/
#footer_contact{
    background:#ebeffb;
    padding:2.5rem;
    margin-bottom:2.5rem;
}

#footer_contact .reservation{
}
#footer_contact .reservation a{
	width:320px;
	display:block;
	padding:12px 0;
	color:#FFF !important;
	background:#e70e41;
	text-decoration:none;
	font-size:16px;
	font-weight:bold;
	border-radius:5px;
    text-align: center;
}
#footer_contact .reserve a:hover{
	background:#7b4249;
}


#footer_contact ul{
	display: flex;
	align-items: center;
	justify-items: flex-start;
	margin:0 auto 20px;
	padding:12px 2px;
}
#footer_contact ul li{
	vertical-align:middle;
	margin:0 0 20px;
	padding:2px 8px;
	font-size:11px;
}
#footer_contact ul li:nth-child(2){
	border-left:1px solid #CCC;
	border-right:1px solid #CCC;
}
#footer_contact ul span.tel{
	padding:0 10px;
	font-size:22px;
	font-weight:bold;
}
#footer_contact ul span.time{
}

#footer_contact a{
}