/*
 * LP — 営業用 LP (/lp/) だけで使う意匠
 *
 * 帯レイアウトそのものは front.css (TOP と共通) が受け持つ。
 * ここに置くのは、LP にしか出てこない部品だけ。
 * 色・余白・字送りは tokens.css の変数を使い、直値は既存の図解に
 * 合わせる必要があるところ (カードの枠色・色チップ) だけに留める。
 *
 * マークアップは page-lp.php と inc/lp-figure.php。
 */

/* ─── 図解のカード ───
   pages.css には図解カードの枠色が黄・マゼンタ・シアンまでしかないので、
   グリーンだけここで足す (dra-blk-143 のグリーン版)。 */
.dra-lp-card-g {
  position: absolute;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #fff;
  border: 3px solid #00f200;
  border-radius: 10px;
  padding: 10px 12px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .05);
}
/* 本人を目立たせる図解 (inc/lp-figure.php の scw / sch 指定時)。
   枠の大きさは style 属性が持つので、ここは文字の大きさだけ。 */
.dra-lp-card-lg .dra-fig-card__role { font-size: 12px; }
.dra-lp-card-lg .dra-fig-card__name { font-size: 16px; }
.dra-lp-card-sm .dra-fig-card__role { font-size: 10px; }
.dra-lp-card-sm .dra-fig-card__name { font-size: 13px; }

/* カード内の色チップ (dra-inl-58〜62) のグリーン版 */
.dra-lp-chip-g {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid rgba(0, 0, 0, .08);
  background: #00ff00;
  color: var(--dra-text);
  line-height: 1;
}

/* ─── FV ───
   見出しは TOP より 1 行が長い。左カラム (1100 − 図解 520 − 余白 ≒ 546px) で
   途中の 1 文字だけが次の行に落ちないよう、TOP より一段小さくする。 */
.dramap-lp .dra-hero-title { font-size: clamp(28px, 3.1vw, 34px); }
@media (max-width: 1000px) {
  .dramap-lp .dra-hero-title { font-size: clamp(26px, 4.4vw, 34px); }
}
@media (max-width: 720px) {
  .dramap-lp .dra-hero-title { font-size: 30px; }
}

/* ─── FV の図解スライダー ───
   公式サイトのメインビジュアルと同じサンプルマップを重ねて置き、
   不透明度で切り替える。切り替えは assets/js/main.js。

   JS が動かないときの土台 (下の .is-js が付かない状態):
     すべてのスライドを同じグリッドのマスに置く。1 枚目だけが見え、
     枠の高さは一番背の高いスライドに合う。 */
.dra-lp-slider__track {
  display: grid;
  /* 列を 1fr で止めないと、原寸 520px の図解までトラックが広がって画面から溢れる
     (原寸のまま横スクロールさせるのは assets/js/main.js の役目) */
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  align-items: center;
}
.dra-lp-slide {
  grid-area: 1 / 1;
  width: 100%;
  min-width: 0;
  opacity: 0;
  /* 隠れている間は読み上げ・タブ移動の対象から外す。
     visibility は遅らせて切り替え、消えるときも不透明度の変化を見せる。 */
  visibility: hidden;
  transition: opacity .45s ease, visibility 0s linear .45s;
}
.dra-lp-slide.is-on {
  opacity: 1;
  visibility: visible;
  transition: opacity .45s ease;
}

/* JS が動いたとき: 枠の高さを表示中の 1 枚に合わせる。
   スライドを絶対配置にして枠から高さを外し、実際の値は JS が入れる。 */
.dra-lp-slider.is-js .dra-lp-slider__track {
  display: block;
  position: relative;
}
.dra-lp-slider.is-js .dra-lp-slide {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
/* 高さの変化は最初の 1 回だけ animate させない (0 から伸びて見えるため) */
.dra-lp-slider.is-anim .dra-lp-slider__track { transition: height .45s ease; }

@media (prefers-reduced-motion: reduce) {
  .dra-lp-slide,
  .dra-lp-slide.is-on,
  .dra-lp-slider.is-anim .dra-lp-slider__track { transition: none; }
}

/* 左右ボタンと現在位置のドット */
.dra-lp-slider__ctrl {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 14px;
}
.dra-lp-slider__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--dra-border-strong);
  border-radius: 50%;
  background: var(--dra-bg);
  color: var(--dra-text);
  cursor: pointer;
  transition: border-color var(--dra-transition), background var(--dra-transition);
}
.dra-lp-slider__btn:hover {
  border-color: var(--dra-text);
  background: var(--dra-bg-alt);
}
.dra-lp-slider__dots {
  display: flex;
  align-items: center;
  gap: 8px;
}
.dra-lp-slider__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--dra-border-strong);
  cursor: pointer;
  transition: background var(--dra-transition), transform var(--dra-transition);
}
.dra-lp-slider__dot.is-on {
  background: var(--dra-text);
  transform: scale(1.4);
}

