@charset "UTF-8";
/* ==================================================
   製造業の見積業務（CPQ）LP 専用スタイル
   ・読み込み順: reset.css → style.css → このファイル
   ・style.css（全ページ共通）は変更せず、LP 固有の指定と
     既存パーツの差分（--cpq モディファイア）をここに書く
   ・メディアクエリは style.css に合わせて max-width のみ
     （1280 / 1200 / 1140 / 767 / 374px）
================================================== */

/* ==================================================
   トークン
================================================== */
:root {
  /* Colors */
  --color-text: #333;
  --color-text-strong: #171717;
  --color-white: #fff;
  --color-accent: #831ab2;
  --color-accent-light: #c26fe7;
  --color-primary: #481894;
  --color-primary-dark: #38178c;
  --color-primary-mid: #6b18a5;
  --color-navy: #261682;
  --color-pale: #f7f0fb;
  --color-pale-2: #f1e8f7;
  --color-pale-line: #e7e2f4;
  --color-bg-gray: #f7f7f7;
  --color-border-dash: #707070;
  /* 近い色でも Figma の値をそのまま使う。複数セクションで共通のものだけ変数にし、
     1箇所だけの色はその場に直接書く */

  /* 既存サイトの主グラデーションと同じ値。デザインの紫グラデーションはすべてここを参照する */
  --gradient-primary: linear-gradient(90deg, #9102bb, #130f7b);

  --shadow-soft: 0 0 7px rgba(197, 197, 197, 0.2);
  --shadow-card: 0 0 24px rgba(198, 198, 198, 0.35);

  /* Fonts */
  --font-jp: "Noto Sans JP", sans-serif;
  --font-en: "Be Vietnam Pro", sans-serif;

  /* Layout */
  --container: 1056px;
  --radius-s: 10px;
  --radius-m: 15px;
  --radius-l: 20px;
  --radius-pill: 100px;
}

/* ==================================================
   共通（LP 内で使い回す見出し・ボタン等）
================================================== */

/* LP 本体
   ・行頭禁則を Figma と同じ強さにする。既定（line-break: auto）だと
     「ー」「っ」などが行頭に来てしまい、Figma と折り返し位置がずれる
   ・ヘッダー・フッターは main の外なので影響しない
   ・SP（767px 以下）の内側コンテナは LP 独自のセクションすべてで max-width: 540px。
     止めないと 767px 付近で SP 用画像が等倍を下回ってぼやけるため（確認事項 I-19）。
     背景・写真・波線など全幅の要素と、流用パーツ（Reason/Result・最終CTA）は対象外 */
.p-cpq__main {
  line-break: strict;
  /* セクションの外余白（Verification と Contents の間など）でページの地色が見える。
     html / body に背景が無く、OS がダークモードだと黒く出るため、ここで白を敷く */
  background: var(--color-white);
}

/* 既存サイトは body に letter-spacing: 0.05em を置いており、字間の指定が無い文章にも
   0.8px（1280px 以下は 0.7px）が継承される。Figma の「指定なし」は 0 なので打ち消す。
   Reason/Result と最終CTA は本番の表示に合わせる部分があるため、ここには含めない
   （新しいセクションを足したらこの一覧にも追加すること） */
.p-cpq-fv,
.p-cpq-about,
.p-cpq-flow,
.p-cpq-verification,
.p-cpq-contents,
.p-cpq-support,
.p-cpq-faq {
  letter-spacing: normal;
}

/* 途中で折り返したくない語句を囲む。
   文の最後の1〜2文字だけが次の行に残るのを防ぐ（例：「…検証していま／す。」）。
   reset.css が span に font-weight を直接当てるため、親の太さを inherit で受け取る
   （囲む先の太さが箇所ごとに違うので、値は書かない） */
.p-cpq-nowrap {
  font-weight: inherit;
  white-space: nowrap;
}

/* セクション見出し（英字ラベル＋日本語見出し） */
.p-cpq-heading {
  text-align: center;
}

/* グラデーションが文字幅に収まるよう、ブロックを文字幅まで縮める */
.p-cpq-heading__en,
.p-cpq-heading__ja {
  width: fit-content;
  margin-inline: auto;
  color: transparent;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
}

/* line-height は normal にする。Figma の「自動」は行の上端からフォントの ascent の位置に
   ベースラインを置くが、CSS の normal も同じ計算になるため文字の位置が一致する
   （line-height: 1 だと half-leading の分だけ文字が約 9px 上にずれる。実測） */
.p-cpq-heading__en {
  font-family: var(--font-en);
  font-size: 72px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0;
}

/* 英字の行ボックスが ascent + descent 分あるため、Figma の見た目の間隔（28px）から
   その差を引いた値。日本語の位置は Figma どおりになる */
.p-cpq-heading__ja {
  margin-top: 9px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.04em;
}

@media screen and (max-width: 1280px) {
  .p-cpq-heading__en {
    font-size: max(calc(72 / 1280 * 100vw), 40px);
  }
}

@media screen and (max-width: 767px) {
  .p-cpq-heading__en {
    font-size: 36px;
    font-weight: 900;
  }

  /* 英字の行ボックスのぶんを引いた値（PC と同じ考え方）。
     Figma は日本語ラベルの行送りが 56px 固定で、実装の 1.4 より文字が下に来る。
     その差 3.4px をここで足し、続く要素の margin-top から同じだけ引いている */
  .p-cpq-heading__ja {
    margin-top: 5.9px;
    font-size: 14px;
  }

  /* SP は全セクション 900。modifier のほうが詳細度が高いので、ここでも指定する */
  .p-cpq-heading--en-extrabold .p-cpq-heading__en {
    font-weight: 900;
  }
}

@media screen and (max-width: 374px) {
  .p-cpq-heading__en {
    font-size: calc(36 / 375 * 100vw);
  }
}

/* 濃い背景の上に置く見出し（Verification など） */
.p-cpq-heading--white .p-cpq-heading__en,
.p-cpq-heading--white .p-cpq-heading__ja {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: var(--color-white);
}

.p-cpq-heading--white .p-cpq-heading__en {
  letter-spacing: calc(1.44 / 72 * 1em);
}

.p-cpq-heading--white .p-cpq-heading__ja {
  /* Figma のこの見出しには字間の指定が無い */
  letter-spacing: normal;
}

@media screen and (max-width: 767px) {
  .p-cpq-heading--white .p-cpq-heading__en {
    letter-spacing: normal;
  }

  .p-cpq-heading--white .p-cpq-heading__ja {
    letter-spacing: calc(-0.56 / 14 * 1em);
  }
}

/* VIEW ALL ボタン（FAQ・Contents 共通） */
.p-cpq-more-button {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  min-width: 191px;
  height: 53px;
  padding: 0 25px 0 50px;
  border-radius: var(--radius-pill);
  background: var(--gradient-primary);
  color: var(--color-white);
  font-family: var(--font-en);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em;
}

/* reset.css 6-13行が span に font-weight: normal を直接当てるため、親からは継承されない。
   文字を持つ要素自身に指定する */
.p-cpq-more-button__text {
  font-weight: 500;
}

.p-cpq-more-button__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  transition: transform 0.3s ease;
}

.p-cpq-more-button.is-open .p-cpq-more-button__icon {
  transform: rotate(-90deg);
}

/* ==================================================
   FV
   ・PC と SP で構成が変わるが HTML は1つ。CSS で組み替える
     - PC: 左にテキスト、右に写真とハブ図
     - SP: 写真を背景にして白 72% を重ね、テキストは中央
   ・ハブ図とボタンのアイコンは PC のみ（pc-only）
   ・位置は 1440px 基準の % で指定し、画面幅に追従させる
   ・文字サイズは既存サイトの方式に合わせ、1280px 以下で vw 縮小する
================================================== */
/* FV は「文字」と「右の図」が Figma 上でほぼ接しているため、
   画面幅が 1440 を下回った時点から文字も図も同じ比率で縮める必要がある。
   （1280px まで固定にすると、1402px 付近で見出しが図に重なる。実測）
   そのため既存サイトの「1280px 以下で vw 縮小」ではなく、
   min() / clamp() で 1440 基準の連続スケーリングにしている。段差が出ないのも利点 */
.p-cpq-fv {
  position: relative;
  overflow: hidden;
  /* Figma: FV 816 - ヘッダー部 94 */
  min-height: min(722px, calc(722 / 1440 * 100vw));
  /* 下の余白は Figma の「注記の下端〜FV 下端」187px。
     文字の下限値で中身が縮みきらない幅では、min-height ではなくこの余白で高さが決まる */
  padding: min(114px, calc(114 / 1440 * 100vw)) 0 min(187px, calc(187 / 1440 * 100vw));
  background: var(--color-white);
}

/* 写真（PC: 右側 / SP: 背景全面） */
.p-cpq-fv__bg {
  position: absolute;
  right: 0;
  bottom: 0;
  /* 波線より前面。Figma では波線が写真の背面にあり、写真のフェード部分だけ透けて見える。
     透けて見える分は写真の画像に焼き込んである（SP は Figma どおり波線が前面） */
  z-index: 1;
  width: calc(1113 / 1440 * 100%);
  height: 100%;
}

.p-cpq-fv__bg img {
  width: 100%;
  /* セクションの高さに追従させる。セクション高さは vw 基準、写真の幅はコンテナ幅の % 基準で
     縮小率がわずかに違うため、高さを画像の比率任せにすると中間幅で上に隙間ができる。
     Figma は写真がセクションより高く、上が切れる形なので object-position は下ぞろえ */
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}

.p-cpq-fv__inner {
  position: relative;
  z-index: 3;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 calc(136 / 1440 * 100%);
}

.p-cpq-fv__body {
  max-width: min(584px, calc(584 / 1440 * 100vw));
}

/* 見出しは下限を付けない。全角11文字あるため、下限を付けると右の図に重なる（1440基準の比率なら常に収まる） */
.p-cpq-fv__title {
  font-size: min(50px, calc(50 / 1440 * 100vw));
  font-weight: 700;
  line-height: calc(64 / 50);
  letter-spacing: 0;
  color: transparent;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
}

.p-cpq-fv__lead {
  margin-top: min(6px, calc(6 / 1440 * 100vw));
  font-size: clamp(14px, calc(27 / 1440 * 100vw), 27px);
  font-weight: 700;
  line-height: calc(52 / 27);
  letter-spacing: 0;
}

.p-cpq-fv__text {
  /* Figma の折り返し位置に合わせる（516px で4行） */
  max-width: min(516px, calc(516 / 1440 * 100vw));
  margin-top: min(8px, calc(8 / 1440 * 100vw));
  font-size: clamp(13px, calc(16 / 1440 * 100vw), 16px);
  font-weight: 700;
  line-height: calc(26 / 16);
  letter-spacing: 0;
  color: var(--color-text);
}

.p-cpq-fv__actions {
  margin-top: min(24px, calc(24 / 1440 * 100vw));
}

.p-cpq-fv__button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: min(9px, calc(9 / 1440 * 100vw));
  /* 下限は SP と同じ 335px。これより細いと文言が2行になる */
  width: clamp(335px, calc(519 / 1440 * 100vw), 519px);
  max-width: 100%;
  height: clamp(44px, calc(72 / 1440 * 100vw), 72px);
  border-radius: var(--radius-pill);
  background: var(--gradient-primary);
}

.p-cpq-fv__button-icon {
  flex-shrink: 0;
  width: min(25px, calc(25 / 1440 * 100vw));
  height: auto;
}

.p-cpq-fv__button-text {
  font-size: clamp(13px, calc(18 / 1440 * 100vw), 18px);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--color-white);
}

.p-cpq-fv__note {
  width: clamp(335px, calc(519 / 1440 * 100vw), 519px);
  max-width: 100%;
  /* 行の高さを 2.25（Figma の 27 / 12）から 1.6 に詰めた（2026-09-29・ディレクターのご指示）。
     行の上下の空きが片側 (2.25 - 1.6) / 2 = 0.325em ずつ減り、そのままだと1行目が
     ボタンに近づくため、減ったぶんを margin-top で補ってボタンからの距離を保つ */
  margin-top: calc((2.25 - 1.6) / 2 * 1em);
  font-size: clamp(10px, calc(12 / 1440 * 100vw), 12px);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0;
  color: var(--color-text);
  text-align: center;
}

/* 右側の図（Figma の座標を 1440 基準の % に換算）
   SP では pc-only（display: none）になるため、背景画像は読み込まれない */
.p-cpq-fv__visual {
  position: absolute;
  top: calc(350 / 722 * 100%);
  left: calc(658 / 1440 * 100%);
  z-index: 2;
  width: calc(839 / 1440 * 100%);
  aspect-ratio: 839 / 372;
  background: url(../img/cpq/fv-network.png) no-repeat center center / contain;
}

