/* =========================================================
   犬用・猫用ケーキのサイト 共通CSS（土台）
   方向性：うちの子のお祝い／やさしい／迷わない
   色の考え方：かぼちゃの皮の深緑（サイトの色）＋焼き芋の金色（目印）
               ＋ヨーグルトの白（地）。いちごのベリー色は Cake.jp のボタンだけに使う。
   ここに書いた値は最低限の決まり。ページを作るときは、見本ページと並べて
   同じに見えるまで直す。値を場当たりで増やさない（足すときはここに足す）。
   ========================================================= */

:root {
  /* 色 */
  --green-900: #234a3e;   /* 見出しの帯・ヘッダー・フッター */
  --green-700: #2e6b57;   /* サイト内のボタン・リンク */
  --green-200: #cfe2d8;   /* 線 */
  --green-100: #e6f0eb;   /* 箱の地 */
  --green-50:  #f3f8f5;   /* 表のしま */
  --gold-500:  #f0b43a;   /* h3 の線・順位・目印 */
  --gold-200:  #fbe3a8;
  --gold-100:  #fff4d9;   /* 結論の箱の地 */
  --choco:     #5a3e33;   /* 名前プレート（このサイトの目印）*/
  --cream:     #fff8ec;   /* 名前プレートの文字 */
  --berry:     #e5175c;   /* Cake.jp のボタンだけ */
  --berry-dark:#b5175c;
  --berry-50:  #fde8ef;
  --rakuten:   #bf0000;
  --rakuten-dark:#8c0000;
  --amazon:    #ffd814;
  --amazon-dark:#e3bd00;
  --amber-100: #fff6e5;   /* 注意の箱 */
  --amber-700: #9a6114;
  --ink:       #3a3530;   /* 本文（真っ黒にしない）*/
  --ink-soft:  #6b635a;   /* 補足 */
  --line:      #ddd6cb;
  --white:     #ffffff;

  /* 文字 */
  --font-body: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", "Meiryo", "Noto Sans JP", sans-serif;
  --font-head: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "BIZ UDPGothic", "Meiryo", sans-serif;
  --font-plate: "Yusei Magic", "Zen Maru Gothic", sans-serif;

  --fs-body: 17px;
  --fs-small: 14.5px;
  --fs-note: 13px;
  --fs-h1: 26px;
  --fs-h2: 22px;
  --fs-h3: 19.5px;
  --fs-h4: 17.5px;
  --lh-body: 1.9;
  --ls-body: .04em;

  /* 余白（この5段階だけを使う）*/
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 40px;
  --sp-5: 64px;

  --radius-s: 8px;
  --radius-m: 14px;
  --radius-l: 20px;
  --main-w: 640px;
  --side-w: 300px;
}

@media (min-width: 1024px) {
  :root { --fs-h1: 30px; --fs-h2: 24px; --fs-h3: 20.5px; }
}

/* ---------- 基本 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  word-break: normal;
  overflow-wrap: anywhere;
  line-break: strict;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--green-700); text-underline-offset: 3px; }
a:hover { color: var(--green-900); }
:focus-visible { outline: 3px solid var(--gold-500); outline-offset: 2px; border-radius: 4px; }
p { margin: 0 0 1.1em; }
strong { color: var(--green-900); }
small, .note { font-size: var(--fs-note); color: var(--ink-soft); line-height: 1.7; }

/* 語の途中で折り返さないための包み（値段・号数・店名・地名など）*/
.nw { white-space: nowrap; }
/* 見出し・ボタン・カードの題は文節で折る。
   HTML を作るときに BudouX などで文節の切れ目に <wbr> を入れ、ここで keep-all にする。
   （<wbr> を入れ忘れると、長い題が画面の端で切れる。tools/check.py が見つける）*/
h1, h2, h3, h4, .btn, .catch, .pick__name, .item__name, .rank__nick, .need__t, .shop__name,
.box__title, .toc a, .area__t, .flow__when, .faq summary, .related a, .side-box li a {
  word-break: keep-all; overflow-wrap: anywhere; text-wrap: balance;
}
p, li, td, .answer__text, .lead-answer { text-wrap: pretty; }

