/*
Theme Name: 四季の詩 -- Shikinouta Child
Theme URI: https://shikinouta-kyoto.com/
Description: Twenty Twenty-Five の子テーマ。全席個室居酒屋「四季の詩」京都駅前店向け。既存6ページ構成のまま、簡素な見た目に整える。宴会シーズンで色が替わるスタイルバリエーション、電話と公式LINEの固定バーを含む。
Author: Cell, Inc.
Author URI: https://cell-inc.co.jp/
Template: twentytwentyfive
Version: 4.1.0
Requires at least: 6.7
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: shikinouta
Tags: block-patterns, full-site-editing, restaurant
*/

/* ==================================================================
   1. 基礎（和文組み）
   ================================================================== */

:root {
	--sn-rule: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 16%, transparent);
	--sn-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--sn-bar-h: 62px;
	--sn-line: #06C755;
}

body {
	font-feature-settings: "palt" 1;
	text-spacing-trim: trim-start;
}

h1, h2, h3, h4, h5, h6 {
	font-feature-settings: "palt" 0;
	line-break: strict;
	overflow-wrap: anywhere;
}

p, li, dd, dt, figcaption, td, th {
	line-break: strict;
	word-break: normal;
	overflow-wrap: anywhere;
}

/* スマホ固定バーのぶんだけ本文の下を空ける */
@media (max-width: 781px) {
	body.has-sn-reserve-bar {
		padding-block-end: calc(var(--sn-bar-h) + env(safe-area-inset-bottom));
	}
}

/* ==================================================================
   2. 予約バー（スマホ固定）
   電話は生成り地・墨文字、LINEは公式グリーン。色で役割を分ける。
   ================================================================== */

.sn-reserve-bar {
	position: fixed;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: 9999;
	display: grid;
	grid-template-columns: 1fr 1fr;
	block-size: auto;
	min-block-size: var(--sn-bar-h);
	padding-block-end: env(safe-area-inset-bottom);
	box-shadow: 0 -2px 18px rgb(0 0 0 / 20%);
}

.sn-reserve-bar--single {
	grid-template-columns: 1fr;
}

.sn-reserve-bar__item {
	min-block-size: var(--sn-bar-h);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	text-decoration: none;
	font-size: 0.9375rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	line-height: 1.2;
	transition: filter 0.25s var(--sn-ease);
}

.sn-reserve-bar__item--tel {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

.sn-reserve-bar__item--line {
	background: var(--sn-line);
	color: #fff;
}

.sn-reserve-bar__item:active {
	filter: brightness(0.92);
}

.sn-reserve-bar .sn-ico {
	flex: 0 0 auto;
}

.sn-reserve-bar__note {
	font-size: 0.625rem;
	letter-spacing: 0.12em;
	opacity: 0.7;
	font-weight: 400;
}

@media (min-width: 782px) {
	.sn-reserve-bar {
		display: none;
	}
}

@media print {
	.sn-reserve-bar {
		display: none;
	}
}

/* ==================================================================
   3. ブロックスタイル
   ================================================================== */

/* 3-1. 縦書き（屋号・季節の言葉など短い語だけ） */
.is-style-tategaki {
	writing-mode: vertical-rl;
	font-feature-settings: "palt" 0;
	text-orientation: upright;
	letter-spacing: 0.22em;
	line-height: 1.7;
	margin-inline: auto;
	max-block-size: 20em;
}

.is-style-tategaki em,
.is-style-tategaki .sn-yoko {
	text-combine-upright: all;
	font-style: normal;
}

/* 3-2. 肩線つき見出し（節の始まりの合図） */
.is-style-kata-sen {
	position: relative;
	padding-block-start: var(--wp--preset--spacing--40, 2rem);
}

.is-style-kata-sen::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	inline-size: 3.5rem;
	block-size: 1px;
	background: var(--wp--preset--color--accent-1);
}

.is-style-kata-sen.has-text-align-center::before {
	inset-inline-start: 50%;
	transform: translateX(-50%);
}

/* 3-3. リード文 */
.is-style-lead {
	font-size: clamp(1.0625rem, 0.99rem + 0.4vw, 1.25rem);
	line-height: 2.2;
	letter-spacing: 0.07em;
}

/* 3-4. 価格（段落）— 金額だけゴシックで太く、行内で目に入るように */
.is-style-price {
	font-family: var(--wp--preset--font-family--gothic);
	font-feature-settings: "palt" 1;
	font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.125rem);
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.2;
	color: var(--wp--preset--color--accent-1);
	margin-block: 0.2em;
}

.is-style-price small {
	font-size: 0.5em;
	font-weight: 400;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--accent-3);
	margin-inline-start: 0.5em;
}

/* 3-5. 定員バッジ（見出し）— 個室の人数を数字で立てる */
.is-style-teiin {
	display: inline-block;
	font-family: var(--wp--preset--font-family--utility);
	font-size: 0.8125rem;
	letter-spacing: 0.16em;
	padding: 0.35em 1em;
	border: 1px solid var(--wp--preset--color--accent-2);
	color: var(--wp--preset--color--accent-2);
	margin-block-end: 0.8em;
}

/* 3-6. 画像がゆっくり寄る（PCのみ） */
@media (hover: hover) {
	.wp-block-image.is-style-sn-zoom img {
		transition: transform 1.1s var(--sn-ease);
		will-change: transform;
	}
	.wp-block-image.is-style-sn-zoom:hover img {
		transform: scale(1.03);
	}
}

/* ==================================================================
   4. パーツ調整
   ================================================================== */

.wp-block-separator:not(.is-style-dots) {
	border: none;
	border-block-start: var(--sn-rule);
	opacity: 1;
}

.wp-block-separator.is-style-wide {
	inline-size: 100%;
}



/* 表（コース内容・店舗情報）は罫を下線一本まで削る */
.wp-block-table table {
	border-collapse: collapse;
}

.wp-block-table th,
.wp-block-table td {
	border: none;
	border-block-end: var(--sn-rule);
	padding-block: 0.85em;
	padding-inline: 0 1.5em;
	vertical-align: top;
	text-align: start;
}

.wp-block-table th {
	font-weight: 400;
	white-space: nowrap;
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 60%, transparent);
	letter-spacing: 0.08em;
}

/* コース・個室カードの枠（グループに .sn-card） */
.sn-card {
	border: var(--sn-rule);
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--accent-4);
}

.sn-card > :first-child {
	margin-block-start: 0;
}

.sn-card > :last-child {
	margin-block-end: 0;
}

/* 反転セクション内の色を通す */
.has-accent-5-background-color {
	color: var(--wp--preset--color--base);
}

.has-accent-5-background-color :where(h1, h2, h3, h4, p, li, td, th) {
	color: inherit;
}

.has-accent-5-background-color .wp-block-table th,
.has-accent-5-background-color .wp-block-table td {
	border-block-end-color: rgb(255 255 255 / 18%);
}


/* ==================================================================
   6. ペラいち用
   ================================================================== */

/* LINEボタン */
.wp-block-button.is-style-line .wp-block-button__link {
	background-color: var(--sn-line);
	border-color: var(--sn-line);
	color: #fff;
}