/* ─── FV のロゴ ───
   サイト共通ヘッダーを出さないので、FV の先頭に置く。リンクにはしない。
   ヘッダーのもの (DRAMAP 36px) より一回り大きくする。
   ルビの左右余白は、字面の幅に合わせて optically 調整した値。 */
.dra-lp-brand { margin-bottom: 24px; }
.dra-lp-brand .dra-brand-tagline { font-size: var(--dra-fs-sm); }
.dra-lp-brand .dra-brand-h1 { font-size: 44px; }
.dra-lp-brand .dra-brand-ruby { font-size: 11px; margin: 0 12px 0 6px; }
@media (max-width: 720px) {
  .dra-lp-brand { margin-bottom: 20px; }
  .dra-lp-brand .dra-brand-h1 { font-size: 38px; }
  .dra-lp-brand .dra-brand-ruby { margin: 0 11px 0 5px; }
}

/* 宛名 (「◯◯様へ」)。見出しの上に置く行。 */
.dra-lp-eyebrow {
  margin: 0;
  max-width: none;
  font-size: var(--dra-fs-lg);
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--dra-text-subtle);
}

/* ─── CTA ───
   ボタンと、その下の但し書き。 */
.dra-lp-cta { margin-top: 26px; }
/* pages.css の「.dra-wire-main p は読み幅で折り返す」より強い指定にする。
   箱が 700px で止まると、中央寄せの帯の中で文字が左へずれるため。 */
.dra-lp-cta .dra-lp-note {
  margin: 12px 0 0;
  max-width: none;
  font-size: var(--dra-fs-sm);
  letter-spacing: .04em;
  color: var(--dra-text-muted);
}
.dra-lp-cta-center {
  margin-top: 30px;
  text-align: center;
}
.dra-lp-cta-center .dra-lp-cta { margin-top: 0; }

/* ご案内の URL からでないと中身を出さないことを伝える枠。
   パラメータが揃っていないときは、LP の代わりにこれだけを出す
   (page-lp.php の冒頭)。 */
.dra-lp-notice {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 26px 0 0;
  max-width: var(--dra-measure);
  padding: 16px 18px;
  background: var(--dra-bg-panel);
  border: 1px solid var(--dra-border);
  border-radius: var(--dra-radius-md);
  font-size: var(--dra-fs-sm);
  line-height: 1.8;
  color: var(--dra-text-subtle);
}
.dra-lp-notice .mat-icon { flex: none; color: var(--dra-text-muted); }

/* ─── 01〜10 の 2 カラム ───
   PC では本文とイメージを左右に並べ、奇数・偶数のセクションで左右を入れ替える
   (--flip がイメージ左)。スマホは 1 列にして、必ず本文を先に読ませる。

   横幅を必要とする図解 (03 の工程・04 の 3 枚・05 のタブ・11 の STEP) は
   2 カラムにせず、これまでどおり 1 カラムのまま置く。 */
.dra-lp-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 520px;
  gap: 48px;
  align-items: center;
}
.dra-lp-split > * { min-width: 0; }
.dra-lp-split--flip { grid-template-columns: 520px minmax(0, 1fr); }
.dra-lp-split--flip .dra-lp-split__fig  { order: 1; }
.dra-lp-split--flip .dra-lp-split__body { order: 2; }

/* 列が狭くなるぶん、見出しは帯の既定 (30px) より一段小さくする */
.dra-lp-split .dra-h2-1 { font-size: 26px; }
/* 段組みの中なので、最後の段落の下余白は詰める */
.dra-lp-split__body > p:last-of-type { margin-bottom: 0; }

/* イメージ側は 520px の 1 列。横並びの部品は縦に積む */
.dra-lp-split__fig .dra-cards3 { grid-template-columns: minmax(0, 1fr); }

.dra-lp-split__fig .dra-lp-figcap { margin-top: 12px; }