/* ---------- 骨組み ---------- */
.site-header {
  background: var(--green-900);
  color: var(--white);
}
.site-header__inner {
  max-width: calc(var(--main-w) + var(--side-w) + 48px + 40px);
  margin: 0 auto;
  padding: 10px 20px;
  display: flex; align-items: center; gap: var(--sp-2);
}
.site-logo {
  display: flex; align-items: center; gap: 10px;
  color: var(--white); text-decoration: none;
  font-family: var(--font-head); font-weight: 700; font-size: 18px; line-height: 1.3;
}
.site-logo svg { width: 38px; height: 38px; flex: none; }
.site-logo:hover { color: var(--white); }
/* サイト名は語の途中で折らない。幅のせまいスマホでは字を少し小さくする */
.site-logo span { white-space: nowrap; font-size: clamp(14px, 4.2vw, 18px); letter-spacing: .02em; }
.header-search { white-space: nowrap; flex: none; }
@media (max-width: 374px) {
  .site-header__inner { padding: 10px 12px; gap: 8px; }
  .site-logo { gap: 8px; }
  .site-logo svg { width: 30px; height: 30px; }
  .header-search { padding: 0 12px; }
  .header-search__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
.header-search {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 48px; padding: 0 14px;
  background: rgba(255,255,255,.14); color: var(--white);
  border: 0; border-radius: 999px;
  font: 700 15px/1 var(--font-body); text-decoration: none;
}
.header-search svg { width: 20px; height: 20px; }
.header-search:hover { background: rgba(255,255,255,.24); color: var(--white); }

.layout {
  max-width: calc(var(--main-w) + var(--side-w) + 48px + 40px);
  margin: 0 auto;
  padding: 0 20px var(--sp-5);
}
.main { max-width: var(--main-w); margin: 0 auto; min-width: 0; }
.side { display: none; }
@media (min-width: 1024px) {
  .layout { display: grid; grid-template-columns: minmax(0, var(--main-w)) var(--side-w); gap: 48px; justify-content: center; }
  .main { margin: 0; }
  .side { display: block; padding-top: var(--sp-3); }
  .side__sticky { position: sticky; top: 16px; display: grid; gap: var(--sp-2); }
}

/* パンくず */
.crumbs { font-size: var(--fs-note); color: var(--ink-soft); padding: 12px 0 0; line-height: 1.6; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 0; }
.crumbs li:not(:last-child)::after { content: "／"; margin: 0 6px; color: var(--line); }
.crumbs a { color: var(--ink-soft); }

/* ---------- 見出し ---------- */
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 700; line-height: 1.5; letter-spacing: .03em; word-break: keep-all; overflow-wrap: anywhere; }
h1 { font-size: var(--fs-h1); color: var(--green-900); margin: var(--sp-2) 0 var(--sp-2); line-height: 1.45; }
h2 {
  font-size: var(--fs-h2); color: var(--white);
  background: var(--green-900);
  border-radius: var(--radius-m);
  padding: 14px 18px 14px 52px;
  margin: var(--sp-5) 0 var(--sp-3);
  position: relative;
}
h2::before { /* 肉球の目印 */
  content: ""; position: absolute; left: 16px; top: 50%; width: 24px; height: 24px; transform: translateY(-50%);
  background: var(--gold-500);
  -webkit-mask: url("../img/icon-paw.svg") center / contain no-repeat;
          mask: url("../img/icon-paw.svg") center / contain no-repeat;
}
h3 {
  font-size: var(--fs-h3); color: var(--green-900);
  border-left: 6px solid var(--gold-500);
  border-bottom: 2px dotted var(--green-200);
  padding: 4px 0 8px 14px;
  margin: var(--sp-4) 0 var(--sp-2);
}
h4 { font-size: var(--fs-h4); color: var(--green-900); margin: var(--sp-3) 0 var(--sp-1); }
h4::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--gold-500); margin-right: 8px; vertical-align: .1em; }

/* 見出しのすぐ下の答えの1文 */
.lead-answer { font-size: 18px; font-weight: 700; color: var(--green-900); line-height: 1.8; margin-bottom: var(--sp-2); }

/* ---------- PR 表記（広告の近くに小さく薄く）---------- */
.pr { display: block; text-align: right; font-size: 11px; color: #a39b90; letter-spacing: .08em; margin: 0 0 4px; line-height: 1.4; }

/* ---------- ボタン ---------- */
.btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 56px; padding: 10px 18px;
  border-radius: var(--radius-m); border: 0;
  font: 700 17px/1.4 var(--font-body); letter-spacing: .04em; text-align: center;
  text-decoration: none; cursor: pointer;
  word-break: keep-all; overflow-wrap: anywhere;
  position: relative; overflow: hidden;
  transition: transform .08s ease, box-shadow .08s ease, background-color .15s ease;
}
.btn:active { transform: translateY(2px); }
.btn svg { width: 22px; height: 22px; flex: none; }