.wp-block-button.is-style-line .wp-block-button__link:hover,
.wp-block-button.is-style-line .wp-block-button__link:focus {
	background-color: color-mix(in srgb, var(--sn-line) 85%, #000);
	border-color: color-mix(in srgb, var(--sn-line) 85%, #000);
	color: #fff;
}

/* 反転ボタン（暗い背景の上に置くとき） */
.wp-block-button.is-style-invert .wp-block-button__link {
	background-color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

.wp-block-button.is-style-invert .wp-block-button__link:hover,
.wp-block-button.is-style-invert .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--accent-1);
	border-color: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--base);
}

/* こだわりの行（画像＋文章）*/
.sn-row {
	margin-block: var(--wp--preset--spacing--50);
	gap: var(--wp--preset--spacing--50);
}

.sn-row .wp-block-media-text__content {
	padding-inline: var(--wp--preset--spacing--40);
}

.sn-row .wp-block-media-text__media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

/* 通し番号は content-visibility ではなく意味として置く（01/02/03） */
.sn-row h6 {
	font-family: var(--wp--preset--font-family--utility);
	margin-block-end: 0.4em;
}

@media (max-width: 781px) {
	.sn-row .wp-block-media-text__content {
		padding-inline: 0;
		padding-block-start: var(--wp--preset--spacing--30);
	}
}

/* 最新情報：日付と見出しを一行に */
.sn-news__item {
	gap: 1.2em;
	align-items: baseline;
	padding-block: 0.9em;
	border-block-end: var(--sn-rule);
}

.sn-news__item .wp-block-post-date {
	flex: 0 0 auto;
	font-family: var(--wp--preset--font-family--utility);
	letter-spacing: 0.08em;
	margin: 0;
}

.sn-news__item .wp-block-post-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--gothic);
	font-weight: 400;
	line-height: 1.7;
}

@media (max-width: 600px) {
	.sn-news__item {
		flex-wrap: wrap !important;
		gap: 0.2em 1.2em;
	}
	.sn-news__item .wp-block-post-title {
		flex: 1 0 100%;
	}
}

/* 店内について：3枚の写真の縦横比をそろえる */
.wp-block-columns .wp-block-image img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	inline-size: 100%;
}


/* ==================================================================
   7. ページ共通の骨組み
   ================================================================== */

/* ヘッダー：暗色。ロゴが白抜きなので地を落とす。 */
.sn-header {
	border-block-end: none;
	padding-block: 0.85rem;
	padding-inline: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--accent-5);
}

.sn-header a,
.sn-header .wp-block-navigation a {
	color: var(--wp--preset--color--base);
}

.sn-header .wp-block-navigation a:hover {
	color: var(--wp--preset--color--accent-1);
}

.sn-header .wp-block-navigation__responsive-container-open,
.sn-header .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--base);
}

.sn-header__inner {
	gap: var(--wp--preset--spacing--40);
}

.sn-logo {
	margin: 0;
	line-height: 0;
	flex: 0 0 auto;
}

.sn-logo img {
	block-size: auto;
	inline-size: auto;
	max-block-size: 46px;
	max-inline-size: 220px;
	object-fit: contain;
}

.sn-header__right {
	gap: var(--wp--preset--spacing--30);
	align-items: center;
}

.sn-header__tel {
	margin: 0;
}

.sn-header__tel a {
	display: inline-block;
	padding: 0.55em 1.1em;
	border: 1px solid rgb(255 255 255 / 45%);
	font-family: var(--wp--preset--font-family--utility);
	font-size: 0.9375rem;
	letter-spacing: 0.06em;
	white-space: nowrap;
	transition: background-color 0.3s var(--sn-ease), color 0.3s var(--sn-ease);
}

