/* =========================
   Base
========================= */
html { scroll-behavior: smooth; }

body {
  overflow-x: hidden;
  margin: 0;
  padding: 0;
  background: #111827;
  color: #fff;
  font-family: Hiragino Sans, "ヒラギノ角ゴ Pro W6", "メイリオ", sans-serif;
  line-height: 1.7;       /* 行間を広めに */
  letter-spacing: 0.02em; /* 字間を少し広げる */
}

/* ===== レイアウト全般 ===== */
section {
  padding-top: 5rem;
  padding-bottom: 5rem;
}
@media (min-width: 768px) {
  section {
    padding-top: 7rem;
    padding-bottom: 7rem;
  }
}

/* 長文制御 */
.max-text {
  max-width: 68ch;
  margin-left: auto;
  margin-right: auto;
}

/* 見出しの余白 */
h2, h3 {
  margin-bottom: 1.5rem;
}
@media (min-width: 768px) {
  h2, h3 {
    margin-bottom: 2rem;
  }
}

/* ===== 汎用要素 ===== */
.ph-img {
  background: #e5e7eb;
  color: #64748b;
  display: grid;
  place-items: center;
  border-radius: .5rem;
}
.highlight {
  position: relative;
  display: inline-block;
}
.highlight::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 50%;
  background: #ffd700;
  z-index: -1;
}
/* status セクション内のハイライト（背景マーカー風） */
#status .highlight {
  display: inline;
  background: linear-gradient(transparent 56%, rgba(255, 239, 153, 0.8) 0);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 0 .06em;
}
#status .highlight::after { content: none !important; }

.oblique-8 { font-style: oblique 8deg; }

/* === ボタン（統一）=== */
.btn-glow, .ffx-btn, .cm-send {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .9rem 1.4rem;
  border-radius: .75rem;
  font-weight: 800;
  color: #111827;
  background: linear-gradient(180deg, #FFD60A 0%, #FFC300 60%, #FFB000 100%);
  border: 1px solid rgba(0,0,0,.06);
  overflow: hidden;
  isolation: isolate;
  transition: transform .12s ease, box-shadow .18s ease, filter .18s ease;
}
.btn-glow::before, .ffx-btn::before {
  content: "";
  position: absolute;
  top: -30%; bottom: -30%;
  width: 36%;
  background: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.42) 45%,
    rgba(255,255,255,.92) 55%,
    rgba(255,255,255,0) 100%);
  transform: translateX(-120%) skewX(-20deg);
  border-radius: inherit;
  filter: blur(10px);
  mix-blend-mode: screen;
  opacity: .9;
  pointer-events: none;
  animation: shineSweep 1.6s linear infinite;
}
.btn-glow:hover, .ffx-btn:hover, .cm-send:hover {
  transform: translateY(-1px);
  filter: saturate(1.05);
}
@keyframes shineSweep {
  0%   { transform: translateX(-120%) skewX(-20deg); }
  80%,100% { transform: translateX(220%) skewX(-20deg); }
}

/* ffx-btn 専用調整 */
.ffx-btn {
  min-width: 220px;
  padding: .95rem 1.35rem;
  font-weight: 700;
  border-radius: .9rem;
  box-shadow: inset 0 1.2px 0 rgba(255,255,255,.35),
              0 12px 22px rgba(0,0,0,.16);
}
.ffx-btn:hover {
  box-shadow: inset 0 1.2px 0 rgba(255,255,255,.38),
              0 14px 24px rgba(0,0,0,.18);
}
.ffx-btn:active {
  transform: translateY(1px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28),
              0 10px 18px rgba(0,0,0,.14);
}

/* ナビ内小ボタン */
.btn-nav-cta {
  font-size: .95rem;
  padding: .6rem 1rem;
  min-width: 0;
}
@media (min-width: 768px) {
  .btn-nav-cta {
    font-size: .875rem;
    padding: .5rem .85rem;
  }
}

/* === FAQ === */
.card {
  border: 1px solid #e5e7eb;
  border-radius: .75rem;
  box-shadow: 0 4px 12px rgba(0,0,0,.05);
  background: #fff;
}
.faq-btn {
  width: 100%;
  text-align: left;
  font-weight: 700;
  padding: 1rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #111827;
  cursor: pointer;
}
.faq-btn::after { content:"▾"; transition: transform .3s ease; }
.faq.open .faq-btn::after { transform: rotate(180deg); }

.faq-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease;
  padding: 0 1.5rem;
}
.faq-panel p {
  font-size: 1rem;
  line-height: 1.6;
  color: #1f2937;
  padding: 1rem 0;
}
.faq.open .faq-panel { max-height: 500px; }


/* === チェックリスト === */
.ck {
  --box: 30px;
  --gap: 6px;
  --tick: 30px;
  --border: 2px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.ck-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: var(--box);
}
.ck-box {
  width: var(--box); height: var(--box);
  box-sizing: border-box;
  border: var(--border) solid #111827;
  background: #fff;
}
.ck-tick {
  margin-top: -35px;
  width: var(--box);
  text-align: center;
  font-size: 34px;
  line-height: 1;
  color: #e60000;
  font-weight: 1000;
}
.ck-text { line-height: 1.6; }
@media (min-width:768px) {
  .ck { --box: 34px; --gap: 8px; --tick: 34px; --border: 2px; }
}

/* === フェードイン === */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .45s ease, transform .45s ease;
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity:1 !important; transform:none !important; transition:none !important; }
}

/* === モーダル === */
#confirmOverlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}
#confirmModal {
  background: #fff;
  color: #111827;
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.35);
  width: min(680px, 92vw);
  max-height: 80vh;
  overflow-y: auto;
  padding: 20px;
}
#confirmHead {
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 12px;
}
#confirmBody dl {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 8px 14px;
  font-size: 14px;
}
#confirmBody dt { font-weight: bold; color: #374151; }
#confirmBody dd { color: #111827; word-break: break-word; }
#confirmFoot {
  margin-top: 16px;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.cm-btn {
  padding: .7rem 1.1rem;
  border-radius: 6px;
  font-weight: bold;
  cursor: pointer;
}
.cm-cancel {
  background: #e5e7eb;
  color: #111827;
}

/* === 本文リンク専用（差し替え）=== */
main a,
section a:not(.btn-glow):not(.ffx-btn):not(.cm-send):not(.btn-nav-cta) {
  color: #111827;              /* 初期は黒 */
  text-decoration: underline;  /* 初期で下線あり */
  transition: color .2s ease, text-decoration .2s ease;
  font-weight: normal;
}

main a:hover,
section a:not(.btn-glow):not(.ffx-btn):not(.cm-send):not(.btn-nav-cta):hover {
  color: #FFD60A;              /* hoverで黄色 */
  text-decoration: none;       /* hoverで下線を外す */
}
/* === フッターリンク専用（上書き）=== */
footer a {
  text-decoration: none !important;
}
footer a:hover {
  text-decoration: none !important;
}
.subtle-shadow {
  text-shadow: 1px 1px 4px rgba(0,0,0,0.5);
}