@charset "UTF-8";
/* ============================================================
   ヨンパチ - style.css
   叩き台 v1 / 2026-09
   ------------------------------------------------------------
   デザインの差し替えは【1】デザイントークンのみ触れば足ります。
   色・書体・角丸・余白・最大幅を全部ここで一元管理しています。
   ============================================================ */

/* ============================================================
   【1】デザイントークン  ← ここだけ差し替えれば全体が変わる
   ============================================================ */
:root {
  /* --- 色：ベース（炭色＋わずかに暖色。真っ黒にしない） ------ */
	--c-bg: #14110E;		/* 背景 */
	--c-bg-2: #1B1714;		/* 背景（段違い） */
	--c-surface: #241F1B;	/* カード面 */
	--c-surface-2: #2E2822;	/* カード面（明） */
	--c-line: #3B332C;		/* 罫線 */
	--c-line-2: #4E443B;	/* 罫線（強） */
  /* --- 色：文字 -------------------------------------------- */
	--c-text: #F3EEE7;
	--c-text-2: #C4BAAD;
	--c-muted: #9C9084;
  /* --- 色：アクセント --------------------------------------- */
	--c-accent: #D24B2B;	/* 朱 - CTA・強調 */
	--c-accent-dark: #A93A1F;	
	--c-gold: #C9A227;		/* 金 - シール／キラ表現 */
	--c-food: #E8A33D;		/* 飲食まわりの差し色 */
	--c-on-accent: #FFFFFF;	/* 朱・金の上に乗る文字 */
  /* --- 色：ライト面（料理を明るく抜くための反転ブロック） ---- */
	--c-light-bg: #F5F1EA;
	--c-light-text: #1C1815;
	--c-light-text-2: #5A5148;	/* 明るい面の本文2次 */
	--c-light-muted: #6E6152;	/* 明るい面のラベル・注記 */
	--c-light-line: #D3C9BA;	/* 明るい面の罫線 */
	--c-light-line-2: #C8BEB0;	/* 明るい面の罫線（強） */
	--c-light-surface: #EAE3D8;	/* 明るい面のホバー地 */
  /* --- 書体 ------------------------------------------------- */
	--f-serif: "Shippori Mincho B1", "Yu Mincho", "YuMincho", serif;
	--f-sans: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Noto Sans JP", system-ui, sans-serif;
	--f-mono: "Roboto Mono", ui-monospace, monospace;
  /* --- 文字サイズ（流体） ----------------------------------- */
	--fs-hero: 60px;
	--fs-h2: 34px;
	--fs-h3: 22px;
	--fs-lead: 19px;		/* リード文 */
	--fs-body: 17px;		/* 本文の基準 */
	--fs-small: 15.5px;		/* 補助テキスト */
	--fs-meta: 12px;		/* 欧文モノの見出し・日付 */
	--fs-label: 11.5px;
  /* --- 余白・レイアウト ------------------------------------- */
	--sp-section: 128px;	/* セクション間 */
	--sp-block: 48px;		/* ブロック間 */
	--gutter: 32px;			/* 左右の余白 */
	--w-max: 1180px;		/* コンテンツ最大幅 */
	--w-narrow: 760px;		/* 読み物幅 */
  /* --- 形 --------------------------------------------------- */
	--r-sm: 3px;
	--r-md: 5px;
	--r-lg: 8px;
	--border: 1px solid var(--c-line);
  /* --- その他 ------------------------------------------------ */
	--header-h: 62px;
	--ease: cubic-bezier(.22,.61,.36,1);
	--shadow: 0 2px 4px rgba(0,0,0,.4), 0 18px 40px -24px rgba(0,0,0,.9);
  /* --- 半透明の面（テーマで切り替わる） ---------------------- */
	--c-header-bg: rgba(20,17,14,.92);	/* スクロール後のヘッダー */
	--c-bar-bg: rgba(20,17,14,.96);		/* SP固定バー */
  /* 写真の上に敷く暗幕。テーマに関係なく常に暗い（写真の上の文字は常に白） */
	--c-ink-rgb: 20,17,14;
  /* --- 和紙の質感（背景の面にごく薄く重ねる） ---------------- */
	--tex-main: url("images/bg/washi-dark-fiber.webp");		/* メインの面：繊維入り */
	--tex-sub: url("images/bg/washi-dark-plain.webp");		/* 段違いの面：細かい紙肌 */
	--tex-paper: url("images/bg/washi-light-plain.webp");	/* お品書きの明るい面 */
	--tex-size: auto;
   /* 等倍で敷く（拡大縮小すると継ぎ目が出やすい） */
	--tex-strength: .1;
 /* ★ 和紙の濃さ。0 で無し、.08 で「よく見ると分かる」、.15 で「はっきり分かる」 */
	color-scheme: dark;
}

/* ============================================================
   【1-2】白背景テーマ  ← <html data-theme="light"> で切り替わる
   ------------------------------------------------------------
   色の役割は黒背景と同じ。値だけ入れ替えている。
   どの組み合わせもコントラスト 4.5:1 以上（docs/implementation.md 2章）
   ============================================================ */
:root[data-theme="light"] {
	--c-bg: #F7F3EC;			/* 生成りの紙色。真っ白にしない */
	--c-bg-2: #EFE8DD;
	--c-surface: #FFFDF9;
	--c-surface-2: #F1EBE1;
	--c-line: #DDD3C4;
	--c-line-2: #C4B8A6;
	--c-text: #1C1815;			/* 墨 */
	--c-text-2: #4A423A;
	--c-muted: #6B5F51;
	--c-accent: #B83C1D;		/* 朱。白地で読める濃さに */
	--c-accent-dark: #962F16;
	--c-gold: #82650F;			/* 金。白地では沈めないと読めない */
	--c-food: #9A5410;			/* お品書きの「明るく抜く」面は、白地の上ではさらに白く抜く */
	--c-light-bg: #FFFFFF;
	--c-header-bg: rgba(247,243,236,.92);
	--c-bar-bg: rgba(247,243,236,.96);
	--shadow: 0 2px 4px rgba(28,24,21,.06), 0 18px 40px -24px rgba(28,24,21,.30);
	--tex-main: url("images/bg/washi-light-fiber.webp");
	--tex-sub: url("images/bg/washi-light-plain.webp");
	color-scheme: light;
}

