@charset "utf-8";


html { font-size: 62.5%;}
body {
	font-size: 10px;
	font-size: 1rem;
	line-height: 1.6;
	color: #000;
	font-family: 'Playfair Display', "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Osaka", "ＭＳ Ｐゴシック", "MS P Gothic", Verdana,Arial, Helvetica, sans-serif;
	-webkit-text-size-adjust: 100%;
	width: 100%;
    overflow-x: hidden;
}

a{ color: #000; text-decoration:none;}
a:active{ color: #000; text-decoration:none;}
a:hover{ color: #000;  text-decoration:underline;}

.sns_box a{ float:left; margin:10px 25px 0 0; font-size: 20px; font-size: 2rem; color: #fff;}
.sns_box:after{content: "."; display: block; height: 0; clear: both; visibility: hidden; line-height: 0;}


#sp_nav, #navBtn, .sp_img/*, .carousel*/{ display:none;}

#wrap{ width: 100%;  height: auto; position: relative; overflow: hidden;}
.inner{ width: 100%; padding: 0; margin: 0 auto;}

#news, #about, #menu{ width: 100%;  padding: 0px;}
#news, #about{ background: #fff;}
h2{ font-size: 24px; font-size:2.4rem; text-align:center;  margin: 50px auto 10px auto; font-family: 'Raleway'; letter-spacing:0.4em;}
.h2_sub {
	position: relative;
	text-align: center;
	margin: 10px auto 20px auto;
	font-size: 14px;
	font-size: 1.4rem;
	width: 400px;
}
.h2_sub span {
	position: relative;
	z-index: 2;
	display: inline-block;
	margin: 0 2.5em;
	padding: 0 1em;
	background-color: #fff;
	text-align: left;
}
.h2_sub::before {
	position: absolute;
	top: 50%;
	z-index: 1;
	content: '';
	display: block;
	width: 100%;
	height: 1px;
	background-color: #ccc;
}

h3{
	font-size: 24px; font-size: 2.4rem;
}

#header{ width: 100%; height: 700px; text-align: center;  position: relative;   background: url(../img/img01.jpg) no-repeat; background-attachment:fixed; background-size: cover;      background-position: center 61%;}

.carousel{ width: 100%; height: 700px; overflow:hidden; position: fixed; top:0; left: 0;}
.carousel-cell{ width: 100%; height: 100%; overflow:hidden; }
.carousel-cell img{ width: 100%; height: 100%; overflow:hidden; }
.portrait{ width: auto; height: 100%; overflow:hidden; }


#header h1{ margin: 0 auto; padding: 50px; width: 200px; height: 150px;  background: rgba(0,0,0,0.2) ; position:absolute; top: 28%; left: 38%; z-index: 1;}
#header h1 img{
	width: 200px;
    height: auto;
    }
#header h1 p{ font-size: 13px; font-size: 1.3rem;  color: #fff; position: absolute;  top: 66%;    left: 23%;    letter-spacing: 0.3em; font-family:"ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;  white-space:nowrap;} 

#nav, #news, #about, #menu{ z-index: 100;}

#nav{ width: 100%; background: none; padding: 10px 0; border-top: 2px solid #000; border-bottom: 2px solid #000;}
#nav ul{ text-align: center; background: none; }
#nav ul a li{ display: inline-block; }
#nav ul a{ color: #000; font-size: 14px; font-size: 1.4rem;     font-size: 1.4rem;    padding: 0 10px;    margin-right: 30px; letter-spacing:0.1em;}
#nav ul a:hover{ cursor: pointer;}
#nav ul a:last-child{  margin-right: 0px;}

#news{ background: #fff;}
#news dl{ display: block; width: 60%; margin: 10px auto; font-size: 15px; font-size:1.5rem; padding: 10px 0; border-bottom: 1px dotted #ccc;}
#news dl:after{content: "."; display: block; height: 0; clear: both; visibility: hidden; line-height: 0;}
#news dl dt{ width: 15%; float: left;}
#news dl dd{ width: 85%; float: left;}


#news .inner .twitter_box{
	display: block;
	width: 60%;
	margin: 0 auto;
	height: 300px;
	border: 1px #ccc solid;
    overflow: hidden;
}



#about .inner{ width: 100%;}
#about iframe{ width:100%; height: 500px;} 
#about h2{ }
#about .inner .map_box{ width: 65%; height: 500px; float: left;}
#about .inner .info_box{ width: 35%; height: 500px; color: #fff; background: #000; float: left; position: relative;}
#about .inner .info_box .info{ position: absolute; top: 24%; left:8%; font-size: 15px; font-size:1.5rem; letter-spacing:0.1em; width: 82%;}
#about .inner .info_box .info img{ width: 150px; height: auto; margin-bottom: 20px; }
#about .inner:after {
	content: "";
    display: block;
    clear: both;
}

#menu{padding: 0 0 20px 0;   background: rgba(255,255,255,0.5);}
#menu .menu_box{ display: block; width: 60%; margin: 10px auto; font-size: 15px; font-size:1.5rem; padding: 10px 0;	}
#menu .menu_box .text_box{ width: 46%; float: left; margin-right: 4%;}
#menu .menu_box:after {
	content: "";
    display: block;
    clear: both;
}
#menu .menu_box .text_box ul li{border-bottom: 1px dotted #ccc; padding: 10px 0 ; width: 100%;}
.menu{ float: left;}
.price{ float: right; font-family: 'Playfair Display', serif;}
.price:before{ content:"¥"; margin-right: 1em; text-align:right; font-size: 10px;}
.price:after{ content:"(税抜)"; font-size: 10px; margin-left: 1em;}
#menu .menu_box .text_box ul li:after {
	content: "";
    display: block;
    clear: both;
}
#menu .menu_box h3{ margin: 10px 0; text-align: center; font-size: 18px; font-size: 1.8rem; font-weight: bold;}
.comment{ margin-left: 2em; font-size: 12px; font-size: 1.2rem;}


