@charset "utf-8";


/*Google Fontsの読み込み
---------------------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1:wght@100..900&display=swap');

/*Font Awesomeの読み込み
---------------------------------------------------------------------------*/
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css");



/*lightbox.cssの読み込み
---------------------------------------------------------------------------*/
@import url(https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.10.0/css/lightbox.css);


/*slick.cssの読み込み
---------------------------------------------------------------------------*/
@import url("https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css");


/*テンプレート専用cssファイルの読み込み
---------------------------------------------------------------------------*/
@import url("slide.css");
@import url("inview.css");
@import url("fadein.css");


/*opa1のキーフレーム設定
---------------------------------------------------------------------------*/
@keyframes opa1 {
	0% {opacity: 0;}
	100% {opacity: 1;}
}


/*animation1のキーフレーム設定（開閉ブロックのアニメーションに使用）
---------------------------------------------------------------------------*/
@keyframes animation1 {
	0% {left: -200px;}
	100% {left: 0px;}
}


/*全体の設定
---------------------------------------------------------------------------*/
body * {box-sizing: border-box;}
html,body {
	height: 100%;
	font-size: 13px;	/*基準となるフォントサイズ。*/
}

	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {

	html, body {
		font-size: 14px;	/*基準となるフォントサイズ。*/
	}

	}/*追加指定ここまで*/


body {
	font-family: 'Noto Sans JP', sans-serif;
	/*font-family: "Noto Sans JP", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", "Osaka", "MS PGothic", "ＭＳ Ｐゴシック", sans-serif;	*/ /*フォント種類（ゴシック）*/
	/* font-family: "M PLUS Rounded 1c", "ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;	フォント種類*/
	
	font-weight: 400;
	font-optical-sizing: auto;
	letter-spacing:0rem;
	text-indent: 0.1rem;
	-webkit-text-size-adjust: none;
	margin: 0;padding: 0;
	line-height: 2;		/*行間*/
	background: #fff;		/*背景色*/
	color: #fff;			/*文字色*/
}

/*リセット*/
figure {margin: 0;}
dd {margin: 0;}
nav,ul,li {margin: 0;padding: 0;}
nav ul {list-style: none;}
h1,h2,h3,h4 {font-weight: 400;}

/*table全般の設定*/
table {
border-collapse:collapse;
color:#000;
}

table .justyfying{
letter-spacing:4px;
}

/*画像全般の設定*/
img {border: none;max-width: 100%;height: auto;vertical-align: middle;}

/*videoタグ*/
video {max-width: 100%;}


/*iframeタグ*/
iframe {width: 100%;}

/*他*/
input {font-size: 1rem;}
strong {font-weight: 500;}


/*リンクテキスト全般の設定
---------------------------------------------------------------------------*/
a {
	color: #fff;	/*文字色*/
	transition: 0.3s;	/*hoverまでにかける時間。0.3秒。*/
}

/*マウスオン時*/
a:hover {
	text-decoration: none;
}



/*サンプル幼稚園からコピーしたタグ
---------------------------------------------------------------------------*/

/*テキストのフェードイン設定
---------------------------------------------------------------------------*/
@keyframes fadeIn {
	0% {opacity: 0;transform: scale(0.8);}
	100% {opacity: 1;transform: scale(1);}
}

/*ブロック全体*/
.fade-in-text {
	visibility: hidden;	/*初期状態で非表示*/
	color:#000;
}

/*動画（_movie）タイプで使う場合（※変更不要）*/
.fade-in-text-box {
	position: absolute;
	width: 100%;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}

/*１文字単位の設定。
以下のanimationの行の「0.05s」が文字の出現のなめらかさで、大きいほどなめらかに出てきます。
１文字ずつの出現する際の時差は、js/main.jsの「テキストのフェードイン効果」の中にある「0.2」で調整できます。*/
.fade-in-char {
	display: inline-block;
	opacity: 0;
	animation: fadeIn 1s forwards;
}

/*トップページのメイン画像上で使う場合*/
#mainimg .fade-in-char {
	background: var(--primary-color);	/*背景色。css冒頭で指定しているprimary-colorを読み込みます*/
	color: var(--primary-inverse-color);	/*文字色。css冒頭で指定しているprimary-inverse-colorを読み込みます*/
	text-align: center;
	font-size: 6vw;		/*文字サイズ。100vw=画面幅100%の事です。*/
	width: 7vw;		/*幅。下の高さに揃えておきます。*/
	line-height: 12vw;	/*高さ。上の幅に揃えておきます。*/
	border-radius: 50%;	/*丸くする指定。この行を削除すれば枠が正方形になります。*/
}
#mainimg .fade-in-char:nth-of-type(even) {
	background: var(--secondary-color);	/*背景色。css冒頭で指定しているsecondary-colorを読み込みます*/
	color: var(--secondary-inverse-color);	/*文字色。css冒頭で指定しているsecondary-inverse-colorを読み込みます*/
}

	/*画面幅600px以上の追加指定*/
	@media screen and (min-width:600px) {
	
	#mainimg .fade-in-char {
		font-size: 2vw;
		width: 2.5vw;
		line-height: 6vw;
	}

	
	
	}/*追加指定ここまで*/


/*header（ロゴとメニューが入ったブロック）
---------------------------------------------------------------------------*/
.large-screen header {
	height: 60px;
	font-weight:600;
	background: #fff;		/*背景色*/
	background :rgba(255,255,255,0.9);		/*背景色*/
	width: 100%;		/*幅*/
	padding: 0 2vw;		/*ヘッダー内の余白。上下、左右への順番。*/
	text-align: center;	/*テキストをセンタリング*/
	display: flex;		/*横並びにする*/
	position: fixed;
	top: 0; left: 0;
	z-index: 100;
}

/*ロゴ*/
header #logo img {display: block;}
header #logo {
	width: 150px;		/*幅*/
	margin: 0;
	padding: 1rem;			/*ロゴ内の余白*/
	border-radius: 0px;		/*角を丸くする指定*/
}

/*ロゴ下の小文字*/
header #logo span {
	display: block;
	font-size: 0.7rem;	/*文字サイズを70%に*/
}

	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {

	header {
		position: fixed;	/*スクロールしても動かないようにする設定*/
		left: 0px;
		top: 0px;
	}

	}/*追加指定ここまで*/
	
	
.wheit_bar{
	background :rgba(255,255,255,0.9);		/*背景色*/
		height: 60px;
		width: 100%;		/*幅*/
		position: fixed;	/*スクロールしても動かないようにする設定*/
		left: 0px;
		top: 0px;
		z-index: 99;
	}

	
	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {
		
.wheit_bar{
	display: none;
	}
.pc_invisible{
	display: none;
	}
	
	}
	
	

	/*画面の高さが500px以下の追加指定*/
	@media screen and (max-height:500px) {

	header {
		position: absolute;	/*メニューが切れて見えなくならないように、fixedを中止する*/
	}

	}/*追加指定ここまで*/
	
.another_logo img{
	height: 45px;
	z-index: 101;
	position: fixed;
	top: 0; left: 0;
	margin: 13px 0 0 70px;
	}
	
	
	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {
		
.another_logo img{
	display: none;
	}
	}
	
	

/*mainブロック（右側のsectionを囲むブロック）
---------------------------------------------------------------------------*/

	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {

/*
	main {
		margin-left: 250px;	
	}
*/


	}/*追加指定ここまで*/


	main {
	widtht: 100%;	
	}

/*main内のh2*/
main h2 {
	font-size: 2.5rem;	/*文字サイズを2.5倍*/
	text-align: center;	
	line-height: 1;	
}

/*main内のh3*/
main h3 {
	font-size: 1.5rem;	/*文字サイズを1.5倍*/
}

.center_text{
	margin: 10px 0 10px 0;
	text-align: center;		
	}
	
	
.large_background{
	background :#F4F2ED;		/*背景色*/
	width: 100% !important;
	padding: 0 0  60px 0 !important;
	}

.large_background_2{
	background :#F4F2ED;		/*背景色*/
	width: 100% !important;
	padding: 0 0  20px 0 !important;
	}


