/* =====================================================================
   _top_v4.css — TOP バリアント V4「Editorial × Vertical English」
   ---------------------------------------------------------------------
   方針:
     - 左端 60px に縦書き英字サイドバー（PC: position:fixed、SP:非表示）
     - 各セクションに `writing-mode: vertical-rl` の縦書き index/eyebrow
     - 赤の差し色: サイドバー上下キャップ (4px×40px)
     - hero 全画面写真 (90vh / SP 80vh)
     - 直角 / 半モノクロ写真 / CSS変数経由
===================================================================== */

/* ---------------------------------------------------------------------
   0. ローカルトークン
--------------------------------------------------------------------- */
.p-v4-sidebar,
.p-v4-hero,
.p-v4-section {
    --v4-sidebar-w:    3.75rem;  /* 60px */
    --v4-bar-w:        2.5rem;
    --v4-bar-h:        0.125rem;
    --v4-gap-xs:       0.5rem;
    --v4-gap-sm:       1rem;
    --v4-gap-md:       1.5rem;
    --v4-gap-lg:       2.5rem;
    --v4-gap-xl:       4rem;
    --v4-eyebrow-fz:   0.875rem;
    --v4-eyebrow-ls:   0.18em;
    --v4-vert-ls:      0.4em;
    --v4-photo-filter: saturate(0.65) contrast(1.15) grayscale(0.3);
    --v4-radius:       var(--radius-md);
    --v4-hairline:     1px solid var(--c-border);
    --v4-cap-w:        0.25rem;  /* 4px */
    --v4-cap-h:        2.5rem;   /* 40px */
}

/* =====================================================================
   1. 縦書きサイドバー（PC のみ fixed sticky）
===================================================================== */
.p-v4-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--v4-sidebar-w);
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding-block: var(--v4-gap-lg);
    z-index: 5;
    background: var(--c-bg);
    border-right: var(--v4-hairline);
    pointer-events: none;
}

.p-v4-sidebar__text {
    writing-mode: vertical-rl;
    font-family: var(--font-en);
    font-size: 0.875rem;
    letter-spacing: var(--v4-vert-ls);
    text-transform: uppercase;
    color: var(--c-text);
    line-height: 1;
    white-space: nowrap;
}

.p-v4-sidebar__cap {
    display: block;
    width: var(--v4-cap-w);
    height: var(--v4-cap-h);
    background: var(--c-main);
    flex-shrink: 0;
}

/* PC: 本文を 60px ぶん右に押し出す */
@media screen and (min-width: 992px) {
    .l-container,
    .p-v4-hero__inner,
    .p-v4-section__inner {
        padding-left: calc(var(--v4-sidebar-w) + var(--v4-gap-md));
    }
}

/* フッターは独立した全幅バンド。上の 992px ルールは footer の .l-container では
   --v4-* が未定義 → calc 無効 → padding-left が初期値 0 に化け、左余白が消えていた。
   左右対称の余白に明示復元し、白いサイドバーがダーク背景に被らないよう前面へ。 */
.l-footer .l-container {
    padding-inline: 4vw;
}
.l-footer {
    position: relative;
    z-index: 6;                 /* .p-v4-sidebar(z:5) より前面でフッターが覆う */
}

@media screen and (max-width: 991px) {
    .p-v4-sidebar {
        display: none;
    }
}

/* =====================================================================
   セクション共通: 縦書き index ラベル
===================================================================== */
.p-v4-section {
    position: relative;
}

.p-v4-section__index {
    position: absolute;
    top: var(--v4-gap-xl);
    left: calc(var(--v4-sidebar-w) + var(--v4-gap-sm));
    writing-mode: vertical-rl;
    font-family: var(--font-en);
    font-size: 0.875rem;
    letter-spacing: var(--v4-vert-ls);
    color: var(--c-text-sub);
    text-transform: uppercase;
    line-height: 1;
    z-index: 1;
    pointer-events: none;
}

.p-v4-section__index--accent {
    color: var(--c-main);
}

