/* =====================================================================
 * 強みページ用スタイル — page-strength.php
 *
 * カラーはサイトのブランドカラーに準拠しつつ、このページ専用のトークンとして
 * .p-strength スコープで定義する（他ページへの影響を避けるため :root は使わない）。
 * レイアウトは PC 記述をベースに、TB / SP を @media (max-width) で上書きする。
 *
 * 余白・フォントサイズ・行間（コンテンツ幅1200px / 本文16px・SP14px・line-height 2.0 / セクション余白 等）は
 * カンプの目視値ではなくサイト全体の実測基準に合わせている。
 * 一方でカード類の質感（枠線の太さ・色 / padding / カード見出しサイズ / 角丸）は
 * サイト実測基準ではなくカンプの上品さを優先し、枠線1px薄グレー・見出し18px・角丸2〜4px 程度で統一している。
 * ===================================================================== */

.p-strength {
    --st-navy: #0C027E;
    --st-navy-deep: #071B5C;
    --st-tint: #F3F6FD;
    --st-red: #D81F26;
    --st-star: #FBBC04;
    --st-text: #333;
    --st-text-sub: #555;
    --st-border: #E2E2E2;
}

/* 親テーマ .entry-content のデフォルト list-style の影響を避ける
 * margin/padding はここでリセットしない。子孫セレクタ (0,1,1) が
 * 個別クラス (0,1,0) の margin 指定（中央寄せ等）を打ち消してしまうため。
 * ul/ol/li の margin/padding は親テーマ be.css のリセットで既に 0 になっている。 */
.p-strength,
.p-strength ul,
.p-strength ol {
    list-style: none;
}

/* p の margin はここでリセットする。
 * 各コンポーネントの p に書かれている margin-bottom:15px はこのリセットで
 * 無効化された状態でレイアウトが成立しているため、外すと実績バー・口コミカード等が
 * 間延びする。個別に余白が必要な箇所は下のように詳細度 (0,2,0) で上書きすること。 */
.p-strength p {
    margin: 0;
}

/* ========================================
 * 共通: セクション幅
 * サイト実測: コンテンツ最大幅 1200px / セクション縦余白 padding-top 40〜50px・bottom 80px（PC・SP共通）
 * ======================================== */

.p-strengthSection {
    padding: 48px 20px 80px;
}

/* 6つの強み一覧からの #strength-01〜06 アンカーで飛んだとき、
 * 見出しが固定ヘッダー（#Top_bar: PC 61px / SP 66px）の下に潜らないようにする */
.p-strengthSection[id] {
    scroll-margin-top: 80px;
}

.p-strengthSection--tint {
    background: var(--st-tint);
}

.p-strengthSection__inner {
    max-width: 1200px;
    margin: 0 auto;
}

/* ========================================
 * FV（全幅・濃紺背景 + 円ライン装飾）
 * ======================================== */

.p-strengthFv {
    position: relative;
    overflow: hidden;
    background: var(--st-navy);
    padding: 88px 20px;
}

.p-strengthFv__deco {
    position: absolute;
    top: 50%;
    right: -120px;
    transform: translateY(-50%);
    width: 420px;
    height: 420px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.18);
    pointer-events: none;
}

.p-strengthFv__deco::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.18);
    transform: translate(-50%, -50%);
}

.p-strengthFv__deco::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 560px;
    height: 560px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.12);
    transform: translate(-50%, -50%);
}

.p-strengthFv__inner {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
}

.p-strengthFv__label {
    font-size: 0.8125rem;
    font-weight: bold;
    letter-spacing: 0.15em;
    color: #fff;
    opacity: 0.75;
    margin-bottom: 16px;
}

/* 「中見出し（h2大）」相当。サイト実測 34px を基準に、SPは可読性維持のため適宜縮小 */
.p-strengthFv__title {
    font-size: 2.125rem; /* 34px */
    line-height: 1.5;
    font-weight: 800;
    color: #fff;
    margin: 0 0 24px;
}

.p-strengthFv__titleAccent {
    color: var(--st-red);
}

/* 本文 p 基準（PC 16px / line-height 32px = 2.0） */
.p-strengthFv__lead {
    font-size: 1rem;
    line-height: 2;
    color: rgba(255, 255, 255, 0.9);
    max-width: 720px;
    margin-bottom: 15px;
}

/* ========================================
 * 実績バー（FV 直下・4 分割・暗い濃紺帯）
 * ======================================== */