.p-cpq-fv__hub {
  position: absolute;
  top: calc(175 / 722 * 100%);
  left: calc(685 / 1440 * 100%);
  z-index: 2;
  width: calc(259 / 1440 * 100%);
  aspect-ratio: 259 / 290;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  /* 写真を含む図のため WebP のほうが 89KB 軽い。image-set 非対応ブラウザは上段の PNG が残る */
  background-image: url(../img/cpq/fv-hub.png);
  background-image: image-set(url(../img/cpq/fv-hub.webp) type("image/webp"), url(../img/cpq/fv-hub.png) type("image/png"));
}

.p-cpq-fv__wave {
  position: absolute;
  bottom: 0;
  left: 0;
  /* 写真より背面（Figma の重なり順） */
  z-index: 0;
  width: calc(1458 / 1440 * 100%);
}

.p-cpq-fv__wave img {
  width: 100%;
  height: auto;
}

/* FV は 1440 基準の連続スケーリング（上の base 参照）にしたため、
   既存サイトの 1280px の段は使わない */

/* 767px 以下 — 上の PC 指定に対する打ち消し（PC 側と1対1で並べる）。
   SP は Figma（SP）の値に合わせる */
@media screen and (max-width: 767px) {
  .p-cpq-fv {
    min-height: 553px; /* Figma SP: 写真の高さ */
    /* 下の 59px は「文章が増えても注記が写真の下端にくっつかない」ための余白。
       Figma の注記から写真の下端までの距離に合わせている（文字量が変わらなければ
       min-height が効くので見た目は変わらない） */
    padding: 57px 0 59px; /* Figma SP: 見出しまで 57 */
  }

  /* 写真を背景全面に敷き、白 72% を重ねる */
  .p-cpq-fv__bg {
    top: 0;
    right: auto;
    bottom: auto;
    left: 0;
    width: 100%;
    /* 固定の 553px（Figma の写真の高さ）ではなく、FV の高さに追従させる。
       文言が増えて FV が 553px より伸びると、写真の下に白い帯が出ていたため（2026-09-29）。
       FV が 553px のときは従来と同じ高さになる */
    height: 100%;
  }

  .p-cpq-fv__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.72);
  }

  .p-cpq-fv__bg img {
    height: 100%;
    object-fit: cover;
  }

  .p-cpq-fv__inner {
    max-width: 540px;
    padding: 0 20px;
  }

  .p-cpq-fv__body {
    max-width: none;
    text-align: center;
  }

  .p-cpq-fv__title {
    font-size: 28px;
    line-height: 1.5;
  }

  .p-cpq-fv__lead {
    margin-top: 14px;
    font-size: 22px;
    line-height: 1.5;
  }

  .p-cpq-fv__text {
    max-width: none; /* SP は中央揃えで全幅 */
    margin-top: 20px;
    font-size: 16px;
    line-height: calc(26 / 16);
  }

  .p-cpq-fv__actions {
    margin-top: 30px;
  }

  .p-cpq-fv__button {
    width: 335px;
    height: 44px;
    margin: 0 auto;
  }

  .p-cpq-fv__button-text {
    font-size: 13px;
  }

  .p-cpq-fv__note {
    width: auto;
    font-size: 10px; /* Figma どおり（可読性は実機で確認。確認事項 I-3） */
  }

  /* 波線は次のセクションにかぶる位置。About 実装時に重なり具合を再確認する */
  .p-cpq-fv__wave {
    /* SP は Figma の重なり順どおり写真より前面（PC は背面） */
    z-index: 2;
    bottom: -102px;
    width: 100%;
  }
}

/* ==================================================
   About（見積業務の課題）
   ・背景の淡い模様は Figma の背景画像に白 60% を重ねた状態を画像に焼き込んである
     （模様が非常に低コントラストのため、480px に縮小しても差が出ない。SP は模様なしの単色）
   ・白いボックスは PC がチェックリスト左／人物右、SP が人物上／チェックリスト下。
     HTML はチェックリストが先で、SP だけ order で人物を上に出している
================================================== */
.p-cpq-about {
  /* 人物イラストはボックスの右に 46px はみ出す。画面幅が狭いと
     ページの外まで出て横スクロールが出るため、セクションで切り落とす
     （はみ出す部分は吹き出しの外側の透明な余白） */
  overflow: hidden;
  padding: 120px 0;
  background: #efefef url(../img/cpq/about-bg.jpg) no-repeat center center / cover;
}

.p-cpq-about__inner {
  max-width: calc(var(--container) + 60px);
  margin: 0 auto;
  padding: 0 30px;
}

.p-cpq-about__heading {
  font-size: 32px;
  font-weight: 700;
  line-height: calc(54 / 32);
  letter-spacing: calc(-1.28 / 32 * 1em);
  color: var(--color-text);
  text-align: center;
}

.p-cpq-about__accent {
  /* reset.css が span に font-weight を直接当てるため、親から継承されない。文字を持つ要素に書く */
  font-weight: 700;
  color: var(--color-accent);
}

.p-cpq-about__accent-light {
  font-weight: 600;
  color: var(--color-accent-light);
}

/* 白いボックス */
.p-cpq-about__box {
  position: relative;
  margin-top: 48px;
  padding: 30px 47.5px 31px;
  background: var(--color-white);
  border-radius: var(--radius-m);
}

/* 文字が右の人物イラストにかからない幅で止める
   （イラストの見える左端はボックス幅の 72.4%。47.5 + この幅 がそれを超えないこと） */
.p-cpq-about__list {
  max-width: calc(717 / 961 * 100%);
}

.p-cpq-about__item {
  display: flex;
  align-items: center;
  gap: 12.5px;
  min-height: 45.14px;
  font-size: 16px;
  font-weight: 700;
  line-height: calc(24.15 / 16);
  letter-spacing: calc(0.863 / 16 * 1em);
  color: #222;
}

/* テキストを span で包んでいるのは、<wbr> が flex の子（＝別々のフレックスアイテム）に
   ならないようにするため。reset.css が span に font-weight を直接当てるので、
   親の 700 は継承されない。文字を持つ要素に書き直す（2026-09-28） */
.p-cpq-about__item-text {
  font-weight: 700;
}

.p-cpq-about__item + .p-cpq-about__item {
  min-height: 46.14px;
  border-top: 1px dashed var(--color-border-dash);
}

/* チェックアイコン。形は SVG、色は既存サイトの主グラデーション */
.p-cpq-about__check {
  flex-shrink: 0;
  width: 23px;
  height: 23px;
  background: var(--gradient-primary);
  -webkit-mask: url(../img/cpq/icon-check.svg) no-repeat center center / contain;
  mask: url(../img/cpq/icon-check.svg) no-repeat center center / contain;
}

.p-cpq-about__persona {
  display: block;
  position: absolute;
  bottom: 0;
  left: calc(752 / 1056 * 100%);
  width: calc(350 / 1056 * 100%);
}

.p-cpq-about__persona img {
  width: 100%;
  height: auto;
}

/* カード2枚 */
.p-cpq-about__cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 34px;
  margin-top: 64px;
}

.p-cpq-about__card {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border-radius: var(--radius-m);
}

.p-cpq-about__card-media {
  flex: 1;
  padding: 29px 13px 23px;
}

/* 2枚目は Figma の余白が1枚目と違う */
.p-cpq-about__card:nth-child(2) .p-cpq-about__card-media {
  padding: 23px 13px 30px;
}

.p-cpq-about__card-media img {
  width: 100%;
  height: auto;
}

.p-cpq-about__card-text {
  min-height: 95px;
  padding: 15px 19px 20px;
  border-radius: 0 0 var(--radius-m) var(--radius-m);
  background: var(--color-primary-dark);
  font-size: 18px;
  font-weight: 600;
  line-height: calc(30 / 18);
  letter-spacing: 0;
  color: var(--color-white);
  text-align: center;
}

/* まとめボックス */
.p-cpq-about__summary {
  margin-top: 64px;
  padding: 29px 0 31px;
  background: rgba(220, 191, 234, 0.2);
  border-radius: var(--radius-m);
}

.p-cpq-about__summary-text {
  font-size: 20px;
  font-weight: 700;
  line-height: calc(44 / 20);
  letter-spacing: 0;
  color: var(--color-text);
  text-align: center;
}

/* 文字サイズが変わっても行の高さ（44px）を保つ */
.p-cpq-about__summary-text .p-cpq-about__accent {
  font-size: 24px;
  line-height: calc(44 / 24);
}

/* 1280px 以下 — 見出しが2行のままになるよう、既存サイトと同じ考え方で縮小する */
@media screen and (max-width: 1280px) {
  .p-cpq-about__heading {
    font-size: max(calc(32 / 1280 * 100vw), 20px);
  }
}

/* 767px 以下 — SP デザイン（Figma 203:979）に合わせる */
@media screen and (max-width: 767px) {
  .p-cpq-about {
    padding: 40px 0 62px;
    /* SP のデザインに模様は無い */
    background: #efefef;
  }

  .p-cpq-about__inner {
    max-width: 540px;
    padding: 0 20px;
  }

  .p-cpq-about__heading {
    font-size: 20px;
    line-height: calc(32 / 20);
  }

  .p-cpq-about__box {
    display: flex;
    flex-direction: column;
    margin-top: 42px;
    /* 左右の余白は Figma の値をそのまま使う（左22 / 右15 と非対称。
       チェック項目の幅 298px をデザインどおりにして折り返し位置を合わせるため） */
    padding: 0 15px 23px 22px;
  }

  /* 人物を先に見せる（HTML はチェックリストが先） */
  .p-cpq-about__persona {
    order: -1;
    position: static;
    width: calc(342 / 375 * 100vw);
    max-width: 342px;
    /* ボックスの左余白（22px）を打ち消して、Figma の位置（ボックス左端から 4px）に置く */
    margin: -2px 0 0 calc(-18 / 375 * 100vw);
  }

  .p-cpq-about__list {
    max-width: none;
    margin-top: 6px;
  }

  .p-cpq-about__item {
    gap: 12px;
    min-height: 73px;
    /* Figma SP は文字の上に 9px の余白があり、その下の領域で天地中央に置かれる */
    padding-top: 9px;
    /* SP の Figma に字間の指定は無い（PC は 0.863px） */
    letter-spacing: normal;
    line-height: 1.5;
    /* SP は1項目目にも破線が入る */
    border-top: 1px dashed var(--color-border-dash);
  }

  .p-cpq-about__item + .p-cpq-about__item {
    min-height: 73px;
    margin-top: 11px;
  }

  .p-cpq-about__cards {
    grid-template-columns: 1fr;
    gap: 40px;
    margin-top: 40px;
  }

  .p-cpq-about__card-media {
    padding: 26px 13px 18px;
  }

  .p-cpq-about__card:nth-child(2) .p-cpq-about__card-media {
    padding: 23px 13px 22px;
  }

  .p-cpq-about__card-text {
    min-height: 132px;
    padding: 21px 5px;
  }

  .p-cpq-about__summary {
    margin-top: 40px;
    padding: 21px 5px;
  }

  .p-cpq-about__summary-text {
    font-size: 16px;
    line-height: 1.8;
  }

  .p-cpq-about__summary-text .p-cpq-about__accent {
    font-size: 20px;
    line-height: 1.8;
  }
}

/* ==================================================
   Flow（業務フロー）
   ・工程図・矢印・CPQ構成図は画像。PC / SP で構成が違うため2種類ずつ書き出している
   ・カードの中身（見出し・本文）は HTML。読ませる文章のため
================================================== */
.p-cpq-flow {
  /* 波を「セクションの背景より前・文字より後ろ」に置くため、
     ここで重なりの基準（スタッキングコンテキスト）を作る */
  position: relative;
  z-index: 0;
  /* 下余白は波と同じ割合で縮ませる（波とカードの間隔を画面幅によらず一定に保つ） */
  padding: 105px 0 min(148px, calc(148 / 1440 * 100%));
  background: var(--color-white);
  /* 波がページ幅より広いので、はみ出した分を切る */
  overflow: hidden;
}

/* Flow と Verification の境目の波（飾り）
   ・下端をセクションの下端（＝Verification の上端）に合わせる
   ・幅は画面幅に対する比率。カード・見出しとの位置関係が画面幅で変わらない */
.p-cpq-flow__wave {
  position: absolute;
  bottom: 0;
  left: 50%;
  z-index: -1;
  width: calc(1542 / 1440 * 100%);
  transform: translateX(-50%);
  pointer-events: none;
}

.p-cpq-flow__wave img {
  width: 100%;
  height: auto;
}

.p-cpq-flow__inner {
  max-width: calc(var(--container) + 60px);
  margin: 0 auto;
  padding: 0 30px;
}

.p-cpq-flow__title {
  /* 日本語ラベルは共通コンポーネント（line-height 1.4）を使っており、Figma（56px）より箱が 16px 小さい。
     その差をここで吸収し、この見出しから下は Figma と同じ位置にそろえる */
  margin-top: 19px;
  font-size: 36px;
  font-weight: 700;
  line-height: calc(52 / 36);
  letter-spacing: calc(1.08 / 36 * 1em);
  color: var(--color-text);
  text-align: center;
}

.p-cpq-flow__lead {
  margin-top: 24px;
  font-size: 16px;
  font-weight: 700;
  line-height: calc(27 / 16);
  letter-spacing: 0;
  color: var(--color-text);
  text-align: center;
}