@media screen and (max-width: 991px) {
    /* スマホ/タブレット縦：セクションのインデックス（01 / SERVICES 等）は非表示 */
    .p-v4-section__index {
        display: none;
    }
}

/* =====================================================================
   共通: eyebrow / bar
===================================================================== */
.p-v4-hero__bar,
.p-v4-services__bar,
.p-v4-concept__bar,
.p-v4-stats__bar,
.p-v4-strength__bar,
.p-v4-news__bar {
    display: block;
    width: var(--v4-bar-w);
    height: var(--v4-bar-h);
    background: var(--c-main);
    margin-bottom: var(--v4-gap-sm);
}

.p-v4-hero__eyebrow,
.p-v4-services__eyebrow,
.p-v4-concept__eyebrow,
.p-v4-stats__eyebrow,
.p-v4-strength__eyebrow,
.p-v4-news__eyebrow {
    font-family: var(--font-en);
    font-size: var(--v4-eyebrow-fz);
    letter-spacing: var(--v4-eyebrow-ls);
    color: var(--c-accent);
    text-transform: uppercase;
    margin: 0 0 var(--v4-gap-md);
    line-height: 1;
}

/* =====================================================================
   2. HERO（バルーン × エディトリアル / 写真ナシ・白背景）
   ---------------------------------------------------------------------
   方針:
     - 写真を撤去し白背景に。左にコピー、右に大型バルーンの2カラム
       （参考: 浪江未来ファーム「とは」セクションの左テキスト×右図版）
     - コピーは墨黒（var(--c-text)）で写真上の白抜きより視認性を強化
     - 表示時アニメ: テキストは左から、バルーンは右からスライドイン
       （うるさくない程度／prefers-reduced-motion で無効化）
===================================================================== */
.p-v4-hero {
    position: relative;
    width: 100%;
    min-height: 88vh;
    overflow: hidden;
    background: var(--c-bg);
    display: flex;
    align-items: center;
}

/* 背景の超大型ウォーターマーク英字（右下にブリードさせて editorial 感） */
.p-v4-hero__watermark {
    position: absolute;
    right: -4px;
    bottom: -4px;
    z-index: 0;
    font-family: var(--font-en);
    font-weight: 700;
    font-size: clamp(8rem, 22vw, 20rem);
    line-height: 0.8;
    letter-spacing: 0.02em;
    color: var(--c-text);
    opacity: 0.045;
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
}

.p-v4-hero__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--width-container);
    margin: 0 auto;
    padding-inline: var(--v4-gap-md);
    padding-block: var(--v4-gap-xl);
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: center;
    column-gap: var(--v4-gap-xl);
}

/* PC: 縦書きサイドバー(60px)分だけ本文を右へ。
   base の padding-inline が共通の 992px ルール(padding-left:84px)を後勝ちで
   打ち消すため、ヒーロー専用に再付与して確実に効かせる。 */
@media screen and (min-width: 992px) {
    .p-v4-hero__inner {
        padding-left: calc(var(--v4-sidebar-w) + var(--v4-gap-md));
    }
}

.p-v4-hero__text {
    max-width: 36em;
    color: var(--c-text);
}

.p-v4-hero__eyebrow {
    display: flex;
    align-items: center;
    gap: var(--v4-gap-sm);
    font-family: var(--font-en);
    font-size: var(--v4-eyebrow-fz);
    letter-spacing: var(--v4-eyebrow-ls);
    text-transform: uppercase;
    color: var(--c-accent);          /* RE/MAX 青（eyebrow のみ） */
    margin: 0 0 var(--v4-gap-md);
    line-height: 1;
}

.p-v4-hero__eyebrow-bar {
    display: block;
    width: var(--v4-cap-h);          /* 40px */
    height: 0.125rem;                /* 2px */
    background: var(--c-main);        /* RE/MAX 赤の極細アンダーバー */
    flex-shrink: 0;
}

.p-v4-hero__catch {
    font-family: var(--font-title);
    font-weight: 700;
    font-size: clamp(2rem, 3.1vw, 3rem);
    line-height: 1.5;
    letter-spacing: 0.04em;
    color: var(--c-text);
    margin: 0 0 var(--v4-gap-lg);
    text-wrap: balance;
    font-feature-settings: "palt";
    white-space: normal;
}