/* 写真の上だけは白背景テーマでも黒背景の配色を保つ（トップのヒーローと、その上の透過ヘッダー）
   ※ 冒頭【1】の黒背景の値を変えたら、ここも同じ値に揃えること */
:root[data-theme="light"] .hero,
:root[data-theme="light"] .index .header:not(.is-scrolled) {
	--c-bg: #14110E;
	--c-bg-2: #1B1714;
	--c-surface: #241F1B;
	--c-surface-2: #2E2822;
	--c-line: #3B332C;
	--c-line-2: #4E443B;
	--c-text: #F3EEE7;
	--c-text-2: #C4BAAD;
	--c-muted: #9C9084;
	--c-accent: #D24B2B;
	--c-accent-dark: #A93A1F;
	--c-food: #E8A33D;
	color: var(--c-text);	/* body から継承した墨色を、ここで白に引き直す */
}
/* 写真の無いページでは、透過ヘッダーの暗幕を消す（白地に黒い帯が出るため） */
:root[data-theme="light"] body:not(.index) .header::before {
	opacity: 0
}

@media (max-width:799px){
	:root {
	  /* --- 文字サイズ（流体） ----------------------------------- */
		--fs-hero: 28px;
		--fs-h2: 22px;
		--fs-h3: 19px;
		--fs-lead: 16.5px;		/* リード文 */
		--fs-body: 16px;		/* 本文の基準 */
		--fs-small: 14.5px;		/* 補助テキスト */
		--fs-meta: 12px;		/* 欧文モノの見出し・日付 */
		--fs-label: 11.5px;
	  /* --- 余白・レイアウト ------------------------------------- */
		--sp-section: 64px;		/* セクション間 */
		--sp-block: 28px;		/* ブロック間 */
		--gutter: 18px;			/* 左右の余白 */
		--w-max: 390px;			/* コンテンツ最大幅 */
		--w-narrow: 370px;		/* 読み物幅 */
	}
}

/* ============================================================
   【2】リセット
   ============================================================ */
*,*::before,*::after {
	box-sizing: border-box
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth
}

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

	* {
		animation-duration: .001ms!important;
		animation-iteration-count: 1!important;
		transition-duration: .001ms!important
	}
}

body {
	margin: 0;
	background: var(--c-bg);
	color: var(--c-text);
	font-family: var(--f-sans);
	font-size: var(--fs-body);
	line-height: 1.9;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

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

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

button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	cursor: pointer
}

h1,h2,h3,h4,p,ul,ol,figure,dl {
	margin: 0
}

ul,ol {
	padding: 0;
	list-style: none
}

:focus-visible {
	outline: 2px solid var(--c-accent);
	outline-offset: 3px;
	border-radius: 2px
}

/* ============================================================
   【3】共通ユーティリティ
   ============================================================ */
.container {
	width: 100%;
	max-width: var(--w-max);
	margin-inline: auto;
	padding-inline: var(--gutter)
}

.container--narrow {
	max-width: var(--w-narrow)
}

.section {
	padding-block: var(--sp-section)
}

.section--light {
	background: var(--c-light-bg);
	color: var(--c-light-text)
}

.section--alt {
	background: var(--c-bg-2)
}

/* 帯として使う薄いセクション */
.section--slim {
	padding-block: 30px
}
@media (max-width:799px){
	.section--slim {
		padding-block: 20px
	}
}
/* 営業情報バーの補足行：席数・ひとり客の可否など、初期表示で答えるべき短文 */
.barNote {
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid var(--c-line);
	font-size: var(--fs-small);
	color: var(--c-text-2);
	line-height: 1.85
}

.barNote a {
	color: var(--c-food);
	border-bottom: 1px solid currentColor;
	padding-bottom: 1px;
	white-space: nowrap
}

.barNote a:hover {
	color: var(--c-text)
}

.skip {
	position: absolute;
	left: -9999px
}

.skip:focus {
	left: 8px;
	top: 8px;
	z-index: 200;
	background: var(--c-accent);
	color: var(--c-on-accent);
	padding: 8px 14px;
	border-radius: var(--r-sm)
}

.label {
	font-family: var(--f-mono);
	font-size: var(--fs-label);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--c-muted);
	display: block;
	margin-bottom: 14px;
}

.section--light .label {
	color: var(--c-light-muted)
}

.h2 {
	font-family: var(--f-serif);
	font-size: var(--fs-h2);
	font-weight: 700;
	line-height: 1.45;
	letter-spacing: .02em;
	text-wrap: balance
}

.h3 {
	font-family: var(--f-serif);
	font-size: var(--fs-h3);
	font-weight: 700;
	line-height: 1.6
}

.lead {
	color: var(--c-text-2);
	margin-top: 16px;
	font-size: var(--fs-lead);
	line-height: 1.95
}

.section--light .lead {
	color: var(--c-light-text-2)
}

/* ボタン */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 13px 26px;
	border-radius: var(--r-sm);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .04em;
	border: 1.5px solid var(--c-line-2);
	color: var(--c-text);
	transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
	cursor:pointer;
}

.btn:hover {
	background: var(--c-surface-2);
	border-color: var(--c-text-2)
}

.btn--primary {
	background: var(--c-accent);
	border-color: var(--c-accent);
	color: var(--c-on-accent)
}

.btn--primary:hover {
	background: var(--c-accent-dark);
	border-color: var(--c-accent-dark);
	color: var(--c-on-accent)
}

.btn--ghost {
	border-color: currentColor
}

.section--light .btn {
	border-color: var(--c-light-line-2);
	color: var(--c-light-text)
}

.section--light .btn:hover {
	background: var(--c-light-surface)
}

.section--light .btn--primary {
	background: var(--c-accent);
	border-color: var(--c-accent);
	color: var(--c-on-accent)
}

.btn__arrow {
	font-family: var(--f-mono);
	font-size: 13px
}

/* 画像枠 */
.media {
	position: relative;
	overflow: hidden;
	border-radius: var(--r-md);
	background: var(--c-surface)
}

.media img {
	width: 100%;
	height: 100%;
	object-fit: cover
}

.media--sq {
	aspect-ratio: 1/1
}