.pageTop{
	 display: block;
    position: fixed;
    bottom: 1.5%;
    z-index: 10;
    right: 3%;
    color: #f1f1f1;
    cursor: pointer;}


#footer{ width: 100%; background: #fff; padding: 30px 0; text-align:center;}
#footer h1{ display: block; width: 200px; height: 120px; margin: 0 auto;}
#footer h1 img{ width: 200px; height: auto;}
#footer copyright{ margin: 30px 0 ; font-size: 10px; font-size: 1rem; color: #000; letter-spacing:0.4em;}
/*---------------------------------------------
 contents
---------------------------------------------*/
#contents { width: 960px; height: auto; margin: 20px auto;}

/*---------------------------------------------
 smartphone
---------------------------------------------*/

@media only screen and (max-width: 1023px) {

img{ max-width:100%; height:auto;}

h2{letter-spacing: 0.1em;}

.h2_sub {
	position: relative;
	text-align: center;
	margin: 10px auto 20px auto;
	font-size: 14px;
	font-size: 1.4rem;
	width: 93%;
}


#header{ height: 500px; padding-top: 0;}
#header h1{ margin: 0 auto; padding: 25px ; width: 150px; height: 80px;  background: rgba(0,0,0,0.2) ; position:absolute; top: 28%; left: 43%; z-index: 1;}
#header h1 img{
	width: 100px;
    height: auto;
    }
#header h1 p{ font-size: 10px; font-size: 1rem;  color: #fff; position: absolute;      top: 62%;
    left: 41px; letter-spacing: 0.3em; font-family:"ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;  white-space:nowrap;} 

.carousel{ width: 100%; height: 500px; overflow:hidden; position: fixed; top:0; left: 0;}
.carousel-cell{ width: 100%; height: 100%; overflow:hidden; }
.carousel-cell img{ width: 100%; height: 100%; overflow:hidden; }

