@charset "utf-8";

/* 
00 reset
01 書式設定
02 formカスタム
03 margin padding 各種
04 レイアウト
05 header
06 footer
07 drawerメニュー
08 共通パーツ系
--------------------------------------------------------- 
xx for iphone 5
*/

/* 00 reset
------------------------------------------------------------*/
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, font, 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 {
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	outline: 0;
	font-size: 1em;
}
body,
table,
input, textarea, select, option {
	font-family: HiraKakuProN-W3;
	font-size: 1em;
}
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary {
	display: block;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
:focus {
	outline: 0;
}
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

a{-webkit-tap-highlight-color:rgba(50,35,240,0.6);}
a:link{}
a:visited{}
a:hover{}
a:active{}

img{
	vertical-align:top;
}


/* 01 書式設定
------------------------------------------------------------*/
/* テキストの位置 */
.taLeft 	{text-align: left;}
.taCenter {text-align: center;}
.taRight 	{text-align: right;}

/* フォントの太さ */
.fwNormal {font-weight: normal;}
.fwBold		{font-weight: bold;}

/* フォントの大きさ（プラス） */
.fsP1 { font-size: 1.08em !important; }
.fsP2 { font-size: 1.16em !important; }
.fsP3 { font-size: 1.24em !important; }
.fsP4 { font-size: 1.32em !important; }
.fsP5 { font-size: 1.4em !important; }

/* フォントの大きさ（マイナス） */
.fsM1 { font-size: 0.92em !important; }
.fsM2 { font-size: 0.84em !important; }
.fsM3 { font-size: 0.76em !important; }
.fsM4 { font-size: 0.68em !important; }
.fsM5 { font-size: 0.6em !important; }

.clear { clear:both; }
.floatL { float:left; }
.floatR { float:right; }

/* clearfix
------------------------------------------------------------*/
.clearfix:after {
	content: "";
	display: block;
	clear: both;
}


/* 02 formカスタム
------------------------------------------------------------*/
/*
textarea {
	width: 100% ;
	height: 100px ;
	margin-bottom: 10px ;
}*/
input[type="text"],textarea,select {
	color: #5a5c63;
	font-size: 100% ;
	width: 100% ;
	padding: 3px ;
	border: 1px solid #ccc;
	border-radius: 5px;
	/*-webkit-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2) inset ;*/
	-webkit-box-sizing: border-box;
}

input[type="text"] {
	padding: 5px;
	vertical-align: middle;
	font-size: 1.24rem;
}
textarea {
	height: 8rem;
	padding: 0 5px;
	font-size: 1.24rem;
	resize:vertical;
}
select {
	padding: 5px 25px 5px 5px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	font-size: 1.24rem;
	background-color: #fff;
	background-image: url(../img/common/slct.png);
	background-position: 100% 50%;
	background-repeat: no-repeat;
	-webkit-background-size: 18px 10px;
	background-size: 18px 10px;
}

/* radio checkbox
-> label > input+[span[.rb||.cb] || div[.rb||.cb]]
---------------------------------------*/
input[type="checkbox"],
input[type="radio"]{display: none;}
label{
	cursor: pointer;
	display: block;
}
label > span,
label > div{
	padding-left: 30px;
	position: relative;
	display: block;
}
label .cb:before{
	content: "";
	width: 20px;
	height: 20px;
	margin-top: -10px;
	display: block;
	position: absolute;
	top: 50%;
	left: 5px;
	border-radius: 3px;
	background: #f6f8fc;
	border: 1px solid #ddd;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
label .cb:after{
	content: "";
	width: 5px;
	height: 12px;
	margin-top:-9px; 
	display: block;
	position: absolute;
	top: 50%;
	left: 11px;
	transform: rotate(40deg);
	border-width: 0 3px 3px 0;
	border-style: solid;
	border-color: #ddd;
}
label input:checked + .cb:before{background: #f6f8fc; border: 1px solid #f12b5e;}
label input:checked + .cb:after{border-color: #f12b5e;}

label .rb:before{
	content: "";
	width: 20px;
	height: 20px;
	margin-top: -10px;
	display: block;
	position: absolute;
	top: 50%;
	left: 5px;
	border-radius: 50%;
	background: #f6f8fc;
	border: 1px solid #ddd;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	
}
label input:checked + .rb:before{background: #f6f8fc; border: 1px solid #f12b5e;}
label input:checked + .rb:after{
	content: "";
	width: 10px;
	height: 10px;
	margin-top:-5px; 
	display: block;
	position: absolute;
	top: 50%;
	left: 10px;
	border-radius: 50%;
	background: #f12b5e;
}
label > div > span{
	display: block;
	font-size: .75rem;
}

/* 03 margin padding 各種
-------------------------------------------------------*/
.mb3 {margin-bottom:3px;}
.mb5 {margin-bottom:5px;}
.mb10 {margin-bottom:10px;}
.mb15 {margin-bottom:15px;}
.mb20 {margin-bottom:20px;}
.mb25 {margin-bottom:25px;}
.mb30 {margin-bottom:30px;}
.mb35 {margin-bottom:35px;}
.mb40 {margin-bottom:40px;}
.mb50 {margin-bottom:50px;}

.ml10 {margin-left:10px;}
.ml15 {margin-left:15px;}
.ml20 {margin-left:20px;}
.ml25 {margin-left:25px;}
.ml30 {margin-left:30px;}

.mr10 {margin-right:10px;}
.mr15 {margin-right:15px;}
.mr20 {margin-right:20px;}
.mr25 {margin-right:25px;}
.mr30 {margin-right:30px;}

.mt5 {margin-top:5px;}
.mt10 {margin-top:10px;}
.mt15 {margin-top:15px;}
.mt20 {margin-top:20px;}
.mt25 {margin-top:25px;}
.mt30 {margin-top:30px;}

/* padding
-------------------------------------------------------*/
.pAll5 {padding:5px;}
.ptb3 {padding: 3px 0;}
.plr5 {padding: 0 5px;}
.ptb10 {padding: 10px 0;}
.ptb20 {padding: 20px 0;}

.pt5 {padding-top:5px;}
.pt10 {padding-top:10px;}
.pt15 {padding-top:10px;}
.pt20 {padding-top:20px;}
.pt25 {padding-top:25px;}
.pt30 {padding-top:30px;}

.pl5 {padding-left:5px;}
.pl10 {padding-left:10px;}
.pl15 {padding-left:15px;}
.pl20 {padding-left:20px;}
.pl25 {padding-left:25px;}
.pl30 {padding-left:30px;}

.pr5 {padding-right:5px;}
.pr10 {padding-right:10px;}
.pr15 {padding-right:10px;}
.pr20 {padding-right:20px;}
.pr25 {padding-right:25px;}
.pr30 {padding-right:30px;}

.pb10 {padding-bottom:10px;}
.pb15 {padding-bottom:15px;}
.pb20 {padding-bottom:20px;}
.pb25 {padding-bottom:25px;}
.pb30 {padding-bottom:30px;}


/* 04 レイアウト
------------------------------------------------------------*/
/*

基本サイズ12px	基本サイズ13px	基本サイズ14px	基本サイズ16px
10px 	 84%			10px 	 77%			10px 	 72%			10px 	 63%
11px 	 92%			11px 	 85%			11px 	 79%			11px 	 69%
12px 	100%			12px 	 93%			12px 	 86%			12px 	 75%
13px 	109%			13px 	100%			13px 	 93%			13px 	 81%
14px 	117%			14px 	108%			14px 	100%			14px 	 88%
15px 	125%			15px 	116%			15px 	108%			15px 	 94%
16px 	134%			16px 	124%			16px 	115%			16px 	100%
17px 	142%			17px 	131%			17px 	122%			17px 	106%
18px 	150%			18px 	139%			18px 	129%			18px 	113%
19px 	159%			19px 	147%			19px 	136%			19px 	119%
20px 	167%			20px 	154%			20px 	143%			20px 	125%
21px 	175%			21px 	162%			21px 	150%			21px 	131%
22px 	184%			22px 	170%			22px 	158%			22px 	138%
23px 	192%			23px 	177%			23px 	165%			23px 	144%
24px 	200%			24px 	185%			24px 	172%			24px 	150%
25px 	209%			25px 	193%			25px 	179%			25px 	156%
26px 	217%			26px 	200%			26px 	186%			26px 	163%
-------------------------------------------------------*/
html{font-size: 16px;}
body{
	text-align: center;
	line-height: 1.5;
	font-size:16px;
	font-family: ArialMT, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", メイリオ, sans-serif;
	-webkit-text-size-adjust: none;
	color:#333333;
}
#wrapper {
	min-width: 320px;
	text-align: left;
	display: -webkit-flex;
	display: flex;
	flex-flow: column;
	min-height: 100vh;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}


/* 05 header
------------------------------------------------------------*/
header {
	width: 100%;
	min-width: 320px;
	border-bottom: 2px solid #a9976d;
}
#hdInner{
	padding: 5px 10px;
	display: -webkit-flex;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: center;

	background-image: url(../img/common/hd_bg.png);
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	background-size: cover;
	border-bottom: 5px solid #e6dfc9;
}
#hdinfo{
	display: -webkit-flex;
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-end;
	align-items: center;
	gap: 2px;
}
#hdinfo dt{
	color: #897648;
	text-align: left;
	line-height: 1;
	font-weight: bold;
	font-size: .81rem;
}
#hdinfo dt span{display: block; font-feature-settings: "palt";}
#hdMail a img{width: 36px; height: auto;}
#hdTel a img{width: 36px; height: auto;}
#hdRsv a img{width: 33px; height: auto;}
#locheader{
	padding: 3px 5px;
	display: -webkit-flex;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: center;
}
#locheader h1 a > img{
	width: auto;
	max-height: 41px;
}
#locheader h1 a span{
	padding-top: 2px;
	line-height: 1;
	display: block;
}
#locheader h1 a span img{
	width: auto;
	max-height: 16px;
}
#hdCredit{
	margin: 5px 0;
	text-align: center;
	/*background: #2455ff;*/
}
#hdCredit img{
	max-width: 375px;
	width: 100%;
	height: auto;
}
span#hdCaps{
	padding: 0 5px 3px;
	line-height: 1;
	display: block;
}
span#hdCaps img{
	max-width: 370px;
	width: 100%;
	height: auto;
}
/* 06 footer
------------------------------------------------------------*/
footer{
	min-width: 320px;
	text-align: left;
}
#sftMob{
	padding: 15px 30px;
	text-align: center;
	font-size: .88rem;
}
#sftMob a{
	padding: 5px 15px;
	display: block;
	border: 1px solid #333;
	border-radius: 25px;
	color: #333;
	font-size: 1.25rem;
	font-weight: bold;
}
#sftMob a span{
	padding:3px 0 3px 20px;
	display: inline-block;
	position: relative;
}
#sftMob a span:before{
	width: 17px;
	height: 32px;
	margin-top: -17px;
	background-image: url(../img/common/mobile_icon.png);
	background-repeat: no-repeat;
	-webkit-background-size: 17px 32px;
	background-size: 17px 32px;
	background-position: 50% 50%;
	position: absolute;
	top: 50%;
	left: 0;
	content: '';
}
footer small{
	padding: 10px 0;
	text-align: center;
	font-size: .69rem; 
	display: block;
}


