@charset "utf-8";
/* 全ページ共通 */
*{
	box-sizing: border-box;
}

/* CSSのリセット */
html, body,
ul, ol, li, dl, dt, dd,
h1, h2, h3, h4, h5, h6, p, div{
	margin: 0;
	padding: 0;
}

li{
	list-style: none;
}

a{
	color: inherit;
	text-decoration: none;
}

img{
	vertical-align: bottom;
}

button{
	font: inherit;
	color: inherit;
}

/* リンクのスクロール */
html{
	scroll-behavior: smooth; /* スムーススクロール */
}

/* フォントと背景（デザインはリュウミン。Web では形の近い Shippori Mincho で代わりにした） */
body{
	font-family: 'Shippori Mincho', 'Yu Mincho', YuMincho, 'Hiragino Mincho ProN', serif;
	font-weight: 500;
	line-height: 1.9;
	letter-spacing: 0.075em;
	color: #000000;
	background-color: #e4d6c5; /* 背景色（下層） */
	overflow-x: hidden;
	text-wrap: pretty; /* 段落の最後の行が1〜2文字だけにならないようにする */
}

body.page_top{
	background-color: #ded3c0;
}

/* メニューを開いているあいだは、後ろのページを動かさない */
body.menu_open{
	overflow: hidden;
}

/* 見出しは文節の切れ目で折り返す（長いタイトルが言葉の途中で切れないように） */
h1, h2, h3, h4{
	word-break: auto-phrase;
}

/* 画面には出さず、読み上げと検索だけに使う文字 */
.visually_hidden{
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* PC・SPの表示・非表示*/
.sp{
	display: none;
}

.pc{
	display: block;
}





/* コンテンツ幅 */
.contents01{
	max-width: 1240px;
	width: 100%;
	margin: 0 auto;
	padding: 0px 20px;
}





/* ヘッダー（下層は紺の帯。トップは写真の上に重ねる） */
header{
	position: relative;
	z-index: 20;
	color: #ffffff;
	background-color: #1a2129;
}

.page_top header{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	background-color: transparent;
}

.header_inner{
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 30px;
	height: 152px;
	padding: 0 180px 0 86px;
}

.page_top .header_inner{
	height: 130px;
	padding: 0 130px 0 50px;
}

.header_text{
	font-family: 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', sans-serif;
	font-size: 15px;
	line-height: 1.5;
}

.logo_header a{
	display: inline-block;
	margin-top: 12px;
}

.logo_header a:hover{
	opacity: 0.7;
}

/* ロゴは店ごとに形が変わるので、高さの上限で大きさをそろえる */
.logo_header img{
	display: block;
	width: auto;
	height: auto;
	max-width: 440px;
	max-height: 40px;
}

.header_buttons{
	display: flex;
	align-items: center;
	gap: 28px;
	flex-shrink: 0;
}

/* 予約のボタン（白い枠。右に線） */
.btn_reserve{
	position: relative;
	display: flex;
	align-items: center;
	min-width: 233px;
	height: 53px;
	padding: 0 64px 0 40px;
	font-size: 16px;
	font-weight: 600;
	color: #ffffff;
	border: 1px solid #ffffff;
}

.btn_reserve::after{
	content: "";
	position: absolute;
	top: 50%;
	right: 0;
	width: 42px;
	height: 1px;
	background-color: currentColor;
}

.btn_reserve:hover{
	opacity: 0.7;
}

/* Instagram・Facebook（丸い枠） */
.sns{
	display: flex;
	gap: 12px;
}

.sns_icon{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 51px;
	height: 51px;
	color: #ffffff;
	border: 1px solid #ffffff;
	border-radius: 50%;
}

.sns_icon svg{
	width: 24px;
	height: 24px;
	fill: currentColor;
}

.sns_icon:hover{
	opacity: 0.7;
}

/* ハンバーガーメニュー（PCでもスマホでも出す） */
.p-hamburger{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 7px;
	cursor: pointer;/* カーソルが上に来たらポインターに変身 */
	position: fixed; /* 設置する位置を固定 */
	top: 27px; /* 上からの位置 */
	right: 70px; /* 右からの位置 */
	z-index: 9999; /* 一番手前に表示 */
	width: 96px; /* 横幅 */
	height: 96px; /* 縦幅 */
	padding: 0;
	background-color: transparent;
	border: none;
	transition: background-color 0.3s;
}

.page_top .p-hamburger{
	top: 15px;
	right: 20px;
}

/* 下までスクロールしたら、どの背景の上でも見えるように紺の四角を敷く */
.is-scrolled .p-hamburger,
.p-hamburger.active{
	background-color: rgba(26, 33, 41, 0.92);
}

.p-hamburger span{
	width: 63px;
	height: 9px;
	background-color: #ffffff;/* 三本線の色 */
	transition: 0.3s;/* 三本線の動く時間 */
}

/* 三本線をバツにする */
.p-hamburger.active span:nth-of-type(1){
	transform: translateY(16px) rotate(-45deg);
}

.p-hamburger.active span:nth-of-type(2){
	opacity: 0;
}

.p-hamburger.active span:nth-of-type(3){
	transform: translateY(-16px) rotate(45deg);
}

/* 開く前のメニューは、画面全体を覆ったまま見えなくしておく */
#gnav{
	position: fixed;
	z-index: 999;
	inset: 0;
	overflow-y: auto;
	color: #ffffff;
	background-color: rgba(9, 1, 1, 0.96);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.5s, visibility 0.5s;
}