.room_logo img{
	width: 164px !important;
	text-align: center;		
	}

.room_logo{
	width: 100% !important;
	text-align: center;	
	margin: 20px 0 10px 0 !important;	
	}


.room_logo_2 img{
	width: 220px !important;
	text-align: center;		
	}
	
.room_logo_2{
	width: 100% !important;
	text-align: center;	
	margin: 20px 0 10px 0 !important;	
	}


.floor_logo img{
	width: 193px !important;
	text-align: center;		
	}
	
.floor_logo{
	width: 100% !important;
	text-align: center;	
	margin: 40px 0 60px 0;	
	}
	
.floor_logo_2 img{
	width: 332px !important;
	text-align: center;		
	}
	
.floor_logo_2 {
	width: 100% !important;
	text-align: center;	
	margin: 60px 0 60px 0;	
	}

.floor_logo_3 img{
	width: 230px !important;
	text-align: center;		
	}
	
.floor_logo_3 {
	width: 100% !important;
	text-align: center;	
	margin: 10px 0 60px 0;	
	}
	
.reservationl_logo {
	width:280px !important;
	text-align: center;	
	margin: 0 auto 40px auto;	
	}

	
.upper_line{
	border-top: 1px solid #000;
	}

.sauna_botton img{
	width: 180px !important;
	text-align: center !important;
	margin: 30px 0 20px 0 !important;
	}

.sauna_botton{
	width: 100% !important;
	text-align: center;	
	margin: 10px 0 0px 0 !important;
	}


.setubi_botton img{
	width: 180px !important;
	text-align: center !important;
	margin: 30px 0 20px 0 !important;
	}

.setubi_botton{
	width: 60% !important;
	text-align: center;	
	margin: 10px 0 0px 0 !important;
	}



.square_article p{
	display: block !important;
	width: 300px !important;
	text-align: center !important;
	margin: 0px 0 30px 0 !important;
	border: solid 1px #000 !important;
	}
	

.square_article{
	width: 300px !important;
	text-align: center;	
	margin: 0px auto 0px auto !important;
	}


.sauna_botton_2 img{
	width: 180px !important;
	text-align: center !important;
	margin: 30px 30% 20px 30% !important;
	}

.sauna_botton_2{
	width: 100% !important;
	text-align: center;	
	margin: 10px 0 0px 0 !important;
	}


.restaurant_botton{
	width: 100% !important;
	text-align: center;	
	margin: 10px 0 0px 0 !important;
	}

.restaurant_botton img{
	width: 180px !important;
	text-align: center;	
	margin: 30px 0 20px 0 !important;
	}

.restaurant_botton_2{
	width: 100% !important;
	text-align: center;	
	margin: 0px 0 0px 0 !important;
	}

.restaurant_botton_2 img{
	width: 180px !important;
	text-align: center;	
	margin: 0px 0 0px 0 !important;
	}


.restaurant_botton_3{
	width: 100% !important;
	text-align: center;	
	margin: 0px 0 0px 0 !important;
	}

.restaurant_botton_3 img{
	width: 200px !important;
	text-align: center;	
	margin: 0px 0 0px 0 !important;
	}

.restaurant_botton_4 img{
	float: left !important;
	width: 200px !important;
	margin: 10px 0px 0px 0px !important;
	}
	
.restaurant_botton_4_global{
	max-width: 	621.5px !important;
	text-align: center;	
	margin: 0px auto 0px auto !important;	
	}

.restaurant_botton_4_global_2{
	max-width: 	556.5px !important;
	text-align: center;	
	margin: 0px auto 0px auto !important;	
	}
	
.restaurant_botton_4_global_2 .restaurant_botton_4 img{
	float: left !important;
	width: 178px !important;
	margin: 10px 0px 0px 0px !important;
	}
	
.restaurant_botton_4_global_3{
	max-width: 	556.5px !important;
	text-align: center;	
	margin: 0px auto 0px auto !important;	
	}
	
.restaurant_botton_4_global_3 .restaurant_botton_4 img{
	float: left !important;
	width: 178px !important;
	margin: 10px 0px 0px 0px !important;
	}
	
.three_contents{
	width: 30% !important;
	float: left;
	margin: 0 0 0 0 !important;
	}

.right10px img{
	margin: 10px 10px 0 0 !important;
	}

.restaurant_botton_4_global_2 .right10px img{
	margin: 10px 10.5px 0 0 !important;
	}

.restaurant_botton_4_global_3 .right10px img{
	margin: 10px 10.5px 0 0 !important;
	}
	
.right5per{
	margin: 0 5% 0 0 !important;
	}
	
	
.alpha a:hover img {
  opacity: 0.7;
  filter: alpha(opacity=70);
  -ms-filter: "alpha(opacity=70)";
}
	

.movie_and_photo .meat_movie {
	float:left;
	width: 39% !important;
	margin-right: 2% !important;
}

.movie_and_photo img {
	float:left;
	width: 59% !important;
}


.blog_link a{
	color: #000;
}

.large-screen .ryuui_jikou{
	width: 50% !important;
}


.large-screen .ryuui_jikou_2{
	width: 40% !important;
}

.large-screen .photo_width{
	width: 500px !important;
	margin-bottom:  -50px !important;
}

.small-screen .photo_width{
	max-width: 500px !important;
	margin-bottom:  -50px !important;
}




/*メニューブロック初期設定
---------------------------------------------------------------------------*/
/*メニューをデフォルトで非表示*/
#menubar {display: none;}
#menubar ul {list-style: none;margin: 0;padding: 0;}
#menubar a {display: block;text-decoration: none;}

/*上で非表示にしたメニューを表示させる為の設定*/
.large-screen #menubar {display: block;}
.small-screen #menubar.display-block {display: block;}

/*3本バーをデフォルトで非表示*/
#menubar_hdr.display-none {display: none;}

/*ドロップダウンをデフォルトで非表示*/
.ddmenu_parent ul {display: none;}

/*ドロップダウンの親メニューのカーソル表示を変更*/
a.ddmenu {cursor: default;}

/*ddmenuを指定しているメニューに矢印アイコンをつける設定*/
/*
a.ddmenu::before {
	font-family: "Font Awesome 6 Free";	
	content: "\f078";	
	font-weight: bold;	
	margin-right: 0.5em;
}
*/



/*大きな端末用のメニューブロック設定
---------------------------------------------------------------------------*/
/*メニューブロック全体の設定*/
.large-screen #menubar > nav > ul {
	display: flex;		/*横並びにする*/
	font-size: 0.85rem;	/*文字サイズ。85%。*/
	gap: 0rem;		/*メニュー同士の間に空けるマージン的な要素*/
	float: left;	
}


/*メニュー１個あたりの設定*/
.large-screen #menubar li a {
	border-radius: 0;	/*角を丸くする指定。適当に大きければOKです。*/
	padding: 1.1rem 1rem;	/*上下、左右へのメニュー内の余白*/
}

/*マウスオン時*/
.large-screen #menubar li a:hover {
	background: #b5b5b6;		/*背景色*/
	color: #fff !important;		/*文字色*/
}

/*予約ボタンの設定*/
.large-screen #menubar .reserve_botton {
	position: fixed;
	top:0px; right:0px; 
	display: flex;
}




.small-screen #menubar .reserve_botton {
	display: none;

}



.large-screen #menubar .reserve_botton_1 a{
	padding:18px 0;
	line-height: 1.6;	
	font-size: 16px !important;	/*文字サイズ*/
	color: #fff !important;	/*文字色*/
	display:block;
	width:150px;
	height: 60px;
	background: #000;	/*背景色*/
	opacity: 0.8;
	/*background: #B4427B;	*/	/*背景色*/
	font-weight:normal !important;	/*文字色*/
}

.large-screen #menubar .reserve_botton_2 a{
	color: #fff !important;		/*文字色*/
	display:block;
	width:140px;
	background: #675839;		/*背景色*/
}


.large-screen #menubar .reserve_botton_1 .yoyaku a{
	padding:10px 0;
	line-height: 1.4;	
}

