@charset "utf-8";
/* diagnosis-lp.css : 診断前LP（ビジター第一接触）
 *
 * app.css のトークン（色・書体・角丸）をそのまま使う。
 * 条件：本文14px未満にしない／320pxから崩れない／色だけで状態を表さない。
 *
 * このページの目的は「診断を始める」ひとつだけ。
 * CTA以外に目立つものを置かない。
 */

/* ヒーローを画面幅いっぱいにするため 100vw を使っているが、
 * 100vw は縦スクロールバーの幅を含む。そのため環境によっては
 * 数px 横へはみ出し、横スクロールが出てしまう（2026-09-06 確認）。
 *
 * はみ出しぶんだけを切る。clip はスクロール枠を作らないので、
 * ページ内の位置固定などに影響しない。古い環境では hidden で受ける。 */
/* ★2026-09-09 修正：body だけでは止まっていなかった。
 *
 * はみ出しを切る指定は、html が visible のときだけ body から
 * ビューポートへ引き継がれる。ただし引き継がれるのは hidden / scroll / auto で、
 * clip は引き継がれない。つまり上の2行は、clip が hidden を上書きした時点で
 * 「どこにも効かない指定」になっていた（PC幅で実際に8px動いていた）。
 *
 * html 自身に置けば、html の箱がはみ出しを切るので確実に止まる。
 * clip はスクロール枠を作らないので、位置固定などに影響しない。
 * 古い環境向けに hidden を先に書いておく。
 *
 * ★このCSSを読むのは shindan-lp.html だけなので、html へ書いても
 *   ほかのページには影響しない。 */
html {
  overflow-x: hidden;
  overflow-x: clip;
}

.dlp-body {
  padding: 0;
  overflow-x: hidden;
  overflow-x: clip;
}

.dlp {
  max-width: 560px;
  margin: 0 auto;
  padding: 28px 18px 40px;
}

/* --- 見出し・本文の共通 ------------------------------------------------ */
.dlp-heading {
  margin: 0 0 20px;
  font-family: var(--mincho);
  font-size: 21px;
  line-height: 1.75;
  color: var(--ink);
}
.dlp-heading__line { margin: 0; }

/* --- 読ませる本文の基準（2026-09-03 とーる指示）------------------------
 * 「文字の集合体になって読まれない」という指摘を受けて測り直した。
 *
 * 行間は足りていた（2.0倍）。足りなかったのは段落と段落の間で、
 * 行の間が2.0倍あるのに段落の間が1.4倍しかなく、
 * 「行が変わった」のか「話が変わった」のかを目で追えない状態だった。
 *
 * 5DAY本体の .prose__line（16px／行間2.3／段落間30px＝1.82倍）が
 * すでにこの基準を満たしているので、そちらへ揃える。
 * 一般的な目安も「段落間は行の高さの1.5〜2倍」「本文は16px以上」。
 *
 * ★注記（.dlp-note など）は補助情報なので14pxのままにする。 */
.dlp-body { margin: 0; }
.dlp-body__line {
  margin: 0 0 28px;
  font-size: 16px;
  line-height: 2.3;
  color: var(--ink-2);
}
.dlp-body__line:last-child { margin-bottom: 0; }

.dlp-lead { margin: 0 0 28px; font-size: 16px; line-height: 2.3; color: var(--ink-2); }
.dlp-close { margin: 28px 0 0; font-size: 16px; line-height: 2.3; color: var(--ink); }
.dlp-note { margin: 20px 0 0; font-size: 14px; line-height: 1.95; color: var(--ink-soft); }
.dlp-note__line { margin: 0 0 6px; font-size: 14px; line-height: 1.95; color: var(--ink-soft); }
.dlp-note__line:last-child { margin-bottom: 0; }

