/* ==========================================================================
   1歳の誕生日ケーキ・スマッシュケーキのサイト  見た目の見本（style.css）
   ・このファイルをそのまま public_html/style.css として使う。
   ・色・大きさ・余白は下の :root の値だけを使う（ページの中で色を直書きしない）。
   ・クラスの名前は前のサイトの app.php・region.php が出す HTML と同じ。新しい部品は「新」と書いた所。
   ========================================================================== */

/* ---------- 1. 色と大きさ（ここ以外で色を決めない） ---------- */
:root{
  /* 文字と線 */
  --ink:#3a3330;        /* 本文：あたたかい黒茶 */
  --sub:#7a6e66;        /* 補足の文字 */
  --line:#efe3d6;       /* 線・カードのふち */
  /* 地の色 */
  --bg:#fff9f1;         /* ページの地：生クリームの白 */
  --card:#ffffff;
  /* 主の色：コーラル（Cake.jp のボタン・大見出し） */
  --coral:#f2795b; --coral-d:#d95a3e; --coral-dd:#b9472e; --coral-l:#fdebe4; --coral-ll:#fff4ef;
  /* 2つ目の色：セージグリーン（サイトの中へのボタン・小見出しの点・2つ目の囲み） */
  --sage:#5fa88a; --sage-d:#3f8a6c; --sage-dd:#2f6e55; --sage-l:#eaf5ef;
  /* 差し色：はちみつ色（バッジ・順位・ろうそく） */
  --honey:#f6c24a; --honey-d:#d9a21e; --honey-l:#fff4d6;
  /* 広告のボタン */
  --rak:#bf0000; --rak-d:#8a0000;
  --amz:#f3a847; --amz-d:#c47f1c;
  /* 公式サイトのボタン（誘導先ではない・ひかえめだがボタンと分かる・灰色にしない） */
  --off-bg:#f6eee4; --off-ink:#8a5f3f; --off-line:#e3cdb6; --off-sh:#ead9c6;
  /* 影 */
  --sh-card:0 6px 18px rgba(120,80,50,.08);
  --sh-soft:0 2px 8px rgba(120,80,50,.06);
  /* 角の丸み */
  --r-s:10px; --r-m:16px; --r-l:22px;
  /* 文字 */
  --f-body:"Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,system-ui,sans-serif;
  --f-head:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Noto Sans JP",sans-serif;
}

/* ---------- 2. 土台 ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;color:var(--ink);font:16px/1.9 var(--f-body);line-break:strict;overflow-wrap:anywhere;
  background-color:var(--bg);
  /* 紙ふぶきのうすい模様（3色の点） */
  background-image:
    radial-gradient(rgba(242,121,91,.09) 2.2px,transparent 2.7px),
    radial-gradient(rgba(95,168,138,.09) 2.2px,transparent 2.7px),
    radial-gradient(rgba(246,194,74,.12) 1.8px,transparent 2.3px);
  background-size:56px 56px,56px 56px,56px 56px;
  background-position:0 0,28px 28px,14px 42px}
.in{max-width:840px;margin:0 auto;padding:0 16px}
a{color:var(--sage-dd);text-underline-offset:3px}
a:hover{color:var(--coral-d)}
img{max-width:100%;height:auto}
p{margin:0 0 16px}
ul,ol{padding-left:1.4em;margin:0 0 16px}
li{margin:4px 0}
.nb{display:inline-block}
.small{font-size:13px;color:var(--sub)}
.note{font-size:13px;color:var(--sub);margin-top:-6px}
strong,b{font-weight:700}
.mark{background:linear-gradient(transparent 62%,var(--honey-l) 62%)}   /* 新：大事な所の蛍光ペン（1段落に1か所まで） */