.sn-header__tel a:hover {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

@media (max-width: 900px) {
	.sn-header__tel {
		display: none;
	}
	.sn-logo img {
		max-block-size: 42px;
	}
}

/* フッター */
.sn-footer__cols {
	gap: var(--wp--preset--spacing--50);
	padding-block-end: var(--wp--preset--spacing--40);
	border-block-end: 1px solid rgb(255 255 255 / 14%);
}

.sn-footer h2 {
	letter-spacing: 0.2em;
	margin-block: 0 0.8em;
}

.sn-footer__cta .sn-eyebrow {
	color: color-mix(in srgb, var(--wp--preset--color--base) 55%, transparent);
}

.sn-footer__tel {
	font-family: var(--wp--preset--font-family--utility);
	font-size: clamp(1.5rem, 1.3rem + 0.9vw, 1.875rem);
	letter-spacing: 0.04em;
	margin-block: 0 0.2em;
}

.sn-footer__tel a {
	color: var(--wp--preset--color--base);
}

.sn-copy {
	margin-block-start: var(--wp--preset--spacing--30);
	letter-spacing: 0.14em;
	opacity: 0.6;
}

/* 下層ページの見出し帯 */
.sn-page-head {
	border-block-end: var(--sn-rule);
}

.sn-page-head .wp-block-post-title {
	margin: 0;
	letter-spacing: 0.14em;
}

/* コース：金額を先頭に、罫で区切るだけ */
.sn-course__item {
	padding-block: var(--wp--preset--spacing--40);
	border-block-end: var(--sn-rule);
}

.sn-course__item > * {
	margin-block: 0.35em;
}

.sn-course__item .is-style-price {
	margin-block-end: 0;
}

/* 個室：一室ずつ縦に積む */
.sn-rooms__item {
	padding-block-end: var(--wp--preset--spacing--50);
	margin-block-end: var(--wp--preset--spacing--50);
	border-block-end: var(--sn-rule);
}

.sn-rooms__item:last-child {
	border-block-end: none;
}

.sn-rooms__item .wp-block-image {
	margin-block-end: var(--wp--preset--spacing--30);
}

.sn-rooms__item .wp-block-image img {
	inline-size: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

/* 店舗情報ページの先頭：電話番号を大きく */
.sn-info-lead {
	padding-block: var(--wp--preset--spacing--40);
	margin-block-end: var(--wp--preset--spacing--50);
	border-block: var(--sn-rule);
	text-align: center;
}

.sn-info-lead .is-style-price a {
	color: inherit;
}

.sn-info-lead > * {
	margin-block: 0.4em;
}


/* ==================================================================
   9. 長い店名・旧コンテンツの受け止め
   店名が長いので、ヘッダーは字間を詰めて2段に分ける。
   ================================================================== */

.wp-block-site-title {
	margin: 0;
	max-inline-size: 34ch;
}

.wp-block-site-title a {
	font-size: clamp(0.9375rem, 0.85rem + 0.45vw, 1.1875rem);
	letter-spacing: 0.02em;
	line-height: 1.5;
	text-decoration: none;
}

/* ヘッダーは「店名」「ナビ＋電話」の2段。詰め込まない。 */
.sn-header .wp-block-group.alignwide {
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
}

.sn-header__right {
	gap: var(--wp--preset--spacing--30);
	align-items: center;
}

/* 電話番号はナビと地続きにせず、枠で切り分ける */
.sn-header__tel a {
	display: inline-block;
	padding: 0.5em 1.1em;
	border: 1px solid var(--wp--preset--color--contrast);
	font-size: 0.9375rem;
	letter-spacing: 0.06em;
	white-space: nowrap;
	transition: background-color 0.3s var(--sn-ease), color 0.3s var(--sn-ease);
}

.sn-header__tel a:hover {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}



/* 写真が未設定の画像ブロックは、枠だけ出して位置を示す。
   写真を入れれば自動で消える。 */
.wp-block-image:not(:has(img)) {
	display: block;
	min-block-size: 180px;
	border: 1px dashed color-mix(in srgb, var(--wp--preset--color--contrast) 25%, transparent);
	background: color-mix(in srgb, var(--wp--preset--color--contrast) 4%, transparent);
}

.wp-block-image:not(:has(img))::after {
	content: "写真を追加";
	display: flex;
	align-items: center;
	justify-content: center;
	block-size: 180px;
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--accent-3);
}

.wp-block-media-text__media:not(:has(img)) {
	min-block-size: 220px;
	border: 1px dashed color-mix(in srgb, var(--wp--preset--color--contrast) 25%, transparent);
}




/* ==================================================================
   下層ページ共通の型
   写真 → リード → 説明 → 食べログ → 予約
   ================================================================== */

.sn-page-hero {
	margin-block: 0 !important;
}

.sn-page-hero img {
	inline-size: 100%;
	aspect-ratio: 21 / 9;
	object-fit: cover;
	display: block;
}

@media (max-width: 781px) {
	.sn-page-hero img {
		aspect-ratio: 4 / 3;
	}
}

.sn-page-body {
	padding-block: var(--wp--preset--spacing--60);
}

.sn-page-body > * {
	margin-block: 0 1.4em;
}

.sn-page-body > *:last-child {
	margin-block-end: 0;
}

.sn-page-lead {
	font-family: var(--wp--preset--font-family--mincho);
	font-size: clamp(1.25rem, 1.05rem + 1vw, 1.75rem);
	letter-spacing: 0.18em;
	line-height: 1.9;
	margin-block-end: 1.6em !important;
}

/* 下層ページの見出し帯：余白を締める */
.sn-page-head {
	padding-block: var(--wp--preset--spacing--50) !important;
	border-block-end: var(--sn-rule);
}

/* テラス席 */
.sn-terrace__img img {
	inline-size: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.sn-terrace p {
	margin-block-start: var(--wp--preset--spacing--30);
}

/* ==================================================================
   店舗情報ページ
   ================================================================== */

.sn-info-hero > * {
	margin-block: 0 0.8em;
}

.sn-info-hero .sn-eyebrow {
	color: color-mix(in srgb, var(--wp--preset--color--base) 55%, transparent);
}

.sn-info-hero__tel {
	font-family: var(--wp--preset--font-family--utility);
	font-size: clamp(1.875rem, 1.5rem + 2vw, 3rem);
	letter-spacing: 0.04em;
	line-height: 1.2;
	margin-block: 0 0.4em;
}

.sn-info-hero__tel a {
	color: var(--wp--preset--color--base);
}

.sn-info-hero__tel a:hover {
	color: var(--wp--preset--color--accent-1);
}

.sn-info-hero p {
	color: var(--wp--preset--color--base);
}

.sn-info-table {
	padding-block: var(--wp--preset--spacing--60);
}

.sn-info-table th {
	inline-size: 8em;
	padding-block: 1.15em;
	font-size: 0.8125rem;
	letter-spacing: 0.14em;
	color: var(--wp--preset--color--accent-2);
	vertical-align: top;
}

.sn-info-table td {
	padding-block: 1.15em;
	font-size: 0.9375rem;
	line-height: 1.9;
}

@media (max-width: 600px) {
	.sn-info-table table,
	.sn-info-table tbody,
	.sn-info-table tr,
	.sn-info-table th,
	.sn-info-table td {
		display: block;
		inline-size: 100%;
	}
	.sn-info-table th {
		border: none;
		padding-block: 1.2em 0.2em;
	}
	.sn-info-table td {
		padding-block: 0 1.2em;
	}
}

.sn-map {
	padding-block-end: var(--wp--preset--spacing--50);
}

.sn-map iframe {
	inline-size: 100% !important;
	block-size: 440px !important;
	display: block;
	border: 0;
	filter: grayscale(0.2);
	transition: filter 0.5s var(--sn-ease);
}

.sn-map iframe:hover {
	filter: grayscale(0);
}

@media (max-width: 781px) {
	.sn-map iframe {
		block-size: 320px !important;
	}
}






/* ==================================================================
   スマホ調整
   ================================================================== */

@media (max-width: 781px) {

	/* 帯のボタンは下部の固定バーと重複するので出さない。
	   幅が足りず、電話番号が3行に折れるのも防げる。 */
	.sn-strip .wp-block-buttons,
	.sn-strip .wp-block-button {
		display: none !important;
	}

	.sn-strip {
		padding-block: var(--wp--preset--spacing--30) !important;
	}

	.sn-strip__text {
		font-size: 0.8125rem;
		letter-spacing: 0.06em;
	}

	/* 縦の余白を詰める。6.5remはスマホでは間延びする。 */
	.sn-sec,
	.sn-intro,
	.sn-page-body,
	.sn-info-table,
	.sn-post-body {
		padding-block: var(--wp--preset--spacing--50) !important;
	}

	.sn-intro__lead {
		letter-spacing: 0.14em;
	}

	/* 段組みの間隔 */
	.sn-rooms-grid,
	.sn-dishes {
		gap: var(--wp--preset--spacing--40);
	}
}

/* メニュー内のフォーカス枠は控えめに */
.is-menu-open a:focus,
.is-menu-open a:focus-visible {
	outline: none !important;
	box-shadow: inset 0 0 0 1px rgb(255 255 255 / 18%);
}

/* メニュー項目のタップ領域 */
.is-menu-open .wp-block-navigation-item__content {
	min-block-size: 56px;
	display: flex !important;
	align-items: center;
	justify-content: center;
}

/* ==================================================================
   投稿ページ
   執筆者・カテゴリは出さない。日付と本文だけ。
   ================================================================== */

.sn-post-head {
	padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
	border-block-end: var(--sn-rule);
	background: var(--wp--preset--color--accent-6);
}

.sn-post-date {
	font-family: var(--wp--preset--font-family--utility);
	letter-spacing: 0.24em;
	color: var(--wp--preset--color--accent-3);
	margin-block-end: 1.2em;
}

.sn-post-head .wp-block-post-title {
	margin: 0;
	letter-spacing: 0.1em;
	line-height: 1.6;
}

.sn-post-body {
	padding-block: var(--wp--preset--spacing--60);
}

.sn-post-body > .wp-block-post-content > * {
	margin-block: 0 1.6em;
}

.sn-post-body .wp-block-separator {
	margin-block: var(--wp--preset--spacing--50);
}

.sn-post-nav {
	padding-block: 0 var(--wp--preset--spacing--60);
}

.sn-post-nav .wp-block-group {
	gap: var(--wp--preset--spacing--30);
	padding-block: var(--wp--preset--spacing--30);
	border-block-start: var(--sn-rule);
	border-block-end: var(--sn-rule);
}

.wp-block-post-navigation-link {
	letter-spacing: 0.1em;
}

.wp-block-post-navigation-link a {
	transition: opacity 0.3s var(--sn-ease);
}

.wp-block-post-navigation-link a:hover {
	opacity: 0.6;
}

.sn-post-nav .sn-more {
	margin-block-start: var(--wp--preset--spacing--40);
}

/* 親テーマが出す投稿メタを念のため隠す */
.wp-block-post-author,
.wp-block-post-author-name,
.wp-block-post-terms,
.wp-block-post-meta {
	display: none;
}

/* ==================================================================
   動き
   要素を隠す演出は入れない。写真がゆっくり寄るのと、
   ホバーの反応だけ。本文が消える事故を起こさないため。
   ================================================================== */

.sn-hero .wp-block-cover__image-background {
	animation: sn-kenburns 26s var(--sn-ease) forwards;
	transform-origin: 50% 55%;
}

@keyframes sn-kenburns {
	from { transform: scale(1); }
	to   { transform: scale(1.07); }
}

@media (prefers-reduced-motion: reduce) {
	.sn-hero .wp-block-cover__image-background {
		animation: none;
	}
}

/* ==================================================================
   ネット予約ボタン
   ================================================================== */

.wp-block-button.is-style-net .wp-block-button__link {
	background-color: var(--wp--preset--color--accent-1);
	border-color: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--base);
}

.wp-block-button.is-style-net .wp-block-button__link:hover,
.wp-block-button.is-style-net .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.wp-block-button.is-style-net .wp-block-button__link::before {
	content: "";
	display: inline-block;
	inline-size: 1em;
	block-size: 1em;
	margin-inline-end: 0.55em;
	vertical-align: -0.14em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2h2v2h6V2h2v2h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2V2zm12 8H5v10h14V10z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2h2v2h6V2h2v2h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2V2zm12 8H5v10h14V10z'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

/* 固定バー：3分割 */
.sn-reserve-bar--3 {
	grid-template-columns: 1fr 1fr 1fr;
}

.sn-reserve-bar--2 {
	grid-template-columns: 1fr 1fr;
}

.sn-reserve-bar--1 {
	grid-template-columns: 1fr;
}

.sn-reserve-bar__item--net {
	background: var(--wp--preset--color--accent-5);
	color: var(--wp--preset--color--base);
}

.sn-reserve-bar--3 .sn-reserve-bar__item {
	flex-direction: column;
	gap: 3px;
	font-size: 0.75rem;
	letter-spacing: 0.06em;
}

/* ==================================================================
   ボタンのアイコン
   電話は受話器、LINEは吹き出し。マスクで色を継承させる。
   ================================================================== */

.wp-block-button__link[href^="tel:"]::before,
.wp-block-button.is-style-line .wp-block-button__link::before,
.sn-header__tel a::before,
.sn-info-hero__tel a::before,
.sn-footer__tel a::before {
	content: "";
	display: inline-block;
	inline-size: 1em;
	block-size: 1em;
	margin-inline-end: 0.55em;
	vertical-align: -0.14em;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.wp-block-button__link[href^="tel:"]::before,
.sn-header__tel a::before,
.sn-info-hero__tel a::before,
.sn-footer__tel a::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.58 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1 11.4 11.4 0 0 0 .58 3.6 1 1 0 0 1-.25 1z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.58 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1 11.4 11.4 0 0 0 .58 3.6 1 1 0 0 1-.25 1z'/%3E%3C/svg%3E");
}

.wp-block-button.is-style-line .wp-block-button__link::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3C6.9 3 2.8 6.3 2.8 10.4c0 3.7 3.2 6.8 7.6 7.4.3.06.7.2.8.45.1.23.07.58.03.81l-.13.77c-.04.23-.18.9.79.49s5.2-3.06 7.1-5.24c1.3-1.42 1.9-2.87 1.9-4.68C20.9 6.3 16.8 3 12 3z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3C6.9 3 2.8 6.3 2.8 10.4c0 3.7 3.2 6.8 7.6 7.4.3.06.7.2.8.45.1.23.07.58.03.81l-.13.77c-.04.23-.18.9.79.49s5.2-3.06 7.1-5.24c1.3-1.42 1.9-2.87 1.9-4.68C20.9 6.3 16.8 3 12 3z'/%3E%3C/svg%3E");
}

/* 食べログのリンクは外部リンクとわかるように */
.wp-block-button__link[href*="tabelog"]::after,
.sn-more a[target="_blank"]::after {
	content: "";
	display: inline-block;
	inline-size: 0.7em;
	block-size: 0.7em;
	margin-inline-start: 0.5em;
	vertical-align: 0;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 3h7v7h-2V6.4l-8.3 8.3-1.4-1.4L17.6 5H14V3zM5 5h5v2H5v12h12v-5h2v7H3V5h2z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 3h7v7h-2V6.4l-8.3 8.3-1.4-1.4L17.6 5H14V3zM5 5h5v2H5v12h12v-5h2v7H3V5h2z'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.sn-more a::after {
	content: " →";
}

.sn-more a[target="_blank"]::after {
	content: "";
}


/* ==================================================================
   SNS（Instagram）
   カメラのアイコンをCSSマスクで描く。文字色に追従する。
   ================================================================== */

.sn-sns {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 0.6em;
}

.sn-sns a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 44px;
	block-size: 44px;
	color: inherit;
	transition: opacity 0.3s var(--sn-ease);
}