/* 太いマーカー（Figma: 高さ8px の #e7e2f4 を文字の下に敷く） */
.p-cpq-flow__lead-mark {
  padding-bottom: 4px;
  background-image: linear-gradient(var(--color-pale-line), var(--color-pale-line));
  background-repeat: no-repeat;
  background-size: 100% 8px;
  background-position: 0 calc(100% - 4px);
  font-size: 18px;
  font-weight: 700;
  /* 16px の本文と同じ 27px の行に収める */
  line-height: calc(27 / 18);
  color: #421790;
}

.p-cpq-flow__steps {
  display: block;
  margin-top: 54px;
}

.p-cpq-flow__steps img {
  width: 100%;
  height: auto;
}

/* 課題カード・解決カード（3列） */
.p-cpq-flow__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  max-width: 769px;
  margin: 25px auto 0;
}

.p-cpq-flow__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-height: 133px;
  padding: 15px 12px 23px;
  border-radius: var(--radius-s);
}

.p-cpq-flow__cards--issue .p-cpq-flow__card {
  background: #f4f4f4;
}

.p-cpq-flow__card-icon {
  flex-shrink: 0;
  width: 41px;
  height: 41px;
  background: no-repeat center center / contain;
}

.p-cpq-flow__cards--issue .p-cpq-flow__card-icon {
  background-image: url(../img/cpq/icon-face-confused.svg);
}

.p-cpq-flow__card-text {
  font-size: 16px;
  font-weight: 700;
  line-height: calc(23 / 16);
  letter-spacing: calc(0.48 / 16 * 1em);
  color: var(--color-text);
  text-align: center;
}

.p-cpq-flow__arrows {
  display: block;
  width: 486px;
  max-width: 100%;
  margin: 24px auto 0;
}

/* 解決の見出し（矢印の下） */
.p-cpq-flow__title--solution {
  margin-top: 16.5px;
  /* Figma のこの見出しには字間の指定が無い（8工程の見出しは 1.08px） */
  letter-spacing: normal;
}

.p-cpq-flow__cards--solution {
  margin-top: 19px;
}

.p-cpq-flow__cards--solution .p-cpq-flow__card {
  /* 枠の分だけ内側の余白を減らし、カードの高さを課題カードと同じ 133px にそろえる */
  padding: 11px 8px 19px;
  background: var(--color-white);
  border: 4px solid var(--color-pale-line);
}

.p-cpq-flow__cards--solution .p-cpq-flow__card-icon {
  background-image: url(../img/cpq/icon-face-smile.svg);
}

/* CPQ 構成図
   ・パネルの背景（写真 + うすい紫 92%）は CSS。見出しと「共通マスタ」はテキスト
   ・図そのものは背景が透明な画像。中の太い縦線は幅の 57.102% にあり、
     下に続く分岐矢印の画像（flow-branch.svg）の縦線と同じ比率でそろえている */
.p-cpq-flow__cpq {
  margin-top: 32.6px;
  padding-top: 29px;
  border-radius: var(--radius-m);
  background: url(../img/cpq/flow-cpq-bg.jpg) no-repeat center center / cover;
  box-shadow: 0 0 7px rgba(197, 197, 197, 0.2);
}

.p-cpq-flow__cpq-title {
  font-size: 24px;
  font-weight: 700;
  line-height: calc(27 / 24);
  /* 既存サイトの字間（約 0.033em）が継承されるため打ち消す（Figma は指定なし） */
  letter-spacing: normal;
  color: var(--color-primary);
  text-align: center;
}

.p-cpq-flow__cpq-master {
  margin-top: 18px;
}

.p-cpq-flow__cpq-master-box {
  /* 幅はパネルに対する比率。画面幅が変わってもパネルの中の位置関係が変わらない */
  width: calc(526 / 1056 * 100%);
  min-width: 300px;
  max-width: 100%;
  min-height: 45px;
  margin: 0 auto;
  padding: 6.5px 10px;
  border-radius: var(--radius-s);
  background: var(--color-white);
  box-shadow: 0 0 4px rgba(197, 197, 197, 0.2);
  font-size: 16px;
  /* reset.css が p / span の太さを normal に戻すため、太字は要素ごとに指定する */
  font-weight: 400;
  line-height: 2;
  letter-spacing: calc(-0.16 / 16 * 1em);
  color: #171717;
  text-align: center;
}

.p-cpq-flow__cpq-master-strong {
  font-weight: 700;
}

.p-cpq-flow__cpq-master-arrow {
  display: block;
  width: 22.384px;
  height: 25px;
  margin: 0 auto;
}

/* 図と矢印の入れ物。矢印はこの中で絶対配置にして、図の中の紫の箱の下端に合わせる */
.p-cpq-flow__cpq-figure {
  position: relative;
}

.p-cpq-flow__cpq-figure-image {
  display: block;
}

.p-cpq-flow__cpq-figure-image img {
  display: block;
  width: 100%;
  height: auto;
}

/* CPQ 図から2枚のカードへの分岐（画像）
   ・紫の箱（見積・価格管理）の下端から矢じりまでを1枚の SVG で描く
   ・上端の位置は「図の高さに対する比率」で指定するため、画面幅が変わってもずれない
   ・パネルの上に重ねる（パネルの背景・影より前面） */
.p-cpq-flow__branch {
  position: absolute;
  top: calc(245.906 / 296 * 100%);
  left: 0;
  z-index: 1;
  display: block;
  width: 100%;
}

.p-cpq-flow__branch img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1056 / 118.594;
}

/* 結論の2枚のカード */
/* 列間も、矢印が通過する縦の距離（上の余白）も比率。
   分岐矢印の画像（幅 100%）と同じ割合で縮むため、画面幅が変わっても
   矢じりの先がカードの上端中央に接する */
.p-cpq-flow__results {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(91.37 / 1056 * 100%);
  margin-top: calc(68.5 / 1056 * 100%);
}

.p-cpq-flow__result {
  padding: 30px 26.8px 25.3px;
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-card);
  background: no-repeat center center / cover;
}

.p-cpq-flow__result--rm {
  background-image: url(../img/cpq/flow-card-rm.png);
  background-image: image-set(url(../img/cpq/flow-card-rm.webp) type("image/webp"), url(../img/cpq/flow-card-rm.png) type("image/png"));
}

.p-cpq-flow__result--af {
  background-image: url(../img/cpq/flow-card-af.png);
  background-image: image-set(url(../img/cpq/flow-card-af.webp) type("image/webp"), url(../img/cpq/flow-card-af.png) type("image/png"));
}

.p-cpq-flow__result-title {
  font-size: 24px;
  font-weight: 700;
  line-height: calc(32 / 24);
  letter-spacing: calc(-0.24 / 24 * 1em);
  color: var(--color-white);
  text-align: center;
}

.p-cpq-flow__pills {
  margin-top: 26.7px;
}

.p-cpq-flow__pill {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 51px;
  padding: 9px 16px;
  border-radius: var(--radius-m);
  background: rgba(255, 255, 255, 0.9);
  font-size: 16px;
  font-weight: 500;
  line-height: calc(32 / 16);
  letter-spacing: calc(-0.16 / 16 * 1em);
  color: var(--color-text-strong);
  text-align: center;
}

/* 上と同じ理由（<wbr> を flex の子にしないための span）。親の 500 が継承されないため書き直す（2026-09-28） */
.p-cpq-flow__pill-text {
  font-weight: 500;
}

/* 2枚目のカードのピルだけ角丸なし（Figma どおり） */
.p-cpq-flow__pill--square {
  border-radius: 0;
}

.p-cpq-flow__pill + .p-cpq-flow__pill {
  margin-top: 18.3px;
}

.p-cpq-flow__result-note {
  margin-top: 11.5px;
  font-size: 12px;
  font-weight: 500;
  line-height: calc(32 / 12);
  letter-spacing: calc(-0.12 / 12 * 1em);
  color: var(--color-white);
}

.p-cpq-flow__result-footer {
  margin-top: 18.4px;
  font-size: 18px;
  font-weight: 700;
  line-height: calc(28 / 18);
  letter-spacing: calc(-0.18 / 18 * 1em);
  color: var(--color-white);
  text-align: center;
}

.p-cpq-flow__result--af .p-cpq-flow__result-footer {
  margin-top: 30.7px;
  line-height: calc(30 / 18);
}

.p-cpq-flow__arrows img {
  width: 100%;
  height: auto;
}

/* 767px 以下 — SP デザイン（Figma 203:1012）に合わせる */
@media screen and (max-width: 767px) {
  .p-cpq-flow {
    /* Figma のフレームは 63px だが、Verification のフレームとの間に 17px の隙間がある。
       セクション同士を接させるため、その分を下余白に含める（親フレームで確認済み）。
       PC と同じく、波と同じ割合で縮ませる */
    padding: 54px 0 min(80px, calc(80 / 375 * 100%));
  }

  /* 波は Verification に 79px（画像の高さの 49.69%）重なる位置まで下げる。
     はみ出しはセクションの overflow: hidden で切れる。
     ずらす量は画像自身の高さに対する比率なので、画面幅が変わっても重なり方が変わらない */
  /* 波はセクションの境目の装飾なので、コンテナ（540px）ではなく画面幅いっぱいに置く。
     止めると 540px より広い画面で、波の外側だけ白と紫が直線で接してしまう */
  .p-cpq-flow__wave {
    width: 100%;
    max-width: none;
    transform: translate(-50%, calc(79 / 159 * 100%));
  }

  .p-cpq-flow__inner {
    max-width: 540px;
    margin: 0 auto;
    padding: 0 10px;
  }

  /* Flow だけ Figma の日本語ラベルが英字ラベルの 30px 下（他セクションは 33px 下） */
  .p-cpq-flow .p-cpq-heading__ja {
    margin-top: 2.9px;
  }

  .p-cpq-flow__title {
    /* 日本語ラベルの位置に合わせて調整（この下は Figma と同じ位置） */
    margin-top: 29.6px;
    font-size: 20px;
    line-height: calc(32 / 20);
    letter-spacing: calc(-0.8 / 20 * 1em);
  }

  .p-cpq-flow__steps {
    margin-top: 15px;
  }

  .p-cpq-flow__cards {
    gap: 8px;
    max-width: 352px;
    margin-top: 32px;
  }

  .p-cpq-flow__card {
    gap: 3px;
    min-height: 134px;
    padding: 16px 2px;
  }

  .p-cpq-flow__card-icon {
    width: 36px;
    height: 36px;
  }

  .p-cpq-flow__card-text {
    font-size: 14px;
    line-height: 1.5;
    /* SP の Figma に字間の指定は無い（PC は 0.48px） */
    letter-spacing: normal;
  }

  .p-cpq-flow__arrows {
    width: 261px;
    margin-top: 24px;
  }

  .p-cpq-flow__title--solution {
    margin-top: 24px;
    /* SP はこの見出しだけ 22px / 行間 1.5（8工程の見出しは 20px / 32px）。
       字間の指定も無い（同じ段の .p-cpq-flow__title が後に来るため、ここで打ち消す） */
    font-size: 22px;
    line-height: 1.5;
    letter-spacing: normal;
  }

  .p-cpq-flow__cards--solution {
    /* SP は解決カードだけ幅が違う（Figma: 課題 112 / 解決 115） */
    max-width: 355px;
    gap: 5px;
    margin-top: 24px;
  }

  .p-cpq-flow__cards--solution .p-cpq-flow__card {
    gap: 9px;
    padding: 12px 0;
  }

  /* Figma SP は解決カードだけ字間が入る（1・3枚目 -0.56px / 2枚目 -0.7px）。
     2枚目の値にそろえると3枚とも Figma と同じ行数（3行）になる */
  .p-cpq-flow__cards--solution .p-cpq-flow__card-text {
    letter-spacing: calc(-0.7 / 14 * 1em);
  }

  .p-cpq-flow__card-icon {
    width: 36px;
    height: 36px;
  }

  .p-cpq-flow__cards--solution .p-cpq-flow__card-icon {
    width: 30px;
    height: 30px;
  }

  .p-cpq-flow__cpq {
    margin-top: 24px;
    padding-top: 24.5px;
    padding-bottom: calc(36 / 355 * 100%);
    background-image: url(../img/cpq/flow-cpq-bg-sp.jpg);
    /* Figma の SP はパネルに影が無い */
    box-shadow: none;
  }

  .p-cpq-flow__cpq-title {
    font-size: 20px;
    /* 行の高さは PC と同じ 27px（文字サイズが変わるので比率を取り直す） */
    line-height: calc(27 / 20);
  }

  /* Figma の SP には「共通マスタ」のボックスが無い（確認事項 G-12）。
     戻すときはこの指定を消すだけでよい */
  .p-cpq-flow__cpq-master {
    display: none;
  }

  .p-cpq-flow__cpq-figure {
    margin-top: 14.5px;
    padding: 0 calc(16 / 355 * 100%);
  }

  /* SP は分岐せず、CPQ 図から1枚目のカードへ1本だけ（Figma SP どおり）。
     線は図の中の cpq の箱の下端から始まる */
  .p-cpq-flow__branch {
    top: calc(347.244 / 360 * 100%);
  }

  .p-cpq-flow__branch img {
    aspect-ratio: 355 / 111.756;
  }

  .p-cpq-flow__results {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: calc(63 / 355 * 100%);
    max-width: 335px;
    margin-inline: auto;
  }

  .p-cpq-flow__result {
    padding: 22px 19px 23px;
  }

  .p-cpq-flow__result--af {
    padding: 21px 19px 25px;
  }

  .p-cpq-flow__result-title {
    /* Figma は 16px。ディレクターのご指示で 1.25 倍にしている（2026-09-29）。
       行の高さ・字間は比率のまま（行送り 32px → 40px） */
    font-size: 20px;
    line-height: calc(32 / 16);
    letter-spacing: calc(-0.16 / 16 * 1em);
  }

  .p-cpq-flow__pills {
    margin-top: 10px;
  }

  .p-cpq-flow__result--af .p-cpq-flow__pills {
    margin-top: 6px;
  }

  .p-cpq-flow__pill {
    min-height: 44px;
    /* Figma SP は文字の箱が 294px（ピル 296px）でほぼ余白なし。
       余白を付けると「過去事例〜」が2行になるため詰める */
    padding: 6px 1px;
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: calc(-0.14 / 14 * 1em);
  }

  .p-cpq-flow__pill + .p-cpq-flow__pill {
    margin-top: 16px;
  }

  .p-cpq-flow__result-note {
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: calc(-0.12 / 12 * 1em);
  }

  .p-cpq-flow__result-footer {
    margin-top: 16px;
    font-size: 16px;
    line-height: 1.8;
    letter-spacing: calc(-0.16 / 16 * 1em);
  }

  .p-cpq-flow__result--af .p-cpq-flow__result-footer {
    margin-top: 16px;
    line-height: 1.8;
  }
}

