@charset "utf-8";

/*===============================================
●共通
===============================================*/
* {box-sizing: border-box;}
body {
	color:#17234D;
	background-color:#ffffff;
	box-sizing:border-box;
	font-size:87.5%; /* 1em=14pxに設定 */
}
body,
th,
td {
	font-family: "FOT-筑紫ゴシック Pr5 R", "メイリオ", Meiryo, Arial, Helvetica, "MS UI Gothic", "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
	line-height:1.5em;
}
p {
	text-align:justify;
	text-justify:distribute;
}
img {
	max-width:100%;
	height:auto;
	vertical-align:middle;
	-ms-interpolation-mode:bicubic; 
}
a:link { color:#17234D;}
a:visited { color:#17234D;}
a:hover {
	color:#17234D;
	text-decoration:none;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-ms-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}
a:active { color:#17234D;}
a:hover img {
	filter:alpha(opacity=8);
	-moz-opacity: 0.8;
	opacity: 0.8;
}
#loaderBG {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	background-color: #fff;
	z-index: 10000;
	overflow: hidden;
}
#loader,
#mainImage #logo {
	position: absolute;
	top: 50%;
	left: 50%;
	text-align: center;
	color: #fff;
	z-index: 10002;
}
#onlineReservBox {display: none;}

/* header
---------------------------------------- */
#header {
	width: 100%;
	position: fixed;
	background-color: #fff;
	z-index: 1001;
	-moz-box-shadow: 0px 4px 4px -2px rgba(0, 0, 0, 0.3);
	-webkit-box-shadow: 0px 4px 4px -2px rgba(0, 0, 0, 0.3);
	-ms-box-shadow: 0px 4px 4px -2px rgba(0, 0, 0, 0.3);
	box-shadow: 0px 4px 4px -2px rgba(0, 0, 0, 0.3);
}
#header #mainMenu a {
	display: block;
	text-decoration: none;
}
#header #mainMenu {font-family: "FOT-筑紫ゴシック Pr5 D";}
#header .subMenu {font-family: "FOT-筑紫ゴシック Pr5 M";}

/* footer
---------------------------------------- */
#footer {
	width: 100%;
	background-color: #16234D;
}
#footer a,
#footer address,
#footer p {
	color :rgba(255, 255, 255, 0.7);
	text-decoration: none;
}
#footerInner01 h3 {
	font-size: 1.15em;
	color: #fff;
}
#footerInner02 table th, #footerInner02 table td {color: rgba(255, 255, 255, 0.7);}
#footerInner02 table th {font-size: 0.85em;}
#footerInner02 table td {
	font-size: 1.65em;
	line-height: 1.2em;
	font-family: "adobe-garamond-pro";
}
#footerInner02 table td span {font-size: 75%;}
#logoBoxSP ul li a {
	display: block;
	color: rgba(255, 255, 255, 0.7);
}
/*GMO決済でicomoonのアイコンが表示されないため、画像に変更*/
#logoBoxSP li a span {
	display: inline-block;
	width: 14px;
	height: 14px;
	opacity: 0.7;
	vertical-align: middle;
}
#logoBoxSP li a span::before {display: none;}
#logoBoxSP li a span.icon-instagram {background:url(../images/mainframe/icon_instagram.png) no-repeat center center/ cover;}
#logoBoxSP li a span.icon-facebook2 {background:url(../images/mainframe/icon_facebook.png) no-repeat center center/ cover;}
#logoBoxSP li a span.icon-twitter {background:url(../images/mainframe/icon_twitter.png) no-repeat center center/ cover;}
#logoBoxSP li a span.lineat {background:url(../images/mainframe/line.png) no-repeat center center/ cover;}
#logoBoxSP li a span.icon-youtube {background:url(../images/mainframe/icon_youtube.png) no-repeat center center/ 100% auto;}

#copyRight {text-align: center;}