/* 08 共通パーツ系
------------------------------------------------------------*/
.hd {
	background: #a97150;
	margin-bottom: 10px;
}
.hd img{
	max-width: 375px;
	width: 100%;
	height: auto;
}

.dis{display: none;}


/* テーブルレイアウトセット(ul>li>dl>[dt+dd])
---------------------------------------  */
ul.tbl{
	border: 2px solid #000;
	border-radius: 5px;
	overflow: hidden;
}
ul.tbl li:last-child{margin-bottom: -1px;}
ul.tbl li dl{
	display: -webkit-flex;
	display: flex;
	flex-flow: row nowrap;
	overflow: hidden;
	justify-content: center;
	align-items: stretch;
}

ul.tbl li dl dt{
	padding: 2px;
	flex: 0 0 5em;
	font-weight: normal;
	font-size: .86rem;
	line-height: 20px;
	color:#fff;
	background: #333;
	border-bottom: 1px solid #fff;
}
ul.tbl li dl dd{
	padding: 2px;
	flex: 1 1 0;
	/*white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;*/
	font-size: 1.15rem;
	background: #eee;
	border-bottom: 1px solid #000;
}
/* パンくずリスト
---------------------------------------  */
#breadcrumb{
	overflow-x: auto;
	-webkit-overflow-scrolling:touch;
	white-space: nowrap;
	background: #eee;
	border-top: 2px solid #000;
}
#breadcrumb::-webkit-scrollbar{height: 5px;}
#breadcrumb::-webkit-scrollbar-track{background: #f1f1f1;}
#breadcrumb::-webkit-scrollbar-thumb {background: #bcbcbc;}