/* --- セクション -------------------------------------------------------- */
/* セクションの間（2026-09-06 とーる指示）。
 * 46pxでは段落の間（28px）との差が小さく、話が変わったことが伝わらなかった。
 * 参加表明LP（.lp-section）が88pxで読みやすいので、同じ基準へそろえる。 */
.dlp-section { margin: 0 0 88px; }
.dlp-section--reframe,
.dlp-section--author,
.dlp-section--final {
  padding: 28px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--lm-surface);
}

/* --- ヒーロー ----------------------------------------------------------
 * 2026-08-25 とーる指示：画像は背景へうっすら。文字が主役。 */
/* 2026-08-25 とーる指示：背景は画面の横幅いっぱい。左右を空けない。
 * 親（.dlp）の余白を打ち消して、画面の端から端まで広げる。
 * 文字は中で元の幅へ戻す。 */
.dlp-hero {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: -28px;          /* .dlp の上余白を打ち消す */
  margin-bottom: 88px;
  padding: 56px 0 44px;
  overflow: hidden;
  isolation: isolate;
}

/* 背景の絵。横は端から端まで。下へ向かって消え、
 * その切れ目のすぐ下から共感セクションが始まる。 */
.dlp-hero__backdrop {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-size: cover;
  background-position: center 28%;
  background-repeat: no-repeat;
  /* 左右は切らない。下だけフェードさせる */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 58%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 58%, transparent 100%);
}

/* 文字は元の読みやすい幅へ戻す */
.dlp-hero__copy {
  position: relative;
  max-width: 560px;
  margin: 0 auto;
  padding: 0 18px;
}

.dlp-hero__eyebrow {
  margin: 0 0 14px;
  font-size: 14px;
  letter-spacing: .04em;
  color: var(--gold-2);
}

.dlp-hero__title {
  margin: 0 0 22px;
  font-family: var(--mincho);
  font-size: 26px;
  line-height: 1.78;
  color: var(--ink);
}
.dlp-hero__title-line { margin: 0; }