/*===============================================
●画面の横幅が729px以下(スマホのみ)
===============================================*/
@media screen and (max-width: 729px){
	
	/* 全般
	---------------------------------------- */
	body {
		min-width:320px;
		-webkit-text-size-adjust: none;
		-webkit-overflow-scrolling: touch;
	}
	#logoBoxPC,
	.spNone {
		display:none!important;
	}
	#footerInner01,
	#footerInner02,
	.inner {
		padding:0 1em;
	}
	.inner02 {padding: 0 1em 3em;}
	
	/* loader
	---------------------------------------- */
	#loader,
	#mainImage #logo {
		width: 100px;
		height: 100px;
		margin-top: -50px;
		margin-left: -50px;
	}
	
	/* header
	---------------------------------------- */
	#header {padding-bottom: 0!important;}
	#headerInner {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: space-between;
	}
	#headerLogo {
		width: 10%;
		padding-left:0.7em;
	}
	#headerLogo img {width: 2.28em;}
	#header #language {
		display: none;
		width: 5em;
		text-align: right;
		padding-right: 0.5em;
	}
	#spBtnWrapper {
		text-align: right;
		display: flex;
		padding-right: 1em;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: flex-end;
	}
	#reserveBtn,
	#onlineBtn,
	#lunchBtn {
		margin-left: 0.3em;
		vertical-align: middle;
	}
	#reserveBtn a,
	#onlineBtn a,
	#lunchBtn a {
		display: block;
		width: 100%;
		color: #16234D;
		line-height: 24px;
		text-align: center;
		text-decoration: none;
		padding: 0.1em 0.3em;
		border: #16234D 1px solid;
	}
	#menuBtn {
		display: inline-block;
		cursor: pointer;
		position: relative;
		width: 40px;
		height: 45px;
		text-align: center;
		color: #16234D;
		vertical-align: middle;
	}
	#menuBtn span {
		-webkit-transition: all .4s;
		transition: all .4s;
		display: inline-block;
		position: absolute;
		left: 10px;
		width: 30px;
		height: 3px;
		background-color: #16234D;
		border-radius: 2px;
	}
	#menuBtn span:nth-child(1) {top: 12px;}
	#menuBtn span:nth-child(2) {top: 21px;}
	#menuBtn span:nth-child(3) {top: 30px;}
	.menuOpen #menuBtn span:nth-child(1) {
		-webkit-transform: translateY(8px) rotate(-45deg);
		transform: translateY(8px) rotate(-45deg);
	}
	.menuOpen #menuBtn span:nth-child(2) {opacity: 0;}
	.menuOpen #menuBtn span:nth-child(3) {
		-webkit-transform: translateY(-10px) rotate(45deg);
		transform: translateY(-10px) rotate(45deg);
	}
	#gMenu {
		display: none;
		position: absolute;
		width: 100%;
		top: 45px;
		left: 0;
		padding: 1em 20px;
		background-color: #16234D;
		overflow-y: scroll;
	}
	#header #languageSP {
		color: #fff;
		text-align: right;
		padding-bottom: 1em;
	}
	#header #languageSP a {color: #fff;}
	#mainMenu {border-top: rgba(255, 255, 255, 0.5) 1px solid;}
	#mainMenu li {
		font-size: 16px;
		line-height: 70px;
		width: 100%;
		padding-left: 1em;
		align-items: center;
		border-bottom: rgba(255, 255, 255, 0.5) 1px solid;
	}
	#mainMenu a {
		width: 100%;
		color: #fff;
		line-height: 4em;
		font-size: 0.85em;
	}
	#mainMenu li .subMenu {
		display: none;
		margin-bottom: 0.5em;
	}
	#mainMenu li .subMenu li {
		border-bottom: none;
	}
	#mainMenu li .subMenu li a {
		color: rgba(255, 255, 255, 0.7);
		line-height: 3em;
	}
	#mainMenu .parentLink {position: relative;}
	#mainMenu .parentLink:after {
		display: block;
		color: #fff;
		position: absolute;
		top: 50%;
		right: 0;
		font-size: 20px;
		margin-top: -0.5em;
		line-height: 1em;
		font-family: "icomoon";
	}
	#mainMenu .parentLink.is-close:after {	content: "\eaf9";}
	#mainMenu .parentLink.is-open:after {	content: "\eaf8";}
	
	/* container
	---------------------------------------- */
	#container {padding: 45px 0 0;}
	
	/* footer
	---------------------------------------- */
	#footer {padding: 4em 0  20px;}
	/*  footerInner01*/
	#footerInner01 {margin-bottom: 1.5em;}
	#footerInner01 section {border-bottom: rgba(255, 255, 255, 0.5) 1px solid;}
	#footerInner01 section:nth-child(1) {border-top: rgba(255, 255, 255, 0.5) 1px solid;}
	#footerInner01 h3 {
		line-height: 3.5em;
		position: relative;
		cursor: pointer;
	}
	#footerInner01 h3:after {
		display: block;
		color: #fff;
		position: absolute;
		top: 50%;
		right: 0;
		font-size: 20px;
		margin-top: -0.5em;
		line-height: 1em;
		font-family: "icomoon";
	}
	#footerInner01 h3.close:after {content: "\eaf9";}
	#footerInner01 h3.open:after {content: "\eaf8";}
	#footerInner01 ul {
		display: none;
		margin-bottom: 1em;
	}
	#footerInner01 ul li a {
		display: block;
		line-height: 3em;
	}
	#footerInner01 .recruitLink {
		border-bottom: rgba(255, 255, 255, 0.5) 1px solid;
		font-size: 1.15em;
		line-height: 3.5em;
	}
	#footerInner01 .recruitLink a {
		display: block;
		color:#fff;
	}
	
	/* footerInner02 */
	#footerInner02 table th, #footerInner02 table td {
		display: block;
		width: 100%;
		text-align: center;
	}
	#footerInner02 #footerTelBox table p {
		font-size: 0.55em;
		text-align: center;
		font-family: "FOT-筑紫ゴシック Pr5 M", "メイリオ", Meiryo, Arial, Helvetica, "MS UI Gothic", "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
	}
	
	#footerInner02 table td {margin-bottom: 1em;}
	#logoBoxSP h3 {
		width: 30%;
		margin: 3em auto 2.5em;
		opacity: 0.7;
	}
	#logoBoxSP ul {
		display: table;
		width: auto;
		margin: 0 auto 1em;
		border-collapse: separate;
		border-spacing: 2em 0;
	}
	#logoBoxSP ul li {display: table-cell;}
	p#copyRight {
		font-size: 0.85em;
		color: rgba(255, 255, 255, 0.8);
	}
}