.p-v4-hero__line {
    display: block;
}

.p-v4-hero__sub {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.95;
    letter-spacing: 0.04em;
    color: var(--c-text);
    opacity: 0.82;
    max-width: 30em;
    margin: 0;
}

/* --- 右カラム: 大型バルーン --- */
.p-v4-hero__visual {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.p-v4-hero__balloon-wrap {
    position: relative;
    display: inline-block;
    width: clamp(15rem, 30vw, 27rem);
    line-height: 0;
}

.p-v4-hero__balloon {
    width: 100%;
    height: auto;
    display: block;
    /* 直角ルール踏襲のためフラットなオフセット影のみ・ごく薄く */
    filter: drop-shadow(0 1.25rem 1.75rem rgba(10, 10, 10, 0.10));
}


/* --- 表示アニメーション（横からスライドイン） --- */
@keyframes v4heroInLeft {
    from { opacity: 0; transform: translateX(-2rem); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes v4heroInRight {
    from { opacity: 0; transform: translateX(3.5rem); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes v4heroFadeUp {
    from { opacity: 0; transform: translateY(1rem); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes v4balloonFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-0.625rem); }
}
/* キャッチ: 行ごとにブラー＋せり上がりで段階表示 */
@keyframes v4lineReveal {
    from { opacity: 0; transform: translateY(0.6em); filter: blur(10px); }
    to   { opacity: 1; transform: translateY(0);     filter: blur(0); }
}
/* ウォーターマークのフェードイン */
@keyframes v4wmIn {
    from { opacity: 0; }
    to   { opacity: 0.045; }
}

.p-v4-hero__eyebrow { animation: v4heroFadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both; }
.p-v4-hero__line    { animation: v4lineReveal 0.9s cubic-bezier(0.22, 1, 0.36, 1) both; }
.p-v4-hero__line:nth-child(1) { animation-delay: 0.30s; }
.p-v4-hero__line:nth-child(2) { animation-delay: 0.48s; }
.p-v4-hero__line:nth-child(3) { animation-delay: 0.66s; }
.p-v4-hero__sub     { animation: v4heroFadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.9s both; }
.p-v4-hero__visual  { animation: v4heroInRight 1s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both; }
.p-v4-hero__watermark { animation: v4wmIn 1.4s ease 0.5s both; }
/* バルーンは入場後にごく緩やかな浮遊（うるさくない範囲） */
.p-v4-hero__balloon-wrap { animation: v4balloonFloat 7s ease-in-out 1.4s infinite; }

@media screen and (max-width: 991px) {
    .p-v4-hero {
        min-height: 0;
        padding-block: var(--v4-gap-xl) var(--v4-gap-lg);
    }
    .p-v4-hero__inner {
        grid-template-columns: 1fr;
        row-gap: var(--v4-gap-lg);
        padding-block: 0;
        text-align: left;
    }
    /* SP: バルーンを上、コピーを下に */
    .p-v4-hero__visual { order: -1; }
    .p-v4-hero__balloon-wrap { width: clamp(11rem, 46vw, 16rem); }
    .p-v4-hero__text { max-width: none; }
    .p-v4-hero__catch {
        font-size: clamp(1.875rem, 7.4vw, 2.625rem);
    }
    .p-v4-hero__watermark {
        font-size: 46vw;
        opacity: 0.04;
        bottom: auto;
        top: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .p-v4-hero__eyebrow,
    .p-v4-hero__line,
    .p-v4-hero__sub,
    .p-v4-hero__visual,
    .p-v4-hero__balloon-wrap,
    .p-v4-hero__watermark {
        animation: none;
    }
    .p-v4-hero__line { opacity: 1; transform: none; filter: none; }
    .p-v4-hero__watermark { opacity: 0.045; }
}

/* =====================================================================
   ボタン
===================================================================== */
.p-v4-btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--v4-gap-sm);
    padding: 1rem 1.5rem;
    width: 250px;                     /* 下層リンクボタン共通幅（固定） */
    max-width: 100%;
    box-sizing: border-box;
    align-self: flex-start;            /* flex 親の中で stretch されないように */
    border-radius: var(--radius-btn);
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 500;
    letter-spacing: 0.06em;
}

.p-v4-btn.c-btn--primary {
    background: var(--c-text);
    color: var(--c-bg);
    border: 1px solid var(--c-text);
}

.p-v4-btn.c-btn--primary:hover {
    background: var(--c-main);
    border-color: var(--c-main);
    color: var(--c-bg);
}

.p-v4-btn--ghost.c-btn--outline {
    background: transparent;
    color: var(--c-bg);
    border: 1px solid var(--c-bg);
}

.p-v4-btn--ghost.c-btn--outline:hover {
    background: var(--c-bg);
    color: var(--c-text);
}

.p-v4-btn .c-btn__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}

.p-v4-btn .c-btn__icon svg {
    width: 100%;
    height: 100%;
}

/* CONCEPT 内 (明背景) は黒ボタンに */
.p-v4-concept .p-v4-btn.c-btn--primary {
    background: var(--c-text);
    color: var(--c-bg);
    border-color: var(--c-text);
}

.p-v4-concept .p-v4-btn.c-btn--primary:hover {
    background: var(--c-main);
    border-color: var(--c-main);
}

/* =====================================================================
   3. SERVICE TILES
===================================================================== */
.p-v4-services {
    padding-top: calc(var(--v4-gap-xl) * 1.5);
}

.p-v4-services__head {
    margin-bottom: var(--v4-gap-xl);
    text-align: center;
}

.p-v4-services__title {
    font-family: var(--font-title);
    font-weight: 600;
    font-size: clamp(2rem, 3.6vw, 2.75rem);
    line-height: 1.5;
    letter-spacing: 0.08em;
    color: var(--c-text);
    margin: 0;
    font-feature-settings: "palt";
}

.p-v4-services__lead {
    font-family: var(--font-body);
    font-size: 0.9375rem;
    line-height: 1.9;
    color: var(--c-text-sub);
    max-width: 40em;
    margin: 0;
}

.p-v4-services__grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 7fr 5fr;
    grid-template-rows: 380px 240px 240px;
    gap: var(--v4-gap-md);
}

.p-v4-services__tile {
    margin: 0;
    overflow: hidden;
    background: var(--c-text);
}

.p-v4-services__tile--lg {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
}
.p-v4-services__tile--md {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
}
.p-v4-services__tile--sm:nth-of-type(3) {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
}
.p-v4-services__tile--sm:nth-of-type(4) {
    grid-column: 1 / 2;
    grid-row: 3 / 4;
}
.p-v4-services__tile--sm:nth-of-type(5) {
    grid-column: 2 / 3;
    grid-row: 3 / 4;
}

.p-v4-services__tilelink {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    color: var(--c-bg);
    text-decoration: none;
    overflow: hidden;
}

.p-v4-services__tile-photo {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.p-v4-services__tile-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: var(--v4-photo-filter);     /* 暗くする brightness を撤去 — 他セクションと同じ明るさ */
    transition: transform 0.6s ease;
}

.p-v4-services__tilelink:hover .p-v4-services__tile-photo img {
    transform: scale(1.04);
}

/* 文字可読性: 黒ベタ透過ではなく単一のリニアグラデ（上ソフト→中クリア→下しっかり） */
.p-v4-services__tilelink::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.38) 0%,
        rgba(0, 0, 0, 0) 24%,
        rgba(0, 0, 0, 0) 52%,
        rgba(0, 0, 0, 0.64) 100%
    );
}

