/* site.json の personality から自動で作った値（ここは直さない） */
:root {
  --p-bg: #f5efe2;
  --p-text: #2a2622;
  --p-heading: #1f1b18;
  --p-accent: #b4441e;
  --p-on-accent: #ffffff;
  --p-paper: #fbf7ee;
  --p-paper-text: #2a2622;
  --p-body: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --p-head: "Yuji Syuku", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --p-head-weight: 400;
  --p-deco: "Yuji Syuku", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --p-deco-weight: 400;
}
/* =========================================================
   個性（personality）の見た目  v2.2
   - site.json に "personality" を書いたお店だけ、dist/css/personality.css として読み込まれる
   - 色と文字は site.json から自動で作られ（このファイルの上に付く）、形と飾りはここで決める
   - テーマ（calm / bright / simple）が土台。ここに書いたものが上に重なる
   - お店ごとにこのファイルを直さない（直すと全店に効く）。お店ごとの違いは site.json で
   - v2.2：それでも足りないお店だけの飾りは src/personality/shop.css に書く（ビルドでこのファイルの後ろに付く）
   ========================================================= */

/* ---------- 色と文字の初期値（site.json に書かなかった項目はテーマの値を使う） ---------- */
:where(:root) {
  --p-bg: var(--base);
  --p-text: var(--text);
  --p-heading: var(--p-text);
  --p-accent: var(--accent);
  --p-on-accent: #ffffff;
  --p-paper: var(--base-deep);
  --p-paper-text: var(--text);
  --p-body: var(--font-sans);
  --p-head: var(--font-serif);
  --p-head-weight: 700;
  --p-deco: var(--p-head);
  --p-deco-weight: var(--p-head-weight);

  /* 手描きの飾り（SVG）。色は background で付ける */
  --svg-circle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 80' preserveAspectRatio='none'%3E%3Cpath d='M104 7C46 3 7 20 8 41s52 34 106 32 82-17 78-38S148 3 86 11' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E");
  --svg-brush: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M4 13C46 5 112 16 196 7' fill='none' stroke='%23000' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E");
  --svg-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12'%3E%3Cpath d='M2 6q7-6 14 0t14 0 14 0 14 0 14 0 14 0 14 0 14 0' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
  --svg-lamp: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M23 1h2v11h-2z'/%3E%3Cpath d='M17 13h14l6 13c1 2-1 3-3 3H14c-2 0-4-1-3-3z'/%3E%3Ccircle cx='24' cy='33' r='4'/%3E%3Cpath d='M24 40v6M12 37l-4 4M36 37l4 4' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  --svg-cup: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M9 20h26v6c0 8-6 13-13 13S9 34 9 26z'/%3E%3Cpath d='M35 23h3a5 5 0 0 1 0 10h-4' fill='none' stroke='%23000' stroke-width='3'/%3E%3Cpath d='M4 42h36' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M17 15c-3-3 3-5 0-9M25 15c-3-3 3-5 0-9' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
  --svg-leaf: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M24 45V14' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M24 16C24 8 30 3 38 3c0 8-6 13-14 13zM24 28c0-8-6-13-14-13 0 8 6 13 14 13zM24 38c0-7 5-11 12-11 0 7-5 11-12 11z'/%3E%3C/svg%3E");
  /* v2.2 で追加した見出しの上の絵：提灯・ワイングラス・どんぶり */
  --svg-lantern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M23 1h2v5h-2z'/%3E%3Crect x='16' y='6' width='16' height='4' rx='1'/%3E%3Cpath d='M17 11h14c4 3 6 8 6 13s-2 10-6 13H17c-4-3-6-8-6-13s2-10 6-13z'/%3E%3Crect x='16' y='38' width='16' height='4' rx='1'/%3E%3Cpath d='M23 42h2v5h-2z'/%3E%3C/svg%3E");
  --svg-wine: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M13 3h22c1 9-1 21-11 22C14 24 12 12 13 3z'/%3E%3Cpath d='M23 25h2v15h-2z'/%3E%3Cpath d='M14 44c0-3 5-4 10-4s10 1 10 4z'/%3E%3C/svg%3E");
  --svg-bowl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M30 2l14 14' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M25 3l11 15' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M4 22h40c0 11-8 18-20 18S4 33 4 22z'/%3E%3Cpath d='M16 42h16v3H16z'/%3E%3C/svg%3E");
}

/* ---------- テーマの色を、個性の色に置きかえる ---------- */
body.p {
  --base: var(--p-bg);
  --text: var(--p-text);
  --main: var(--p-heading);
  --accent: var(--p-accent);
  --accent-hover: color-mix(in srgb, var(--p-accent) 80%, var(--p-text));
  --text-sub: color-mix(in srgb, var(--p-text) 78%, var(--p-bg));
  --line: color-mix(in srgb, var(--p-text) 22%, var(--p-bg));
  --base-deep: color-mix(in srgb, var(--p-bg) 90%, var(--p-text));
  --on-main: var(--p-bg);
  --font-sans: var(--p-body);
  --font-serif: var(--p-body);
  --p-line: var(--line);
  --p-hole: var(--p-bg);
  background-color: var(--p-bg);
  color: var(--p-text);
  font-family: var(--p-body);
}

/* 見出しの書体（data-f="h"）と、飾りの書体（data-f="a"）。この2つは「使う文字だけ」を読み込んでいる */
.p [data-f="h"] { font-family: var(--p-head); font-weight: var(--p-head-weight); }
.p [data-f="a"] { font-family: var(--p-deco); font-weight: var(--p-deco-weight); }

