@charset "utf-8";
/* =============================================================================
   pages-v2.css — 下層ページ ブラッシュアップ案（v2）のデザインシステム
   -----------------------------------------------------------------------------
   既存の blocks.css / concept-d.css / pages.css / refine.css / concept-ef.css は
   一切変更しない。v2ページはこのファイルを最後に読み込んで上書きする。

   狙い：「説明サイト」から「ブランドサイト」へ。
   情報量を増やさず、余白・写真・文字量・優先順位だけを設計し直す。

   現行5ページの実測（PC1280）で見つかった問題と、それに対する決定：
     ・本文が 17px / 18.5px / 20px とページごとに違う  → 1.7rem に統一
     ・1行が最大90文字（日本語の可読上限は35〜45文字）  → 30em（約34文字）に統一
     ・セクション余白が3〜5種類混在                    → 2種類だけにする
     ・セクションが7〜10個あり「全部説明してある」状態  → 各ページ4〜6個へ削る
     ・写真の高さが55px〜720pxまでバラバラ            → 3つの比率だけに固定
   ========================================================================== */

/* =============================================================================
   1. v2のトークン
   色・書体は既存のまま。増やすのは「間隔」と「比率」の目盛りだけ
   ========================================================================== */
.v2 {
  /* 余白の目盛り（2種類だけ） */
  --v2-block: 160px;      /* 通常のセクション */
  --v2-block-tight: 96px; /* 続きもの・関連の強いセクション */

  /* 本文の幅（1行あたりの文字数を決める唯一の値） */
  --v2-measure: 30em;         /* 約34文字。読み物としての基準 */
  --v2-measure-lead: 24em;    /* リード文はさらに短く */

  /* 版面 */
  --v2-page: 1120px;
  --v2-page-narrow: 840px;

  /* 写真の比率（3つだけ） */
  --v2-ar-wide: 16 / 7;   /* 全幅の情景 */
  --v2-ar-std: 4 / 3;     /* 標準 */
  --v2-ar-port: 3 / 4;    /* 人物 */
}

/* =============================================================================
   2. 版面と余白
   ========================================================================== */
.v2-sec {
  padding-block: var(--v2-block);
  background-color: var(--white);
}
.v2-sec--tight { padding-block: var(--v2-block-tight); }
.v2-sec--cream { background-color: var(--cream); }
.v2-sec--navy { background-color: var(--navy); color: var(--white); }
.v2-sec--flush { padding-block: 0; }

/* 同じ背景が続くときは境目の余白を詰める。背景が変わるところだけ大きく空ける */
.v2-sec--cream + .v2-sec--cream,
.v2-sec:not(.v2-sec--cream):not(.v2-sec--navy) + .v2-sec:not(.v2-sec--cream):not(.v2-sec--navy) {
  padding-top: 0;
}

.v2-inner {
  max-width: var(--v2-page);
  margin-inline: auto;
  padding-inline: 32px;
}
.v2-inner--narrow { max-width: var(--v2-page-narrow); }

/* =============================================================================
   3. タイポグラフィ
   見出しと本文の差を、サイズではなく「余白と行間」で作る
   ========================================================================== */
.v2 :where(p, li, dd) {
  word-break: auto-phrase;
  text-wrap: pretty;
}