/* ---------- 3. ヘッダー・フッター ---------- */
.site-head{background:#fff;position:relative;box-shadow:0 1px 0 var(--line)}
.site-head .in{display:flex;align-items:center;justify-content:space-between;min-height:58px}
.logo{display:flex;align-items:center;gap:8px;color:var(--ink);font:700 18px/1.3 var(--f-head);text-decoration:none}
.logo::before{content:"";width:30px;height:30px;flex:0 0 30px;background:url(img/cake1.svg) center/contain no-repeat}
.pr{color:var(--sub);font-size:11px;letter-spacing:.06em;border:1px solid var(--line);border-radius:999px;padding:0 8px}
/* ガーランド（三角の旗）をヘッダーの下に。HTML は <div class="flags" aria-hidden="true"></div> をヘッダーの最後に置く */
.site-head .flags{position:absolute;left:0;right:0;bottom:-14px;height:14px;pointer-events:none;
  background:
    conic-gradient(from 135deg at 50% 0,var(--honey) 0 90deg,transparent 90deg) 0 0/84px 14px repeat-x,
    conic-gradient(from 135deg at 50% 0,var(--sage) 0 90deg,transparent 90deg) 28px 0/84px 14px repeat-x,
    conic-gradient(from 135deg at 50% 0,var(--coral) 0 90deg,transparent 90deg) 56px 0/84px 14px repeat-x}
.crumb{font-size:12px;color:var(--sub);margin:26px 0 0}
.crumb a{color:var(--sub)}
.site-foot{margin-top:56px;background:#fff;border-top:1px solid var(--line);font-size:13px;color:var(--sub);padding:30px 0 34px;position:relative}
.site-foot::before{content:"";position:absolute;left:0;right:0;top:-1px;height:14px;
  background:
    conic-gradient(from 135deg at 50% 0,var(--honey) 0 90deg,transparent 90deg) 0 0/84px 14px repeat-x,
    conic-gradient(from 135deg at 50% 0,var(--sage) 0 90deg,transparent 90deg) 28px 0/84px 14px repeat-x,
    conic-gradient(from 135deg at 50% 0,var(--coral) 0 90deg,transparent 90deg) 56px 0/84px 14px repeat-x}
.site-foot nav{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px;margin:8px 0 16px}
@media (min-width:700px){.site-foot nav{grid-template-columns:repeat(3,1fr)}}
.site-foot nav a{color:var(--ink);text-decoration:none;font-size:14px}
.site-foot nav a::before{content:"・";color:var(--coral)}
.copy{margin:0}

/* ---------- 4. ページの頭（新：ヒーロー） ---------- */
main{padding-bottom:40px}
.hero{position:relative;margin:18px 0 22px;padding:26px 22px 22px;border-radius:var(--r-l);
  background:linear-gradient(160deg,#fff 0%,var(--coral-ll) 55%,var(--honey-l) 100%);
  box-shadow:var(--sh-card);overflow:hidden}
.hero::before{content:"";position:absolute;right:-30px;top:-30px;width:140px;height:140px;border-radius:50%;background:rgba(246,194,74,.18)}
.hero::after{content:"";position:absolute;left:-24px;bottom:-40px;width:120px;height:120px;border-radius:50%;background:rgba(95,168,138,.12)}
.hero .hero-ill{position:absolute;right:18px;bottom:12px;width:120px;height:auto;z-index:1}
.hero .eyebrow{position:relative;z-index:1;display:inline-block;font:700 12px/1.5 var(--f-head);letter-spacing:.08em;color:var(--coral-dd);background:#fff;border-radius:999px;padding:3px 12px;box-shadow:var(--sh-soft);margin:0 0 10px}
.hero h1{position:relative;z-index:1;margin:0 0 12px;padding-right:130px}
.hero .lead{position:relative;z-index:1;margin:0;padding-right:130px}
@media (max-width:600px){.hero{padding:20px 16px 16px}.hero .hero-ill{width:72px;right:10px;top:12px;bottom:auto}.hero h1,.hero .lead{padding-right:0}.hero .eyebrow{margin-right:76px}}

/* ---------- 5. 見出し ---------- */
h1{font:700 26px/1.5 var(--f-head);margin:22px 0 12px;word-break:keep-all;overflow-wrap:anywhere;letter-spacing:.02em}
h2{position:relative;font:700 22px/1.5 var(--f-head);margin:56px 0 18px;padding:14px 18px 14px 64px;border-radius:var(--r-m);
  background:linear-gradient(90deg,var(--coral-l),var(--coral-ll));color:var(--ink);word-break:keep-all;overflow-wrap:anywhere;box-shadow:0 2px 0 rgba(217,90,62,.10)}
h2::before{content:"";position:absolute;left:12px;top:50%;width:40px;height:40px;margin-top:-20px;border-radius:50%;
  background:#fff url(img/cake1.svg) center/30px no-repeat;box-shadow:0 0 0 3px var(--coral)}
h2::after{content:"";position:absolute;left:18px;right:18px;bottom:-6px;height:6px;
  background:radial-gradient(circle at 3px 3px,var(--coral) 2.4px,transparent 2.8px) 0 0/14px 6px repeat-x;opacity:.35}
h3{position:relative;font:700 19px/1.5 var(--f-head);margin:36px 0 14px;padding:0 0 8px 30px;word-break:keep-all;overflow-wrap:anywhere;
  background:linear-gradient(90deg,var(--sage) 0 64px,var(--line) 64px) left bottom/100% 3px no-repeat}
h3::before{content:"";position:absolute;left:0;top:.38em;width:18px;height:18px;border-radius:50%;background:var(--sage);box-shadow:0 0 0 4px var(--sage-l)}
h4{font:700 17px/1.5 var(--f-head);margin:22px 0 8px}
.card h3,.card h4,.box h3,.box h4{background:none;padding-left:0}
.card h3::before,.box h3::before{content:none}
@media (max-width:420px){h1{font-size:22px}h2{font-size:19px;padding:12px 14px 12px 56px}h2::before{width:34px;height:34px;margin-top:-17px;background-size:25px}h3{font-size:17px}}

/* ---------- 6. 目次 ---------- */
.toc{background:#fff;border:2px solid var(--coral-l);border-radius:var(--r-m);padding:12px 18px;margin:22px 0;box-shadow:var(--sh-soft)}
.toc summary{cursor:pointer;font:700 16px/1.6 var(--f-head);list-style:none;display:flex;align-items:center;gap:8px}
.toc summary::-webkit-details-marker{display:none}
.toc summary::before{content:"";width:22px;height:22px;background:url(img/crown.svg) center/contain no-repeat}
.toc ol{margin:8px 0 4px;padding-left:1.6em;counter-reset:t;list-style:none}
.toc li{counter-increment:t;position:relative}
.toc li::before{content:counter(t);position:absolute;left:-1.7em;top:.45em;width:1.25em;height:1.25em;border-radius:50%;background:var(--coral-l);color:var(--coral-dd);font-size:12px;font-weight:700;text-align:center;line-height:1.25em}
.toc a{text-decoration:none;color:var(--ink)}
.toc a:hover{color:var(--coral-d)}

/* ---------- 7. 囲み ---------- */
.box{background:var(--card);border:2px solid var(--line);border-radius:var(--r-m);padding:18px 18px 8px;margin:20px 0;box-shadow:var(--sh-soft)}
.box .ttl{display:inline-flex;align-items:center;gap:6px;background:var(--coral);color:#fff;font:700 14px/1.5 var(--f-head);border-radius:999px;padding:3px 14px;margin-bottom:10px}
.box-answer{border-color:var(--coral);background:#fff}
.box-answer .ttl::before{content:"";width:18px;height:18px;border-radius:50%;background:#fff url(img/crown.svg) center/13px no-repeat}
.box-blue,.box-sage{border-color:#bfe2d1;background:var(--sage-l)}
.box .ttl-blue,.box .ttl-sage{background:var(--sage-d)}
.box-mint{border-color:#bfe2d1;background:var(--sage-l)}
.box-honey{border-color:#f3dc9e;background:var(--honey-l)}
.box-gray{background:#fbf7f2}
.box h3,.box h4{margin-top:4px}
/* AIO 用の短い答え（新）：見出しのすぐ下に置く「この見出しの答え」 */
.answer-line{position:relative;background:#fff;border-left:5px solid var(--honey);border-radius:0 var(--r-s) var(--r-s) 0;padding:10px 14px 10px 16px;margin:0 0 16px;font-weight:700;box-shadow:var(--sh-soft)}

/* ---------- 8. 「迷ったらこれ」 ---------- */
.pick{display:flex;gap:14px;align-items:flex-start}
.pick .ill{flex:0 0 96px}
.pick-top{display:block;text-align:center;background:#fff;border:3px solid var(--honey);border-radius:var(--r-l);padding:22px 18px 8px;margin:22px 0;box-shadow:var(--sh-card);position:relative}
.pick-top::before{content:"";position:absolute;left:50%;top:-22px;width:48px;height:36px;margin-left:-24px;background:url(img/crown.svg) center/contain no-repeat}
.pick.pick-top p{text-align:center}
.pick-badge{display:inline-block;position:relative;background:var(--coral);color:#fff;font:700 15px/1.4 var(--f-head);padding:7px 20px;border-radius:999px;margin:6px 0 14px;letter-spacing:.05em}
.pick-badge::after{content:"";position:absolute;left:50%;bottom:-7px;margin-left:-7px;border:7px solid transparent;border-bottom:0;border-top-color:var(--coral)}
.pick-shop{font-size:13px;color:var(--sub);margin:0 0 2px}
.pick-top .pick-name{font:700 20px/1.6 var(--f-head);margin:0 0 4px}
.pick-meta{color:var(--sub);font-size:14px;margin:0 0 12px}
.pick .pick-photo{width:100%;max-width:480px;aspect-ratio:1/1;object-fit:cover;margin:0 auto 8px;border-radius:var(--r-m)}
.pick .facts{display:inline-block;text-align:left;margin:8px auto 4px}
.pick-name{font-weight:700;margin:0 0 4px}
.facts{list-style:none;padding:0;margin:8px 0}
.facts li{position:relative;padding-left:1.8em;text-align:left}
.facts li::before{content:"";position:absolute;left:0;top:.42em;width:18px;height:18px;border-radius:50%;background:var(--sage) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' stroke='%23fff' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}
.stars{color:var(--honey-d);letter-spacing:1px;font-size:15px}
.stars small{color:var(--sub);letter-spacing:0;margin-left:4px}

/* 取り寄せが失敗しにくい理由（番号つき） */
.reasons{counter-reset:r;list-style:none;padding:0}
.reasons li{counter-increment:r;position:relative;padding:12px 14px 12px 54px;background:#fff;border:1px solid var(--line);border-radius:var(--r-m);margin:10px 0;box-shadow:var(--sh-soft)}
.reasons li::before{content:counter(r);position:absolute;left:12px;top:12px;width:30px;height:30px;border-radius:50%;background:var(--sage);color:#fff;font:700 15px/30px var(--f-head);text-align:center}
.reasons li b{display:block;font-family:var(--f-head);color:var(--sage-dd)}

/* ---------- 9. ボタン ---------- */
.btn-wrap{margin:16px 0 26px;text-align:center}
.btn-wrap.is-main{margin:20px 0 30px}
.callout{margin:0 0 6px;text-align:center;font:700 15px/1.5 var(--f-head);color:var(--coral-dd)}
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-width:240px;max-width:100%;padding:14px 26px;border-radius:999px;text-decoration:none;font:700 17px/1.4 var(--f-body);overflow:hidden;transition:filter .15s,transform .15s,box-shadow .15s}
.btn .arw{display:inline-block;width:8px;height:8px;border-top:2.5px solid currentColor;border-right:2.5px solid currentColor;transform:rotate(45deg);animation:nudge 1.6s ease-in-out infinite}
@keyframes nudge{0%,60%,100%{translate:0 0}80%{translate:4px 0}}
/* 目立つボタン（結論・まとめなど1ページ4つまで）：Cake.jp・コーラル・弾む・光が流れる */
.btn-main{background:linear-gradient(180deg,#f8957b,var(--coral-d));color:#fff;font-size:20px;min-width:400px;padding:19px 38px;box-shadow:0 5px 0 var(--coral-dd),0 12px 24px rgba(217,90,62,.30);animation:bounce 3s ease-in-out infinite}
.btn-main .arw{width:10px;height:10px}
.btn-main::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);animation:shine 4s ease-in-out infinite}
.btn-main:hover{color:#fff;animation-play-state:paused;transform:translateY(-2px);box-shadow:0 7px 0 var(--coral-dd),0 16px 28px rgba(217,90,62,.36)}
.btn-main:active{transform:translateY(4px);box-shadow:0 1px 0 var(--coral-dd),0 4px 10px rgba(217,90,62,.3)}
@keyframes bounce{0%,72%,100%{transform:translateY(0)}78%{transform:translateY(-6px)}84%{transform:translateY(0)}90%{transform:translateY(-3px)}}
@keyframes shine{0%,70%{left:-60%}100%{left:130%}}
/* ひかえめなボタン：Cake.jp（コーラル） */
.btn-sub{background:var(--coral);color:#fff;min-width:360px;box-shadow:0 4px 0 var(--coral-dd),0 6px 14px rgba(217,90,62,.22)}
/* サイトの中へ（セージ） */
.btn-inner,.btn-sub-blue{background:var(--sage);color:#fff;min-width:360px;box-shadow:0 4px 0 var(--sage-dd),0 6px 14px rgba(63,138,108,.22)}
/* 楽天・Amazon */
.btn-rakuten{background:var(--rak);color:#fff;min-width:360px;box-shadow:0 4px 0 var(--rak-d),0 6px 14px rgba(191,0,0,.2)}
.btn-amazon{background:var(--amz);color:#232f3e;min-width:360px;box-shadow:0 4px 0 var(--amz-d),0 6px 14px rgba(243,168,71,.3)}
/* 公式サイト（誘導先ではない：うすいベージュのぬりつぶし。白地にふちだけ・灰色は使わない） */
.btn-official{background:var(--off-bg);color:var(--off-ink);border:2px solid var(--off-line);font-size:15px;min-width:300px;padding:12px 22px;box-shadow:0 4px 0 var(--off-sh)}
.btn-sub:hover,.btn-inner:hover,.btn-sub-blue:hover,.btn-rakuten:hover,.btn-amazon:hover,.btn-official:hover{transform:translateY(-2px);filter:brightness(1.06)}
.btn-sub:hover,.btn-inner:hover,.btn-sub-blue:hover,.btn-rakuten:hover{color:#fff}
.btn-sub:active,.btn-inner:active,.btn-sub-blue:active,.btn-rakuten:active,.btn-amazon:active,.btn-official:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(0,0,0,.2)}
a.tl{font-weight:700;color:var(--coral-dd);text-decoration:underline;text-decoration-color:#f7b9a6;text-decoration-thickness:2px}
@media (max-width:440px){.btn,.btn-main,.btn-sub,.btn-inner,.btn-sub-blue,.btn-rakuten,.btn-amazon,.btn-official{min-width:0;width:100%}.btn-main{font-size:18px;padding:17px 18px}}
@media (prefers-reduced-motion:reduce){.btn-main,.btn .arw{animation:none}.btn-main::after{display:none}html{scroll-behavior:auto}.btn,.photo-link{transition:none}}

/* ---------- 10. カード ---------- */
.cards{display:grid;grid-template-columns:1fr;gap:16px;margin:18px 0}
@media (min-width:700px){.cards.c2{grid-template-columns:1fr 1fr}.cards.c3{grid-template-columns:1fr 1fr 1fr}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);padding:16px 16px 6px;display:flex;flex-direction:column;box-shadow:var(--sh-card)}
.card h3,.card h4{margin:0 0 8px;border:0;padding:0;font-size:17px}
.card .row{display:grid;grid-template-columns:6.5em 1fr;gap:6px;font-size:15px;margin:6px 0}
.card .row .k{font-weight:700;color:var(--sub);font-size:13px;padding-top:2px}
.card .btn-wrap{margin:auto 0 14px;padding-top:10px}
.card .btn{min-width:0;width:100%}
.kind{display:flex;gap:12px;align-items:center}
.kind .ill{flex:0 0 72px;width:72px}
/* 目的から探す早見表のカード（新：色の帯の見出しとアイコン） */
.goal{padding:0 0 6px;overflow:hidden}
.goal>h3,.goal>h4{display:flex;align-items:center;gap:10px;margin:0 0 10px;padding:12px 16px;color:#fff;font-size:17px;background:linear-gradient(90deg,var(--coral-d),var(--coral))}
.cards .goal:nth-child(3n+2)>h3,.cards .goal:nth-child(3n+2)>h4{background:linear-gradient(90deg,var(--sage-dd),var(--sage))}
.cards .goal:nth-child(3n)>h3,.cards .goal:nth-child(3n)>h4{background:linear-gradient(90deg,var(--honey-d),var(--honey));color:var(--ink)}
.goal>h3 img,.goal>h4 img{width:34px;height:34px;background:#fff;border-radius:50%;padding:3px}
.goal .row,.goal p,.goal>ul,.goal>ol,.goal>dl,.goal>.kind-ex,.goal>.tbl,.goal>.tbl-wrap,.goal>details{margin-left:16px;margin-right:16px}
.goal .btn-wrap{margin:auto 16px 12px}
.goal .gk{display:inline-block;font-size:12px;font-weight:700;border-radius:6px;padding:0 8px;margin-right:6px}
.goal .gk-local{background:var(--sage-l);color:var(--sage-dd)}
.goal .gk-mail{background:var(--coral-l);color:var(--coral-dd)}

/* 取り寄せのお店ランキングのカード（新） */
.rank-card{position:relative;padding:18px 16px 6px}
.rank-card .medal{position:absolute;left:-6px;top:-10px;width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;font:700 15px/1 var(--f-head);color:#fff;box-shadow:0 3px 0 rgba(0,0,0,.12);z-index:1}
.rank-card .medal small{font-size:10px;margin-left:1px}
.rank-card.r1 .medal{background:radial-gradient(circle at 30% 30%,#ffe08a,var(--honey-d))}
.rank-card.r2 .medal{background:radial-gradient(circle at 30% 30%,#e9edf0,#9aa6b0)}
.rank-card.r3 .medal{background:radial-gradient(circle at 30% 30%,#f4c9a2,#c27f4b)}
.rank-card.rn .medal{background:var(--sage)}
.rank-card .rank-shop{font-size:13px;color:var(--sub);margin:0 0 0 36px}
.rank-card h3,.rank-card h4{margin:0 0 10px 36px;font-size:18px}
.rank-card .photo-link,.rank-card .photo{width:100%}
.rank-card .photo{aspect-ratio:1/1;object-fit:cover;border-radius:var(--r-s)}
.rank{display:inline-block;background:var(--honey);color:var(--ink);border-radius:6px;font-size:13px;font-weight:700;padding:0 8px;margin-right:8px;vertical-align:2px}

/* クリームの種類・使っていない材料の札（新）：色だけでなく文字でも分ける */
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 12px;padding:0;list-style:none}
.chip{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;line-height:1.5;border-radius:999px;padding:2px 10px;border:1.5px solid}
.chip-cream{background:#fff;color:var(--coral-dd);border-color:#f7b9a6}
.chip-free{background:var(--sage-l);color:var(--sage-dd);border-color:#bfe2d1}
.chip-free::before{content:"不使用";font-size:10px;background:var(--sage-d);color:#fff;border-radius:999px;padding:0 6px;margin-right:2px}
.chip-remove{background:var(--honey-l);color:#8a6510;border-color:#f3dc9e}
.chip-remove::before{content:"除去できる";font-size:10px;background:var(--honey-d);color:#fff;border-radius:999px;padding:0 6px;margin-right:2px}
.chip-use{background:#fff;color:var(--sub);border-color:var(--line)}
.chip-use::before{content:"使っている";font-size:10px;background:var(--sub);color:#fff;border-radius:999px;padding:0 6px;margin-right:2px}

/* ---------- 11. お店のカード ---------- */
.shop{background:#fff;border:1px solid var(--line);border-radius:var(--r-l);padding:0 0 8px;margin:20px 0 28px;scroll-margin-top:12px;box-shadow:var(--sh-card);overflow:hidden}
.shop>h4{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:0;padding:14px 18px;font-size:19px;background:linear-gradient(90deg,var(--sage-l),#fff)}
.shop>h4 small{font-size:13px;color:var(--sub);font-weight:400}
.shop>*:not(h4){margin-left:18px;margin-right:18px}
.shop .tri{margin-top:14px}
.tri{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 14px}
.tri div{background:var(--coral-ll);border:1px solid var(--coral-l);border-radius:var(--r-s);padding:8px;text-align:center;font-size:14px;line-height:1.5}
.tri b{display:block;font-size:11px;color:var(--coral-dd);letter-spacing:.05em}
.shop h5{font:700 15px/1.5 var(--f-head);margin:16px 0 6px;color:var(--sage-dd);display:flex;align-items:center;gap:6px}
.shop h5::before{content:"";width:6px;height:16px;border-radius:3px;background:var(--sage)}
.shop details{border:1px solid var(--line);border-radius:var(--r-s);padding:8px 12px;margin:12px 18px;background:#fffdfa}
.shop summary{cursor:pointer;font-weight:700;font-size:15px}
.tag{display:inline-block;font-size:11px;padding:1px 8px;border-radius:999px;background:var(--sage-l);color:var(--sage-dd);margin-left:4px;vertical-align:middle;font-weight:700}
.tag-pink,.tag-coral{background:var(--coral-l);color:var(--coral-dd)}
@media (max-width:420px){.tri div{font-size:12px;padding:6px 4px}.shop>*:not(h4){margin-left:14px;margin-right:14px}.shop>h4{padding:12px 14px}}

/* ---------- 12. 表 ---------- */
.tbl{width:100%;overflow-x:auto;margin:14px 0 8px;-webkit-overflow-scrolling:touch;border-radius:var(--r-s);box-shadow:var(--sh-soft)}
table{border-collapse:separate;border-spacing:0;width:100%;font-size:14px;background:#fff;border:1px solid var(--line);border-radius:var(--r-s);overflow:hidden}
th,td{border-bottom:1px solid var(--line);border-right:1px solid var(--line);padding:9px 10px;vertical-align:top;text-align:left}
tr>*:last-child{border-right:0}
tbody tr:last-child>*{border-bottom:0}
thead th{background:var(--coral-l);color:var(--coral-dd);font-family:var(--f-head);white-space:nowrap}
tbody th{background:#fffaf5;white-space:nowrap}
tbody tr:nth-child(even) td{background:#fffdf9}
td{min-width:5.5em}
.tbl.wide table{min-width:640px}
/* 表が枠に入りきらないときだけ、上に「横に動かせます」、右はしにぼかしと矢印のボタンを出す（app.js が can-scroll を付ける） */
.tbl-wrap{margin:14px 0 8px}
.tbl-wrap>.tbl-box>.tbl{margin:0}
.tbl-box{position:relative}
.tbl-hint{display:none;align-items:center;justify-content:flex-end;gap:6px;font-size:12.5px;font-weight:700;color:var(--coral-dd);margin:0 2px 6px}
.tbl-hint svg{width:16px;height:16px;flex:none}
.tbl-wrap.can-scroll .tbl-hint{display:flex}
.tbl-box::after{content:"";position:absolute;top:1px;right:1px;bottom:1px;width:56px;border-radius:0 var(--r-s) var(--r-s) 0;background:linear-gradient(to right,rgba(255,255,255,0),rgba(255,255,255,.96));pointer-events:none;opacity:0;transition:opacity .2s}
.tbl-wrap.can-scroll:not(.at-end) .tbl-box::after{opacity:1}
.tbl-next{position:absolute;top:min(50%,84px);right:8px;z-index:2;width:36px;height:36px;margin-top:-18px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--coral-dd);box-shadow:var(--sh-card);display:none;align-items:center;justify-content:center;cursor:pointer;padding:0}
.tbl-next svg{width:18px;height:18px}
.tbl-wrap.can-scroll:not(.at-end) .tbl-next{display:flex}
.tbl-next:focus-visible{outline:2px solid var(--coral-dd);outline-offset:2px}
.tbl.fit table{min-width:0}
@media (max-width:520px){.tbl.fit table{font-size:13px}.tbl.fit th,.tbl.fit td{padding:7px 6px}.tbl.fit td{min-width:0}}
dl.info{display:grid;grid-template-columns:6.5em 1fr;gap:6px 10px;font-size:14px;margin:8px 0}
dl.info dt{font-weight:700;color:var(--sub)}
dl.info dd{margin:0}

/* ---------- 13. 比べる囲み（左右同じ形。ひいきに見せない） ---------- */
.vs{display:grid;grid-template-columns:1fr;gap:14px;margin:18px 0}
@media (min-width:700px){.vs{grid-template-columns:1fr 1fr}}
.vs .side{background:#fff;border:2px solid var(--line);border-radius:var(--r-m);padding:0 0 8px;overflow:hidden;box-shadow:var(--sh-soft)}
.vs .side>h4{margin:0 0 8px;padding:10px 16px;font-size:16px;background:var(--bg);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px}
.vs .side>h4 img{width:34px;height:auto}
.vs .side ul{margin:0 16px 8px;padding-left:1.2em}

/* ---------- 14. 場所から探す・地域の一覧 ---------- */
.areas{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:12px 0}
.areas a{display:inline-block;padding:6px 14px;border:1.5px solid var(--sage-l);border-radius:999px;background:#fff;text-decoration:none;font-size:14px;color:var(--ink);box-shadow:var(--sh-soft)}
.areas a:hover{border-color:var(--sage);color:var(--sage-dd)}
.areas small{color:var(--sub)}
.shoplist{list-style:none;padding:0;margin:6px 0 16px;font-size:15px}
.shoplist li{margin:2px 0}
.shoplist small{color:var(--sub);margin-left:4px}
.area-box{display:flex;gap:16px;align-items:flex-start;background:#fff;border:2px solid var(--sage-l);border-radius:var(--r-m);padding:14px 16px}
.area-box .ill{flex:0 0 84px}
.area-box>div{flex:1;min-width:0}
h4.chiho{margin:10px 0 4px;font-size:15px;color:var(--sage-dd)}
h4.chiho:first-child{margin-top:0}
@media (max-width:600px){.area-box .ill{display:none}}

/* ---------- 15. 締め切りの時系列・手順 ---------- */
.timeline{list-style:none;padding:0 0 0 18px;margin:16px 0;border-left:3px dashed #f7b9a6}
.timeline li{position:relative;margin:0 0 14px;background:#fff;border-radius:var(--r-s);padding:8px 12px;box-shadow:var(--sh-soft)}
.timeline li::before{content:"";position:absolute;left:-27px;top:12px;width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid var(--coral)}
.timeline b{display:block;color:var(--coral-dd);font-family:var(--f-head)}
.steps{list-style:none;padding:0;counter-reset:s}
.steps li{counter-increment:s;background:#fff;border:1px solid var(--line);border-radius:var(--r-m);padding:12px 14px 12px 56px;position:relative;margin:10px 0;box-shadow:var(--sh-soft)}
.steps li::before{content:counter(s);position:absolute;left:12px;top:12px;width:30px;height:30px;border-radius:50%;background:var(--coral);color:#fff;text-align:center;line-height:30px;font:700 15px/30px var(--f-head)}
.steps li:nth-child(even)::before{background:var(--sage)}
.steps li b{display:block;font-family:var(--f-head)}

/* ---------- 16. 見出しの帯つきカード（気をつけること・コツ） ---------- */
.head-card{padding:0 0 6px;border:0;overflow:hidden;box-shadow:var(--sh-card);background:#fff}
.head-card>h4{margin:0 0 12px;padding:12px 16px;font-size:17px;color:#fff;display:flex;align-items:center;gap:10px;background:linear-gradient(90deg,var(--coral-d),var(--coral))}
.cards .head-card:nth-child(even)>h4{background:linear-gradient(90deg,var(--sage-dd),var(--sage))}
.note-card>h4::before{content:"!";flex:0 0 24px;width:24px;height:24px;border-radius:50%;background:#fff;color:var(--coral-d);font-size:15px;font-weight:800;text-align:center;line-height:24px}
.cards .note-card:nth-child(even)>h4::before{color:var(--sage-dd)}
.head-card ul{list-style:none;padding:0 16px;margin:0 0 6px}
.head-card ul li{position:relative;padding:8px 0 8px 1.5em;border-bottom:1px dashed var(--line)}
.head-card ul li:last-child{border-bottom:0}
.head-card ul li::before{content:"";position:absolute;left:3px;top:1.15em;width:8px;height:8px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 3px var(--coral-l)}
.cards .head-card:nth-child(even) ul li::before{background:var(--sage);box-shadow:0 0 0 3px var(--sage-l)}
.tips{counter-reset:tip}
.tips .card{counter-increment:tip;position:relative;overflow:hidden;padding:16px 16px 8px;border:0;border-top:5px solid var(--coral);background:linear-gradient(180deg,#fff 60%,var(--coral-ll))}
.tips .card:nth-child(even){border-top-color:var(--sage);background:linear-gradient(180deg,#fff 60%,var(--sage-l))}
.tips .card::before{content:"POINT " counter(tip);align-self:flex-start;background:var(--coral);color:#fff;font-size:12px;font-weight:700;letter-spacing:.08em;border-radius:999px;padding:1px 12px;margin-bottom:8px}
.tips .card:nth-child(even)::before{background:var(--sage)}
.tips .card::after{content:counter(tip);position:absolute;right:10px;bottom:-18px;font:800 88px/1 var(--f-head);color:rgba(242,121,91,.10);pointer-events:none}
.tips .card:nth-child(even)::after{color:rgba(95,168,138,.12)}

/* ---------- 17. よくある質問 ---------- */
.qa{border:1px solid var(--line);border-radius:var(--r-m);background:#fff;margin:10px 0;padding:12px 16px;box-shadow:var(--sh-soft)}
.qa summary{cursor:pointer;font-weight:700;padding:0 1.8em 0 2.3em;position:relative;list-style:none}
.qa summary::-webkit-details-marker{display:none}
.qa summary::before{content:"Q";position:absolute;left:0;top:2px;width:24px;height:24px;line-height:24px;text-align:center;border-radius:50%;background:var(--coral);color:#fff;font-size:13px}
.qa summary::after{content:"+";position:absolute;right:0;top:0;color:var(--coral);font-size:22px;line-height:1.3}
.qa[open] summary::after{content:"−"}
.qa .ans{padding:10px 0 0 2.3em;position:relative}
.qa .ans::before{content:"A";position:absolute;left:0;top:12px;width:24px;height:24px;line-height:24px;text-align:center;border-radius:50%;background:var(--sage);color:#fff;font-size:13px;font-weight:700}

/* ---------- 18. まとめ（目的ごとに2つの囲み） ---------- */
.matome{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:700px){.matome{grid-template-columns:1fr 1fr}}
.matome .box{display:flex;flex-direction:column;background:#fff}
.matome .box .ttl{align-self:flex-start}
.matome .box .btn-wrap{margin-top:auto}
.matome .box .btn{width:100%;min-width:0}
.matome .box-blue,.matome .box-sage{border-color:var(--sage)}

/* ---------- 19. 写真とリンク ---------- */
.photo{display:block;max-width:100%;height:auto;border-radius:var(--r-m)}
.shop-photo{margin:0 0 12px}
.shop-photo .photo{width:100%;max-width:560px;aspect-ratio:1/1;object-fit:cover;margin:0 auto}
.pick-link,.pick-link .nb{color:inherit;text-decoration:underline;text-decoration-color:#f7b9a6;text-decoration-thickness:2px;text-underline-offset:5px}
.pick-link:hover{color:var(--coral-d)}
.photo-link{display:block;border-radius:var(--r-m);transition:transform .15s,box-shadow .15s}
.photo-link:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(217,90,62,.18)}
.pick .photo-link{max-width:480px;margin:0 auto 8px}
.shop-photo .photo-link{max-width:560px;margin:0 auto}
.cut2{display:grid;grid-template-columns:1fr 1fr;gap:8px;max-width:560px;margin:0 auto 6px}
.cut2 .photo{width:100%;aspect-ratio:1/1;object-fit:cover}
.ill{display:block}
figure{margin:0 0 16px}
figcaption{font-size:12px;color:var(--sub);text-align:center;margin-top:4px}
/* 足した部品：3つを比べる vs（.vs.v3）。色・角・影は .vs と同じ */
@media (min-width:900px){.vs.v3{grid-template-columns:1fr 1fr 1fr}}
.cards.c2>.card:last-child:nth-child(odd){grid-column:1/-1}
.rk-item{display:flex;gap:10px;align-items:flex-start}.rk-thumb-link{flex:none;display:block;border-radius:8px;overflow:hidden}.rk-thumb{display:block;width:60px;height:60px;object-fit:cover;border-radius:8px}.tbl.wide table td .rk-item{min-width:250px}
.kind-ex{display:flex;gap:10px;align-items:flex-start;background:var(--cream-l,#fff8f2);border-radius:10px;padding:8px;margin:0 0 10px}.kind-ex p{margin:0}.kind-ex b{display:block;font-size:11px;color:var(--coral-dd)}
.c3 .btn{padding-left:14px;padding-right:14px;font-size:15px;white-space:nowrap;letter-spacing:0}
.gallery-link{display:block;margin:6px 0 4px}.gallery{display:flex;gap:6px;justify-content:center}.gal{width:calc(33% - 4px);max-width:150px;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:8px}
.voices{margin:12px 0;padding:10px 12px;background:#fff8ef;border-radius:var(--r-s);border:1px dashed #f3c9a8}.voices-ttl{margin:0 0 6px;font-weight:700;font-family:var(--f-head);color:var(--coral-dd);font-size:14px}.voices ul{list-style:none;margin:0;padding:0}.voices li{margin:0 0 8px;font-size:14px;line-height:1.75}.voices li:last-child{margin-bottom:0}.voices q{quotes:"「" "」"}.voices small{display:block;color:var(--sub);font-size:11px}
.soon-line{text-align:center;margin:10px 0;font-size:14px;line-height:1.8}.soon-line b{color:var(--coral-dd)}.soon-line .ico{width:22px;height:18px;vertical-align:-4px;margin-right:4px}
.voices-ttl small{font-weight:400;color:var(--sub);font-size:11px;margin-left:4px}
main>.hero:first-child{margin-top:34px}
.tbl.needs table{table-layout:fixed;min-width:720px}
.tbl.needs thead th:nth-child(1){width:27%}.tbl.needs thead th:nth-child(2){width:30%}.tbl.needs thead th:nth-child(3){width:13%}.tbl.needs thead th:nth-child(4){width:31%}
.tbl.needs td:nth-child(3),.tbl.needs th:nth-child(3){white-space:nowrap}
.tbl.needs td .rk-item{min-width:0}
.tbl.needs tbody th,.tbl.needs td:nth-child(1){white-space:normal}
@media (max-width:600px){
.tbl.needs::before{display:none}
.tbl.needs table{min-width:0;table-layout:auto}
.tbl.needs thead{display:none}
.tbl.needs tr{display:block;border-bottom:1px solid var(--line)}
.tbl.needs tbody th,.tbl.needs td{display:block;width:auto;border:0;padding:6px 12px}
.tbl.needs tbody th{padding-top:12px;background:var(--coral-l);color:var(--coral-dd)}
.tbl.needs td:nth-child(3)::before{content:"値段（税込）：";color:var(--sub);font-size:13px}
.tbl.needs td:nth-child(4){padding-bottom:12px;font-size:14px}
}
.tbl.wide table td .rk-item{min-width:220px}
/* 表の中は、ことばの途中で折り返さない（body の overflow-wrap:anywhere を止める） */
.tbl th,.tbl td{overflow-wrap:break-word}
.tbl .nb{white-space:nowrap}
.tbl.wide table td .rk-item{min-width:200px}
@media (max-width:600px){.tbl tbody th{white-space:normal;min-width:5.5em}}
.tbl.needs tr.need-pick th,.tbl.needs tr.need-pick td{background:#fff6e0}
.need-badge{display:inline-block;font:700 11px/1.6 var(--f-head);color:#fff;background:var(--coral-d,#e2704f);border-radius:999px;padding:1px 10px;margin:0 0 4px}
.tbl.needs .need-badge{display:table;}
.qa>.btn-wrap{margin-left:2.3em}