/* CSS Document */
@charset "UTF-8";
/* CSS Document */


/*■■■■■■■■■■■■■■*/

/*
ヘッダーのみCSS
PCとスマホ共通のハンバーガーメニュー

*/

/*■■■■■■■■■■■■■■*/

    header{
		position:relative;
    }
    header #fixed{
        z-index:1000;
        position:fixed;
		width:100%;
		
		/*padding-top:5px;スクロールで動き付け*/
		/*上ピッタリの時は背景外す
       background: rgba(255,255,255,0.9);
		  */
		  
		  
		  
  -webkit-transition: all 0.7s;
     -moz-transition: all 0.7s;
      -ms-transition: all 0.7s;
       -o-transition: all 0.7s;
          transition: all 0.7s;
    }
	
    header #fixed{
		/*上ピッタリの時はシャドウ外す
		box-shadow:0px 1px 3px 1px rgba(0,0,0,0.04);*/
}
	
	
	#logo a{
		display:block;
		line-height:0;
		overflow:hidden;
		margin:0;
		padding:0;
	}
	#logo #logo_img{
		width:97%;
		max-width:280px;
		height:auto;
		margin:10px 0 10px 3%;
		transition: all 0.4s ease;
	}

	#logo #logo_img.logo_small_js{
		/*スクロールした時のサイズ*/
		max-width:200px;
	}




/*※※※グローバルナビ　※※※*/






/*チェックボックス等は非表示に*/
.nav-unshown {
  display:none;
}
/*ナビ内SNS*/
#nav-content ul li.nav_sns{
	display:none;
}



/*※※※ ナビスタイル ※※※*/

#nav-content{
   	background: rgba(255,255,255,0.9);
}
#nav-content ul{
	padding-top:20px;
}
#nav-content ul li {
	font-size: 16px;
	line-height: 1.1em;
	letter-spacing:4px;
    text-align: center;
	margin-left:1%;
	text-shadow: 1px 1px #eee;
	margin:0;
}
#nav-content ul li span {
    display: block;
	letter-spacing: 2px;
	font-weight: normal;
	text-shadow:none;
	text-shadow: 1px 1px #eee;
}
#nav-content ul li a {
	color: #45260d;
	display:block;
	text-decoration:none;
    padding:10px 0;
    display: block;
    padding: 13px 0 10px;
    width: 50%;
    float: left;
}
#nav-content ul li a span {
	color: #444;
	font-size: 10px;
	font-weight: 200;
	letter-spacing: 3px;
	font-family: 'Noto Serif JP', serif;
}
#nav-content ul li a:hover {
	filter: alpha(opacity=50);
	-moz-opacity: 0.50;
	opacity: 0.50;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}
#nav-content ul li.nav_long a{
	width: 100%;
}
	
	



#nav-content ul li.nav_sns{
	display:block;
	width:100%;
	text-align: center;
    overflow:hidden;
    letter-spacing: -.40em;
/*	border-top:solid 1px #ccc;
	border-bottom:solid 1px #ccc;
*/}
#nav-content ul li.nav_sns div{
    display:inline-block;
     vertical-align:top;
     letter-spacing:1px; /* 文字間を通常に戻す */
	 margin-left:2%;
	 margin-right:2%;
}
#nav-content ul li.nav_sns a{
	display:block;
	width:100%;
	margin:0;
	padding:5px 0 5px;
	border:none;
}
#nav-content ul li.nav_sns img.nav_icon_img{
	display:block;
	width:100%;
	max-width:20px;
	height:auto;
	margin-left: auto;
	margin-right: auto;
	margin-bottom:5px;
}
#nav-content ul li.nav_sns p{
	display:block;
	font-size:8px;
	text-align:center;
	line-height:1.2em;
	letter-spacing:0;
}



#nav-drawer {
  position: relative;
}


/*アイコンのスペース*/
#nav-open {
    display: inline-block;
    width: 34px;
    height:30px;
    vertical-align: middle;
    float: right;
    padding:12px 10px 10px;
  cursor: pointer;
}

#nav-title {
  	position: absolute;
	top:20px;
	right:60px;
    display: inline-block;
	font-size:12px;
  	cursor: pointer;
  	text-shadow: 1px 1px #fff;
}

