/* ============================================================
   ご縁の取り扱い説明書 — サイト固有スタイル（最小限）
   Design G tokens を前提とする。
   ============================================================ */

/* ---- ヒーローのバッジ（静かなチップ） ---- */
.hero-badges li {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--text-muted);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  background: var(--surface-card);
}

/* ---- 悩みリスト（md以上は2列で高さを揃える） ---- */
.worry-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 768px) {
  .worry-list { grid-template-columns: 1fr 1fr; }
  .worry-list li:last-child { grid-column: 1 / -1; }
}
.worry-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}
.worry-list li i {
  font-size: 22px;
  color: var(--accent);
  flex-shrink: 0;
  margin-top: 3px;
}

/* ---- 本命宿 / 値日 リスト ---- */
.layer-list li {
  position: relative;
  padding-left: 18px;
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}
.layer-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.85em;
  width: 8px;
  height: 1px;
  background: var(--brass-500);
}
.layer-list--night li { color: #d9d3c4; }

/* ---- 鑑定メニューの価格 ---- */
.menu-price {
  font-family: var(--font-sans);
  color: var(--text-primary);
  margin: 10px 0 14px;
}
.menu-price .ds-latin-num {
  font-family: var(--font-latin);
  font-weight: var(--weight-medium);
  font-size: var(--text-3xl);
  line-height: 1;
  color: var(--brass-600);
  letter-spacing: 0.01em;
}

/* ---- 鑑定書で分かること ---- */
.report-item {
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  background: var(--surface-card);
  height: 100%;
  color: var(--text-primary);
  line-height: var(--leading-normal);
}
.report-item i {
  font-size: 26px;
  color: var(--accent);
  flex-shrink: 0;
}

/* ---- 鑑定の流れ（5ステップ） ---- */
.flow-steps {
  max-width: 680px;
  margin-left: auto !important;
  margin-right: auto !important;
  display: grid;
  gap: 0;
}
.flow-steps li {
  display: flex;
  gap: 22px;
  padding: 26px 0;
}
.flow-steps li + li { border-top: 1px solid var(--border-subtle); }
.flow-num {
  font-family: var(--font-latin);
  font-weight: var(--weight-medium);
  font-size: var(--text-2xl);
  color: var(--brass-600);
  line-height: 1;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ---- LINE ボタン（LINEグリーンは控えめに、この一箇所のみ） ---- */
.btn-line {
  background-color: #06c755;
  border-color: #06c755;
  color: #ffffff;
}
.btn-line:hover, .btn-line:focus {
  background-color: #05a648;
  border-color: #05a648;
  color: #ffffff;
}

/* ---- LINE 申込み情報の details ---- */
.line-details {
  max-width: 560px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 18px 22px;
  background: var(--surface-card);
}
.line-details summary {
  font-family: var(--font-serif);
  color: var(--text-primary);
  cursor: pointer;
  letter-spacing: var(--tracking-wide);
}
.line-info-list { padding-left: 1.2em; }
.line-info-list li { margin-bottom: 4px; }

/* ---- FAQ アコーディオン（Design G トーン） ---- */
.accordion-item {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg) !important;
  overflow: hidden;
  margin-bottom: 12px;
}
.accordion-button {
  background: var(--surface-card);
  color: var(--text-primary);
  font-family: var(--font-serif);
  letter-spacing: var(--tracking-wide);
  padding: 20px 24px;
  box-shadow: none;
}
.accordion-button:not(.collapsed) {
  background: var(--moon-100);
  color: var(--text-primary);
  box-shadow: none;
}
.accordion-button:focus {
  box-shadow: 0 0 0 3px var(--focus-ring);
  border-color: var(--border-focus);
}
.accordion-button::after {
  background-image: none;
  content: "+";
  font-family: var(--font-latin);
  font-size: 22px;
  line-height: 1;
  color: var(--brass-600);
  width: auto;
  height: auto;
  transition: transform var(--dur-base) var(--ease-quiet);
}
.accordion-button:not(.collapsed)::after {
  transform: rotate(45deg);
}
.accordion-body {
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  padding: 20px 24px;
}

/* ---- 注意事項リスト ---- */
.disclaimer-list { padding-left: 1.2em; }
.disclaimer-list li { list-style: disc; }

/* ---- モバイル下部固定CTA ---- */
.mobile-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-overlay);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: rgba(245, 240, 227, 0.92);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--border-subtle);
}
@media (max-width: 991.98px) {
  body { padding-bottom: 76px; }
}