#breadcrumb li {
	height: 2rem;
	line-height: 2rem;
	padding-right: 20px;
	display: inline-block;
	position: relative;
	padding-left: 10px;
}
#breadcrumb li:not(:last-child):after{
	content: '';
	width: 1.4rem;
	height: 1.4rem;
	margin-top: -.7rem;
	border-top: 1px solid #a3a3a3;
	border-right: 1px solid #a3a3a3;
	transform: rotate(45deg);
	display: block;
	position: absolute;
	top: 50%;
	right: 0;
}
#breadcrumb li a,
#breadcrumb li span {
	height: 2rem;
	line-height: 2rem;
	display: block;
	text-decoration: none;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	color: #000;
}


/* arrow
---------------------------------------  */
.arR{position: relative;}
.arR:after{
	content: '';
	width: 10px;
	height: 10px;
	margin-top: -5px;
	border-top: 1px solid #000;
	border-right: 1px solid #000;
	transform: rotate(45deg);
	display: block;
	position: absolute;
	top: 50%;
	right: 8px;
}
.arL{position: relative;}
.arL:before{
	content: '';
	width: 10px;
	height: 10px;
	margin-top: -5px;
	border-width: 1px 0 0 1px;
	border-style: solid;
	border-color: #000;
	transform: rotate(-45deg);
	display: block;
	position: absolute;
	top: 50%;
	left: 8px;
}
.arTriR{position: relative;}
.arTriR:after {
	content:'';
	position: absolute;
	top:50%;
	right:-16px;
	margin:-10px 0 0 0;
	width:0;
	height:0;
	border-style: solid;
	border-width: 8px 0 8px 14px;
	border-color: transparent transparent transparent #000;
}