.media--43 {
	aspect-ratio: 4/3
}

.media--169 {
	aspect-ratio: 16/9
}

.media--34 {
	aspect-ratio: 3/4
}
/* 資料スキャン：切り取らずに全体を見せる（横長・細長が混在するため） */
.media--sheet {
	background: var(--c-bg-2)
}

.media--sheet img {
	object-fit: contain
}

.media--archive {
	aspect-ratio: auto
}

.media--archive img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain
}

.media--archive-feature {
	max-width: 560px;
	margin-inline: auto
}
/* 歴史資料は会社名や商品情報を含め、常に全体を表示する。 */
.js .reveal .media--archive img,
.js .reveal.is-visible .media--archive img {
	transform: none
}

/* 48mm＝正方形をレイアウト基準にする */
.square {
	aspect-ratio: 1/1
}

/* ============================================================
   【4】ヘッダー / ナビ
   ============================================================ */
.header {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 100;
	height: var(--header-h);
	display: flex;
	align-items: center;
	background: transparent;
	transition: background .3s var(--ease), border-color .3s var(--ease);
	border-bottom: 1px solid transparent;
}
/* 透過時：写真の上でもロゴ・ナビが必ず読めるよう、上部に薄いスクリムを敷く */
.header::before {
	content: "";
	position: absolute;
	inset: 0 0 -28px 0;
	z-index: -1;
	pointer-events: none;
	background: linear-gradient(to bottom, rgba(var(--c-ink-rgb),.72), rgba(var(--c-ink-rgb),0));
	transition: opacity .3s var(--ease);
}

.header.is-scrolled::before {
	opacity: 0
}

.header.is-scrolled {
	background: var(--c-header-bg);
	backdrop-filter: blur(10px);
	border-bottom-color: var(--c-line)
}

.header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	width: 100%;
	max-width: var(--w-max);
	margin-inline: auto;
	padding-inline: var(--gutter)
}

/* ロゴ：確定したら .logo の中身を <img> に差し替え */
.logo {
	display: inline-flex;
	align-items: baseline;
	gap: 9px;
	font-family: var(--f-serif);
	font-weight: 700;
	font-size: 19px;
	letter-spacing: .14em
}

.logo__sub {
	font-family: var(--f-mono);
	font-size: 11px;
	letter-spacing: .16em;
	color: var(--c-muted)
}

.nav__list {
	display: flex;
	align-items: center;
	gap: 14px
}
@media (max-width:799px){
	.nav__list {
		gap: 28px
	}
}

.nav__list a {
	font-size: var(--fs-small);
	font-weight: 500;
	letter-spacing: .06em;
	color: var(--c-text-2);
	transition: color .2s var(--ease);
	position: relative;
	padding-block: 6px
}

.nav__list a:hover {
	color: var(--c-text)
}

.nav__list a[aria-current="page"] {
	color: var(--c-text)
}

.nav__list a[aria-current="page"]::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1.5px;
	background: var(--c-accent)
}

.nav__list .is-primary {
	color: var(--c-food)
}

.nav {
	margin-left: auto
}
/* テーマ切り替え（白背景／黒背景） */
.themeToggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-left: 28px;
	padding: 7px 12px;
	border: 1px solid var(--c-line-2);
	border-radius: 999px;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .06em;
	color: var(--c-text-2);
	transition: color .2s var(--ease), border-color .2s var(--ease);
	white-space: nowrap;
}
@media (max-width:799px){
	.themeToggle {
		margin-left: 16px
	}
}

.themeToggle:hover {
	color: var(--c-text);
	border-color: var(--c-text-2)
}

.themeToggle__dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	border: 1.5px solid currentColor;
	background: linear-gradient(90deg, currentColor 50%, transparent 50%)
}

.navToggle {
	display: none;
	width: 42px;
	height: 42px;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--c-line-2);
	border-radius: var(--r-sm)
}

.navToggle span {
	display: block;
	width: 18px;
	height: 1.5px;
	background: var(--c-text);
	position: relative;
	transition: background .2s
}

.navToggle span::before,.navToggle span::after {
	content: "";
	position: absolute;
	left: 0;
	width: 18px;
	height: 1.5px;
	background: var(--c-text);
	transition: transform .28s var(--ease)
}

.navToggle span::before {
	top: -6px
}

.navToggle span::after {
	top: 6px
}

.navToggle[aria-expanded="true"] span {
	background: transparent
}

.navToggle[aria-expanded="true"] span::before {
	transform: translateY(6px) rotate(45deg)
}

.navToggle[aria-expanded="true"] span::after {
	transform: translateY(-6px) rotate(-45deg)
}

@media (max-width:799px){
	.navToggle {
		display: flex
	}

	.themeToggle {
		margin-left: auto
	}

	.nav {
		position: fixed;
		inset: var(--header-h) 0 0 0;
		background: var(--c-bg);
		padding: 32px var(--gutter) 120px;
		overflow-y: auto;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-8px);
		transition: opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
	}

	.nav.is-open {
		opacity: 1;
		visibility: visible;
		transform: none
	}

	.nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0
	}

	.nav__list li {
		border-bottom: 1px solid var(--c-line)
	}

	.nav__list a {
		display: block;
		padding: 18px 4px;
		font-size: var(--fs-body)
	}

	.nav__list a[aria-current="page"]::after {
		display: none
	}
}

/* ============================================================
   【5】ヒーロー
   ============================================================ */
.hero {
	position: relative;
	min-height: min(84vh,760px);
	display: flex;
	align-items: flex-end;
	padding-top: var(--header-h);
	overflow: hidden
}

.hero__media {
	position: absolute;
	inset: 0;
	z-index: 0
}

.hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover
}

.hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(var(--c-ink-rgb),.94) 6%, rgba(var(--c-ink-rgb),.55) 46%, rgba(var(--c-ink-rgb),.30) 100%);
}

.hero__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	padding-block: 84px
}
/* ヒーローのブランド表示：ロゴ＋業態表記（キャッチコピーの代わり） */
.hero__brand {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 18px
}

.hero__type {
	font-family: var(--f-sans);
	font-size: 16px;
	font-weight: 500;
	letter-spacing: .42em;
	text-indent: .42em;
	color: var(--c-text-2);
}