.p-v4-services__tile-meta {
    position: absolute;
    top: var(--v4-gap-md);
    left: var(--v4-gap-md);
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.875rem;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);   /* 上部グラデ撤去分の可読性を影で補完 */
}

.p-v4-services__tile-num {
    font-family: var(--font-en);
    font-size: 0.875rem;
    letter-spacing: var(--v4-eyebrow-ls);
    color: var(--c-main);
}

.p-v4-services__tile-eyebrow {
    font-family: var(--font-en);
    font-size: 0.75rem;
    letter-spacing: var(--v4-eyebrow-ls);
    color: var(--c-bg);
    text-transform: uppercase;
    padding-left: 0.875rem;
    border-left: 1px solid rgba(255, 255, 255, 0.6);
}

.p-v4-services__tile-label {
    position: absolute;
    left: var(--v4-gap-md);
    right: var(--v4-gap-md);
    bottom: var(--v4-gap-md);
    z-index: 2;
    font-family: var(--font-title);
    font-weight: 600;
    font-size: clamp(1.125rem, 1.6vw, 1.5rem);
    line-height: 1.4;
    letter-spacing: 0.04em;
    color: var(--c-bg);
    padding-right: 2.5rem;
}

.p-v4-services__tile--lg .p-v4-services__tile-label {
    font-size: clamp(1.5rem, 2.2vw, 2.125rem);
    line-height: 1.45;
}