.sn-sns a::before {
	content: "";
	display: block;
	inline-size: 21px;
	block-size: 21px;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.16c3.2 0 3.58.01 4.85.07 1.17.05 1.8.25 2.23.41.56.22.96.48 1.38.9.42.42.68.82.9 1.38.16.42.36 1.06.41 2.23.06 1.27.07 1.65.07 4.85s-.01 3.58-.07 4.85c-.05 1.17-.25 1.8-.41 2.23-.22.56-.48.96-.9 1.38-.42.42-.82.68-1.38.9-.42.16-1.06.36-2.23.41-1.27.06-1.65.07-4.85.07s-3.58-.01-4.85-.07c-1.17-.05-1.8-.25-2.23-.41-.56-.22-.96-.48-1.38-.9-.42-.42-.68-.82-.9-1.38-.16-.42-.36-1.06-.41-2.23C2.17 15.58 2.16 15.2 2.16 12s.01-3.58.07-4.85c.05-1.17.25-1.8.41-2.23.22-.56.48-.96.9-1.38.42-.42.82-.68 1.38-.9.42-.16 1.06-.36 2.23-.41C8.42 2.17 8.8 2.16 12 2.16zm0 1.44c-3.14 0-3.51.01-4.75.07-1.15.05-1.77.24-2.18.4-.55.21-.94.47-1.35.88-.41.41-.67.8-.88 1.35-.16.41-.35 1.03-.4 2.18-.06 1.24-.07 1.61-.07 4.75s.01 3.51.07 4.75c.05 1.15.24 1.77.4 2.18.21.55.47.94.88 1.35.41.41.8.67 1.35.88.41.16 1.03.35 2.18.4 1.24.06 1.61.07 4.75.07s3.51-.01 4.75-.07c1.15-.05 1.77-.24 2.18-.4.55-.21.94-.47 1.35-.88.41-.41.67-.8.88-1.35.16-.41.35-1.03.4-2.18.06-1.24.07-1.61.07-4.75s-.01-3.51-.07-4.75c-.05-1.15-.24-1.77-.4-2.18-.21-.55-.47-.94-.88-1.35-.41-.41-.8-.67-1.35-.88-.41-.16-1.03-.35-2.18-.4-1.24-.06-1.61-.07-4.75-.07zm0 2.45a5.95 5.95 0 1 1 0 11.9 5.95 5.95 0 0 1 0-11.9zm0 9.81a3.86 3.86 0 1 0 0-7.72 3.86 3.86 0 0 0 0 7.72zm7.57-9.99a1.39 1.39 0 1 1-2.78 0 1.39 1.39 0 0 1 2.78 0z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.16c3.2 0 3.58.01 4.85.07 1.17.05 1.8.25 2.23.41.56.22.96.48 1.38.9.42.42.68.82.9 1.38.16.42.36 1.06.41 2.23.06 1.27.07 1.65.07 4.85s-.01 3.58-.07 4.85c-.05 1.17-.25 1.8-.41 2.23-.22.56-.48.96-.9 1.38-.42.42-.82.68-1.38.9-.42.16-1.06.36-2.23.41-1.27.06-1.65.07-4.85.07s-3.58-.01-4.85-.07c-1.17-.05-1.8-.25-2.23-.41-.56-.22-.96-.48-1.38-.9-.42-.42-.68-.82-.9-1.38-.16-.42-.36-1.06-.41-2.23C2.17 15.58 2.16 15.2 2.16 12s.01-3.58.07-4.85c.05-1.17.25-1.8.41-2.23.22-.56.48-.96.9-1.38.42-.42.82-.68 1.38-.9.42-.16 1.06-.36 2.23-.41C8.42 2.17 8.8 2.16 12 2.16zm0 1.44c-3.14 0-3.51.01-4.75.07-1.15.05-1.77.24-2.18.4-.55.21-.94.47-1.35.88-.41.41-.67.8-.88 1.35-.16.41-.35 1.03-.4 2.18-.06 1.24-.07 1.61-.07 4.75s.01 3.51.07 4.75c.05 1.15.24 1.77.4 2.18.21.55.47.94.88 1.35.41.41.8.67 1.35.88.41.16 1.03.35 2.18.4 1.24.06 1.61.07 4.75.07s3.51-.01 4.75-.07c1.15-.05 1.77-.24 2.18-.4.55-.21.94-.47 1.35-.88.41-.41.67-.8.88-1.35.16-.41.35-1.03.4-2.18.06-1.24.07-1.61.07-4.75s-.01-3.51-.07-4.75c-.05-1.15-.24-1.77-.4-2.18-.21-.55-.47-.94-.88-1.35-.41-.41-.8-.67-1.35-.88-.41-.16-1.03-.35-2.18-.4-1.24-.06-1.61-.07-4.75-.07zm0 2.45a5.95 5.95 0 1 1 0 11.9 5.95 5.95 0 0 1 0-11.9zm0 9.81a3.86 3.86 0 1 0 0-7.72 3.86 3.86 0 0 0 0 7.72zm7.57-9.99a1.39 1.39 0 1 1-2.78 0 1.39 1.39 0 0 1 2.78 0z'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-position: center;
	mask-position: center;
}

