@charset "utf-8";

/* ══════════════════════════════════════════════
   おもいで供養便（運営：想い結び供養協会） — 共通スタイル
   Classical（生成りの紙・明朝・金の細罫・線で描く）
   ══════════════════════════════════════════════ */

:root {
  --paper: #f3f2f2;        /* 紙（背景） */
  --paper-2: #f8f4f4;      /* ひとつ明るい面 */
  --surface: #eae9e9;      /* 表の見出し・写真のマット */
  --sumi: #201f1d;         /* 墨（本文） */
  --sumi-soft: #444141;    /* 補足テキスト */
  --sumi-mute: #7d7979;    /* 注記 */
  --line: rgba(32, 31, 29, 0.16);   /* 罫線 */
  --gold: #b68235;         /* 金（アクセント／線と小さな印にのみ使う） */
  --gold-deep: #7d5411;    /* 本文サイズで金を使うとき */
  --ink-dark: #1a1917;     /* 帯の地色 */

  --serif: "Cormorant Garamond", "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --body: "Lora", "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --sans: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", system-ui, sans-serif;
  --num: "Cormorant Garamond", serif;

  --wrap: 1080px;
  --radius: 2px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--sumi);
  font-family: var(--body);
  font-size: 15px;
  line-height: 2.05;
  letter-spacing: 0.02em;
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--gold-deep); }
a:hover { color: var(--gold); }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
::selection { background: rgba(182, 130, 53, 0.22); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 40px; }
.narrow { max-width: 820px; }

@media (max-width: 620px) { .wrap { padding: 0 22px; } }

/* ── ヘッダー ───────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(243, 242, 242, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 68px;
}

.brand {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--sumi);
  letter-spacing: 0.14em;
  line-height: 1.3;
}
.brand:hover { color: var(--sumi); }
.brand small {
  display: block;
  font-size: 0.63rem;
  font-family: var(--sans);
  letter-spacing: 0.14em;
  color: var(--sumi-mute);
  font-weight: 400;
  margin-top: 3px;
}

.nav { display: flex; align-items: center; gap: 26px; }
.nav a {
  font-family: var(--sans);
  font-size: 0.79rem;
  letter-spacing: 0.08em;
  text-decoration: none;
  color: var(--sumi-soft);
  white-space: nowrap;
}
.nav a:hover { color: var(--gold); }

@media (max-width: 900px) {
  .nav a:not(.btn) { display: none; }
}

/* ── ボタン（線で描く。塗らない） ─────────────── */

.btn {
  display: inline-block;
  padding: 15px 40px;
  background: transparent;
  color: var(--gold-deep);
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  font-family: var(--sans);
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.18s ease;
}
.btn:hover { background: rgba(182, 130, 53, 0.12); color: var(--gold-deep); }
.btn:active { background: rgba(182, 130, 53, 0.22); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.btn-ghost {
  color: var(--sumi-soft);
  border-color: var(--line);
  padding: 12px 30px;
}
.btn-ghost:hover { background: rgba(32, 31, 29, 0.06); color: var(--sumi); }

.btn-lg { padding: 18px 48px; font-size: 0.9rem; }
.btn-block { display: block; width: 100%; text-align: center; }

/* ── ヒーロー ───────────────────────────── */

.hero {
  position: relative;
  min-height: min(80vh, 780px);
  display: flex;
  align-items: flex-end;
  background: #2d2b2b url("./images/hero.jpg") center/cover no-repeat;
  color: #f8f4f4;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(20, 18, 16, 0.42) 0%,
    rgba(20, 18, 16, 0.58) 46%,
    rgba(20, 18, 16, 0.88) 100%
  );
}
.hero .wrap { position: relative; z-index: 1; padding-top: 90px; padding-bottom: 76px; }
.hero h1 {
  position: relative;
  font-family: var(--serif);
  font-size: clamp(1.9rem, 4.4vw, 3.25rem);
  font-weight: 300;
  line-height: 1.62;
  letter-spacing: 0.08em;
  margin: 0 0 24px;
  padding-top: 26px;
  /* 写真の明るい部分に文字がかかったときの保険 */
  text-shadow: 0 1px 14px rgba(20, 18, 16, 0.55);
}
.hero h1::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 56px;
  height: 1px;
  background: var(--gold);
}
.hero p {
  max-width: 640px;
  font-size: 0.96rem;
  line-height: 2.15;
  margin: 0 0 34px;
  color: rgba(248, 244, 244, 0.9);
}
.hero .btn { color: #f3f2f2; border-color: rgba(255, 255, 255, 0.55); }
.hero .btn:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.hero-note {
  font-family: var(--sans);
  font-size: 0.72rem;
  line-height: 1.95;
  letter-spacing: 0.04em;
  color: rgba(248, 244, 244, 0.78);
  margin: 20px 0 0 !important;
}

/* ── セクション ───────────────────────────── */

section { padding: 100px 0; border-bottom: 1px solid var(--line); }
section.alt { background: transparent; }

.section-title {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 3vw, 2.05rem);
  font-weight: 400;
  letter-spacing: 0.12em;
  line-height: 1.5;
  text-align: center;
  margin: 0 0 12px;
}
.section-lead {
  font-family: var(--sans);
  text-align: center;
  color: var(--sumi-soft);
  font-size: 0.81rem;
  letter-spacing: 0.04em;
  margin: 0 0 56px;
}
.section-lead:empty { margin-bottom: 0; }
.rule {
  width: 40px;
  height: 1px;
  background: var(--gold);
  margin: 0 auto 26px;
  border: 0;
}