.wheit_bar .reserve_botton_1 a{
	text-align: center !important;	
	padding:18px 0;
	line-height: 1.5;	
	font-size: 16px !important;	/*文字サイズ*/
	color: #fff !important;	/*文字色*/
	display:block !important;
	width:120px;
	background: #000;	/*背景色*/
	/*background: #B4427B;*/		/*背景色*/
	height: 61px;
	text-decoration: none;
	float: right;
}

.wheit_bar .reserve_botton_1 a:hover{
	display:block !important;
	background: #595757;	/*背景色*/
	/*background: #b26f69 !important;*/	/*背景色*/
}

.large-screen #menubar .reserve_botton_1 a:hover{
	background: #595757;	/*背景色*/
	/*background: #b26f69 !important;*/	/*背景色*/
}

.large-screen #menubar .reserve_botton_2 a:hover{
	background: #9d8d76 !important;		/*背景色*/
}

#menubar .reserve_botton .upper_item a{
	padding:5px 0 !important;
}

#menubar .reserve_botton_1 .reserve_botton_chara li a{
font-size: 15px !important;
align-items: center !important;
margin-bottom:-10px !important;
border-top: 1px solid #fff !important;
}


#menubar .reserve_botton_1 .reserve_botton_chara li{
	height: 53px;
}

#menubar .reserve_botton_1 .reserve_botton_chara{
margin-top:-6px !important;
}


.another_reserve_botton_1{
	text-align: center !important;	
	padding:14.5px 0;
	line-height: 1.5;	
	font-size: 16px !important;	/*文字サイズ*/
	color: #fff !important;	/*文字色*/
	display:block !important;
	width:140px;
	background: #B4427B;		/*背景色*/
	height: 61px;
	z-index: 101;
	position: fixed;
	top: 0; right: 0;
}

.another_reserve_botton_1 a{
	display:block !important;
	text-decoration: none;
}

.another_reserve_botton_1:hover{
	display:block !important;
	background: #b26f69 !important;		/*背景色*/
}

.another_reserve_botton_1 .widelink{
	display:block !important;
}

	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {
		
.another_reserve_botton_1{
	display: none;
}

}




/*大きな端末、小さな端末、共通のドロップダウンメニュー設定
---------------------------------------------------------------------------*/
/*ドロップダウンブロック*/
.large-screen #menubar ul ul,
.small-screen #menubar ul ul {
	animation: opa1 0.5s 0.1s both;	/*0.1秒待機後、0.5秒かけてフェードイン表示*/
}


/*大きな端末用のドロップダウンメニュー
---------------------------------------------------------------------------*/
/*ドロップダウンメニューブロック全体*/
.large-screen #menubar ul ul {
	position: absolute;z-index: 100;
}

/*メニュー１個あたり*/
.large-screen #menubar ul ul a {
	margin-top: 0.4rem;	/*上に空けるスペース。メニュー同士の隙間です。*/
}


/*メニューバーの文字*/
.large-screen #menubar ul a {
	font-family: 'M PLUS 1p Bold', sans-serif !important;
	font-weight: bold !important;
	color:#000 !important;
	font-size:11pt !important;
}


/*マウスオン次*/
#menubar nav a:hover {
	background: rgba(0,0,0,0.9);	/*背景色。透明度を変更して濃くします。*/
	border: 0px solid rgba(255,255,255,0.9);	/*枠線。透明度を変更して濃くします。*/
}



.reservation a{
	font-size: 17px;
	line-height: 1.2;
	background: #db0000;	/*背景色。透明度を変更して濃くします。*/
	text-decoration: none;display: block;
	border: 1px solid rgba(255,255,255,0.3);	/*枠線の幅、線種、色。255,255,255は白のことで0.3は色が30%出た状態。*/
	color: #fff;		/*文字色*/
	padding: 0.5rem;	/*余白*/
	margin: 0.5rem 0;	/*メニューの外側に空けるスペース。上下、左右。*/
	border-radius: 5px;	/*角を丸くする指定*/
}

/*マウスオン次*/
.reservation a:hover {
	background: #b00000;	/*背景色。透明度を変更して濃くします。*/
	border: 1px solid rgba(255,255,255,0.9);	/*枠線。透明度を変更して濃くします。*/
}



/*スマホ用ドロップダウンメニューの設定
---------------------------------------------------------------------------*/

.large-screen .gnavi__wrap {
   display: none;
}

.gnavi__wrap ul {
    color: #fff;
    list-style: none;
    margin: 0;
    padding: 0;
}



.gnavi__wrap a {
    font-size: 16px !important;
    line-height:1.5;   
    font-weight: normal;
    color: #fff;
    display: block;
    text-decoration: none;
}

.gnavi__wrap {
    color: #fff;
    width: 140px;
    z-index: 300 !important;
    position: fixed;
    top: 0 !important;
    right:0 !important;
}

.gnavi__lists {
    display: flex;
}

.gnavi__list {
    width:150px;
    height: 61px;
    background: #000;
    position: relative;
    transition: all .3s;
}
.gnavi__list:hover {
	background: #595757;	/*背景色*/
}

.gnavi__list:not(:first-child)::before {
    content: "";
    width: 1px;
    height: 100%;
    background-color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    transition: all .3s;
}

.gnavi__list:hover::before {
    background-color: #0071BB;
}

.gnavi__list a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: #fff;
    font-size: 15px;
    letter-spacing: 0.05em;
    transition: all .3s;
}
.gnavi__list:hover a {
    color: #fff;
}


.dropdown__lists a {
font-size: 15px !important;
}

.dropdown__lists {
    display: none;/*デフォルトでは非表示の状態にしておく*/
    border-top: 1px solid #fff !important;
    width: 100%;
    position: absolute;
    top: 60px;
    left: 0;
}

.gnavi__list:hover .dropdown__lists {
    display: block;/*Gナビメニューにホバーしたら表示*/
}
.dropdown__list {
    background-color: #000;
    opacity: 0.8;
    height: 60px;
    transition: all .3s;
    position: relative;
}
.dropdown__list:not(:first-child)::before{
    content: "";
    width: 100%;
    height: 1px;
    background-color: #fff;
    position: absolute;
    top: 0;
    left: 0;
}
.dropdown__list:hover {
	background: #595757;	/*背景色*/
}
.dropdown__list a {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    text-decoration: none;
    position: relative;
}

/*
.dropdown__list a::before {
    content: '';
    display: block;
    width: 6px;
    height: 6px;
    border-top: none;
    border-left: none;
    transform: rotate(135deg);
    position: absolute;
    right: 15px;
    top: calc(50% - 5px);
}
*/




/*900px以下画面でのメニュー
---------------------------------------------------------------------------*/
/*メニューブロック全体*/
.small-screen #menubar.display-block {
	position: fixed;overflow: auto;z-index: 100;
	left: 0px;top: 0px;
	width: 100%;
	height: 100%;
	padding-top: 80px;
	background: rgba(255,255,255,0.9);		/*背景色*/
	animation: animation1 0.2s both;	/*animation1を実行する。0.2sは0.2秒の事。*/
}
.small-screen #menubar ul {
	margin: 0rem;	/*メニューブロックの外側に空けるスペース*/
	padding:1.3rem 0rem;	/*上下、左右へのメニュー同士の余白*/
}

.small-screen #menubar ul a{
	font-family: 'M PLUS 1p Bold', sans-serif !important;
	font-size: 30px !important;
	color: #000;
	text-align: center;	
	font-weight: bold !important;
	line-height: 1.7	
}

.small-screen #menubar ul a:hover{
	color: #fff;
	background: #727171;		/*背景色*/
}

.small-screen #menubar .reserve_botton_1  a{
	background: #4B1A00;		/*背景色*/
	width:50%;
	float:left;
}

.small-screen #menubar .reserve_botton_2  a{
	background: #675839;		/*背景色*/
	width:50%;
	float:left;
}


.small-screen #menubar .reserve_botton_1  a:hover{
	background: #b26f69 !important;		/*背景色*/
}


.small-screen #menubar .reserve_botton_2  a:hover{
	background: #9d8d76 !important;		/*背景色*/
}

