/* 全ページ共通のスタイル（T-D2）。トップページ（deploy/index.html）の同じ部分と同じ見た目にする。
   トップページは今のところ自身の <style> を使い、トップ以外のページがこのファイルを読み込む。 */

:root {
  --kinari: #f4efe6;
  --kinari-2: #ece5d6;
  --washi: #faf7f1;
  --sumi: #1a1714;
  --sumi-2: #2c2723;
  --sumi-soft: #5a534b;
  --shu: #c3422d;
  --shu-deep: #9c2f1e;
  --matcha: #6b7a4a;
  --gold: #b08a3e;
  --line: rgba(26,23,20,0.12);
  --line-soft: rgba(26,23,20,0.06);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--kinari);
  color: var(--sumi);
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.serif { font-family: "Shippori Mincho", "Times New Roman", serif; font-weight: 500; }
.mono { font-family: "JetBrains Mono", ui-monospace, monospace; }
.jp { font-family: "Shippori Mincho", "Noto Serif JP", serif; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

/* ---------- Layout shell ---------- */
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 48px; }
@media (max-width: 720px) { .wrap { padding: 0 24px; } }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(14px) saturate(140%);
  background: rgba(244,239,230,0.78);
  border-bottom: 1px solid var(--line-soft);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.brand { display: flex; align-items: baseline; gap: 14px; }
.brand-mark { font-family: "Shippori Mincho", serif; font-weight: 700; font-size: 19px; letter-spacing: 0.08em; }
.brand-jp { font-family: "Shippori Mincho", serif; color: #bf402c; font-size: 18px; letter-spacing: 0.1em; }
.nav-links { display: flex; gap: 36px; }
.nav-links a {
  position: relative;
  font-size: 13px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--sumi-soft);
  transition: color .2s ease;
}
.nav-links a:hover { color: var(--sumi); }
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px;
  background: var(--shu); transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
.nav-links a:hover::after { transform: scaleX(1); }
.nav-cta {
  padding: 10px 22px; background: var(--sumi); color: var(--kinari);
  font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase;
  border-radius: 999px; transition: transform .2s ease, background .2s ease;
}
.nav-cta:hover { background: var(--shu); transform: translateY(-1px); }
@media (max-width: 860px) { .nav-links { display: none; } }

/* ---------- Breadcrumb ---------- */
.crumbs { padding-top: 20px; font-size: 12px; letter-spacing: 0.08em; color: var(--sumi-soft); }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.crumbs li + li::before { content: "›"; margin-right: 8px; color: var(--sumi-soft); }
.crumbs a:hover { color: var(--shu); }
.crumbs [aria-current="page"] { color: var(--sumi); }