.dlp-facts {
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.dlp-facts__item {
  padding: 5px 13px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: rgba(9, 12, 18, .45);
  font-size: 14px;
  color: var(--gold-2);
}

/* ヒーローの入場。上から順に浮かび上がる */
.dlp-hero.is-entering .dlp-hero__eyebrow,
.dlp-hero.is-entering .dlp-hero__title-line,
.dlp-hero.is-entering .dlp-body__line,
.dlp-hero.is-entering .dlp-facts,
.dlp-hero.is-entering .dlp-cta {
  animation: dlp-rise .9s cubic-bezier(.16, .8, .24, 1) both;
}
/* 2026-09-07 とーる承認：読むまでの待ち時間を詰める。
 * 以前は最後のCTAが 800ms 待ちだった（+0.9秒のアニメーション）。 */
.dlp-hero.is-entering .dlp-hero__eyebrow { animation-delay: 40ms; }
.dlp-hero.is-entering .dlp-hero__title-line:nth-child(1) { animation-delay: 100ms; }
.dlp-hero.is-entering .dlp-hero__title-line:nth-child(2) { animation-delay: 160ms; }
.dlp-hero.is-entering .dlp-hero__title-line:nth-child(3) { animation-delay: 220ms; }
.dlp-hero.is-entering .dlp-body__line { animation-delay: 290ms; }
.dlp-hero.is-entering .dlp-facts { animation-delay: 350ms; }
.dlp-hero.is-entering .dlp-cta { animation-delay: 410ms; }

@keyframes dlp-rise {
  from { opacity: 0; transform: translateY(14px); filter: blur(5px); }
  55%  { opacity: .85; filter: blur(1px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}

@media (prefers-reduced-motion: reduce) {
  .dlp-hero.is-entering * { animation: none !important; filter: none !important; }
}

/* --- CTA --------------------------------------------------------------- */
.dlp-cta { margin: 26px 0 0; }
.dlp-cta__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 56px;
  padding: 14px 20px;
  font-size: 17px;
  text-align: center;
  text-decoration: none;
}
.dlp-cta__note { margin: 12px 0 0; text-align: center; }
.dlp-cta__note-line {
  margin: 0 0 4px;
  font-size: 14px;
  line-height: 1.9;
  color: var(--ink-soft);
}
.dlp-cta__note-line:last-child { margin-bottom: 0; }

/* --- 共感セクション（2026-08-25 とーる指示）-----------------------------
 * ここが共感をつかむ場所。中央寄せにして、文字が固まらないよう
 * 大きさと上下の間隔をしっかり取る。 */
/* 共感の節だけ、次へ移る前にもう少し間を置く */
.dlp-section--empathy { margin-bottom: 104px; }
.dlp-section--empathy .dlp-heading {
  margin-bottom: 40px;
  font-size: 23px;
  line-height: 1.95;
  text-align: center;
}

/* --- 共感（2026-09-10 組み替え）----------------------------------------
 * 強調行だけを拾っても意味が通るように、大きさと色で段をつける。
 * 全部を大きくしない・全部を金色にしない。同じ組の行は近づけ、話が変わるところで空ける。 */

/* 入口の3つ。同じ大きさの短文を、少しだけ抑えた色で置く */
.dlp-open { margin: 0 0 38px; text-align: center; }
.dlp-open__line {
  margin: 0 0 10px;
  font-size: 16px;
  line-height: 1.85;
  color: var(--ink-2);
}
.dlp-open__line:last-child { margin-bottom: 0; }
/* 行の中で強めるところ。色は変えず、太さだけで出す */
.dlp-open__em { color: var(--ink); font-weight: 700; }
/* 3つを受けとめる一行。少しだけ間を置く */
.dlp-open__close {
  margin: 16px 0 0;
  font-size: 16px;
  line-height: 1.85;
  color: var(--ink);
}

/* 長い説明は左揃え、短いキーメッセージは中央（2026-09-10 Codex指示） */
.dlp-pairs { margin: 0; text-align: left; }
.dlp-pair { margin: 0 0 34px; }
.dlp-pair:last-child { margin-bottom: 0; }

/* 話の切り替わりに細い線を1本。装飾なので読み上げからは外してある */
.dlp-pair__rule {
  display: block;
  width: 44px;
  height: 1px;
  margin: 0 auto 30px;
  /* 線は中央に置く。前後の文字の揃え方には影響させない */
  background: var(--line-2, rgba(227, 195, 129, .22));
}

/* 補助行（小さめ）と強調行（大きめ）を近づけて1組に見せる */
.dlp-pair__lead {
  margin: 0 0 8px;
  font-size: 15px;
  line-height: 1.85;
  color: var(--ink-2);
}
.dlp-pair__point {
  margin: 0;
  text-align: center;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.75;
  color: var(--ink);
}

/* その節の結論。ここだけ金色で、いちばん大きくする */
.dlp-close__line { margin: 0; }
.dlp-close {
  margin: 44px 0 0;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.7;
  text-align: center;
  color: var(--gold-2, #e3c381);
}

/* --- 再定義の図（2026-09-10 追加）--------------------------------------
 * 画像ではなく、ふつうの文字。読み上げは見た目と同じ順に流れる。
 * 矢印と縦線は装飾なので、読み上げからは外してある。 */
.dlp-heading--reframe .dlp-heading__strong {
  color: var(--gold-2, #e3c381);
  font-size: 1.18em;
  font-weight: 800;
}

.dlp-map { margin: 30px 0 0; }
.dlp-map__flow {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 10px;
}
.dlp-map__cell {
  flex: 1 1 0;
  min-width: 0;
  padding: 14px 10px;
  border: 1px solid var(--line-2, rgba(227, 195, 129, .22));
  text-align: center;
}
.dlp-map__label {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--gold-2, #e3c381);
}
.dlp-map__line {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--ink-2);
}
.dlp-map__arrow {
  align-self: center;
  flex: 0 0 auto;
  font-size: 16px;
  color: var(--gold, #b99455);
}

/* 上の3つと、支える2つをつなぐ縦線 */
.dlp-map__stem {
  display: block;
  width: 1px;
  height: 22px;
  margin: 0 auto;
  background: var(--line-2, rgba(227, 195, 129, .22));
}
.dlp-map__support-label {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.7;
  text-align: center;
  color: var(--ink-2);
}
.dlp-map__support {
  display: flex;
  gap: 10px;
  justify-content: center;
}
.dlp-map__note {
  margin: 22px 0 0;
  text-align: left;
}
.dlp-map__note-line {
  margin: 0 0 8px;
  font-size: 16px;
  line-height: 1.85;
  color: var(--ink);
}
.dlp-map__note-line:last-child { margin-bottom: 0; }
/* 再定義の注記は、小さく薄くしすぎない（2026-09-10 Codex指示） */
.dlp-section--reframe .dlp-note {
  font-size: 15px;
  line-height: 1.95;
  color: var(--ink-2);
  text-align: left;
}

/* 狭い画面では縦に積む。矢印は下向きにする */
@media (max-width: 519px) {
  .dlp-map__flow, .dlp-map__support { flex-direction: column; }
  .dlp-map__arrow { transform: rotate(90deg); font-size: 15px; }
  /* 縦積みのときは、名前と説明を1行に並べて背を低くする */
  .dlp-map__cell {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 11px 12px;
    text-align: left;
  }
  .dlp-map__label { margin: 0; flex: 0 0 auto; }
  .dlp-map__line { flex: 1 1 auto; }
}

/* --- 箇条書き ---------------------------------------------------------- */
.dlp-checks, .dlp-list { margin: 20px 0 0; padding: 0; list-style: none; }
.dlp-checks__item, .dlp-list__item {
  position: relative;
  margin: 0 0 20px;
  padding-left: 26px;
  font-size: 16px;
  line-height: 2.15;
  color: var(--ink-2);
}
.dlp-checks__item:last-child, .dlp-list__item:last-child { margin-bottom: 0; }
/* 記号は文字として置く（色だけに頼らない） */
.dlp-checks__item::before {
  content: "―";
  position: absolute;
  left: 0;
  color: var(--gold);
}
.dlp-list__item::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--gold-2);
}

/* --- 5つの軸 ----------------------------------------------------------- */
.dlp-axes { margin: 0; padding: 0; list-style: none; }
.dlp-axis {
  display: flex;
  gap: 14px;
  margin: 0 0 22px;
  padding: 0 0 22px;
  border-bottom: 1px solid var(--line);
}
.dlp-axis:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.dlp-axis__num {
  flex: none;
  width: 30px;
  height: 30px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif-en);
  font-size: 16px;
  color: var(--gold-2);
}
.dlp-axis__body { flex: 1 1 auto; }
.dlp-axis__name {
  margin: 2px 0 8px;
  font-family: var(--mincho);
  font-size: 17px;
  color: var(--ink);
}
.dlp-axis__text { margin: 0; font-size: 16px; line-height: 2.15; color: var(--ink-2); }

/* --- タイプ分けとの違い（2026-09-05 §57）------------------------------
 * 「結果で分かること」の中、レーダー見本の直前に置く。
 * 数字を主役にするが、煽らない。補足は根拠と「何の数でないか」を示す。
 * ★補足も本文の下限（14px）を守る。読めない小ささにしない。 */
.dlp-variety {
  margin: 26px 0 0;
  padding: 22px 18px;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  background: var(--lm-surface-2);
}
.dlp-variety__heading {
  margin: 0 0 16px;
  font-family: var(--mincho);
  font-size: 18px;
  line-height: 1.85;
  color: var(--ink);
}
.dlp-variety__body { margin: 0; }
.dlp-variety__line {
  margin: 0 0 14px;
  font-size: 16px;
  line-height: 2.15;
  color: var(--ink-2);
}
.dlp-variety__line:last-child { margin-bottom: 0; }

/* 数字はここだけ大きく。文の中で浮かせる */
.dlp-variety__emphasis {
  margin: 20px 0;
  padding: 14px 12px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-family: var(--mincho);
  font-size: 20px;
  line-height: 1.8;
  text-align: center;
  color: var(--gold-2);
}

.dlp-variety__close {
  margin: 0;
  font-size: 16px;
  line-height: 2.15;
  color: var(--ink-2);
}
/* 補足は控えめに見せる（2026-09-06 とーる指示）。
 *
 * ★文字を14pxより小さくはしない。このページの条件（本文14px未満にしない）
 *   と、§57の「補足も本文最小サイズ条件を守り、読める大きさに」に従う。
 *   代わりに「※」を付け、色を落とし、行間を詰めて目立たなくする。 */
.dlp-variety__note { margin: 18px 0 0; }
.dlp-variety__note-line {
  margin: 0 0 4px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--ink-soft);
  opacity: .82;
}
/* 1行目にだけ印を置く。2行目は続きなので付けない */
.dlp-variety__note-line:first-child::before { content: "※ "; }
.dlp-variety__note-line:last-child { margin-bottom: 0; }