/* ---- ナビバー（長いブランド名の調整） ---- */
@media (max-width: 575.98px) {
  .navbar-brand span { font-size: 15px; letter-spacing: 0.03em; }
}

/* ---- スムーススクロール ---- */
html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 72px; }

/* ---- 法務ページ共通 ---- */
.legal-prose {
  max-width: var(--container-prose);
  margin: 0 auto;
}
.legal-prose h2 {
  font-size: var(--text-xl);
  margin-top: var(--space-10);
  margin-bottom: var(--space-3);
}
.legal-prose p, .legal-prose li {
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  font-size: var(--text-md);
}
.legal-prose table th, .legal-prose table td {
  border: 1px solid var(--border-subtle);
  padding: 12px 16px;
  vertical-align: top;
}
.legal-prose table th {
  font-family: var(--font-serif);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  background: var(--moon-100);
  color: var(--text-primary);
}

/* ---- 文字の見やすさ調整（2026-06-12） ---- */
/* PC: ヒーロー見出しの不自然な折返しを防ぐ */
.ds-hero__title {
  font-size: clamp(36px, 4.6vw, 60px) !important;
}

/* スマホ: 本文をひと回り大きく、行間をゆったりに */
@media (max-width: 767.98px) {
  body { font-size: 16px; }
  .ds-hero__lede { font-size: 17px; line-height: 1.9; }
  .card-text { font-size: 15.5px; line-height: 1.9; }
  .worry-list li { font-size: 15px; }
  .accordion-body { font-size: 15.5px; }
  .menu-price .ds-latin-num { font-size: 30px; }
  h2 { line-height: 1.45; }
}

/* === 鑑定メニュー：価格の整列＋ライニング数字＋各カードに申込ボタン（2026 追記） === */
#menu .menu-card .card-body { display: flex; flex-direction: column; height: 100%; }
#menu .menu-price { margin: 6px 0 0; }
#menu .price-amount { display: inline-flex; align-items: baseline; gap: 6px; }
#menu .price-amount .ds-latin-num {
  font-family: var(--font-latin); font-weight: var(--weight-medium);
  font-size: var(--text-4xl); line-height: 1; color: var(--brass-600); letter-spacing: 0.01em;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}