@media (max-width: 1000px) {
  .dra-lp-split,
  .dra-lp-split--flip { grid-template-columns: 1fr; gap: 28px; }
  .dra-lp-split .dra-lp-split__body,
  .dra-lp-split--flip .dra-lp-split__body { order: 1; }
  .dra-lp-split .dra-lp-split__fig,
  .dra-lp-split--flip .dra-lp-split__fig  { order: 2; }
  /* 1 列に戻ったら 3 つのカードは横並びへ */
  .dra-lp-split__fig .dra-cards3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* スマホの本文 18px は pages.css の「スマホの本文サイズ」で全ページ共通。
   LP だけの上書きは持たない。 */

@media (max-width: 720px) {
  /* スマホでは 2 カラムが解けて 1 列になるので、見出しは全セクション同じ大きさ。
     2 カラムの節は PC で 26px に落としているので、ここで 30px に戻す
     (CV の宛名はここでは触らない) */
  .dra-lp-split .dra-h2-1 { font-size: 30px; }
}

/* ─── 先行案内の CV (FV の直後の 1 セクション) ───
   ここだけ帯の地色を変えて、読み物の流れから独立した箱に見せる
   (公式サイトの共通 CTA バンドと同じ地色)。 */
/* 読み物ではなく通過点なので、他の帯 (72px) より上下を詰める */
.dra-lp-cvband {
  background: var(--dra-bg-panel);
  padding-top: 40px;
  padding-bottom: 40px;
}
/* PC は左にマップのプレビュー、右に文章と CTA。
   スマホ (1 列) では文章を先にしたいので、並べ替えは order で行う。 */
.dra-lp-cvband__inner {
  display: grid;
  grid-template-columns: 460px minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}
.dra-lp-cvband__inner > * { min-width: 0; }
.dra-lp-cvband__fig  { order: 1; }
.dra-lp-cvband__body { order: 2; }
.dra-lp-cvband .dra-lp-cta { margin-top: 22px; }
@media (max-width: 1000px) {
  .dra-lp-cvband__inner { grid-template-columns: 1fr; gap: 28px; }
  .dra-lp-cvband__body { order: 1; }
  .dra-lp-cvband__fig  { order: 2; }
}
@media (max-width: 720px) {
  .dra-lp-cvband { padding-top: 26px; padding-bottom: 26px; }
  /* スマホは 1 列なので、宛名・リード・3 項目・ボタンを中央に揃える */
  .dra-lp-cvband__body { text-align: center; }
  .dra-lp-cvband__body .dra-lp-points { justify-content: center; }
}
/* 宛先 (会社名 + 代表者) は、この帯の見出しとして大きく置く */
.dra-lp-cvband__to {
  margin: 0 0 12px;
  max-width: none;
  font-size: var(--dra-fs-xl);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .04em;
  color: var(--dra-text-strong);
  font-feature-settings: 'palt';
}
.dra-lp-cvband__lead {
  margin: 0;
  font-size: var(--dra-fs-md);
  line-height: 1.9;
  letter-spacing: .05em;
  color: var(--dra-text);
  font-feature-settings: 'palt';
}
@media (max-width: 720px) {
  .dra-lp-cvband__to { font-size: var(--dra-fs-lg); }
}

/* 申し込む前に確かめたい 3 点。チップ 1 つずつに区切って並べる。 */
.dra-lp-points {
  display: flex;
  flex-wrap: wrap;
  gap: 0 8px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.dra-lp-points > li {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px 7px 11px;
  border: 1px solid var(--dra-border);
  border-radius: var(--dra-radius-pill);
  background: var(--dra-bg);
  font-size: var(--dra-fs-sm);
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--dra-text);
}
.dra-lp-points .mat-icon {
  font-size: 17px;
  color: var(--dra-text-muted);
  font-variation-settings: 'opsz' 20, 'wght' 500;
}

/* ─── 画面下部に追従する CV ───
   スクロール位置によらず申込みへ進めるようにする。
   本文の末尾がバーに隠れないよう、body の下に同じ高さの余白を取る。 */
.dra-lp-sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--dra-z-fab);
  padding: 12px 16px;
  background: rgba(255, 255, 255, .94);
  border-top: 1px solid var(--dra-border);
  backdrop-filter: blur(6px);
}
.dra-lp-sticky__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 20px;
  max-width: 1100px;
  margin: 0 auto;
}
.dra-lp-sticky__note {
  margin: 0;
  max-width: none;
  font-size: var(--dra-fs-sm);
  letter-spacing: .04em;
  color: var(--dra-text-muted);
}
body.dramap-lp { padding-bottom: 84px; }