.p-v4-services__tile-arrow {
    position: absolute;
    right: var(--v4-gap-md);
    bottom: var(--v4-gap-md);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid var(--c-bg);
    border-radius: var(--radius-full);
    color: var(--c-bg);
    transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.p-v4-services__tile-arrow svg {
    width: 0.75rem;
    height: 0.75rem;
}

.p-v4-services__tilelink:hover .p-v4-services__tile-arrow {
    background: var(--c-main);
    border-color: var(--c-main);
    transform: translateX(0.25rem);
}

@media screen and (max-width: 991px) {
    .p-v4-services__grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }
    .p-v4-services__tile--lg,
    .p-v4-services__tile--md,
    .p-v4-services__tile--sm:nth-of-type(3),
    .p-v4-services__tile--sm:nth-of-type(4),
    .p-v4-services__tile--sm:nth-of-type(5) {
        grid-column: 1 / -1;
        grid-row: auto;
    }
    .p-v4-services__tile {
        aspect-ratio: 16 / 9;
    }
    .p-v4-services__tile--lg {
        aspect-ratio: 4 / 3;
    }
}

/* =====================================================================
   4. CONCEPT（ワイヤー準拠：H2 中央 + 下に文左 × 写真右）
===================================================================== */
.p-v4-concept {
    background: var(--c-bg);
    position: relative;
}

.p-v4-concept__header {
    margin-bottom: var(--v4-gap-xl);
    text-align: center;
}

.p-v4-concept__title {
    font-family: var(--font-title);
    font-weight: 600;
    font-size: clamp(2rem, 3.6vw, 2.75rem);
    line-height: 1.5;
    letter-spacing: 0.08em;
    color: var(--c-text);
    margin: 0;
    font-feature-settings: "palt";
}

.p-v4-concept__subtitle {
    font-family: var(--font-title);
    font-weight: 900;
    font-size: clamp(1.75rem, 3vw, 2.375rem);     /* 「住まいの悩みに向き合う」が列幅内で1行に収まる上限に縮小（旧2.625rem→3行化していた） */
    line-height: 1.55;
    letter-spacing: 0.06em;
    color: var(--c-text);
    margin: 0 0 var(--v4-gap-lg);
    text-wrap: pretty;
    word-break: normal;
}

/* コンセプトのbodyを l-container の外側へ広げ、右端まで写真を伸ばす ── */
.p-v4-concept .p-v4-section__inner {
    max-width: none;
    padding-inline: 0;
}

.p-v4-concept__header {
    max-width: var(--width-container);
    margin-inline: auto;
    padding-inline: var(--v4-gap-md);
}

.p-v4-concept__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(40px, 5vw, 80px);
    align-items: start;
    max-width: none;
}

/* 左テキストは「センタリングされた1200コンテナの左端 + サイドバー回避(60+24px)」に揃える。
   旧式はサイドバー幅を加算しておらず、992〜1320px で縦書きサイドバーに文字が潜り込んでいた。 */
.p-v4-concept__text {
    padding-left: calc(
        max(0px, (100vw - var(--width-container)) / 2)
        + var(--v4-sidebar-w) + var(--v4-gap-md)
    );
}