/*===============================================
●画面の横幅が730px以上(PCのみ)
===============================================*/
@media screen and (min-width: 730px){
	
	/* 全般
	---------------------------------------- */
	body {
		overflow-y:scroll;
		font-size:75%;
		line-height: 1.7em;
	}
	#logoBoxSP h3,
	#logoBoxSP p,
	#languageSP,
	.pcNone {
		display:none!important;
	}
	#headerInner,
	#footerInner01,
	#footerInner02,
	.inner {
		width:100%;
		max-width:1080px;
		padding:0 10px;
		margin:0 auto;
	}
	.inner02 {
		width:100%;
		max-width:960px;
		padding:0 10px 7em;
		margin:0 auto;
	}
	
	/* loader
	---------------------------------------- */
	#loader,
	#mainImage #logo {
		width: 240px;
		height: 240px;
		margin-top: -120px;
		margin-left: -120px;
	}
	
	
	
	/* container
	---------------------------------------- */
	#container {padding: 3.1em 0 0;}
	
	/* footer
	---------------------------------------- */
	#footer {padding: 4em 0;}
	/* footerInner01 */
	#footerInner01 {
		display: flex;
		flex-wrap: nowrap;
		margin-bottom: 0
	}
	#footerInner01 section {
		width: 15%;
		align-items: center;
		margin-right: 2%;
		border-top: rgba(255, 255, 255, 0.5) 1px solid;
	}
	#footerInner01 section:nth-child {margin-right: 0;}
	#footerInner01 h3 {
		line-height: 2.5em;
		margin-bottom: 0.5em;
	}
	#footerInner01 ul li a {
		display: block;
		font-size: 0.85em;
		line-height: 1.2em;
		padding: 0.5em 0;
	}
	/* footerInner02 */
	#footerInner02 {
		display: table;
		position: relative;
		margin-bottom: 1em;
	}
	#footerInner02 #logoBoxPC img {
		width: 120px;
		height: 120px;
	}
	#footerInner02 #logoBoxPC {
		display: flex;
		align-items: flex-end;
		width: 100%;
	}
	#footerInner02 #logoBoxPC h3 {
		max-width: 300px;
		opacity: 0.8;
		margin-right: 1em;
		font-family: "FOT-筑紫明朝 Pr6 M";
	}
	#footerInner02 #logoBoxPC address,
	#footerInner02 #logoBoxPC p {
		display: inline-block;
		font-size: 0.8em;
		line-height: 1.2em;
		margin: 0 1em 0.5em 0;
	}
	#footerInner02 #footerTelBox {
		width: 50%;
		display: table-cell;
		white-space: nowrap;
		vertical-align: bottom;
		padding-right: 1em;
	}
	#footerInner02 #footerContact {
		width: 14%;
		min-width: 7em;
		display: table-cell;
		vertical-align: bottom;
	}
	#footerInner02 #logoBoxSP ul {
		display: block;
		position: absolute;
		bottom: 4.5em;
		right: 10px;
	}
	#footerInner02 #logoBoxSP ul li {
		display: inline-block;
		vertical-align: top;
		text-align: right;
		margin-left: 1.5em;
	}
	#copyRight {font-size: 0.8em;}
}