@media (max-width: 359px) {
  .dlp-variety__emphasis { font-size: 18px; }
}

/* --- 結果イメージ ------------------------------------------------------ */
.dlp-sample {
  margin: 26px 0 0;
  padding: 22px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--lm-surface-2);
}
.dlp-sample__title {
  margin: 0 0 12px;
  text-align: center;
  font-size: 14px;
  color: var(--ink-soft);
}
.dlp-sample__note {
  margin: 12px 0 0;
  text-align: center;
  font-size: 14px;
  color: var(--ink-soft);
}

/* --- 診断の流れ -------------------------------------------------------- */
.dlp-steps { margin: 0; padding: 0; list-style: none; }
.dlp-step {
  margin: 0 0 20px;
  padding: 18px 18px;
  border-left: 2px solid var(--gold);
  border-radius: 0 12px 12px 0;
  background: var(--lm-surface);
}
.dlp-step:last-child { margin-bottom: 0; }
.dlp-step__title {
  margin: 0 0 8px;
  font-family: var(--mincho);
  font-size: 16px;
  color: var(--ink);
}
.dlp-step__body { margin: 0; font-size: 16px; line-height: 2.15; color: var(--ink-2); }

/* --- できないこと ------------------------------------------------------ */
.dlp-limit {
  margin: 26px 0 0;
  padding: 20px 18px;
  border: 1px solid var(--line-2);
  border-radius: 14px;
}
.dlp-limit__title {
  margin: 0 0 12px;
  font-family: var(--mincho);
  font-size: 16px;
  color: var(--gold-2);
}