/* 右写真はブラウザ右端まで伸ばす（contained ではなく bleeded） */
.p-v4-concept__photo {
    position: relative;
    margin: 0;
    overflow: hidden;
    background: var(--c-bg-sub);
    aspect-ratio: 4 / 3;
    /* PC: 右端いっぱい、左端は grid 開始位置（コンテナ右半分） */
    width: 100%;
}

.p-v4-concept__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: var(--v4-photo-filter);
    transition: transform 0.6s ease;
}

.p-v4-concept__photo:hover img {
    transform: scale(1.04);
}

.p-v4-concept__caption {
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 0.5rem 0.875rem;
    font-family: var(--font-en);
    font-size: 0.6875rem;
    letter-spacing: var(--v4-eyebrow-ls);
    color: var(--c-bg);
    background: var(--c-text);
    text-transform: uppercase;
}

.p-v4-concept__text {
    display: flex;
    flex-direction: column;
    gap: var(--v4-gap-md);
    padding-top: var(--v4-gap-sm);
}

.p-v4-concept__paragraph {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 2.05;
    letter-spacing: 0.06em;
    color: var(--c-text);
    margin: 0;
    text-wrap: pretty;
    word-break: normal;
}

.p-v4-concept__facts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--v4-gap-md);
    margin: var(--v4-gap-md) 0 0;
    padding-top: var(--v4-gap-md);
    border-top: var(--v4-hairline);
}

.p-v4-concept__fact {
    margin: 0;
}

.p-v4-concept__fact dt {
    font-family: var(--font-en);
    font-size: 0.75rem;
    letter-spacing: var(--v4-eyebrow-ls);
    color: var(--c-text-sub);
    text-transform: uppercase;
    margin: 0 0 0.5rem;
}

.p-v4-concept__fact dd {
    font-family: var(--font-title);
    font-size: 1.0625rem;
    color: var(--c-text);
    margin: 0;
    letter-spacing: 0.04em;
    font-weight: 600;
}

.p-v4-concept .p-v4-btn {
    margin-top: var(--v4-gap-md);
}

@media screen and (max-width: 991px) {
    .p-v4-concept__title {
        white-space: normal;
    }
    .p-v4-concept__body {
        grid-template-columns: 1fr;
        gap: var(--v4-gap-lg);
    }
    /* 1カラム化時：本文は左paddingのみ(PCのbleed用)で右端に接触するため左右対称に戻す */
    .p-v4-concept__text {
        padding-inline: var(--v4-gap-md);
    }
    .p-v4-concept__facts {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--v4-gap-sm);
    }
}

@media screen and (max-width: 599px) {
    .p-v4-concept__facts {
        grid-template-columns: 1fr;
    }
}

/* =====================================================================
   5. STATS
===================================================================== */
.p-v4-stats__head {
    margin-bottom: var(--v4-gap-xl);
}

.p-v4-stats__title {
    font-family: var(--font-title);
    font-weight: 600;
    font-size: clamp(2rem, 3.5vw, 3rem);
    line-height: 1.3;
    letter-spacing: 0.04em;
    color: var(--c-text);
    margin: 0;
    font-feature-settings: "palt";
}

.p-v4-stats__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: var(--v4-hairline);
    border-bottom: var(--v4-hairline);
}

.p-v4-stats__item {
    padding: var(--v4-gap-xl) var(--v4-gap-md);
    border-right: var(--v4-hairline);
    display: flex;
    flex-direction: column;
    gap: var(--v4-gap-md);
}

.p-v4-stats__item:last-child {
    border-right: none;
}

.p-v4-stats__num {
    font-family: var(--font-en);
    font-weight: 400;
    font-size: clamp(4.5rem, 9vw, 8rem);
    line-height: 1;
    color: var(--c-text);
    letter-spacing: -0.02em;
    display: inline-flex;
    align-items: flex-start;
}

.p-v4-stats__num small {
    font-size: 0.3em;
    color: var(--c-main);
    margin-left: 0.1em;
    font-weight: 400;
}