.v2-eyebrow {
  display: block;
  margin: 0 0 20px;
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--coral);
}
.v2-sec--navy .v2-eyebrow { color: #ffc9c3; }

.v2-h2 {
  max-width: 18em;
  margin: 0 0 40px;
  font-family: var(--font-heading);
  font-size: clamp(2.8rem, 3.4vw, 4rem);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .01em;
  color: var(--navy);
  word-break: auto-phrase;
  text-wrap: balance;
}
.v2-sec--navy .v2-h2 { color: var(--white); }
.v2-h2--center { max-width: none; text-align: center; }

.v2-h3 {
  margin: 0 0 16px;
  font-family: var(--font-heading);
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 1.6;
  color: var(--navy);
  word-break: auto-phrase;
}
.v2-sec--navy .v2-h3 { color: var(--white); }

/* リード：本文より少し大きく、行間を広く、幅を狭く */
.v2-lead {
  max-width: var(--v2-measure-lead);
  margin: 0 0 48px;
  font-size: 2rem;
  line-height: 2.1;
  color: var(--ink-body);
}
.v2-sec--navy .v2-lead { color: rgba(255, 255, 255, .92); }
.v2-lead--center { margin-inline: auto; text-align: center; }

/* 本文：このサイトの本文はすべてこの1種類 */
.v2-body {
  max-width: var(--v2-measure);
  margin: 0 0 24px;
  font-size: 1.7rem;
  line-height: 2.05;
  color: var(--ink-body);
}
.v2-sec--navy .v2-body { color: rgba(255, 255, 255, .9); }
.v2-body:last-child { margin-bottom: 0; }
.v2-body--center { margin-inline: auto; text-align: center; }
.v2-body b, .v2-body strong { color: var(--navy); font-weight: 700; }
.v2-sec--navy .v2-body b { color: var(--white); }

/* 特大の一言。ブランドページの主役 */
.v2-statement {
  max-width: 16em;
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(3.2rem, 6vw, 6.4rem);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: .01em;
  color: var(--navy);
  word-break: auto-phrase;
  text-wrap: balance;
}
.v2-statement--center { margin-inline: auto; text-align: center; }
.v2-sec--navy .v2-statement { color: var(--white); }

/* =============================================================================
   4. Hero
   ========================================================================== */
.v2-hero { position: relative; }

/* 4-1. 全幅写真の上に一言（ブランド用） */
.v2-hero--cover { position: relative; background-color: var(--navy); }
.v2-hero--cover .v2-hero__media { margin: 0; }
.v2-hero--cover .v2-hero__media img {
  display: block;
  width: 100%;
  height: clamp(420px, 62vh, 680px);
  object-fit: cover;
  object-position: center 32%;
}
.v2-hero--cover .v2-hero__panel {
  position: absolute;
  inset: auto 0 0 0;
  padding: 120px 32px 56px;
  background: linear-gradient(to top, rgba(7, 25, 67, .88) 30%, rgba(7, 25, 67, 0));
}
.v2-hero--cover .v2-hero__inner { max-width: var(--v2-page); margin-inline: auto; }
.v2-hero--cover .v2-hero__title {
  max-width: 14em;
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(3rem, 4.8vw, 5.2rem);
  font-weight: 700;
  line-height: 1.45;
  color: var(--white);
  word-break: auto-phrase;
  text-wrap: balance;
}
.v2-hero--cover .v2-hero__sub {
  max-width: 26em;
  margin: 20px 0 0;
  font-size: 1.7rem;
  line-height: 1.95;
  color: rgba(255, 255, 255, .92);
}

/* 4-2. 文字だけ（余白で見せる） */
.v2-hero--quiet {
  padding-block: 128px 96px;
  background-color: var(--cream);
}
.v2-hero--quiet .v2-hero__inner {
  max-width: var(--v2-page);
  margin-inline: auto;
  padding-inline: 32px;
}
.v2-hero--quiet .v2-hero__title {
  max-width: 15em;
  margin: 0 0 28px;
  font-family: var(--font-heading);
  font-size: clamp(3rem, 4.6vw, 5.2rem);
  font-weight: 700;
  line-height: 1.45;
  color: var(--navy);
  word-break: auto-phrase;
  text-wrap: balance;
}
.v2-hero--quiet .v2-hero__sub {
  max-width: 26em;
  margin: 0;
  font-size: 1.8rem;
  line-height: 2.05;
  color: var(--ink-body);
}

/* 4-3. 製品用（左に文字・右に画面） */
.v2-hero--product {
  padding-block: 104px 96px;
  background-color: var(--cream);
}
.v2-hero--product .v2-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 64px;
  align-items: center;
  max-width: var(--v2-page);
  margin-inline: auto;
  padding-inline: 32px;
}
.v2-hero--product .v2-hero__logo { display: block; width: 220px; height: auto; margin: 0 0 28px; }
.v2-hero--product .v2-hero__title {
  max-width: 13em;
  margin: 0 0 24px;
  font-family: var(--font-heading);
  font-size: clamp(2.6rem, 3.8vw, 4.4rem);
  font-weight: 700;
  line-height: 1.5;
  color: var(--navy);
  word-break: auto-phrase;
  text-wrap: balance;
}
.v2-hero--product .v2-hero__sub {
  max-width: 26em;
  margin: 0 0 32px;
  font-size: 1.7rem;
  line-height: 2;
  color: var(--ink-body);
}
.v2-hero--product .v2-hero__media { margin: 0; }
.v2-hero--product .v2-hero__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 24px;
}