/* スマホは横幅が足りないので但し書きを畳み、ボタンを幅いっぱいにする */
@media (max-width: 720px) {
  .dra-lp-sticky { padding: 10px 14px; }
  .dra-lp-sticky__note { display: none; }
  .dra-lp-sticky .dra-lnk--primary {
    width: 100%;
    justify-content: center;
  }
  body.dramap-lp { padding-bottom: 72px; }
}

/* ─── 図解のキャプション ───
   図解の下に置く一言。図解は margin:auto で中央にあるので、箱ごと中央へ。 */
.dra-lp-figcap {
  margin: 10px auto 0;
  max-width: var(--dra-measure);
  text-align: center;
  /* 2 カラムでは列が狭く、末尾に 1 文字だけ残りやすい。行の長さを揃える */
  text-wrap: balance;
  font-size: var(--dra-fs-sm);
  letter-spacing: .04em;
  color: var(--dra-text-muted);
}

/* ─── 05 サンプルマップ : タブ切り替え ───
   図解は公式サイトのメインビジュアルと同じもの (原寸 520px)。
   JS を使わず、先頭に置いたラジオボタンの :checked で表示を切り替える。
   ラジオは見えないが、キーボードの矢印キーでタブを移動できる。 */
/* タブの入れ物は 2 カラムそのもの。ラジオを 2 カラムの直下に置き、
   名前のボタン (文章側の一番下) と パネル (図解側) の両方を後ろの兄弟にする。
   ラジオは絶対配置なので、段組みのマスは取らない。 */
.dra-lp-tabs { position: relative; }
.dra-lp-tabs__radio {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.dra-lp-tabs__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 26px;
}
.dra-lp-tab {
  border: 1px solid var(--dra-border-strong);
  border-radius: var(--dra-radius-pill);
  padding: 8px 18px;
  background: var(--dra-bg);
  color: var(--dra-text-subtle);
  font-size: var(--dra-fs-base);
  line-height: 1;
  cursor: pointer;
}
.dra-lp-panel {
  /* 既定は非表示。選ばれた 1 枚だけ下の :checked で表示する */
  display: none;
  grid-template-columns: 520px minmax(0, 1fr);
  gap: 36px;
  align-items: center;
}
.dra-lp-panel > * { min-width: 0; }
/* 2 カラムの図解側に入るときは、パネルの中も 1 列に積む
   (マップの原寸が 520px = 列の幅ちょうどのため) */
.dra-lp-split__fig .dra-lp-panel {
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}
.dra-lp-panel__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
}

/* 選択中のタブと、その中身。タブは最大 6 件まで面倒を見る。 */
.dra-lp-tabs__radio:nth-of-type(1):checked ~ * .dra-lp-tabs__list > .dra-lp-tab:nth-child(1),
.dra-lp-tabs__radio:nth-of-type(2):checked ~ * .dra-lp-tabs__list > .dra-lp-tab:nth-child(2),
.dra-lp-tabs__radio:nth-of-type(3):checked ~ * .dra-lp-tabs__list > .dra-lp-tab:nth-child(3),
.dra-lp-tabs__radio:nth-of-type(4):checked ~ * .dra-lp-tabs__list > .dra-lp-tab:nth-child(4),
.dra-lp-tabs__radio:nth-of-type(5):checked ~ * .dra-lp-tabs__list > .dra-lp-tab:nth-child(5),
.dra-lp-tabs__radio:nth-of-type(6):checked ~ * .dra-lp-tabs__list > .dra-lp-tab:nth-child(6) {
  border-color: var(--dra-text);
  background: var(--dra-text);
  color: var(--dra-text-inverse);
}
.dra-lp-tabs__radio:nth-of-type(1):checked ~ * .dra-lp-tabs__panels > .dra-lp-panel:nth-child(1),
.dra-lp-tabs__radio:nth-of-type(2):checked ~ * .dra-lp-tabs__panels > .dra-lp-panel:nth-child(2),
.dra-lp-tabs__radio:nth-of-type(3):checked ~ * .dra-lp-tabs__panels > .dra-lp-panel:nth-child(3),
.dra-lp-tabs__radio:nth-of-type(4):checked ~ * .dra-lp-tabs__panels > .dra-lp-panel:nth-child(4),
.dra-lp-tabs__radio:nth-of-type(5):checked ~ * .dra-lp-tabs__panels > .dra-lp-panel:nth-child(5),
.dra-lp-tabs__radio:nth-of-type(6):checked ~ * .dra-lp-tabs__panels > .dra-lp-panel:nth-child(6) {
  display: grid;
}
/* ラジオは見えないので、キーボード操作の位置がタブ側に出るようにする */
.dra-lp-tabs__radio:nth-of-type(1):focus-visible ~ * .dra-lp-tabs__list > .dra-lp-tab:nth-child(1),
.dra-lp-tabs__radio:nth-of-type(2):focus-visible ~ * .dra-lp-tabs__list > .dra-lp-tab:nth-child(2),
.dra-lp-tabs__radio:nth-of-type(3):focus-visible ~ * .dra-lp-tabs__list > .dra-lp-tab:nth-child(3),
.dra-lp-tabs__radio:nth-of-type(4):focus-visible ~ * .dra-lp-tabs__list > .dra-lp-tab:nth-child(4),
.dra-lp-tabs__radio:nth-of-type(5):focus-visible ~ * .dra-lp-tabs__list > .dra-lp-tab:nth-child(5),
.dra-lp-tabs__radio:nth-of-type(6):focus-visible ~ * .dra-lp-tabs__list > .dra-lp-tab:nth-child(6) {
  outline: 2px solid var(--dra-focus-ring);
  outline-offset: 2px;
}