/* ── 共感パート ───────────────────────────── */

.worry-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 52px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 700px) { .worry-list { grid-template-columns: 1fr; } }
.worry-list li {
  background: none;
  border: 0;
  border-top: 1px solid var(--line);
  padding: 22px 0;
  font-size: 0.92rem;
  line-height: 1.95;
}
.worry-list li:nth-last-child(-n+2) { border-bottom: 1px solid var(--line); }
@media (max-width: 700px) {
  .worry-list li:nth-last-child(-n+2) { border-bottom: 0; }
  .worry-list li:last-child { border-bottom: 1px solid var(--line); }
}

.message {
  background: none;
  border-left: 1px solid var(--gold);
  padding: 0 0 0 34px;
  margin: 56px 0 0;
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 400;
  line-height: 2.25;
  letter-spacing: 0.05em;
}

/* ── 選ばれる理由（写真プレート） ─────────────── */

#reasons .plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 44px;
  counter-reset: plate;
}
@media (max-width: 860px) { #reasons .plans { grid-template-columns: 1fr; gap: 52px; } }

#reasons .plan {
  display: flex;
  flex-direction: column;
  counter-increment: plate;
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
}
#reasons .plan img {
  order: -1;
  width: 100%;
  margin: 0 0 26px;
  filter: sepia(0.22) saturate(0.82) contrast(1.05);
  border: 6px solid var(--surface);
  outline: 1px solid var(--line);
  border-radius: 0;
}
#reasons .plan h3 {
  font-family: var(--serif);
  font-size: 1.32rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.5;
  margin: 0 0 14px;
}
#reasons .plan h3::before {
  content: counter(plate, upper-roman);
  display: block;
  font-family: var(--num);
  font-feature-settings: "tnum";
  font-size: 0.8rem;
  letter-spacing: 0.24em;
  color: var(--gold);
  margin-bottom: 10px;
}
#reasons .plan p {
  font-size: 0.86rem;
  line-height: 2.05;
  color: var(--sumi-soft);
  margin: 0;
  text-align: left;
}

/* ── 流れ ───────────────────────────── */

.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steps li {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 28px;
  counter-increment: step;
  border: 0;
  border-top: 1px solid var(--line);
  margin: 0;
  padding: 30px 0;
}
.steps li:last-child { border-bottom: 1px solid var(--line); }
.steps li::before {
  content: counter(step, decimal-leading-zero);
  position: static;
  display: block;
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  color: var(--gold);
  font-family: var(--num);
  font-feature-settings: "tnum";
  font-size: 2.75rem;
  font-weight: 300;
  line-height: 1;
}
.steps h3 {
  grid-column: 2;
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  margin: 0 0 10px;
}
.steps p {
  grid-column: 2;
  margin: 0;
  font-size: 0.86rem;
  line-height: 2.05;
  color: var(--sumi-soft);
}
@media (max-width: 620px) {
  .steps li { grid-template-columns: 1fr; gap: 12px; }
  .steps h3, .steps p { grid-column: 1; }
}