.hero__logo {
	font-family: var(--f-serif);
	font-size: var(--fs-hero);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: .16em;
	text-indent: .16em;
}
/* ロゴ画像に差し替えたとき（span → img）も同じ見え方になるように */
img.hero__logo {
	width: auto;
	height: 108px;
	letter-spacing: normal;
	text-indent: 0
}

.hero__text {
	margin-top: 20px;
	color: var(--c-text-2);
	font-size: 17px
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 32px
}

.hero__scroll {
	position: absolute;
	right: var(--gutter);
	bottom: 26px;
	z-index: 1;
	font-family: var(--f-mono);
	font-size: 11px;
	letter-spacing: .2em;
	color: var(--c-muted);
	writing-mode: vertical-rl
}

@media (max-width:799px){
	.hero {
		min-height: 78vh
	}

	.hero__scroll {
		display: none
	}
	.hero__inner {
		padding-block: 40px
	}
	/* ヒーローのブランド表示：ロゴ＋業態表記（キャッチコピーの代わり） */
	.hero__brand {
		gap: 10px
	}
	.hero__type {
		font-size: 13px
	}
	/* ロゴ画像に差し替えたとき（span → img）も同じ見え方になるように */
	img.hero__logo {
		height: 54px
	}
	.hero__text {
		font-size: 15px
	}
}

/* ============================================================
   【6】体験3ステップ（飲食が起点であることを示す）
   ============================================================ */
.steps {
	display: grid;
	grid-template-columns: repeat(3,1fr);
	gap: 28px;
	margin-top: var(--sp-block);
	counter-reset: step
}

.step {
	position: relative;
	counter-increment: step
}

.step::before {
	content: "0" counter(step);
	font-family: var(--f-mono);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .14em;
	color: var(--c-accent);
	display: block;
	margin-bottom: 12px;
}
/* ステップ間の矢印 */
.step:not(:last-child)::after {
	content: "";
	position: absolute;
	top: calc(50% + 6px);
	right: calc(var(--arrow-offset,-1) * 1px);
	right: -16px;
	width: 11px;
	height: 11px;
	border-top: 1.5px solid var(--c-line-2);
	border-right: 1.5px solid var(--c-line-2);
	transform: rotate(45deg);
}

.step__title {
	font-family: var(--f-serif);
	font-size: 23px;
	font-weight: 700;
	margin-top: 16px
}

.step__text {
	font-size: var(--fs-small);
	color: var(--c-text-2);
	margin-top: 8px;
	line-height: 1.85
}

@media (max-width:799px){
	.steps {
		grid-template-columns: 1fr;
		gap: 34px
	}

	.step:not(:last-child)::after {
		top: auto;
		bottom: -24px;
		right: auto;
		left: calc(50% - 6px);
		transform: rotate(135deg)
	}

	.step__title {
		font-size: 19px;
	}
}

/* ============================================================
   【7】お品書き（明るく抜くブロック）
   ============================================================ */
.dish {
	display: grid;
	grid-template-columns: repeat(2,1fr);
	gap: 36px;
	margin-top: var(--sp-block)
}
@media (max-width:799px){
	.dish {
		grid-template-columns: 1fr;
		gap: 16px
	}
}

.dashiScene {
	margin-top: var(--sp-block);
	overflow: hidden;
	border-radius: var(--r-md);
	background: var(--c-light-surface)
}

.dashiScene__placeholder {
	aspect-ratio: 16/7;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	padding: 28px;
	border: 1px solid var(--c-light-line);
	text-align: center;
	color: var(--c-light-text-2);
	background: radial-gradient(ellipse at 50% 100%,var(--c-light-bg),transparent 75%)
}
.dashiScene__placeholder span {
	font-family: var(--f-serif);
	font-size: 30px;
	letter-spacing: .1em
}

.dashiScene__placeholder small {
	font-size: var(--fs-small);
	color: var(--c-light-muted)
}
@media (max-width:799px){
	.dashiScene__placeholder {
		aspect-ratio: 4/3
	}
	.dashiScene__placeholder span {
		font-size: 20px
	}
}

.dashiScene img {
	display: block;
	width: 100%;
	height: auto
}

.dashiScene__caption {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px 24px;
	padding: 14px 20px;
	color: var(--c-light-text-2);
	font-family: var(--f-serif);
	font-size: var(--fs-body)
}

.dashiScene__caption small {
	font-family: var(--f-sans);
	font-size: var(--fs-small);
	color: var(--c-light-muted)
}

.dashiIntro {
	margin-top: 64px
}

.dish__item .media {
	border-radius: var(--r-md)
}

.dish__name {
	font-family: var(--f-serif);
	font-size: 24px;
	font-weight: 700;
	margin-top: 18px
}

.dish__note {
	font-size: var(--fs-small);
	color: var(--c-light-text-2);
	margin-top: 6px
}
@media (max-width:799px){
	.dashiIntro {
		margin-top:36px
	}
	.dish__name {
		font-size: 20px;
	}
}

.section:not(.section--light) .dish__note {
	color: var(--c-text-2)
}

/* 品書きの表 */
.pricelist {
	display: grid;
	grid-template-columns: repeat(2,1fr);
	gap: 56px;
	margin-top: var(--sp-block)
}
@media (max-width:799px){
	.pricelist {
		grid-template-columns: 1fr;
		gap: 20px
	}
}

.pricelist h3 {
	font-family: var(--f-mono);
	font-size: var(--fs-label);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--c-light-muted);
	margin-bottom: 12px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--c-light-line)
}

.pricelist li {
	padding-block: 13px;
	border-bottom: 1px dotted var(--c-light-line);
	font-size: var(--fs-body)
}
.pricelist li .flex {
	display: flex;
	align-items: baseline;
	gap: 12px;
}
.pricelist li .flex span:first-child {
	flex: 1
}

.pricelist li .price {
	font-family: var(--f-mono);
	font-variant-numeric: tabular-nums;
	font-size: var(--fs-body);
	color: var(--c-light-text-2)
}
.pricelist li .notes {
	font-size: var(--fs-small);
	color: var(--c-light-muted);
	padding-left: 1em;
}


/* ============================================================
   【8】シール
   ============================================================ */