/* =============================================================================
   5. 写真
   高さを比率で固定し、ページをまたいでも揃うようにする
   ========================================================================== */
.v2-figure { margin: 0; }
.v2-figure img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 24px;
}
.v2-figure--wide img { aspect-ratio: var(--v2-ar-wide); border-radius: 0; }
.v2-figure--std img  { aspect-ratio: var(--v2-ar-std); }
.v2-figure--port img { aspect-ratio: var(--v2-ar-port); object-position: center 25%; }
.v2-figure__cap {
  margin: 12px 0 0;
  font-size: 1.4rem;
  line-height: 1.85;
  color: var(--slate);
}

/* 全幅の情景写真。セクションとセクションの間に挟んで呼吸を作る */
.v2-band { padding: 0; }
.v2-band img {
  display: block;
  width: 100%;
  height: clamp(240px, 34vw, 460px);
  object-fit: cover;
  object-position: center 35%;
}

/* =============================================================================
   6. 交互配置（写真＋テキスト）
   ========================================================================== */
.v2-alt { display: grid; gap: 120px; }
.v2-alt__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 72px;
  align-items: center;
}
.v2-alt__item:nth-child(even) .v2-alt__media { order: -1; }
.v2-alt__body > *:last-child { margin-bottom: 0; }
.v2-alt__num {
  display: block;
  margin: 0 0 12px;
  font-family: var(--font-num);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--coral);
}

/* =============================================================================
   7. 一覧（数を絞って、1件あたりを大きく）
   ========================================================================== */
.v2-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 48px 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.v2-list--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; }
.v2-list__item > *:last-child { margin-bottom: 0; }
.v2-list__label {
  display: block;
  margin: 0 0 14px;
  font-family: var(--font-num);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--coral);
}
.v2-list__title {
  margin: 0 0 12px;
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.6;
  color: var(--navy);
  word-break: auto-phrase;
}
.v2-sec--navy .v2-list__title { color: var(--white); }
.v2-list__text {
  margin: 0;
  font-size: 1.6rem;
  line-height: 2;
  color: var(--ink-body);
}
.v2-sec--navy .v2-list__text { color: rgba(255, 255, 255, .9); }

/* 罫線だけで区切る一覧（カードにしない＝軽く見せる） */
.v2-rules { margin: 0; padding: 0; list-style: none; }
.v2-rules__item {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 40px;
  padding: 36px 0;
  border-top: 1px solid var(--line-light);
}
.v2-rules__item:last-child { border-bottom: 1px solid var(--line-light); }
.v2-rules__term {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.6;
  color: var(--navy);
  word-break: auto-phrase;
}
/* 説明文にも本文と同じ行長の上限をかける。
   かけないと 190px + 1fr の右側が約52文字/行まで伸びてしまう（実測） */
.v2-rules__desc {
  max-width: var(--v2-measure);
  margin: 0;
  font-size: 1.6rem;
  line-height: 2;
  color: var(--ink-body);
}
.v2-sec--navy .v2-rules__desc { color: rgba(255, 255, 255, .9); }
.v2-sec--navy .v2-rules__term { color: var(--white); }
.v2-sec--navy .v2-rules__item { border-color: rgba(255, 255, 255, .28); }

/* 一覧・人物の説明文も同様に上限をかける */
.v2-list__text,
.v2-person__text { max-width: var(--v2-measure); }

/* =============================================================================
   8. 人物
   ========================================================================== */
.v2-people {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 72px 56px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.v2-person__media { margin: 0 0 24px; }
.v2-person__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--v2-ar-port);
  object-fit: cover;
  object-position: center 22%;
  border-radius: 24px;
}
.v2-person__quote {
  margin: 0 0 16px;
  font-family: var(--font-heading);
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 1.75;
  color: var(--navy);
  word-break: auto-phrase;
  text-wrap: pretty;
}
.v2-person__name { margin: 0 0 12px; font-size: 1.5rem; color: var(--slate); }
.v2-person__text { margin: 0; font-size: 1.6rem; line-height: 2; color: var(--ink-body); }

