/* JOAM 総合美容医療センター — style.css
   色は :root の変数だけで決める。ページの中で色を直接書かない。 */

:root {
  --ink: #2a2f3a;
  --ink-soft: #586171;
  --bg: #f8f6f3;
  --paper: #ffffff;
  --line: #e2e5ea;
  --navy: #23466b;
  --navy-dark: #172f49;
  --navy-soft: #eaf0f6;
  --rose: #c8436a;          /* 紹介先へのボタン（目立つ色） */
  --rose-dark: #94284a;
  --rose-soft: #fcf0f3;
  --teal: #1f7f79;          /* 2つ目の紹介先のカード */
  --teal-dark: #135650;
  --teal-soft: #e8f5f3;
  --blue: #2563c9;          /* サイトの中へのボタン */
  --blue-dark: #1a4790;
  --link: #1f5bbf;
  --official: #e4eff7;      /* 公式サイトのボタン（うすい色。灰色は使わない） */
  --official-ink: #23466b;
  --official-shadow: #b7cfe2;
  --gold: #b8862b;
  --marker: #fbd6e1;        /* 大事な1文の下に引く線（元の記事の marker-red） */
  --radius: 12px;
  --shadow: 0 2px 10px rgba(23, 47, 73, .08);
  --font: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "BIZ UDPGothic", "Yu Gothic UI", Meiryo, sans-serif;
}

*, *::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;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.9;
  letter-spacing: .02em;
  color: var(--ink);
  word-break: keep-all;      /* 改行は <wbr>（文節の切れ目）でだけ。言葉の途中で改行しない */
  background-color: var(--bg);
  background-image: radial-gradient(circle at 1px 1px, rgba(35, 70, 107, .07) 1px, transparent 0);
  background-size: 22px 22px;
  overflow-wrap: anywhere;
}

img, svg { max-width: 100%; height: auto; vertical-align: middle; }

a { color: var(--link); text-decoration: underline; text-underline-offset: .2em; }
a:hover { color: var(--blue-dark); }

/* 行は端まで使う（2026-10-31 運営者「変な位置での改行がひどい」）。
   本文・見出しで行の長さをそろえる（balance・pretty）と、行が早く折り返して右に大きなすき間ができるので使わない。
   まん中にそろえるボタンと表の見出しだけ、行の長さをそろえる。 */
.btn, thead th { text-wrap: balance; }
h1, h2, h3, h4, p, li, dd, dt, td, tbody th, blockquote, figcaption { text-wrap: wrap; }
.nw { white-space: nowrap; }

/* ===== ヘッダー ===== */
.site-header {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  max-width: 1080px; margin: 0 auto; padding: 10px 16px;
  display: flex; align-items: center; gap: 12px;
}
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--navy-dark); }
.logo img { width: 40px; height: 40px; }
.logo__name { display: flex; flex-direction: column; line-height: 1.3; }
.logo__en { font-weight: 800; font-size: 20px; letter-spacing: .08em; }
.logo__ja { font-size: 12px; color: var(--ink-soft); }
/* flex の箱のすぐ下の <wbr> は、それだけで1つの箱になり、すき間ができる（2026-11-10 運営者「なんか配置おかしいよ」：ロゴの JOAM と日本語の名前のあいだ）。flex の箱の中では、切れ目は要らない */
.logo__name > wbr, .invite__code > wbr, .invite__nets li > wbr, .copy-btn > wbr { display: none; }
.site-header__catch { margin-left: auto; font-size: 13px; color: var(--ink-soft); display: none; }
@media (min-width: 720px) { .site-header__catch { display: block; } }

/* ===== 本文の枠 ===== */
.wrap { max-width: 800px; margin: 0 auto; padding: 0; }
.article {
  background: var(--paper);
  margin: 10px auto 24px;
  padding: 20px 16px 32px;
  box-shadow: var(--shadow);
}
@media (min-width: 720px) {
  .wrap { padding: 0 16px; }
  .article { margin: 16px auto 32px; padding: 32px 44px 44px; border-radius: var(--radius); }
}