.sn-sns a:hover {
	opacity: 0.65;
}

/* ヘッダー内 */
.sn-header .sn-sns a {
	color: var(--wp--preset--color--base);
}

/* フッター内：アカウント名を添える */
.sn-sns--footer {
	margin-block-start: 1.4rem;
	margin-inline-start: -12px;
}

.sn-sns--footer a {
	color: var(--wp--preset--color--base);
}

.sn-sns__label {
	font-family: var(--wp--preset--font-family--utility);
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	color: color-mix(in srgb, var(--wp--preset--color--base) 70%, transparent);
}

/* 外部リンクの矢印はSNSには付けない */
.sn-sns a::after {
	display: none !important;
}

@media (max-width: 900px) {
	.sn-header .sn-sns {
		display: none;
	}
}

/* スマホのメニュー内にInstagramを出す */
@media (max-width: 781px) {
	.is-menu-open .wp-block-navigation__container::before {
		content: "";
		order: 99;
		display: block;
		inline-size: 22px;
		block-size: 22px;
		margin-block-start: 2rem;
		background-color: var(--wp--preset--color--base);
		-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.16c3.2 0 3.58.01 4.85.07 1.17.05 1.8.25 2.23.41.56.22.96.48 1.38.9.42.42.68.82.9 1.38.16.42.36 1.06.41 2.23.06 1.27.07 1.65.07 4.85s-.01 3.58-.07 4.85c-.05 1.17-.25 1.8-.41 2.23-.22.56-.48.96-.9 1.38-.42.42-.82.68-1.38.9-.42.16-1.06.36-2.23.41-1.27.06-1.65.07-4.85.07s-3.58-.01-4.85-.07c-1.17-.05-1.8-.25-2.23-.41-.56-.22-.96-.48-1.38-.9-.42-.42-.68-.82-.9-1.38-.16-.42-.36-1.06-.41-2.23C2.17 15.58 2.16 15.2 2.16 12s.01-3.58.07-4.85c.05-1.17.25-1.8.41-2.23.22-.56.48-.96.9-1.38.42-.42.82-.68 1.38-.9.42-.16 1.06-.36 2.23-.41C8.42 2.17 8.8 2.16 12 2.16zm0 1.44c-3.14 0-3.51.01-4.75.07-1.15.05-1.77.24-2.18.4-.55.21-.94.47-1.35.88-.41.41-.67.8-.88 1.35-.16.41-.35 1.03-.4 2.18-.06 1.24-.07 1.61-.07 4.75s.01 3.51.07 4.75c.05 1.15.24 1.77.4 2.18.21.55.47.94.88 1.35.41.41.8.67 1.35.88.41.16 1.03.35 2.18.4 1.24.06 1.61.07 4.75.07s3.51-.01 4.75-.07c1.15-.05 1.77-.24 2.18-.4.55-.21.94-.47 1.35-.88.41-.41.67-.8.88-1.35.16-.41.35-1.03.4-2.18.06-1.24.07-1.61.07-4.75s-.01-3.51-.07-4.75c-.05-1.15-.24-1.77-.4-2.18-.21-.55-.47-.94-.88-1.35-.41-.41-.8-.67-1.35-.88-.41-.16-1.03-.35-2.18-.4-1.24-.06-1.61-.07-4.75-.07zm0 2.45a5.95 5.95 0 1 1 0 11.9 5.95 5.95 0 0 1 0-11.9zm0 9.81a3.86 3.86 0 1 0 0-7.72 3.86 3.86 0 0 0 0 7.72zm7.57-9.99a1.39 1.39 0 1 1-2.78 0 1.39 1.39 0 0 1 2.78 0z'/%3E%3C/svg%3E");
		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.16c3.2 0 3.58.01 4.85.07 1.17.05 1.8.25 2.23.41.56.22.96.48 1.38.9.42.42.68.82.9 1.38.16.42.36 1.06.41 2.23.06 1.27.07 1.65.07 4.85s-.01 3.58-.07 4.85c-.05 1.17-.25 1.8-.41 2.23-.22.56-.48.96-.9 1.38-.42.42-.82.68-1.38.9-.42.16-1.06.36-2.23.41-1.27.06-1.65.07-4.85.07s-3.58-.01-4.85-.07c-1.17-.05-1.8-.25-2.23-.41-.56-.22-.96-.48-1.38-.9-.42-.42-.68-.82-.9-1.38-.16-.42-.36-1.06-.41-2.23C2.17 15.58 2.16 15.2 2.16 12s.01-3.58.07-4.85c.05-1.17.25-1.8.41-2.23.22-.56.48-.96.9-1.38.42-.42.82-.68 1.38-.9.42-.16 1.06-.36 2.23-.41C8.42 2.17 8.8 2.16 12 2.16zm0 1.44c-3.14 0-3.51.01-4.75.07-1.15.05-1.77.24-2.18.4-.55.21-.94.47-1.35.88-.41.41-.67.8-.88 1.35-.16.41-.35 1.03-.4 2.18-.06 1.24-.07 1.61-.07 4.75s.01 3.51.07 4.75c.05 1.15.24 1.77.4 2.18.21.55.47.94.88 1.35.41.41.8.67 1.35.88.41.16 1.03.35 2.18.4 1.24.06 1.61.07 4.75.07s3.51-.01 4.75-.07c1.15-.05 1.77-.24 2.18-.4.55-.21.94-.47 1.35-.88.41-.41.67-.8.88-1.35.16-.41.35-1.03.4-2.18.06-1.24.07-1.61.07-4.75s-.01-3.51-.07-4.75c-.05-1.15-.24-1.77-.4-2.18-.21-.55-.47-.94-.88-1.35-.41-.41-.8-.67-1.35-.88-.41-.16-1.03-.35-2.18-.4-1.24-.06-1.61-.07-4.75-.07zm0 2.45a5.95 5.95 0 1 1 0 11.9 5.95 5.95 0 0 1 0-11.9zm0 9.81a3.86 3.86 0 1 0 0-7.72 3.86 3.86 0 0 0 0 7.72zm7.57-9.99a1.39 1.39 0 1 1-2.78 0 1.39 1.39 0 0 1 2.78 0z'/%3E%3C/svg%3E");
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
		-webkit-mask-size: contain;
		mask-size: contain;
		opacity: 0.75;
	}
}

