@charset "UTF-8";
/* ============================================================================
   PlusOnePoint Design System — Layout primitives
   ----------------------------------------------------------------------------
   セクションの「密度」と「地色」を属性で切り替えられるようにするのが目的。
   旧デザインは全セクションが padding: 6rem 2rem の一定リズムで、
   それがページ全体を単調に見せていた。

   使い方:
     <section class="ds-section" data-density="tight">
     <section class="ds-section ds-section--inverse" data-density="loose">
   ========================================================================= */

/* ---------------------------------------------------------------------------
   1. セクション
   -------------------------------------------------------------------------- */
.ds-section {
  --pad: var(--section-pad);
  position: relative;
  padding-block: var(--pad);
  background: var(--surface);
  color: var(--ink);
}

.ds-section[data-density="tight"] {
  --pad: var(--section-pad-tight);
}
.ds-section[data-density="normal"] {
  --pad: var(--section-pad);
}
.ds-section[data-density="loose"] {
  --pad: var(--section-pad-loose);
}

/* 地色のバリエーション — 白一色で最後まで進む単調さを断ち切る */
.ds-section--sunken {
  background: var(--surface-sunken);
}
.ds-section--quiet {
  background: var(--surface-quiet);
}

.ds-section--inverse {
  background: var(--surface-inverse);
  color: var(--ink-inverse);
}
.ds-section--inverse .ds-title,
.ds-section--inverse .ds-subtitle {
  /* .ds-subtitle の既定色は --ink-strong（navy-700）。
     紺地の上ではほぼ同色になり、鬼100則の書名が沈んでいた。 */
  color: var(--ink-inverse);
}
.ds-section--inverse .ds-lede,
.ds-section--inverse .ds-prose {
  color: var(--ink-inverse-muted);
}
.ds-section--inverse .ds-eyebrow {
  color: var(--sky-300);
}
.ds-section--inverse .ds-eyebrow::before {
  background: var(--sky-400);
}

/* 紺地セクションの上下に柔らかい境界を作る */
.ds-section--inverse::before,
.ds-section--inverse::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.14),
    transparent
  );
}
.ds-section--inverse::before {
  top: 0;
}
.ds-section--inverse::after {
  bottom: 0;
}

/* 折り返し以降の描画コストを下げる。特に縦に長い料金ページで効く。
   contain-intrinsic-size でスクロールバーの跳ねを防ぐ。 */
.ds-section[data-defer] {
  content-visibility: auto;
  contain-intrinsic-size: auto 640px;
}

/* ---------------------------------------------------------------------------
   2. コンテナ — 名前付きグリッドラインでフルブリードを許可する
   ラッパーdivを増やさずに、カード列や画像だけを画面幅いっぱいに出せる。
   -------------------------------------------------------------------------- */
.ds-container {
  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--gutter), 1fr)
    [content-start] min(var(--content-max), 100% - var(--gutter) * 2)
    [content-end] minmax(var(--gutter), 1fr)
    [full-end];
}

.ds-container > * {
  grid-column: content;
}

.ds-container > .ds-bleed {
  grid-column: full;
}

/* 内容を狭いカラムに絞る（読み物パート用） */
.ds-container--narrow {
  --content-max: var(--content-narrow);
}

/* ---------------------------------------------------------------------------
   3. セクションヘッダー
   中央寄せ一辺倒をやめ、split（左に見出し・右に補足）を交互に使う。
   -------------------------------------------------------------------------- */
.ds-header {
  margin-bottom: var(--space-8);
}

.ds-header--center {
  text-align: center;
  margin-inline: auto;
  max-width: var(--measure);
}

.ds-header--split {
  display: grid;
  gap: var(--space-4) var(--space-9);
  align-items: end;
  grid-template-columns: 1fr;
}

@media (min-width: 62rem) {
  .ds-header--split {
    /* 補足文の欄はやや狭めに。欄を広く取ると1行が長くなり、
       文字を小さくしても「文章の塊」としての主張が残る。 */
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  }
  /* 補足文を視覚的に独立させる罫線。
     色は薄めに。ここを濃くするとリードの塊がさらに主張してしまう。 */
  .ds-header--split .ds-header__aside {
    padding-bottom: 0.35em;
    padding-left: var(--space-5);
    border-left: 1px solid var(--line);
  }
  .ds-section--inverse .ds-header--split .ds-header__aside {
    border-left-color: rgba(255, 255, 255, 0.2);
  }
}

/* 見出し横の補足文。
   .ds-lede（デック）と同じ役割に見えるが、見出しと "横並び" になる時点で
   要求が変わる。縦積みのデックは見出しの下で読まれるが、横並びの補足文は
   見出しと同時に視界へ入るため、サイズがそのままだと見出しと張り合う。
   サイズを注釈の階層まで落とし、行間を詰めて塊の高さも削る。
   色（--navy-500）は AA を満たす最も薄い紺なのでここは動かさない。 */
.ds-header__aside .ds-lede {
  font-size: var(--fs-aside);
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0.015em;
  max-width: 26em;
  margin-top: 0;
  /* 日本語を文節単位で折り返す。「月額サブス／クリプション」のような
     語中の分断を防ぐ。未対応ブラウザでは従来どおり（縮退のみ）。 */
  word-break: auto-phrase;
}