/* ---------- 背景の質感 ---------- */
.p-tex-wood {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' stitchTiles='stitch' baseFrequency='0.004 0.11' numOctaves='4' seed='9'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1.5 -0.6'/%3E%3C/filter%3E%3Crect width='640' height='640' filter='url(%23g)'/%3E%3C/svg%3E"),
    repeating-linear-gradient(180deg, transparent 0 238px, rgba(0, 0, 0, 0.35) 238px 241px, transparent 241px 242px);
  background-attachment: scroll;
  /* 2.2.2：木目の1枚を横に長くして、大きな画面でも継ぎ目が出ないように */
  background-size: 2560px 640px, auto;
}
.p-tex-paper,
.p-menu-oshinagaki .menu-sheet,
.p .voice__card {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' stitchTiles='stitch' baseFrequency='0.85' numOctaves='3' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0.45  0 0 0 0 0.38  0 0 0 0 0.28  0 0 0 0.09 0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
}
.p-tex-tile .hero,
.p-tex-tile .footer {
  background-color: var(--p-paper);
  background-image: conic-gradient(color-mix(in srgb, var(--p-accent) 13%, transparent) 25%, transparent 0 50%, color-mix(in srgb, var(--p-accent) 13%, transparent) 0 75%, transparent 0);
  background-size: 32px 32px;
}

/* ---------- ヘッダー・フッター ---------- */
.p .header { background: color-mix(in srgb, var(--p-bg) 94%, #000); color: var(--p-text); border-bottom: 1px solid var(--p-line); }
.p .logo, .p .logo:hover { color: var(--p-heading); letter-spacing: 0.08em; font-size: 1.375rem; }
.p .nav { background: var(--p-bg); }
.p .nav__list a { color: var(--p-text); border-bottom-color: var(--p-line); }
.p .nav-toggle { color: var(--p-text); border-color: var(--p-line); }
@media (min-width: 768px) { .p .nav { background: none; } }
.p .footer { background-color: var(--p-paper); color: var(--p-paper-text); border-top: 4px double color-mix(in srgb, var(--p-paper-text) 35%, var(--p-paper)); }
.p .footer a { color: var(--p-paper-text); }
.p .footer__name { font-size: 1.625rem; }
.p .sample-bar { position: relative; z-index: 51; }

/* ---------- 見出し・区切り ---------- */
.p .sec-title { color: var(--p-heading); font-size: clamp(1.625rem, 6vw, 2.125rem); letter-spacing: 0.1em; }
.p .sec-title::after { background: var(--p-accent); }
.p-mark-underline .sec-title::after,
.p-mark-circle .sec-title::after {
  width: 96px; height: 12px; margin-top: 6px; background: var(--p-accent);
  -webkit-mask: var(--svg-brush) center / 100% 100% no-repeat; mask: var(--svg-brush) center / 100% 100% no-repeat;
}
.p-mark-circle .sec-title::after { -webkit-mask-image: var(--svg-wave); mask-image: var(--svg-wave); height: 10px; }
.p-icon-lamp .sec-title::before,
.p-icon-cup .sec-title::before,
.p-icon-leaf .sec-title::before,
.p-icon-lantern .sec-title::before,
.p-icon-wine .sec-title::before,
.p-icon-bowl .sec-title::before {
  content: ""; display: block; width: 34px; height: 34px; margin: 0 auto 8px; background: var(--p-accent);
  -webkit-mask: var(--svg-lamp) center / contain no-repeat; mask: var(--svg-lamp) center / contain no-repeat;
}
.p-icon-cup .sec-title::before { -webkit-mask-image: var(--svg-cup); mask-image: var(--svg-cup); }
.p-icon-leaf .sec-title::before { -webkit-mask-image: var(--svg-leaf); mask-image: var(--svg-leaf); }
.p-icon-lantern .sec-title::before { -webkit-mask-image: var(--svg-lantern); mask-image: var(--svg-lantern); }
.p-icon-wine .sec-title::before { -webkit-mask-image: var(--svg-wine); mask-image: var(--svg-wine); }
.p-icon-bowl .sec-title::before { -webkit-mask-image: var(--svg-bowl); mask-image: var(--svg-bowl); }
/* v2.2：見出しの上の小さな飾り文字（personality.labels） */
.p .sec-label { display: block; margin-bottom: 4px; font-family: Georgia, "Times New Roman", serif; font-style: italic; font-weight: 400; font-size: 0.5em; letter-spacing: 0.12em; color: var(--p-accent); }
.p .about__text .sec-title::before { margin-left: 0; }
.p .sec-lead { text-align: center; color: var(--text-sub); margin: -12px auto 32px; max-width: 36em; }
.p .page-title { color: var(--p-heading); font-size: clamp(1.875rem, 7vw, 2.5rem); }

/* 手描きの丸（mark）。名物や季節の品の名前に付く */
.p .mark { position: relative; display: inline-block; }
.p-mark-circle .mark { padding: 0 0.3em; }
.p-mark-circle .mark::after,
.p-mark-underline .mark::after {
  content: ""; position: absolute; pointer-events: none; background: var(--p-accent);
  inset: -0.3em -0.35em -0.22em; -webkit-mask: var(--svg-circle) center / 100% 100% no-repeat; mask: var(--svg-circle) center / 100% 100% no-repeat;
}
.p-mark-underline .mark::after { inset: auto -0.1em -0.1em; height: 0.32em; -webkit-mask-image: var(--svg-brush); mask-image: var(--svg-brush); opacity: 0.85; }

/* ---------- ボタン ---------- */
.p .btn { background: var(--p-accent); border-color: var(--p-accent); color: var(--p-on-accent); border-radius: 999px; padding: 12px 28px; }
.p .btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--p-on-accent); }
.p .btn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.8); }
.p .btn--ghost:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
.p .more-link a { color: var(--p-accent); }