/* シールカード（表のみ。裏面は見せない） */
.sealCard {
	background: var(--c-surface);
	border: var(--border);
	border-radius: var(--r-md);
	padding: 22px
}
@media (max-width:799px){
	.sealCard {
		padding: 14px
	}
}

.sealCard__media {
	position: relative;
	aspect-ratio: 1/1;
	border-radius: var(--r-sm);
	overflow: hidden;
	background: var(--c-bg-2)
}

.sealCard__media img {
	width: 100%;
	height: 100%;
	object-fit: cover
}

.sealCard__name {
	font-family: var(--f-serif);
	font-size: var(--fs-h3);
	font-weight: 700;
	margin-top: 16px
}

.sealCard__meta {
	font-family: var(--f-mono);
	font-size: var(--fs-meta);
	letter-spacing: .1em;
	color: var(--c-muted);
	margin-top: 4px
}

.sealCard__body {
	font-size: var(--fs-small);
	color: var(--c-text-2);
	margin-top: 12px
}

/* カタログ早見表：3カラム。1枚あたり最大500px */
.sealGrid {
	display: grid;
	grid-template-columns: repeat(3,minmax(0,1fr));
	gap: 28px;
	margin-top: var(--sp-block);
	max-width: calc(500px * 3 + 28px * 2);
}
@media (max-width:799px){
	.sealGrid {
		grid-template-columns: repeat(2,minmax(0,1fr));
		gap: 14px;
	}
}

/* 2枚組で見せるとき（第1弾ページなど） */
.sealGrid--2 {
	grid-template-columns: repeat(2,minmax(0,1fr));
	max-width: calc(500px * 2 + 28px)
}
/* 図鑑への導線タイル */
.sealCard--more {
	display: block;
	transition: border-color .25s var(--ease), transform .25s var(--ease)
}

.sealCard--more:hover {
	border-color: var(--c-line-2);
	transform: translateY(-3px)
}

.sealCard--more .sealCard__media {
	display: grid;
	place-items: center
}

.sealCard__moreMark {
	font-family: var(--f-serif);
	font-size: var(--fs-h2);
	font-weight: 700;
	color: var(--c-line-2)
}

/* キラ表現（画像の上に薄く重ねる） */
.prism {
	position: relative
}

.prism::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	mix-blend-mode: screen;
	opacity: .34;
	background: linear-gradient(114deg,
    transparent 42%,
    rgba(201,162,39,.30) 47%,
    rgba(255,255,255,.42) 50%,
    rgba(90,180,200,.30) 53%,
    transparent 58%);
	background-size: 300% 100%;
	background-position: 14% 0;
	transition: background-position 1.1s var(--ease), opacity .5s var(--ease);
}

.prism:hover::after {
	background-position: 86% 0;
	opacity: .5
}

@media (prefers-reduced-motion:reduce) {
	.prism::after {
		transition: none
	}
}

/* 図鑑：シリーズごとのまとまり */
.zukanGroup {
	margin-top: 4.5vw
}

.zukanGroup + .zukanGroup {
	margin-top: 80px
}
@media (max-width:799px){
	.zukanGroup {
		margin-top: 32px
	}
	.zukanGroup + .zukanGroup {
		margin-top: 44px)
	}
}

.zukanGroup__title {
	display: flex;
	align-items: baseline;
	gap: 16px;
	flex-wrap: wrap;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--c-line);
	font-family: var(--f-serif);
	font-size: var(--fs-h3);
	font-weight: 700;
}

.zukanGroup__date {
	font-family: var(--f-mono);
	font-size: var(--fs-meta);
	letter-spacing: .1em;
	color: var(--c-muted);
	font-weight: 400
}

.zukanGroup .volumes {
	margin-top: 30px
}

/* 図鑑の一覧 */
.volumes {
	display: grid;
	grid-template-columns: repeat(4,1fr);
	gap: 20px;
	margin-top: var(--sp-block)
}
.volume {
	display: block;
	background: var(--c-surface);
	border: var(--border);
	border-radius: var(--r-md);
	padding: 14px;
	transition: border-color .25s var(--ease), transform .25s var(--ease)
}
@media (max-width:799px){
	.zukanGroup .volumes {
		margin-top: 18px
	}
	.volumes {
		grid-template-columns: repeat(2,1fr);
		gap: 20px
	}
}

.volume:hover {
	border-color: var(--c-line-2);
	transform: translateY(-3px)
}

.volume__media {
	aspect-ratio: 1/1;
	border-radius: var(--r-sm);
	overflow: hidden;
	background: var(--c-bg-2);
	display: grid;
	place-items: center
}

.volume__media img {
	width: 100%;
	height: 100%;
	object-fit: cover
}

.volume__q {
	font-family: var(--f-serif);
	font-size: 34px;
	color: var(--c-line-2)
}

.volume__no {
	font-family: var(--f-serif);
	font-size: var(--fs-h3);
	font-weight: 700;
	margin-top: 12px
}

.volume__status {
	font-family: var(--f-mono);
	font-size: var(--fs-meta);
	letter-spacing: .12em;
	color: var(--c-muted);
	margin-top: 3px
}

.volume--secret {
	border-color: var(--c-gold)
}

.volume--secret .volume__status {
	color: var(--c-gold)
}

.volume--soon {
	opacity: .62
}


/* 実寸48mmの図（印刷物と同じ物理サイズで描く） */
.scale48 {
	width: 48mm;
	height: 48mm;
	border: 1.5px dashed var(--c-line-2);
	border-radius: 2px;
	display: grid;
	place-items: center;
	position: relative;
	max-width: 100%
}

.scale48::after {
	content: "48mm";
	font-family: var(--f-mono);
	font-size: 11px;
	letter-spacing: .1em;
	color: var(--c-muted)
}

/* ============================================================
   【9】カード / グリッド 汎用
   ============================================================ */
.grid {
	display: grid;
	gap: 26px
}

.grid--2 {
	grid-template-columns: repeat(2,1fr)
}

.grid--3 {
	grid-template-columns: repeat(3,1fr)
}

.grid--4 {
	grid-template-columns: repeat(4,1fr)
}

.grid--21 {
	grid-template-columns: 1.4fr 1fr;
	align-items: center
}