.small-screen #menubar .icons a{
	padding: 1rem 1.5rem 0rem 0rem;	/*上下、左右へのメニュー内の余白*/
	font-size: 45px !important;	
	text-align: center !important;
}

.small-screen #menubar .icons a:hover{
	background: transparent !important;	/*背景色*/
	color: #727171 !important;	/*文字の色*/
　opacity: 0.5 !important;	
}


.small-screen #menubar .icons{
	position:relative;	
	top:-40px !important;
	width: 50px;
	margin: 0 auto 0 auto;
}



.small-screen #menubar .icons a .fa-instagram{
	font-size: 50px !important;	
		margin: 0 0 0 -35px;
}
	
.small-screen #menubar .icons a .fa-line{
	font-size: 43px !important;	
	margin: -10px 0 0 0 0 !important;	
}
	


	
/*スマホ用予約ボタン　プルダウンメニュー設定
---------------------------------------------------------------------------*/

.large-screen .reserve_botton_special{
	display:block !important;	
}

.small-screen .reserve_botton_special{
	display:block !important;	
}


.large-screen .reserve_botton_special ul {
	list-style: none;
}

.large-screen .reserve_botton_special .reserve_botton_3 a{
	text-decoration: none;
		text-align: center;
	padding:18px 0;
	line-height: 1.5;	
	font-size: 16px !important;	/*文字サイズ*/
	color: #fff !important;	/*文字色*/
	display:block;
	width:120px;
	height: 61px;
	background: #000;	/*背景色*/
	/*background: #B4427B;	*/	/*背景色*/
	font-weight:normal !important;	
}

.large-screen  .reserve_botton_special .reserve_botton_3  a:hover{
	background: #b26f69 !important;		/*背景色*/
}


.small-screen .reserve_botton_special .reserve_botton_3 a{
	text-decoration: none;
		text-align: center;
	padding:18px 0;
	line-height: 1.5;	
	font-size: 16px !important;	/*文字サイズ*/
	color: #fff !important;	/*文字色*/
	display:block;
	width:120px;
	height: 61px;
	background: #000;	/*背景色*/
	/*background: #B4427B;	*/	/*背景色*/
	font-weight:normal !important;	
}

.small-screen .reserve_botton_special .reserve_botton_3  a:hover{
	background: #b26f69 !important;		/*背景色*/
}


	
/*３本バー（ハンバーガー）アイコン設定
---------------------------------------------------------------------------*/
/*３本バーを囲むブロック*/
#menubar_hdr {
	animation: opa1 0s 0.2s both;
	position: fixed;z-index: 101;
	cursor: pointer;
	left: 15px;			/*右からの配置場所指定*/
	top: 8px;				/*上からの配置場所指定*/
	padding: 16px 14px;		/*上下、左右への余白*/
	width: 46px;			/*幅（３本バーが出ている場合の幅になります）*/
	height: 46px;			/*高さ*/
	display: flex;					/*flexボックスを使う指定*/
	flex-direction: column;			/*子要素（３本バー）部分。flexはデフォルトで横並びになるので、それを縦並びに変更。*/
	justify-content: space-between;	/*並びかたの種類の指定*/
	/*background: #000;*/	/*背景色*/
	transform: scale(1.4, 1.4);
}


/*バー１本あたりの設定*/
#menubar_hdr span {
	display: block;
	transition: 0.3s;	/*アニメーションにかける時間。0.3秒。*/
	border-top: 1.5px solid #000;	/*線の幅、線種、色*/
}

/*×印が出ている状態の設定。※１本目および２本目のバーの共通設定。*/
#menubar_hdr.ham span:nth-of-type(1),
#menubar_hdr.ham span:nth-of-type(3) {
	transform-origin: center center;	/*変形の起点。センターに。*/
	width: 20px;						/*バーの幅*/
}

/*×印が出ている状態の設定。※１本目のバー。*/
#menubar_hdr.ham span:nth-of-type(1){
	transform: rotate(45deg) translate(3.8px, 5px);	/*回転45°と、X軸Y軸への移動距離の指定*/
}

/*×印が出ている状態の設定。※３本目のバー。*/
#menubar_hdr.ham span:nth-of-type(3){
	transform: rotate(-45deg) translate(3.8px, -5px);	/*回転-45°と、X軸Y軸への移動距離の指定*/
}

/*×印が出ている状態の設定。※２本目のバー。*/
#menubar_hdr.ham span:nth-of-type(2){
	display: none;	/*２本目は使わないので非表示にする*/
}


/*メニュー内にあるソーシャルメディアのアイコン
---------------------------------------------------------------------------*/
ul.icons {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	/*justify-content: center;*/
	width:auto;	
}


.large-screen #menubar .icons {
	position:relative;
	top:0px; left:30px; 
	display: flex;
}

.large-screen #menubar .icons a:hover{
	background: transparent !important;	/*背景色*/
	color: #727171 !important;	/*文字の色*/
　opacity: 0.3 !important;	
}

.large-screen #menubar .icons a{
	padding:1.3rem 0rem;	/*上下、左右へのアイコン同士の余白*/
}

ul.icons li {
	margin-right: 10px;	/*アイコン同士の余白*/
}

ul.icons i {
	font-size: 25px;	/*Font Awesomeのアイコンサイズ*/
}

/*スライド上のロゴ
---------------------------------------------------------------------------*/


.new_logo img{
	width:20%;	
	position:absolute;	
	top:200px !important;
	inset: 0px;
	margin: 0 auto 0 auto;
}






/*section
---------------------------------------------------------------------------*/
/*フェード設定*/
.section::before {
	opacity: 0; /* 初期状態では非表示 */
	transition: opacity 1s; /* 1秒かけてフェードイン/フェードアウト */
}
.section.active::before {
	opacity: 1; /* フェードイン状態 */
}
.section.inactive::before {
	opacity: 0; /* フェードアウト状態 */
}

/*section要素*/
section {
	padding: 2vw 5vw;	/*ボックス内の余白。上下、左右への順番。*/
}

/*４つのsectionブロックの共通設定*/
#section1,#section2,#section3,#section4 {
	min-height: calc(100dvh - 50px);	/*最低の高さ。100dvhは画面の高さ100%のこと。50pxは下のmarginの値。*/
	margin-bottom: 50px;	/*ボックスの下に空けるスペース*/
	padding: 5vw;			/*ボックス内の余白*/
}
	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {

	#section1,#section2,#section3,#section4 {
		border-radius: 3vw 0 0 3vw;	/*角丸の指定。左上、右上、右下、左下への順番。*/
	}

	}/*追加指定ここまで*/


/*背景画像を置く為の設定*/
#section1::before,#section2::before,#section3::before,#section4::before {
	content: '';
	position: fixed;z-index: -1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/*section1の設定*/
#section1 {
	color: #fff;	/*文字色*/
}
#section1::before {
	background: url('../images/section1.jpg') no-repeat center center / cover;	/*背景画像の読み込み*/
}

/*section2の設定*/
#section2 {
	background-color: rgba(54,53,113,0.6);	/*背景色。３つ目までの数字はrgbでの色指定。最後の小数点は透明度。*/
	color: #fff;	/*文字色*/
}
#section2::before {
	background: url('../images/section2.jpg') no-repeat center center / cover;	/*背景画像の読み込み*/
}

/*section3の設定*/
#section3 {
	background-color: rgba(100,88,79,0.6);	/*背景色。３つ目までの数字はrgbでの色指定。最後の小数点は透明度。*/
	color: #fff;	/*文字色*/
}
#section3::before {
	background: url('../images/section3.jpg') no-repeat center center / cover;	/*背景画像の読み込み*/
}

/*section4の設定*/
#section4 {
	color: #000;	/*文字色*/
}
#section4::before {
	background: #fff;	/*section4だけは背景画像ではなく、単に背景色だけ指定しました。*/
}

	/*縦向き端末から見た場合に背景画像をチェンジする*/
	@media (orientation: portrait) {

	#section1::before {
		background-image: url('../images/section1_portrait.jpg');
	}
	#section2::before {
		background-image: url('../images/section2_portrait.jpg');
	}
	#section3::before {
		background-image: url('../images/section3_portrait.jpg');
	}

	}/*追加指定ここまで*/