/* ---------- Footer ---------- */
footer { background: var(--sumi); color: var(--kinari); padding: 80px 0 40px; }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 60px; }
@media (max-width: 860px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) {
  .foot-brand, .foot-contact { grid-column: 1 / -1; }
  .foot-contact li { overflow-wrap: anywhere; }
}
.foot-brand .brand-mark { color: var(--kinari); font-size: 24px; letter-spacing: 0.06em; }
.foot-brand .brand-jp { color: #d45945; }
.foot-brand .tag { color: rgba(244,239,230,0.6); margin-top: 16px; font-size: 14px; line-height: 1.6; max-width: 320px; }
.foot-col .foot-col-title {
  font-family: "JetBrains Mono", monospace; font-size: 11px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(244,239,230,0.5); margin: 0 0 20px; font-weight: 700;
}
.foot-col ul { list-style: none; padding: 0; margin: 0; }
.foot-col li { margin-bottom: 12px; font-size: 14px; }
.foot-col a:hover { color: var(--shu); }
.copy-mail {
  display: inline-flex; align-items: baseline; gap: 10px;
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; font-size: 14px; color: inherit; cursor: pointer; text-align: left;
}
.copy-mail .copy-hint {
  font-family: "JetBrains Mono", monospace; font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase; color: rgba(244,239,230,0.5);
}
.copy-mail:hover .copy-hint { color: var(--shu); }
.foot-bottom {
  padding-top: 32px; border-top: 1px solid rgba(244,239,230,0.1);
  display: flex; justify-content: space-between; align-items: center;
  font-family: "JetBrains Mono", monospace; font-size: 11px;
  letter-spacing: 0.12em; color: rgba(244,239,230,0.5); text-transform: uppercase;
}
.foot-bottom a:hover { color: var(--shu); }
@media (max-width: 520px) { .foot-bottom { flex-direction: column; gap: 12px; text-align: center; } }

/* ---------- Buttons（トップページと同じ） ---------- */
.btn-primary {
  background: var(--sumi); color: var(--kinari);
  padding: 18px 32px; border-radius: 4px;
  font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 12px;
  transition: all .25s ease;
}
.btn-primary:hover { background: var(--shu); transform: translateY(-2px); }
.btn-primary .arr { width: 18px; height: 1px; background: currentColor; position: relative; transition: width .25s ease; }
.btn-primary .arr::after {
  content: ""; position: absolute; right: 0; top: -3px;
  width: 7px; height: 7px; border-top: 1px solid currentColor; border-right: 1px solid currentColor;
  transform: rotate(45deg);
}
.btn-primary:hover .arr { width: 28px; }

/* ---------- Page heading（ガイド一覧など。T-D3） ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--sumi-soft); margin: 0 0 24px;
}
.eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--shu); }
.page-head { max-width: 760px; padding: 48px 0 32px; }
.page-title, .article-title {
  font-family: "Shippori Mincho", serif; font-weight: 500;
  font-size: clamp(32px, 5vw, 52px); line-height: 1.15; letter-spacing: -0.01em;
  margin: 0 0 20px; text-wrap: balance;
}
.page-lead { font-size: 18px; line-height: 1.7; color: var(--sumi-soft); margin: 0; }

/* ---------- Guide list（T-D3） ---------- */
.guide-list { list-style: none; padding: 0; margin: 0; max-width: 760px; display: grid; gap: 16px; }
.guide-item { background: var(--washi); border: 1px solid var(--line); padding: 28px 32px; transition: border-color .2s ease; }
.guide-item:hover { border-color: var(--shu); }
.guide-item p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--sumi-soft); }
.guide-item-title { font-family: "Shippori Mincho", serif; font-weight: 500; font-size: 24px; line-height: 1.35; margin: 0 0 10px; }
.guide-item-title a:hover { color: var(--shu); }
.guide-item .guide-item-meta { margin-top: 12px; font-size: 12px; letter-spacing: 0.06em; }

/* ---------- Article（ガイド記事。T-D3） ---------- */
.article { max-width: 760px; padding: 48px 0 96px; }
.article-head { margin-bottom: 40px; }
.byline { font-size: 13px; letter-spacing: 0.04em; color: var(--sumi-soft); margin: 0; }
.byline a { color: var(--sumi); border-bottom: 1px solid var(--line); }
.byline a:hover { color: var(--shu); border-color: var(--shu); }
.summary { background: var(--washi); border-left: 3px solid var(--shu); padding: 24px 28px; margin: 0 0 16px; }
.summary p { margin: 0; font-size: 17px; line-height: 1.75; }
.summary .summary-label {
  font-family: "JetBrains Mono", monospace; font-size: 11px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--shu); margin-bottom: 8px;
}
.article h2 {
  font-family: "Shippori Mincho", serif; font-weight: 500;
  font-size: clamp(24px, 3.2vw, 32px); line-height: 1.3; margin: 56px 0 16px; text-wrap: balance;
}
.article h3 { font-size: 18px; font-weight: 600; line-height: 1.5; margin: 32px 0 8px; }
.article-body p, .article-body li, .faq p { font-size: 17px; line-height: 1.8; }
.article-body p, .faq p { margin: 0 0 16px; }
.article-body ul, .article-body ol { padding-left: 1.4em; margin: 0 0 16px; }
.article-body li + li { margin-top: 8px; }
.article-body a, .faq a, .sources a { color: var(--shu-deep); text-decoration: underline; text-underline-offset: 3px; }
.article-body a:hover, .faq a:hover, .sources a:hover { color: var(--shu); }
.note { background: var(--kinari-2); border: 1px solid var(--line); padding: 20px 24px; margin: 32px 0; }
.article-body .note p { margin: 0; }
.sources ol { padding-left: 1.4em; margin: 0; font-size: 14px; line-height: 1.7; color: var(--sumi-soft); }
/* 出典（2026-10-15）：押すと開く */
.sources summary { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; font-size: 13px; letter-spacing: 0.04em; color: var(--sumi-soft); }
.sources summary::-webkit-details-marker { display: none; }
.sources summary::before { content: "›"; display: inline-block; transition: transform .15s ease; }
.sources details[open] summary::before { transform: rotate(90deg); }
.sources details[open] ol { margin-top: 10px; }
.sources li { overflow-wrap: anywhere; }
.sources li + li { margin-top: 6px; }
.related ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.related a { display: block; padding: 16px 20px; border: 1px solid var(--line); background: var(--washi); transition: border-color .2s ease, color .2s ease; }
.related a:hover { border-color: var(--shu); color: var(--shu); }