/* --- 設計者 ------------------------------------------------------------
 * 2026-08-25 とーる指示：この節は畳まず、顔写真も出す。 */
.dlp-author__head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 22px;
}
.dlp-author__photo {
  flex: none;
  width: 84px;
  height: 84px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  object-fit: cover;
  background: var(--lm-surface-2);
}
.dlp-author__id { flex: 1 1 auto; min-width: 0; }
.dlp-author__name {
  margin: 0 0 6px;
  font-family: var(--mincho);
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink);
}
.dlp-author__role { margin: 0; font-size: 14px; line-height: 1.75; color: var(--gold-2); }
.dlp-author__qual { margin: 18px 0 0; font-size: 14px; line-height: 1.9; color: var(--ink-soft); }

@media (max-width: 359px) {
  .dlp-author__head { gap: 14px; }
  .dlp-author__photo { width: 72px; height: 72px; }
  .dlp-author__name { font-size: 17px; }
}

/* --- FAQ --------------------------------------------------------------- */
.dlp-faq { margin: 0; }
.dlp-faq__item {
  margin: 0 0 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--lm-surface);
  overflow: hidden;
}
.dlp-faq__q {
  padding: 16px 18px;
  cursor: pointer;
  list-style: none;
  font-size: 16px;
  line-height: 1.9;
  color: var(--ink);
}
.dlp-faq__q::-webkit-details-marker { display: none; }
.dlp-faq__q::before { content: "＋ "; color: var(--gold-2); }
.dlp-faq__item[open] .dlp-faq__q::before { content: "− "; }
.dlp-faq__q:focus-visible { outline: 2px solid var(--gold-2); outline-offset: -3px; }
.dlp-faq__a {
  margin: 0;
  padding: 0 18px 22px;
  font-size: 16px;
  line-height: 2.15;
  color: var(--ink-2);
}