.sp_img{ display: block;}

#nav{ display: none;}
#navBtn{ display:block; position: absolute; top: 10px; right: 2%; z-index: 10; color: #fff;}
#sp_nav{ width: 100%; background: #fff; padding-top: 62px; border-bottom: 2px solid #000; /*position:fixed; top: 0; left:0; z-index:10;*/}
#sp_nav ul{ text-align: left; background: #fff;}
#sp_nav ul a{
    display: block;
    width: 100%;
    height: 24px;
    color: #000;
    font-size:16px;
    font-size: 1.6rem;
    padding: 13px 0 10px 20px;
    margin-right: 30px;
    letter-spacing: 0.1em;
    border-bottom: 1px solid #000;}
#sp_nav ul a:last-child{ border-bottom: 0;}
#sp_nav ul a:first-child{ border-top: 2px solid #000;}

.fa-rotate-90{
	color: #000;
	}

.inner{ width: 85%; margin: 0 auto;}
#news{ /*background: #000; color: #fff;*/}
#news dl{ display: block; width: 100%; font-size: 15px; font-size:1.5rem; padding: 10px 0;}
#news dl:after{content: "."; display: block; height: 0; clear: both; visibility: hidden; line-height: 0;}
#news dl dt{ width: 80%; float: none;}
#news dl dd{ width: 800%; float: none;}

#menu .menu_box{ width: 100%; margin: 20px;}
#menu .menu_box h3{ margin: 15px 0 10px;}

#about .inner .map_box{ width: 100%; height: 300px; float: none;}
#about .inner .info_box{ width: 100%; height: auto; color: #fff; background: #000; float: none; position: relative;}
#about .inner .info_box .info {
    position: relative;
	top: 0;
    left: 0;
    width: 80%;
	margin: 20px auto;
	padding: 20px 0;
    font-size: 15px;
    font-size: 1.5rem;
    letter-spacing: 0.1em;
}

#about .inner .info_box .info a{ color :#fff;}


.pageTop{
	 display: block;
    position: fixed;
    bottom: 10px;
    z-index: 10;
    right: 10px;
	color: rgba(0,0,0,0.5);
    cursor: pointer;}



}

@media only screen and (max-width: 640px) {

#header{ height: 500px; padding-top: 0;}
#header h1{ margin: 0 auto; padding: 25px ; width: 100px; height: 80px;  background: rgba(0,0,0,0.2) ; position:absolute; top: 28%; left: 30%; z-index: 1;}
#header h1 img{
	width: 100px;
    height: auto;
    }
#header h1 p{ font-size: 10px; font-size: 1rem;  color: #fff; position: absolute;  top: 56%;    left: 15px;    letter-spacing: 0.3em; font-family:"ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;  white-space:nowrap;} 


.carousel{ display: block;}

.carousel{ width: 100%; height: 500px; overflow:hidden; position: fixed; top:0; left: 0;}
.carousel-cell{ width: 100%; height: 500px; overflow:hidden; }
.carousel-cell img{ width: 100%; height: 100%; overflow:hidden; }

.sp_img{ display: block;}

#menu .menu_box .text_box{ width: 100%; float: left; margin-right: 0%;}
#menu .menu_box {
    display: block;
    width: 100%;
    margin: 0 auto;
	padding: 0;
    font-size: 13px;
    font-size: 1.3rem;
}

#menu .menu_box h3{ margin: 40px 0 5px;}

#news .inner .twitter_box{
	width: 100%;
}
#header{ width: 100%; height: 400px; overflow:hidden;} 

.carousel{ width: 100%; height: 400px; overflow:hidden; position: fixed; top:0; left: 0;}
.carousel-cell{ width: 100%; height: 100%; overflow:hidden; }

	
}

@media only screen and (min-width: 1024px) {

#sp_nav { display:none !important; } 
	
}