/* ---------- 値段の見せ方 ---------- */
.p .price { white-space: nowrap; }
.p-price-tag .price {
  position: relative; display: inline-block; padding: 0.1em 0.75em 0.1em 1.35em; line-height: 1.6;
  background: var(--p-accent); color: var(--p-on-accent);
  clip-path: polygon(0.75em 0, 100% 0, 100% 100%, 0.75em 100%, 0 50%);
}
.p-price-tag .price::before { content: ""; position: absolute; left: 0.6em; top: 50%; width: 0.36em; height: 0.36em; margin-top: -0.18em; border-radius: 50%; background: var(--p-hole); }
.p-price-circle .price { position: relative; display: inline-block; padding: 0.1em 0.5em; color: var(--p-accent); }
.p-price-circle .price::after { content: ""; position: absolute; inset: -0.2em -0.3em; background: var(--p-accent); -webkit-mask: var(--svg-circle) center / 100% 100% no-repeat; mask: var(--svg-circle) center / 100% 100% no-repeat; }
.p .rec__price { margin-top: 6px; }

/* ---------- 写真の枠 ---------- */
.p-frame-double .pframe,
.p-frame-double .about__photo { outline: 1px solid var(--p-accent); outline-offset: 5px; margin: 6px; }
.p-frame-tape .pframe,
.p-frame-tape .about__photo,
.p-frame-postcard .pframe,
.p-frame-postcard .about__photo { position: relative; background: #fffdf7; padding: 8px; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22); }
.p-frame-tape .pframe,
.p-frame-tape .about__photo { padding-bottom: 26px; transform: rotate(-1.2deg); }
.p-frame-tape .sig--rev .pframe { transform: rotate(1.2deg); }
.p-frame-tape .pframe::before,
.p-frame-tape .about__photo::before {
  content: ""; position: absolute; z-index: 1; top: -12px; left: 50%; width: 92px; height: 26px; margin-left: -46px;
  background: color-mix(in srgb, var(--p-accent) 45%, #ffffff); opacity: 0.85; transform: rotate(-3deg);
}

/* =========================================================
   ファーストビュー（hero.layout）
   ========================================================= */
.p .hero__name { letter-spacing: 0.08em; }

/* 写真全面＋縦書きのキャッチコピー */
.p-hero-full-vertical .hero { min-height: min(calc(100svh - 60px), 900px); display: flex; }
.p-hero-full-vertical .hero__photo::after { background: linear-gradient(to top, rgba(10, 6, 3, 0.78) 0%, rgba(10, 6, 3, 0.12) 52%, rgba(10, 6, 3, 0.42) 100%); }
.p-hero-full-vertical .hero__text { display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; text-align: left; padding-top: 40px; padding-bottom: 56px; }
.p-hero-full-vertical .hero__copy {
  position: absolute; top: 32px; right: var(--gutter); margin: 0; writing-mode: vertical-rl;
  font-size: clamp(1.25rem, 5.6vw, 2.25rem); line-height: 1.9; letter-spacing: 0.22em; color: #fff; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7);
}
.p-hero-full-vertical .hero__name { font-size: clamp(2.75rem, 12vw, 5.5rem); line-height: 1.15; color: #fff; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.6); }
.p-hero-full-vertical .hero__links { justify-content: flex-start; margin-top: 24px; }
.p-hero-full-vertical .hero__note { top: 8px; bottom: auto; left: var(--gutter); right: auto; }
.p-hero-full-vertical .hero.no-photo .hero__name,
.p-hero-full-vertical .hero.no-photo .hero__copy { color: var(--p-heading); text-shadow: none; }
.p-hero-full-vertical .hero.no-photo { background: transparent; color: var(--p-text); }
@media (min-width: 768px) {
  .p-hero-full-vertical .hero__copy { top: 64px; right: calc(var(--gutter) + 24px); }
  .p-hero-full-vertical .hero__text { padding-bottom: 88px; }
}

/* 写真と文字を左右に（スマホは写真が上） */
.p-hero-split .hero { display: grid; background: var(--p-paper); color: var(--p-paper-text); --p-hole: var(--p-paper); }
.p-hero-split .hero__photo { position: relative; inset: auto; aspect-ratio: 4 / 3; }
.p-hero-split .hero__photo::after { display: none; }
.p-hero-split .hero__text { padding-top: 32px; padding-bottom: 44px; text-align: left; }
.p-hero-split .hero__title { display: flex; flex-direction: row; justify-content: space-between; align-items: flex-end; gap: 20px; }
.p-hero-split .hero__copy { margin: 0; writing-mode: vertical-rl; font-size: clamp(1.375rem, 6vw, 2.25rem); line-height: 1.8; letter-spacing: 0.2em; color: var(--p-paper-text); }
.p-hero-split .hero__name { font-size: clamp(2.5rem, 11vw, 4.5rem); line-height: 1.2; color: var(--p-accent); }
.p-hero-split .hero__links { justify-content: flex-start; }
.p-hero-split .hero .btn--ghost { color: var(--p-paper-text); border-color: color-mix(in srgb, var(--p-paper-text) 50%, transparent); }
.p-hero-split .hero .btn--ghost:hover { background: color-mix(in srgb, var(--p-paper-text) 8%, transparent); color: var(--p-paper-text); }
.p-hero-split .hero__note { color: rgba(255, 255, 255, 0.9); top: calc(min(100vw, 100%) * 0.75 - 26px); bottom: auto; }
@media (min-width: 768px) {
  .p-hero-split .hero { grid-template-columns: 5fr 7fr; min-height: 560px; }
  .p-hero-split .hero__photo { grid-column: 2; grid-row: 1; aspect-ratio: auto; min-height: 100%; }
  .p-hero-split .hero__text { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; justify-content: center; padding: 56px 40px; }
  .p-hero-split .hero__note { top: auto; bottom: 6px; }
  .p-hero-split .hero__name { font-size: clamp(2.25rem, 3.8vw, 3.75rem); white-space: nowrap; }
}

/* 額に入れた写真（はがき・マスキングテープ風） */
.p-hero-framed .hero { display: flex; flex-direction: column; align-items: center; color: var(--p-heading); padding: 28px 0 48px; }
.p-hero-framed .hero__text { order: 1; padding-top: 8px; padding-bottom: 20px; }
.p-hero-framed .hero__photo {
  order: 2; position: relative; inset: auto; width: calc(100% - var(--gutter) * 2); max-width: 900px; aspect-ratio: 16 / 10;
  border: 8px solid #fffdf7; box-shadow: 0 14px 30px rgba(0, 0, 0, 0.25); transform: rotate(-1deg);
}
.p-hero-framed .hero__photo img { position: absolute; inset: 0; }
.p-hero-framed .hero__photo::after { inset: -14px auto auto 50%; width: 110px; height: 28px; margin-left: -55px; background: color-mix(in srgb, var(--p-accent) 50%, #fff); opacity: 0.85; transform: rotate(3deg); }
.p-hero-framed .hero__name { font-size: clamp(2.5rem, 12vw, 4.75rem); line-height: 1.2; color: var(--p-heading); }
.p-hero-framed .hero__copy { font-family: var(--p-deco); font-weight: var(--p-deco-weight); color: var(--p-accent); font-size: clamp(1.125rem, 4.6vw, 1.5rem); margin-top: 12px; }
.p-hero-framed .hero__links { margin-top: 20px; }
.p-hero-framed .hero .btn--ghost { color: var(--p-heading); border-color: currentColor; }
.p-hero-framed .hero .btn--ghost:hover { background: color-mix(in srgb, var(--p-heading) 8%, transparent); color: var(--p-heading); }
.p-hero-framed .hero__note { position: static; order: 3; margin-top: 14px; color: var(--p-text); text-shadow: none; }

/* =========================================================
   名物・店の人の言葉・季節のおすすめ
   ========================================================= */
.sig-list { display: flex; flex-wrap: wrap; gap: 48px 24px; }
.sig { flex: 1 1 100%; display: grid; gap: 20px; align-items: center; }
.sig.no-photo { flex: 1 1 260px; text-align: center; align-content: start; padding: 28px 20px; background: color-mix(in srgb, var(--p-bg) 88%, var(--p-text)); border: 1px dashed var(--p-line); --p-hole: color-mix(in srgb, var(--p-bg) 88%, var(--p-text)); }
.sig__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.sig__shout { display: inline-block; color: var(--p-accent); font-size: clamp(1.375rem, 5.5vw, 1.875rem); line-height: 1.3; transform: rotate(-4deg); transform-origin: left center; }
.sig__name { margin: 8px 0 10px; color: var(--p-heading); font-size: clamp(2rem, 9vw, 3.25rem); line-height: 1.3; font-weight: inherit; }
.sig.no-photo .sig__name { font-size: clamp(1.625rem, 7vw, 2.25rem); }
.sig__price { font-size: 1.25rem; }
.sig__desc { margin-top: 12px; color: var(--text-sub); }
@media (min-width: 768px) {
  .sig:not(.no-photo) { grid-template-columns: 6fr 5fr; gap: 56px; }
  .sig--rev:not(.no-photo) .sig__photo { order: 2; }
  .sig.no-photo { flex-basis: 300px; }
}

.voice { display: grid; gap: 28px; align-items: center; }
.voice__card { position: relative; background-color: var(--p-paper); color: var(--p-paper-text); padding: 32px 24px; box-shadow: 0 14px 32px rgba(0, 0, 0, 0.28); --p-hole: var(--p-paper); }
.voice__heading { color: var(--p-paper-text); font-size: clamp(1.5rem, 6.4vw, 2rem); line-height: 1.6; margin-bottom: 18px; }
.voice__text p + p { margin-top: 1em; }
.voice__by { margin-top: 20px; text-align: right; font-size: 1.25rem; }
.voice__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (min-width: 768px) {
  .voice { grid-template-columns: 7fr 5fr; gap: 48px; }
  .voice.no-photo { grid-template-columns: 1fr; max-width: 820px; margin: 0 auto; }
  .voice__card { display: grid; grid-template-columns: auto 1fr; column-gap: 40px; padding: 48px; }
  .voice__heading { grid-row: 1 / span 2; writing-mode: vertical-rl; margin: 0; letter-spacing: 0.12em; }
  .voice--long .voice__card { display: block; }
  .voice--long .voice__heading { writing-mode: horizontal-tb; margin-bottom: 18px; letter-spacing: 0.04em; }
}

.section--season { background: color-mix(in srgb, var(--p-accent) 14%, var(--p-bg)); }
.season__period { text-align: center; margin: -12px 0 28px; }
.season__period span { display: inline-block; padding: 2px 18px; border: 2px solid var(--p-accent); border-radius: 999px; color: var(--p-heading); font-size: 1.0625rem; transform: rotate(-2deg); }
.season-list { display: grid; gap: 24px; max-width: 860px; margin: 0 auto; }
.season-item { display: grid; background-color: var(--p-paper); color: var(--p-paper-text); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22); --p-hole: var(--p-paper); }
.season__photo { margin: 0; }
.season__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.season__body { padding: 28px 24px; text-align: center; }
.season__name { color: var(--p-paper-text); font-size: clamp(1.75rem, 7vw, 2.25rem); line-height: 1.4; }
.season__price { margin-top: 8px; font-size: 1.125rem; }
.season__text { margin-top: 12px; color: color-mix(in srgb, var(--p-paper-text) 80%, var(--p-paper)); }
@media (min-width: 768px) {
  .season-item:not(.no-photo) { grid-template-columns: 1fr 1fr; align-items: center; }
}

/* =========================================================
   メニューの見せ方（menuStyle）  … メニューのページの .menu-sheet に効く
   ========================================================= */
/* お品書き：木の上に置いた紙 */
.p-menu-oshinagaki .menu-sheet {
  position: relative; padding: 28px 18px 40px; background-color: var(--p-paper); color: var(--p-paper-text);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(0, 0, 0, 0.06);
  --base: var(--p-paper); --text: var(--p-paper-text); --main: var(--p-paper-text); --p-hole: var(--p-paper);
  --line: color-mix(in srgb, var(--p-paper-text) 30%, var(--p-paper)); --text-sub: color-mix(in srgb, var(--p-paper-text) 74%, var(--p-paper));
}
.p-menu-oshinagaki .menu-sheet::before,
.p-menu-oshinagaki .menu-sheet::after { content: ""; position: absolute; top: 12px; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #d8b56a, #7a5a24); box-shadow: 0 2px 3px rgba(0, 0, 0, 0.35); }
.p-menu-oshinagaki .menu-sheet::before { left: 12px; }
.p-menu-oshinagaki .menu-sheet::after { right: 12px; }
.p-menu-oshinagaki .menu-group__title { display: flex; align-items: center; justify-content: center; gap: 12px; border: 0; padding-bottom: 4px; font-size: clamp(1.25rem, 5.6vw, 1.625rem); letter-spacing: 0.06em; text-align: center; color: var(--p-paper-text); }
.p-menu-oshinagaki .menu-group__title::before,
.p-menu-oshinagaki .menu-group__title::after { content: ""; flex: 0 0 28px; height: 1px; background: currentColor; opacity: 0.5; }
@media (min-width: 768px) {
  .p-menu-oshinagaki .menu-sheet { padding: 44px 48px 56px; }
  .p-menu-oshinagaki .menu-group__title::before,
  .p-menu-oshinagaki .menu-group__title::after { flex-basis: 64px; }
}
.p-menu-oshinagaki .menu-group__note { text-align: center; }
.p-menu-oshinagaki .menu-item { border-bottom: 0; padding: 10px 0; }
.p-menu-oshinagaki .menu-item__head::before { content: ""; order: 1; flex: 1 1 auto; min-width: 1em; margin: 0 0.4em; border-bottom: 2px dotted color-mix(in srgb, var(--p-paper-text) 45%, var(--p-paper)); transform: translateY(-0.35em); }
.p-menu-oshinagaki .menu-item__head { gap: 0; }
.p-menu-oshinagaki .menu-item__name { order: 0; font-size: 1.0625rem; }
.p-menu-oshinagaki .menu-item__price { order: 2; font-family: var(--p-deco); font-weight: var(--p-deco-weight); font-size: 1.0625rem; color: var(--p-paper-text); }
.p-menu-oshinagaki .menu-item__desc { padding-right: 4em; }

/* 黒板：チョークの文字 */
.p-menu-blackboard .menu-sheet {
  padding: 28px 18px 36px; border: 12px solid #7a5434; border-radius: 6px; color: #f3f1e7;
  background: radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, 0.06), transparent 60%), radial-gradient(ellipse at 80% 90%, rgba(255, 255, 255, 0.05), transparent 55%), #24372e;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.5), 0 14px 30px rgba(0, 0, 0, 0.25);
  --base: #24372e; --text: #f3f1e7; --main: #f6e7a1; --accent: #f6c56b; --p-accent: #f6c56b; --p-on-accent: #1a1a1a; --p-hole: #24372e;
  --line: rgba(243, 241, 231, 0.28); --text-sub: rgba(243, 241, 231, 0.8);
}
.p-menu-blackboard .menu-group__title { font-family: var(--p-deco); font-weight: var(--p-deco-weight); color: #f6e7a1; border-bottom: 0; font-size: 1.625rem; }
.p-menu-blackboard .menu-group__title::after { content: ""; display: block; height: 10px; margin-top: 4px; background: #f6e7a1; opacity: 0.7; -webkit-mask: var(--svg-wave) left center / 120px 10px repeat-x; mask: var(--svg-wave) left center / 120px 10px repeat-x; }
.p-menu-blackboard .menu-item { border-bottom: 1px dashed rgba(243, 241, 231, 0.25); }
.p-menu-blackboard .menu-item__name, .p-menu-blackboard .menu-item__price { font-family: var(--p-deco); font-weight: var(--p-deco-weight); color: #f3f1e7; font-size: 1.125rem; }
.p-menu-blackboard .label-rec { background: transparent; border: 1.5px solid #f6c56b; color: #f6c56b; }
.p-menu-blackboard .label-season { border-color: #9ed4b0; color: #9ed4b0; }
.p-menu-blackboard .menu-nav { background: transparent; border-bottom-color: rgba(243, 241, 231, 0.25); }
.p-menu-blackboard .menu-nav a { background: transparent; color: #f3f1e7; border-color: rgba(243, 241, 231, 0.4); }

/* 値札：1品ずつカード＋値札 */
.p-menu-pricetag .menu-list { display: grid; gap: 14px; margin-top: 16px; }
.p-menu-pricetag .menu-item { display: flex; background-color: var(--p-paper); color: var(--p-paper-text); border: 0; border-radius: 10px; padding: 16px 18px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); --text: var(--p-paper-text); --text-sub: color-mix(in srgb, var(--p-paper-text) 74%, var(--p-paper)); --p-hole: var(--p-paper); }
.p-menu-pricetag .menu-item__head { flex-direction: column; align-items: flex-start; gap: 8px; }
.p-menu-pricetag .menu-item__name { font-size: 1.125rem; }
.p-menu-pricetag .menu-item__price {
  position: relative; display: inline-block; padding: 0.05em 0.75em 0.05em 1.35em; line-height: 1.6; font-family: var(--p-deco); font-weight: var(--p-deco-weight);
  background: var(--p-accent); color: var(--p-on-accent); clip-path: polygon(0.75em 0, 100% 0, 100% 100%, 0.75em 100%, 0 50%);
}
.p-menu-pricetag .menu-item__price::before { content: ""; position: absolute; left: 0.6em; top: 50%; width: 0.36em; height: 0.36em; margin-top: -0.18em; border-radius: 50%; background: var(--p-hole); }
.p-menu-pricetag .menu-group__title { border-bottom-color: var(--p-accent); }
@media (min-width: 768px) { .p-menu-pricetag .menu-list { grid-template-columns: 1fr 1fr; } }

/* 3つの見せ方に共通：おすすめ・季節の印を手描き風に */
.p .label-rec { background: var(--p-accent); color: var(--p-on-accent); border-radius: 999px; padding: 0 8px; }
.p .label-season { border-radius: 999px; padding: 0 8px; }

/* =========================================================
   スマホの画面下に固定するボタン（電話・予約・地図・メニュー・営業時間）
   ========================================================= */
.fixedbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--p-accent); color: var(--p-on-accent); box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.22); padding-bottom: env(safe-area-inset-bottom); }
.fixedbar ul { display: flex; }
.fixedbar li { flex: 1 1 0; min-width: 0; }
.fixedbar li + li a { border-left: 1px solid color-mix(in srgb, var(--p-on-accent) 30%, transparent); }
.fixedbar a { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px 9px; color: inherit; text-decoration: none; font-size: 0.75rem; font-weight: 700; line-height: 1.3; text-align: center; }
.fixedbar a:hover { background: rgba(0, 0, 0, 0.08); color: inherit; }
.fixedbar svg { fill: currentColor; }
.p.has-fixedbar { padding-bottom: 60px; }
@media (min-width: 768px) {
  .fixedbar { display: none; }
  .p.has-fixedbar { padding-bottom: 0; }
}

/* =========================================================
   動き（motion）  site.json の personality.motion
   - soft：ファーストビューの文字がふわっと出る／スクロールで各区画が下からふわっと出る／ヘッダーの影
   - rich：soft に加えて、キャッチコピーが1文字ずつにじむように出る・大きな写真がゆっくり寄る＆スクロールで少し遅れて動く・
           手描きの丸や下線が描かれる・値札が揺れて止まる・ランプの絵が揺れる・名物の写真が横から入る など
   - 端末で「動きを減らす」を選んでいる人には動かさない（下の @media の中だけで動く）
   - JS が動かなくても、ファーストビューの文字は2.5秒後に必ず出る（隠したままにしない）
   - transform ではなく translate / rotate / scale を使う（写真の枠やひとことの傾きを消さないため）
   ========================================================= */
@keyframes p-failsafe { to { opacity: 1; } }
@keyframes p-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes p-fadeup { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: none; } }
@keyframes p-name { from { opacity: 0; letter-spacing: 0.22em; filter: blur(8px); } to { opacity: 1; filter: blur(0); } }
@keyframes p-ink { from { opacity: 0; filter: blur(6px); } to { opacity: 1; filter: blur(0); } }
@keyframes p-kenburns { from { opacity: 0.15; scale: 1.1; } to { opacity: 1; scale: 1; } }
@keyframes p-draw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes p-swing { 0% { rotate: 16deg; } 28% { rotate: -11deg; } 52% { rotate: 6deg; } 76% { rotate: -3deg; } 100% { rotate: 0deg; } }
@keyframes p-tag { 0% { opacity: 0; rotate: -16deg; translate: -10px -6px; } 55% { opacity: 1; rotate: 5deg; translate: none; } 80% { rotate: -2deg; } 100% { opacity: 1; rotate: 0deg; translate: none; } }
@keyframes p-pop { 0% { opacity: 0; scale: 0.5; } 70% { opacity: 1; scale: 1.1; } 100% { opacity: 1; scale: 1; } }
@keyframes p-barin { from { translate: 0 110%; } to { translate: none; } }

@media (prefers-reduced-motion: no-preference) {
  /* --- ファーストビュー --- */
  .js :is(.p-motion-soft, .p-motion-rich) .hero:not(.is-in) :is(.hero__name, .hero__copy, .hero__links) {
    opacity: 0; animation: p-failsafe 0.4s ease 2.5s forwards;
  }
  :is(.p-motion-soft, .p-motion-rich) .hero.is-in .hero__name { animation: p-name 1.5s cubic-bezier(.2, .7, .2, 1) 0.15s both; }
  .p-motion-soft .hero.is-in .hero__copy { animation: p-fadeup 1.1s ease 0.7s both; }
  .p-motion-rich .hero.is-in .ch { animation: p-ink 0.9s ease both; animation-delay: calc(var(--i, 0) * 70ms + 750ms); }
  :is(.p-motion-soft, .p-motion-rich) .hero.is-in .hero__links { animation: p-fadeup 0.9s ease var(--after, 1.3s) both; }
  .p-motion-soft .hero__photo img { animation: p-fade 1.4s ease both; }
  .p-motion-rich .hero__photo img { animation: p-kenburns 3.2s cubic-bezier(.2, .6, .2, 1) both; }
  .p-motion-rich .hero__photo { will-change: translate; }
  /* 写真が出てくる前の色は、明るい見出しの色ではなく暗い色にする（白っぽくかすまないように） */
  :is(.p-motion-soft, .p-motion-rich):is(.p-hero-full-vertical, .p-hero-standard) .hero { background-color: #0e0805; }

  /* --- スクロールで出る（main.js が .rv を付け、見えたら .rv-in を付ける） --- */
  .motion-on .rv { opacity: 0; translate: 0 28px; transition: opacity 0.9s ease, translate 0.9s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--d, 0s); }
  .motion-on .rv.rv-in { opacity: 1; translate: none; }
  /* 動いている途中に、傾いた紙や横から入る写真が画面の右にはみ出して横スクロールが出ないように */
  .motion-on main { overflow-x: clip; }

  /* --- 見出しの下線が描かれる・小さな絵が揺れる（rich） --- */
  .motion-on .p-motion-rich .sec-title.rv::after { scale: 0 1; transition: scale 0.9s cubic-bezier(.6, .1, .3, 1) calc(var(--d, 0s) + 0.35s); }
  .motion-on .p-motion-rich .about__text .sec-title.rv::after { transform-origin: left center; }
  .motion-on .p-motion-rich .sec-title.rv-in::after { scale: 1 1; }
  .motion-on .p-motion-rich .sec-title.rv-in::before { transform-origin: 50% 0; animation: p-swing 2.4s ease-in-out calc(var(--d, 0s) + 0.2s) both; }

  /* --- 名物：写真が横から、ひとことがポンと、料理名に丸が描かれ、値札が揺れて止まる（rich） --- */
  .motion-on .p-motion-rich .sig.rv { opacity: 1; translate: none; }
  .motion-on .p-motion-rich .sig.rv :is(.sig__photo, .sig__body) { opacity: 0; translate: 0 28px; transition: opacity 1s ease, translate 1s cubic-bezier(.2, .7, .2, 1); }
  .motion-on .p-motion-rich .sig.rv .sig__body { transition-delay: 0.2s; }
  .motion-on .p-motion-rich .sig.rv-in :is(.sig__photo, .sig__body) { opacity: 1; translate: none; }
  .motion-on .p-motion-rich .sig.rv-in .sig__shout { animation: p-pop 0.7s cubic-bezier(.3, .7, .3, 1.2) 0.5s both; }
  .motion-on .p-motion-rich .rv .mark::after { clip-path: inset(0 100% 0 0); }
  .motion-on .p-motion-rich .rv-in .mark::after { animation: p-draw 0.9s cubic-bezier(.6, .1, .3, 1) 0.65s both; }
  .motion-on .p-motion-rich.p-price-tag .rv-in .price { animation: p-tag 1s ease-out 0.9s both; }
  .motion-on .p-motion-rich.p-price-circle .rv-in .price::after { animation: p-draw 0.8s cubic-bezier(.6, .1, .3, 1) 0.9s both; }
  @media (min-width: 768px) {
    .motion-on .p-motion-rich .sig.rv .sig__photo { translate: -60px 0; }
    .motion-on .p-motion-rich .sig--rev.rv .sig__photo { translate: 60px 0; }
    /* 2.2.1：見えたあとは元の位置に戻す（上の2行より後ろに置かないと、写真が横にずれたまま残る） */
    .motion-on .p-motion-rich .sig.rv-in .sig__photo { translate: none; }
  }

  /* --- 紙のもの（お品書き・店の人の言葉・季節のカード）は少し傾いて置かれる（rich） --- */
  .motion-on .p-motion-rich :is(.menu-sheet, .voice__card, .season-item).rv {
    rotate: -1.5deg; transition: opacity 0.9s ease, translate 0.9s cubic-bezier(.2, .7, .2, 1), rotate 1.3s cubic-bezier(.2, .7, .2, 1);
    transition-delay: var(--d, 0s);
  }
  .motion-on .p-motion-rich .voice__card.rv { rotate: 1.5deg; }
  .motion-on .p-motion-rich :is(.menu-sheet, .voice__card, .season-item).rv-in { rotate: 0deg; }
  .motion-on .p-motion-rich .menu-item.rv { translate: 0 12px; transition-duration: 0.6s; }
  .motion-on .p-motion-rich .menu-item.rv-in { translate: none; }

  /* --- ヘッダーの影・スマホ下のボタン・ボタンの手ざわり --- */
  :is(.p-motion-soft, .p-motion-rich) .header { transition: box-shadow 0.3s ease; }
  :is(.p-motion-soft, .p-motion-rich) .header.is-scrolled { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28); }
  :is(.p-motion-soft, .p-motion-rich) .fixedbar { animation: p-barin 0.6s cubic-bezier(.2, .7, .2, 1) 1.6s both; }
  :is(.p-motion-soft, .p-motion-rich) .btn { transition: background 0.2s ease, border-color 0.2s ease, translate 0.2s ease, box-shadow 0.2s ease; }
  :is(.p-motion-soft, .p-motion-rich) .btn:hover { translate: 0 -2px; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25); }
}

/* 2.1.1：スマホで「写真全面」のとき、画面下の固定ボタンとサンプルの帯にボタンが隠れないようにする */
@media (max-width: 767px) {
  .p.has-fixedbar.p-hero-full-vertical .hero__text { padding-bottom: 116px; }
  .p.p-hero-full-vertical:has(.sample-bar) .hero { min-height: min(calc(100svh - 136px), 900px); }
}

/* ===== 2.2.2 大きな画面（外付けモニター・幅1280px以上）でも、中身が端に寄ったり小さく見えたりしないように ===== */
@media (min-width: 1600px) {
  :root { --container: 1180px; }
}
@media (min-width: 2200px) {
  :root { --container: 1320px; }
  html { font-size: 112.5%; }
}
@media (min-width: 1280px) {
  /* 写真と文字を左右に並べる型：文字の左端をページの中身（ロゴ・見出し）の左端にそろえ、写真は右へ広げる */
  .p-hero-split .hero { grid-template-columns: calc(max(0px, (100vw - var(--container)) / 2) + 560px) minmax(0, 1fr); min-height: min(calc(100svh - 110px), 760px); }
  .p-hero-split .hero__text { padding-left: max(40px, calc((100vw - var(--container)) / 2 + var(--gutter))); padding-right: 48px; }
  .p-hero-split .hero__name { font-size: clamp(2.25rem, 3.2vw, 3.5rem); }
}

/* ===== お店だけの飾り（src/personality/shop.css） ===== */
/* =========================================================
   小料理 しの だけの飾り（v2.2 shop.css）
   テーマ：生成りの紙と墨。余白を広く、見出しは縦書き、季節の品は色紙に
   ========================================================= */

.p .section { padding: 88px 0; }
.p .section + .section { border-top: 1px solid color-mix(in srgb, var(--p-text) 12%, transparent); }

/* 見出し：スマホは小さな葉＋横書き、PCは右端に縦書き（和の本のように右から読む） */
.p .sec-title { letter-spacing: 0.3em; font-size: clamp(1.5rem, 5.6vw, 1.875rem); }
.p .sec-title::after { width: 1px; height: 28px; margin: 14px auto 0; -webkit-mask: none; mask: none; background: var(--p-accent); }
@media (min-width: 900px) {
  .p .section:not(#about) > .container { position: relative; padding-right: 140px; }
  .p .section:not(#about) .sec-title {
    position: absolute; top: 0; right: 32px; margin: 0; writing-mode: vertical-rl; white-space: nowrap; height: auto; max-width: none; font-size: 2rem; letter-spacing: 0.42em; text-align: start;
  }
  .p .section:not(#about) .sec-title::before { margin: 0 0 14px; }
  .p .section:not(#about) .sec-title::after { display: none; }
  .p .section:not(#about) .sec-title { border-right: 1px solid var(--p-accent); padding-right: 14px; }
  .p .sec-lead { text-align: left; margin: 0 0 40px; }
}

/* 名物：縦長の写真を3つ並べ、料理名を写真の下に小さく（器を見せる） */
.sig-list { display: grid; gap: 48px; }
.sig, .sig:not(.no-photo) { display: block; text-align: center; }
.sig__photo img { aspect-ratio: 3 / 4; }
.sig .pframe { outline-offset: 7px; }
.sig__shout { transform: none; font-size: 1rem; letter-spacing: 0.2em; color: var(--p-accent); }
.sig__name { font-size: clamp(1.5rem, 6vw, 1.875rem); margin: 6px 0 4px; letter-spacing: 0.12em; }
.sig__price { font-size: 1rem; color: color-mix(in srgb, var(--p-text) 70%, var(--p-bg)); }
.sig__desc { font-size: 0.9375rem; max-width: 22em; margin: 10px auto 0; }
.sig .mark::after { opacity: 0.55; }
@media (min-width: 768px) {
  .sig-list { grid-template-columns: repeat(3, 1fr); gap: 40px; }
  .sig--rev:not(.no-photo) .sig__photo { order: 0; }
  .sig:nth-child(2) { margin-top: 56px; }
}

/* お店について：写真を大きく左に、文は細い縦の線と一緒に */
@media (min-width: 768px) {
  .p .about { grid-template-columns: 7fr 5fr; }
  .p .about__photo { order: -1; }
  .p .about__text { border-left: 1px solid color-mix(in srgb, var(--p-accent) 50%, transparent); padding-left: 32px; }
}

/* 季節のおすすめ：金の縁の色紙（正方形）に、丸い器の写真 */
.section--season { background: color-mix(in srgb, var(--p-accent) 7%, var(--p-bg)); }
.season-list { max-width: 560px; }
.season-item, .season-item:not(.no-photo) {
  display: block; padding: 36px 28px 32px; text-align: center; background-color: #fffaf0;
  border: 1px solid #c9a45c; outline: 6px solid #fffaf0; outline-offset: -14px; box-shadow: 0 18px 36px rgba(60, 40, 20, 0.18);
}
.season__photo { width: 72%; margin: 0 auto; }
.season__photo img { aspect-ratio: 1 / 1; border-radius: 50%; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18); }
.season__photo.pframe { outline: 0; margin: 0 auto; }
.season__period span { border-color: #c9a45c; border-radius: 0; transform: none; letter-spacing: 0.2em; }

/* 女将のことば：罫線の入った便箋に、朱の細い枠 */
.voice__card {
  background-color: #fffdf6; border: 1px solid color-mix(in srgb, var(--p-accent) 45%, transparent); outline: 1px solid color-mix(in srgb, var(--p-accent) 25%, transparent); outline-offset: -8px;
  background-image: repeating-linear-gradient(transparent 0 calc(2.05em - 1px), color-mix(in srgb, var(--p-accent) 18%, transparent) calc(2.05em - 1px) 2.05em);
  background-position: 0 30px; line-height: 2.05; box-shadow: 0 12px 28px rgba(60, 40, 20, 0.14);
}
.voice__by { font-family: var(--p-deco); }
.voice__photo img { aspect-ratio: 3 / 4; }

/* お知らせ・店舗情報は、罫線を細く */
.news-item { border-bottom-style: dotted; }
.info-list > div { border-bottom-style: dotted; }

/* フッター：墨色の帯に、筆の屋号 */
.p .footer { background: #2a2622; color: #f5efe2; border-top: 0; }
.p .footer a { color: #f5efe2; }