/* Cake.jp（いちご色はここだけ）*/
.btn-cakejp { background: var(--berry); color: var(--white); box-shadow: 0 4px 0 var(--berry-dark); }
.btn-cakejp:hover { background: var(--berry-dark); color: var(--white); }
.btn-cakejp:active { box-shadow: 0 2px 0 var(--berry-dark); }
/* 楽天・Amazon（提携していれば使う）*/
.btn-rakuten { background: var(--rakuten); color: var(--white); box-shadow: 0 4px 0 var(--rakuten-dark); }
.btn-rakuten:hover { background: var(--rakuten-dark); color: var(--white); }
.btn-amazon { background: var(--amazon); color: #0f1111; box-shadow: 0 4px 0 var(--amazon-dark); }
.btn-amazon:hover { background: #f7ca00; color: #0f1111; }
/* サイトの中へ */
.btn-inner { background: var(--green-700); color: var(--white); box-shadow: 0 4px 0 var(--green-900); }
.btn-inner:hover { background: var(--green-900); color: var(--white); }
.btn-soft { background: var(--green-100); color: var(--green-900); box-shadow: inset 0 0 0 2px var(--green-200), 0 3px 0 var(--green-200); min-height: 52px; font-size: 16px; }
.btn-soft:hover { background: #d8e8df; color: var(--green-900); }

/* 主役のボタンだけ：数秒ごとに光が走る */
.btn.is-main::after {
  content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.45) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-18deg);
  animation: shine 4.5s ease-in-out infinite;
}
@keyframes shine { 0%, 70% { left: -60%; } 100% { left: 130%; } }
@media (prefers-reduced-motion: reduce) { .btn.is-main::after { animation: none; display: none; } }

/* ボタンの上のひとこと（大事なボタンだけ）*/
.catch { text-align: center; font-weight: 700; color: var(--green-900); font-size: 15.5px; line-height: 1.5; margin: 0 0 6px; word-break: keep-all; }
.catch::before { content: "＼ "; color: var(--gold-500); }
.catch::after { content: " ／"; color: var(--gold-500); }
.cta { margin: var(--sp-3) 0; }
.cta .btn + .btn { margin-top: var(--sp-2); }
.cta__meta { text-align: center; font-size: var(--fs-note); color: var(--ink-soft); margin: 0 0 6px; line-height: 1.5; }
.cta__after { margin-top: var(--sp-2); } /* ボタンの下の文との間を上と同じに */

/* ---------- 名前プレート（このサイトの目印。使うのは「迷ったらこれ」とトップの絵だけ）---------- */
.plate {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 132px; padding: 6px 22px 7px;
  background: var(--choco); color: var(--cream);
  border-radius: 999px;
  font-family: var(--font-plate); font-size: 19px; line-height: 1.3; letter-spacing: .06em;
  box-shadow: inset 0 0 0 3px rgba(255,248,236,.18), 0 3px 0 rgba(90,62,51,.35);
  transform: rotate(-3deg);
  white-space: nowrap;
}

/* ---------- 結論の箱 ---------- */
.answer {
  background: var(--gold-100);
  border: 2px solid var(--gold-500);
  border-radius: var(--radius-l);
  padding: var(--sp-3) var(--sp-2) var(--sp-2);
  margin: var(--sp-2) 0 var(--sp-3);
  position: relative;
}
.answer__label {
  position: absolute; top: -15px; left: 16px;
  background: var(--gold-500); color: var(--choco);
  font: 700 14px/1 var(--font-head); padding: 7px 14px; border-radius: 999px;
}
.answer__text { font-size: 17.5px; font-weight: 700; color: var(--green-900); line-height: 1.85; margin-bottom: var(--sp-2); }
.answer__sub { font-size: 15.5px; margin-bottom: 0; }
.answer__sub small { font-size: 13px; }

/* 迷ったらこれ */
.pick {
  background: var(--white); border-radius: var(--radius-m);
  box-shadow: 0 0 0 1px var(--gold-200), 0 6px 18px rgba(90,62,51,.10);
  padding: var(--sp-2);
}
.pick__head { display: flex; justify-content: center; margin: -32px 0 12px; }
.pick__body { display: grid; grid-template-columns: 96px 1fr; grid-template-areas: "photo title" "facts facts"; gap: 12px 14px; align-items: start; }
.pick__photo { grid-area: photo; }
.pick__title { grid-area: title; align-self: center; }
.pick__facts { grid-area: facts; }
.pick__photo { border-radius: var(--radius-s); overflow: hidden; aspect-ratio: 1; background: var(--green-50); }
.pick__photo img { width: 100%; height: 100%; object-fit: cover; }
.pick__shop { font-size: var(--fs-note); color: var(--ink-soft); line-height: 1.5; margin: 0 0 2px; }
.pick__name { font: 700 16.5px/1.55 var(--font-head); color: var(--green-900); margin: 0 0 6px; }
.pick__name a { color: inherit; text-decoration: none; }
.pick__price { font-size: 15.5px; font-weight: 700; color: var(--ink); margin: 0; line-height: 1.6; }
.pick__name a:hover { text-decoration: underline; }
.facts { list-style: none; margin: 0; padding: 0; font-size: 15px; line-height: 1.7; }
.facts li { display: grid; grid-template-columns: 4.6em 1fr; gap: 6px; padding: 3px 0; border-bottom: 1px dashed var(--line); }
.facts li:last-child { border-bottom: 0; }
.facts b { color: var(--ink-soft); font-weight: 700; font-size: 13.5px; }
@media (min-width: 560px) { .pick__body { grid-template-columns: 168px 1fr; grid-template-areas: "photo title" "photo facts"; } .pick__title { align-self: start; } }

/* ---------- 属性のアイコン（サイト全体で同じものを使う）---------- */
.attrs { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 10px 0 0; padding: 0; }
.attr {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--green-100); color: var(--green-900);
  border-radius: 999px; padding: 3px 10px 3px 6px;
  font-size: 13px; font-weight: 700; line-height: 1.4; white-space: nowrap;
}
.attr svg { width: 18px; height: 18px; flex: none; }
.attr--cat { background: #efe8f6; color: #4b3a63; }

/* ---------- 目次（閉じられる・初期は開）---------- */
.toc { border: 2px solid var(--green-200); border-radius: var(--radius-m); margin: var(--sp-3) 0; background: var(--white); }
.toc summary {
  list-style: none; cursor: pointer; min-height: 52px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 16px; background: var(--green-100); border-radius: 12px 12px 0 0;
  font: 700 17px/1.4 var(--font-head); color: var(--green-900);
}
.toc:not([open]) summary { border-radius: 12px; }
.toc summary::-webkit-details-marker { display: none; }
.toc summary .toc__state { font: 700 13px/1 var(--font-body); background: var(--white); color: var(--green-700); padding: 8px 12px; border-radius: 999px; box-shadow: inset 0 0 0 2px var(--green-200); }
.toc[open] .toc__open, .toc:not([open]) .toc__close { display: none; }
.toc ol { margin: 0; padding: 12px 16px 14px 2.2em; font-size: 16px; line-height: 1.7; }
.toc li { padding: 4px 0; }
.toc ol ol { padding: 2px 0 0 1.2em; font-size: 15px; list-style: none; }
.toc ol ol li::before { content: "・"; color: var(--gold-500); margin-left: -1em; }

/* ---------- 箱 ---------- */
.box { border-radius: var(--radius-m); padding: var(--sp-2) 18px; margin: var(--sp-3) 0; }
.box > :last-child { margin-bottom: 0; }
.box__title { display: flex; align-items: center; gap: 8px; font: 700 16.5px/1.5 var(--font-head); margin: 0 0 8px; }
.box__title svg { width: 24px; height: 24px; flex: none; }
.box--point { background: var(--green-100); }
.box--point .box__title { color: var(--green-900); }
.box--caution { background: var(--amber-100); border: 2px solid #efcf95; }
.box--caution .box__title { color: var(--amber-700); }
.box--cat { background: #f5f0fa; border: 2px solid #e1d5ee; }
.box--cat .box__title { color: #4b3a63; }

/* 箇条書き */
.list-check { list-style: none; padding: 0; margin: 0 0 1.1em; }
.list-check li { position: relative; padding-left: 30px; margin: 6px 0; }
.list-check li::before { content: ""; position: absolute; left: 0; top: .45em; width: 20px; height: 20px; border-radius: 50%; background: var(--green-700) url("../img/icon-check-white.svg") center / 14px no-repeat; }

/* ---------- 表 ---------- */
.table-wrap { margin: var(--sp-3) 0; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-m); box-shadow: 0 0 0 1px var(--green-200); }
.scroll-hint { display: block; text-align: right; font-size: var(--fs-note); color: var(--green-700); font-weight: 700; margin: 0 0 4px; }
.scroll-hint::after { content: " ›"; }
.scroll-hint.is-off { display: none; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.6; background: var(--white); }
.tbl caption { caption-side: top; text-align: left; font: 700 15.5px/1.5 var(--font-head); color: var(--green-900); padding: 0 0 6px; }
.tbl th, .tbl td { padding: 10px 12px; border-bottom: 1px solid var(--green-200); vertical-align: top; text-align: left; }
.tbl thead th { background: var(--green-900); color: var(--white); font-weight: 700; white-space: nowrap; }
.tbl tbody tr:nth-child(even) { background: var(--green-50); }
.tbl tbody th { color: var(--green-900); font-weight: 700; background: var(--green-100); word-break: keep-all; }
.tbl .is-good { color: var(--green-900); font-weight: 700; }
.tbl .mark { display: inline-block; font-weight: 700; color: var(--green-700); }
.table-scroll .tbl { min-width: 560px; }

/* ランキング（スマホは1行に1商品＋写真、PCは表）*/
.rank { list-style: none; margin: var(--sp-3) 0; padding: 0; border-radius: var(--radius-m); box-shadow: 0 0 0 1px var(--green-200); overflow: hidden; }
.rank__row { display: grid; grid-template-columns: 36px 84px 1fr; gap: 12px; align-items: start; padding: 14px 14px; border-bottom: 1px solid var(--green-200); background: var(--white); }
.rank__row:nth-child(even) { background: var(--green-50); }
.rank__row:last-child { border-bottom: 0; }
.rank__no { width: 34px; height: 34px; border-radius: 50%; background: var(--gold-500); color: var(--choco); display: grid; place-items: center; font: 700 17px/1 var(--font-head); }
.rank__row:nth-child(n+4) .rank__no { background: var(--green-100); color: var(--green-900); }
.rank__photo { border-radius: var(--radius-s); overflow: hidden; aspect-ratio: 1; background: var(--green-50); }
.rank__photo img { width: 100%; height: 100%; object-fit: cover; }
.rank__nick { font: 700 16px/1.5 var(--font-head); color: var(--green-900); margin: 0; }
.rank__nick a { color: inherit; }
.rank__shop { font-size: var(--fs-note); color: var(--ink-soft); margin: 0 0 4px; line-height: 1.5; }
.rank__facts { font-size: 14px; line-height: 1.6; margin: 0; }
.rank__facts span { display: inline-block; margin-right: 10px; white-space: nowrap; }
.rank__btn { grid-column: 2 / -1; margin-top: 4px; }
.rank__btn .btn { min-height: 48px; font-size: 15px; }
@media (min-width: 720px) {
  .rank__row { grid-template-columns: 40px 96px 1fr 262px; align-items: center; }
  .rank__btn { grid-column: auto; margin-top: 0; }
}

/* ---------- 商品カード ---------- */
/* 写真は正方形のまま出す（切り抜くと、写真に入った文字や飾りが欠ける）。
   写真は「ケーキそのものが写ったもの」だけ。文字だらけの説明画像は使わない。枚数は1〜3枚で、枚数に合わせて並びが変わる */
.items { display: grid; gap: var(--sp-3); margin: var(--sp-3) 0; }
.item {
  display: grid; grid-template-areas: "gal" "info" "why" "foot"; gap: 0;
  background: var(--white); border-radius: var(--radius-l);
  box-shadow: 0 0 0 1px var(--green-200);
  padding: var(--sp-2); margin: var(--sp-2) 0 var(--sp-3);
}
.item__gallery { grid-area: gal; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 12px; }
.item__gallery > * { border-radius: var(--radius-s); overflow: hidden; aspect-ratio: 1; background: var(--green-50); display: block; }
.item__gallery > :first-child { grid-column: 1 / -1; }
.item__gallery--1 { grid-template-columns: 1fr; }
.item__gallery--2 { grid-template-columns: 1fr 1fr; }
.item__gallery--2 > :first-child { grid-column: auto; }
.item__gallery img { width: 100%; height: 100%; object-fit: cover; }
.item__info { grid-area: info; min-width: 0; }
.item__shop { font-size: var(--fs-note); color: var(--ink-soft); margin: 0 0 2px; line-height: 1.5; }
.item__name { font: 700 17px/1.55 var(--font-head); color: var(--green-900); margin: 0 0 8px; }
.item__name a { color: inherit; text-decoration: none; }
.item__name a:hover { text-decoration: underline; }
.item__why { grid-area: why; font-size: 15.5px; line-height: 1.85; margin: 14px 0 0; }
.item__foot { grid-area: foot; padding-top: var(--sp-1); }
.item__foot .cta { margin-bottom: 0; }
@media (min-width: 720px) {
  .item { grid-template-columns: 236px 1fr; grid-template-areas: "gal info" "why why" "foot foot"; column-gap: 20px; }
  .item__gallery { margin-bottom: 0; align-self: start; }
  .item__gallery--2 { grid-template-columns: 1fr 1fr; }
  .item__gallery--2 > :first-child { grid-column: 1 / -1; }
}

/* ---------- お店のカード（地域のページ）---------- */
.shop { background: var(--white); border-radius: var(--radius-l); box-shadow: 0 0 0 1px var(--green-200); padding: var(--sp-2) 18px; margin: var(--sp-3) 0; }
.shop__head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.shop__photo { width: 88px; flex: none; border-radius: var(--radius-s); overflow: hidden; aspect-ratio: 1; background: var(--green-50); }
.shop__photo img { width: 100%; height: 100%; object-fit: cover; }
.shop__photo--icon { display: grid; place-items: center; }
.shop__photo--icon svg { width: 60%; height: 60%; }
.shop__name { font: 700 18px/1.5 var(--font-head); color: var(--green-900); margin: 0; }
.shop__where { font-size: 14px; color: var(--ink-soft); margin: 2px 0 0; }
.shop__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; padding: 0; list-style: none; }
.shop__facts { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.6; margin: 10px 0 12px; }
.shop__facts th { width: 6.2em; text-align: left; vertical-align: top; color: var(--green-900); background: var(--green-100); padding: 8px 10px; font-weight: 700; border-bottom: 2px solid var(--white); white-space: nowrap; }
.shop__facts td { padding: 8px 10px; border-bottom: 1px solid var(--green-100); }
.shop--quiet { box-shadow: 0 0 0 1px var(--line); background: #fcfbf8; }
.shop--quiet .shop__name { font-size: 17px; color: var(--ink); }

/* ---------- 流れ（注文から食べるまで）---------- */
.flow { list-style: none; margin: var(--sp-3) 0; padding: 0; counter-reset: flow; }
.flow li { position: relative; padding: 0 0 var(--sp-2) 52px; counter-increment: flow; }
.flow li::before { content: counter(flow); position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--green-700); color: var(--white); display: grid; place-items: center; font: 700 17px/1 var(--font-head); }
.flow li::after { content: ""; position: absolute; left: 17px; top: 40px; bottom: 4px; width: 2px; background: var(--green-200); }
.flow li:last-child::after { display: none; }
.flow__when { display: block; font: 700 16.5px/1.5 var(--font-head); color: var(--green-900); margin-bottom: 2px; }

/* ---------- 目的・地域から探す ---------- */
.need-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: var(--sp-2) 0; list-style: none; padding: 0; }
@media (min-width: 720px) { .need-grid { grid-template-columns: repeat(3, 1fr); } }
.need {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px; height: 100%;
  background: var(--green-50); border-radius: var(--radius-m); padding: 14px;
  box-shadow: inset 0 0 0 1px var(--green-200);
  text-decoration: none; color: var(--ink);
}
.need:hover { background: var(--green-100); color: var(--ink); }
.need svg { width: 34px; height: 34px; }
.need__t { font: 700 16px/1.45 var(--font-head); color: var(--green-900); word-break: keep-all; }
.need__d { font-size: 13.5px; line-height: 1.6; color: var(--ink-soft); }

.areas { display: grid; gap: 10px; margin: var(--sp-2) 0; }
.area { background: var(--green-50); border-radius: var(--radius-m); padding: 12px 14px; box-shadow: inset 0 0 0 1px var(--green-200); }
.area__t { font: 700 15.5px/1.4 var(--font-head); color: var(--green-900); margin: 0 0 8px; }
.area ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.area a { display: inline-flex; align-items: center; min-height: 44px; padding: 6px 14px; background: var(--white); border-radius: 10px; box-shadow: inset 0 0 0 1px var(--green-200); color: var(--green-900); font-weight: 700; font-size: 15px; text-decoration: none; }
.area a:hover { background: var(--green-100); }

/* ---------- よくある質問 ---------- */
.faq { margin: var(--sp-2) 0; display: grid; gap: 10px; }
.faq details { border-radius: var(--radius-m); box-shadow: 0 0 0 1px var(--green-200); background: var(--white); }
.faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 32px 1fr 24px; gap: 10px; align-items: start; padding: 14px; font: 700 16.5px/1.6 var(--font-head); color: var(--green-900); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "Q"; width: 30px; height: 30px; border-radius: 50%; background: var(--green-700); color: var(--white); display: grid; place-items: center; font-size: 15px; }
.faq summary::after { content: "＋"; color: var(--green-700); font-size: 20px; line-height: 1.3; }
.faq details[open] summary::after { content: "－"; }
.faq__a { padding: 0 16px 14px 56px; font-size: 16px; }
.faq__a > :last-child { margin-bottom: 0; }