.p-v4-stats__caption {
    font-family: var(--font-body);
    font-size: 0.875rem;
    line-height: 1.7;
    color: var(--c-text);
    letter-spacing: 0.04em;
}

@media screen and (max-width: 991px) {
    .p-v4-stats__list {
        grid-template-columns: 1fr;
    }
    .p-v4-stats__item {
        border-right: none;
        border-bottom: var(--v4-hairline);
        padding-block: var(--v4-gap-lg);
    }
    .p-v4-stats__item:last-child {
        border-bottom: none;
    }
    .p-v4-stats__num {
        font-size: clamp(3.5rem, 18vw, 6rem);
    }
}

/* =====================================================================
   6. STRENGTHS
===================================================================== */
.p-v4-strength__head {
    margin-bottom: var(--v4-gap-xl);
    text-align: center;
}

.p-v4-strength__title {
    font-family: var(--font-title);
    font-weight: 600;
    font-size: clamp(2rem, 3.6vw, 2.75rem);
    line-height: 1.5;
    letter-spacing: 0.08em;
    color: var(--c-text);
    margin: 0;
    font-feature-settings: "palt";
}

/* ── 強み: 交互配置のエディトリアルスプレッド + 巨大番号 ── */
.p-v4-strength__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(80px, 10vw, 160px);
}

.p-v4-strength__card {
    display: grid;
    grid-template-columns: 6fr 6fr;
    align-items: center;
    gap: clamp(40px, 5vw, 80px);
    position: relative;
}

/* 偶数行は写真と本文を入れ替え */
.p-v4-strength__card--2 {
    direction: rtl;
}
.p-v4-strength__card--2 > * {
    direction: ltr;
}

.p-v4-strength__photo {
    position: relative;
    margin: 0;
    overflow: visible;                     /* 番号がはみ出せるよう visible */
    background: var(--c-bg-sub);
    aspect-ratio: 5 / 4;
}

.p-v4-strength__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: var(--v4-photo-filter);
}

.p-v4-strength__body {
    display: flex;
    flex-direction: column;
    gap: var(--v4-gap-md);
    position: relative;
    /* 番号が body から外れたので padding-top は不要 */
}

/* 巨大インデックス番号 — 写真の外側コーナーに配置（半分写真にかぶる位置） */
.p-v4-strength__num {
    position: absolute;
    top: -0.35em;                              /* photo の上端から少し上に */
    margin: 0;
    font-family: var(--font-en);
    font-weight: 800;
    font-size: clamp(80px, 11vw, 160px);
    line-height: 0.9;
    letter-spacing: 0.02em;
    color: transparent;
    -webkit-text-stroke: 1.5px var(--c-main);
    pointer-events: none;
    user-select: none;
    z-index: 2;
}

/* 01 / 03 → 写真左上（写真がビューポート左にあるカード） */
.p-v4-strength__card--1 .p-v4-strength__num,
.p-v4-strength__card--3 .p-v4-strength__num {
    left: -0.1em;
}

/* 02 → 写真右上（direction:rtl で写真がビューポート右に来るカード） */
.p-v4-strength__card--2 .p-v4-strength__num {
    right: -0.1em;
}

.p-v4-strength__cardtitle {
    font-family: var(--font-title);
    font-weight: 900;
    font-size: clamp(1.375rem, 2vw, 1.875rem);
    line-height: 1.55;
    color: var(--c-text);
    margin: 0;
    letter-spacing: 0.06em;
    font-feature-settings: "palt";
    text-wrap: pretty;
    word-break: normal;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--c-border);
}

.p-v4-strength__text {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 2;
    color: var(--c-text);
    margin: 0;
    letter-spacing: 0.04em;
    text-wrap: pretty;
    word-break: normal;
}

@media screen and (max-width: 991px) {
    .p-v4-strength__list {
        gap: clamp(56px, 9vw, 80px);
    }
    .p-v4-strength__card {
        grid-template-columns: 1fr;
        gap: var(--v4-gap-md);
    }
    .p-v4-strength__card--2 {
        direction: ltr;
    }
    .p-v4-strength__body {
        padding-top: clamp(40px, 12vw, 64px);
    }
    .p-v4-strength__card--2 .p-v4-strength__num {
        left: 0;
        right: auto;
    }
}