#gnav.list_active{
	opacity: 1;
	visibility: visible;
}

.hamburger-menu1{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 50px;
	min-height: 100%;
	padding: 120px 20px 60px;
}

.gnav_list{
	display: grid;
	grid-template-columns: repeat(2, auto);
	gap: 26px 120px;
}

.gnav_list a{
	display: flex;
	flex-direction: column;
	line-height: 1.3;
}

.gnav_list a:hover{
	opacity: 0.6;
}

.gnav_en{
	font-size: 34px;
	font-weight: 800;
	letter-spacing: 0.1em;
	color: #ede4d3;
}

.gnav_ja{
	margin-top: 4px;
	font-size: 14px;
}

.gnav_info{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	padding-top: 40px;
	border-top: 1px solid rgba(237, 228, 211, 0.4);
}

.gnav_hours{
	font-size: 14px;
	line-height: 1.8;
}

.gnav_hours div{
	display: flex;
	gap: 1em;
}

.gnav_hours dt{
	flex-shrink: 0;
	color: #ede4d3;
}





/* 電話番号 */
.tel_link{
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.06em;
}

.tel_icon{
	width: 0.9em;
	height: 0.9em;
	fill: currentColor;
}





/* ボタン（白い枠。トップの暗い背景に置く） */
.btn1{
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 223px;
	height: 59px;
	padding: 0 40px;
	font-size: 21px;
	font-weight: 800;
	line-height: 1;
	color: #ffffff;
	border: 1px solid #ffffff;
}

.btn1::after,
.btn2::after{
	content: "＞";
	position: absolute;
	top: 50%;
	right: 18px;
	transform: translateY(-50%);
	font-size: 0.75em;
}

.btn1:hover,
.btn2:hover{
	opacity: 0.7;
}

/* ボタン（紺。右下に黒い影） */
.btn2{
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 223px;
	min-height: 58px;
	padding: 10px 48px;
	font-size: 18px;
	font-weight: 800;
	line-height: 1.4;
	text-align: center;
	color: #ffffff;
	background-color: #1a2129;
	box-shadow: 8px 8px 0 #000000;
}

/* ボタン（枠だけ。前後の記事へ） */
.btn3{
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 223px;
	height: 58px;
	padding: 0 40px;
	font-size: 18px;
	font-weight: 800;
	color: #1a2129;
	border: 1px solid #1a2129;
}

.btn3::after{
	content: "＞";
	position: absolute;
	top: 50%;
	right: 18px;
	transform: translateY(-50%);
	font-size: 0.75em;
}

.btn3_prev::after{
	content: "＜";
	right: auto;
	left: 18px;
}

.btn3:hover{
	opacity: 0.6;
}





/* セクションの見出し（トップ。英語の大きな文字） */
.title{
	font-size: 60px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.075em;
	color: #ede4d3;
}

/* 下層のパンくず */
.breadcrumb_back{
	background-color: #ede6dc;
}

.breadcrumb{
	display: flex;
	flex-wrap: wrap;
	min-height: 55px;
	align-items: center;
	padding: 8px 0;
	font-family: 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', sans-serif;
	font-size: 15px;
	line-height: 1.6;
	color: #6b4f22;
}

.breadcrumb li + li::before{
	content: "＞";
	margin: 0 0.6em;
}

.breadcrumb a:hover{
	opacity: 0.7;
}

/* 下層のページの見出し */
.page_head{
	padding: 54px 20px 0;
	text-align: center;
}

.page_title{
	font-size: 36px;
	font-weight: 800;
	line-height: 1.4;
	letter-spacing: 0.075em;
}

/* 見出しの下の文章（中央ぞろえ） */
.page_lead{
	margin-top: 80px;
	font-size: 16px;
	text-align: center;
}

/* 大見出し（左に線） */
.block_heading{
	display: flex;
	align-items: center;
	gap: 16px;
	font-size: 30px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0;
}

.block_heading::before{
	content: "";
	flex-shrink: 0;
	width: 56px;
	height: 2px;
	background-color: #1a2129;
}





/* フッター（トップも下層も紺） */
footer{
	color: #ffffff;
	background-color: #1a2129;
}

.footer_inner{
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 40px;
	padding-top: 66px;
}

.footer_text{
	font-family: 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', sans-serif;
	font-size: 13px;
	line-height: 1.5;
}

.logo_footer a{
	display: inline-block;
	margin-top: 10px;
}

.logo_footer a:hover{
	opacity: 0.7;
}

.logo_footer img{
	display: block;
	width: auto;
	height: auto;
	max-width: 340px;
	max-height: 30px;
}

.footer_address{
	margin-top: 16px;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
}

.footer_address a:hover{
	opacity: 0.7;
}