/* ── 料金 ───────────────────────────── */

#price .plans {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--line);
  align-items: stretch;
}
@media (max-width: 780px) { #price .plans { grid-template-columns: 1fr; } }

#price .plan {
  background: none;
  border: 0;
  padding: 44px 46px;
  text-align: left;
}
#price .plan:first-child {
  border-right: 1px solid var(--line);
  background: var(--paper-2);
}
@media (max-width: 780px) {
  #price .plan:first-child { border-right: 0; border-bottom: 1px solid var(--line); }
}
#price .plan.featured { border-width: 0; }

#price .plan h3 {
  font-family: var(--serif);
  font-size: 1.42rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  margin: 0 0 22px;
}
#price .plan .tag {
  display: block;
  font-family: var(--sans);
  font-size: 0.65rem;
  letter-spacing: 0.24em;
  background: none;
  color: var(--gold);
  padding: 0;
  border-radius: 0;
  margin-bottom: 18px;
}
#price .plan:last-child .tag { color: var(--sumi-mute); }

.price {
  font-family: var(--num);
  font-feature-settings: "tnum";
  font-size: 3.9rem;
  font-weight: 300;
  line-height: 1;
  margin: 0;
  color: var(--sumi);
}
.price small {
  font-family: var(--sans);
  font-size: 0.8rem;
  color: var(--sumi-soft);
  margin-left: 8px;
}
#price .plan .unit {
  font-family: var(--sans);
  font-size: 0.74rem;
  color: var(--sumi-mute);
  margin: 14px 0 0;
}
#price .plan ul {
  list-style: none;
  margin: 30px 0 0;
  padding: 26px 0 0;
  border-top: 1px solid var(--line);
  text-align: left;
  font-size: 0.86rem;
}
#price .plan ul li { padding-left: 0; position: static; margin-bottom: 11px; line-height: 1.8; }
#price .plan ul li::before { content: none; }

.pay-methods {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 30px;
}
.pay-methods span {
  border: 1px solid var(--line);
  background: none;
  border-radius: var(--radius);
  padding: 9px 20px;
  font-family: var(--sans);
  font-size: 0.74rem;
  color: var(--sumi-soft);
}

/* ── 注意書き ───────────────────────────── */

.notice {
  margin: 34px auto 0;
  max-width: 900px;
  background: none;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  padding: 26px 0 0;
  font-size: 0.82rem;
  color: var(--sumi-soft);
  line-height: 2;
}
.notice > strong {
  display: block;
  font-family: var(--sans);
  font-size: 0.69rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  color: var(--gold);
  margin-bottom: 16px;
}
.notice ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.notice ul strong { color: var(--sumi); font-weight: 500; }

.mid-cta { margin: 52px auto 0; text-align: center; }
.mid-cta p {
  margin: 16px 0 0;
  font-family: var(--sans);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: var(--sumi-mute);
}

/* ── FAQ ───────────────────────────── */

.faq details {
  background: none;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  margin: 0;
  padding: 0;
}
.faq details:last-of-type { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer;
  padding: 22px 40px 22px 0;
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.6;
  list-style: none;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "＋";
  position: absolute;
  right: 0;
  top: 22px;
  color: var(--gold);
  font-weight: 400;
}
.faq details[open] summary::after { content: "−"; }
.faq details > p {
  margin: 0;
  padding: 0 40px 12px 0;
  border-top: 0;
  font-size: 0.86rem;
  line-height: 2.1;
  color: var(--sumi-soft);
}
.faq details > p:last-child { padding-bottom: 26px; }

/* ── 提携寺院の紹介 ───────────────────────────── */