/* 図解 (520px) と説明が窮屈になる前に 1 列へ。MV と同じ折り返し幅にする。 */
@media (max-width: 1000px) {
  .dra-lp-tabs__radio:nth-of-type(1):checked ~ * .dra-lp-tabs__panels > .dra-lp-panel:nth-child(1),
  .dra-lp-tabs__radio:nth-of-type(2):checked ~ * .dra-lp-tabs__panels > .dra-lp-panel:nth-child(2),
  .dra-lp-tabs__radio:nth-of-type(3):checked ~ * .dra-lp-tabs__panels > .dra-lp-panel:nth-child(3),
  .dra-lp-tabs__radio:nth-of-type(4):checked ~ * .dra-lp-tabs__panels > .dra-lp-panel:nth-child(4),
  .dra-lp-tabs__radio:nth-of-type(5):checked ~ * .dra-lp-tabs__panels > .dra-lp-panel:nth-child(5),
  .dra-lp-tabs__radio:nth-of-type(6):checked ~ * .dra-lp-tabs__panels > .dra-lp-panel:nth-child(6) {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* ─── 01 人間関係 : 逆三角形の図解 ───
   左上 = お金 / 右上 = 健康 / 下中央 = 人間関係。中心に図解全体の意味を置く。
   ここはまだ仕組みを説明する回ではないので、関係の種類も段も出さない。
   3 つを結ぶ線は灰色の点線。DRAMAP の関係ラインと読み違えられないよう、
   実線でも矢印つきでもなく、あくまで配置を示す補助線にとどめる。

   アイコンと見出しは円の中。円の外に置くのは一言だけで、
   上の 2 つはそれを円の上へ出す (column-reverse)。逆三角形の内側を空けて、
   中心の文が入る場所を作るため。

   節点の位置は % なので、枠が伸び縮みしても三角形の形が変わらない。 */
.dra-lp-tri {
  position: relative;
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
  /* 上 2 つの一言が円の下に付くぶん、縦を少し伸ばす */
  aspect-ratio: 500 / 475;
}
/* 補助線は枠いっぱいに広げる。置換要素なので inset:0 だけでは伸びず、
   幅と高さを CSS で明示する (属性で持たせると 300×150 のままになる)。
   線は円の背景に隠れるので、円の中心どうしを結んで構わない。
   線の座標は属性でしか書けず CSS で上書きできないため、左右の広さが変わる
   スマホ用を別の svg として持ち、幅で表示を切り替える。 */
.dra-lp-tri__guide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.dra-lp-tri__guide line {
  stroke: #e7e7e7;
  stroke-width: 2;
  stroke-dasharray: 2 6;
  stroke-linecap: round;
}
.dra-lp-tri__guide--n { display: none; }

/* 3 つの節点。大きさも線の太さも色も揃える (色分けはしない)。
   一言は 3 つとも円の下 (加藤さん指示 2026-09-05)。 */
.dra-lp-tri__node {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  /* 一言が 1 行で収まる幅 */
  width: 150px;
  /* 円の中心が指定した点に来るように、円の半径ぶん戻す */
  transform: translate(-50%, -50px);
  text-align: center;
}
.dra-lp-tri__node--a { left: 11%; top: 17%; }
.dra-lp-tri__node--b { left: 89%; top: 17%; }
.dra-lp-tri__node--c { left: 50%; top: 75%; }

/* アイコンと見出しをまとめて入れる円 */
.dra-lp-tri__circle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 2px solid var(--dra-text);
  background: var(--dra-bg);
}
.dra-lp-tri__circle .mat-icon {
  font-size: 40px;
  color: var(--dra-text);
  font-variation-settings: 'opsz' 48, 'wght' 300;
}
.dra-lp-tri__name {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--dra-text-strong);
}
/* 一言を円の下に置くと、上 2 つは三角形の内側に入るのでガイド線と重なる。
   円と同じように背景で線を隠す (この図解は 01 の帯 = --dra-bg-alt の上にある)。 */