/* フッターの丸いアイコンは、クリーム色の丸に紺の印 */
.sns_footer .sns_icon{
	color: #1a2129;
	background-color: #fffbf2;
	border-color: #fffbf2;
}

/* コピーライト（下層は右寄せ。トップは中央） */
.copyright{
	padding: 24px 0 14px;
	font-size: 15px;
	font-weight: 600;
	text-align: right;
}

.page_top .copyright{
	text-align: center;
}





/* トップに戻るボタン */
.top-button{
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 9;
}

.top-button a{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 84px;
	height: 84px;
	font-size: 15px;
	font-weight: 800;
	line-height: 1.3;
	text-align: center;
	color: #ffffff;
	background-color: #1a2129;
	border: 1px solid #ffffff;
}

.top-button a:hover{
	opacity: 0.7;
}





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

	.header_inner,
	.page_top .header_inner{
		padding: 0 130px 0 30px;
	}

	.p-hamburger,
	.page_top .p-hamburger{
		top: 15px;
		right: 15px;
	}

	.btn_reserve{
		min-width: 0;
		padding: 0 56px 0 24px;
	}

	.logo_header img{
		max-width: 320px;
		max-height: 32px;
	}
}




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

	p{
		font-size: 14px;
	}

	/* PC・SPの表示・非表示*/
	.pc{
		display: none;
	}

	.sp{
		display: block;
	}

	/* ヘッダー（スマホは店名と三本線だけ） */
	.header_inner,
	.page_top .header_inner{
		height: 54px;
		padding: 0 70px 0 15px;
	}

	.header_text{
		font-size: 10px;
	}

	.logo_header a{
		margin-top: 4px;
	}

	.logo_header img{
		max-width: 220px;
		max-height: 18px;
	}

	.header_buttons{
		display: none;
	}

	.p-hamburger,
	.page_top .p-hamburger{
		top: 4px;
		right: 6px;
		width: 46px;
		height: 46px;
		gap: 4px;
	}

	.p-hamburger span{
		width: 26px;
		height: 3px;
	}

	.p-hamburger.active span:nth-of-type(1){
		transform: translateY(7px) rotate(-45deg);
	}

	.p-hamburger.active span:nth-of-type(3){
		transform: translateY(-7px) rotate(45deg);
	}

	/* 開いたメニュー（1列） */
	.hamburger-menu1{
		justify-content: flex-start;
		gap: 30px;
		padding: 80px 30px 40px;
	}

	.gnav_list{
		grid-template-columns: 1fr;
		gap: 16px;
		text-align: center;
	}

	.gnav_en{
		font-size: 24px;
	}

	.gnav_ja{
		margin-top: 2px;
		font-size: 12px;
	}

	.gnav_info{
		padding-top: 26px;
	}

	.gnav_hours{
		font-size: 12px;
	}

	.btn_reserve{
		height: 46px;
		font-size: 14px;
	}

	.sns_icon{
		width: 40px;
		height: 40px;
	}

	.sns_icon svg{
		width: 18px;
		height: 18px;
	}

	/* 電話番号 */
	.tel_link{
		font-size: 22px;
	}

	/* ボタン */
	.btn1{
		width: 122px;
		height: 32px;
		padding: 0 24px;
		font-size: 13px;
		background-color: #1a2129;
	}

	.btn1::after,
	.btn2::after,
	.btn3::after{
		right: 10px;
	}

	.btn3_prev::after{
		left: 10px;
	}

	.btn2{
		min-width: 150px;
		min-height: 40px;
		padding: 8px 32px;
		font-size: 14px;
		box-shadow: 5px 5px 0 #000000;
	}

	.btn3{
		width: 110px;
		height: 40px;
		padding: 0 24px;
		font-size: 13px;
	}

	/* 見出し */
	.title{
		font-size: 26px;
		font-weight: 800;
		text-align: center;
	}

	.breadcrumb{
		min-height: 34px;
		font-size: 11px;
	}

	.page_head{
		padding-top: 34px;
	}

	.page_title{
		font-size: 19px;
	}

	.page_lead{
		margin-top: 30px;
		font-size: 14px;
		text-align: left;
	}

	.block_heading{
		gap: 10px;
		font-size: 18px;
	}

	.block_heading::before{
		width: 30px;
		height: 1px;
	}

	/* フッター（中央ぞろえで縦に並べる） */
	.footer_inner{
		flex-direction: column;
		align-items: center;
		gap: 20px;
		padding-top: 30px;
		text-align: center;
	}

	.footer_text{
		font-size: 11px;
	}

	.logo_footer a{
		margin-top: 6px;
	}

	.logo_footer img{
		max-width: 220px;
		max-height: 20px;
	}

	.footer_address{
		margin-top: 16px;
		font-size: 12px;
	}

	.copyright,
	.page_top .copyright{
		padding: 20px 0 16px;
		font-size: 11px;
		text-align: center;
	}

	/* トップへ戻るボタン */
	.top-button{
		right: 8px;
		bottom: 8px;
	}

	.top-button a{
		width: 46px;
		height: 46px;
		font-size: 10px;
	}
}