/* --- 最終CTA ----------------------------------------------------------- */
.dlp-section--final { margin-bottom: 0; }

/* --- フッター ---------------------------------------------------------- */
.dlp-footer { padding: 26px 18px 34px; text-align: center; }
.dlp-footer__note { margin: 0; font-size: 14px; line-height: 1.9; color: var(--ink-soft); }
/* 規約・特商法・プライバシーポリシー（2026-09-10） */
/* 2026-09-10 とーる指示：押させたいものではないので、目立たせない */
.dlp-footer__legal { margin: 12px 0 0; font-size: 12px; line-height: 1.9; color: var(--ink-soft); opacity: .72; }
.dlp-footer__legal a { color: var(--ink-soft); text-decoration: none; }
.dlp-footer__legal a:hover { color: var(--ink); text-decoration: underline; }
.dlp-footer__legal span { color: var(--line-2); }
.dlp-footer__owner { margin: 6px 0 0; font-size: 12px; color: var(--ink-soft); }

/* --- PC：コピーと画像の2カラム ----------------------------------------- */
@media (min-width: 768px) {
  .dlp { max-width: 960px; padding: 44px 24px 56px; }

  .dlp-hero {
    margin-top: -44px;
    margin-bottom: 64px;
    padding: 88px 0 72px;
  }
  .dlp-hero__copy { max-width: 720px; padding: 0 24px; }
  .dlp-hero__title { font-size: 32px; }

  .dlp-section { margin-bottom: 64px; }
  .dlp-heading { font-size: 23px; }
  .dlp-section--reframe,
  .dlp-section--author,
  .dlp-section--final { padding: 36px 32px; }

  .dlp-cta__btn { max-width: 420px; margin: 0 auto; }
}

/* --- 320px ------------------------------------------------------------- */
@media (max-width: 359px) {
  .dlp { padding: 22px 14px 34px; }
  .dlp-hero { margin-top: -22px; padding: 44px 0 36px; }
  .dlp-hero__copy { padding: 0 14px; }
  .dlp-hero__title { font-size: 22px; }
  .dlp-heading { font-size: 19px; }
  .dlp-pair__point { font-size: 19px; }
  .dlp-close { font-size: 22px; }
  .dlp-map__label { font-size: 15px; }
  .dlp-map__cell { padding: 12px 8px; }
  .dlp-cta__btn { font-size: 16px; min-height: 52px; }
  .dlp-facts__item { font-size: 14px; padding: 4px 11px; }
}

/* --- 動きを減らす設定 --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .dlp * { animation: none !important; transition: none !important; }
}


/* --- 畳めるセクション（2026-08-25 とーる指示）---------------------------
 * 判断に要らない詳しい説明は畳んでおく。中身は削っていない。 */