@media (max-width:799px){
	.grid {
		gap: 14px
	}
	.grid--4 {
		grid-template-columns: repeat(2,1fr)
	}
	.grid--21 {
		grid-template-columns: 1fr
	}
	.grid--2,.grid--3 {
		grid-template-columns: 1fr
	}
}

.card {
	background: var(--c-surface);
	border: var(--border);
	border-radius: var(--r-md);
	overflow: hidden;
	transition: border-color .25s var(--ease), transform .25s var(--ease);
	display: block
}

.card:hover {
	border-color: var(--c-line-2);
	transform: translateY(-3px)
}

.card__body {
	padding: 18px 20px 22px
}

.card__title {
	font-family: var(--f-serif);
	font-size: var(--fs-h3);
	font-weight: 700
}

.card__text {
	font-size: var(--fs-small);
	color: var(--c-text-2);
	margin-top: 8px;
	line-height: 1.85
}

.card__meta {
	font-family: var(--f-mono);
	font-size: var(--fs-meta);
	letter-spacing: .1em;
	color: var(--c-muted)
}

/* ============================================================
   【10】CTA / 帯
   ============================================================ */
.cta {
	border: 1px solid var(--c-line-2);
	border-radius: var(--r-md);
	background: var(--c-surface);
	padding: 44px;
	text-align: center
}

.cta__title {
	font-family: var(--f-serif);
	font-size: 26px;
	font-weight: 700;
	line-height: 1.5
}

.cta__note {
	font-size: var(--fs-small);
	color: var(--c-text-2);
	margin-top: 12px;
	line-height: 1.85
}

.cta__actions {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 24px
}
@media (max-width:799px){
	.cta {
		padding: 24px
	}
	.cta__title {
		font-size: 19px
	}
}

/* ============================================================
   【11】情報テーブル / FAQ / 道順
   ============================================================ */
.dl {
	border-top: 1px solid var(--c-line);
	margin-top: var(--sp-block)
}

.dl__row {
	display: grid;
	grid-template-columns: 150px 1fr;
	gap: 16px;
	padding: 16px 2px;
	border-bottom: 1px solid var(--c-line)
}

.dl__row dt {
	font-family: var(--f-mono);
	font-size: var(--fs-meta);
	letter-spacing: .14em;
	color: var(--c-muted);
	padding-top: 4px
}

.dl__row dd {
	font-size: var(--fs-body)
}

@media (max-width:799px){
	.dl__row {
		grid-template-columns: 1fr;
		gap: 4px
	}
}

/* 横並びの定義リスト：短い項目を1行に並べる（営業時間・LO・予算・チャージ） */
.dl--inline {
	display: grid;
	grid-template-columns: repeat(4,1fr);
	gap: 4px 40px;
	border-top: 0;
	margin-top: 0
}

.dl--inline .dl__row {
	display: block;
	grid-template-columns: none;
	padding: 0;
	border-bottom: 0
}

.dl--inline dt {
	margin-bottom: 5px
}

.dl--inline dd {
	font-size: var(--fs-body);
	font-weight: 500
}

.section--light .dl--inline dt {
	color: var(--c-light-muted)
}

@media (max-width:799px){
	.dl--inline {
		grid-template-columns: repeat(2,1fr);
		gap: 16px 16px
	}
}

.faq {
	border-top: 1px solid var(--c-line);
	margin-top: var(--sp-block)
}

.faq__item {
	border-bottom: 1px solid var(--c-line)
}

.faq__q {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 2px;
	text-align: left;
	font-size: var(--fs-body);
	font-weight: 700
}

.faq__icon {
	flex: 0 0 16px;
	height: 16px;
	position: relative
}

.faq__icon::before,.faq__icon::after {
	content: "";
	position: absolute;
	inset: 50% 0 auto 0;
	height: 1.5px;
	background: var(--c-text-2);
	transition: transform .28s var(--ease)
}

.faq__icon::after {
	transform: rotate(90deg)
}

.faq__q[aria-expanded="true"] .faq__icon::after {
	transform: rotate(0)
}

.faq__a {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows .32s var(--ease)
}

.faq__a.is-open {
	grid-template-rows: 1fr
}

.faq__a > div {
	overflow: hidden
}

.faq__a p {
	padding: 0 2px 22px;
	color: var(--c-text-2);
	font-size: var(--fs-body)
}

.route {
	display: grid;
	grid-template-columns: repeat(4,1fr);
	gap: 18px;
	margin-top: var(--sp-block);
	counter-reset: route
}

.route__item {
	counter-increment: route
}

.route__item .media {
	border-radius: var(--r-sm)
}

.route__cap {
	font-size: var(--fs-small);
	color: var(--c-text-2);
	margin-top: 10px;
	display: flex;
	gap: 8px;
	line-height: 1.8
}

.route__cap::before {
	content: "0" counter(route);
	font-family: var(--f-mono);
	font-size: var(--fs-meta);
	color: var(--c-accent);
	font-weight: 700;
	flex: 0 0 auto
}

@media (max-width:799px){
	.route {
		grid-template-columns: repeat(2,1fr);
		gap: 10px
	}
}

/* 地図 */
.mapEmbed {
	aspect-ratio: 16/9;
	border-radius: var(--r-md);
	overflow: hidden;
	border: var(--border);
	background: var(--c-surface)
}

.mapEmbed iframe {
	width: 100%;
	height: 100%;
	border: 0;
	filter: grayscale(.35) contrast(1.05)
}

.mapEmbed__ph {
	width: 100%;
	height: 100%;
	display: grid;
	place-items: center;
	color: var(--c-muted);
	font-family: var(--f-mono);
	font-size: 12px;
	letter-spacing: .1em;
	text-align: center;
	padding: 20px
}

@media (max-width:799px){
	.mapEmbed {
		aspect-ratio: 4/3
	}
}

/* ============================================================
   【12】QR着地ページ（/s/）専用
   ============================================================ */
.qrPage {
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 32px var(--gutter) 40px;
	max-width: 520px;
	margin-inline: auto
}

.qrPage__brand {
	text-align: center;
	margin-bottom: 28px
}

.qrPage__brand .logo {
	font-size: 22px
}

.qrPage__what {
	font-size: var(--fs-small);
	color: var(--c-text-2);
	margin-top: 8px
}