/* =====================================================================
   7. NEWS
===================================================================== */
.p-v4-news__inner {
    display: flex;
    flex-direction: column;
    gap: var(--v4-gap-xl);
}

.p-v4-news__head {
    text-align: center;
}

.p-v4-news__title {
    font-family: var(--font-title);
    font-weight: 600;
    font-size: clamp(2rem, 3.6vw, 2.75rem);
    line-height: 1.5;
    letter-spacing: 0.08em;
    color: var(--c-text);
    margin: 0;
    font-feature-settings: "palt";
}

.p-v4-news__list {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--v4-gap-lg);
    border-top: var(--v4-hairline);
}

.p-v4-news__item {
    border-bottom: var(--v4-hairline);
}

.p-v4-news__link {
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: center;
    gap: var(--v4-gap-md);
    padding: 1.125rem 0.25rem;
    color: var(--c-text);
    text-decoration: none;
    transition: background 0.3s ease;
}

.p-v4-news__link:hover {
    background: var(--c-bg-sub);
}

.p-v4-news__date {
    font-family: var(--font-en);
    font-size: 0.875rem;
    letter-spacing: 0.1em;
    color: var(--c-text-sub);
    white-space: nowrap;
}

.p-v4-news__cat {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    font-family: var(--font-body);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    color: var(--c-accent);
    border: 1px solid var(--c-accent);
    line-height: 1.4;
    white-space: nowrap;
}

.p-v4-news__textline {
    font-family: var(--font-body);
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--c-text);
    letter-spacing: 0.04em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

/* ── お知らせ一覧へボタンを中央配置（.p-v4-btn 規格で見た目は会社案内と統一） ── */
.p-v4-news__body {
    display: flex;
    flex-direction: column;
    gap: clamp(24px, 3vw, 40px);
}
.p-v4-news__more {
    align-self: center;
}

@media screen and (max-width: 991px) {
    .p-v4-news__inner {
        grid-template-columns: 1fr;
        gap: var(--v4-gap-lg);
    }
    .p-v4-news__link {
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto;
        gap: var(--v4-gap-xs) var(--v4-gap-sm);
        padding-block: var(--v4-gap-md);
    }
    /* カテゴリチップが空き幅いっぱいに伸びるのを防ぎ、日付の隣に content 幅で配置 */
    .p-v4-news__cat {
        justify-self: start;
    }
    .p-v4-news__textline {
        grid-column: 1 / -1;
        -webkit-line-clamp: 2;
    }
}

/* =====================================================================
   8. CTA セクション (Cta コンポーネントをラップして縦書きラベルを追加)
===================================================================== */
.p-v4-section--cta {
    position: relative;
}

.p-v4-section--cta .p-v4-section__index {
    top: var(--v4-gap-xl);
}

/* =====================================================================
   9. 長文段落の改行制御（PC + SP の両方で適用）
   ---------------------------------------------------------------------
   _global.css の body は `text-wrap: balance` + `word-break: auto-phrase`
   が効いており、短文・見出しでは自然な改行になるが、長文の段落では
   「全行を均等幅に揃える」アルゴリズムが強く効きすぎて、文節の途中で
   不自然に改行されてしまう（balance のオーファン回避 / auto-phrase の
   文節分解が逆効果になる典型ケース）。
   長文セレクタを列挙して `text-wrap: pretty` + `word-break: normal` に
   戻すことで、行末オーファン回避のみを残し、本文中の不自然な改行を防ぐ。
===================================================================== */
.p-v4-hero__sub,
.p-v4-services__lead,
.p-v4-concept__lead,
.p-v4-concept__paragraph,
.p-v4-concept__body p,
.p-v4-strength__text,
.p-v4-stats__caption,
.p-v4-news__textline,
.p-cta__sub {
    text-wrap: pretty;
    word-break: normal;
    line-break: strict;
    overflow-wrap: anywhere;
}