.p-strengthStats {
    background: var(--st-navy-deep);
    padding: 0 20px;
}

.p-strengthStats__list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    max-width: 1200px;
    margin: 0 auto;
}

.p-strengthStats__item {
    padding: 24px 16px;
    text-align: center;
    border-left: 1px solid rgba(255, 255, 255, 0.15);
}

.p-strengthStats__item:first-child {
    border-left: none;
}

.p-strengthStats__label {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 10px;
    line-height: 1.4;
}

.p-strengthStats__value {
    font-size: clamp(1.375rem, 1.15rem + 0.9vw, 1.75rem);
    font-weight: bold;
    color: #fff;
    line-height: 1.2;
}

.p-strengthStats__unit {
    font-size: 0.875rem;
    font-weight: normal;
    margin-left: 2px;
}

/* ========================================
 * セクション見出し共通（STRENGTHS 見出し）
 * ======================================== */

.p-strengthHeading {
    text-align: center;
    margin-bottom: 48px;
}

.p-strengthHeading__label {
    font-size: 0.8125rem;
    font-weight: bold;
    letter-spacing: 0.15em;
    color: var(--st-red);
    margin-bottom: 12px;
}

/* セクション見出し（h2相当）。サイト実測 PC 28px/line-height 41px/font-weight 800
 * カンプでは「私たちが大切にしている」が黒、「6つの強み」だけネイビー */
.p-strengthHeading__title {
    font-size: 1.75rem; /* 28px */
    font-weight: 800;
    color: var(--st-text);
    line-height: 41px;
    margin: 0 0 12px;
}

.p-strengthHeading__accent {
    color: var(--st-navy);
}

.p-strengthHeading__sub {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--st-text-sub);
}

/* ========================================
 * 6つの強み一覧（3×2 カードグリッド）
 * ======================================== */

/* カンプ基準: 隙間ゼロで境界線を1本共有する1枚のグリッド。
   gap を境界線幅ぶんだけ確保し、その隙間から親の background（薄いグレー）を
   覗かせることで、セル同士が二重線にならない1pxの共有ボーダーを作る。 */
/* 罫線は gap+背景ではなく各セルの border で引く。
 * gap 方式だと __link がセルからはみ出したときに行の罫線が白背景で隠れるため。 */
.p-strengthList {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--st-border);
    border-left: 1px solid var(--st-border);
}

.p-strengthList__item {
    display: flex; /* __link を height:100% ではなく flex で伸ばす（高さの循環参照を避ける） */
    border-right: 1px solid var(--st-border);
    border-bottom: 1px solid var(--st-border);
}

/* カンプ基準: 枠線は主張しない薄いグレー1px / padding 28px 24px。
   番号(01)と見出しは横並び、本文は番号の左端に揃えて下に回り込む
   （.p-strengthList__body に display:contents を当て、__title と __text を
   親の2列グリッドへ直接配置することで字下げを解除している）。 */
.p-strengthList__link {
    display: grid;
    grid-template-columns: 40px 1fr;
    column-gap: 16px;
    row-gap: 10px;
    align-items: start;
    flex: 1;
    padding: 28px 24px;
    background: #fff;
    text-decoration: none;
}

/* ========================================
 * リンクホバーの打ち消し
 *
 * テーマ側に以下のグローバル設定があり、カード全体リンクやボタンにも効いてしまう:
 *   a:hover { text-decoration: underline; }   （be.css）
 *   a:hover { color: rgb(26,107,43); }        （Betheme カスタマイザーのインライン出力＝緑）
 *
 * テキストリンクなら自然だが、このページはカード全体がリンクだったり
 * 赤背景・白文字のボタンだったりするため、緑文字＋下線になると破綻する。
 * インライン <style> は enqueue した CSS より後に出力されるため、
 * 同じ詳細度 (0,1,1) では勝てない。クラスを重ねて (0,2,1) にしている。
 * ======================================== */

.p-strength .p-strengthList__link:hover,
.p-strength .p-strengthCta__button:hover,
.p-strength .p-strengthCta__tel:hover {
    text-decoration: none;
}

.p-strength .p-strengthList__link:hover {
    color: var(--st-navy);
}

.p-strength .p-strengthCta__button:hover {
    color: #fff;
}

.p-strength .p-strengthCta__tel:hover {
    color: var(--st-navy);
}