.qrPage__block {
	background: var(--c-surface);
	border: var(--border);
	border-radius: var(--r-md);
	padding: 20px;
	margin-bottom: 14px
}

.qrPage__block--accent {
	border-color: var(--c-accent)
}

.qrPage__actions {
	display: grid;
	grid-template-columns: repeat(3,1fr);
	gap: 8px;
	margin-top: 8px
}

.qrPage__actions .btn {
	justify-content: center;
	padding: 14px 8px;
	font-size: var(--fs-small)
}

/* ============================================================
   【13】フッター / SP固定バー
   ============================================================ */
.footer {
	background: var(--c-bg-2);
	border-top: 1px solid var(--c-line);
	padding-block: 72px 0
}

.footer__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: 48px
}

.footer__info {
	font-size: var(--fs-small);
	color: var(--c-text-2);
	line-height: 2
}

.footer h4 {
	font-family: var(--f-mono);
	font-size: var(--fs-label);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--c-muted);
	margin-bottom: 14px
}

.footer__links li {
	margin-bottom: 9px
}

.footer__links a {
	font-size: var(--fs-small);
	color: var(--c-text-2);
	transition: color .2s
}

.footer__links a:hover {
	color: var(--c-text)
}

.footer__rights {
	flex-basis: 100%;
	font-family: var(--f-sans);
	font-size: var(--fs-small);
	letter-spacing: .02em;
	line-height: 1.9;
	color: var(--c-text-2)
}

.footer__rights p + p {
	margin-top: 4px
}

.qrPage__footer {
	margin-top: 28px;
	padding-top: 20px;
	border-top: 1px solid var(--c-line)
}

.qrPage__footer .footer__rights {
	margin-top: 12px
}

.footer__bottom {
	margin-top: 56px;
	padding-block: 22px;
	border-top: 1px solid var(--c-line);
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	justify-content: space-between;
	font-family: var(--f-mono);
	font-size: var(--fs-meta);
	letter-spacing: .08em;
	color: var(--c-muted)
}

@media (max-width:799px){
	.footer {
		padding-block: 48px 78px
	}
	.footer__grid {
		grid-template-columns: 1fr;
		gap: 24px
	}
	.footer__bottom {
		margin-top: 36px
	}
}

/* SP固定バー：地図／電話／お品書き（シール条件は入れない） */
.fixedBar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 90;
	display: none;
	grid-template-columns: repeat(3,1fr);
	background: var(--c-bar-bg);
	backdrop-filter: blur(10px);
	border-top: 1px solid var(--c-line);
	padding-bottom: env(safe-area-inset-bottom);
}

.fixedBar a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	padding: 11px 4px 10px;
	font-size: 12px;
	color: var(--c-text-2)
}

.fixedBar a + a {
	border-left: 1px solid var(--c-line)
}

.fixedBar svg {
	width: 19px;
	height: 19px;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.6
}

@media (max-width:799px){
	.fixedBar {
		display: grid
	}
}

/* ============================================================
   【14】スクロール表示（静止状態で読める＝初期表示は可視）
   ============================================================ */
.reveal {
	opacity: 1;
	transform: none
}

.js .reveal {
	transform: translateY(12px);
	transition: transform .6s var(--ease)
}   /* opacity では待機させない（implementation.md 6章） */
.js .reveal.is-visible {
	transform: none
}

@media (prefers-reduced-motion:reduce) {
	.js .reveal {
		opacity: 1;
		transform: none
	}
}

/* ============================================================
   【15】小物
   ============================================================ */
.tag {
	display: inline-block;
	font-family: var(--f-mono);
	font-size: 11.5px;
	letter-spacing: .12em;
	padding: 4px 9px;
	border: 1px solid var(--c-line-2);
	border-radius: 2px;
	color: var(--c-muted)
}

.tag--new {
	border-color: var(--c-accent);
	color: var(--c-accent)
}

.tag--gold {
	border-color: var(--c-gold);
	color: var(--c-gold)
}

.breadcrumb {
	font-family: var(--f-mono);
	font-size: var(--fs-meta);
	letter-spacing: .08em;
	color: var(--c-muted);
	padding-top: calc(var(--header-h) + 28px)
}

.breadcrumb a:hover {
	color: var(--c-text)
}

.pageHead {
	padding-block: 44px 0
}

.pageHead__title {
	font-family: var(--f-serif);
	font-size: 44px;
	font-weight: 800;
	line-height: 1.35;
	margin-top: 14px
}
@media (max-width:799px){
	.pageHead {
		padding-block: 28px 0
	}
	.pageHead__title {
		font-size: 26px
	}
}

.credit {
	font-family: var(--f-mono);
	font-size: var(--fs-meta);
	letter-spacing: .08em;
	color: var(--c-muted);
	margin-top: 10px
}

.notice {
	border-left: 3px solid var(--c-accent);
	padding: 6px 0 6px 16px;
	font-size: var(--fs-small);
	color: var(--c-text-2);
	margin-top: 20px;
	line-height: 1.85
}

/* 上品な減速と時間差。文字は常時可視、演出は初回のみ。 */
:root {
	--ease-luxury: cubic-bezier(.22,1,.36,1)
}

.hero__title-line {
	display: block
}

.hero__scroll::after {
	content: "";
	display: block;
	width: 1px;
	height: 48px;
	margin: 16px auto 0;
	background: var(--c-food);
	transform-origin: top;
}