/* ==================================================
   Verification（JSOL社内先行導入・検証）
   ・左に文章、右に箱（As-Is／To-Be の比較・説明・項目4つ）の2列
   ・2026-09-29 に新デザイン（Figma 2060:294 / 2060:267）へ差し替えた。
     それまでの数値カード2枚とまとめの箱は無くなった
   ・箱の高さ（PC 309px / SP 376px）は min-height に写していない。
     上下の padding と中身で決まり、デザインの文字量のときにこの高さになる
================================================== */
.p-cpq-verification {
  /* 下は Figma の「箱の下端〜セクションの下端」178px */
  padding: 104px 0 178px;
  background: var(--gradient-primary);
}

.p-cpq-verification__inner {
  max-width: calc(var(--container) + 60px);
  margin: 0 auto;
  padding: 0 30px;
}

.p-cpq-verification__body {
  display: grid;
  grid-template-columns: 486fr 504fr;
  gap: calc(66 / 1056 * 100%);
  /* 左右の列を上ぞろえにする（既定の stretch だと箱が左の列の高さまで伸びる） */
  align-items: start;
  margin-top: 99px;
}

/* 左の列の位置は、Figma のレンダリング（実際の表示）と実装のスクリーンショットを
   重ねて合わせている。Figma のテキストボックスの座標どおりに置くと、Noto Sans JP は
   文字が Figma より下に出る（36px で 2px、16px で 1px）ため、そのぶんを余白で吸収した */
.p-cpq-verification__title {
  font-size: 36px;
  font-weight: 700;
  line-height: calc(52 / 36);
  letter-spacing: normal;
  color: var(--color-white);
}

.p-cpq-verification__lead {
  margin-top: 24px;
  font-size: 16px;
  font-weight: 700;
  line-height: calc(30 / 16);
  letter-spacing: normal;
  color: var(--color-white);
}

.p-cpq-verification__note {
  /* Figma のレンダリングで、リード文の最終行と注記の1行目の間隔を実測して合わせた
     （文字の上端どうしの距離 34px。差し替え前のデザインは 64px） */
  margin-top: 4px;
  font-size: 12px;
  font-weight: 500;
  line-height: calc(27 / 12);
  letter-spacing: normal;
  color: var(--color-white);
}

/* 右の箱。見た目（背景・枠・角丸・影）は差し替え前の数値カードと同じ値 */
.p-cpq-verification__panel {
  /* 枠 1px を足して、Figma の「項目の下〜箱の下端」40px・左右 30px になる。
     上は Figma の座標では 29px だが、箱の中の文字は Figma のレンダリングに合わせて
     2〜3px 上げている（下の各指定）ため 27px */
  padding: 26px 29px 39px;
  border: 1px solid var(--color-white);
  border-radius: var(--radius-m);
  background: rgba(255, 255, 255, 0.2);
  box-shadow: var(--shadow-soft);
  color: var(--color-white);
}

/* As-Is → To-Be の行。
   2つの数字を「同じベースライン」にそろえるため、inline-block を並べている
   （inline-block は中の最後の行＝数字の行のベースラインでそろう）。
   inline-block の間に HTML の改行ぶんの空白が入らないよう、ここで文字サイズを 0 にする */
.p-cpq-verification__compare {
  /* Figma は As-Is 〜 To-Be のまとまりが箱の中央より 8.5px 右にある */
  padding-left: 17px;
  font-size: 0;
  line-height: 0;
  text-align: center;
}

.p-cpq-verification__time {
  display: inline-block;
  vertical-align: baseline;
}

.p-cpq-verification__time--before {
  color: rgba(255, 255, 255, 0.8);
}

.p-cpq-verification__time-label {
  /* Figma はラベルが数字の中央より左（数字だけの中央あたり）にある */
  padding-right: 33px;
  font-size: 14px;
  font-weight: 700;
  /* Figma は「自動」。Chrome の normal の実値（20px）を固定値で書いている。
     normal のままだと Firefox は 20.27px になり、下に積む要素が少しずつずれるため */
  line-height: calc(20 / 14);
  letter-spacing: normal;
}

.p-cpq-verification__time--before .p-cpq-verification__time-label {
  padding-right: 11px;
}

.p-cpq-verification__number {
  /* To-Be：ラベルの下端から数字の行の上端まで */
  margin-top: 5px;
  letter-spacing: normal;
  white-space: nowrap;
}

.p-cpq-verification__time--before .p-cpq-verification__number {
  /* As-Is：数字が小さいぶん行の箱が文字より高く、ラベルの箱と 4px 重なる */
  margin-top: -4px;
}

/* 数字と単位。reset.css が span に font-weight を直接当てるため、span 自身に書く */
.p-cpq-verification__number-value,
.p-cpq-verification__number-unit {
  font-weight: 700;
  line-height: 52px;
}

.p-cpq-verification__number-value {
  font-size: 80px;
}

.p-cpq-verification__number-unit {
  font-size: 36px;
}

.p-cpq-verification__time--before .p-cpq-verification__number-value {
  font-size: 42px;
}

.p-cpq-verification__time--before .p-cpq-verification__number-unit {
  font-size: 24px;
}

.p-cpq-verification__arrow {
  display: inline-block;
  width: 32.5px;
  height: auto;
  /* 数字のベースラインから矢印の下端まで（Figma：矢印の中心は箱の上端から 92px） */
  vertical-align: 9.95px;
  margin: 0 20.35px 0 15.85px;
}

.p-cpq-verification__result {
  margin-top: 2.3px;
  font-size: 18px;
  font-weight: 700;
  /* Figma は「自動」。Chrome の normal の実値（26px）を固定値で書いている（ラベルと同じ理由） */
  line-height: calc(26 / 18);
  letter-spacing: normal;
  text-align: center;
}

/* 項目（4つ固定）。HTML の順に「左の列の上 → 下 → 右の列の上 → 下」と並べる。
   Figma は左右の列の幅が違う（191px / 238px） */
.p-cpq-verification__pills {
  display: grid;
  grid-template-columns: 191fr 238fr;
  grid-template-rows: repeat(2, auto);
  grid-auto-flow: column;
  column-gap: 15px;
  row-gap: 12px;
  margin-top: 17.7px;
}

.p-cpq-verification__pill {
  /* 高さは 枠 1 ＋ 4 ＋ 行 30 ＋ 5 ＋ 枠 1 ＝ 41px（Figma の文字の位置：枠の上端から 5px） */
  padding: 4px 8px 5px;
  border: 1px solid var(--color-white);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.3);
  font-size: 14px;
  font-weight: 500;
  line-height: calc(30 / 14);
  letter-spacing: calc(-0.56 / 14 * 1em);
  text-align: center;
}

/* 1140px 以下 — 右の列が 504px より狭くなり、項目の2列が入らなくなるため、
   箱の中を SP のデザイン（項目1列・数字は SP のサイズ）に切り替える。
   768〜1140px のデザインは無く、幅の狭い箱として描かれているのは SP だけのため */
@media screen and (max-width: 1140px) {
  .p-cpq-verification__panel {
    /* 枠 1px を足して、Figma（SP）の「項目の下〜箱の下端」31px になる。
       上は PC と同じく、文字を Figma のレンダリングに合わせて 2px 上げている */
    padding: 27px 15px 30px;
  }

  .p-cpq-verification__compare {
    /* SP は As-Is 〜 To-Be のまとまりが箱のほぼ中央（0.4px 左）にある */
    padding-left: 0;
  }

  .p-cpq-verification__time-label {
    padding-right: 39px;
  }

  .p-cpq-verification__time--before .p-cpq-verification__time-label {
    padding-right: 9px;
  }

  .p-cpq-verification__number {
    margin-top: 5.72px;
  }

  .p-cpq-verification__time--before .p-cpq-verification__number {
    margin-top: -2.83px;
  }

  .p-cpq-verification__number-value {
    font-size: 72px;
  }

  .p-cpq-verification__number-unit {
    font-size: 32px;
  }

  .p-cpq-verification__time--before .p-cpq-verification__number-value {
    font-size: 32px;
  }

  .p-cpq-verification__time--before .p-cpq-verification__number-unit {
    font-size: 22px;
  }

  .p-cpq-verification__arrow {
    /* Figma（SP）：矢印の中心は箱の上端から 93px */
    vertical-align: 7.35px;
    margin: 0 15.05px 0 10.7px;
  }

  .p-cpq-verification__result {
    margin-top: 3.19px;
    font-size: 16px;
    line-height: calc(24 / 16);
  }

  .p-cpq-verification__pills {
    grid-template-columns: 238px;
    grid-template-rows: none;
    grid-auto-flow: row;
    justify-content: center;
    row-gap: 8px;
    margin-top: 15.09px;
  }

  .p-cpq-verification__pill {
    /* 高さは 枠 1 ＋ 2.5 ＋ 行 30 ＋ 3.5 ＋ 枠 1 ＝ 38px。
       Figma は文字の位置が項目ごとに 3px / 4px とばらついているため、中間の 3.5px にそろえた */
    padding: 2.5px 8px 3.5px;
  }
}

@media screen and (max-width: 767px) {
  .p-cpq-verification {
    /* 下は Figma（SP）の「箱の下端〜フレームの下端」54px */
    padding: 54px 0 54px;
  }

  .p-cpq-verification__inner {
    max-width: 540px;
    margin: 0 auto;
    padding: 0 19px;
  }

  .p-cpq-verification__body {
    display: block;
    /* 日本語ラベルを 3.4px 下げたぶんを引いている */
    margin-top: 46px;
  }

  .p-cpq-verification__title {
    font-size: 20px;
    line-height: calc(32 / 20);
    letter-spacing: calc(-0.8 / 20 * 1em);
  }

  .p-cpq-verification__lead {
    margin-top: 12px;
    font-size: 14px;
    line-height: calc(23 / 14);
  }

  .p-cpq-verification__note {
    /* Figma のレンダリングの実測（リード文の下端 y=353 → 注記の上端 y=360） */
    margin-top: 7px;
    line-height: 1.5;
  }

  .p-cpq-verification__stats {
    margin-top: 29px;
  }
}

/* 374px 以下 — 箱の中身（As-Is → To-Be の行 253.75px、説明 268px）が箱に入らなくなるため、
   375px のときの大きさから幅なりに縮める */
@media screen and (max-width: 374px) {
  .p-cpq-verification__number-value,
  .p-cpq-verification__number-unit {
    line-height: calc(52 / 375 * 100vw);
  }

  .p-cpq-verification__number-value {
    font-size: calc(72 / 375 * 100vw);
  }

  .p-cpq-verification__number-unit {
    font-size: calc(32 / 375 * 100vw);
  }

  .p-cpq-verification__time--before .p-cpq-verification__number-value {
    font-size: calc(32 / 375 * 100vw);
  }

  .p-cpq-verification__time--before .p-cpq-verification__number-unit {
    font-size: calc(22 / 375 * 100vw);
  }

  .p-cpq-verification__arrow {
    width: calc(32.5 / 375 * 100vw);
    vertical-align: calc(7.35 / 375 * 100vw);
    margin: 0 calc(15.05 / 375 * 100vw) 0 calc(10.7 / 375 * 100vw);
  }

  .p-cpq-verification__result {
    font-size: calc(16 / 375 * 100vw);
  }
}