/* =============================================================================
   9. CTA
   1ページに主役のCTAは1つ。ページ末尾に置く
   ========================================================================== */
.v2-cta { padding-block: 128px; background-color: var(--navy); color: var(--white); }
.v2-cta--cream { background-color: var(--cream); color: var(--ink-body); }
.v2-cta__inner {
  max-width: var(--v2-page-narrow);
  margin-inline: auto;
  padding-inline: 32px;
  text-align: center;
}
.v2-cta__title {
  margin: 0 0 20px;
  font-family: var(--font-heading);
  font-size: clamp(2.6rem, 3.4vw, 3.8rem);
  font-weight: 700;
  line-height: 1.5;
  color: inherit;
  word-break: auto-phrase;
  text-wrap: balance;
}
.v2-cta__text {
  max-width: 28em;
  margin: 0 auto 40px;
  font-size: 1.7rem;
  line-height: 2.05;
  color: inherit;
  opacity: .92;
}
.v2-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  margin: 0;
}
.v2-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 60px;
  padding: 14px 40px;
  border: 2px solid transparent;
  border-radius: 999px;
  background-color: var(--white);
  font-family: var(--font-heading);
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--navy);
  text-decoration: none;
  text-align: center;
  transition: opacity .3s;
}
.v2-btn:hover { opacity: .82; }
.v2-btn--ghost { background-color: transparent; border-color: currentColor; color: inherit; }
.v2-cta--cream .v2-btn { background-color: var(--navy); color: var(--white); }
.v2-cta--cream .v2-btn--ghost { background-color: transparent; border-color: var(--navy); color: var(--navy); }
.v2-btn__note {
  display: block;
  margin-top: 4px;
  font-size: 1.3rem;
  font-weight: 400;
  opacity: .82;
}

/* 本文中の控えめなリンク */
.v2-more {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: .35em;
}
.v2-sec--navy .v2-more { color: var(--white); }
.v2-more::after {
  content: "";
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--coral);
  border-bottom: 2px solid var(--coral);
  transform: rotate(-45deg);
}

/* 次に読むもの（ページ末尾の案内） */
.v2-next { padding-block: 96px; background-color: var(--cream); }
.v2-next__inner { max-width: var(--v2-page); margin-inline: auto; padding-inline: 32px; }
.v2-next__title {
  margin: 0 0 28px;
  font-family: var(--font-heading);
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--navy);
}
.v2-next__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.v2-next__list a {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  min-height: 96px;
  padding: 26px 28px;
  border-radius: 20px;
  background-color: var(--white);
  color: var(--navy);
  text-decoration: none;
}
.v2-next__list a b { font-family: var(--font-heading); font-size: 1.8rem; font-weight: 700; line-height: 1.5; }
.v2-next__list a span { font-size: 1.4rem; line-height: 1.8; color: var(--slate); }

/* =============================================================================
   10. 数字（使うのは「全国4拠点」のような変動しないものだけ）
   ========================================================================== */
.v2-fact {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 56px;
  margin: 0;
  padding: 0;
}
.v2-fact__item { margin: 0; }
.v2-fact__num {
  display: block;
  font-family: var(--font-num);
  font-size: clamp(3.6rem, 5vw, 5.6rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--navy);
}
.v2-sec--navy .v2-fact__num { color: var(--white); }
.v2-fact__label { display: block; margin-top: 8px; font-size: 1.5rem; color: var(--slate); }
.v2-sec--navy .v2-fact__label { color: rgba(255, 255, 255, .8); }

/* =============================================================================
   11. タブレット
   ========================================================================== */