/*背景色を入れない場合（画像だけを表示したい場合）*/
.no-bgcolor {background-color: transparent !important;}


/*map設定
---------------------------------------------------------------------------*/
#map-fr{
	border: solid 6px #fff;
	height: 500px;
}

.telnumber a{	
    color: #000;
 }

.telnumber{	
    line-height: 10px;
   font-size:17px;
   font-weight:700;
   color: #000;
 }


/*文章の大見出し
---------------------------------------------------------------------------*/
.oomidashi{	
    display:block;
    line-height: 50px;
    font-size:36px; 
    font-weight: 500;  
    color: #000;
    border-bottom: 1px solid;
    box-sizing: border-box;
    padding: 0 0 20px 0;
 }


.small-screen .oomidashi{	
    display:block;
    line-height: 35px;
    font-size:27px;  
    color: #000;
    border-bottom: 1px solid;
    box-sizing: border-box;
    padding: 0 0 20px 0;
 }


.oomidashi_special {	
    display:block;
    line-height: 36px;
    font-size:24px;
    font-weight: bold;     
    color: #000;
    margin-top:20px;
 }


.oomidashi_2{	
    display:block;
    line-height: 36px;
    font-size:24px;
    font-weight: 500;     
    color: #000;
    margin-top:20px;
 }

.oomidashi_3{	
    display:block;
    line-height: 36px;
    font-size:24px;
    font-weight: 500;    
    color: #000;
    margin-top:20px;
 }

.oomidashi_4{	
    display:block;
    line-height: 28px;
    font-size:20px;
    font-weight: 500;    
    color: #000;
    margin-top:0px;
 }
 

.oomidashi_5{	
    display:block;
    line-height: 27px;
    font-size:21px; 
    font-weight: 500;  
    color: #000;
    border-bottom: 1px solid;
    box-sizing: border-box;
    padding: 0 0 20px 0;
 }



 .oomidashi_6{	
    display:block;
    line-height: 33px;
    font-size:18px;   
    color: #000;
    margin-top:0px;
    text-align:center;
    width:100%;
 }

/*レストランページのラインの設定
---------------------------------------------------------------------------*/
.menu_partation{	
   max-width:1000px;
   border:solid 0.3px #000;
 }
 
 
 
 /*レストランページのキャプションの設定
---------------------------------------------------------------------------*/
 .caption_margin{
 	display:block;	
    margin-top:-10px;
 }

 
 
 
/*フッター設定
---------------------------------------------------------------------------*/
footer small {font-size: 100%;}
footer {
	font-size: 13px;
	text-align: center;		/*内容をセンタリング*/
	padding-bottom: 1rem;
	background: #000;
	hight:100px;
}

.footer_inner{
	width: 1250px;
	margin:0 auto 0 auto;
	padding: 30px 30px 30px 300px;
}


	/*画面幅1300px以下の追加指定*/
	@media screen and (max-width:1300px) {
		
	.footer_inner {
		width: 100%;
		padding: 30px 30px 30px 150px;
	}

	}



	/*画面幅1000px以下の追加指定*/
	@media screen and (max-width:1000px) {
		
	.footer_inner {
		padding: 30px 30px 30px 100px;
	}

	}


	/*画面幅900px以下の追加指定*/
	@media screen and (max-width:900px) {

 .footer_inner{
	width: 100%;
	margin:0 auto 0 auto;
	padding: 30px 30px 30px 30px;
}


.restaurant_botton_4_global{
	max-width: 	200px !important;
	text-align: center;	
	margin: 0px auto 0px auto !important;	
	}


.right10px img{
	margin: 10px 0px 0 0 !important;
	}

.restaurant_botton_4_global_2{
	max-width: 	178px !important;
	text-align: center;	
	margin: 0px auto 0px auto !important;	
	}



.restaurant_botton_4_global_2 .right10px img{
	margin: 10px 0 0 0 !important;
	}



}
	
	
/*リンクテキスト*/
footer a {color: inherit;text-decoration: none;}



/*宴会メニューの画像設定
---------------------------------------------------------------------------*/
.party_plan{
	width: 80%;
	margin:0 auto 0 auto;
}

@media screen and (max-width:900px) {
.party_plan{
	width: 100%;
}
}

/*メニューボタンの画像設定
---------------------------------------------------------------------------*/
.special_margin{
	margin:-10px 0 -20px 0 !important;
}

.special_margin2{
	margin:-50px 0 0px 0 !important;
}

.special_margin3{
	margin:-70px 0 0px 0 !important;
}

.special_margin4{
	margin:-30px 0 -30px 0 !important;
}

.small-screen .special_margin4{
	margin:-20px 0 -30px 0 !important;
}

.small-screen .special_margin4 p{
	margin:-20px !important;
}

.special_margin5{
	margin:-30px 0 0px 0 !important;
}


.special_width img{
	width:280px !important;
}




/*ロゴ設定
---------------------------------------------------------------------------*/
.store_logo {
	width: 30%;
	margin:0 auto 0 auto;
}

.store_logo img{
	margin:10px auto 10px auto;
	float: left;
	width: 45%;
}


.logo_2{
	display:none;	
}

.logo_3{
	display:none;	
}

.logo_4{
	display:block;	
	margin:30px auto 30px auto;
	width: 40%;
}


.store_logo_1 {
	border-right: 0.5px solid #fff;
	text-align: left !important;		
	width: 20%;
	float: left;
	padding:0 0px 0 0;
}


.small-screen .store_logo_1 {
	border-right: none;
	text-align:center !important;		
	width: 100%;
	padding:0 0px 0 0;
	margin:0 0 20px 0;
}


.store_logo_2 {
	border-right: 0.5px solid #fff;
	text-align: left !important;		
	width: 35%;
	height: 60px;
	float: left;
	padding: 0px 0px 0px 30px;
}


.small-screen .store_logo_2 {
	border-right:none;
	text-align:center !important;		
	width: 100%;
	float: left;
	padding: 0px 0px 0px 0px;
	margin:0 0 20px 0;
}



.store_logo_3 {
	text-align: left !important;		
	width: 20%;
	float: left;
	padding: 10px 0px 0px 30px;
}


.small-screen .store_logo_3 {
	text-align:center !important;			
	width: 100%;
	float: left;
	padding: 0px 0px 0px 0px;
}



.store_logo_width img{
	width: 165px;
}

.store_logo_width2  img{
	width: 30px;
	margin:0 20px 0 0;
}

.footer_kiyaku{
	display: block !important;		
	width: 150px;
	text-align: left !important;		
	position:relative;
	left: 80%;
}


.small-screen .footer_kiyaku{
	display: block !important;		
	width: 150px;
	text-align: left !important;		
	position:relative;
	left: 50%;
}


.float_rght {
	float:right;
}

	/*画面幅1300px以下の追加指定*/
	@media screen and (max-width:1300px) {
		
.footer_kiyaku{
	display: block !important;		
	width: 150px;
	text-align: left !important;		
	position:relative;
	left: 70%;
}


.restaurant_botton_4_global_3{
	max-width: 	178px !important;
	text-align: center;	
	margin: 0px auto 0px auto !important;	
	}



.restaurant_botton_4_global_3 .right10px img{
	margin: 10px 0 0 0 !important;
	}




}



	/*画面幅1000px以下の追加指定*/
	@media screen and (max-width:1000px) {
		
.footer_kiyaku{
	display: block !important;		
	width: 150px;
	text-align: left !important;		
	position:relative;
	left: 60%;
}

	}



	/*画面幅500px以下の追加指定*/
	@media screen and (max-width:500px) {
		
.footer_kiyaku{
	display: block !important;		
	width: 150px;
	position:relative;
	left: 30% !important;	
}

}