.temple {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 52px;
  align-items: center;
}
@media (max-width: 760px) { .temple { grid-template-columns: 1fr; gap: 32px; } }
.temple img {
  width: 100%;
  border-radius: 0;
  filter: sepia(0.22) saturate(0.82) contrast(1.05);
  border: 6px solid var(--surface);
  outline: 1px solid var(--line);
}
.temple h3 {
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  line-height: 1.6;
  margin: 0 0 22px;
}
.temple p { font-size: 0.86rem !important; line-height: 2.1; color: var(--sumi-soft); }
.temple p:last-child {
  font-family: var(--serif);
  font-size: 0.95rem !important;
  letter-spacing: 0.06em;
  color: var(--sumi);
  border-top: 1px solid var(--line);
  padding-top: 20px;
}

.org-contact {
  display: block;
  margin-top: 12px;
  font-family: var(--sans);
  font-size: 0.74rem;
  letter-spacing: 0.02em;
  line-height: 2;
  color: var(--sumi-soft);
}

/* ── サービス概要 ───────────────────────────── */

.about-lead {
  font-size: 0.95rem;
  line-height: 2.15;
  margin: 0 0 40px;
}
.about-lead strong { font-weight: 500; }
.about-spec caption {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ── ご供養を選ぶ理由 ───────────────────────────── */

.choose-list { list-style: none; margin: 0; padding: 0; counter-reset: choose; }
.choose-list li {
  counter-increment: choose;
  position: relative;
  padding: 30px 0 30px 64px;
  border-top: 1px solid var(--line);
}
.choose-list li:last-child { border-bottom: 1px solid var(--line); }
.choose-list li::before {
  content: counter(choose, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 26px;
  font-family: var(--num);
  font-size: 1.9rem;
  font-weight: 300;
  color: var(--gold);
  line-height: 1.2;
}
.choose-list h3 {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.7;
  margin: 0 0 10px;
}
.choose-list p { margin: 0; font-size: 0.86rem; line-height: 2.1; color: var(--sumi-soft); }
@media (max-width: 620px) { .choose-list li { padding-left: 48px; } .choose-list li::before { font-size: 1.5rem; } }

/* ── CTA 帯 ───────────────────────────── */

.cta-band {
  background: var(--ink-dark);
  color: #f3f2f2;
  text-align: center;
  border-bottom: 0;
}
.cta-band .rule { background: var(--gold); }
.cta-band h2 {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 3vw, 1.95rem);
  font-weight: 400;
  letter-spacing: 0.14em;
  margin: 0 0 18px;
}
.cta-band p { margin: 0 0 36px; font-size: 0.88rem; line-height: 2.05; color: rgba(243, 242, 242, 0.78); }
.cta-band .btn {
  background: transparent;
  color: #f3f2f2;
  border-color: rgba(255, 255, 255, 0.55);
}
.cta-band .btn:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }

/* ── フォーム ───────────────────────────── */

.form-card {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
}

.field { margin-bottom: 30px; }
.field > label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 500;
  margin-bottom: 9px;
}
.req, .opt {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.63rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  padding: 2px 8px;
  border-radius: 0;
  margin: 0;
  vertical-align: baseline;
}
.req { background: none; border: 1px solid var(--gold); color: var(--gold-deep); }
.opt { background: none; border: 1px solid var(--line); color: var(--sumi-mute); }