/*===============================================
●画面の横幅が1021px以上(PCのみ)
===============================================*/
@media screen and (min-width: 1021px){
	
	/* 全般
	---------------------------------------- */
	body {
		font-size:87.5%;
	}
	#footerInner02 #footerTelBox {padding-left: 3%;}
	
	/* header
	---------------------------------------- */
	#header {padding: 0.5em 0;}
	#headerInner {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		z-index: 1000;
		justify-content: flex-end;
	}
	#headerLogo {width: 26px;}
	#gMenu {margin-right: auto;}
	
	#menuBtn,
	#logoBoxSP h3,
	#logoBoxSP p,
	#languageSP,
	.pcNone {
		display:none!important;
	}
	#mainMenu {
		display: table;
	}
	#mainMenu li {
		display: table-cell;
		text-align: center;
		white-space: nowrap;
		border-right: #17234D 1px solid;
	}
	#mainMenu li:last-child {border-right: none;}
	#mainMenu li a {
		display: inline-block;
		line-height: 1.1em;
		padding: 0 0.7em;
	}
	#mainMenu li.parentMenu {
		position: relative;
		border-left: none;
	}
	#mainMenu li .subMenu {
		position: absolute;
		top: 2.2em;
		left: 0;
		font-size: 0.85em;
		display: none;
	}
	#mainMenu .subMenu li {border-right: none;}
	#language {
		white-space: nowrap;
		padding: 0 0.5em;
		text-align: right;
	}
	#mainMenu li.question {display: none;}
	#spBtnWrapper {display: flex;}
	#reserveBtn,
	#onlineBtn,
	#lunchBtn {
		margin-left: 0.5em;
	}
	#reserveBtn a,
	#onlineBtn a,
	#lunchBtn a {
		display: block;
		color: #fff;
		text-align: center;
		line-height: 2em;
		white-space: nowrap;
		padding: 0 0.3em;
		text-decoration: none;
		background-color: rgba(23, 35, 77, 1.0);
	}
	#reserveBtn a:hover,
	#onlineBtn a:hover,
	#lunchBtn a:hover {
		background-color: rgba(23, 35, 77, 0.7);
	}
}