@media screen and (max-width: 1024px) {
  .v2 { --v2-block: 112px; --v2-block-tight: 72px; }
  .v2-inner, .v2-hero--quiet .v2-hero__inner, .v2-hero--product .v2-hero__inner,
  .v2-cta__inner, .v2-next__inner { padding-inline: 24px; }
  .v2-hero--product .v2-hero__inner { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .v2-alt { gap: 80px; }
  .v2-alt__item { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .v2-alt__item:nth-child(even) .v2-alt__media { order: 0; }
  .v2-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 32px; }
  .v2-next__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =============================================================================
   12. スマートフォン（390pxを基準に設計）
   PCの縮小ではなく、SPを主戦場として余白と文字を決める
   ========================================================================== */
@media screen and (max-width: 767px) {
  .v2 {
    --v2-block: 72px;
    --v2-block-tight: 48px;
    --v2-measure: 100%;
    --v2-measure-lead: 100%;
  }
  .v2-inner, .v2-hero--quiet .v2-hero__inner, .v2-hero--product .v2-hero__inner,
  .v2-cta__inner, .v2-next__inner { padding-inline: 20px; }

  .v2-h2 { margin-bottom: 28px; font-size: 2.5rem; }
  .v2-h3 { font-size: 1.9rem; }
  .v2-lead { margin-bottom: 32px; font-size: 1.75rem; line-height: 2; text-align: left; }
  .v2-body { font-size: 1.6rem; line-height: 2; text-align: left; }
  .v2-statement { max-width: none; font-size: 2.9rem; line-height: 1.5; }

  .v2-hero--cover .v2-hero__media img { height: clamp(320px, 58vh, 440px); }
  .v2-hero--cover .v2-hero__panel { padding: 88px 20px 36px; }
  .v2-hero--cover .v2-hero__title { font-size: 2.7rem; }
  .v2-hero--cover .v2-hero__sub { font-size: 1.6rem; }
  .v2-hero--quiet { padding-block: 64px 48px; }
  .v2-hero--quiet .v2-hero__title { font-size: 2.7rem; }
  .v2-hero--quiet .v2-hero__sub { font-size: 1.65rem; line-height: 2; }
  .v2-hero--product { padding-block: 56px 48px; }
  .v2-hero--product .v2-hero__logo { width: 168px; }
  .v2-hero--product .v2-hero__title { font-size: 2.4rem; }

  .v2-band img { height: clamp(200px, 52vw, 280px); }

  .v2-alt { gap: 56px; }
  .v2-alt__item { gap: 24px; }

  .v2-list, .v2-list--2 { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .v2-list__title { font-size: 1.9rem; }
  .v2-list__text { font-size: 1.6rem; }

  .v2-rules__item { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 26px 0; }
  .v2-rules__term { font-size: 1.7rem; }

  .v2-people { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .v2-person__quote { font-size: 1.9rem; }

  .v2-cta { padding-block: 72px; }
  .v2-cta__title { font-size: 2.4rem; }
  .v2-cta__text { margin-bottom: 32px; font-size: 1.6rem; }
  .v2-cta__actions { display: grid; gap: 12px; }
  .v2-btn { width: 100%; padding: 14px 24px; font-size: 1.6rem; }

  .v2-next { padding-block: 56px; }
  .v2-next__list { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .v2-next__list a { min-height: 0; padding: 20px 22px; }

  .v2-fact { gap: 24px 40px; }
}

/* =============================================================================
   13. 動きを減らす設定
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .v2-btn { transition: none; }
}

/* =============================================================================
   14. ダークテーマ（既存の data-theme="dark" のトークン差し替えに追随）
   ========================================================================== */
html[data-theme="dark"] .v2-sec { background-color: var(--white); }
html[data-theme="dark"] .v2-sec--cream,
html[data-theme="dark"] .v2-hero--quiet,
html[data-theme="dark"] .v2-hero--product,
html[data-theme="dark"] .v2-next { background-color: var(--cream); }
html[data-theme="dark"] .v2-h2,
html[data-theme="dark"] .v2-h3,
html[data-theme="dark"] .v2-statement,
html[data-theme="dark"] .v2-list__title,
html[data-theme="dark"] .v2-rules__term,
html[data-theme="dark"] .v2-person__quote,
html[data-theme="dark"] .v2-fact__num,
html[data-theme="dark"] .v2-more { color: var(--ink); }
html[data-theme="dark"] .v2-next__list a { background-color: var(--white); color: var(--ink); border: 1px solid var(--line); }
html[data-theme="dark"] .v2-cta { background-color: var(--white); color: var(--ink); border-block: 1px solid var(--line); }
html[data-theme="dark"] .v2-cta .v2-btn { background-color: var(--ink); color: var(--white); }
html[data-theme="dark"] .v2-cta .v2-btn--ghost { background-color: transparent; border-color: var(--ink); color: var(--ink); }
html[data-theme="dark"] .v2-hero--cover .v2-hero__panel {
  background: linear-gradient(to top, rgba(0, 0, 0, .92) 30%, rgba(0, 0, 0, 0));
}