/* オーダーケーキを頼めるケーキ屋さん  見た目のルールは rules/RULES.md の「4. レイアウト」 */
:root {
  --ink: #3a2a2a;
  --sub: #7a6a66;
  --line: #eadbd3;
  --bg: #fffaf6;
  --card: #ffffff;
  --accent: #d9485f;
  --accent-dark: #b8324a;
  --accent-soft: #fdecef;
  --mint: #2f8f7a;
  --mint-soft: #e8f5f1;
  --cream: #fff3e2;
  --link: #1f63b8;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font: 17px/1.9 "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
  color: var(--ink);
  background: var(--bg);
  /* 本文はふつうの日本語の折り返し（行の端までうめる）。言葉のまとまりで折ると、
     行の長さがばらばらになり、長いまとまりは途中で切れて読みにくい（MAINさん指摘） */
  word-break: normal;
  overflow-wrap: anywhere;
  line-break: strict;
}
img, svg { max-width: 100%; height: auto; }
a { color: var(--link); }
:target { scroll-margin-top: 16px; }

/* 見出し：<wbr> の位置でだけ折り返す */
h1, h2, h3, .purpose-title, .mini-title, .step-title, .pick-title, .box-title, .q, .shop-area, th {
  word-break: keep-all;
  overflow-wrap: anywhere;
}
/* 質問は文なので、ふつうに折り返す（「？」だけが次の行に行かないように） */
.q { word-break: normal; }