/* ==================================================
   Contents
   ・「Contents 本体（__body）」と「中間CTA（__cta-area）」は独立したブロック。
     本体だけを HTML から外しても中間CTA が残るよう、上の余白は __cta-area の
     margin-top に持たせ、:first-child になったときはセクションの padding に任せる
   ・左上の白い円は画像ではなく CSS。Figma はフレームの左上でマスクしているので、
     セクションの overflow: hidden で同じ形になる
   ・英字ラベルだけ ExtraBold（他のセクションは Bold）
================================================== */
.p-cpq-contents {
  position: relative;
  z-index: 0;
  padding: 104px 0;
  background: var(--color-bg-gray);
  overflow: hidden;
}

/* 装飾の円は本体と一緒に消えるよう __body の中に置く（位置の基準はセクション） */
.p-cpq-contents__circle {
  position: absolute;
  top: -251px;
  left: -154px;
  z-index: -1;
  width: 769px;
  height: 769px;
  border-radius: 50%;
  background: var(--color-white);
  pointer-events: none;
}

.p-cpq-contents__inner,
.p-cpq-contents__cta-area {
  max-width: calc(var(--container) + 60px);
  margin-inline: auto;
  padding: 0 30px;
}

/* Figma のこの見出しには字間の指定が無い（SP は -0.56px の指定あり） */
.p-cpq-contents .p-cpq-heading__ja {
  letter-spacing: normal;
}

.p-cpq-heading--en-extrabold .p-cpq-heading__en {
  font-weight: 800;
}

.p-cpq-contents__title {
  margin-top: 83px;
  font-size: 36px;
  font-weight: 700;
  line-height: calc(52 / 36);
  letter-spacing: normal;
  color: var(--color-text);
}

.p-cpq-contents__lead {
  margin-top: 23px;
  font-size: 16px;
  font-weight: 700;
  line-height: calc(27 / 16);
  letter-spacing: normal;
  color: var(--color-text);
}

.p-cpq-contents__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 24px;
  row-gap: 41px;
  margin-top: 76px;
}

.p-cpq-contents__list.is-animating {
  overflow: hidden;
  transition: height 0.4s ease;
}

/* カードは行の高さいっぱいに伸ばし、矢印を下ぞろえにする
   （タイトルの行数が違っても矢印の位置がそろう） */
.p-cpq-contents__card {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: var(--color-text);
}

.p-cpq-contents__thumb {
  position: relative;
  display: block;
  border-radius: 7px;
  overflow: hidden;
}

/* 差し替え画像の比率が違っても枠が崩れないようにする */
.p-cpq-contents__thumb img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 336 / 205;
  object-fit: cover;
}

/* 幅は文字数に合わせて伸びる。角丸は __thumb の overflow: hidden で切られる */
.p-cpq-contents__tag {
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  height: 33px;
  padding: 0 18px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: normal;
  color: var(--color-white);
}

.p-cpq-contents__tag--purple {
  background: #b875ff;
}

.p-cpq-contents__tag--blue {
  background: #2124cc;
}

.p-cpq-contents__tag--violet {
  background: #4740f0;
}

.p-cpq-contents__tag--red {
  background: #af272f;
}

.p-cpq-contents__tag--black {
  background: #090c20;
}

.p-cpq-contents__card-title {
  margin-top: 16px;
  font-size: 17px;
  font-weight: 700;
  line-height: calc(27 / 17);
  letter-spacing: calc(-0.51 / 17 * 1em);
  color: var(--color-text);
}

/* flex-grow でカードの余りを吸わせ、矢印を下端に落とす。
   字間は Figma の6枚中5枚が -0.42px（1枚目だけ指定なし）。多数派に合わせている */
.p-cpq-contents__card-text {
  flex-grow: 1;
  margin-top: 13px;
  font-size: 14px;
  font-weight: 400;
  line-height: calc(24 / 14);
  letter-spacing: calc(-0.42 / 14 * 1em);
  color: var(--color-text);
}

.p-cpq-contents__arrow {
  width: 25.6px;
  height: 24px;
  margin: 8px 3.4px 0 auto;
  background: url(../img/cpq/icon-arrow-right.svg) no-repeat center center / 100% 100%;
}

/* PC は6件でボタンが出ないため、Figma に値が無い。FAQ と同じ余白にそろえる */
.p-cpq-contents__more {
  margin-top: 40px;
  text-align: center;
}

.p-cpq-contents__cta-area {
  margin-top: 84px;
}

/* Contents 本体をコメントアウトしたときは、上の余白をセクションの padding に任せる */
.p-cpq-contents__cta-area:first-child {
  margin-top: 0;
}

.p-cpq-contents-cta {
  padding: 38px 20px 44px;
  border-radius: var(--radius-l);
  /* Figma は #8519b3 → #1c167d。LP 内のグラデーションは --gradient-primary に統一（承認済み） */
  background: var(--gradient-primary);
  text-align: center;
}

.p-cpq-contents-cta__title {
  font-size: 24px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: calc(-0.96 / 24 * 1em);
  color: var(--color-white);
}

.p-cpq-contents-cta__text {
  margin-top: 10px;
  font-size: 14px;
  font-weight: 500;
  line-height: normal;
  letter-spacing: calc(-0.56 / 14 * 1em);
  color: var(--color-white);
}

.p-cpq-contents-cta__button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9.44px;
  width: 473px;
  max-width: 100%;
  min-height: 65px;
  margin: 28px auto 0;
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  background: var(--color-white);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: normal;
  color: var(--color-navy);
}

.p-cpq-contents-cta__button::before {
  content: "";
  flex-shrink: 0;
  width: 25px;
  height: 17.405px;
  background: url(../img/cpq/icon-mail-purple.svg) no-repeat center center / 100% 100%;
}

@media screen and (max-width: 767px) {
  /* Verification との間の 53px は Figma では白（ページの地色）。
     Verification の背景は紫なので、Contents 側の外余白として持つ */
  .p-cpq-contents {
    margin-top: 53px;
    padding: 56px 0;
  }

  .p-cpq-contents__circle {
    top: -108.37px;
    left: -57.26px;
    width: 325.9px;
    height: 325.9px;
  }

  .p-cpq-contents__inner,
  .p-cpq-contents__cta-area {
    max-width: 540px;
    padding: 0 20px;
  }

  .p-cpq-contents .p-cpq-heading__ja {
    letter-spacing: calc(-0.56 / 14 * 1em);
  }

  .p-cpq-contents__title {
    /* 日本語ラベルを 3.4px 下げたぶんを引いている */
    margin-top: 43.6px;
    font-size: 20px;
    line-height: calc(32 / 20);
    letter-spacing: calc(-0.2 / 20 * 1em);
  }

  .p-cpq-contents__lead {
    margin-top: 19px;
    font-size: 14px;
    line-height: calc(23 / 14);
  }

  .p-cpq-contents__list {
    grid-template-columns: 1fr;
    row-gap: 40px;
    margin-top: 31px;
  }

  .p-cpq-contents__card-title {
    margin-top: 8px;
  }

  /* SP の Figma はカード本文に字間の指定が無い（PC は6枚中5枚が -0.42px）。
     指定を残すと Figma と折り返し位置がずれる（3枚とも実測） */
  .p-cpq-contents__card-text {
    margin-top: 16px;
    letter-spacing: normal;
  }

  .p-cpq-contents__arrow {
    width: 18.8px;
    height: 13.3px;
    margin: 4px 6.5px 0 auto;
  }

  .p-cpq-contents__more {
    margin-top: 57px;
  }

  .p-cpq-contents__cta-area {
    margin-top: 64px;
  }

  .p-cpq-contents-cta {
    padding: 40px 12px 46px;
    border-radius: var(--radius-m);
  }

  .p-cpq-contents-cta__title {
    font-size: 20px;
    line-height: 1.6;
    letter-spacing: calc(-0.8 / 20 * 1em);
  }

  .p-cpq-contents-cta__text {
    margin-top: 13px;
    line-height: 1.6;
    letter-spacing: normal;
  }

  .p-cpq-contents-cta__button {
    gap: 5px;
    width: 311px;
    min-height: 44px;
    margin-top: 29px;
    padding: 8px 12px;
    font-size: 14px;
    letter-spacing: calc(-0.28 / 14 * 1em);
  }

  .p-cpq-contents-cta__button::before {
    width: 18.64px;
    height: 13px;
  }
}

/* ==================================================
   Support Approach（JSOLの支援アプローチ）
   ・上部の写真は白のグラデーションを焼き込んだ画像（背景が白で確定しているため）
   ・中間CTA（.p-cpq-midcta）は Contents でも使う想定の共通ブロック
================================================== */
.p-cpq-support {
  position: relative;
  z-index: 0;
  padding: 104px 0 130px;
  background: var(--color-white);
  overflow: hidden;
}

/* 右上の写真。画像自体に白へのフェードが入っている */
.p-cpq-support__photo {
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
  width: calc(680 / 1440 * 100%);
  aspect-ratio: 680 / 698.4;
  background: url(../img/cpq/support-photo.jpg) no-repeat right top / 100% 100%;
  pointer-events: none;
}

.p-cpq-support__inner {
  max-width: calc(var(--container) + 60px);
  margin: 0 auto;
  padding: 0 30px;
}

.p-cpq-support__title {
  margin-top: 51px;
  font-size: 36px;
  font-weight: 700;
  line-height: calc(52 / 36);
  letter-spacing: normal;
  color: var(--color-text);
  text-align: center;
}

.p-cpq-support__lead {
  margin-top: 47px;
  font-size: 16px;
  font-weight: 700;
  line-height: calc(33 / 16);
  letter-spacing: normal;
  color: var(--color-text);
  text-align: center;
}

/* 強調部分。下に 8px のマーカーを敷く（Flow のリードと同じ作り） */
.p-cpq-support__lead-mark {
  font-size: 18px;
  font-weight: 700;
  /* 16px の本文と同じ 33px の行に収める */
  line-height: calc(33 / 18);
  letter-spacing: normal;
  color: #261782;
  background-image: linear-gradient(var(--color-pale-line), var(--color-pale-line));
  background-repeat: no-repeat;
  background-size: 100% 8px;
  background-position: 0 calc(100% - 3px);
}

/* 業務改善アセスメントのステップ */
.p-cpq-support__assessment {
  margin-top: 60px;
  padding: 40px 53px 22px;
  border-radius: var(--radius-l);
  background: var(--color-pale);
  box-shadow: 0 0 7px rgba(197, 197, 197, 0.2);
}

.p-cpq-support__assessment-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 24px;
  font-weight: 700;
  line-height: calc(30 / 24);
  letter-spacing: normal;
  color: #491894;
}

/* 文字全体を span で包んでいる（flex の直下に <span class="p-cpq-nowrap"> を置くと、
   そこだけ別のフレックスアイテムになって並びが崩れるため）。
   reset.css が span に font-weight: normal を当てるので、太さを書き直している */
.p-cpq-support__assessment-title-text {
  font-weight: 700;
}

.p-cpq-support__assessment-title::before {
  content: "";
  flex-shrink: 0;
  width: 33px;
  height: 33px;
  background: url(../img/cpq/icon-check-purple.svg) no-repeat center center / contain;
}

.p-cpq-support__steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: calc(22 / 950 * 100%);
  /* バッジがカードの上に 19px はみ出す分は、この余白に含まれている */
  margin-top: 60px;
}

.p-cpq-support__step {
  position: relative;
  min-height: 232px;
  /* 下の 25px は「本文が増えても下端にくっつかない」ための余白。
     Figma の4枚のうち、本文がいちばん長いカード（5行）の下の余白に合わせている */
  padding: 41px 17px 25px;
  border-radius: var(--radius-s);
  background: var(--color-white);
  box-shadow: 0 0 7px rgba(197, 197, 197, 0.2);
  text-align: center;
}

/* 番号のバッジ。カードの上に 19px はみ出し、下に三角がつく */
.p-cpq-support__step-number {
  position: absolute;
  top: -19px;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 41px;
  height: 37px;
  background: var(--color-primary);
  transform: translateX(-50%);
  font-family: var(--font-en);
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: normal;
  color: var(--color-white);
}

.p-cpq-support__step-number::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 10px;
  height: 8px;
  background: url(../img/cpq/icon-step-arrow.svg) no-repeat center center / contain;
  transform: translateX(-50%);
}

.p-cpq-support__step-title {
  font-size: 18px;
  font-weight: 700;
  line-height: calc(30 / 18);
  letter-spacing: normal;
  color: var(--color-primary);
}

.p-cpq-support__step-text {
  margin-top: 16px;
  font-size: 14px;
  font-weight: 500;
  line-height: calc(24 / 14);
  letter-spacing: calc(-0.56 / 14 * 1em);
  color: var(--color-text);
  text-align: left;
}

.p-cpq-support__assessment-note {
  margin-top: 12px;
  font-size: 12px;
  font-weight: 500;
  line-height: calc(27 / 12);
  letter-spacing: normal;
  color: var(--color-text);
  text-align: right;
}