.breadcrumb { font-size: 13px; color: var(--ink-soft); margin: 14px 0 0; padding: 0 16px; list-style: none; display: flex; flex-wrap: wrap; gap: 2px 6px; }
.breadcrumb li + li::before { content: "›"; margin-right: 6px; color: #9aa2ae; }
.breadcrumb a { color: var(--ink-soft); }

.pr { display: block; text-align: right; font-size: 12px; line-height: 1; color: #a3a9b3; margin: 0 0 6px; letter-spacing: .1em; }

h1 {
  font-size: 23px; line-height: 1.55; color: var(--navy-dark);
  margin: 0 0 14px; letter-spacing: .03em;
}
@media (min-width: 720px) { h1 { font-size: 29px; } }

.lead { margin: 0 0 18px; }

/* 大見出し：色の背景 */
.article h2 {
  position: relative;
  font-size: 21px; line-height: 1.5; color: #fff;
  background: var(--navy);
  background-image: linear-gradient(135deg, var(--navy) 0%, #2d5a86 100%);
  margin: 48px -4px 20px; padding: 14px 16px 14px 26px;
  border-radius: 10px;
}
.article h2::before {
  content: ""; position: absolute; left: 12px; top: 16px; bottom: 16px; width: 5px;
  border-radius: 3px; background: #f2b8c9;
}
@media (min-width: 720px) { .article h2 { font-size: 24px; margin-left: -12px; margin-right: -12px; } }

/* 小見出し：丸と下線 */
.article h3 {
  position: relative;
  font-size: 19px; line-height: 1.55; color: var(--navy-dark);
  margin: 34px 0 14px; padding: 0 0 8px 26px;
  border-bottom: 2px solid #d8e2ec;
}
.article h3::before {
  content: ""; position: absolute; left: 2px; top: .42em;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--rose); box-shadow: 0 0 0 4px var(--rose-soft);
}
@media (min-width: 720px) { .article h3 { font-size: 20px; } }

.article p { margin: 0 0 1em; }
.note { font-size: 14px; color: var(--ink-soft); line-height: 1.75; }
.small { font-size: 14px; }

/* 飾りの付いた箇条書き */
ul.deco { list-style: none; padding: 0; margin: 0 0 1.1em; }
ul.deco li { position: relative; padding-left: 28px; margin: .35em 0; }
ul.deco li::before {
  content: ""; position: absolute; left: 4px; top: .55em;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--teal-soft) url("../img/check.svg") center / 10px no-repeat;
  border: 1.5px solid var(--teal);
}

/* ===== 目次（閉じられる・最初は開いている） ===== */
.toc { margin: 24px 0 8px; border: 1.5px solid #d8e2ec; border-radius: var(--radius); background: #fbfcfe; }
.toc summary {
  list-style: none; cursor: pointer; padding: 12px 16px; font-weight: 700; color: var(--navy-dark);
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.toc summary::-webkit-details-marker { display: none; }
.toc__toggle { font-size: 14px; font-weight: 400; color: var(--link); text-decoration: underline; }
.toc[open] .toc__toggle--open, .toc:not([open]) .toc__toggle--close { display: none; }
.toc ol { margin: 0; padding: 0 16px 14px 40px; }
.toc li { margin: .3em 0; line-height: 1.6; }
.toc li::marker { color: var(--rose); font-weight: 700; }
/* 目次の「よくある質問」の下：地域だけの問い（例：資生堂のメイクレッスンは、鹿児島で受けられますか？） */
.toc .toc__sub { margin: .15em 0 0; padding: 0 0 0 1.2em; list-style: disc; font-size: 14px; }
.toc .toc__sub li { margin: .15em 0; }
.toc .toc__sub li::marker { color: var(--ink-soft); font-weight: 400; }

/* ===== 結論の箱 ===== */
.answer {
  border: 2px solid var(--rose);
  border-radius: var(--radius);
  background: var(--paper);
  margin: 8px 0 28px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.answer__head {
  display: flex; align-items: center; gap: 8px;
  background: var(--rose); color: #fff; font-weight: 700; padding: 8px 16px;
}
.answer__head img { width: 22px; height: 22px; }
.answer__body { padding: 16px 14px 6px; }
@media (min-width: 720px) { .answer__body { padding: 18px 20px 8px; } }
.answer__body p { margin: 0 0 .8em; }
.answer__body p:first-child { font-weight: 700; }

/* 迷ったらこれ：吹き出しのバッジ → 名前とサービス名 → 大きな写真 */
.pick { text-align: center; padding: 6px 4px 4px; }
.pick__badge {
  position: relative; display: inline-block;
  background: var(--rose); color: #fff; font-weight: 800; font-size: 16px;
  padding: 6px 20px; border-radius: 999px; margin-bottom: 14px; letter-spacing: .08em;
}
.pick__badge::after {
  content: ""; position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%);
  border: 9px solid transparent; border-bottom: 0; border-top-color: var(--rose);
}
.pick__name { display: block; font-size: 22px; font-weight: 800; color: var(--link); line-height: 1.4; }
.pick__service { display: block; font-size: 15px; color: var(--ink-soft); margin-top: 2px; }
.pick__photo { display: block; margin: 12px auto 4px; max-width: 520px; border-radius: 12px; overflow: hidden; }
.pick__photo img { display: block; width: 100%; }

/* ＼ ひとこと ／ */
.catch { text-align: center; font-weight: 700; color: var(--rose-dark); margin: 18px 0 6px; font-size: 16px; line-height: 1.5; }

/* ===== ボタン ===== */
.btns { display: flex; flex-direction: column; align-items: center; gap: 14px; margin: 8px 0 26px; }
.btn {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 58px; padding: 12px 46px 12px 22px;
  border-radius: 12px; font-weight: 700; font-size: 17px; line-height: 1.45;
  text-align: center; text-decoration: none; color: #fff;
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn__label { display: block; }
.btn::after {
  content: ""; position: absolute; right: 20px; top: 50%;
  width: 10px; height: 10px; margin-top: -5px;
  border-top: 3px solid currentColor; border-right: 3px solid currentColor;
  transform: rotate(45deg);
  transition: transform .2s ease;
}
.btn:hover { color: #fff; transform: translateY(2px); }
.btn:active { transform: translateY(4px); }
@media (min-width: 720px) {
  .btn { width: auto; min-width: 360px; max-width: 100%; }
  .btn--big { min-width: 420px; }
}

.btn--cta { background: var(--rose); box-shadow: 0 5px 0 var(--rose-dark); }
.btn--cta:hover { box-shadow: 0 3px 0 var(--rose-dark); }
.btn--teal { background: var(--teal); box-shadow: 0 5px 0 var(--teal-dark); }
.btn--teal:hover { box-shadow: 0 3px 0 var(--teal-dark); }
.btn--in { background: var(--blue); box-shadow: 0 5px 0 var(--blue-dark); }
.btn--in:hover { box-shadow: 0 3px 0 var(--blue-dark); }
.btn--official { background: var(--official); color: var(--official-ink); box-shadow: 0 5px 0 var(--official-shadow); }
.btn--official:hover { color: var(--official-ink); box-shadow: 0 3px 0 var(--official-shadow); }

/* 目立つボタン（1ページ4つまで）：大きく、ときどき弾み、光が流れる */
.btn--big { min-height: 66px; font-size: 18px; overflow: hidden; animation: btn-bounce 4s ease-in-out infinite; }
.btn--big::before {
  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(-20deg);
  animation: btn-shine 4s ease-in-out infinite;
}
@keyframes btn-bounce {
  0%, 82%, 100% { transform: translateY(0); }
  86% { transform: translateY(-5px); }
  90% { transform: translateY(0); }
  94% { transform: translateY(-2px); }
}
@keyframes btn-shine {
  0%, 60% { left: -60%; }
  80%, 100% { left: 130%; }
}
/* ひかえめなボタン：矢印が少し動く */
.btn:not(.btn--big)::after { animation: arrow-nudge 2.4s ease-in-out infinite; }
@keyframes arrow-nudge {
  0%, 70%, 100% { transform: translateX(0) rotate(45deg); }
  85% { transform: translateX(4px) rotate(45deg); }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .btn::before, .btn::after { animation: none !important; transition: none !important; }
}

/* 文の中の広告リンク・ページ内リンク */
.ad-text { font-weight: 700; }

/* ===== 表 ===== */
.table-box { position: relative; margin: 10px 0 8px; }
.table-hint { display: none; font-size: 14px; color: var(--ink-soft); margin: 0 0 6px; padding-right: 56px; }
.table-more {
  display: none; position: absolute; right: 0; top: -4px;
  width: 44px; height: 34px; border-radius: 8px; border: 0;
  background: var(--navy); color: #fff; font-size: 18px; font-weight: 700; cursor: pointer;
  box-shadow: 0 3px 0 var(--navy-dark);
}
.table-box.is-scrollable .table-hint, .table-box.is-scrollable .table-more { display: block; }
.table-box.is-end .table-more { display: none; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 10px; border: 1px solid var(--line); }
.table-box.is-scrollable:not(.is-end) .table-scroll { box-shadow: inset -18px 0 14px -14px rgba(23, 47, 73, .35); }
table { border-collapse: collapse; width: 100%; font-size: 15px; line-height: 1.6; background: var(--paper); }
/* 表の中は overflow-wrap: break-word（本文の anywhere だと、列の幅を決めるときに言葉の途中でも切れる前提でせまくなり、
   せまい画面で「（約80〜90分／）と、」のように入りきらない所で折り返していた。2026-11-01 岐阜 320px）。
   列は、いちばん長い折り返さないかたまりの幅より細くならない */
table { overflow-wrap: break-word; }
th, td { border-bottom: 1px solid var(--line); padding: 10px 12px; vertical-align: top; text-align: left; }
thead th { background: var(--navy-soft); color: var(--navy-dark); font-weight: 700; white-space: nowrap; }
tbody th { font-weight: 700; color: var(--navy-dark); background: #fbfcfe; }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; white-space: nowrap; }
td.nw, th.nw { white-space: nowrap; }
tbody th[scope="row"] { min-width: 11.5em; }
th.nw[scope="row"] { min-width: 0; }
td.txt { min-width: 14em; }
td.mid { min-width: 10em; }
td.wide { min-width: 11em; }
.table-xwide { min-width: 880px; }
.pick__service { text-wrap: wrap; }
tr.is-pick th, tr.is-pick td { background: var(--rose-soft); }
tr.is-sub th, tr.is-sub td { background: var(--teal-soft); }
.table-wide { min-width: 760px; }
.table-mid { min-width: 560px; }
/* 横に動かさずに読む表（値段の合計など）。名前の下に中身を小さく書く */
.table-fit tbody th[scope="row"] { min-width: 0; }
.table-fit .incl { display: block; margin-top: 4px; font-size: 14px; font-weight: 400; color: var(--ink-soft); line-height: 1.6; }
.table-fit .fee { display: block; font-size: 13px; color: var(--ink-soft); }
.tag-pick { display: inline-block; font-size: 12px; line-height: 1.4; background: var(--rose); color: #fff; border-radius: 4px; padding: 1px 6px; margin: 0 0 3px; }
.dash-note { font-size: 14px; color: var(--ink-soft); margin: 4px 0 18px; line-height: 1.7; }
/* 注の中の span は文の中に置く（前は「.dash-note > span { display: block }」で、改行の決まりで入れた span「）の」が1行をしめていた。2026-10-31 鹿児島で見つけた） */

/* ===== カード（〇〇なら） ===== */
.cards { display: grid; gap: 18px; margin: 12px 0 26px; }
@media (min-width: 900px) { .cards--2 { grid-template-columns: 1fr 1fr; } }
.card {
  display: flex; flex-direction: column;
  border: 2px solid var(--card-color, var(--teal));
  border-radius: var(--radius); background: var(--paper); box-shadow: var(--shadow); overflow: hidden;
}
.card__band {
  display: flex; align-items: center; gap: 10px;
  background: var(--card-color, var(--teal)); color: #fff; font-weight: 700; padding: 10px 16px; line-height: 1.5;
}
.card__band img { width: 26px; height: 26px; flex: none; }
.card__body { padding: 14px 16px 6px; flex: 1; }
.card__name { font-size: 19px; font-weight: 800; margin: 0 0 4px; color: var(--ink); }
.card__name a { color: var(--link); }
.card dl { margin: 10px 0 6px; }
.card dt { font-weight: 700; color: var(--card-color, var(--teal)); font-size: 15px; margin-top: 10px; }
.card dd { margin: 2px 0 0; }
.card__foot { padding: 4px 16px 18px; margin-top: auto; }
.card__foot .catch { margin-top: 4px; }
.card__foot .btns { margin: 6px 0 0; }
.card--teal { --card-color: var(--teal); }
.card--teal .catch { color: var(--teal-dark); }

/* ===== 囲み（不安に答える・知っておくこと） ===== */
.box {
  border-radius: var(--radius); padding: 16px 16px 6px; margin: 18px 0 24px;
  background: var(--navy-soft); border: 1.5px solid #cddbe9;
}
.box__title { display: flex; align-items: center; gap: 8px; font-weight: 800; color: var(--navy-dark); margin: 0 0 8px; font-size: 18px; line-height: 1.5; }
.box__title img { width: 26px; height: 26px; flex: none; }
.box--mint { background: var(--teal-soft); border-color: #bfe0db; }
.box--mint .box__title { color: var(--teal-dark); }
.box--warn { background: #fff8ec; border-color: #f0dcb4; }
.box--warn .box__title { color: #7a5413; }

/* 口コミの原文 */
/* 枠の中に置くので、口コミには枠も背景もつけない（運営者 2026-10-31「枠の中に枠があって気持ち悪い」） */
.voice { margin: 12px 0 16px; padding: 2px 0 2px 40px; position: relative; }
.voice::before {
  content: "“"; position: absolute; left: 12px; top: 2px; font-size: 40px; line-height: 1; color: var(--rose); font-family: Georgia, serif;
}
.voice p { margin: 0; }
.voice cite { display: block; font-style: normal; font-size: 13px; color: var(--ink-soft); margin-top: 4px; }

/* 弱み：おぎなう事実 */
.weak { list-style: none; padding: 0; margin: 0 0 1em; }
.weak li { padding: 10px 12px; border-radius: 10px; background: var(--paper); border: 1px solid var(--line); margin: 8px 0; }
.weak__w { font-weight: 700; color: #7a5413; }

/* ===== 手順の丸い番号 ===== */
ol.steps { list-style: none; counter-reset: step; padding: 0; margin: 12px 0 18px; }
ol.steps > li { counter-increment: step; position: relative; padding: 2px 0 16px 52px; }
ol.steps > li::before {
  content: counter(step); position: absolute; left: 0; top: 0;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--navy); color: #fff; font-weight: 800; text-align: center; line-height: 36px; font-size: 17px;
}
ol.steps > li:not(:last-child)::after {
  content: ""; position: absolute; left: 17px; top: 40px; bottom: 4px; width: 2px; background: #d3deea;
}
ol.steps strong { display: block; color: var(--navy-dark); }
ol.steps p { margin: 0; }

/* ===== よくある質問 ===== */
.faq { margin: 12px 0 24px; }
.faq__item { border: 1px solid var(--line); border-radius: var(--radius); margin: 0 0 14px; background: var(--paper); box-shadow: var(--shadow); }
.faq__q, .faq__a { position: relative; padding: 14px 16px 14px 56px; margin: 0; }
.faq__q { font-weight: 700; color: var(--navy-dark); border-bottom: 1px dashed var(--line); }
.faq__q::before, .faq__a::before {
  position: absolute; left: 14px; top: 13px; width: 30px; height: 30px; border-radius: 8px;
  color: #fff; font-weight: 800; text-align: center; line-height: 30px; font-size: 16px;
}
.faq__q::before { content: "Q"; background: var(--navy); }
.faq__a::before { content: "A"; background: var(--rose); }
.faq__a p { margin: 0 0 .6em; }
.faq__a p:last-child { margin: 0; }

/* ===== まとめ ===== */
.summary { border: 2px solid var(--navy); border-radius: var(--radius); padding: 16px 16px 4px; margin: 14px 0 20px; background: #fbfcfe; }
.summary p { margin: 0 0 .8em; }

/* ===== 関連・道案内 ===== */
.related { display: grid; gap: 10px; grid-template-columns: 1fr; margin: 10px 0 20px; padding: 0; list-style: none; }
@media (min-width: 560px) { .related { grid-template-columns: 1fr 1fr; } }
.related > li > a, .related > li > span {
  display: block; padding: 12px 14px; border-radius: 10px; background: #f7faff; border: 1px solid #d6e2f3;
  color: var(--link); font-weight: 700; text-decoration: none; line-height: 1.5;
}
.related a:hover { background: #eef4ff; text-decoration: underline; }

.nav-section { background: var(--paper); box-shadow: var(--shadow); padding: 20px 16px 10px; margin: 0 auto 16px; }
@media (min-width: 720px) { .nav-section { border-radius: var(--radius); padding: 24px 28px 14px; margin-bottom: 24px; } }
.nav-section h2 { font-size: 20px; color: var(--navy-dark); margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
.nav-section h2 img { width: 28px; height: 28px; }
.nav-cat { margin: 0 0 16px; }
.nav-cat__title { display: flex; align-items: center; gap: 8px; font-weight: 800; color: var(--navy-dark); margin: 10px 0 8px; }
.nav-cat__title img { width: 30px; height: 30px; padding: 4px; border-radius: 8px; background: var(--navy-soft); }
/* トップの「施術・診断から探す」は、まとまりの名前から親の入口へ（2026-11-10） */
.nav-cat__link { color: var(--navy-dark); text-decoration: underline; text-underline-offset: 3px; }
.nav-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 720px) { .nav-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* 枠は li のすぐ下の a（いま見ているページは span）だけ。中の span は文字を包むだけで、枠をつけない */
.nav-grid > li > a, .nav-grid > li > span {
  display: flex; align-items: center; justify-content: center; min-height: 48px; text-align: center;
  padding: 8px 6px; border-radius: 10px; background: #f7faff; border: 1px solid #d6e2f3;
  color: var(--link); font-weight: 700; font-size: 15px; line-height: 1.4; text-decoration: none;
}
.nav-grid > li > a:hover { background: #eef4ff; text-decoration: underline; }
.nav-grid > li > span > span, .nav-grid > li > a > span { display: inline; padding: 0; border: 0; background: none; min-height: 0; }
.nav-grid [aria-current] { background: var(--navy); border-color: var(--navy); color: #fff; cursor: default; }
.nav-area { margin: 0 0 14px; }
.nav-area__title { font-weight: 700; color: var(--ink-soft); font-size: 15px; margin: 8px 0 6px; }

/* ===== フッター ===== */
.site-footer { background: var(--navy-dark); color: #dfe7f0; padding: 26px 16px 34px; font-size: 14px; }
.site-footer__inner { max-width: 800px; margin: 0 auto; }
.site-footer a { color: #fff; }
.site-footer ul { list-style: none; padding: 0; margin: 0 0 14px; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.site-footer__copy { color: #a9b8c9; font-size: 13px; margin: 0; }

/* 画面の読み上げ用 */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ===== 店の一覧（1店ずつ） ===== */
.shop { border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); padding: 4px 16px 10px; margin: 12px 0 18px; box-shadow: var(--shadow); }
.shop dl { margin: 6px 0 8px; display: grid; grid-template-columns: 7.5em 1fr; gap: 0; }
.shop dt { font-weight: 700; color: var(--navy-dark); font-size: 15px; padding: 8px 8px 8px 0; border-bottom: 1px dashed var(--line); }
.shop dd { margin: 0; padding: 8px 0; border-bottom: 1px dashed var(--line); font-size: 15px; line-height: 1.7; }
.shop dt:last-of-type, .shop dd:last-of-type { border-bottom: 0; }
.shop__link { font-size: 15px; margin: 4px 0 6px; }
/* 区・市から探す（東京の遅延型フードアレルギー検査。2026-11-09）：区・市の名前と、その院へのページの中のリンク */
.area-index { margin: 8px 0 16px; border-top: 1px solid var(--line); }
.area-index dt { font-weight: 700; padding: 10px 0 2px; }
.area-index dd { margin: 0; padding: 0 0 10px; border-bottom: 1px solid var(--line); }
.area-index ul { list-style: none; margin: 0; padding: 0; }
.area-index li { margin: 0; padding: 2px 0; line-height: 1.7; }
@media (max-width: 420px) { .shop dl { grid-template-columns: 1fr; } .shop dt { border-bottom: 0; padding-bottom: 0; } }

/* カードの中の小さな絵 */
.card__ill { display: block; margin: 4px 0 10px; border-radius: 10px; overflow: hidden; }
.card__ill img { display: block; width: 100%; }


/* ===== 結論の箱の理由（3つ） ===== */
.answer__body .answer__why { font-weight: 400; margin-bottom: .3em; }
.answer__points { margin-bottom: .6em; }
.answer__points li { font-weight: 700; }
/* 結論の箱から一覧の表（#list）へ飛ぶリンク。運営者 2026-11-01「地域の店舗との比較表まで遠いから、結論のところにリンクだけおいといて」 */
.answer__body .answer__more { font-weight: 400; margin: 0 0 1.1em; }
.answer__more a::before {
  content: ""; display: inline-block; width: .42em; height: .42em; margin: 0 .55em 0 .2em;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-.3em) rotate(45deg);
}

/* ===== 招待コード ===== */
.code { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-weight: 800; letter-spacing: .08em; color: var(--rose-dark); background: #fdeef3; border-radius: 6px; padding: 1px 7px; margin: 0 3px; }
.invite-line { text-align: center; font-size: 15px; margin: 6px 0 0; }
.invite { border: 2px dashed var(--rose); border-radius: var(--radius); background: #fff8fa; padding: 14px 16px 6px; margin: 18px 0 22px; }
.invite__title { display: flex; align-items: center; gap: 8px; font-weight: 800; color: var(--rose-dark); margin: 0 0 6px; font-size: 18px; line-height: 1.5; }
.invite__title img { width: 26px; height: 26px; flex: none; }
.invite__code { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 4px 0 8px; }
.invite__label { font-weight: 700; color: var(--ink-soft); font-size: 15px; }
/* 招待コードの箱の中では、コードに背景をつけない（枠の中に枠を作らない） */
.invite .code--big { font-size: 26px; background: none; padding: 0; margin: 0; letter-spacing: .14em; }
.invite__copy { font: inherit; font-size: 15px; font-weight: 700; color: #fff; background: var(--rose); border: 0; border-radius: 999px; padding: 6px 16px; cursor: pointer; box-shadow: 0 3px 0 var(--rose-dark); }
.invite__copy:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--rose-dark); }

/* ===== 言葉の説明（メイクのサービスの種類） ===== */
.terms { margin: 8px 0 22px; }
.terms dt { font-weight: 800; color: var(--navy-dark); margin-top: 12px; padding-left: 12px; border-left: 4px solid var(--rose); line-height: 1.5; }
.terms dd { margin: 4px 0 0 16px; }

/* ===== 紹介の部品（元の記事の Cocoon テンプレート60・61 の見せ方。運営者 2026-10-31「元のサイトを参考にして」） ===== */
/* 大事な1文：太字と、下半分の色（元の記事の marker-red） */
.article p.point { font-weight: 700; margin: 0 0 1.1em; }
.marker { background: linear-gradient(transparent 58%, var(--marker) 58%); padding: 0 .1em; }
/* 「そこでおすすめしたいのが、」のあとの名前の箱（元の記事の primary-box・ok-box）。中に枠を入れない */
.offer {
  border: 2px solid var(--teal); border-radius: var(--radius); background: var(--paper);
  box-shadow: var(--shadow); text-align: center; padding: 14px 16px 12px; margin: 6px 0 20px;
}
.offer--rose { border-color: var(--rose); }
.article .offer__name { margin: 0; font-size: 19px; font-weight: 800; line-height: 1.6; }
.article .offer__sub { margin: 4px 0 0; font-size: 14px; color: var(--ink-soft); line-height: 1.6; }
.catch--teal { color: var(--teal-dark); }
/* 中身の一覧（太字の名前の下に説明） */
ul.deco--pack li { margin: .7em 0; }
ul.deco--pack li strong { color: var(--navy-dark); }

/* 招待コードのコピーのボタン（コードが出るところすべて。運営者 2026-10-31「コピーボタンつけよう」） */
.code-copy { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; margin: 0 4px; vertical-align: baseline; }
.code-copy .code { margin: 0; }
.code-copy .copy-btn { display: inline-flex; align-items: center; gap: 3px; font: inherit; font-size: 13px; font-weight: 700; line-height: 1.5; color: var(--rose-dark); background: #fff; border: 1.5px solid var(--rose); border-radius: 999px; padding: 1px 9px 1px 7px; cursor: pointer; }
.code-copy .copy-btn:hover { background: var(--rose-soft); }
.code-copy .copy-btn.is-done { background: var(--rose); color: #fff; }
.copy-btn__icon { flex: none; }
.invite__copy.is-done { background: var(--rose-dark); }

/* 紹介先の名前の箱の下：値段 → 招待コードで実質いくら（運営者 2026-10-31） */
.article .price-line { margin: 10px 0 0; font-weight: 800; line-height: 1.6; text-align: center; }
.price-line__yen, .price-line__net { display: inline-block; }
.price-line__yen { font-size: 17px; }
.price-line__net { color: var(--rose-dark); }
.offer:not(.offer--rose) .price-line__net { color: var(--teal-dark); }
.price-line__net strong { font-size: 24px; margin-left: 2px; }
.article .price-line--parts + .price-line--parts { margin-top: 0; }
.price-line--parts .price-line__net strong { font-size: 21px; margin-left: 6px; }
.article .invite-note { margin: 4px 0 14px; font-size: 14px; line-height: 1.8; text-align: center; }
.offer .invite-note { margin-bottom: 2px; }
.offer__photo { display: block; max-width: 300px; margin: 12px auto 2px; border-radius: 10px; overflow: hidden; }
.offer__photo img, .pick__photo img { display: block; width: 100%; height: auto; }
.pick__photo--sq { max-width: 400px; }
/* 一覧で、レッスンではないもの（A y aさんの提案）の印 */
.tag-note { display: inline-block; font-size: 12px; line-height: 1.4; background: var(--ink-soft); color: #fff; border-radius: 4px; padding: 1px 6px; margin: 0 0 3px; }

/* 紹介先の値段とボタンのそばの、招待コードと実質の値段（運営者 2026-10-31「ここにも招待コードおこう」「ここにも入れて、…実質1000円引きとなることも伝えよう」） */
.price-line--teal .price-line__net { color: var(--teal-dark); }
/* カードの下（ボタンのすぐ上） */
.card__foot .price-line { margin-top: 6px; }
.card__foot .invite-note { margin-bottom: 4px; }
/* 表の値段の下：「招待コードで実質〇円」。せまい列では2行に折り返す */
td.num .net { display: block; margin-top: 2px; font-size: 13px; font-weight: 700; line-height: 1.5; color: var(--rose-dark); white-space: normal; }
tr.is-sub td.num .net { color: var(--teal-dark); }
/* 招待コードの箱の中の、実質の値段 */
.invite__net { margin: 0 0 6px; font-weight: 700; line-height: 1.7; }
.invite__net strong { color: var(--rose-dark); font-size: 18px; }
/* 招待コードの箱の中の、実質の値段（2行） */
.invite__net { font-size: 15px; }
.invite__nets { list-style: none; margin: 0 0 8px; padding: 0; }
.invite__nets li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0 12px; margin: 0; padding: 2px 0; font-weight: 700; }
.invite__nets strong { color: var(--rose-dark); font-size: 18px; }

/* 表の値段の下の招待コード（コピーのボタンつき）。せまい列に入るよう小さめにする（運営者 2026-10-31「招待コードを書けや」） */
/* 表の値段の下の注（店の表示・これより高くなること）。値段の列は折り返さないが、注は折り返す（2026-10-31 長い注が1行のままで列が広がっていた）。
   注の幅が10文字分より細いと、1〜2文字ずつの行になる（overflow-wrap: anywhere で列がせまくなる）ので、10文字分はとる。
   2026-11-01：「「10,000円（税別）」。」（11.3文字分。「円（税別）」は折り返さない）が入らずに「。」が行の頭に来たので、11.5文字分にした */
td.num .cell-note { display: block; min-width: 11.5em; margin-top: 2px; font-size: 13px; line-height: 1.5; color: var(--ink-soft); white-space: normal; }
td.num .net .code-copy { margin: 2px 2px 2px 0; vertical-align: middle; }
td.num .net .code { font-size: 12px; padding: 0 5px; letter-spacing: .06em; }
td.num .net .copy-btn { font-size: 12px; padding: 0 7px 0 5px; }

/* 2026-11-03 地域ページ以外のページ（運営者情報の表・カテゴリの入口の表） */
table.kv { margin: 0 0 1.4em; border: 1px solid var(--line); }
table.kv th { width: 7em; text-align: left; vertical-align: top; }
table.kv td { overflow-wrap: anywhere; }
table.hub-table { margin: 0 0 1.2em; border: 1px solid var(--line); }
table.hub-table thead th:not(:first-child) { text-align: right; }

/* 結果資料の写真（遅延型フードアレルギー検査。2026-11-08） */
.photos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:16px 0}
.photos__item{margin:0}
.photos__item img{display:block;width:100%;height:auto;border:1px solid var(--line,#ddd);border-radius:6px}
.photos__item figcaption{font-size:.85em;margin-top:4px;line-height:1.5}
@media (min-width:900px){.photos{grid-template-columns:repeat(3,minmax(0,1fr))}}