.dra-lp-tri__note {
  position: relative;
  padding: 0 4px;
  background: var(--dra-bg-alt);
  font-size: 14px;
  letter-spacing: .02em;
  line-height: 1.5;
  color: var(--dra-text-strong);
}

/* 逆三角形の中心。図解全体の意味をまとめる要素なので、注記より一段強くする。
   上下の中央 (17% と 75% の中間 = 46%) に置くと、三角形が下すぼまりのぶん
   低く見えるので、そこから上げた 39% を図解の中央として扱う (加藤さん指示)。
   左右の一言と高さが重なり、文字も近づく。三角形の幅は広げない方針なので
   (加藤さん指示 2026-09-05)、一言の背景で線を隠しつつ重ね順を上にして、
   中央の文が背景に欠けないようにしている。 */
.dra-lp-tri .dra-lp-tri__center {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 39%;
  transform: translate(-50%, -50%);
  margin: 0;
  width: 220px;
  max-width: none;
  text-align: center;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: .04em;
  color: var(--dra-text-strong);
  font-feature-settings: 'palt';
}
/* 「3 つの領域」だけ一回り大きくして、図解の主題として読ませる */
.dra-lp-tri__center-em {
  display: inline-block;
  font-size: 1.2em;
}

@media (max-width: 560px) {
  /* スマホは横幅が足りず、一言を円の下に置くと中央の文と並んでしまう。
     上 2 つだけ一言を円の上へ出し (加藤さん指示 2026-09-06)、
     逆三角形の内側を中央の文のために空ける。枠は正方形でよい。 */
  .dra-lp-tri { max-width: 300px; aspect-ratio: 500 / 500; }
  .dra-lp-tri__guide--w { display: none; }
  .dra-lp-tri__guide--n { display: block; }
  .dra-lp-tri__node--a { left: 15%; top: 28%; }
  .dra-lp-tri__node--b { left: 85%; top: 28%; }
  .dra-lp-tri__node--c { top: 74%; }
  /* 一言を円の上へ。円の下端が指定した点の +50px に来る */
  .dra-lp-tri__node--a,
  .dra-lp-tri__node--b {
    flex-direction: column-reverse;
    transform: translate(-50%, calc(-100% + 50px));
  }
  /* 一言 (最長 9 文字 × 14px) が 1 行で収まる幅 */
  .dra-lp-tri__node { width: 140px; }
  .dra-lp-tri__circle .mat-icon { font-size: 32px; }
  .dra-lp-tri__name { font-size: 15px; }
  /* 上下の中央 (28% と 74% の中間 = 51%) より上に置き、行間も詰める */
  .dra-lp-tri .dra-lp-tri__center {
    top: 46%;
    width: 200px;
    font-size: 20px;
    line-height: 1.2;
  }
}

@media (max-width: 360px) {
  /* 最小幅では円と一言が画面からはみ出すので、まとめて一段小さくする。
     一言が 2 行に折り返すぶん、枠だけ少し縦に伸ばす */
  .dra-lp-tri { aspect-ratio: 500 / 560; }
  .dra-lp-tri__node { width: 116px; transform: translate(-50%, -44px); }
  .dra-lp-tri__node--a,
  .dra-lp-tri__node--b { transform: translate(-50%, calc(-100% + 44px)); }
  .dra-lp-tri__circle { width: 88px; height: 88px; }
  .dra-lp-tri__circle .mat-icon { font-size: 28px; }
}