/* 中間CTA（こんな方におすすめ） */
.p-cpq-midcta {
  position: relative;
  z-index: 0;
  margin-top: 56px;
  padding: 41px 0 54px;
  border-radius: var(--radius-l);
  background: url(../img/cpq/support-cta-bg.jpg) no-repeat center center / cover;
  overflow: hidden;
}

/* 写真の上にグラデーションを 90% で重ねる（--gradient-primary と同じ2色） */
.p-cpq-midcta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(145, 2, 187, 0.9), rgba(19, 15, 123, 0.9));
}

.p-cpq-midcta__title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-size: 28px;
  font-weight: 700;
  line-height: calc(38 / 28);
  letter-spacing: normal;
  color: var(--color-white);
}

.p-cpq-midcta__title::before {
  content: "";
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  background: url(../img/cpq/icon-check-white.svg) no-repeat center center / contain;
}

.p-cpq-midcta__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 6px;
}

.p-cpq-midcta__item {
  position: relative;
  padding-top: 106px;
  font-size: 18px;
  font-weight: 700;
  line-height: calc(28 / 18);
  letter-spacing: calc(0.54 / 18 * 1em);
  color: var(--color-white);
  text-align: center;
  background-repeat: no-repeat;
  background-position: center 0;
}

/* 項目の間の破線。Figma はアイコンの少し上からテキストの下まで */
.p-cpq-midcta__item + .p-cpq-midcta__item::before {
  content: "";
  position: absolute;
  top: 26px;
  left: 0;
  width: 0;
  height: 126px;
  border-left: 1px dashed var(--color-white);
}

.p-cpq-midcta__item:nth-child(1) {
  background-image: url(../img/cpq/icon-doc-search.svg);
  background-size: 63px 63px;
  background-position: center 26px;
}

.p-cpq-midcta__item:nth-child(2) {
  background-image: url(../img/cpq/icon-integrate.svg);
  background-size: 54px 54px;
  background-position: center 32px;
}

.p-cpq-midcta__item:nth-child(3) {
  background-image: url(../img/cpq/icon-money-bag.svg);
  background-size: 74px 74px;
  background-position: center 22px;
}

.p-cpq-midcta__button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13.67px;
  width: 459px;
  max-width: 100%;
  min-height: 65px;
  margin: 45px auto 0;
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  background: var(--color-white);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: normal;
  color: #261682;
}

.p-cpq-midcta__button::before {
  content: "";
  flex-shrink: 0;
  width: 25.024px;
  height: 18.193px;
  background: url(../img/cpq/icon-mail-purple.svg) no-repeat center center / contain;
}

/* 1024px 以下は4列だとカードが 200px を切り、本文が7〜8文字で折り返して読みにくい。
   2列に落とす（Figma には中間幅のデザインが無いため、読みやすさを優先した） */
@media screen and (max-width: 1024px) and (min-width: 768px) {
  .p-cpq-support__steps {
    grid-template-columns: repeat(2, 1fr);
    column-gap: calc(22 / 950 * 100%);
    row-gap: 40px;
  }
}

@media screen and (max-width: 767px) {
  .p-cpq-support {
    padding: 56px 0 204px;
  }

  .p-cpq-support__photo {
    width: 100%;
    aspect-ratio: 375 / 368;
    background-image: url(../img/cpq/support-photo-sp.jpg);
  }

  .p-cpq-support__inner {
    max-width: 540px;
    margin: 0 auto;
    padding: 0 20px;
  }

  /* 英字ラベルが 335px に収まらず2行になるため、見出しだけ画面幅いっぱいに戻す */
  .p-cpq-support .p-cpq-heading {
    margin-inline: -20px;
  }

  .p-cpq-support__title {
    /* 日本語ラベルを 3.4px 下げたぶんを引いている */
    margin-top: 46px;
    font-size: 20px;
    line-height: calc(32 / 20);
    letter-spacing: calc(-0.2 / 20 * 1em);
  }

  .p-cpq-support__lead {
    /* Figma の本文だけ箱が 356px（他は 320〜335px）。1行目の折り返しを合わせる */
    margin: 32px -10.5px 0;
    font-size: 14px;
    line-height: calc(23 / 14);
  }

  .p-cpq-support__lead-mark {
    font-size: 16px;
    line-height: calc(23 / 16);
    background-size: 100% 8px;
    background-position: 0 calc(100% - 1px);
  }

  .p-cpq-support__assessment {
    margin-top: 37px;
    padding: 32px 13px 40px;
  }

  .p-cpq-support__assessment-title {
    align-items: flex-start;
    justify-content: flex-start;
    gap: 7px;
    /* 右の余白は付けない（2026-09-30）。2行目「確認・整理する内容（一例）」は 260px あり、
       右にも 7px 取ると 375px のとき入る幅が 255px になって、Safari / Firefox では「例）」だけが
       3行目に落ちていた（Chrome は行末の「）」を半分の幅に詰めるので入っていた）。
       文字は左寄せなので、右の余白を外しても見た目は変わらない */
    padding: 0 0 0 7px;
    font-size: 20px;
    line-height: calc(30 / 20);
    text-align: left;
  }

  .p-cpq-support__steps {
    grid-template-columns: 1fr;
    gap: 40px;
    margin-top: 41px;
  }

  .p-cpq-support__step {
    min-height: 185px;
    /* 下の 26px は PC と同じ考え方。Figma の3行のカードの下の余白に合わせた
       （4行になる3枚目は Figma 上で本文の下が 2px しかなく、基準にできない） */
    padding: 41px 18px 26px;
  }

  .p-cpq-support__step-text {
    margin-top: 16px;
  }

  .p-cpq-support__assessment-note {
    width: 291px;
    margin-top: 16px;
    margin-left: auto;
    line-height: 1.5;
  }

  .p-cpq-midcta {
    margin-top: 48px;
    padding: 44px 0 47px;
  }

  .p-cpq-midcta__title {
    gap: 9px;
    font-size: 26px;
    line-height: calc(38 / 26);
  }

  .p-cpq-midcta__list {
    grid-template-columns: 1fr;
    row-gap: 20px;
    margin-top: 28px;
  }

  .p-cpq-midcta__item {
    display: flex;
    align-items: center;
    min-height: 90px;
    padding-top: 0;
    padding-left: 139px;
    text-align: left;
  }

  /* 破線は項目と項目の間（すき間の中央）に引く */
  .p-cpq-midcta__item + .p-cpq-midcta__item::before {
    top: -10.5px;
    left: 50%;
    width: 126px;
    height: 0;
    border-top: 1px dashed var(--color-white);
    border-left: 0;
    transform: translateX(-50%);
  }

  .p-cpq-midcta__item:nth-child(1) {
    background-position: 66px center;
  }

  .p-cpq-midcta__item:nth-child(2) {
    background-position: 70px center;
  }

  .p-cpq-midcta__item:nth-child(3) {
    background-position: 60px center;
  }

  .p-cpq-midcta__button {
    gap: 6px;
    width: 308px;
    min-height: 44px;
    margin-top: 37px;
    padding: 8px 12px;
    font-size: 14px;
    letter-spacing: calc(-0.28 / 14 * 1em);
  }

  .p-cpq-midcta__button::before {
    width: 18.461px;
    height: 13px;
  }
}

/* ==================================================
   Reason / Result
   ・1枚目のパネル: 既存 .why-item__contents03（style.css 1562-1651 ほか）を流用
   ・2枚目のパネル: 既存 .why-item__content-list（style.css 1462-1556 ほか）を流用
   ・style.css は変更せず、--cpq モディファイアで差分だけを上書きする
   ・既存は .index-why の中で描画される前提のため、背景と白い円は
     .p-cpq-reason 側に新規で書いている
   ・文字の指定は、その文字を持つ要素自身に書く（reset.css v1 が
     p / span / li の font-weight を打ち消し、親から継承されないため）
================================================== */
.p-cpq-reason {
  position: relative;
  z-index: 1;
  overflow: hidden;
  padding: 104px 0 80px;
  background: var(--color-bg-gray);
}

/* 左上の白い円（Contents と共通の装飾） */
.p-cpq-reason::before {
  content: "";
  position: absolute;
  top: -252px;
  left: -150px;
  z-index: -1;
  width: 769px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: var(--color-white);
}

.p-cpq-reason__inner {
  max-width: calc(var(--container) + 60px);
  margin: 0 auto;
  padding: 0 30px;
}

.p-cpq-reason__lead {
  margin-top: 52px;
  font-size: 16px;
  font-weight: 700;
  line-height: calc(30 / 16);
  letter-spacing: 0;
  color: var(--color-text);
  text-align: center;
}

/* --- 1枚目のパネル（既存 .why-item__contents03 の差分） --- */
.why-item__contents03--cpq {
  max-width: none;
  margin: 48px 0 0;
  border-radius: var(--radius-l);
  background: #f1f1f1; /* Figma の値 */
  overflow: hidden;
}

.why-item__contents03--cpq .why-item__contents03-title {
  padding: 11px 16px;
  background: #37178b; /* Figma の値 */
  font-size: 20px;
  font-weight: 700;
  line-height: calc(38.4 / 20);
  letter-spacing: 0.04em;
  color: var(--color-white);
}

/* 円は flex: 1 なので、数を増やしても横幅は自動で調整される。
   4つに増やすと PC で円が 287px → 205px になり、数字（54px）が円の縁に近づくため、
   その場合は下の -number の font-size を 46px 程度に下げる */
.why-item__contents03--cpq .why-item__contents03-items {
  gap: 40px;
  margin-top: 26px;
  padding: 0 58px;
}

.why-item__contents03--cpq .why-item__contents03-medal {
  box-shadow: var(--shadow-soft);
}

.why-item__contents03--cpq .why-item__contents03-text {
  /* 既存は Be Vietnam Pro が先頭。日本語はフォールバックで同じ表示になるが、デザインに合わせて明示する */
  font-family: var(--font-jp);
  font-size: 22px;
  font-weight: 700;
  line-height: calc(30.8 / 22);
  letter-spacing: calc(0.8 / 22 * 1em);
}

.why-item__contents03--cpq .why-item__contents03-number {
  margin-bottom: 4px;
  font-size: 54px;
  font-weight: 700;
  line-height: calc(64.8 / 54);
  letter-spacing: calc(0.8 / 54 * 1em);
}

.why-item__contents03--cpq .why-item__contents03-unit {
  font-size: 32px;
  font-weight: 700;
  line-height: calc(38.4 / 32);
  letter-spacing: calc(0.8 / 32 * 1em);
}

.why-item__contents03--cpq .why-item__contents03-awards {
  margin-top: 28px;
  padding: 0 78px 40px;
}

/* --- 2枚目のパネル（既存 .why-item__content-list の差分） --- */
.p-cpq-reason__experts {
  margin-top: 56px;
  padding: 28px 30px 32px;
  border-radius: var(--radius-l);
  background: var(--gradient-primary);
}

.p-cpq-reason__experts-title {
  font-size: 20px;
  font-weight: 700;
  line-height: calc(38.4 / 20);
  letter-spacing: 0.04em;
  color: var(--color-white);
  text-align: center;
}

.why-item__contents--cpq {
  /* 既存は flex（横並び）だが、LP では中のリストを幅いっぱいに広げたいので block に戻す */
  display: block;
  max-width: none;
  margin: 24px 0 0;
}

/* カードは grid で4等分。高さは grid の stretch でそろう。
   ラベル行（区切り線の位置）は min-height 96px でそろえ、
   文字量が増えて 96px を超えた場合は JS（cpq.js）が4枚の最大値にそろえる
   ※ subgrid は Safari 16 以降のため使わない（既存サイトの対応範囲に合わせる） */
.why-item__contents--cpq .why-item__content-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.why-item__contents--cpq .why-item__content-item {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 209px;
  /* 上の余白はラベルの min-height 側で確保する（下線の位置を Figma の 96px に合わせるため） */
  padding: 0 20px 12px;
  border-radius: var(--radius-m);
}

.why-item__contents--cpq .why-item__content-item-title {
  /* ラベルの文字量が変わっても、4枚の区切り線が同じ高さに来るようにする
     （border-box なので Figma の 96px と同値） */
  min-height: 96px;
  padding-bottom: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: calc(26 / 16);
  letter-spacing: 0;
}

.why-item__contents--cpq .why-item__content-item-number {
  /* 区切り線から下を使い、中身を天地中央に置く（subgrid の2行目の代わり）。
     数値と単位は支給ソース（style.css）と同じ横並びのまま。
     「31種類の資格を延べ」だけ width:100% で自分の行に送られるので、
     flex-direction は変えず、折り返した行を align-content でまとめて中央に置く */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  flex: 1;
  margin-top: 0;
  padding-top: 0;
}

.why-item__contents--cpq .why-item__content-item-text {
  width: 100%;
  margin-top: 20px;
  /* 数値の行送り（70.8px）で開く下の余白を詰める */
  margin-bottom: -12px;
}