.p-strengthList__num {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 2px solid var(--st-navy);
    border-radius: 50%;
    font-size: 0.9375rem;
    font-weight: bold;
    color: var(--st-navy);
}

/* 子要素（__title / __text）を親グリッドに直接配置するための透過ラッパー */
.p-strengthList__body {
    display: contents;
}

/* カード見出し（h3/h4相当）。カンプ基準 PC 18px/line-height 1.6/font-weight 800/color navy */
.p-strengthList__title {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    font-size: 1.125rem; /* 18px */
    font-weight: 800;
    color: var(--st-navy);
    line-height: 1.6;
}

.p-strengthList__text {
    grid-column: 1 / -1;
    grid-row: 2;
    font-size: 0.875rem;
    line-height: 2;
    color: var(--st-text-sub);
}

/* ========================================
 * 各詳細セクション見出し（01〜06）
 * ======================================== */

.p-strengthDetailHead {
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 2px solid var(--st-navy);
}

/* カンプでは英字ラベルは番号(01)の上ではなく、
 * その右の日本語見出しの左端に揃っている（カンプ実測: 番号 x=53 / ラベル x=96）。
 * 番号の幅 53px + タイトルの gap 16px から letter-spacing 分の 1px を引いた 68px 右にずらす。 */
.p-strengthDetailHead__label {
    font-size: 0.8125rem;
    font-weight: bold;
    letter-spacing: 0.1em;
    color: var(--st-red);
    margin-bottom: 8px;
    padding-left: 68px;
}

/* セクション見出し（h2相当）。テキスト部分はサイト実測 PC 28px/line-height 41px/font-weight 800 */
.p-strengthDetailHead__title {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 1.75rem; /* 28px */
    font-weight: 800;
    color: var(--st-text);
    line-height: 41px;
}

.p-strengthDetailHead__no {
    font-size: clamp(2rem, 1.6rem + 1.6vw, 2.75rem);
    font-weight: bold;
    color: var(--st-navy);
    line-height: 1;
}

/* 本文 p 基準（PC 16px / line-height 32px = 2.0） */
.p-strengthDetailHead__text {
    font-size: 1rem;
    line-height: 2;
    color: var(--st-text);
}

/* 本文と後続ブロック（カード群・小見出し）の間隔。
 * カンプ実測: 本文の行ボックス下端 → カード上端が 21px（カンプ幅855px）。
 * 実サイト 1200px 換算で約 30px。
 * 上の .p-strength p リセット (0,1,1) に勝たせるため詳細度を (0,2,0) にしている。 */
.p-strength .p-strengthDetailHead__text {
    margin-bottom: 30px;
}

.p-strengthDetailHead__strong {
    font-weight: bold;
    color: var(--st-navy);
}

/* ========================================
 * 02: 3 ステップカード
 * ======================================== */

/* カード見出し（h3相当）と同基準を適用 */
.p-strengthSubhead {
    font-size: 1.5rem; /* 24px */
    font-weight: 800;
    color: var(--st-navy);
    line-height: 1.333; /* 32px */
    margin: 40px 0 20px;
}

/* カンプ実測: ステップカードはカード間の隙間ゼロで仕切り線1本の連結グリッド
 * （x=300 / x=548 に 1px の線のみ。03・05・06 のカード群は 14px の gap があるが、
 *  ここだけ 6つの強み一覧と同じ連結表現になっている） */
.p-strengthSteps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--st-border);
    border-left: 1px solid var(--st-border);
    margin-bottom: 32px;
}

.p-strengthSteps__item {
    background: #fff;
    border-right: 1px solid var(--st-border);
    border-bottom: 1px solid var(--st-border);
    padding: 28px 24px;
}

.p-strengthSteps__num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-bottom: 16px;
    background: var(--st-navy);
    color: #fff;
    border-radius: 50%;
    font-size: 0.9375rem;
    font-weight: bold;
}

/* カード見出し（h4相当） */
.p-strengthSteps__title {
    /* 3カラム時の内幅は (1200-40)/3 - 50 = 約336px。
     * 最長見出し「買い手のターゲットを明確にして査定」18文字が
     * 20px だと 360px で溢れるため、他カード見出しと同じ 18px に揃える。 */
    font-size: 1.125rem; /* 18px */
    font-weight: 800;
    color: var(--st-navy);
    line-height: 1.6;
    margin: 0 0 15px;
}