/* ─── 02 判断材料 : 何を見るための材料か ───
   経営・健康・人間関係を同じ形のカードで横に並べ、
   「何で見るか」(中央) と「何を見るか」(下) を揃えて読ませる。
   人間関係だけ枠を強め、手段の名前をロゴの書体で置く。 */
/* PC は 3 枚をトランプの手札のように少し重ねて扇状に置く。
   奥から順に 経営 → 健康 → DRAMAP。右へ行くほど手前に来る (加藤さん指示)。
   回転の軸を下端にすると、カードの下側が揃って手に持った形に見える。 */
.dra-lp-src {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  /* 回転ではみ出す角のぶんを上下に確保する */
  padding: 14px 0 6px;
}
/* 傾きが強いと、回転したカードの文字がにじんで見える。
   手札に見える範囲でできるだけ浅くする (加藤さん指示 2026-09-05)。

   並びは 経営 → DRAMAP → 健康。DRAMAP を真ん中・最前面に置く (加藤さん指示)。
   文章は「経営 → 健康 → 人間関係」の順で読ませたいので、HTML の並びは変えず
   order で入れ替える。左端以外の 2 枚に付く重なり (margin-left) は、
   入れ替えても「左端以外の 2 枚」に付いたままなので、そのまま成立する。 */
.dra-lp-src__card + .dra-lp-src__card { margin-left: -30px; }
.dra-lp-src__card:nth-child(1) { order: 1; transform: rotate(-4deg); z-index: 1; }
.dra-lp-src__card:nth-child(2) { order: 3; transform: rotate(4deg); z-index: 2; }
.dra-lp-src__card:nth-child(3) { order: 2; transform: translateY(-16px); z-index: 3; }
/* 3 枚とも縦長のカードとして見せる。カードの高さは列幅 (520px の 1/3 ≒ 165px)
   より縦に長くなる値にする。ラベルを上端・説明を下端に置くと、
   読みを 1 行足した DRAMAP のカードとも行の高さが揃う。 */
.dra-lp-src__card {
  position: relative;
  flex: none;
  width: 170px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  min-height: 240px;
  padding: 24px 12px;
  border: 1px solid var(--dra-border);
  border-radius: var(--dra-radius-lg);
  /* 重なるので必ず不透明。影で前後の順を示す */
  background: var(--dra-bg);
  box-shadow: var(--dra-shadow-sm);
  transform-origin: bottom center;
  text-align: center;
}
/* このセクションの答えになる 1 枚。枠と地色と影で、視線を最後にここへ集める */
.dra-lp-src__card--on {
  border-color: var(--dra-text);
  background: var(--dra-bg-alt);
  box-shadow: var(--dra-shadow-md);
}
.dra-lp-src__label {
  margin: 0;
  font-size: var(--dra-fs-xs);
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--dra-text-muted);
}
/* アイコンはラベルと手段の名前のあいだ。図としての主張を持たせるため大きめ */
.dra-lp-src__icon {
  display: block;
  margin-top: 10px;
  font-size: 40px;
  line-height: 1;
  color: var(--dra-text);
  font-variation-settings: 'opsz' 48, 'wght' 300;
}
.dra-lp-src__mid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-top: 8px;
}
.dra-lp-src__items {
  font-size: var(--dra-fs-md);
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--dra-text-strong);
}
.dra-lp-src .dra-lp-src__msg {
  margin: 10px 0 0;
  max-width: none;
  font-size: var(--dra-fs-sm);
  letter-spacing: .04em;
  color: var(--dra-text-muted);
}
/* スマホは 3 列だと 1 枚が 100px ほどになり、手段の名前が折り返す。
   1 列に戻して、上から順に読ませる。 */
/* スマホも手札のまま (加藤さん指示)。手前の DRAMAP が読めればよいので、
   1 枚を小さくし、重ねる幅を広げて 3 枚を画面幅に収める。 */