/* ==================================================================
   フッター
   ================================================================== */

.sn-footer__logo {
	margin: 0 0 1.4rem;
	line-height: 0;
}

.sn-footer__logo img {
	max-block-size: 52px;
	max-inline-size: 150px;
}

.sn-footer p {
	color: color-mix(in srgb, var(--wp--preset--color--base) 82%, transparent);
}

.sn-footer__cta .wp-block-buttons {
	margin-block-start: 1rem;
}

.sn-footer__cta .wp-block-button {
	inline-size: 100%;
}

.sn-footer__cta .wp-block-button__link {
	display: block;
	inline-size: 100%;
	text-align: center;
}

@media (max-width: 781px) {
	.sn-footer {
		padding-block-end: calc(var(--sn-bar-h) + env(safe-area-inset-bottom) + var(--wp--preset--spacing--40)) !important;
	}
}

/* ==================================================================
   ナビゲーション
   PC：下線が伸びる。字間を動かすとガタつくので使わない。
   スマホ：全画面の墨地に、明朝で縦に積む。
   ================================================================== */

.sn-header .wp-block-navigation {
	--wp--style--block-gap: 0;
}

.sn-header .wp-block-navigation__container {
	gap: clamp(1rem, 0.4rem + 1.6vw, 2rem);
	align-items: center;
}

.sn-header .wp-block-navigation-item__content {
	position: relative;
	padding-block: 0.5em;
	font-size: 0.875rem;
	letter-spacing: 0.12em;
	transition: color 0.3s var(--sn-ease);
}

.sn-header .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	inset-block-end: 0;
	inset-inline-start: 0;
	inline-size: 0;
	block-size: 1px;
	background: var(--wp--preset--color--accent-1);
	transition: inline-size 0.35s var(--sn-ease);
}

.sn-header .wp-block-navigation-item__content:hover::after,
.sn-header .current-menu-item > .wp-block-navigation-item__content::after {
	inline-size: 100%;
}

/* フォーカスリングは細く、はみ出さない位置に */
.sn-header a:focus-visible {
	outline: 1px solid var(--wp--preset--color--accent-1);
	outline-offset: 6px;
	border-radius: 0;
}

/* --- ハンバーガー：1本＋影で3本線。当たり判定44px --- */
.wp-block-navigation__responsive-container-open {
	position: relative;
	inline-size: 44px;
	block-size: 44px;
	padding: 0;
	background: none;
	border: none;
}

.wp-block-navigation__responsive-container-open::before {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	inline-size: 24px;
	block-size: 1px;
	margin-block-start: -0.5px;
	margin-inline-start: -12px;
	background: currentColor;
	box-shadow: 0 -7px 0 currentColor, 0 7px 0 currentColor;
	transition: box-shadow 0.3s var(--sn-ease);
}

.wp-block-navigation__responsive-container-open:hover::before {
	box-shadow: 0 -8px 0 currentColor, 0 8px 0 currentColor;
}

.wp-block-navigation__responsive-container-open svg {
	display: none;
}

/* --- 開いた状態：全画面の墨地 --- */
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--accent-5) !important;
	color: var(--wp--preset--color--base) !important;
	padding: 4.5rem var(--wp--preset--spacing--40) 3rem !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	justify-content: center;
	align-items: center;
	inline-size: 100%;
}

.is-menu-open .wp-block-navigation__container {
	gap: 0 !important;
	align-items: center;
	inline-size: 100%;
	max-inline-size: 22rem;
}

.is-menu-open .wp-block-navigation-item {
	inline-size: 100%;
	border-block-end: 1px solid rgb(255 255 255 / 12%);
	opacity: 0;
	animation: sn-nav-in 0.5s var(--sn-ease) forwards;
}

.is-menu-open .wp-block-navigation-item:nth-child(1) { animation-delay: 0.05s; }
.is-menu-open .wp-block-navigation-item:nth-child(2) { animation-delay: 0.10s; }
.is-menu-open .wp-block-navigation-item:nth-child(3) { animation-delay: 0.15s; }
.is-menu-open .wp-block-navigation-item:nth-child(4) { animation-delay: 0.20s; }
.is-menu-open .wp-block-navigation-item:nth-child(5) { animation-delay: 0.25s; }
.is-menu-open .wp-block-navigation-item:nth-child(6) { animation-delay: 0.30s; }

@keyframes sn-nav-in {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: none; }
}