/* カード内本文。line-height 2.0 を維持しつつ 15px を許容 */
.p-strengthSteps__text {
    font-size: 0.9375rem;
    line-height: 2;
    color: var(--st-text-sub);
    margin-bottom: 15px;
}

/* ========================================
 * 02: 比較 2 カラム
 * ======================================== */

.p-strengthCompare {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.p-strengthCompare__item {
    padding: 28px 24px;
    border-radius: 2px;
}

.p-strengthCompare__item--bad {
    background: #fff;
    border: 1px solid var(--st-border);
}

.p-strengthCompare__item--good {
    background: var(--st-navy);
}

.p-strengthCompare__badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: bold;
    padding: 4px 12px;
    border-radius: 3px;
    margin-bottom: 14px;
}

.p-strengthCompare__item--bad .p-strengthCompare__badge {
    background: #E5E5E5;
    color: var(--st-text-sub);
}

.p-strengthCompare__item--good .p-strengthCompare__badge {
    background: var(--st-red);
    color: #fff;
}

/* カード見出し（h4相当）。カンプ基準 PC 18px/line-height 1.6 */
.p-strengthCompare__title {
    font-size: 1.125rem; /* 18px */
    font-weight: 800;
    line-height: 1.6;
    margin: 0 0 15px;
}

.p-strengthCompare__item--bad .p-strengthCompare__title {
    color: var(--st-navy);
}

.p-strengthCompare__item--good .p-strengthCompare__title {
    color: #fff;
}

/* カード内本文。line-height 2.0 を維持しつつ 15px を許容 */
.p-strengthCompare__text {
    font-size: 0.9375rem;
    line-height: 2;
    margin-bottom: 15px;
}

.p-strengthCompare__item--bad .p-strengthCompare__text {
    color: var(--st-text-sub);
}

.p-strengthCompare__item--good .p-strengthCompare__text {
    color: rgba(255, 255, 255, 0.9);
}

/* ========================================
 * 03: 経験豊富なスタッフ（2×2 カード + 左バッジ）
 * ======================================== */

.p-strengthStaff {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.p-strengthStaff__item {
    display: flex;
    gap: 16px;
    padding: 28px 24px;
    background: #fff;
    border: 1px solid var(--st-border);
    border-radius: 2px;
}

.p-strengthStaff__badge {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: var(--st-navy);
    color: #fff;
    font-size: 0.75rem;
    font-weight: bold;
    letter-spacing: 0.03em;
    border-radius: 4px;
}

/* カード見出し（h3相当）。カンプ基準 PC 18px/line-height 1.6 */
.p-strengthStaff__title {
    font-size: 1.125rem; /* 18px */
    font-weight: 800;
    color: var(--st-navy);
    line-height: 1.6;
    margin: 0 0 15px;
}

/* カード内本文。line-height 2.0 を維持しつつ 15px を許容 */
.p-strengthStaff__text {
    font-size: 0.9375rem;
    line-height: 2;
    color: var(--st-text-sub);
    margin-bottom: 15px;
}

/* ========================================
 * 05: 3 カード（上辺に濃紺ライン・薄背景）
 * ======================================== */

.p-strengthCards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.p-strengthCards__item {
    background: var(--st-tint);
    border-top: 3px solid var(--st-navy);
    padding: 28px 24px;
}

/* カード見出し（h3相当）。カンプ基準 PC 18px/line-height 1.6 */
.p-strengthCards__title {
    font-size: 1.125rem; /* 18px */
    font-weight: 800;
    color: var(--st-navy);
    line-height: 1.6;
    margin: 0 0 15px;
}

/* カード内本文。line-height 2.0 を維持しつつ 15px を許容 */
.p-strengthCards__text {
    font-size: 0.9375rem;
    line-height: 2;
    color: var(--st-text-sub);
    margin-bottom: 15px;
}

/* ========================================
 * 06: Google 評価バー
 * ======================================== */

/* カンプ実測: 左の評価ブロックと右のテキストの間に縦の区切り線が入り、
 * 右のテキストは左揃え（帯の右端までは伸びない）。
 * 区切り線はカンプ幅855pxで x=194、帯左端 x=52 → 左ブロック幅 約142px（実換算 約200px）。 */
.p-strengthReview {
    display: flex;
    align-items: center;
    gap: 32px;
    background: var(--st-navy);
    border-radius: 8px;
    padding: 24px 32px;
    margin-bottom: 32px;
}

.p-strengthReview__score {
    flex-shrink: 0;
    min-width: 168px;
}

.p-strengthReview__scoreLabel {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 6px;
}

.p-strengthReview__scoreValue {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.75rem;
    font-weight: bold;
    color: #fff;
    line-height: 1;
}

.p-strengthReview__stars {
    display: inline-flex;
    gap: 2px;
    color: var(--st-star);
}

.p-strengthReview__note {
    text-align: left;
    padding-left: 32px;
    border-left: 1px solid rgba(255, 255, 255, 0.35);
    font-size: 0.8125rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.85);
}