/* ---------- Call to action（記事・一覧の最後。T-D3） ---------- */
.cta-box { max-width: 760px; margin: 64px 0 96px; padding: 40px; background: var(--sumi); color: var(--kinari); }
.article .cta-box { margin-bottom: 0; }
.cta-box p { margin: 0 0 24px; font-size: 16px; line-height: 1.7; color: rgba(244,239,230,0.8); }
.cta-box .cta-box-title { font-family: "Shippori Mincho", serif; font-size: 26px; line-height: 1.3; color: var(--kinari); margin-bottom: 12px; }
.cta-box .btn-primary { background: var(--kinari); color: var(--sumi); }
.cta-box .btn-primary:hover { background: var(--shu); color: var(--kinari); }

@media (max-width: 720px) {
  .page-head { padding: 32px 0 24px; }
  .article { padding: 32px 0 72px; }
  .summary { padding: 20px; }
  .article-body p, .article-body li, .faq p, .summary p { font-size: 16px; }
  .guide-item { padding: 24px; }
  .cta-box { padding: 28px 24px; }
}

/* ---------- Region page（地域ページ。T-D4） ---------- */
.fees { max-width: 760px; border: 1px solid var(--line); background: var(--washi); padding: 24px 28px; margin: 0 0 16px; }
.fees .fees-title {
  font-family: "JetBrains Mono", monospace; font-size: 11px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--sumi-soft); margin: 0 0 12px;
}
.fees-list { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 6px; }
.fees-list li { font-size: 16px; line-height: 1.6; }
.fees-list strong { font-family: "Shippori Mincho", serif; font-size: 22px; font-weight: 600; margin-right: 6px; }
.fees .fees-note { margin: 0; font-size: 14px; line-height: 1.7; color: var(--sumi-soft); }
.fees-note a { color: var(--shu-deep); text-decoration: underline; text-underline-offset: 3px; }
.table-wrap { overflow-x: auto; margin: 0 0 16px; border: 1px solid var(--line); }
.genre-table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.6; }
.genre-table th, .genre-table td { text-align: left; vertical-align: top; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.genre-table th { font-family: "JetBrains Mono", monospace; font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sumi-soft); background: var(--washi); }
.genre-table tr:last-child td { border-bottom: 0; }
.case-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.case-list li { border-left: 3px solid var(--matcha); background: var(--washi); padding: 16px 20px; font-size: 16px; line-height: 1.75; }
.other-regions ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.other-regions a { display: block; padding: 16px 20px; border: 1px solid var(--line); background: var(--washi); transition: border-color .2s ease, color .2s ease; }
.other-regions a:hover { border-color: var(--shu); color: var(--shu); }
@media (max-width: 720px) {
  .fees { padding: 20px; }
  .fees-list strong { font-size: 20px; }
  .genre-table { font-size: 14px; }
  .genre-table th, .genre-table td { padding: 10px 12px; }
}