.is-menu-open .wp-block-navigation-item__content {
	display: block;
	inline-size: 100%;
	padding-block: 1.15em;
	font-family: var(--wp--preset--font-family--mincho);
	font-size: 1.125rem;
	letter-spacing: 0.24em;
	text-align: center;
	color: var(--wp--preset--color--base) !important;
}

.is-menu-open .wp-block-navigation-item__content::after {
	display: none;
}



/* 親テーマが現在地リンクに付ける下線と色を打ち消す。
   下線は擬似要素で引いているので、text-decoration は使わない。 */
.sn-header .wp-block-navigation a,
.sn-header .wp-block-navigation a:hover,
.sn-header .wp-block-navigation a:focus,
.sn-header .wp-block-navigation a:active,
.sn-header .wp-block-navigation .wp-block-navigation-item__content,
.sn-header .wp-block-navigation [aria-current] {
	text-decoration: none !important;
	text-underline-offset: 0;
}

.sn-header .wp-block-navigation [aria-current="page"],
.sn-header .wp-block-navigation [aria-current="page"] > .wp-block-navigation-item__content,
.sn-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.sn-header .wp-block-navigation .current_page_item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--base) !important;
}

/* 現在地の罫はアクセント色で1本だけ */
.sn-header .wp-block-navigation [aria-current="page"]::after,
.sn-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content::after,
.sn-header .wp-block-navigation .current_page_item > .wp-block-navigation-item__content::after {
	inline-size: 100%;
}

/* 現在地表示（テンプレート直書きのナビでも効くように） */
.sn-header .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content,
.sn-header .wp-block-navigation-item[aria-current] > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--base);
}

/* スマホのメニューを開いたとき、最後の項目の下に電話番号を出す */
@media (max-width: 781px) {
	.is-menu-open .wp-block-navigation__container::after {
		content: "03-4405-1479";
		display: block;
		inline-size: 100%;
		margin-block-start: 2rem;
		padding-block: 1em;
		border: 1px solid rgb(255 255 255 / 40%);
		font-family: var(--wp--preset--font-family--utility);
		font-size: 1.125rem;
		letter-spacing: 0.08em;
		text-align: center;
		color: var(--wp--preset--color--base);
		opacity: 0;
		animation: sn-nav-in 0.5s var(--sn-ease) 0.35s forwards;
	}
}

/* 閉じるボタン：×を2本の線で引く */
.wp-block-navigation__responsive-container-close {
	position: fixed !important;
	inset-block-start: 0.75rem !important;
	inset-inline-end: 0.75rem !important;
	inset-block-end: auto !important;
	inset-inline-start: auto !important;
	z-index: 10;
	inline-size: 44px;
	block-size: 44px;
	padding: 0;
	background: none;
	border: none;
	color: var(--wp--preset--color--base) !important;
}

.wp-block-navigation__responsive-container-close::before,
.wp-block-navigation__responsive-container-close::after {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	inline-size: 22px;
	block-size: 1px;
	margin-block-start: -0.5px;
	margin-inline-start: -11px;
	background: currentColor;
	transition: transform 0.35s var(--sn-ease);
}

.wp-block-navigation__responsive-container-close::before {
	transform: rotate(45deg);
}

.wp-block-navigation__responsive-container-close::after {
	transform: rotate(-45deg);
}

.wp-block-navigation__responsive-container-close:hover::before {
	transform: rotate(135deg);
}

.wp-block-navigation__responsive-container-close:hover::after {
	transform: rotate(45deg);
}

.wp-block-navigation__responsive-container-close svg {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.is-menu-open .wp-block-navigation-item {
		opacity: 1;
		animation: none;
	}
}

/* ==================================================================
   追従ヘッダー・トップへ戻る
   ================================================================== */

/* 追従は「テンプレートパーツの外枠」に付ける。
   .sn-header は親と同じ高さしかないため、そこに sticky を付けても効かない。 */
.wp-site-blocks > header,
header.wp-block-template-part {
	position: sticky;
	inset-block-start: 0;
	z-index: 100;
}

.sn-header {
	transition: padding 0.35s var(--sn-ease), box-shadow 0.35s var(--sn-ease);
}

/* sticky を壊す overflow を親側で作らない */
.wp-site-blocks,
.wp-site-blocks > main {
	overflow: visible;
}

/* 管理バーが出ているときはその下に貼り付く */
.admin-bar .wp-site-blocks > header,
.admin-bar header.wp-block-template-part {
	inset-block-start: 32px;
}

@media (max-width: 782px) {
	.admin-bar .wp-site-blocks > header,
	.admin-bar header.wp-block-template-part {
		inset-block-start: 46px;
	}
}

/* スクロール後は薄く縮める */
.sn-header.is-condensed {
	padding-block: 0.45rem;
	box-shadow: 0 1px 16px rgb(0 0 0 / 22%);
}

.sn-header .sn-logo img {
	transition: max-block-size 0.35s var(--sn-ease);
}

.sn-header.is-condensed .sn-logo img {
	max-block-size: 34px;
}

/* トップへ戻る */
.sn-totop {
	position: fixed;
	inset-inline-end: 20px;
	inset-block-end: 20px;
	z-index: 90;
	inline-size: 46px;
	block-size: 46px;
	padding: 0;
	border: 1px solid rgb(255 255 255 / 30%);
	border-radius: 0;
	background: var(--wp--preset--color--accent-5);
	color: var(--wp--preset--color--base);
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity 0.35s var(--sn-ease), transform 0.35s var(--sn-ease), visibility 0.35s;
}

.sn-totop.is-visible {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.sn-totop:hover {
	background: var(--wp--preset--color--accent-1);
	border-color: var(--wp--preset--color--accent-1);
}

/* スマホは固定予約バーの上に逃がす */
@media (max-width: 781px) {
	.sn-totop {
		inset-block-end: calc(var(--sn-bar-h) + env(safe-area-inset-bottom) + 16px);
		inset-inline-end: 14px;
		inline-size: 40px;
		block-size: 40px;
	}
}

@media print {
	.sn-totop {
		display: none;
	}
}

/* 追従ヘッダーぶん、アンカー着地位置をずらす */
:where(h1, h2, h3, section, div)[id] {
	scroll-margin-block-start: 90px;
}

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* ==================================================================
   セクション間の隙間を殺す
   ブロックギャップが全幅セクションの間に白い帯を作るので、
   最上位の要素だけ余白をゼロにする（各セクションは自前のpaddingを持つ）。
   ================================================================== */

.wp-site-blocks > * {
	margin-block-start: 0;
}

.wp-site-blocks > main > *,
.wp-site-blocks > main > * + * {
	margin-block-start: 0;
	margin-block-end: 0;
}

.sn-hero,
.sn-strip {
	margin-block: 0 !important;
}

.sn-header + *,
.sn-header {
	margin-block: 0 !important;
}

/* ==================================================================
   hero：写真だけ。文字は乗せない。
   ================================================================== */

.sn-hero {
	align-items: flex-end;
	position: relative;
}

.sn-hero .wp-block-cover__inner-container {
	inline-size: 100%;
}

/* 下端だけごく薄く落として、次のセクションへ視線を送る */
.sn-hero::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	block-size: 22%;
	background: linear-gradient(to bottom, transparent, rgb(25 23 21 / 55%));
	pointer-events: none;
}