#menu .price-amount .yen { font-family: var(--font-sans); font-size: var(--text-lg); color: var(--text-secondary); }
#menu .menu-sub { display: block; font-family: var(--font-sans); font-size: var(--text-xs); color: var(--text-muted); margin-top: 8px; letter-spacing: 0.02em; line-height: 1.6; min-height: 2.6em; }
#menu .menu-card .card-title { font-size: 1.3rem; line-height: 1.5; margin: 14px 0 10px; padding-top: 14px; border-top: 1px solid var(--border-subtle); }
#menu .menu-card .menu-cta { margin-top: auto; padding-top: 20px; }
@media (max-width: 767.98px) { #menu .price-amount .ds-latin-num { font-size: 38px; } }

/* ============================================================
   月夜・ヒーロー（海だけ揺らぐ／動きを減らす設定に対応）
   ============================================================ */
.ds-hero--cinematic{
  position: relative; min-height: 90vh; display:flex; align-items:center;
  overflow:hidden; background:#05070e;
  padding: clamp(96px,13vh,150px) 0 clamp(64px,9vh,110px);
}
.ds-hero--cinematic .ds-hero__sky{ position:absolute; inset:0; z-index:0;
  background: radial-gradient(140% 120% at 80% 20%, #1a2440 0%, #0d1326 52%, #070b16 100%); }
.ds-hero--cinematic .ds-hero__bg{ position:absolute; inset:0; z-index:1;
  background-size:cover; background-position:center; }
.ds-hero--cinematic .ds-hero__sea{ position:absolute; inset:0; z-index:2;
  background-size:cover; background-position:center;
  filter:url(#goenRipple);
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,transparent 48%,#000 54%,#000 70%,transparent 76%,transparent 100%),linear-gradient(90deg,transparent 0%,transparent 4%,#000 14%,#000 64%,transparent 73%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(180deg,transparent 0%,transparent 48%,#000 54%,#000 70%,transparent 76%,transparent 100%),linear-gradient(90deg,transparent 0%,transparent 4%,#000 14%,#000 64%,transparent 73%,transparent 100%);
  mask-composite:intersect; }
.ds-hero--cinematic .ds-hero__veil{ position:absolute; inset:0; z-index:3; pointer-events:none;
  background: linear-gradient(90deg, rgba(7,11,22,.82) 0%, rgba(7,11,22,.5) 34%, rgba(7,11,22,.14) 62%, rgba(7,11,22,.02) 100%),
              linear-gradient(to bottom, rgba(7,11,22,.4) 0%, rgba(7,11,22,0) 34%, rgba(7,11,22,.2) 100%); }
.ds-hero--cinematic .ds-hero__glow{ position:absolute; inset:0; z-index:3; pointer-events:none;
  background: radial-gradient(circle at 80% 24%, rgba(255,253,245,.5), rgba(230,224,205,.16) 9%, rgba(205,185,136,.05) 16%, transparent 24%);
  animation: dsHeroGlow 7s ease-in-out infinite; }
@keyframes dsHeroGlow{ 0%,100%{opacity:.55;} 50%{opacity:.95;} }
.ds-hero--cinematic .ds-hero__drape{ display:none; }
.ds-hero--cinematic::after{ content:""; position:absolute; inset:0; z-index:5; pointer-events:none; background:#05070e;
  animation: dsHeroReveal 2.4s ease forwards; }
@keyframes dsHeroReveal{ from{opacity:.9;} to{opacity:0;} }
.ds-hero--cinematic .ds-hero__inner{ position:relative; z-index:4; }
.ds-hero--cinematic .ds-hero__content > *{ opacity:0; animation: dsHeroRise .9s ease forwards; }
.ds-hero--cinematic .ds-hero__eyebrow{ animation-delay:.2s; color:#cdb988; }
.ds-hero--cinematic .ds-hero__title{ animation-delay:.45s; color:#f5f0e3; text-shadow:0 2px 40px rgba(0,0,0,.6); }
.ds-hero--cinematic .ds-hero__title .ds-hero__accent{ color:#cdb988; }
.ds-hero--cinematic .ds-hero__lede{ animation-delay:.7s; color:#e7e1d0 !important; text-shadow:0 1px 22px rgba(0,0,0,.75); }
.ds-hero--cinematic .ds-hero__cta{ animation-delay:.95s; }
.ds-hero--cinematic .ds-hero__caption{ animation-delay:1.15s; color:#cdc8b8 !important; }
.ds-hero--cinematic .hero-badges{ animation-delay:1.3s; }
@keyframes dsHeroRise{ from{opacity:0; transform:translateY(18px);} to{opacity:1; transform:translateY(0);} }
.ds-hero--cinematic .hero-badges li{ border:1px solid rgba(245,240,227,.28); color:#e7e1d0; background:rgba(245,240,227,.06); }
.ds-hero--cinematic .btn-outline-secondary{ border-color:rgba(245,240,227,.55); color:#f5f0e3; }
.ds-hero--cinematic .btn-outline-secondary:hover{ background:rgba(245,240,227,.12); color:#fff; border-color:rgba(245,240,227,.8); }
.ds-hero--cinematic .ds-hero__scroll{ position:absolute; left:50%; bottom:20px; transform:translateX(-50%); z-index:4;
  color:rgba(245,240,227,.66); font-family:var(--font-latin,'Cormorant',serif); font-size:12px; letter-spacing:.34em; text-transform:uppercase;
  opacity:0; animation: dsHeroRise 1s ease 1.7s forwards; }
@media (max-width: 991px){
  .ds-hero--cinematic{ min-height: 80vh; }
  .ds-hero--cinematic .ds-hero__bg,
  .ds-hero--cinematic .ds-hero__sea{ background-position: 78% 25%; }
  .ds-hero--cinematic .ds-hero__glow{ background: radial-gradient(circle at 78% 25%, rgba(255,253,245,.5), rgba(230,224,205,.16) 12%, rgba(205,185,136,.05) 20%, transparent 28%); }
  .ds-hero--cinematic .ds-hero__veil{ background: linear-gradient(to bottom, rgba(7,11,22,.5) 0%, rgba(7,11,22,.22) 28%, rgba(7,11,22,.72) 100%); }
}
/* 「動きを減らす」設定の端末では、波・演出を止めて静止画にする */
@media (prefers-reduced-motion: reduce){
  .ds-hero--cinematic .ds-hero__sea{ filter:none; opacity:0; }
  .ds-hero--cinematic .ds-hero__glow{ animation:none; opacity:.7; }
  .ds-hero--cinematic::after{ animation:none; opacity:0; }
  .ds-hero--cinematic .ds-hero__content > *,
  .ds-hero--cinematic .ds-hero__scroll{ opacity:1; animation:none; }
}