/* ---------- ヘッダー・フッター ---------- */
.inner { max-width: 760px; margin: 0 auto; padding: 0 16px; }
.site-header { background: #fff; border-bottom: 3px solid var(--accent); }
.site-header .inner { padding-top: 12px; padding-bottom: 12px; }
.site-name { color: var(--ink); text-decoration: none; font-weight: 700; font-size: 18px; }
.site-name::before { content: "🎂"; margin-right: 6px; }
.site-footer { margin-top: 48px; background: #fff; border-top: 1px solid var(--line); font-size: 15px; color: var(--sub); }
.site-footer .inner { padding-top: 20px; padding-bottom: 28px; }
.foot-nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.foot-nav a { color: var(--ink); }
.copy { margin: 12px 0 0; font-size: 13px; }

/* ---------- 本文 ---------- */
.main { max-width: 760px; margin: 0 auto; padding: 8px 16px 0; }
.article p, .page p, .home p { margin: 0 0 1em; }
.pr { margin: 8px 0 0 !important; font-size: 11px; color: #b5a9a5; line-height: 1.4; }
h1 { font-size: 26px; line-height: 1.5; margin: 6px 0 20px; }
h2 {
  font-size: 22px; line-height: 1.5; margin: 52px 0 18px;
  padding: 12px 16px; background: var(--accent-soft); border-left: 6px solid var(--accent); border-radius: 0 10px 10px 0;
}
h3 { font-size: 19px; line-height: 1.5; margin: 32px 0 12px; padding-bottom: 6px; border-bottom: 2px dotted var(--line); }
.note { font-size: 14px; color: var(--sub); }
strong { background: linear-gradient(transparent 62%, #ffe08a 62%); font-weight: 700; }

/* ---------- ボタン（一目でボタンと分かる形） ---------- */
.btn-wrap { text-align: center; margin: 20px 0 26px; }   /* 下の文とも、上の文と同じくらいあける */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; max-width: 360px; min-height: 60px; padding: 12px 22px;
  border-radius: 999px; font-size: 18px; font-weight: 700; line-height: 1.3;
  text-decoration: none; white-space: nowrap; word-break: keep-all;
  transition: transform .08s, box-shadow .08s;
}
.btn-buy {
  color: #fff; background: linear-gradient(180deg, #ea5f74, var(--accent));
  box-shadow: 0 5px 0 var(--accent-dark), 0 8px 16px rgba(185, 50, 74, .25);
}
.btn-sub {
  color: var(--mint); background: #fff; border: 2px solid var(--mint);
  box-shadow: 0 4px 0 var(--mint); min-height: 54px; font-size: 17px; max-width: 320px;
}
.btn:hover { filter: brightness(1.05); }
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--accent-dark); }
.btn-sub:active { box-shadow: 0 0 0 var(--mint); }
.btn-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; font-size: 20px; line-height: 1;
  background: rgba(255, 255, 255, .25);
}
.btn-sub .btn-arrow { background: var(--mint-soft); }

/* ---------- 先に結論 ---------- */
.answer {
  background: #fff; border: 3px solid var(--accent); border-radius: 16px;
  padding: 18px 16px 8px; margin: 0 0 28px; position: relative;
}
.answer-label {
  display: inline-block; margin: -34px 0 10px !important; padding: 2px 16px;
  background: var(--accent); color: #fff; font-weight: 700; border-radius: 999px; font-size: 15px;
}
.two-col { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 0 0 18px; }
.purpose { border-radius: 12px; padding: 14px 14px 4px; }
.purpose-shop { background: var(--accent-soft); }
.purpose-deli { background: var(--mint-soft); }
.purpose-title { font-weight: 700; font-size: 18px; margin: 0 0 8px !important; }
.ico { margin-right: 6px; }
ul.check { list-style: none; padding: 0; margin: 0 0 10px; }
ul.check li { position: relative; padding-left: 28px; margin-bottom: 8px; line-height: 1.75; }
ul.check li::before {
  content: "✓"; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; color: var(--accent); font-weight: 700; font-size: 13px; line-height: 20px; text-align: center;
}
.purpose-deli ul.check li::before { color: var(--mint); }

/* ---------- 目次 ---------- */
.toc { background: #fff; border: 2px solid var(--line); border-radius: 12px; margin: 0 0 24px; }
.toc summary {
  display: flex; justify-content: space-between; align-items: center; cursor: pointer;
  padding: 12px 16px; font-weight: 700; list-style: none;
}
.toc summary::-webkit-details-marker { display: none; }
.toc-title::before { content: "📖"; margin-right: 8px; }
.toc-hint {
  font-size: 14px; font-weight: 700; color: var(--ink); background: var(--cream);
  border: 1px solid var(--line); border-radius: 999px; padding: 2px 14px;
}
.toc-hint::after { margin-left: 6px; }
.toc-hint-open::after { content: "▲"; font-size: 11px; }
.toc-hint-closed::after { content: "▼"; font-size: 11px; }
.toc[open] .toc-hint-closed, .toc:not([open]) .toc-hint-open { display: none; }
.toc ol { list-style: none; margin: 0; padding: 0 12px 12px; border-top: 1px solid var(--line); }
.toc li a {
  display: flex; gap: 10px; align-items: flex-start; padding: 9px 6px; color: var(--ink);
  text-decoration: none; border-bottom: 1px dashed var(--line); line-height: 1.6;
}
.toc li:last-child a { border-bottom: 0; }
.toc-no {
  flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: #fff;
  font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; margin-top: 2px;
}
.toc li a span:last-child { word-break: keep-all; overflow-wrap: anywhere; text-decoration: underline; text-decoration-color: var(--line); }

/* ---------- 表 ---------- */
.table-wrap { margin: 0 0 16px; }
table { width: 100%; border-collapse: collapse; background: #fff; font-size: 15px; line-height: 1.6; border-radius: 10px; overflow: hidden; }
th, td { border: 1px solid var(--line); padding: 10px 8px; vertical-align: top; }
thead th { background: var(--accent); color: #fff; font-weight: 700; }
tbody th { background: var(--cream); text-align: left; width: 5.2em; white-space: nowrap; }
.nw { white-space: nowrap; }
table.size td { text-align: center; }

/* ---------- カード・囲み ---------- */
.cards { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 0 0 18px; }
.mini-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px 2px; box-shadow: 0 2px 6px rgba(120, 80, 60, .06); }
.mini-ico { font-size: 28px; margin: 0 0 2px !important; line-height: 1.2; }
.mini-title { font-weight: 700; font-size: 17px; margin: 0 0 6px !important; color: var(--accent-dark); }
.box { border-radius: 12px; padding: 14px 16px 2px; margin: 16px 0 18px; }
.box-info { background: var(--cream); border: 2px solid #f3d9b5; }
.box-note { background: #f6f3f1; font-size: 15px; }
.box-plain { background: #fff; border: 1px solid var(--line); padding-bottom: 10px; }
.box-title { font-weight: 700; margin: 0 0 6px !important; }
.box ul { margin: 0 0 12px; padding-left: 1.3em; }

/* ---------- お店のカード ---------- */
.shop-list { display: grid; gap: 18px; margin: 0 0 18px; }
.shop-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 16px 16px 14px; box-shadow: 0 3px 10px rgba(120, 80, 60, .07); }
.shop-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 8px; }
.shop-no {
  flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--accent); color: #fff;
  font-weight: 700; display: inline-flex; align-items: center; justify-content: center; font-size: 17px;
}
.shop-card h4 { margin: 0; padding: 0; border: 0; font-size: 19px; line-height: 1.5; word-break: keep-all; overflow-wrap: anywhere; }
.shop-area { margin: 2px 0 0 !important; font-size: 14px; color: var(--sub); }
.shop-area::before { content: "📍"; margin-right: 4px; }
.tags { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0 0 10px; }
.tags li { font-size: 13px; background: var(--mint-soft); color: var(--mint); border-radius: 999px; padding: 2px 10px; font-weight: 700; white-space: nowrap; }
.spec { margin: 0 0 6px; border-top: 1px solid var(--line); }
.spec-row { display: grid; grid-template-columns: 6.5em 1fr; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 1.65; }
.spec dt { font-weight: 700; color: var(--accent-dark); }
.spec dd { margin: 0; }

/* ---------- 種類から探す ---------- */
.pick-list { display: grid; gap: 14px; margin: 0 0 18px; }
.pick { background: #fff; border: 2px solid var(--accent-soft); border-radius: 14px; padding: 14px 16px 6px; }
.pick-title { font-weight: 700; font-size: 18px; margin: 0 0 6px !important; }
.pick .btn-wrap { margin-top: 6px; }

/* ---------- 手順 ---------- */
ol.steps { list-style: none; padding: 0; margin: 0 0 18px; counter-reset: none; }
ol.steps li { display: flex; gap: 12px; position: relative; padding-bottom: 14px; }
ol.steps li:not(:last-child)::after {
  content: ""; position: absolute; left: 17px; top: 38px; bottom: 0; width: 2px; background: var(--line);
}
.step-no {
  flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--mint); color: #fff;
  font-weight: 700; display: inline-flex; align-items: center; justify-content: center; position: relative; z-index: 1;
}
.step-title { font-weight: 700; margin: 4px 0 4px !important; }
ol.steps p:not(.step-title) { margin-bottom: 4px; }

/* ---------- よくある質問 ---------- */
.faq { display: grid; gap: 14px; }
.qa { background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.q { margin: 0 !important; padding: 12px 14px; background: var(--cream); font-weight: 700; display: flex; gap: 10px; align-items: flex-start; }
.a { padding: 12px 14px 2px; display: flex; gap: 10px; align-items: flex-start; }
.qa-mark {
  flex: none; width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px; color: #fff; background: var(--accent); margin-top: 2px;
}
.a .qa-mark { background: var(--mint); }

/* ---------- ページ内リンク ---------- */
.in-link { font-weight: 700; }
.pos { }

/* ---------- トップ・固定ページ ---------- */
.area-list { list-style: none; padding: 0; display: grid; gap: 12px; }
.area-link {
  display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; background: #fff;
  border: 2px solid var(--accent); border-radius: 14px; color: var(--ink); font-weight: 700; font-size: 18px;
  text-decoration: none; box-shadow: 0 4px 0 var(--accent-soft);
}
.area-link .btn-arrow { background: var(--accent); color: #fff; }

/* ---------- お問い合わせのフォーム（kanri-core が出すもの） ---------- */
.main form input[type=text], .main form input[type=email], .main form textarea {
  width: 100%; font-size: 17px; padding: 10px 12px; border: 2px solid var(--line); border-radius: 8px; background: #fff;
}
.main form button, .main form input[type=submit] {
  min-height: 56px; padding: 10px 28px; font-size: 18px; font-weight: 700; color: #fff; border: 0; border-radius: 999px;
  background: linear-gradient(180deg, #ea5f74, var(--accent)); box-shadow: 0 5px 0 var(--accent-dark); cursor: pointer;
}

/* ---------- パソコンの幅 ---------- */
@media (min-width: 720px) {
  body { font-size: 17px; }
  h1 { font-size: 30px; }
  h2 { font-size: 24px; }
  .two-col { grid-template-columns: 1fr 1fr; }
  .cards-2 { grid-template-columns: 1fr 1fr; }
  .cards-3 { grid-template-columns: 1fr 1fr 1fr; }
  .answer { padding: 22px 22px 10px; }
  table { font-size: 16px; }
}
.main form .field { margin: 0 0 18px; }
.main form label { display: block; font-weight: 700; margin-bottom: 4px; }
.main form .req { margin-left: 8px; font-size: 12px; color: #fff; background: var(--accent); border-radius: 4px; padding: 1px 6px; vertical-align: 2px; }
.main form .hint { font-size: 14px; color: var(--sub); margin: 0 0 4px; }
.main form .btn { max-width: 320px; }
.page h1, .home h1 { margin-top: 20px; }

/* ---------- 早見表・場所の目次・予約の締め切り ---------- */
table.hayami td, table.hayami th { font-size: 14px; }
table.hayami td { line-height: 1.8; }
table.hayami tbody th { width: 6em; white-space: normal; font-size: 13px; padding: 10px 6px; }
table.hayami td { padding: 10px 6px; }
table.hayami td:last-child { color: var(--accent-dark); }
.area-index { background: #fff; border: 2px solid var(--accent-soft); border-radius: 12px; padding: 12px 16px 6px; margin: 0 0 8px; }
.area-index ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.area-index li { border-bottom: 1px dashed var(--line); }
.area-index .area-jump { text-decoration: none; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 0; color: var(--link); }
.area-index .area-jump span:first-child { text-decoration: underline; text-underline-offset: 3px; }
.area-index .area-jump .area-no::after { content: " ›"; }
.area-index .area-jump .area-no { text-decoration: none; }
.area-index li:last-child { border-bottom: 0; }
.area-no { flex: none; font-weight: 700; color: var(--accent-dark); }
ol.timeline { list-style: none; padding: 0; margin: 0 0 18px; }
ol.timeline li { display: grid; grid-template-columns: 5.2em 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.tl-when { align-self: start; text-align: center; font-weight: 700; color: #fff; background: var(--mint); border-radius: 8px; padding: 4px 2px; font-size: 15px; white-space: nowrap; }
.tl-shop { font-weight: 700; margin: 0 0 2px !important; word-break: keep-all; overflow-wrap: anywhere; }
ol.timeline p:not(.tl-shop) { margin: 0 !important; font-size: 15px; line-height: 1.7; }
@media (min-width: 720px) { .area-index ul { grid-template-columns: 1fr 1fr; } }

/* ---------- お店のくわしい紹介 ---------- */
.shop-sub { margin: 18px 0 8px !important; font-weight: 700; font-size: 16px; color: var(--accent-dark); display: flex; align-items: center; gap: 6px; }
.shop-sub::before { content: ""; width: 6px; height: 18px; border-radius: 3px; background: var(--accent); flex: none; }
.shop-fit { background: var(--cream); border-radius: 12px; padding: 4px 14px 6px; margin: 14px 0; }
.shop-fit .shop-sub { margin-top: 10px !important; }
.shop-fit ul.check { margin-bottom: 6px; }
table.menu tbody th { width: auto; text-align: left; font-weight: 400; white-space: normal; font-size: 14px; line-height: 1.6; }
table.menu td { font-weight: 700; color: var(--accent-dark); text-align: right; width: 9.5em; }
table.menu thead th:last-child { text-align: right; }
.shop-card .btn-wrap { margin-top: 14px; }

/* ---------- 先に結論：理由 ---------- */
.answer-lead { font-size: 18px; }
ol.reasons { list-style: none; padding: 0; margin: 8px 0 16px; display: grid; gap: 10px; }
ol.reasons li { display: flex; gap: 12px; background: var(--mint-soft); border-radius: 12px; padding: 12px 14px; }
.reason-no { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--mint); color: #fff; font-weight: 700; display: grid; place-items: center; }
.reason-title { font-weight: 700; margin: 0 0 4px !important; }
ol.reasons p:not(.reason-title) { margin: 0; font-size: 16px; }
.answer-sub { border-top: 2px dashed var(--line); margin-top: 18px; padding-top: 12px; }
.pick-sub { margin: 10px 0 0 !important; font-size: 14px; color: var(--sub); text-align: center; }
@media (min-width: 720px) { ol.reasons { grid-template-columns: 1fr 1fr; } }
.shop-cakejp { background: var(--mint-soft); border-radius: 12px; padding: 12px 14px 4px; margin: 14px 0 0; }
.shop-cakejp p { font-size: 15px; margin-bottom: 4px; }
/* 楽天のボタン（楽天っぽい赤） */
.btn-rakuten { background: linear-gradient(180deg, #d81c1c, #bf0000); box-shadow: 0 5px 0 #8c0000, 0 8px 16px rgba(140, 0, 0, .25); }
.btn-rakuten:active { box-shadow: 0 1px 0 #8c0000; }

/* ---------- 押したくなる動き（広告のボタンだけ） ----------
 * 4秒ごとに光がすっと走り、同時に矢印が右へ動き、ボタンが少しだけふくらむ。
 * 指でふれる・マウスをのせると少し浮く。動きを減らす設定の人には動かさない。 */
.btn-buy { position: relative; overflow: hidden; isolation: isolate; animation: btn-pulse 4s ease-in-out infinite; }
.btn-buy::after {
  content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(105deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-20deg); animation: btn-shine 4s ease-in-out infinite; pointer-events: none; z-index: 1;
}
.btn-buy .btn-arrow { animation: btn-arrow 4s ease-in-out infinite; }
.btn-buy:hover { transform: translateY(-2px); }
.btn-buy:active { transform: translateY(4px); animation: none; }
@keyframes btn-shine { 0%, 62% { left: -60%; } 82%, 100% { left: 130%; } }
@keyframes btn-pulse { 0%, 62%, 100% { scale: 1; } 72% { scale: 1.035; } 82% { scale: 1; } }
@keyframes btn-arrow { 0%, 62%, 100% { transform: translateX(0); } 70% { transform: translateX(5px); } 78% { transform: translateX(0); } 84% { transform: translateX(3px); } 90% { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) {
  .btn-buy, .btn-buy::after, .btn-buy .btn-arrow { animation: none; }
}

/* ---------- 目的から探す（カード） ---------- */
.hayami-list { display: grid; gap: 14px; margin: 0 0 16px; }
.hayami-item { background: #fff; border: 2px solid var(--accent-soft); border-radius: 14px; padding: 14px 16px 6px; }
.hayami-title { font-weight: 700; font-size: 18px; margin: 0 0 8px !important; display: flex; gap: 8px; align-items: center; }
.hayami-dl { margin: 0; }
.hayami-dl > div { display: grid; grid-template-columns: 6.5em 1fr; gap: 8px; padding: 6px 0; border-top: 1px dashed var(--line); font-size: 15px; line-height: 1.65; }
.hayami-dl dt { font-weight: 700; color: var(--accent-dark); }
.hayami-dl .deli dt { color: var(--mint); }
.hayami-dl dd { margin: 0; }
.hayami-item .btn-wrap { margin: 10px 0 10px; }
@media (min-width: 720px) { .hayami-list { grid-template-columns: 1fr 1fr; } }
/* 取り寄せと楽天のボタンが続くときは、間をあけて別のボタンだと分かるように */
.btn-wrap + .btn-wrap { margin-top: 18px; }

/* ---------- 迷ったらこれ ---------- */
.pick-one { position: relative; background: #fff; border: 3px solid #f2b705; border-radius: 16px; padding: 22px 16px 8px; margin: 22px 0 18px; box-shadow: 0 4px 14px rgba(242, 183, 5, .18); }
.pick-one-label { position: absolute; top: -15px; left: 14px; margin: 0 !important; background: #f2b705; color: #3a2a00; font-weight: 700; font-size: 15px; padding: 3px 14px; border-radius: 999px; }
.pick-one-label::before { content: "👑 "; }
.pick-one-name { font-weight: 700; font-size: 19px; line-height: 1.5; margin: 0 0 8px !important; }
.pick-one-name span { display: block; font-size: 14px; font-weight: 400; color: var(--sub); }
.area-end { background: var(--mint-soft); border-radius: 14px; padding: 14px 16px 4px; margin: 0 0 24px; }
.area-end p { margin-bottom: 4px; }
/* 本文の中の広告の文字リンク */
.text-link { color: var(--link); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.shop-where { font-size: .85em; color: var(--sub); font-weight: 400; white-space: nowrap; }
/* 早見表のカード：横に並んだカードで、ボタンの高さをそろえる */
.hayami-item { display: flex; flex-direction: column; }
.hayami-item .btn-wrap { margin-top: auto; padding-top: 10px; }
.hayami-dl dd .shop-line { display: block; }

/* ---------- お店の紹介：3つの大事なこと・くわしく見る ---------- */
.shop-sum { display: grid; gap: 6px; margin: 10px 0 4px; background: var(--accent-soft); border-radius: 12px; padding: 10px 12px; }
.shop-sum > div { display: grid; grid-template-columns: 5em 1fr; gap: 8px; font-size: 15px; line-height: 1.6; }
.shop-sum dt { font-weight: 700; color: var(--accent-dark); }
.shop-sum dd { margin: 0; font-weight: 700; }
.shop-more { margin: 12px 0 0; border: 2px solid var(--line); border-radius: 12px; background: #fffdfb; }
.shop-more > summary { cursor: pointer; list-style: none; padding: 12px 14px; font-weight: 700; color: var(--accent-dark); display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.shop-more > summary::-webkit-details-marker { display: none; }
.shop-more > summary::after { content: "＋ 開く"; flex: none; font-size: 13px; background: var(--accent); color: #fff; border-radius: 999px; padding: 2px 10px; }
.shop-more[open] > summary::after { content: "－ 閉じる"; background: var(--sub); }
.shop-more[open] { padding: 0 12px 6px; }
.shop-more[open] > summary { padding-left: 2px; padding-right: 2px; }

/* ---------- 12店を比べる表 ---------- */
table.compare-shops tbody th { width: 8.5em; white-space: normal; font-size: 14px; }
table.compare-shops td { font-size: 14px; }
table.compare-shops td span { display: block; }
.cs-get { font-weight: 700; }
.cs-price { color: var(--accent-dark); font-weight: 700; }

/* ---------- パンくず ---------- */
.crumbs { font-size: 13px; color: var(--sub); margin: 0 0 4px; display: flex; gap: 6px; flex-wrap: wrap; }
.crumbs a { color: var(--sub); }

/* 広告の画像（A8の素材）。スマホでは横いっぱい、広い画面では大きくしすぎない */
.banner { margin: 20px auto; max-width: 420px; text-align: center; }
.banner a { display: block; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.banner img { display: block; width: 100%; height: auto; }

/* 早見表のカードのボタン：カードごとに並ぶので、ひかえめにする（白地に色の枠、小さめ、動きなし）。
   ボタンばかりが続いて押し売りに見えないように（MAINさん指摘） */
.hayami-item .btn-buy, .mini-card .btn-buy, .pick .btn-buy {
  color: var(--accent-dark); background: #fff; border: 2px solid var(--accent);
  box-shadow: 0 3px 0 var(--accent-soft); min-height: 46px; font-size: 16px; padding: 8px 18px;
  animation: none;
}
.hayami-item .btn-buy::after, .mini-card .btn-buy::after, .pick .btn-buy::after { content: none; }
.hayami-item .btn-buy .btn-arrow, .mini-card .btn-buy .btn-arrow, .pick .btn-buy .btn-arrow { animation: none; background: var(--accent-soft); width: 22px; height: 22px; font-size: 17px; }
.hayami-item .btn-buy:active, .mini-card .btn-buy:active, .pick .btn-buy:active { box-shadow: 0 0 0 var(--accent-soft); }
.item-shop { font-size: 14px; color: var(--muted, #7a6a60); margin: -4px 0 8px !important; }
.item-card .check { margin-bottom: 4px; }

/* 横に並ぶ小さなカードは、ボタンの高さをそろえる */
.cards .mini-card { display: flex; flex-direction: column; }
.mini-card .btn-wrap { margin: auto 0 14px; padding-top: 6px; }
.cards { grid-auto-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mini-card .btn-buy, .pick .btn-buy { padding: 8px 12px; gap: 6px; }

/* ボタンの上のひとこと「＼ ○○ ／」 */
.btn-lead { margin: 0 0 8px !important; font-size: 15px; font-weight: 700; color: var(--accent-dark); line-height: 1.5; display: flex; justify-content: center; align-items: center; gap: 8px; }
.btn-lead span { font-weight: 400; color: var(--accent); }

/* 種類のカードのイラスト（自分で描いたもの。商品写真を使ってよいと分かれば差し替える） */
.kind-img { display: block; width: 100%; max-width: 320px; height: auto; margin: 0 auto 10px; border-radius: 10px; }
@media (min-width: 720px) {
  .pick-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pick { display: flex; flex-direction: column; }
  .pick .btn-wrap { margin-top: auto; padding-top: 6px; }
}

.banner-sm { max-width: 336px; margin: 4px auto 14px; }

/* 横に並ぶ囲み（目的ごとの2つの囲み・種類のカード）は、ボタンを下の端でそろえる */
.purpose, .pick-list .pick { display: flex; flex-direction: column; }
.purpose > .btn-wrap, .pick-list .pick > .btn-wrap { margin-top: auto; padding-top: 6px; }

/* Cake.jp の商品の写真（正方形にそろえる） */
.item-photo { margin: 8px auto 10px; max-width: 240px; }
.item-photo-link { display: block; border-radius: 10px; overflow: hidden; background: #fff; }
.item-photo img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
.shop-cakejp .item-photo { max-width: 220px; }

/* 種類の一覧へのリンクに付ける「例」の写真（横長にそろえる）。写真が出せないときはイラストに切りかえ、例の文字を消す */
.ex-photo { margin: 0 0 10px; }
.ex-photo-link { display: block; border-radius: 10px; overflow: hidden; background: #fdf1ee; }
.ex-photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.ex-photo figcaption { margin-top: 4px; font-size: 12px; line-height: 1.5; color: #7a6a66; }
.ex-photo.ex-fallback img { object-fit: contain; }
.ex-photo.ex-fallback figcaption { display: none; }
.ex-photo.ex-banner img { object-fit: contain; background: #fff; }

/* ヘッダーの案内（地域から探す・種類から探す） */
.site-header .inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; }
.head-nav { display: flex; gap: 14px; font-size: 14px; }
.head-nav a { color: var(--ink); text-decoration: none; font-weight: 700; padding: 4px 0; border-bottom: 2px solid transparent; }
.head-nav a:hover { border-bottom-color: var(--accent); }

/* 47都道府県の一覧（地方ごと）。記事がまだの地域は、うすい文字でリンクにしない */
.region-block h3 { margin-top: 24px; }
.area-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.area-grid li { display: flex; flex-direction: column; gap: 6px; }
.area-grid .area-link { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 10px 12px; background: #fff; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); text-decoration: none; font-weight: 700; }
.area-grid a.area-link:hover { border-color: var(--accent); }
.area-grid .area-city { font-size: 14px; font-weight: 400; margin-left: 12px; padding: 6px 10px; }
.area-grid .area-city::before { content: "└ "; color: var(--sub); }
.area-grid .area-soon { color: #b8aaa5; background: #faf6f3; font-weight: 400; }
.near { margin-top: 40px; }