.hint { font-family: var(--sans); font-size: 0.72rem; line-height: 1.9; color: var(--sumi-mute); margin: 8px 0 0; }

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="number"],
select,
textarea {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid rgba(32, 31, 29, 0.22);
  border-radius: var(--radius);
  background: #fdfcfc;
  /* 16px 未満にすると iOS Safari が入力時に画面を自動拡大するため、下回らせない */
  font-size: 16px;
  font-family: var(--body);
  color: var(--sumi);
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
textarea { min-height: 110px; resize: vertical; }

.check {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 14px;
  align-items: start;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 22px;
  cursor: pointer;
}
.check input { margin-top: 4px; width: 17px; height: 17px; accent-color: var(--gold); }
.check span strong {
  display: block;
  font-family: var(--serif);
  font-size: 1.02rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  line-height: 1.8;
  margin-bottom: 6px;
}
.check span small {
  display: block;
  font-family: var(--sans);
  font-size: 0.72rem;
  line-height: 1.95;
  color: var(--sumi-mute);
}

.total-box {
  background: none;
  border: 0;
  border-top: 1px solid var(--sumi);
  border-radius: 0;
  padding: 22px 0 0;
  margin: 44px 0;
}
.total-row {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-size: 0.86rem;
  padding: 8px 0;
  color: var(--sumi-soft);
}
.total-row.sum {
  align-items: baseline;
  border-top: 1px solid var(--line);
  margin-top: 14px;
  padding-top: 18px;
  color: var(--sumi);
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: 0.08em;
}
.total-row.sum span:last-child {
  font-family: var(--num);
  font-feature-settings: "tnum";
  font-size: 2.1rem;
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0;
}

.form-error {
  background: none;
  border: 0;
  border-left: 2px solid var(--gold-deep);
  color: #5a3b0a;
  border-radius: 0;
  padding: 6px 0 6px 20px;
  font-size: 0.84rem;
  line-height: 2;
  margin-bottom: 30px;
}

.env-banner {
  background: var(--ink-dark);
  color: #f3f2f2;
  text-align: center;
  font-family: var(--sans);
  font-size: 0.72rem;
  padding: 9px 16px;
  letter-spacing: 0.1em;
}
.env-banner a { color: #f3f2f2; }

/* ── 法務ページ ───────────────────────────── */

.legal { padding: 72px 0 96px; }
.legal h1 {
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  margin: 0 0 10px;
  padding-top: 24px;
  position: relative;
}
.legal h1::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 34px;
  height: 1px;
  background: var(--gold);
}
.legal .updated { font-family: var(--sans); color: var(--sumi-mute); font-size: 0.75rem; margin: 0 0 44px; }
.legal h2 {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  margin: 52px 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.legal p, .legal li { font-size: 0.86rem; line-height: 2.15; color: var(--sumi-soft); }
.legal p strong, .legal li strong { color: var(--sumi); font-weight: 500; }
.legal ol, .legal ul { padding-left: 1.6em; }
.legal ol li { margin-bottom: 8px; }
.legal ol ol { margin-top: 10px; }

table.spec {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.83rem;
  margin-top: 8px;
}
table.spec th, table.spec td {
  border: 1px solid var(--line);
  padding: 16px 18px;
  text-align: left;
  vertical-align: top;
  line-height: 2.05;
  color: var(--sumi-soft);
}
table.spec th {
  background: var(--surface);
  width: 30%;
  font-family: var(--sans);
  font-size: 0.79rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--sumi);
  white-space: nowrap;
}
@media (max-width: 620px) {
  table.spec th, table.spec td { display: block; width: 100%; border-bottom: 0; white-space: normal; }
  table.spec tr:last-child td { border-bottom: 1px solid var(--line); }
}

.todo {
  background: none;
  border: 0;
  border-bottom: 1px dashed var(--gold);
  border-radius: 0;
  padding: 0 4px;
  font-size: inherit;
  color: inherit;
}

/* ── 結果ページ ───────────────────────────── */

/* .wrap と同じ要素に付くため、左右パディングは .wrap のものを残す
   （padding 一括指定にすると左右が 0 になり、文字が画面端で見切れる） */
.result { text-align: center; padding-top: 110px; padding-bottom: 120px; }
.result .mark {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: none;
  border: 1px solid var(--gold);
  color: var(--gold-deep);
  font-family: var(--serif);
  font-size: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 34px;
}
.result h1 {
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  margin: 0 0 22px;
}
.result p { color: var(--sumi-soft); font-size: 0.9rem; line-height: 2.2; }
.result .notice { text-align: left; }
.summary-box {
  background: none;
  border: 0;
  border-top: 1px solid var(--sumi);
  border-radius: 0;
  padding: 20px 0 0;
  margin: 44px auto;
  max-width: 480px;
  text-align: left;
}
.summary-box .total-row { color: var(--sumi-soft); font-size: 0.82rem; }

/* ── フッター ───────────────────────────── */

.site-footer {
  background: var(--paper);
  color: var(--sumi-soft);
  border-top: 1px solid var(--line);
  padding: 56px 0 40px;
  font-family: var(--sans);
  font-size: 0.79rem;
}
.site-footer a { color: var(--sumi-soft); text-decoration: none; }
.site-footer a:hover { color: var(--gold); }
.footer-grid {
  display: flex;
  flex-wrap: wrap;
  /* リンクの上下 padding 分（9px×2）を gap から差し引き、見た目の間隔は従来どおりに保つ */
  gap: 0 30px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 0;
}
/* タップ領域を 44px 以上にする（指での押し間違いを防ぐ） */
.footer-grid a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 9px 0;
}
.footer-name {
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--sumi);
  letter-spacing: 0.12em;
  margin: 0 0 26px;
}
.footer-name small {
  display: block;
  font-family: var(--sans);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  color: var(--sumi-mute);
  margin-top: 9px;
}
.copyright { color: #9b9797; font-size: 0.69rem; margin: 20px 0 0; }

/* ── アクセシビリティ ───────────────────────────── */

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus {
  left: 12px;
  top: 12px;
  z-index: 100;
  background: var(--paper-2);
  border: 1px solid var(--line);
  padding: 10px 16px;
  border-radius: var(--radius);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* ══════════════════════════════════════════════
   コラム（/column, /column/*）
   scripts/build-column.mjs が生成するページ専用
   ══════════════════════════════════════════════ */

.column-page { padding: 28px 0 96px; }

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0 8px;
  margin: 0 0 40px;
  padding: 0;
  list-style: none;
  font-family: var(--sans);
  font-size: 0.72rem;
  color: var(--sumi-mute);
}
.breadcrumb li + li::before { content: "／"; margin-right: 8px; color: var(--line); }
.breadcrumb a { color: var(--sumi-soft); text-decoration: none; }
.breadcrumb a:hover { color: var(--gold); }
.breadcrumb [aria-current] {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── 一覧 ── */

.column-head { margin: 0 0 48px; }
.column-head h1,
.article-head h1 {
  font-family: var(--serif);
  font-size: clamp(1.45rem, 3.6vw, 2rem);
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1.6;
  margin: 0 0 18px;
  padding-top: 24px;
  position: relative;
}
.column-head h1::before,
.article-head h1::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 34px;
  height: 1px;
  background: var(--gold);
}
.column-head p { font-size: 0.9rem; line-height: 2.05; color: var(--sumi-soft); margin: 0; }

.column-list { list-style: none; margin: 0; padding: 0; }
.column-card { border-top: 1px solid var(--line); }
.column-card:last-child { border-bottom: 1px solid var(--line); }
.column-card a {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 26px;
  align-items: start;
  padding: 28px 0;
  color: inherit;
  text-decoration: none;
}
.column-card img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  filter: sepia(0.22) saturate(0.82) contrast(1.05);
  border: 4px solid var(--surface);
  outline: 1px solid var(--line);
}
.column-card-body { display: block; }
.column-card-meta {
  display: block;
  font-family: var(--sans);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: var(--gold-deep);
  margin-bottom: 6px;
}
.column-card-title {
  display: block;
  font-family: var(--serif);
  font-size: 1.12rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  line-height: 1.65;
  margin: 0 0 8px;
}
.column-card a:hover .column-card-title { color: var(--gold-deep); }
.column-card-summary {
  display: block;
  font-size: 0.82rem;
  line-height: 1.95;
  color: var(--sumi-soft);
}
@media (max-width: 620px) {
  .column-card a { grid-template-columns: 1fr; gap: 16px; padding: 24px 0; }
}