/*ハンバーガーアイコンをCSSだけで表現*/
#nav-open span, #nav-open span:before, #nav-open span:after {
  position: absolute;
  height: 4px;/*線の太さ*/
  width:30px;/*長さ*/
  border-radius:2px;
  background: #5b3d24;
  display: block;
  content: '';
  cursor: pointer;
  box-shadow: 1px 1px #fff;
}
#nav-open span:before {
  bottom: -12px;
}
#nav-open span:after {
  bottom: -24px;
}

/*閉じる用の薄黒カバー*/
#nav-close {
    display: none;/*はじめは隠しておく*/
    position: fixed;
    z-index: 99;
    top: 0;/*全体に広がるように*/
    left: 0;
    width: 100%;
    height: 100%;
    background: black;
    opacity: 0;
    transition: .3s ease-in-out;
}

/*中身*/
#nav-content {
    overflow: auto;
    position: fixed;
    top: 0;
    right: 0;/*右に隠しておく*/
    z-index:999;/*最前面に*/
    width: 80%;/*右側に隙間を作る*/
    max-width:600px;/*最大幅*/
    height: 100%;
    transition: .3s ease-in-out;/*滑らかに表示*/
    -webkit-transform: translateX(105%);
    transform: translateX(105%);/*右に隠しておく*/
}

/*チェックが入ったらもろもろ表示*/
#nav-input:checked ~ #nav-close {
    display: block;/*カバーを表示*/
    opacity: .5;
}

#nav-input:checked ~ #nav-content {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);/*中身を表示*/
    box-shadow: 6px 0 25px rgba(0,0,0,.15);
}

#nav-content ul{
    overflow: hidden;
}
/*※※※ プルダウン ※※※*/

#nav-content ul li.gnavi__list {
	width: auto;
}
#nav-content ul li.gnavi__list ul.dropdown__wrap {
	display: none;
}






/*---- ハンバーガーメニュー黒背景は以下で調整
以下を外せば白背景----*/
	
#nav-content {
	background:rgba(0,0,0,0.7);
}
#nav-content ul li {
	text-shadow: none;
}
#nav-content ul li span {
	text-shadow: none;
}
#nav-content ul li a {
	color: #fff;
}
#nav-content ul li a span {
	color: #fff;
}
#nav-close {
	background: #fff;
}
#nav-input:checked ~ #nav-close {
	display: block;/*カバーを表示*/
	opacity: .5;
}


/*※※※ エントリー TEL ※※※*/


#nav-content ul li.nav_tel a,
#nav-content ul li.nav_entry a{
	width: 80%;
	margin:15px 10% 0;
	padding: 10px 0;
}


#nav-content ul li.nav_tel a {
	color: #222;
	background: #fff;
	border: solid #222 1px;
	margin-bottom: 5px;
}
#nav-content ul li.nav_entry a {
	color: #222;
	background: #fff;
	margin-right: 2%;
}
#nav-content ul li.nav_entry a span {
	color: #222;
	font-size: 12px;
	padding: 0 1%;
	font-family: 'Noto Serif JP', serif;
}




/*※※※ プルダウン ※※※*/



#nav-content ul li.gnavi__list {
	position: relative;
}
#nav-content ul li.gnavi__list:hover .dropdown__wrap {
	transform: scaleY(1);/*Gナビメニューにホバーしたら表示*/
}

#nav-content ul li.gnavi__list ul.dropdown__wrap {
	transform: scaleY(0);/*デフォルトでは非表示の状態にしておく*/
	transform-origin: center top;/*変形を適応する基準をtopとする*/
	transition: all .3s;/*表示の変化を0.3秒に指定*/
	position: absolute;
	top: 46px;
	left: -100%;
	width: 200px;
	padding: 5px 10px 5px 5px;
	background: rgba(255,255,255,0.8);
}
#nav-content ul li.gnavi__list ul.dropdown__wrap li.dropdown__list {
	width: 100%;
	padding: 0;
	display: block;
	transition: all .3s;
	position: relative;
	text-shadow: none;
	border-bottom: solid 1px #999;
}
#nav-content ul li.gnavi__list ul.dropdown__wrap li.dropdown__list a {
	display: flex;
	justify-content: center;
	align-items: center;
	color: #222;
	text-decoration: none;
	position: relative;
	padding: 5px 0;
}
#nav-content ul li.gnavi__list ul.dropdown__wrap li.dropdown__list:last-child {
	border-bottom: none;
}
#nav-content ul li.gnavi__list ul.dropdown__wrap li.dropdown__list a span {
	font-size: 13px;
	letter-spacing: 3px;
	font-family: 'Noto Serif JP', serif;
}
#nav-content ul li.gnavi__list ul.dropdown__wrap li.dropdown__list a:hover {
	color: #fff;
	background-color: #000;
}