/* アイブロウ（旧 .section-label のピル形状を廃止）
   section-common.css の .section-label は !important を含み他ページでも
   使われているため、そちらには触れず新クラスとして定義する。 */
.ds-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--sky-700);
  margin-bottom: var(--space-3);
}

.ds-eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 2px;
  border-radius: 2px;
  background: var(--sky-500);
}

.ds-header--center .ds-eyebrow {
  justify-content: center;
}

/* 見出し */
.ds-title {
  font-size: var(--fs-h2);
  font-weight: 800;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--ink-strong);
  text-wrap: balance;
  margin: 0;
}

.ds-title--display {
  font-size: var(--fs-display);
}

.ds-subtitle {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: var(--lh-snug);
  color: var(--ink-strong);
  text-wrap: balance;
  margin: 0;
}

/* リード文・本文 */
/* リード文の序列は「見出し ＞ リード ＞ 本文」。
   本文からは "サイズ" で離し、見出しには "色と太さ" で譲る。
   ここで色を紺・太さを600にすると、見出しが短い場合に
   文字量の質量差でリードのほうが目立ってしまう。
   強調したい語句がある場合は .ds-mark を使うこと。 */
.ds-lede {
  font-size: var(--fs-lede);
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.01em;
  color: var(--navy-500);
  max-width: var(--measure);
  text-wrap: pretty;
  margin: var(--space-4) 0 0;
}

.ds-section--inverse .ds-lede {
  color: var(--ink-inverse-muted);
}

/* 折り返し位置の制御。
   日本語は語中どこでも折れるため、意味の切れ目でしか折りたくない箇所は
   断片ごとに囲って nowrap をかける（＝断片の境目だけが改行候補になる）。
   囲う断片は必ず短く保つこと。欄幅を超える断片に付けると溢れる。 */
.ds-nb {
  white-space: nowrap;
}

/* 語句の強調。
   蛍光ペン風の下線は安価に見えるため使わない。
   同じ青系の中で「濃さと太さ」だけを変えて階層をつくる。 */
.ds-mark {
  color: var(--ink-strong);
  font-weight: 700;
}

.ds-section--inverse .ds-mark {
  color: #ffffff;
}

/* 操作のヒントなど、見出しにしたくない補助テキスト */
.ds-note {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin: var(--space-4) 0 0;
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--ink-subtle);
}

.ds-section--inverse .ds-note {
  color: var(--ink-inverse-subtle);
}

.ds-header--center .ds-lede {
  margin-inline: auto;
}

.ds-prose {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-muted);
  max-width: var(--measure);
  text-wrap: pretty;
}

.ds-prose > p + p {
  margin-top: var(--space-5);
}

/* ---------------------------------------------------------------------------
   4. 要点リスト（AI・検索エンジンに拾わせるための定義リスト）
   抽出型のモデルは散文より定義リストや表を遥かに確実に引用する。
   同時に「重要な事実が長い段落に埋もれる」という読みやすさの問題も解消する。
   -------------------------------------------------------------------------- */
.ds-facts {
  display: grid;
  gap: 1px;
  margin: var(--space-7) 0 0;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  grid-template-columns: 1fr;
}

@media (min-width: 40rem) {
  .ds-facts--cols {
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  }
  /* 値が長い項目は全幅に流す。
     狭い升目に押し込むと「達成率100%（W6.5 → 平／均7.25）」のように
     数値の途中で改行され、事実そのものが読み取れなくなる。 */
  .ds-facts__item--wide {
    grid-column: 1 / -1;
  }
}

.ds-facts__item {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: var(--space-4) var(--space-5);
  background: var(--surface);
}

.ds-facts dt {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ink-subtle);
}

/* 出典・詳細記事へのリンクを持つ dt。
   ラベルは左、リンクは右端に置く。行の高さは dt のまま変えない
   （マスの中に「見出し行」が2本あるように見えてしまうため）。
   狭い画面では折り返して2行になるので、リンク側は左端に揃う。 */
.ds-facts__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  flex-wrap: wrap;
}

/* 事実の値そのものではなく「裏付けはここにある」という補助動線。
   dt と同じ級数に留め、色だけでリンクだと分からせる。
   下線は常時ではなく hover/focus で出す（dt 行に線が増えると罫線と干渉する）。 */
.ds-facts__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  flex-shrink: 0;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--sky-700);
  text-decoration: none;
}

.ds-facts__link:hover,
.ds-facts__link:focus-visible {
  color: var(--sky-800);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.ds-facts__link-icon {
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* ベースライン揃えだと箱の下辺が文字の下に落ちるので、視覚的中心に上げる。 */
  transform: translateY(0.05em);
}

.ds-section--inverse .ds-facts__link {
  color: var(--sky-300);
}
.ds-section--inverse .ds-facts__link:hover,
.ds-section--inverse .ds-facts__link:focus-visible {
  color: #ffffff;
}

.ds-facts dd {
  margin: 0;
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.6;
  color: var(--ink-strong);
  word-break: auto-phrase;
}

/* 値に添える内訳（スコアの推移など）。
   主値より一段落とし、かつ内訳そのものは絶対に折らない。
   nowrap の対象は必ず短い断片に限ること（長い文字列に付けると溢れる）。 */
.ds-facts__sub {
  margin-left: 0.9em;
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--ink-subtle);
  white-space: nowrap;
}