.dlp-fold {
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--lm-surface);
  overflow: hidden;
  margin-bottom: 14px;
}
.dlp-fold__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 20px 20px;
  cursor: pointer;
  list-style: none;
}
.dlp-fold__summary::-webkit-details-marker { display: none; }
.dlp-fold__summary:focus-visible { outline: 2px solid var(--gold-2); outline-offset: -3px; }
.dlp-fold__title {
  font-family: var(--mincho);
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink);
}
.dlp-fold__more {
  flex: none;
  font-size: 14px;
  color: var(--gold-2);
}
.dlp-fold__more::after { content: " ＋"; }
.dlp-fold[open] .dlp-fold__more::after { content: " −"; }
.dlp-fold__body { padding: 0 20px 24px; }

/* 畳んだ見出しが続くあいだは詰めて並べる（上の14px）。
 * ただし、そのあとに通常のセクションが来るときは、他と同じだけ間を空ける
 * （2026-09-06 とーる指示。ここだけ14pxのままで詰まって見えていた）。
 * 隣り合う余白は大きいほうへまとまるので、88pxを指定すれば他の節と揃う。 */
.dlp-fold + .dlp-section:not(.dlp-fold) { margin-top: 88px; }

/* 畳んだ中では、外枠つきの子要素の枠を外す（二重枠を避ける） */
.dlp-fold .dlp-faq__item { background: var(--lm-surface-2); }
.dlp-fold .dlp-step { background: var(--lm-surface-2); }

@media (min-width: 768px) {
  .dlp-fold__summary { padding: 24px 28px; }
  .dlp-fold__body { padding: 0 28px 28px; }
  .dlp-section--empathy .dlp-heading { font-size: 26px; }
  .dlp-block__line { font-size: 17px; }
}

/* 狭い画面では見出しだけ小さくする。
 * 本文は16pxを下回らせない（2026-09-03。読みやすさの下限） */
@media (max-width: 359px) {
  .dlp-section--empathy .dlp-heading { font-size: 20px; }
  .dlp-block__line { line-height: 2.2; }
  .dlp-fold__title { font-size: 16px; }
}


/* --- スクロールで現れる演出の見直し（2026-09-07 Codex指示／とーる承認）-----
 *
 * 共通の .sc-reveal は opacity:0 から始まり、画面に入って観測されるまで
 * 文字が出てこない。さらに1要素ずつ90msずらしているので、行の多い節では
 * 最後の行が半秒以上あとに現れる。
 * 結果として「スクロールした直後、本文がほぼ見えない」状態になっていた。
 * （自動撮影すると本文が1文字も写らないほど、初期状態で見えていなかった）
 *
 * ここでは
 *   ・最初から見えている（opacity を 0 にしない）
 *   ・観測されたら、ごく短く落ち着くだけ（0.28秒・ずらし無し）
 * にする。読むために待つ時間はゼロになり、動きの気配だけが残る。
 *
 * ★.dlp-body で囲ってあるので、この診断前LPだけに効く。
 *   参加表明LP（lp.html）と5DAY本体の .sc-reveal は今までどおり。
 *   共通の app.css は触っていない。 */
.dlp-body .sc-reveal { opacity: 1; }
.dlp-body .sc-reveal.is-shown {
  animation: dlp-settle .28s ease-out both;
  animation-delay: 0ms;
}
/* ★2026-09-08 修正：opacity を .55 から始めていたのが誤り。
 *   土台を opacity:1 にしてあるので、画面に入った瞬間に
 *   「いったん薄くなってから戻る」ちらつきが起きていた。
 *   明るさは動かさず、わずかに持ち上がるだけにする。 */