/*■■ 予約ボタン 上部タイプ ■■■*/


#headtop_web_fixed {
    position: absolute;
    top:24px;
	right:180px;
    z-index:888;
}
#headtop_web_fixed p{
	text-align:center;
}
#headtop_web_fixed a{
	font-size:13px;
	letter-spacing:2px;
	color:#fff;
	text-decoration:none;
	width:150px;
	padding:5px 20px;
	background:#444;
	border:solid 1px #444;
     border-radius:20px;        /* CSS3草案 */ 
     -webkit-border-radius:20px;    /* Safari,Google Chrome用 */ 
     -moz-border-radius:20px;   /* Firefox用 */ 
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all  0.3s ease;
}
#headtop_web_fixed a:hover{
	color:#222;
	text-decoration:none;
	background:#fff;
	border:solid 1px #444;
}



#headtop_tel_fixed {
    position: absolute;
    top:24px;
	right:310px;
    z-index:888;
	width:26px;
}
#headtop_tel_fixed img{
	width:26px;
	height:auto;
}


/*============PC=============*/
@media only screen and (min-width:961px) {


/*■■■ヘッダー（PC）■■■*/



/*■ヘッダー（PC）■*/

	header #head_wrap{
		max-width:1500px;
		margin:auto;
		/*padding:5px 0;*/
	}
	header #head_bottom_cont{
		position:relative;
		width:100%;
	}
	
	#logo{
    	float:left;
		width:20%;
	}
	
	
	


/*PCでサイズ変更 アイコンのスペース*/



#nav-open {
    display: inline-block;
    width:40px;
    height:37px;
    vertical-align: middle;
    float: right;
    padding:20px 28px 0;
}

/*PCでサイズ変更 ハンバーガーアイコンをCSSだけで表現*/

#nav-title {
  	position: absolute;
	top:27px;
	right:86px;
    display: inline-block;
	font-size:14px;
  	cursor: pointer;
}




#nav-open span, #nav-open span:before, #nav-open span:after {
  position: absolute;
  height: 4px;/*線の太さ*/
  width:40px;/*長さ*/
  border-radius:2px;
  background: #222;
  display: block;
  content: '';
  cursor: pointer;
}
#nav-open span:before {
  bottom: -14px;
}
#nav-open span:after {
  bottom: -28px;
}



}

/*============ipad=============*/
@media
only screen and (min-device-width: 768px) and (max-device-width: 960px),
only screen and (min-width: 768px) and (max-width: 960px) {
	
	
	
	
	


}

/*====== ipad・タブレット・スマホ共通=======*/
@media screen and (max-width: 960px) {


    #logo{
		float:left;
		width:200px;
    }
	#logo #logo_img{
		max-width:160px;
	}

	#logo #logo_img.logo_small_js{
		/*スクロールした時のサイズ*/
		max-width:126px;
	}


#nav-title {
    display:none;/*スマホでMENUを消す それ以外は外す*/
}


/*■■ 予約ボタン 上部タイプ ■■■*/


#headtop_web_fixed {
    position: fixed;
    top:12px;
	right:70px;
}
#headtop_web_fixed a{
	font-size:11px;
	letter-spacing:1px;
	width:120px;
	padding:3px 15px;
}

#headtop_tel_fixed {
    position: fixed;
    top:16px;
	right:170px;
	width:22px;
}
#headtop_tel_fixed img{
	width:22px;
	height:auto;
}






}



/*======タブレット・スマホ共通=======*/
@media screen and (max-width: 767px) {





}



/*============スマホ=============*/
@media screen and (max-width: 480px) {


/*※※※ エントリー TEL ※※※*/


#nav-content ul li.nav_tel a,
#nav-content ul li.nav_entry a{
	width: 96%;
	margin:10px 2% 0;
	padding: 10px 0;
}


#nav-content ul li {
	font-size: 14px;
}


}