/* 主値に付く但し書き（母数など）。
   主値と同じ大きさだと「達成率100%」の断定を薄めてしまうので一段落とす。
   短い断片なので nowrap で括弧ごと守る。 */
.ds-facts__qual {
  margin-left: 0.3em;
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--ink-subtle);
  white-space: nowrap;
}

.ds-section--inverse .ds-facts__qual {
  color: var(--ink-inverse-subtle);
}

/* 到達点の数字だけをピンポイントで立てる。
   桃（#eb4878 → #d82d60 → #b41f4c）を3段試したが、沈めても「きつい」まま。
   原因は明度ではなく彩度の高い色相そのもので、紺一色の面の中では
   どの明度でも「警告」として浮いてしまう。
   → 色を足すのをやめ、DS の原則どおり同じ紺の中で階層をつくる。
   周囲（"平均" は --ink-subtle、主値は 600）に対して
   級数 1.4倍・ウエイト800 なので、色が無くてもこの行の頂点になる。 */
.ds-facts__peak {
  margin-left: 0.25em;
  font-size: 1.4em;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink-strong);
}

.ds-section--inverse .ds-facts__sub {
  color: var(--ink-inverse-subtle);
}
.ds-section--inverse .ds-facts__peak {
  color: #ffffff;
}

.ds-section--inverse .ds-facts {
  background: var(--line-inverse);
  border-color: var(--line-inverse);
}
.ds-section--inverse .ds-facts__item {
  background: rgba(255, 255, 255, 0.04);
}
.ds-section--inverse .ds-facts dt {
  color: var(--ink-inverse-subtle);
}
.ds-section--inverse .ds-facts dd {
  color: var(--ink-inverse);
}

/* ---------------------------------------------------------------------------
   5. 横スクロールのレール（合格者の声など）
   scroll-snap でネイティブな挙動にし、JS側の実装を減らす。
   -------------------------------------------------------------------------- */
.ds-rail {
  display: flex;
  gap: var(--space-5);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  padding-inline: var(--gutter);
  padding-block: var(--space-2) var(--space-5);
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.ds-rail > * {
  scroll-snap-align: start;
  flex: 0 0 min(23rem, 82vw);
}

.ds-rail::-webkit-scrollbar {
  height: 6px;
}
.ds-rail::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: var(--r-pill);
}
.ds-section--inverse .ds-rail::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.28);
}

/* ---------------------------------------------------------------------------
   6. カードのグリッド（コンテナクエリで中身が自律的に組み替わる）
   -------------------------------------------------------------------------- */
.ds-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
}

.ds-grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(min(26rem, 100%), 1fr));
}

.ds-card {
  container-type: inline-size;
  position: relative;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  transition: box-shadow var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
}

.ds-card:hover {
  box-shadow: var(--shadow-3);
  border-color: var(--sky-200);
  transform: translateY(-3px);
}

.ds-section--inverse .ds-card {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--line-inverse);
  box-shadow: none;
}
.ds-section--inverse .ds-card:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.28);
}

/* ---------------------------------------------------------------------------
   7. 区切り
   -------------------------------------------------------------------------- */
.ds-divider {
  border: 0;
  height: 1px;
  background: var(--line);
  margin-block: var(--space-8);
}

/* ---------------------------------------------------------------------------
   8. 登場アニメーション（スクロール駆動・ネイティブ）
   既定では表示済みの状態。対応ブラウザでのみアニメーションを付与するため、
   JSが動かない環境やSafariでも内容が消えることはない。
   -------------------------------------------------------------------------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* transform ではなく translate を使う。
       animation-fill-mode: both で最終キーフレームが残り続けるため、
       transform を使うと .ds-card:hover の translateY が打ち消されてしまう。
       translate は transform とは別プロパティなので競合しない。 */
    @keyframes ds-rise {
      from {
        opacity: 0;
        translate: 0 1.75rem;
      }
      to {
        opacity: 1;
        translate: 0 0;
      }
    }

    .ds-rise {
      animation: ds-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 42%;
    }
  }
}

/* ---------------------------------------------------------------------------
   9. ページ遷移（トップ → 料金ページ）
   @view-transition はトップレベルにのみ書ける（@media の中では無視される）。
   モーション低減は ::view-transition-group 側で打ち消す。
   -------------------------------------------------------------------------- */
@view-transition {
  navigation: auto;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

/* ---------------------------------------------------------------------------
   10. ユーティリティ
   -------------------------------------------------------------------------- */
.ds-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.ds-stack > * + * {
  margin-top: var(--flow, var(--space-5));
}

.ds-center {
  text-align: center;
}

/* CTAの並び */
.ds-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
}

.ds-actions--center {
  justify-content: center;
}

.ds-actions--section {
  margin-top: var(--space-8);
}