/* ---------- Region hero（地域ページの見出し写真。T-D4の追加） ---------- */
.region-hero { margin: 32px 0 0; }
.region-hero-frame { position: relative; aspect-ratio: 2 / 1; overflow: hidden; border: 1px solid var(--line); background: var(--kinari-2); }
.region-hero-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.region-stamp {
  position: absolute; left: 28px; bottom: 28px;
  width: 92px; height: 92px; border-radius: 50%;
  background: var(--shu); color: var(--kinari);
  display: flex; align-items: center; justify-content: center;
  font-family: "Shippori Mincho", serif; font-size: 27px; font-weight: 600; letter-spacing: 0.04em;
  transform: rotate(-12deg); box-shadow: 0 8px 24px rgba(195,66,45,0.35);
}
.region-stamp.is-long { font-size: 21px; letter-spacing: 0; }
.region-hero figcaption { margin-top: 10px; font-size: 12px; letter-spacing: 0.04em; color: var(--sumi-soft); text-align: right; }
.region-hero figcaption a { text-decoration: underline; text-underline-offset: 2px; }
.region-hero figcaption a:hover { color: var(--shu); }
@media (max-width: 720px) {
  .region-hero { margin-top: 20px; }
  .region-hero-frame { aspect-ratio: 4 / 3; }
  .region-stamp { width: 68px; height: 68px; font-size: 20px; left: 16px; bottom: 16px; }
  .region-stamp.is-long { font-size: 15px; }
  .region-hero figcaption { text-align: left; }
}

/* ---------- Disclosure table（法的ページの項目と内容の表。T-E6） ---------- */
.disclosure { width: 100%; border-collapse: collapse; margin: 0 0 24px; font-size: 16px; line-height: 1.7; }
.disclosure th, .disclosure td { text-align: left; vertical-align: top; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.disclosure th { width: 32%; font-weight: 600; background: var(--washi); }
.disclosure td p, .article-body .disclosure td p { margin: 0 0 8px; font-size: inherit; line-height: inherit; }
.disclosure td p:last-child { margin-bottom: 0; }
.legal-meta { font-size: 13px; letter-spacing: 0.04em; color: var(--sumi-soft); margin: 0; }
@media (max-width: 640px) {
  .disclosure th, .disclosure td { display: block; width: auto; }
  .disclosure th { border-bottom: 0; padding-bottom: 4px; }
  .disclosure td { padding-top: 4px; }
}

/* ---------- メリハリ（2026-10-14、decisions.md）：見出し → 要点（濃く・太く）→ 補足（小さく） ---------- */
.article-body p, .article-body li, .faq p, .disclosure td { color: var(--sumi-soft); }
.article-body strong, .faq strong, .summary strong, .disclosure strong { color: var(--sumi); font-weight: 600; }
.article-body p.fine, .faq p.fine { font-size: 14px; line-height: 1.7; margin-top: -8px; }
/* 料金：大きな数字の箱を2つ並べる（料金ページ・地域ページ） */
.fees-list { grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.fees-list li { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; background: var(--kinari); border: 1px solid var(--line); font-size: 14px; line-height: 1.5; color: var(--sumi-soft); }
.fees-list strong { font-size: 34px; font-weight: 500; line-height: 1; margin: 0; color: var(--sumi); }
@media (max-width: 520px) { .fees-list { grid-template-columns: 1fr; } }

/* ---------- ドル換算（2026-10-14、decisions.md）：円の金額のあとに about US$。ドルは補足なので太字にしない ---------- */
/* ドル換算の説明（2026-10-15）：金額にカーソルを置く（スマホではタップする）と出る。注記の段落は置かない */
.fx { position: relative; }
.fx .usd { font-weight: 400; cursor: help; text-decoration: underline dotted; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.fx .usd:focus { outline: none; }
.fx .usd:focus-visible { outline: 2px solid var(--shu-deep); outline-offset: 2px; }
.fx-tip { position: absolute; left: 0; top: calc(100% + 6px); z-index: 30; width: max-content; max-width: 280px; padding: 8px 10px; border-radius: 6px; background: var(--sumi); color: #fff; font-family: "Noto Sans JP", system-ui, sans-serif; font-size: 12.5px; font-weight: 400; line-height: 1.55; letter-spacing: 0; text-align: left; text-transform: none; white-space: normal; box-shadow: 0 4px 14px rgba(0,0,0,.18); display: none; pointer-events: none; }
.fx .usd:hover + .fx-tip, .fx .usd:focus + .fx-tip { display: block; }
@media (max-width: 600px) { .fx-tip { position: fixed; left: 16px; right: 16px; top: auto; bottom: 16px; width: auto; max-width: none; } }
.fees-list strong .usd { display: block; margin-top: 8px; font-family: "Noto Sans JP", system-ui, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.4; letter-spacing: 0; color: var(--sumi-soft); }