.cross{position: relative;}
.cross:before,
.cross:after{
	width: 16px;
	height: 3px;
	margin-top: -2px;
	/*background: #000;*/
	background: #fff;
	border-radius: 4px;
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
}
.cross:before{	transform: rotate(45deg);}
.cross:after{	transform: rotate(-45deg);}

.execute-hidden {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	/* visibility: hidden !important; */
}

/* infiniterLoading用 style
---------------------------------------  */
.loading{
  color: #fff;
  font-size: 10px;
  margin: 100px auto;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  position: relative;
  text-indent: -9999em;
  -webkit-animation: loadAnimation 1.3s infinite linear;
  animation: loadAnimation 1.3s infinite linear;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}
@-webkit-keyframes loadAnimation {
  0%,
  100% {
    box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
  }
  12.5% {
    box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
  }
  25% {
    box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
  }
  37.5% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
  }
  50% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
  }
  62.5% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
  }
  75% {
    box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
  }
  87.5% {
    box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
  }
}
@keyframes loadAnimation {
  0%,
  100% {
    box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
  }
  12.5% {
    box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
  }
  25% {
    box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
  }
  37.5% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
  }
  50% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
  }
  62.5% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
  }
  75% {
    box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
  }
  87.5% {
    box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
  }
}


#modalInfo{
	max-width: 375px;
	padding: 0;
	background: transparent;
}
#modalInfo dl{
	/*width: 300px;*/
	padding: 40px 20px;
	text-align: center;
	border-radius: 10px;
	background: #fff;
}
#modalInfo dt{
	padding: 5px 0;
	font-size: 1.34rem;
	background: #8a7749;
	color: #fff;
}
#modalInfo dd{
	padding: 3px 5px;
	background: #fff;
	border: 2px solid #8a7749;
}

#modalInfo dd div{
	margin: 4px;
	display: -webkit-flex;
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	justify-content: center;
	text-align: center;
}
#modalInfo dd div#mdlTime{}
#modalInfo dd div#mdlTel{font-size: 1.5rem;}
#modalInfo dd div#mdlTel span{
	padding-left: 40px;
	position: relative;
}
#modalInfo dd div#mdlTel span:before{
	width: 36px;
	height: 36px;
	margin-top: -18px;
	content: '';
	display: block;
	position: absolute;
	top: 50%;
	left: 0;
	background: url(../img/area/hd_tel.png) 0 0 no-repeat;
	-webkit-background-size: 36px 36px;
	background-size: 36px 36px;
}
#modalInfo .remodal-close {
	top: 0;
	left: 0;
	width: 35px;
	height: 35px;
	margin: 0;
	padding: 0;
	color: #95979c;
}

#modalInfo .remodal-close:before {
  border: none;
	color: #95979c;
  background: none;
}

/* -------------------------------------------------
####################################################
####################################################
####################################################
------------------------------------------------- */
@media screen and (min-width: 768px){
	body{background-image: url(../img/common/bg_pattern.png);}
	#wrapper {
		width: 375px;
		margin: 0 auto;
		background: #fff;
	}
}

/*
xx for iphone 5
--------------------------------------------------------- */
@media screen and (max-width: 374px) {
	#hdinfo dt{font-size: .75rem;}
	#hdMenu li a{font-size: .63rem;}
}
@media screen and (max-width: 359px) {
	#locheader{padding: 5px 3px;}
	#locheader h1 a > img{
		width: auto;
		max-height: 35px;
	}
	#locheader h1 a span img{
		width: auto;
		max-height: 14px;
	}
	#hdinfo dt{font-size: .63rem;}
}
/*@media screen and (max-width: 320px) {
	#hdMenu li a{font-size: .63rem;}
	#hdinfo dt{font-size: .63rem;}
}*/