.column-list-compact .column-card a { grid-template-columns: 132px 1fr; gap: 18px; padding: 20px 0; }
.column-list-compact .column-card-title { font-size: 0.98rem; margin: 0; }
.column-list-compact .column-card-summary { display: none; }

.column-back {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin: 56px 0 0;
}

/* ── 記事 ── */

.article-category {
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--gold-deep);
  margin: 0 0 14px;
}
.article-dates {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  font-family: var(--sans);
  font-size: 0.72rem;
  color: var(--sumi-mute);
  margin: 0 0 30px;
}
.article-figure { margin: 0 0 30px; }
.article-figure img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  filter: sepia(0.22) saturate(0.82) contrast(1.05);
  border: 6px solid var(--surface);
  outline: 1px solid var(--line);
}
.article-figure figcaption {
  font-family: var(--sans);
  font-size: 0.68rem;
  color: var(--sumi-mute);
  margin-top: 8px;
  text-align: right;
}
.article-summary {
  font-size: 0.95rem;
  line-height: 2.1;
  margin: 0;
  padding: 0 0 0 22px;
  border-left: 1px solid var(--gold);
}

.toc {
  margin: 44px 0 0;
  padding: 24px 26px;
  border: 1px solid var(--line);
  background: var(--paper-2);
}
.toc-title {
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  color: var(--gold);
  margin: 0 0 10px;
}
.toc ol { margin: 0; padding-left: 1.4em; font-size: 0.86rem; line-height: 1.9; }
.toc ol ol { padding-left: 1.2em; font-size: 0.8rem; list-style: lower-roman; }
.toc li { margin: 4px 0; }
.toc a { color: var(--sumi); text-decoration: none; }
.toc a:hover { color: var(--gold-deep); text-decoration: underline; }