@keyframes dlp-settle {
  from { transform: translateY(5px); }
  to   { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .dlp-body .sc-reveal,
  .dlp-body .sc-reveal.is-shown { opacity: 1; animation: none !important; }
}


/* --- 暗い地で本文がにじむのを抑える（2026-09-07 とーる決定）---------------
 *
 * 暗い地に細い線の文字を置くと、輪郭がにじんで読み疲れる（ハレーション）。
 * コントラストは足りていた（本文 #c9c5bb × 地 #0e121a で約11:1）ので、
 * 足りていなかったのは線の太さのほう。
 *
 * 太さを1段上げるだけにする。字間を広げる案も試したが、
 * 改行の位置が変わってしまい、2026-09-03に直した「意味の切れ目で改行する」を
 * 壊すため採らなかった。太さだけなら、改行は1文字も動かない。
 *
 * ★この診断前LPだけに効く。参加表明LPと5DAY本体は今までどおり。 */
.dlp-body__line,
.dlp-block__line,
.dlp-lead,
.dlp-checks__item,
.dlp-list__item,
.dlp-axis__text,
.dlp-step__body,
.dlp-faq__a,
.dlp-variety__line,
.dlp-variety__close {
  font-weight: 500;
}


/* --- 挿絵の写真（2026-09-08 Codex・あかり指示／とーる採用承認済み）---------
 *
 * 3枚。①共感の終わり ②問題の再定義の終わり（さらに小さく） ③最終CTAの直前。
 *
 * ★主役は文章。写真は情景を思い浮かべるための添え物（2026-09-08 とーる指示）。
 *   最初は本文と同じ幅で置いたが「画像がメインに見える」ため、はっきり小さくした。
 *   本文幅の6割を上限にし、さらにpxでも頭を押さえる。
 *   こうすると、PCで本文が広がっても写真だけが大きくならない。
 *
 * ・中央に置く。文字やボタンを重ねない
 * ・3:2をそのまま出す。顔・手元・商品を切らない（object-fit を使わない）
 * ・暗く塗る加工はしない
 * ・width/height をHTMLに書いてあるので、読み込み前から場所が確保される
 * ・断り書きは出さない（とーる判断）。新しい動きも足さない */
/* 大きさはスマホで決める（2026-09-08 とーる指示）。
 * 本文と同じ幅では「画像がメイン」に見え、6割では小さすぎた。
 * 8割弱にして、pxの上限はPCで大きくなりすぎない保険として置く。 */
.dlp-photo {
  margin: 26px auto 0;
  max-width: 420px;               /* min() が読めない環境向けの控え */
  max-width: min(78%, 420px);
}
.dlp-photo picture { display: block; }
.dlp-photo__img {
  display: block;
  width: 100%;
  height: auto;
  /* 角丸は付けない（2026-09-08 とーる指示） */
  /* 読み込み前の空白が穴に見えないよう、うっすら地を敷く */
  background: rgba(227, 195, 129, .04);
}

/* ②はさらに控えめ。①と続けて写真が並ぶ区間なので、差をはっきりさせる */
.dlp-photo--small {
  max-width: 320px;
  max-width: min(60%, 320px);
}

/* 写真のすぐ下にCTAが来ると、写真がボタンの飾りに見える（2026-09-08）。
 * スマホは全部が縦に積まれるので、ここだけ間を広げて切り離す。 */
.dlp-photo + .dlp-cta { margin-top: 40px; }

/* ③は最終の診断案内へつなぐ絵。
 * 見出し・説明・CTAのまとまりは割らず、その手前に置く。
 * セクション間の88pxより詰めて、次のブロックと一続きに見せる。 */
.dlp-photo--before-final { margin: 0 auto 30px; }

@media (max-width: 359px) {
  .dlp-photo { margin-top: 22px; max-width: min(82%, 260px); }
  .dlp-photo--small { max-width: min(64%, 200px); }
  .dlp-photo--before-final { margin-bottom: 24px; }
}

/* 紹介動画（2026-10-10） */
.dlp-video { margin: 26px auto 0; max-width: 560px; text-align: center; }
.dlp-video__player { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 10px; background: #090c12;
  border: 1px solid rgba(227, 195, 129, .35); box-shadow: 0 10px 30px rgba(0, 0, 0, .45); }
.dlp-video__caption { margin-top: 9px; font-size: .8rem; line-height: 1.7; opacity: .9; }
.dlp-video__note { display: block; font-size: .68rem; opacity: .75; }