@media (max-width: 560px) {
  /* スマホは左右の余白を使わず、画面の端まで手札を広げる (加藤さん指示 2026-09-06)。
     帯の左右 14px を打ち消し、はみ出した両端のカードはここで切る
     (真ん中の DRAMAP が読めればよい)。画面ごと横に伸びないよう clip する。 */
  .dra-lp-src {
    margin-left: -14px;
    margin-right: -14px;
    padding: 12px 0 4px;
    overflow-x: clip;
  }
  .dra-lp-src__card {
    width: 140px;
    min-height: 200px;
    padding: 18px 8px;
  }
  /* 重ねる幅はカードの内側の余白ぶんだけ。
     これ以上重ねると、奥のカードの説明が途中で隠れて読めなくなる */
  .dra-lp-src__card + .dra-lp-src__card { margin-left: -16px; }
  .dra-lp-src__label { font-size: 11px; }
  .dra-lp-src__icon { font-size: 32px; }
  .dra-lp-src__items { font-size: 15px; }
  .dra-lp-src .dra-lp-src__msg { font-size: 11px; }
}

/* 本文中の DRAMAP を、ヘッダーのロゴと同じ書体で置く */
.dra-lp-wordmark {
  font-family: var(--dra-font-serif);
  font-weight: 600;
  letter-spacing: .04em;
}

/* ─── 03 人選 : 相手ごとの比較 ───
   公式サイト TOP の「01 / 考え方」と同じ 2 枚組。同じ「あなた」に部下を
   入れ替えて置く。1 枚 240px なので 2 カラムの図解側 (520px) に収まり、
   スマホでは 1 列に積むので横スクロールにはならない。 */
.dra-lp-cmp {
  display: grid;
  grid-template-columns: repeat(2, auto);
  justify-content: center;
  gap: 20px;
}
.dra-lp-cmp .dra-blk-131 { margin-bottom: 6px; }
/* 図解の下の一言。読み幅で折り返さず、図解の幅に合わせる */
.dra-lp-cmp .dra-txt-30 {
  margin: 10px 0 0;
  max-width: none;
}
@media (max-width: 560px) {
  .dra-lp-cmp { grid-template-columns: minmax(0, auto); }
}

/* ─── 05 活用シーン : マップと説明のあいだのカテゴリ名 ─── */
.dra-lp-scene-name {
  margin: 14px 0 0;
}
.dra-lp-scene-name + .dra-lp-figcap { margin-top: 4px; }

/* ─── 06 先行案内 : 利用手順 (図解側) ───
   pages.css の工程ブロックは横並び。2 カラムの図解側は 520px しかないので、
   1 列に積んで矢印を下向きにする (スマホでの見え方と同じ形)。 */
.dra-lp-steps {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  /* 外側の枠は外し、1 ステップずつを箱にして区切る */
  padding: 0;
  border: 0;
  background: none;
}
/* 番号と見出しを同じ行に。説明はその下に全幅で置く */
.dra-lp-steps .dra-blk-2 {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  column-gap: 10px;
  padding: 16px 18px;
  border: 1px solid var(--dra-border);
  border-radius: var(--dra-radius-lg);
  background: var(--dra-bg-alt);
}
/* 番号は見出しと同じ大きさ。行頭に「STEP」を付けた表記にする */
.dra-lp-steps .dra-blk-3 {
  font-size: 16px;
  letter-spacing: .08em;
}
.dra-lp-steps .dra-blk-5 { grid-column: 1 / -1; }
.dra-lp-steps .dra-blk-6 {
  align-self: center;
  transform: rotate(90deg);
}

/* ─── 06 先行案内 : 本文 + 宛先カード ───
   宛先カードは URL パラメータが揃っているときだけ出る。 */
.dra-lp-for {
  padding: 26px 24px;
  background: var(--dra-bg);
  border: 1px solid var(--dra-border);
  border-radius: var(--dra-radius-lg);
}
.dra-lp-for__name {
  margin-top: 6px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--dra-border);
  font-size: var(--dra-fs-lg);
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--dra-text);
}
.dra-lp-for__row {
  display: flex;
  gap: 12px;
  margin-top: 12px;
  font-size: var(--dra-fs-sm);
  line-height: 1.7;
  color: var(--dra-text);
  /* 会社名やドメインが長くても枠を割らない */
  overflow-wrap: anywhere;
}
.dra-lp-for__row > :first-child {
  flex: none;
  width: 64px;
  color: var(--dra-text-muted);
}
.dra-lp-for__note {
  margin: 16px 0 0;
  max-width: none;
  font-size: var(--dra-fs-xs);
  line-height: 1.7;
  color: var(--dra-text-muted);
}

/* 宛先カードの下に置く、届くマップのプレビュー */
.dra-lp-split__fig .dra-lp-for + .dra-fig { margin-top: 20px; }