.why-item__contents--cpq .why-item__content-item-text {
  font-size: 16px;
  font-weight: 700;
  line-height: calc(30.6 / 16);
  letter-spacing: 0.1em;
}

.why-item__contents--cpq .why-item__content-item-number-text {
  font-size: 40px;
  font-weight: 700;
  line-height: calc(70.8 / 40);
  letter-spacing: 0.1em;
}

.why-item__contents--cpq .why-item__content-item-unit {
  font-size: 20px;
  font-weight: 700;
  line-height: calc(35.4 / 20);
  letter-spacing: 0.1em;
}

/* 1280px 以下は既存と同じ考え方で vw スケーリング
   （既存の縮小指定（style.css 1739-1855）は --cpq 側が後勝ちで無効になるため、ここで書き直す） */
@media screen and (max-width: 1280px) {
  .p-cpq-reason {
    padding-top: calc(104 / 1280 * 100vw);
  }

  .why-item__contents03--cpq .why-item__contents03-title {
    font-size: max(calc(20 / 1280 * 100vw), 16px);
  }

  .why-item__contents03--cpq .why-item__contents03-items {
    gap: calc(40 / 1280 * 100vw);
    margin-top: calc(26 / 1280 * 100vw);
    padding: 0 calc(58 / 1280 * 100vw);
  }

  .why-item__contents03--cpq .why-item__contents03-medal {
    padding-top: calc(16 / 1280 * 100vw);
  }

  .why-item__contents03--cpq .why-item__contents03-text {
    font-size: max(calc(22 / 1280 * 100vw), 14px);
  }

  .why-item__contents03--cpq .why-item__contents03-number {
    font-size: calc(54 / 1280 * 100vw);
  }

  .why-item__contents03--cpq .why-item__contents03-unit {
    font-size: calc(32 / 1280 * 100vw);
  }

  .why-item__contents03--cpq .why-item__contents03-medal img {
    width: calc(70 / 1280 * 100vw);
  }

  .why-item__contents03--cpq .why-item__contents03-awards {
    margin-top: calc(28 / 1280 * 100vw);
    padding: 0 calc(78 / 1280 * 100vw) calc(40 / 1280 * 100vw);
  }

  .p-cpq-reason__experts {
    margin-top: calc(56 / 1280 * 100vw);
    padding: calc(31 / 1280 * 100vw) calc(30 / 1280 * 100vw) calc(32 / 1280 * 100vw);
  }

  .why-item__contents--cpq .why-item__content-list {
    gap: calc(20 / 1280 * 100vw);
  }

  .why-item__contents--cpq .why-item__content-item {
    padding: 0 calc(20 / 1280 * 100vw) calc(12 / 1280 * 100vw);
  }

  .why-item__contents--cpq .why-item__content-item-title {
    font-size: max(calc(16 / 1280 * 100vw), 14px);
  }

  .why-item__contents--cpq .why-item__content-item-text {
    margin-top: max(calc(20 / 1280 * 100vw), 12px);
    font-size: max(calc(16 / 1280 * 100vw), 12px);
  }

  .why-item__contents--cpq .why-item__content-item-number-text {
    font-size: calc(40 / 1280 * 100vw);
  }

  .why-item__contents--cpq .why-item__content-item-unit {
    font-size: calc(20 / 1280 * 100vw);
  }
}

/* 767px 以下は既存 TOP の SP 表示に合わせる（SP デザインが無いため）。
   PC 用に書いた差分がそのまま効かないよう、この段で値を戻す */
@media screen and (max-width: 767px) {
  .p-cpq-reason {
    padding: 60px 0 64px;
  }

  .p-cpq-reason::before {
    top: 16px;
    left: -183px;
    width: 420px;
  }

  .p-cpq-reason__inner {
    max-width: 540px;
    padding: 0 20px;
  }

  .p-cpq-reason__lead {
    /* 日本語ラベルを 3.4px 下げたぶんを引いている */
    margin-top: 24.6px;
    font-size: 14px;
    line-height: calc(23 / 14);
    text-align: left;
  }

  /* 本番 TOP はパネルに背景を持たず、セクションの背景に直接乗っている */
  .why-item__contents03--cpq {
    margin-top: 40px;
    background: transparent;
    border-radius: 0;
  }

  .why-item__contents03--cpq .why-item__contents03-title {
    padding: 8px;
    font-size: 16px;
    line-height: 1.4;
  }

  /* 本番 TOP と同じ幅（max-width 320 の中で 2 列 = 155px）に戻す。
     PC 用に足した左右 padding が残っていると 135px まで縮み、文字がはみ出す */
  .why-item__contents03--cpq .why-item__contents03-items {
    gap: 10px;
    margin: 15px auto 0;
    padding: 0;
  }

  /* 丸の白背景は本番と同じ。影は本番に無いので外す */
  .why-item__contents03--cpq .why-item__contents03-medal {
    padding-top: 10px;
    box-shadow: none;
  }

  .why-item__contents03--cpq .why-item__contents03-text {
    font-size: 14px;
  }

  .why-item__contents03--cpq .why-item__contents03-number {
    margin-bottom: 0;
    font-size: 28px;
  }

  .why-item__contents03--cpq .why-item__contents03-unit {
    font-size: 14px;
  }

  .why-item__contents03--cpq .why-item__contents03-medal img {
    width: 28px;
  }

  .why-item__contents03--cpq .why-item__contents03-awards {
    margin-top: 30px;
    padding: 0 20px 24px;
  }

  /* 本番 TOP の SP 表示に合わせ、背景を画面幅いっぱいに広げる。
     中身は 500px までに収める（左右の余白は最低 20px） */
  .p-cpq-reason__experts {
    margin-top: 40px;
    margin-inline: calc(50% - 50vw);
    padding: 40px max(20px, calc(50vw - 250px));
    border-radius: 0;
  }

  .p-cpq-reason__experts-title {
    font-size: 16px;
    line-height: 1.6;
  }

  .why-item__contents--cpq {
    margin-top: 16px;
    padding: 0;
  }

  .why-item__contents--cpq .why-item__content-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  /* ここから下は、SP デザインが無いため本番 TOP の値に戻す
     （PC 用に書いた差分が SP にも効いてしまうため、同じ段で打ち消す） */
  .why-item__contents--cpq .why-item__content-item {
    width: auto;
    min-height: 0;
    padding: calc(20 / 1280 * 100vw);
  }

  .why-item__contents--cpq .why-item__content-item-title {
    min-height: 114px;
    padding-bottom: calc(20 / 1280 * 100vw);
    font-size: 17px;
    font-weight: 900;
    line-height: 1.8;
    letter-spacing: 0.1em;
  }

  .why-item__contents--cpq .why-item__content-item-number {
    margin-top: auto;
    padding-top: 10px;
  }

  .why-item__contents--cpq .why-item__content-item-text {
    /* 本番 TOP は上下の margin を持たない */
    margin-top: 0;
    margin-bottom: 0;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.4;
    letter-spacing: 0.1em;
  }

  .why-item__contents--cpq .why-item__content-item-number-text {
    font-size: 40px;
    line-height: 1.5;
  }

  .why-item__contents--cpq .why-item__content-item-unit {
    font-size: 20px;
  }
}

/* ==================================================
   FAQ
================================================== */
.p-cpq-faq {
  padding: 104px 0 56px;
  background: var(--color-white);
}

.p-cpq-faq__inner {
  max-width: calc(var(--container) + 60px);
  margin: 0 auto;
  padding: 0 30px;
}

.p-cpq-faq__list {
  margin-top: 52px;
}

.p-cpq-faq__list.is-animating {
  overflow: hidden;
  transition: height 0.4s ease;
}

.p-cpq-faq__item + .p-cpq-faq__item {
  margin-top: 1px;
}

.p-cpq-faq__question,
.p-cpq-faq__answer-body {
  display: flex;
  align-items: center;
  gap: 32px;
  width: 100%;
  min-height: 80px;
  padding: 16px 64px 16px 48px;
  text-align: left;
  letter-spacing: 0;
}

.p-cpq-faq__question {
  position: relative;
  background: var(--color-pale);
}

.p-cpq-faq__label {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 120px;
  height: 30px;
  /* Figma の指定値。高さ 30px のためブラウザ側で 15px に丸められ、見た目はピル型になる */
  border-radius: 20px;
  background: var(--gradient-primary);
  font-family: var(--font-en);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em;
}

.p-cpq-faq__label::before {
  content: "Question";
  color: var(--color-white);
}

.p-cpq-faq__label--answer {
  border: 1px solid var(--color-primary-dark);
  background: var(--color-white);
}

.p-cpq-faq__label--answer::before {
  content: "Answer";
  color: transparent;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
}

.p-cpq-faq__text {
  flex: 0 1 700px;
  font-size: 15px;
  font-weight: 700;
  line-height: calc(31 / 15);
}

/* 開閉アイコン（＋／−）。縦棒を回転して消すと − になる */
.p-cpq-faq__icon {
  position: absolute;
  top: 50%;
  right: 32px;
  width: 10px;
  height: 10px;
  transform: translateY(-50%);
}

.p-cpq-faq__icon::before,
.p-cpq-faq__icon::after {
  content: "";
  position: absolute;
  background: var(--color-primary);
  transition:
    transform 0.4s ease,
    opacity 0.4s ease;
}

.p-cpq-faq__icon::before {
  top: calc(50% - 0.5px);
  left: 0;
  width: 100%;
  height: 1px;
}

.p-cpq-faq__icon::after {
  top: 0;
  left: calc(50% - 0.5px);
  width: 1px;
  height: 100%;
}

.p-cpq-faq__item.is-open .p-cpq-faq__icon::after {
  transform: rotate(90deg);
  opacity: 0;
}

/* 閉じた状態は JS の準備ができてから適用する（JS が動かない環境では回答を開いたまま見せる）
   ※ grid-template-rows（0fr↔1fr）の transition は Safari 16 以降のため使わない。
      高さは cpq.js が実測して height を遷移させる */
.p-cpq-faq.is-ready .p-cpq-faq__answer {
  height: 0;
  overflow: hidden;
  visibility: hidden;
}

.p-cpq-faq.is-ready .p-cpq-faq__item.is-open .p-cpq-faq__answer {
  height: auto;
  visibility: visible;
}

/* 開閉の途中（JS が height を入れている間）は中身を見せる。
   初期表示でアニメーションが走らないのは JS 側（animate なしで開く）で担保している */
.p-cpq-faq.is-ready .p-cpq-faq__answer.is-animating {
  visibility: visible;
  transition: height 0.4s ease;
}

.p-cpq-faq__answer-inner {
  min-height: 0;
  overflow: hidden;
}

.p-cpq-faq__answer-body {
  margin-top: 1px;
  background: var(--color-white);
}

.p-cpq-faq__answer-text {
  flex: 0 1 700px;
  font-size: 14px;
  line-height: calc(31 / 14);
}

/* reset.css で p の太さが normal に戻るため、p に指定する */
.p-cpq-faq__answer-text p {
  font-weight: 700;
}

.p-cpq-faq__answer-text p + p {
  margin-top: 8px;
}

.p-cpq-faq__more {
  margin-top: 40px;
  text-align: center;
}

@media screen and (max-width: 1280px) {
  .p-cpq-faq {
    padding-top: calc(104 / 1280 * 100vw);
  }
}

@media screen and (max-width: 767px) {
  .p-cpq-faq {
    /* Figma の英字ラベルは上 56px（以前は 60px に丸めていた） */
    padding: 56px 0 88px;
  }

  .p-cpq-faq__inner {
    max-width: 540px;
    padding: 0 20px;
  }

  .p-cpq-faq__list {
    /* Figma はリストの上端が 157px。日本語ラベルの箱の下端 127px との差 */
    margin-top: 30px;
  }

  .p-cpq-faq__question,
  .p-cpq-faq__answer-body {
    align-items: flex-start;
    gap: 12px;
    min-height: 0;
    padding: 20px 44px 20px 12px;
  }

  /* 丸の中心を1行目の中心にそろえる。30px 角のため border-radius: 20px が 15px に丸められ、正円になる */
  .p-cpq-faq__label {
    width: 30px;
    margin-top: -4px;
  }

  .p-cpq-faq__label::before {
    content: "Q";
  }

  .p-cpq-faq__label--answer::before {
    content: "A";
  }

  .p-cpq-faq__text {
    flex: 1;
    font-size: 14px;
    line-height: 1.5;
  }

  .p-cpq-faq__icon {
    right: 16px;
  }

  .p-cpq-faq__answer-text {
    flex: 1;
    line-height: 1.5;
  }

  .p-cpq-faq__more {
    margin-top: 24px;
  }
}

/* ==================================================
   CTA（既存 .c-cta の差分）
   ・流用元: style.css 2428-2541（PC）/ 2544-2583（1280px 以下）/ 2585-2620（767px 以下）
   ・style.css は変更せず、.c-cta--cpq で差分だけを上書きする
   ・modifier（c-cta--cpq）を外すと既存の見た目に戻る。
     HTML 側はサブテキストの1行を削除し、2つ目のボタンのコメントアウトを解除する
   ・SP はデザインが無いため、767px 以下は原則「本番の値に戻す」。
     PC 差分と打ち消しは必ずペアで書く（意図的に LP 値を残す場合もコメントを残す）
   ・文字の指定は、その文字を持つ要素自身に書く（reset.css v1 が継承を切るため）
================================================== */
.c-cta--cpq {
  /* Figma: 見出しまで 139 / ボタン下 130 */
  padding: 139px 0 130px;
}