/*フッターロゴ設定  画面幅600px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:600px){
.store_logo {
	width: 70%;
	margin:0 auto 0 auto;
}

.store_logo img{
	margin:10px auto 10px auto;
	float: left;
	width: 45%;
}

.paragraph_three_contents_2{
	width:85%;
	margin:0 auto 0 auto;
}

.paragraph_three_contents_2 .three_contents img{
	margin-bottom:-20px !important;
}

	
.paragraph_three_contents_2 .reservationl_logo img{
	width:100% !important;
	text-align: center;	
	margin:0 auto 10px auto !important;
	}

.sauna_botton_2 img{
	width: 180px !important;
	text-align: center !important;
	margin: 30px auto 20px 23% !important;
	}

	
}


/*ロゴ設定  画面幅400px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:400px){

.paragraph_three_contents_2 .reservationl_logo{
	width:100% !important;
	}

.paragraph_three_contents_2 .reservationl_logo img{
	width:200px !important;
	text-align: center;	
	margin:0 auto 0 auto !important;
	}
	
.sauna_botton_2 img{
	width: 180px !important;
	text-align: center !important;
	margin: 30px auto 20px 18% !important;
	}
	
}



/*ロゴ設定  画面幅900px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/

@media screen and (max-width:900px){
header #logo {
	display:none !important;
}

.logo_2{
	display:block;	
	margin:0px auto 0px auto !important;
	width: 55%;
}

.logo_3{
	display:block;	
	margin:50px auto 0px auto !important;
	width: 55%;
}

.logo_4{
	display:block;	
	margin:30px auto 30px auto;
	width: 55%;
}

.new_logo img{
	width: 50% !important;
	position:absolute;	
	top:150px !important;
	inset: 0px;
}

.reservationl_logo {
	width:280px !important;
	text-align: center;	
	margin: 0 auto 20px auto;	
	}


}


/*ロゴ設定  画面幅1300px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/

@media screen and (max-width:1300px){
header #logo {
	display: block;
}

.new_logo img{
	width: 25%;
}

}

/*写真したのキャプションの設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
.photo_caption p{
	clear:both;
}

.photo_caption{
	float:left;	
		width: 45%;
}


/*記事と写真の配置の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
 .paragraph p{
	margin:0px 5% 0px 0px;
	width: 45%;
	float: left;
}

.paragraph img{
	margin:0px 0px 0px 0px;
	width: 50%;
	float: left;
}

.paragraph{
	color:#000;	
	max-width: 1400px;
	margin:0px auto 0px auto;
	padding:20px 30px 20px 30px;
}


.paragraph_sauna p{
	margin:0px 5% 0px 0px;
	width: 60%;
	float: left;
}

.paragraph_sauna img{
	margin:0px 0px 0px 0px;
	width: 60%;
	float: left;
}

.paragraph_sauna{
	color:#000;	
	max-width: 1400px;
	margin:0px auto 0px auto;
	padding:20px 30px 20px 30px;
}





.paragraph_three_image{
	color:#000;	
	max-width: 1400px;
	margin:0px auto 0px auto;
	padding:20px 30px 20px 30px;
	z-index:100 !important;	
}


.paragraph_four_image{
	clear:both;
	color:#000;	
	width: 100%;
	margin:20px auto 0px auto;
	padding:10px 20px 0px 30px;
}



.img_block{
width: 33%;
float: left;
}

.img_block img{
width: 100%;
float: left;
}

.img_block p{
text-align: center;
}


.img_block_2{
width: 24%;
float: left;
margin:0px 1% 0px 0px;
}

.img_block_2 img{
width: 100%;
float: left;
}

.img_block_2 p{
line-height: 0.5;
display: block;
width: 100%;
text-align: center;
margin:0px 0px 0px 0px;
}

.right_margin_none{
margin:0px 0px 0px 0px !important;
}

.special_margin_top{
margin:10px 0px 0px 0px !important;
}

 .paragraph_2 p{
 	color:#000;	
	margin:0px 0px 0px 0px;
	float: left;
}

.paragraph_2 img{
	margin:0px 0px 10px 0px;
	width: 100%;
}

 .paragraph_2 {
 	max-width: 1400px;
	margin:50px 0px 0px 0px;
	margin:0px auto 0px auto;
	padding:20px 30px 20px 30px;
}



.paragraph_5 p{
 	color:#000;	
	margin:0px 0px 0px 45px;
	width: 100%;
}

.paragraph_5 img{
	margin:0px 0px 0px 0px;
	width: 70%;
}

.paragraph_5 {
 	max-width: 1400px;
	margin:0px auto 30px auto;
	padding:20px 30px 20px 30px;
}

.wheit_back{
	width: 100%;
	background-color:#fff;
}


.paragraph_6 p{
 	color:#000;	
	margin:0px 0px 0px 0px;
	width: 100%;
}

.paragraph_6 img{
	margin:0px 0px 0px 0px;
	width: 100%;
}

.paragraph_6 {
 	max-width: 1400px;
	margin:0px auto 0px auto;
	padding:20px 30px 20px 30px;
}



.float_right_photo img{
	float: right;
}

.float_left_photo img{
	float: left;
	margin:0px 0px 0px 50px;
}



.margin_left {
	margin:0px 0px 0px 10% !important;
}



.paragraph_three_contents{
 	max-width: 1400px;
	margin:50px 0px 0px 0px;
	margin:0px auto 0px auto;
	padding:0px 30px 60px 30px;
}

.paragraph_three_contents p{
 	color:#000;	
	margin:0px 0px 0px 0px;
}

.paragraph_three_contents img{
	margin:10px 0px 10px 0px;
}

.paragraph_three_contents_2{
 	max-width: 1400px;
	margin:50px 0px 0px 0px;
	margin:0px auto 0px auto;
	padding:0px 30px 60px 30px;
}


.paragraph_three_contents_2 p{
 	color:#000;	
	margin:0px 0px 0px 0px;
}

.paragraph_three_contents_2 img{
	margin:10px 0px 10px 0px;
}


.osihirase_title{
 	border: 1px solid #000;	
	padding:5px 5px 5px 5px;
}

.osihirase_title_1{
 	color:  #B4427B;	
 	border: 1px solid #B4427B;	
	padding:5px 5px 5px 5px;
}

.osihirase_title_2{
 	color:  #D38924;	
 	border: 1px solid #D38924;	
	padding:5px 5px 5px 5px;
}

.osihirase_title_3{
 	color:  #675839;	
 	border: 1px solid #675839;	
	padding:5px 5px 5px 5px;
}


.osihirase_date {
    display:block !important;
    float:right !important;
}

.osihirase_subtitle{
   font-size: 15px;
  font-weight: 500;
}

.osihirase_subtitle_2{
  text-align:center !important;
  line-height: 1.3;
  font-size: 20px;
  font-weight: 500;
  display:block;
  	margin:0px auto -10px auto;
}


 .paragraph_3{
	display:none;
}

 .paragraph_4{ 
	margin:50px 0px 0px 0px;
}

 .paragraph_4 .photo_caption{ 
	margin:0px 5% 0px 0px;
}

 .paragraph_4 .photo_caption p{ 
	margin:0px 0px 0px 0px;
}


.double_photo_area { 
	float:left;
	width: 50%;
}

.double_photo_area_2 { 
	float:left;
	width: 45%;
	margin:0px 5% 0px 0px;
}

.double_photo_area_special { 
	margin:0px auto 0px auto;
	width: 80%;
	padding:0px 0px 0px 0px;
}


.double_photo_area_3{ 
	float:left;
	width: 50%;
	padding:0px 30px 0px 30px;
}

.double_photo_area_4{ 
	float:left;
	width: 55%;
	padding:0px 0px 0px 0px;
	margin:0px 5% 0px 0px;
}

.double_photo_area_5{ 
	float:left;
	width: 40%;
	padding:0px 0px 0px 0px;
}

.double_photo_area_5 img{ 
	margin:0px 0px 10px 0px;
}

.left_line{ 
	border-left:dashed 1px #000;
}


.pc_photo{ 
	display:block;
}

.smapho_photo{ 
	display:none;
}

.access_article img{
	width: 20px !important;
	margin:0px 3px 0px 0;
}

.access_article_2 img{
	width: 15px !important;
	margin:0px 10px 0px 0;
}

.access_article_2{
line-height: 2 !important;
}

.access_article_3{
line-height: 2 !important;
}

.access_article a{
	color: #000;
}



.access_article2 img{
	width: 15px !important;
	margin:0px 10px 0px 0;
}

.text-indent {
  padding-left: 1em !important;
  text-indent: -2em !important;
  padding: 0 0 0 40px !important;
  width: 100%;
}


.text-indent_2 {
  padding: 0 0 0 30px !important;
}

.text-indent_3{
  padding: 20px 0 0 0 !important;
}

.text-indent_4{
  padding-left: 1em !important;
  text-indent: -2em !important;
  padding: 0 0 0 40px !important;
  width: 100%;
}

.text-indent_5{
  padding-left: 1em !important;
  text-indent: -1em !important;
  padding: 0 0 0 20px !important;
  width: 100%;
}

.line_margin{ 
	margin:20px 0 20px 0;
}

.line_margin_2{ 
	margin:10px 0 10px 0;
}

.line_dot_margin{ 
	background-color: #fff;
	border-top: 1px dashed #8c8b8b;
	margin:20px 0 20px 0;
}

#map  a{ 
	color: #000 !important;
	text-decoration: none !important;
	float: right !important;
}

.otoiawase_area{
	background :#F4F2ED;		/*背景色*/
	width: 50% !important;
	padding:  30px 30px  30px 30px !important;
	margin: 0 auto 0 auto;
	text-align:center;
	}