.p-strengthReview__note p + p {
    margin-top: 6px;
}

/* ========================================
 * 06: 口コミ 3 カード
 * ======================================== */

.p-strengthVoices {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.p-strengthVoices__item {
    position: relative;
    background: #fff;
    border: 1px solid var(--st-border);
    border-radius: 4px;
    padding: 28px 24px;
}

.p-strengthVoices__google {
    position: absolute;
    top: 24px;
    right: 24px;
}

.p-strengthVoices__head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.p-strengthVoices__avatar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: #fff;
    font-size: 0.9375rem;
    font-weight: bold;
}

.p-strengthVoices__name {
    font-size: 0.9375rem;
    font-weight: bold;
    color: var(--st-text);
    line-height: 1.4;
}

.p-strengthVoices__date {
    font-size: 0.75rem;
    color: #999;
    line-height: 1.4;
}

.p-strengthVoices__stars {
    color: var(--st-star);
    font-size: 0.875rem;
    letter-spacing: 2px;
    margin-bottom: 12px;
}

/* カード内本文。line-height 2.0 を維持しつつ 14px を許容 */
.p-strengthVoices__text {
    font-size: 0.875rem;
    line-height: 2;
    color: var(--st-text-sub);
}

/* ========================================
 * CTA（全幅・濃紺背景）
 * ======================================== */

.p-strengthCta {
    background: var(--st-navy);
    padding: 64px 20px;
}

.p-strengthCta__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
}

/* セクション見出し（h2相当） */
.p-strengthCta__title {
    font-size: 1.75rem; /* 28px */
    font-weight: 800;
    color: #fff;
    line-height: 41px;
    margin: 0 0 16px;
}

/* 本文 p 基準（PC 16px / line-height 32px = 2.0） */
.p-strengthCta__lead {
    font-size: 1rem;
    line-height: 2;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 15px;
}

.p-strengthCta__actions {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.p-strengthCta__button {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 260px;
    padding: 16px 24px;
    background: var(--st-red);
    color: #fff;
    font-size: 1rem;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    border-radius: 4px;
    transition: opacity 0.2s ease;
}

.p-strengthCta__button:hover {
    opacity: 0.85;
}

.p-strengthCta__tel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 260px;
    padding: 12px 24px;
    background: #fff;
    border-radius: 4px;
    text-decoration: none;
}

.p-strengthCta__telNumber {
    font-size: 1.25rem;
    font-weight: bold;
    color: var(--st-navy);
    line-height: 1.4;
}

.p-strengthCta__telNote {
    font-size: 0.6875rem;
    color: var(--st-text-sub);
}

/* =====================================================================
 * レスポンシブ — TB（768〜1023px）
 * ===================================================================== */