.article-body { margin-top: 12px; }
.article-body h2,
.article-body h3 { scroll-margin-top: 88px; }
.article-body h2 {
  font-family: var(--serif);
  font-size: 1.32rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.6;
  margin: 64px 0 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.article-body h3 {
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.6;
  margin: 40px 0 12px;
  padding-left: 14px;
  border-left: 2px solid var(--gold);
}
.article-body p,
.article-body li {
  font-size: 0.95rem;
  line-height: 2.05;
  color: var(--sumi);
}
.article-body p { margin: 0 0 1.2em; }
.article-body ul,
.article-body ol { margin: 0 0 1.4em; padding-left: 1.5em; }
.article-body li { margin-bottom: 0.5em; }
.article-body strong { font-weight: 500; background: linear-gradient(transparent 68%, rgba(182, 130, 53, 0.18) 0); }

.article-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
  margin: 8px 0 1.8em;
}
.article-table caption {
  caption-side: top;
  text-align: left;
  font-family: var(--sans);
  font-size: 0.72rem;
  color: var(--sumi-mute);
  margin-bottom: 8px;
}
.article-table th,
.article-table td {
  border: 1px solid var(--line);
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
  line-height: 1.85;
}
.article-table thead th,
.article-table tbody th {
  background: var(--surface);
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 500;
}
@media (max-width: 620px) {
  .article-table { font-size: 0.8rem; }
  .article-table th, .article-table td { padding: 10px 9px; }
}

.article-faq { margin: 0 0 1.4em; }
.article-faq dt {
  font-family: var(--serif);
  font-size: 1.02rem;
  font-weight: 500;
  line-height: 1.7;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.article-faq dt::before { content: "Q. "; color: var(--gold); }
.article-faq dd {
  margin: 8px 0 18px;
  font-size: 0.9rem;
  line-height: 2.05;
  color: var(--sumi-soft);
}

.cta-box {
  margin: 40px 0;
  padding: 28px 28px 24px;
  border: 1px solid var(--line);
  border-top: 2px solid var(--gold);
  background: var(--paper-2);
}
.cta-box-title {
  font-family: var(--serif);
  font-size: 1.12rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  margin: 0 0 10px;
}
.cta-box p { font-size: 0.88rem; line-height: 2; color: var(--sumi-soft); margin: 0; }
.cta-box .cta-box-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  margin-top: 20px;
}
.cta-box .btn { padding: 12px 28px; }
.cta-box-sub { font-family: var(--sans); font-size: 0.8rem; }

.related { margin-top: 72px; padding: 0; border-bottom: 0; }
.related-title {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  margin: 0 0 8px;
}

/* Cormorant の数字は小さく沈む旧スタイル数字のため、見出し中の「5選」などは揃い数字にする */
.column-head h1, .article-head h1, .article-body h2, .article-body h3,
.column-card-title, .toc, .article-faq dt, .cta-box-title { font-variant-numeric: lining-nums; }