@media (prefers-reduced-motion:no-preference) {
	.index .hero__media img {
		animation: home-photo-settle 3.6s var(--ease-luxury) both
	}

	.index .hero__title-line {
		animation: home-text-settle 1.4s var(--ease-luxury) both
	}

	.index .hero__title-line:nth-child(2) {
		animation-delay: .16s
	}

	.index .hero__text {
		animation: home-text-settle 1.4s .28s var(--ease-luxury) both
	}

	.index .hero__actions {
		animation: home-text-settle 1.4s .4s var(--ease-luxury) both
	}

	.index .hero__scroll::after {
		animation: scroll-line 1.8s .6s 2 both
	}

	.js .reveal {
		transform: translateY(24px);
		transition: transform 1.15s var(--ease-luxury);
	}

	.js .reveal.is-visible {
		transform: none
	}

	.js .reveal .media img {
		transform: scale(1.07);
		transition: transform 1.65s var(--ease-luxury);
		transition-delay: inherit;
	}

	.js .reveal.is-visible .media img {
		transform: scale(1)
	}

	.reveal > .label::before {
		content: "";
		display: inline-block;
		width: 28px;
		height: 1px;
		margin-right: 12px;
		vertical-align: middle;
		background: currentColor;
		transform-origin: left;
	}

	.js .reveal:not(.is-visible) > .label::before {
		transform: scaleX(0)
	}

	.js .reveal.is-visible > .label::before {
		transform: scaleX(1);
		transition: transform 1s .15s var(--ease-luxury);
	}

	.js .reveal.is-visible .prism::after {
		animation: prism-pass 1.8s .35s backwards
	}

	.js .reveal.is-visible .sealCard:nth-of-type(2) .prism::after {
		animation-delay: .6s
	}

	.btn__arrow {
		display: inline-block;
		transition: transform .4s var(--ease-luxury)
	}

	.btn:focus-visible .btn__arrow {
		transform: translateX(5px)
	}

	.nav__list a::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 1px;
		background: var(--c-food);
		transform: scaleX(0);
		transform-origin: left;
		transition: transform .45s var(--ease-luxury);
	}

	.nav__list a[aria-current="page"]::after,
  .nav__list a:focus-visible::after {
		transform: scaleX(1)
	}
  @	media (min-width:861px) {
		.steps > .reveal: nth-child(2), .dish > .reveal:nth-child(2),
    .grid > .reveal:nth-child(2){transition-delay:120ms
	}

	.steps > .reveal:nth-child(3), .grid > .reveal:nth-child(3) {
		transition-delay: 240ms
	}

	.grid > .reveal:nth-child(4) {
		transition-delay: 360ms
	}
}

@media (hover:hover) and (pointer:fine) {
	.dish__item .media img, a.card .media img {
		transition: transform 1.2s var(--ease-luxury)
	}

	.dish__item:hover .media img, a.card:hover .media img,
    .js .dish__item.is-visible:hover .media img,
    .js a.card.is-visible:hover .media img {
		transform: scale(1.035)
	}

	.btn:hover .btn__arrow {
		transform: translateX(5px)
	}

	.nav__list a:hover::after {
		transform: scaleX(1)
	}
}
}

@keyframes home-photo-settle {
	from {
		transform: scale(1.10)
	}

	to {
		transform: scale(1)
	}
}

@keyframes home-text-settle {
	from {
		transform: translateY(22px)
	}

	to {
		transform: translateY(0)
	}
}
/* 出汁の導入：既存の一度だけの表示判定で、見出しと本文に時間差をつける。 */
@media (prefers-reduced-motion:no-preference) {
	.js .dashiHeading.reveal {
		transform: none;
		transition: none
	}

	.js .dashiHeading.is-visible > .label {
		animation: dashi-heading-rise 1s var(--ease-luxury) both
	}

	.js .dashiHeading.is-visible > :is(h1,h2) {
		animation: dashi-heading-rise 1.35s .12s var(--ease-luxury) both
	}

	.js .dashiHeading.is-visible > .lead {
		animation: dashi-heading-rise 1.5s .28s var(--ease-luxury) both
	}
}

@keyframes dashi-heading-rise {
	from {
		transform: translateY(28px)
	}

	to {
		transform: translateY(0)
	}
}

@keyframes scroll-line {
	0% {
		transform: scaleY(0);
		opacity: 0
	}

	45%,75% {
		transform: scaleY(1);
		opacity: 1
	}

	100% {
		transform: scaleY(1);
		opacity: .45
	}
}

@keyframes prism-pass {
	0% {
		background-position: 100% 0;
		opacity: 0
	}

	35% {
		opacity: .65
	}

	100% {
		background-position: 14% 0;
		opacity: .34
	}
}

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

	*, *::before, *::after {
		animation: none!important;
		transition: none!important
	}

	.js .reveal, .card:hover, .volume:hover {
		transform: none
	}
}

/* ============================================================
   【16】和紙の質感 - 色の面に紙肌をごく薄く重ねる
   ------------------------------------------------------------
   タイル（docs/tools/washi.py で作成）は「中間グレー＝変化なし」に焼いてあり、
   各面の ::before に敷いて hard-light で合成する。色はトークンのまま、明暗の揺らぎだけが乗る。
   ★ 濃さは --tex-strength（透明度）だけで調整する。焼き直しは不要
   カード・写真・シールには乗せない（全部を和紙にしない）。
   ============================================================ */
/* 本文の背景を html ではなく body 自身に塗らせる（body の背景が画面全体へ移ると、合成の相手がいなくなるため） */
html {
	background: var(--c-bg)
}

body, .section--alt, .section--light, .footer {
	position: relative;
	isolation: isolate
}

body::before, .section--alt::before, .section--light::before, .footer::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image: var(--tex-main);
	background-repeat: repeat;
	background-size: var(--tex-size) auto;
	mix-blend-mode: hard-light;
	opacity: var(--tex-strength);
}

.section--alt::before, .footer::before {
	background-image: var(--tex-sub)
}

.section--light::before {
	background-image: var(--tex-paper)
}

/* 支給ロゴ：白背景は黒文字、黒背景・写真上は白文字。 */
.logo {
	align-items: center;
	flex-shrink: 0;
	line-height: 1
}

.brandLogo {
	width: 64px;
	height: 64px;
	object-fit: contain
}

.brandLogo--dark {
	display: none
}

.brandLogo--light {
	display: block
}
[data-theme="light"] .brandLogo--dark {
	display: block
}
[data-theme="light"] .brandLogo--light {
	display: none
}
[data-theme="light"] body.index .header:not(.is-scrolled) .brandLogo--dark {
	display: none
}
[data-theme="light"] body.index .header:not(.is-scrolled) .brandLogo--light {
	display: block
}

.footer .brandLogo,.qrPage__brand .brandLogo {
	width: 128px;
	height: 128px
}

img.hero__logo {
	width: 290px;
	height: auto;
	max-width: 100%;
	object-fit: contain
}

@media (max-width:799px){
	.header .brandLogo {
		width: 52px;
		height: 52px
	}
	img.hero__logo {
		width: 200px;
	}
}