/* ---------- 出どころの段 ---------- */
.sources { margin: var(--sp-4) 0 0; padding: var(--sp-2) 18px; background: #faf8f4; border-radius: var(--radius-m); font-size: 13.5px; line-height: 1.75; color: var(--ink-soft); }
.sources__t { font: 700 14.5px/1.5 var(--font-head); color: var(--ink); margin: 0 0 6px; }
.sources ul { margin: 0; padding-left: 1.2em; }
.sources a { color: var(--ink-soft); }

/* ---------- 関連・サイドバー ---------- */
.related { list-style: none; margin: var(--sp-2) 0; padding: 0; display: grid; gap: 10px; }
.faq + .related { margin-top: var(--sp-4); }
.related a { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; padding: 10px; border-radius: var(--radius-m); background: var(--green-50); box-shadow: inset 0 0 0 1px var(--green-200); text-decoration: none; color: var(--green-900); font: 700 15.5px/1.5 var(--font-head); }
.related img, .related svg { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; }
.side-box { background: var(--white); border-radius: var(--radius-m); box-shadow: 0 0 0 1px var(--green-200); overflow: hidden; }
.side-box__t { background: var(--green-900); color: var(--white); font: 700 15.5px/1.4 var(--font-head); padding: 10px 14px; margin: 0; }
.side-box ul { list-style: none; margin: 0; padding: 6px 0; }
.side-box li a { display: block; padding: 9px 14px; color: var(--green-900); text-decoration: none; font-size: 15px; line-height: 1.5; font-weight: 700; }
.side-box li a:hover { background: var(--green-50); }
.side-box details summary { cursor: pointer; padding: 10px 14px; font-weight: 700; color: var(--green-900); font-size: 15px; border-top: 1px solid var(--green-100); list-style: none; }
.side-box details summary::-webkit-details-marker { display: none; }
.side-box details summary::after { content: "＋"; float: right; color: var(--green-700); }
.side-box details[open] summary::after { content: "－"; }
.side-box details ul { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 12px; }
.side-box details li a { padding: 6px 10px; background: var(--green-50); border-radius: 8px; font-size: 14px; }
.search { display: flex; gap: 6px; padding: 12px; }
.search input { flex: 1; min-width: 0; min-height: 48px; border: 2px solid var(--green-200); border-radius: 10px; padding: 0 12px; font: 16px var(--font-body); color: var(--ink); }
.search button { min-height: 48px; padding: 0 14px; border: 0; border-radius: 10px; background: var(--green-700); color: var(--white); font: 700 15px var(--font-body); cursor: pointer; }

/* ---------- トップの最初の画面 ---------- */
.hero { padding: var(--sp-2) 0 var(--sp-2); display: grid; grid-template-areas: "h1" "art" "lead" "ways"; }
.hero__h1 { grid-area: h1; margin-bottom: var(--sp-1); }
.hero__art { grid-area: art; margin: 0 auto var(--sp-1); width: 100%; max-width: 300px; }
.hero__lead { grid-area: lead; font-size: 16.5px; margin: 0 0 var(--sp-2); }
.hero__ways { grid-area: ways; display: grid; gap: 12px; }
@media (min-width: 1024px) {
  .hero { grid-template-columns: 1fr 290px; grid-template-areas: "h1 art" "lead art" "ways art"; column-gap: var(--sp-3); align-items: start; }
  .hero__art { max-width: none; margin: var(--sp-2) 0 0; }
}

/* ---------- フッター・トップへ戻る ---------- */
.site-footer { background: var(--green-900); color: #dfeae4; font-size: 14.5px; }
.site-footer__inner { max-width: calc(var(--main-w) + var(--side-w) + 48px + 40px); margin: 0 auto; padding: var(--sp-4) 20px var(--sp-4); display: grid; gap: var(--sp-3); }
.site-footer a { color: var(--white); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.site-footer small { color: #b9cfc4; }
.to-top { position: fixed; right: 12px; bottom: 14px; width: 52px; height: 52px; border-radius: 50%; background: var(--green-700); color: var(--white); display: grid; place-items: center; box-shadow: 0 4px 12px rgba(35,74,62,.3); text-decoration: none; font: 700 12px/1.1 var(--font-body); text-align: center; z-index: 10;
  opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s, transform .2s, visibility .2s; }
.to-top.is-shown { opacity: .92; visibility: visible; transform: none; }
.to-top:hover { background: var(--green-900); color: var(--white); }

/* 短い比べる表：スマホは横に動かし、PC幅（本文640px）では動かさない（試し1で足した）*/
.tbl--fit { font-size: 14.5px; }
.tbl--fit th, .tbl--fit td { padding: 9px 10px; word-break: keep-all; overflow-wrap: anywhere; }
.tbl--fit thead th { font-size: 13.5px; }
.tbl--fit tbody th { min-width: 11.5em; }
.table-scroll .tbl--fit { min-width: 580px; }
@media (min-width: 720px) { .table-scroll .tbl--fit { min-width: 0; } .table-wrap:has(.tbl--fit) .scroll-hint { display: none; } }
.tbl a { color: var(--green-900); font-weight: 700; }
/* 表の題は横に動く枠の外に出す（スマホで題が切れない）。表の中の caption は読み上げ用に .vh で隠す */
.table-cap { font: 700 15.5px/1.5 var(--font-head); color: var(--green-900); margin: 0 0 6px; word-break: keep-all; overflow-wrap: anywhere; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.list-check small { display: block; font-size: 13px; color: var(--ink-soft); line-height: 1.6; }

/* 見本ページだけで使う注記（本番のページには出さない）*/
.sample-note { border: 2px dashed #b9b2a6; color: #6b635a; background: #fbfaf7; padding: 10px 14px; border-radius: 10px; font-size: 13px; line-height: 1.6; margin: 12px 0; }

/* ===== 本番で足した部品（見本と同じ考え方で） ===== */
.item__why p { margin: 0 0 8px; }
.item__why p:last-child { margin-bottom: 0; }

/* ===== 付属のページ（運営者情報・お問い合わせ・404・検索・サイトマップ）===== */
.page-lead { background: var(--gold-100); border-radius: var(--radius-m); padding: 16px 18px; margin: 0 0 var(--sp-3); box-shadow: inset 0 0 0 1px var(--gold-200); }
.page-lead p { margin: 0; }
.contact-wrap { display: grid; gap: var(--sp-3); margin: 0 0 var(--sp-4); }
.contact-guide { background: var(--green-50); border-radius: var(--radius-m); padding: 14px 18px; box-shadow: inset 0 0 0 1px var(--green-200); }
.contact-guide__t { display: flex; align-items: center; gap: 8px; font: 700 16px/1.5 var(--font-head); color: var(--green-900); margin: 0 0 6px; }
.contact-guide__t svg { width: 22px; height: 22px; }
.contact-guide .list-check { margin: 0; }
.contact-form { background: var(--white); border-radius: var(--radius-l); padding: 22px 18px 26px; box-shadow: 0 0 0 1px var(--green-200), 0 6px 18px rgba(35,74,62,.08); }
.contact-note { background: var(--amber-100); border-radius: var(--radius-s); padding: 10px 14px; font-size: var(--fs-small); margin: 0 0 var(--sp-2); }
form.contact .field { margin: 0 0 20px; }
form.contact label { display: block; font: 700 16px/1.5 var(--font-head); color: var(--green-900); margin: 0 0 6px; }
form.contact .req { display: inline-block; margin-left: 8px; background: var(--berry); color: var(--white); font: 700 11.5px/1 var(--font-body); padding: 4px 7px; border-radius: 6px; vertical-align: 2px; }
form.contact .hint { font-size: var(--fs-note); color: var(--ink-soft); margin: -2px 0 6px; line-height: 1.6; }
form.contact input[type=text], form.contact input[type=email], form.contact textarea {
  width: 100%; box-sizing: border-box; font: 400 17px/1.6 var(--font-body); color: var(--ink); background: #fffdf9;
  border: 2px solid var(--green-200); border-radius: var(--radius-s); padding: 12px 14px; min-height: 52px; }
form.contact textarea { min-height: 200px; resize: vertical; }
form.contact input:focus, form.contact textarea:focus { outline: none; border-color: var(--green-700); box-shadow: 0 0 0 3px rgba(46,107,87,.18); }
form.contact [aria-invalid="true"] { border-color: var(--berry); background: var(--berry-50); }
form.contact .field-error { color: var(--berry-dark); font-weight: 700; font-size: var(--fs-small); margin: 6px 0 0; }
form.contact button.btn { width: 100%; background: var(--green-700); color: var(--white); box-shadow: 0 4px 0 var(--green-900); border: 0; cursor: pointer; font-size: 18px; }
form.contact button.btn:hover { background: var(--green-900); }
.contact-alert { background: var(--berry-50); color: var(--berry-dark); font-weight: 700; border-radius: var(--radius-s); padding: 10px 14px; margin: 0 0 var(--sp-2); }
.done-box { text-align: center; background: var(--white); border-radius: var(--radius-l); padding: 28px 20px; box-shadow: 0 0 0 1px var(--green-200); margin: var(--sp-2) 0 var(--sp-4); }
.done-box__icon { width: 56px; height: 56px; margin: 0 auto 8px; display: block; }
.nf { margin: 0 0 var(--sp-4); }
.nf__lead { font-size: 17.5px; }
.nf__cols { display: grid; gap: var(--sp-2); margin: var(--sp-3) 0; }
@media (min-width: 720px) { .nf__cols { grid-template-columns: 1fr 1fr; } }
.search--big { margin: var(--sp-2) 0 var(--sp-3); }
.search--big input { font-size: 17px; min-height: 52px; }
.search--big button { min-height: 52px; min-width: 88px; font-size: 16px; }
.search-result { margin: 0 0 var(--sp-3); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 14px !important; }
.chips li a { display: inline-block !important; background: var(--green-50); border-radius: 999px; padding: 8px 16px !important; box-shadow: inset 0 0 0 1px var(--green-200); }
.sitemap { list-style: none; padding: 0; margin: 0 0 var(--sp-3); display: grid; gap: 4px 16px; }
@media (min-width: 720px) { .sitemap { grid-template-columns: 1fr 1fr; } }
.sitemap a { display: block; padding: 8px 10px; border-bottom: 1px dashed var(--green-200); color: var(--green-900); font-weight: 700; text-decoration: none; line-height: 1.5; }
.sitemap a:hover { background: var(--green-50); }

/* 都道府県のページの、街のページへのリンク */
.town-links { list-style: none; margin: var(--sp-2) 0 var(--sp-3); padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 720px) { .town-links { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.town-links a { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 10px 12px; border-radius: var(--radius-m); background: var(--green-50); box-shadow: inset 0 0 0 1px var(--green-200); color: var(--green-900); font: 700 15px/1.45 var(--font-head); text-decoration: none; }
.town-links a::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--gold-500); }
.town-links a:hover { background: var(--green-100); }