.c-cta--cpq .c-cta__text {
  padding-top: 0;
  font-size: 32px;
  font-weight: 700;
  line-height: calc(43 / 32);
  letter-spacing: -0.04em;
  color: var(--color-text);
  /* Figma に白フチは無い */
  text-shadow: none;
}

/* LP で追加した行 */
.c-cta--cpq .c-cta__sub {
  margin-top: 24px;
  font-size: 14px;
  font-weight: 500;
  line-height: calc(21 / 14);
  letter-spacing: -0.04em;
  color: var(--color-text);
  text-align: center;
}

.c-cta--cpq .c-cta__actions {
  max-width: 473px;
  margin-top: 56px;
}

.c-cta--cpq .c-cta__contact {
  height: 65px;
  border-radius: var(--radius-pill);
  /* Figma のボタンに影は無い */
  box-shadow: none;
}

.c-cta--cpq .c-cta__contact-text {
  padding-left: 0;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0;
}

.c-cta--cpq .c-cta__wave02 {
  bottom: -300px;
}

@media screen and (max-width: 1280px) {
  .c-cta--cpq {
    padding: calc(139 / 1280 * 100vw) 0 calc(130 / 1280 * 100vw);
  }

  .c-cta--cpq .c-cta__text {
    font-size: max(calc(32 / 1280 * 100vw), 20px);
  }

  .c-cta--cpq .c-cta__sub {
    margin-top: max(calc(24 / 1280 * 100vw), 16px);
    font-size: max(calc(14 / 1280 * 100vw), 12px);
  }

  .c-cta--cpq .c-cta__actions {
    max-width: calc(473 / 1280 * 100vw);
    margin-top: calc(56 / 1280 * 100vw);
  }

  .c-cta--cpq .c-cta__contact {
    height: calc(65 / 1280 * 100vw);
  }

  .c-cta--cpq .c-cta__contact-text {
    font-size: max(calc(18 / 1280 * 100vw), 14px);
  }

  .c-cta--cpq .c-cta__wave02 {
    bottom: calc(-300 / 1280 * 100vw);
  }
}

/* 767px 以下 — 上の PC 差分に対する打ち消し（PC で書いた分と必ず1対1で並べる）
   値は本番 TOP の .c-cta を 375px で計測した実測値（2026-09-18） */
@media screen and (max-width: 767px) {
  .c-cta--cpq {
    padding: 75px 0 150px; /* 本番に戻す */
  }

  .c-cta--cpq .c-cta__text {
    padding-top: calc(120 / 1280 * 100vw); /* 本番に戻す（SP でも 1280px 用の縮小指定が効いている） */
    font-size: 16px; /* 本番に戻す */
    line-height: 1.9; /* 本番に戻す */
    letter-spacing: 0.04em; /* 本番に戻す */
    color: var(--color-text); /* LP 値を維持：Figma 準拠のセクションなので見た目の性格は PC と揃える */
    text-shadow: none; /* LP 値を維持：同上 */
  }

  .c-cta--cpq .c-cta__sub {
    /* LP で追加した行のため本番に該当なし。SP の本文サイズに合わせる */
    margin-top: 16px;
    font-size: 12px;
  }

  .c-cta--cpq .c-cta__actions {
    max-width: 335px; /* 本番に戻す */
    margin-top: 42px; /* 本番に戻す */
  }

  .c-cta--cpq .c-cta__contact {
    height: 61px; /* 本番に戻す */
    border-radius: 64px; /* 本番に戻す（高さ 61px なので見た目は PC の 100px と同じ） */
    box-shadow: none; /* LP 値を維持：Figma のボタンに影は無い */
  }

  .c-cta--cpq .c-cta__wave02 {
    bottom: 0; /* 本番に戻す */
  }

  .c-cta--cpq .c-cta__contact-text {
    padding-left: calc(10 / 1280 * 100vw); /* 本番に戻す */
    font-size: 14px; /* LP 値を維持：本番の 20px では文言が長く1行に収まらないため */
    font-weight: 600; /* LP 値を維持（Figma） */
    letter-spacing: 0; /* LP 値を維持：本番の 0.2em では1行に収まらないため */
  }
}

/* ==================================================
   # 中間幅（768〜1280px）の折り返し調整（2026-09-21）

   ・PC デザイン（1440px）と SP デザイン（375px）の間の幅では、
     文字だけが縮まずに箱が縮むため、語の途中で折り返す箇所が出ていた
   ・語の途中で切らない（word-break: keep-all）＋ 文節の区切りに
     HTML 側で <wbr> を入れる、の組み合わせで直している
     （auto-phrase は Safari が未対応のため、それだけに頼らない）
   ・入りきらないときは overflow-wrap: anywhere で必ず折り返す（はみ出し防止）
   ・text-wrap: pretty は使わない（2026-09-30 に外した）。Chrome だけが対応しており、
     <wbr> が複数ある要素では Chrome と Firefox で折り返す位置が変わっていたため
   ・767px 以下・1281px 以上には一切かけない
================================================== */
@media screen and (min-width: 768px) and (max-width: 1280px) {
  .p-cpq-fv__note,
  .p-cpq-about__item,
  .p-cpq-about__card-text,
  .p-cpq-about__summary-text,
  .p-cpq-flow__pill,
  .p-cpq-verification__title,
  .p-cpq-contents-cta__title,
  .p-cpq-contents-cta__text,
  .p-cpq-flow__result-title,
  .p-cpq-flow__result-note,
  .p-cpq-contents__lead,
  .p-cpq-support__title,
  .p-cpq-support__lead,
  .p-cpq-support__step-text {
    word-break: keep-all;
    overflow-wrap: anywhere;
  }

  /* アセスメントの小見出しは 768〜777px で箱の幅（1行に 612px 必要）が足りず、
     Safari / Firefox では「例）」だけが2行目に落ちていた（Chrome は行末の「）」を詰めるので1行）。
     箱の左右の余白（53px）に 8px ずつ広げて、どのブラウザでも1行に収める。
     中央寄せなので、入りきっている幅では見た目は変わらない */
  .p-cpq-support__assessment-title {
    margin-right: -8px;
    margin-left: -8px;
  }

  /* 最終CTA のボタン文言は1行に固定する。
     支給の共通CSSは font-size に 14px の下限があり、768px 付近で2行になっていた。
     下限だけ 12px に下げて、デザインの 16px から幅なりに縮むようにする */
  .c-cta--cpq .c-cta__contact-text {
    font-size: max(calc(16 / 1280 * 100vw), 12px);
    white-space: nowrap;
  }

  /* 中間CTA・コンテンツ内CTA のボタン文言も1行に固定（現状は収まっているが、
     文言が少し長くなっても崩れないように） */
  .p-cpq-contents-cta__button,
  .p-cpq-midcta__button {
    white-space: nowrap;
    font-size: max(calc(18 / 1280 * 100vw), 14px);
  }
}

/* ==================================================
   # 767px 以下の折り返し調整（2026-09-28・文言変更にともなう対応）

   FV のボタン下補足文と、業務フローの補足テキストは文言が長くなり、
   SP では語の途中（「ご／相談いただけます」「しま／す。」など）で折り返していた。
   768〜1280px と同じく keep-all ＋ <wbr> の組み合わせで文節の区切りに寄せる。
   対象はこの2つだけで、ほかの要素の折り返しは変えていない

   2026-09-29：Verification の見出しを追加。375px 以上は1行に収まるが、
   360px 以下では「へ。」だけが次行に落ちるため、「従来の約4分の1へ。」ごと2行目に送る

   2026-09-29：FV の補足文は <wbr> を「見積業務に」の後ろの1か所だけにした。
   <wbr> が6か所あると、text-wrap: pretty に対応したブラウザ（Chrome）は
   「…見積業務に／関する課題をご相談いただけます。」、未対応のブラウザ（Firefox）は
   「…関する課題を／ご相談いただけます。」と、折り返す位置がブラウザで変わっていた。
   折り返してよい位置を1か所に絞り、どのブラウザでも前者になるようにしている
================================================== */
@media screen and (max-width: 767px) {
  .p-cpq-fv__note,
  .p-cpq-flow__result-note,
  .p-cpq-verification__title {
    word-break: keep-all;
    overflow-wrap: anywhere;
  }
}

/* 2026-09-24：写真を「上端の白い余白なし・波線なし・透過つき WebP」で書き出し直したため、
   白い帯を切るために入れていた回避策（.p-cpq-fv__bg の height を 816/722 倍にする指定）は
   不要になったので削除した。写真は 1113×722 で、セクションの高さとそのまま一致する。
   波線が写真の透過部分から透けて見えるようになったので、写真への焼き込みも無くなった */

/* ==================================================
   # 中間幅（768〜1280px）の見た目をそろえる（2026-09-22・テストサイトの確認分）
================================================== */
@media screen and (min-width: 768px) and (max-width: 1280px) {
  /* ① About の紫パネルの文字
     箱は画面幅なりに縮む（1440px 511px → 768px 337px）のに文字が 18px 固定のため、
     幅が狭いほど行数が増え、768px では「「見積・契約・請求」に／時間を取られ、」と
     文節の途中で 4行になっていた。<wbr> を外すと overflow-wrap で語の途中で切れるので、
     文字の側を箱と同じように縮める。1280px では 18px のままで見た目は変わらない。
     これで 768〜1280px のどの幅でも Figma と同じ 2行に収まる */
  .p-cpq-about__card-text {
    font-size: max(calc(18 / 1280 * 100vw), 14px);
  }

  /* ② 中間CTA・Contents内CTA のボタン
     ボタンは 459px / 473px の固定幅、文字は下限 14px 付きの vw 縮小のため、
     幅が狭いほど「大きい箱に小さい文字」になっていた
     （文字幅÷ボタン幅 1440px 0.705 → 768px 0.548）。
     箱の寸法を em で書き、文字サイズに追従させて 1440px の比率を保つ。
     1281px 以上は font-size 18px なので、計算結果は現行と同じ値になる */
  .p-cpq-midcta__button {
    gap: calc(13.67 / 18 * 1em);
    width: calc(459 / 18 * 1em);
    min-height: calc(65 / 18 * 1em);
    padding: calc(10 / 18 * 1em) calc(20 / 18 * 1em);
  }

  .p-cpq-midcta__button::before {
    width: calc(25 / 18 * 1em);
    height: calc(17.405 / 18 * 1em);
  }

  .p-cpq-contents-cta__button {
    gap: calc(9.44 / 18 * 1em);
    width: calc(473 / 18 * 1em);
    min-height: calc(65 / 18 * 1em);
    padding: calc(10 / 18 * 1em) calc(20 / 18 * 1em);
  }

  .p-cpq-contents-cta__button::before {
    width: calc(25 / 18 * 1em);
    height: calc(17.405 / 18 * 1em);
  }
}

/* ==================================================
   # SP（767px 以下）の調整（2026-09-24・ディレクターのご指示）

   テストサイトの確認で出た6点。いずれも **767px 以下だけ** で、
   768px 以上の見た目は変えていない。Figma とは異なる状態になる。
   最終CTA は他ページと共通の流用パーツのため、LP 固有の
   .c-cta--cpq を付けたセレクタだけで指定している（共通CSSは未変更）。
================================================== */
@media screen and (max-width: 767px) {
  /* ① 最終CTA の見出しを 1.2 倍に（16px → 19.2px）。
     <br class="sp-only"> で2行に固定しているので行数は変わらない */
  .c-cta--cpq .c-cta__text {
    font-size: 19.2px;
  }

  /* ② 支援アプローチの下余白を半分に（204px → 104px）。
     8px 刻みに合わせて 102px ではなく 104px */
  .p-cpq-support {
    padding-bottom: 104px;
  }

  /* ④（カスタマーゼロ検証のまとめの箱の余白と min-height）は、2026-09-29 に Verification を
     新デザインへ差し替えて対象の要素が無くなったため、指定ごと削除した */

  /* ⑤ Contents の上の白い余白を詰める。
     Figma は margin-top 53px ＋ padding-top 56px の計 109px。
     margin を 0 にして padding 56px を残す形で確定（109px → 56px） */
  .p-cpq-contents {
    margin-top: 0;
    padding-top: 56px;
  }

  /* ⑥ 課題のイラストを枠の中で中央にそろえる。
     従来は「ボックス左端から 4px」（Figma）に固定していたため、
     幅の広い SP ほど左に寄っていた（540px で中心から 90px 左）。
     幅が箱より広い場合も中央に置けるよう、auto マージンではなく left + transform を使う */
  .p-cpq-about__persona {
    position: relative;
    left: 50%;
    margin: -2px 0 0;
    transform: translateX(-50%);
  }
}