@charset "utf-8";
/* Reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td { margin: 0; padding: 0; }
table { border-collapse: collapse; border-spacing: 0; }
fieldset,img { border: 0; }
address,caption,cite,code,dfn,em,th,var { font-style: normal; font-weight: normal; }
li { list-style: none; }
caption,th { text-align: left; }
h1,h2,h3,h4,h5,h6 { font-size: 100%; font-weight: normal; }
q:before, q:after { content: ''; }
abbr,acronym { border: 0; font-variant: normal; }
sup { vertical-align: text-top; }
sub { vertical-align: text-bottom; }
input,textarea,select { font-family: inherit; font-size: inherit; font-weight: inherit; }
input,textarea,select { font-size: 100%; }
legend { color: #000; }
img { vertical-align: top; }
/*
Copyright (c) 2010, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http: //developer.yahoo.com/yui/license.html
version: 3.3.0
build: 3167
*/
/* Base */
body {
	font: 14px/1.231 "aktiv-grotesk", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
	font-weight: 300;
	font-style: normal;
	color: #fff;
	letter-spacing: .1em;
}
select,input,button,textarea { font: 99% arial,helvetica,clean,sans-serif; }
table { font-size: inherit; font: 100%; }
pre,code,kbd,samp,tt { font-family: monospace; font-size: 108%; line-height: 100%; }

a { outline: none; text-decoration: none; }
a:link, a:visited { color: #fff; }
a:hover { text-decoration: underline; }

::-moz-selection { background:#45403e; color:#9a948f; }
::selection { background:#45403e; color:#9a948f; }
a::-moz-selection { background:#45403e; color:#9a948f; }
a::selection { background:#45403e; color:#9a948f; }

/* @Clear */
.clear { clear: both; }
.outlinefix { overflow: hidden; }
.clearfix:after { display: block; visibility: hidden; clear: both; height: 0; content: "."; }
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }

/*  PC  */
@media screen and (min-width: 668px) {
	
	body {
		overflow: hidden;
		height: 100%;
		width: 100%;
		color: #fff;
	}
	#wrap {
		position: absolute;
		z-index: 5;
		height: 100%;
		width: 100%;
		overflow: hidden;
		line-height: 1.6;
	}
	#wrap #container {
		margin: 0 auto;
		width: 100%;
		text-align: center;
	}
	#wrap #container #content {
		position: relative;
		width: 100%;
		text-align: center;
	}
	#main h1 {
		margin-top: -10px;
		text-align: center;
		width: 100%;
	}
	#main h1 img {
		width: 315px; 
	}
	#main ul {
		width: 270px;
		text-align: center;
	}
	#main ul li {
		float: left;
		padding-right: 15px;
		font-size: 15px;
		text-align: center;
	}
	#main ul li:last-child {
		padding-right: 0px;
	}
	div#wrapsiteoverlay {
		position: fixed; top: 0px; left: 0px;
		width: 100%;
		height: 100%;
		background: url(../img/100-90-3.png) 0 0 repeat fixed;
	}
	#header {
		position: fixed;
		top: 30px;
		left: 20px;
		width: 50%;
		color: #fff;
	}
	.reservation a {
		position: fixed; top: 28.5px; right: 28px;
		font-size: 100%;
		width: 100px;
		padding: 6.5px 8px 8px 8px;
		border: #fff solid 0.5px;
		transition: .3s;
	}
	.reservation a:link, a:visited {
	}
	.reservation a:hover { 
		color: #000;
		background: #fff;
		text-decoration: none;
	}
	#footer p {
		position: fixed;
		bottom: 20px;
		width: 50%;
		color: #fff;
	}
	#footer #address {
		left: 20px;
	}
	#footer #copyrights {
		right: 20px;
		text-align: right;
	}
}

/*  MODAL WINDOW  */
	.modalArea {
		font: 14px "aktiv-grotesk", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
		font-weight: 300;
		font-style: normal;
		text-align: center;
		color: #000;
		display: none;
		position: fixed;
		z-index: 30; 
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	.modalBg {
		width: 100%;
		height: 100%;
		background-color: rgba(30,30,30,0.9);
	}
	.modalWrapper {
		position: absolute;
		top: 50%;
		left: 50%;
		transform:translate(-50%,-50%);
		width: 60%;
		max-width: 500px;
		padding: 30px;
		background-color: #fff;
	}
	.closeModal {
		position: absolute;
		top: 0.5rem;
		right: 1rem;
		cursor: pointer;
	}
	#openModal {
		cursor: pointer;
	}
	#openModal:hover { 
		text-decoration: underline;
	}

/*  SP  */
@media screen and (max-width: 667px) {

	body {
		overflow: hidden;
		height: 100%;
		width: 100%;
		color: #fff;
		letter-spacing: 0.05em;
	}
	#wrap {
		position: absolute;
		z-index: 5;
		height: 100%;
		width: 100%;
		overflow: hidden;
		line-height: 1.6;
	}
	#wrap #container {
		margin: 0 auto;
		width: 100%;
		text-align: center;
	}
	#wrap #container #content {
		position: relative;
		width: 100%;
		text-align: center;
	}
	#main h1 {
		margin-top: -25px;
		text-align: center;
		width: 100%;
	}
	#main h1 img {
		width: 210px;
	}
	#main ul {
		margin: 0 auto;
		width: 235px;
		text-align: center;
	}
	#main ul li {
		float: left;
		padding-right: 12px;
		font-size: 13px;
		text-align: center;
	}
	#main ul li:last-child {
		padding-right: 0px;
	}
	div#wrapsiteoverlay {
		position: fixed; top: 0px; left: 0px;
		width: 100%;
		height: 100%;
		background: url(../img/100-90-3.png) 0 0 repeat fixed;
	}
	#header {
		position: fixed;
		top: 20px;
		left: 10px;
		color: #fff;
	}
	.reservation a {
		position: fixed; top: 16px; right: 18px;
		font-size: 90%;
		width: 70px;
		padding: 3px 8.5px 6px 8.5px;
		border: #fff solid 0.5px;
		transition: .3s;
	}	
	.reservation a:link, a:visited {
	}
	.reservation a:hover { 
		color: #000;
		background: #fff;
		text-decoration: none;
	}
	#footer p {
		position: fixed;
		bottom: 10px;
		width: 100%;
		color: #fff;
		font-size: 11px;
	}
	#footer #address {
		left: 10px;
	}
	#footer #copyrights {
		bottom: 10px; right: 10px;
		font-size: 10px;
		text-align: right;
	}
	.modalContents {
		font-size: 90%;
	}


/*  TEL  */
	@media(min-width: 768px){
		a[href^="tel:"]{
		pointer-events: none;
		}
	}