.otoiawase_area .line_otoiawase a{
	font-size: 35px !important;
	color:#000;
	}



.small-screen .otoiawase_area{
	width: 100% !important;
	}
	
	
.telenumber img{
	width:40px !important;
	margin: 0 10px 0 0;
	padding:  0px 0px  5px 0px !important;
	}
	
.float_none {
	float: none !important;
	}

.otoiawase_subtitle{
	font-size: 16px;
	font-weight: 500;
	}
	
.kyuujin_subtitle{
	font-size: 15px;
	font-weight: 500;
	}

.align_left{
	text-align: left !important;
	}

	
	
.telenumber a{
	color: #000;
	}
	
.telenumber{
	color: #000;
	font-size: 36px;
	font-weight: bold;
	}

.small-screen .telenumber a{
	color: #000;
	font-size: 22px !important;
	font-weight: bold;
	line-height: 1 !important;
	}

.small-screen .telenumber{
	line-height: 1 !important;
	}
	
.small-screen .otoiawase_subtitle{
	font-size: 14px;
	font-weight: 500;
	}	
	
.email img{
	width:20px !important;
	padding:  2px 0px  0px 0px !important;
	margin: 0 10px 0 0;
	}

.email a{
	color: #000;
	}

.gray_back{
	background :#F4F2ED; /*背景色*/
	width:35%;
	height:140%;
	z-index:-100;
	position: absolute;
	top: 0px;
	right: 0px;
	}

	
.three_image_and_gray_back{
	width:100%;	
	position: relative;
	z-index:-100 !important;
	float: right;
	}

.three_image_and_gray_back_inner{
	width:35%;	
	height:600px;
	background :#F4F2ED 35%; /*背景色*/
	margin:  -661px 0px 0px 0px !important;
	float: right;
	z-index:-100 !important;
	}



	
.hr_width{
	margin: 10px 0 10px 45px;
	}

.hr_width_2{
	margin: 10px 0 10px 0;
	}
	
.back_wheit{
	background-color: #fff;
	width: 100%;
	padding:10px 10px 10px 10px;
	}
	
.back_wheit_2{
	background-color: #fff;
	width: 100%;
	padding:0px 0px 0px 0px;
	margin:0px 0px 20px 0px;
	}
	
.back_wheit_2 img{
	float: left;
	width: 50%;
	margin:0px 0px 0px 0px;
	}	
	
.back_wheit_2_inner{
	padding:30px 30px 30px 30px;
	float: left;
	width: 50%;
	}
	
	
.image_height img{
	width: 200px !important;
	}

.image_height_2 img{
	width: 340px !important;
	}

.image_height_3 img{
	width: 220px !important;
	}

	
.amenuti_1{
	display:block;
	clear:both;
	color:#000;	
	width: 100%;
	margin:0px 0px 0px 0px;
	padding:0px 0px 0px 30px;
}

.amenuti_1 img{
	padding:5px 0px 0px 0px;
	width: 15px;
}

.amenuti_2{
	display:none;
}

.big{
	font-size:14pt;
}

.big_2{
	font-size:15pt;
}

.big_3{
	font-size:18pt;
	line-height:1.2;
}

.main_banner img{
	width: 99.9%;
}


.main_banner_smapho img{
	width: 99.8%;
}

.bold_chara{
	font-weight: 600;
}

.img_up img{
	margin:14px 5px 0px 0px;
}

.img_up_2 img{
	margin:10px 5px 0px 0px;
	width: 16px !important;
}

.img_up_3 img{
	margin:10px 5px 0px 0px;
	width: 20px !important;
}

.img_up_4 img{
	text-indent:none !important;
	margin:0px 10px 5px 0px;
	width: 20px !important;
}

.img_up_5 img{
	margin:-5px 5px 0px 0px;
	width: 20px !important;
}

.img_up_5{
	margin:0px 0px 5px 0px  !important;
}

.cercle_black{
	float:left;
	text-align:center;
	display:block;
	color:#fff;
	margin:10px 10px 10px 0px;
	padding:1px 2px 1px 2px;
	width: 110px !important;
	background-color: #000;
}

.block_clear{
	margin:10px 10px 10px 0px;
	float:left;
	display:block;
}

.bold_font_weight{
	font-weight:600;
}

.back_gray_area {
	padding:20px 20px 20px 20px;
	background-color:#000;
	background :#F4F2ED;
}

.kyakusitu_cousei{
	padding:0px 0px 0px 10px;
}
	
.padding-left-box{
	padding:0px 0px 0px 1em;
}

.padding-left-box_2{
	display:block;
	padding:0px 0px 0px 1em;
}


.text-indent-special{
	display:block;
	text-indent: -1em;
	padding-left: 1em;
}

.margin_bottom{
	display:block;
	padding:0px 0px 10px 0px;
}



/*記事と写真の配置の設定　  画面幅700px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:700px){

 .paragraph p{
	margin:0px 0px 10px 0px;
	width: 100%;
	float: left;
}

.paragraph img{
	margin:0px 0px 0px 0px;
	width: 100%;
	float: left;
}


.paragraph_sauna p{
	margin:0px 5% 0px 0px;
	width: 100%;
	float: left;
}

.paragraph_sauna img{
	margin:0px 0px 0px 0px;
	width: 100%;
	float: left;
}


/*
 .paragraph_2{
	display:none;
}
*/


 .paragraph_2 p{
 	color:#000;	
	margin:0px 0px 0px  0px;
	float: left;
}

 .paragraph_3{
	display:block;
	margin:40px 0px 0px 0px;
}
 .paragraph_3 p{
	margin:0px 0px 10px 0px;
	width: 100%;
	float: left;
}

.paragraph_3 img{
	margin:0px 0px 0px 0px;
	width: 100%;
	float: left;
}


 .paragraph_4{
	display:none;
}


.double_photo_area { 
	width: 100%;
}


.double_photo_area_2 { 
	float:left;
	width: 100%;
	margin:0px 0px 0px 0px;
}

.pc_photo{ 
	display:none;
}

.smapho_photo{ 
	display:block;
}


.three_contents{
	width: 100% !important;
	padding: 0 0 50px 0 !important;
	}

.right5per{
	margin: 0 0 0 0 !important;
	}

.margin_left {
	margin:0px 0px 0px 0px !important;
}

.movie_and_photo .meat_movie {
	float:left;
	width: 100% !important;
	margin-right: 0% !important;
}

.img_block{
width: 100%;
}

.img_block img{
width: 100%;
}

.img_block p{
text-align: center;
}


.setubi_botton{
	width: 100% !important;
	text-align: center;	
	margin: 10px 0 0px 0 !important;
}
	
	
.paragraph_5 p{
 	color:#000;	
	margin:0px 10% 0px 10%;
	width: 90% !important;
}