/*===============================================
●画面の横幅が730px以上1020px未満
===============================================*/
@media screen and (min-width: 730px) and (max-width: 1020px){
	/*#reserveBtn a,
	#onlineBtn a,
	#lunchBtn a {
		font-size: 0.83em;
	}*/
}

/*===============================================
●画面の横幅が730px以上1020px未満
===============================================*/
@media screen and (min-width: 730px) and (max-width: 1020px){
	
/* header
	---------------------------------------- */
	#header {padding-bottom: 0!important;}
	#headerInner {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: space-between;
	}
	#headerLogo {
		width: 10%;
		padding-left:0.7em;
	}
	#headerLogo img {width: 2.66em;}
	#header #language {
		display: none;
		width: 5em;
		text-align: right;
		padding-right: 0.5em;
	}
	#spBtnWrapper {
		text-align: right;
		display: flex;
		padding-right: 1em;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: flex-end;
	}
	#reserveBtn,
	#onlineBtn,
	#lunchBtn {
		margin-left: 0.3em;
		vertical-align: middle;
	}
	#reserveBtn a,
	#onlineBtn a,
	#lunchBtn a {
		display: block;
		width: 100%;
		line-height: 24px;
		text-align: center;
		text-decoration: none;
		padding: 0.1em 0.3em;
		border: #16234D 1px solid;
		font-size: 1.16em;
	}
	#menuBtn {
		display: inline-block;
		cursor: pointer;
		position: relative;
		width: 40px;
		height: 45px;
		text-align: center;
		color: #16234D;
		vertical-align: middle;
	}
	#menuBtn span {
		-webkit-transition: all .4s;
		transition: all .4s;
		display: inline-block;
		position: absolute;
		left: 10px;
		width: 30px;
		height: 3px;
		background-color: #16234D;
		border-radius: 2px;
	}
	#menuBtn span:nth-child(1) {top: 12px;}
	#menuBtn span:nth-child(2) {top: 21px;}
	#menuBtn span:nth-child(3) {top: 30px;}
	.menuOpen #menuBtn span:nth-child(1) {
		-webkit-transform: translateY(8px) rotate(-45deg);
		transform: translateY(8px) rotate(-45deg);
	}
	.menuOpen #menuBtn span:nth-child(2) {opacity: 0;}
	.menuOpen #menuBtn span:nth-child(3) {
		-webkit-transform: translateY(-10px) rotate(45deg);
		transform: translateY(-10px) rotate(45deg);
	}
	#gMenu {
		display: none;
		position: absolute;
		width: 100%;
		top: 45px;
		left: 0;
		padding: 1em 20px;
		background-color: #16234D;
		overflow-y: scroll;
	}
	#header #languageSP {
		color: #fff;
		text-align: right;
		padding-bottom: 1em;
	}
	#header #languageSP a {color: #fff;}
	#mainMenu {border-top: rgba(255, 255, 255, 0.5) 1px solid;}
	#mainMenu li {
		font-size: 16px;
		line-height: 70px;
		width: 100%;
		padding-left: 1em;
		align-items: center;
		border-bottom: rgba(255, 255, 255, 0.5) 1px solid;
	}
	#mainMenu a {
		width: 100%;
		color: #fff;
		line-height: 4em;
		font-size: 0.85em;
	}
	#mainMenu li .subMenu {
		display: none;
		margin-bottom: 0.5em;
	}
	#mainMenu li .subMenu li {
		border-bottom: none;
	}
	#mainMenu li .subMenu li a {
		color: rgba(255, 255, 255, 0.7);
		line-height: 3em;
	}
	#mainMenu .parentLink {position: relative;}
	#mainMenu .parentLink:after {
		display: block;
		color: #fff;
		position: absolute;
		top: 50%;
		right: 0;
		font-size: 20px;
		margin-top: -0.5em;
		line-height: 1em;
		font-family: "icomoon";
	}
	#mainMenu .parentLink.is-close:after {	content: "\eaf9";}
	#mainMenu .parentLink.is-open:after {	content: "\eaf8";}
}