.sn-hero {
	min-height: 58vh !important;
}

@media (max-width: 781px) {
	.sn-hero {
		min-height: 46vh !important;
	}
}

/* hero直下の予約帯 */
.sn-strip__inner {
	gap: var(--wp--preset--spacing--30);
}

.sn-strip__text {
	margin: 0;
	color: var(--wp--preset--color--base);
	font-size: 0.875rem;
	letter-spacing: 0.14em;
}

.sn-strip .wp-block-buttons {
	gap: 10px;
}

.sn-strip .wp-block-button__link {
	padding-block: 0.85em;
	padding-inline: 1.6em;
	font-size: 0.8125rem;
}

@media (max-width: 781px) {
	.sn-strip__inner {
		justify-content: center;
		text-align: center;
	}
	.sn-strip__text {
		flex: 1 0 100%;
		text-align: center;
		font-size: 0.75rem;
	}
}

/* ==================================================================
   セクションの型
   ================================================================== */

.sn-eyebrow {
	font-family: var(--wp--preset--font-family--utility);
	font-size: 0.6875rem;
	letter-spacing: 0.34em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-2);
	margin-block-end: 0.9em;
}

.sn-sec--dark .sn-eyebrow {
	color: color-mix(in srgb, var(--wp--preset--color--base) 55%, transparent);
}

.sn-title {
	position: relative;
	font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
	letter-spacing: 0.16em;
	margin-block: 0 1.8em;
	padding-block-end: 0.9em;
}

.sn-title::after {
	content: "";
	position: absolute;
	inset-block-end: 0;
	inset-inline-start: 0;
	inline-size: 2.75rem;
	block-size: 1px;
	background: var(--wp--preset--color--accent-1);
}

/* 導入 */
.sn-intro__lead {
	font-family: var(--wp--preset--font-family--mincho);
	font-size: clamp(1.375rem, 1.15rem + 1.1vw, 2rem);
	letter-spacing: 0.2em;
	line-height: 2;
	margin-block-end: 1.6em;
}

/* 「もっと見る」リンク：ボタンにせず、罫と矢印で */
.sn-more {
	margin-block-start: var(--wp--preset--spacing--40);
	font-size: 0.8125rem;
	letter-spacing: 0.14em;
}

.sn-more a {
	display: inline-block;
	padding-block-end: 0.5em;
	border-block-end: 1px solid currentColor;
	transition: opacity 0.3s var(--sn-ease), letter-spacing 0.3s var(--sn-ease);
}

.sn-more a::after {
	content: " →";
}

.sn-more a:hover {
	letter-spacing: 0.2em;
}

.sn-sec--dark .sn-more a,
.sn-sec--dark h3,
.sn-sec--dark p {
	color: var(--wp--preset--color--base);
}

/* 個室：3枚を段差で置く */
.sn-rooms-grid {
	gap: var(--wp--preset--spacing--40);
}

.sn-rooms-grid .wp-block-image img {
	aspect-ratio: 3 / 4;
	object-fit: cover;
	inline-size: 100%;
}

.sn-idx {
	font-family: var(--wp--preset--font-family--utility);
	font-size: 0.6875rem;
	letter-spacing: 0.2em;
	color: var(--wp--preset--color--accent-1);
	margin-block: 1.2em 0.4em;
}

@media (min-width: 782px) {
	.sn-rooms-grid > .wp-block-column:nth-child(2) {
		margin-block-start: var(--wp--preset--spacing--50);
	}
	.sn-rooms-grid > .wp-block-column:nth-child(3) {
		margin-block-start: calc(var(--wp--preset--spacing--50) * 2);
	}
}

/* コース：写真に文字の面を重ねる */
.sn-feature {
	position: relative;
}

.sn-feature__img img {
	aspect-ratio: 21 / 9;
	object-fit: cover;
	inline-size: 100%;
}

.sn-feature__card {
	background: var(--wp--preset--color--base);
	padding: var(--wp--preset--spacing--50);
	max-inline-size: 34rem;
}

@media (min-width: 782px) {
	.sn-feature__card {
		margin-block-start: -7rem;
		margin-inline-start: max(var(--wp--preset--spacing--40), calc((100% - var(--wp--style--global--wide-size)) / 2 + 3rem));
		position: relative;
		z-index: 1;
	}
}

@media (max-width: 781px) {
	.sn-feature__card {
		margin-block-start: -2.5rem;
		margin-inline: var(--wp--preset--spacing--30);
		padding: var(--wp--preset--spacing--40);
	}
}

/* コースページ先頭の写真 */
.sn-course-hero img {
	aspect-ratio: 16 / 9;
	object-fit: cover;
	inline-size: 100%;
}

/* 品名の副題（～和牛・うに・いくら～ の部分） */
.sn-sub {
	color: var(--wp--preset--color--accent-3);
	letter-spacing: 0.1em;
	margin-block: 0.5em 1em;
}

.sn-sub::before { content: "\301C"; }
.sn-sub::after  { content: "\301C"; }

/* 名物 */
.sn-dishes .wp-block-image img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	inline-size: 100%;
}

.sn-dishes h3 {
	margin-block: 1em 0.3em;
}

/* 塗りボタン：予約導線だけに使う */
.wp-block-button.is-style-fill .wp-block-button__link {
	background-color: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.wp-block-button.is-style-fill .wp-block-button__link:hover,
.wp-block-button.is-style-fill .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--accent-1);
	border-color: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--base);
}

/* 段組みの中のボタンは幅をそろえる（旧コンテンツの3カラム対策） */
.wp-block-columns .wp-block-buttons {
	justify-content: center;
}

.wp-block-columns .wp-block-button {
	inline-size: 100%;
}

.wp-block-columns .wp-block-button__link {
	display: block;
	inline-size: 100%;
	text-align: center;
	padding-inline: 1em;
}

/* 段組みの写真は縦横比をそろえる */
.wp-block-columns .wp-block-image:not(.sn-logo):not(.sn-footer__logo) img {
	inline-size: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* ロゴは絶対に切り抜かない */
.sn-logo img,
.sn-footer__logo img {
	aspect-ratio: auto !important;
	object-fit: contain !important;
	inline-size: auto !important;
}

/* 段組みの説明文は中央揃えの見出しに引きずられないよう左揃えで固定 */
.wp-block-columns .wp-block-column > p {
	text-align: start;
}

/* 旧コンテンツの大きな1枚画像は幅いっぱいまで使わせる */
.wp-block-image.size-full img {
	inline-size: 100%;
	block-size: auto;
}

/* ==================================================================
   10. 品質の下限
   ================================================================== */

:where(a):focus-visible,
:where(button):focus-visible,
:where(input, select, textarea):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-1);
	outline-offset: 3px;
	border-radius: 1px;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

@media (max-width: 600px) {
	.is-style-tategaki {
		max-block-size: 13em;
		letter-spacing: 0.16em;
	}
}

@media print {
	.wp-block-navigation,
	.wp-site-blocks > footer {
		display: none;
	}
	body {
		background: #fff;
		color: #000;
	}
}