.paragraph_5 img{
	margin:0px 0px 0px 10%;
	width: 90%;
	float: left  !important;
}

.paragraph_5 {
	padding:0px 10% 0px 0px;
}

.hr_width{
	margin:10px 0px 10px 10%;
}

.hr_width_2{
	margin:10px 0px 10px 0px;
}


.float_left_photo img{
	float: left;
	margin:10px 0px 10px 10%;
}


.double_photo_area_3{ 
	float:left;
	width: 100%;
	padding:0px 0px 0px 0px;
}

.left_line{ 
	border-left:none;
	border-top:dashed 1px #000;
	padding:20px 0px 0px 0px;
	margin:40px 0px 0px 0px;
}


.img_block_2{
width: 100%;
margin:0px 0px 0px 0px;
}

.img_block_2 img{
width: 100%;
float: left;
}

.img_block_2 p{
line-height: 1;
display: block;
width: 100%;
text-align: center;
margin:0px 0px 30px 0px;
}

.paragraph_four_image{
	clear:both;
	color:#000;	
	width: 100%;
	margin:20px auto 0px auto;
	padding:20px 0px 0px 0px;
}

.amenuti_1{
	display:none;
}

.amenuti_2{
	display:block;
	clear:both;
	color:#000;	
	width: 100%;
	margin:0px 0px 0px 0px;
	padding:0px 0px 0px 10px;
}

.amenuti_2 img{
	padding:5px 0px 0px 0px;
	width: 15px;
}


.back_wheit_2{
	background-color: #fff;
	width: 100%;
	padding:0px 0px 0px 0px;
	}
	
.back_wheit_2 img{
	float: left;
	width: 100%;
	margin:0px 0px 0px 0px;
	}	
	
.back_wheit_2_inner{
	padding:30px 30px 30px 30px;
	float: left;
	width: 100%;
	}


.img_up img{
	margin:15px 5px 0px 0px;
}

.img_up_2 img{
	margin:10px 5px 0px 0px;
	width: 16px !important;
}

.img_up_3 img{
	margin:10px 5px 0px 0px;
	width: 20px !important;
}

.double_photo_area_special { 
	margin:0px auto 0px auto;
	width: 100%;
	padding:0px 0px 0px 0px;
}

.double_photo_area_4{ 
	float:left;
	width: 100%;
	padding:0px 0px 0px 0px;
	margin:10px 0px 0px 0px;
}


.double_photo_area_5{ 
	float:left;
	width: 100%;
	padding:0px 0px 0px 0px;
}




}


/*予約ボタン　固定配置
---------------------------------------------------------------------------*/
.reservation_botton{
	display:none;
}


/*予約ボタン　固定配置  画面幅900px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:900px){

.reservation_botton{
	display:block;
	line-height: 1;
}

.reservation_botton a{
	border: 1px solid rgba(255,255,255,0.3);	/*枠線の幅、線種、色。255,255,255は白のことで0.3は色が30%出た状態。*/
	text-decoration: none;
	text-align: center;
	font-size: 20px;
	color: #fff;		/*文字色*/
	padding: 10px 10px 10px 10px ;	/*余白*/
	margin: 0 0 0 30px;	/*メニューの外側に空けるスペース。上下、左右。*/
	border-radius: 5px;	/*角を丸くする指定*/
	width: auto;
	display:block;
	background: #db0000;	/*背景色。透明度を変更して濃くします。*/
    position: fixed; /* .containerを基準に絶対位置を決める */
    top: 10px; /* 親要素の外側（上辺）より50px内側 */
    left: -10px; /* 親要素の外側（左辺）より50px内側 */
}

/*マウスオン次*/
.reservation_botton a:hover {
	background: #b00000;	/*背景色。透明度を変更して濃くします。*/
	border: 1px solid rgba(255,255,255,0.9);	/*枠線。透明度を変更して濃くします。*/
}


}


/*メニューの日本語表記
---------------------------------------------------------------------------*/
.small_chara {
	font-size: 12px;
		font-weight: normal;
}


.small_chara_2{	
    line-height: 10px;
   font-size:17px;
    font-weight:700;
    color: #000;
 }


/*お知らせブロック
---------------------------------------------------------------------------*/
/*記事の下に空ける余白*/
.new dd {
	padding-bottom: 1rem;
}

/*ブロック内のspan。日付の横のアイコン的な部分の共通設定*/
.new dt span {
	display: inline-block;
	text-align: center;
	line-height: 1.8;		/*行間（アイコンの高さ）*/
	border-radius: 3px;		/*角を丸くする指定*/
	padding: 0 0.5rem;		/*上下、左右へのブロック内の余白*/
	width: 6rem;			/*幅。６文字分。*/
	transform: scale(0.8);	/*80%のサイズに縮小*/
	background: rgba(255,255,255,0.8);		/*背景色*/
	color: #333;			/*文字色*/
}

	/*画面幅700px以上の追加指定*/
	@media screen and (min-width:700px) {

	/*ブロック全体*/
	.new {
		display: grid;	/*gridを使う指定*/
		grid-template-columns: auto 1fr;	/*横並びの指定。日付とアイコン部分の幅は自動で、内容が入るブロックは残り幅一杯とる。*/
	}

	}/*追加指定ここまで*/


/*list-grid（gallery.htmlでサムネイルを表示している部分の設定です）
---------------------------------------------------------------------------*/
/*listブロックを囲む外側のボックス*/
.list-grid-trimming {
	display: grid;
	grid-template-columns: repeat(4, 1fr);	/*ここの「4」の数字が横に並べる数です。3列がいいなら(3, 1fr)です。*/
	gap: 1rem;	/*マージン的な数値。サムネイル間を１文字分あけます。*/
}

/*ボックスを正方形にトリミングする為の指定なので変更しない。*/
.list-grid-trimming .list {
	position: relative;
	overflow: hidden;
	height: 0;
	padding-top: 100%;
}
.list-grid-trimming .list a {
	display: block;
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
}
.list-grid-trimming .list img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: 0.5s;	/*マウスオン時にかける時間。0.5秒。*/
}

/*マウスオン時の画像*/
.list-grid-trimming .list img:hover {
	transform: scale(1.1);	/*1.1倍に拡大*/
	filter: contrast(1.3);	/*コントラストを1.3倍*/
}


/*PAGE TOP（↑）設定
---------------------------------------------------------------------------*/
.pagetop-show {display: block;}

/*ボタンの設定*/
.pagetop a {
	display: block;text-decoration: none;text-align: center;z-index: 99;
	animation: opa1 0.2s 0.2s both;	/*一瞬ボタンが出ちゃうのを隠す為の応急措置*/
	position: fixed;	/*スクロールに追従しない(固定で表示)為の設定*/
	right: 20px;		/*右からの配置場所指定*/
	bottom: 20px;		/*下からの配置場所指定*/
	color: #fff;		/*文字色*/
	font-size: 1.5rem;	/*文字サイズ*/
	background: rgba(0,0,0,0.2);	/*背景色。0,0,0は黒の事で0.2は色が20%出た状態。*/
	width: 60px;		/*幅*/
	line-height: 60px;	/*高さ*/
	border-radius: 50%;	/*円形にする*/
}

/*その他
---------------------------------------------------------------------------*/
.clearfix::after {content: "";display: block;clear: both;}
.l {text-align: left !important;}
.c {text-align: center !important;}
.r {text-align: right !important;}
.ws {width: 95%;display: block;}
.wl {width: 95%;display: block;}
.mb0 {margin-bottom: 0px !important;}
.mb30 {margin-bottom: 30px !important;}
.look {display: inline-block;padding: 0px 10px;background: #000;border: 1px solid #fff;border-radius: 3px;margin: 5px 0; word-break: break-all;}
.small {font-size: 0.75em;}
.large {font-size: 2em; letter-spacing: 0.1em;}
.color-check, .color-check a {color: #ffcf0d;}
.pc {display: none;}
.dn {display: none !important;}
.block {display: block !important;}

	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {

		.ws {width: 48%;display: inline;}
		.sh {display: none;}
		.pc {display: block;}

	}/*画面幅900px以上の追加指定ここまで*/