@media (max-width: 1023px) {
    .p-strengthList,
    .p-strengthSteps,
    .p-strengthStaff,
    .p-strengthCards,
    .p-strengthVoices {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Steps は罫線を共有する連結グリッドのため、2カラムだと 3枚目の右側に
     * 空セルができて罫線が閉じない。最後の1枚を全幅にして閉じる。 */
    .p-strengthSteps__item:last-child {
        grid-column: 1 / -1;
    }

    .p-strengthCompare {
        grid-template-columns: 1fr;
    }

    .p-strengthCta__inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .p-strengthCta__actions {
        width: 100%;
        flex-direction: row;
    }

    .p-strengthCta__button,
    .p-strengthCta__tel {
        flex: 1;
        min-width: 0;
    }
}

/* =====================================================================
 * レスポンシブ — SP（〜767px）
 * サイト実測: SP(375px) の左右 padding は 33px（.section_wrapper 基準）
 * ===================================================================== */

@media (max-width: 767px) {
    .p-strengthSection {
        padding: 48px 33px 80px;
    }

    .p-strengthFv {
        padding: 56px 33px;
    }

    .p-strengthFv__title {
        font-size: 1.625rem; /* 26px。34pxからの適宜縮小 */
        line-height: 1.4;
    }

    .p-strengthFv__lead {
        font-size: 0.875rem; /* 14px */
        line-height: 2; /* 28px */
    }

    .p-strengthFv__deco {
        width: 260px;
        height: 260px;
        right: -100px;
    }

    .p-strengthFv__deco::before {
        width: 180px;
        height: 180px;
    }

    .p-strengthFv__deco::after {
        width: 340px;
        height: 340px;
    }

    .p-strengthStats {
        padding: 0 33px;
    }

    .p-strengthStats__list {
        grid-template-columns: repeat(2, 1fr);
    }

    .p-strengthStats__item {
        border-left: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    }

    .p-strengthStats__item:nth-child(odd) {
        border-right: 1px solid rgba(255, 255, 255, 0.15);
    }

    /* セクション見出し（h2相当）。サイト実測 SP 24px/line-height 25px */
    .p-strengthHeading__title,
    .p-strengthDetailHead__title,
    .p-strengthCta__title {
        font-size: 1.5rem; /* 24px */
        line-height: 25px;
    }

    .p-strengthDetailHead__text,
    .p-strengthCta__lead {
        font-size: 0.875rem; /* 14px */
        line-height: 2; /* 28px */
    }

    /* カード見出し（h3/h4相当）。サイト実測は14pxだが可読性のため16pxを下限とする */
    .p-strengthList__title,
    .p-strengthSubhead,
    .p-strengthSteps__title,
    .p-strengthCompare__title,
    .p-strengthStaff__title,
    .p-strengthCards__title {
        font-size: 1rem; /* 16px */
        line-height: 1.5; /* 24px */
    }

    .p-strengthList__text,
    .p-strengthSteps__text,
    .p-strengthCompare__text,
    .p-strengthStaff__text,
    .p-strengthCards__text,
    .p-strengthVoices__text {
        font-size: 0.875rem; /* 14px */
        line-height: 2; /* 28px */
    }

    .p-strengthList,
    .p-strengthSteps,
    .p-strengthStaff,
    .p-strengthCards,
    .p-strengthVoices {
        grid-template-columns: 1fr;
    }

    /* SP は 1カラムのため高さ揃え（stretch）を解除し、カードの高さを中身に合わせる */
    .p-strengthList {
        align-items: start;
    }

    /* SP はバッジがピル型で小さくなるため、PC の gap 16px では見出しとの間隔が開きすぎる */
    .p-strengthStaff__item {
        flex-direction: column;
        gap: 10px;
    }

    /* SP は縦積みになるため、正方形バッジを内容幅のピル型に切り替える */
    .p-strengthStaff__badge {
        align-self: flex-start;
        width: auto;
        height: auto;
        padding: 2px 12px;
        border-radius: 999px;
    }

    .p-strengthDetailHead__title {
        gap: 10px;
    }

    /* SP は番号 38px + gap 10px */
    .p-strengthDetailHead__label {
        padding-left: 48px;
    }

    .p-strengthReview {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

    /* SP は縦積みになるため、区切り線を左罫線から上罫線に切り替える */
    .p-strengthReview__note {
        text-align: left;
        padding-left: 0;
        padding-top: 16px;
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.35);
        width: 100%;
    }

    .p-strengthCta {
        padding: 56px 33px;
    }

    .p-strengthCta__actions {
        flex-direction: column;
    }

    /* SP 幅 309px に対し 24px だと「まずは「いくらで売れるか」を」が
     * 溢れて「を」「か。」だけが次行に落ちるため 20px に下げて 2 行に収める */
    .p-strengthCta__title {
        font-size: 1.25rem; /* 20px */
        line-height: 1.6;
    }

    /* 「旭川総合宅建が」/「選ばれる理由」で改行させる。
     * 自動折り返しだと「選ばれる」「理由」で赤字が分断されるため */
    .p-strengthFv__titleAccent {
        display: block;
    }

    /* 同様に「私たちが大切にしている」/「6つの強み」で改行させる */
    .p-strengthHeading__accent {
        display: block;
    }

    /* 2カラム時、「ファイナンシャルプランナー」だけラベルが 2 行になり
     * 隣のセルと数値の縦位置がずれるため、ラベルに 2 行分の高さを確保する */
    .p-strengthStats__label {
        min-height: 2.8em; /* line-height 1.4 × 2行 */
    }
}