/* ============================================================
   front-page-corporate.css
   医療法人社団 泉松会 コーポレートTOP専用スタイル
   ============================================================ */

/* 文字のレンダリングを端正に（代表サイト＝フロントページ全体）
   ・-webkit-font-smoothing  : Chrome/Safari のにじみ抑制
   ・-moz-osx-font-smoothing : macOS版Firefox 用の対になる指定
   ・text-rendering          : リガチャ/字間の最適化 */
body.home {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    --theme-color: #00552e;
}

/* 左右ガター（--corp-gutter）はグローバル :root（style.css）で一元管理。
   ヘッダー・フッター・トップ各セクションが同じ値を共有して左右位置を統一する。 */

/* ============================================================
   セクション共通ヘッダー（統一）
   構成：シンボルSVG → 日本語タイトル → 英字（頭大文字）
   施設サイトは中央寄せだが、代表サイトは左寄せ＋スクロール演出で
   少し動きを持たせる。
   ============================================================ */
.p-section-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;          /* 左寄せ＝動きのある配置 */
    gap: 14px;
    margin-bottom: clamp(48px, 6vw, 72px);
    /* スクロールイン演出 */
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .9s cubic-bezier(.2,.7,.2,1),
                transform .9s cubic-bezier(.2,.7,.2,1);
}
.p-section-head.is-inview { opacity: 1; transform: none; }

/* 日本語タイトル */
.p-section-head__ja {
    position: relative;
    z-index: 1; /* 背後の透かし英字（.p-section-head__ja-row::before）より手前に */
    font-family: var(--font-heading);
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.08em;
    line-height: 1.35;
    margin: 0;
}

/* 日本語タイトルの右背後に配置する透かし英字（各セクションで content/color を上書き）。
   .p-section-head__ja-row は中身が __ja だけの行なので、その実際の高さ＝
   タイトルの実測の高さになる。透かしはそれに対して top:50%+translateY(-50%) で
   センタリングするため、フォントサイズやディスプレイ幅が変わっても常に
   タイトルの中央ラインに追従する（固定pxのtopを使わないので画面サイズが変わっても崩れない）。 */
.p-section-head__ja-row {
    position: relative;
    width: 100%; /* 親 .p-section-head は align-items:flex-start で子を content 幅に
                    縮めるため、明示的に幅いっぱいに広げて right:-20px の基準にする */
}
.p-section-head__ja-row::before {
    position: absolute;
    top: 50%;
    right: -20px;
    transform: translateY(-50%);
    font-weight: 700;
    font-size: clamp(80px, 14vw, 160px);
    letter-spacing: 0.1em;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
    z-index: 0;
}
@media (max-width: 768px) {
    /* タイトル本体をモバイルで中央寄せにしたのに合わせ、背後の透かし英字も
       右上基準（right:-8px）ではなく行の中央に来るようにする。
       採用情報（.p-corp-recruit）の透かしはモバイルでは下の専用ルールで
       非表示（display:none）のため、この中央寄せの影響は受けない。 */
    .p-section-head__ja-row::before {
        font-size: 15vw;
        left: 50%;
        right: auto;
        transform: translate(-50%, -50%);
    }

    /* モバイルではセクションタイトルを中央寄せ（採用情報は写真オーバルデザインのため対象外）。
       -on-light の見出し（施設紹介・お知らせ・コラム）も他の見出しに揃えて中央寄せにする。 */
    .p-corp-about__inner .p-section-head,
    .p-fmap .p-section-head,
    .p-section-head.-on-light {
        align-items: center;
        text-align: center;
    }
    .p-corp-about__inner .p-section-head__en,
    .p-fmap .p-section-head__en,
    .p-section-head.-on-light .p-section-head__en {
        justify-content: center;
    }
    /* お知らせ見出しのリード＋ボタン行も中央に揃える */
    .p-section-head.-on-light .p-section-head__lead-row {
        align-items: center;
    }

    /* 採用情報の透かし英字（RECRUIT）はモバイルでも表示する。
       他セクションは上の中央寄せルールが効くが、採用情報はPCと同じく
       セクション右端寄せに戻す（基準は全幅の .p-corp-recruit__inner）。 */
    .p-corp-recruit .p-section-head__ja-row::before {
        left: auto;
        right: calc(var(--corp-gutter) - 10px);
        transform: translateY(-50%);
        font-size: 15vw;
        /* 縦位置（PCの top:205px は padding-top:150px 前提）は、
           採用情報セクションの @media ブロック側で行中央に合わせ直す。 */
    }
}

/* 英字ラベル（頭大文字・Montserrat・ゴールドのリード線が伸びる演出） */
.p-section-head__en {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    font-family: var(--font-en);
    font-size: var(--fs-14);
    font-weight: 600;
    letter-spacing: 0.22em;
    color: #bfa67a;
    text-transform: none;
    margin: 0;
}
.p-section-head__en::before {
    content: '';
    display: block;
    width: 42px;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .9s .25s cubic-bezier(.2,.7,.2,1);
}
.p-section-head.is-inview .p-section-head__en::before { transform: scaleX(1); }

/* リード文 */
.p-section-head__lead {
    font-family: var(--font-body);
    font-size: clamp(15px, 1.2vw, 17px);
    color: rgba(255,255,255,0.78);
    line-height: 1.95;
    max-width: 680px;
    margin: 2px 0 0;
}

/* 明るい背景（施設紹介など）用カラー上書き */
.p-section-head.-on-light .p-section-head__ja { color: #1a2b1a; }
.p-section-head.-on-light .p-section-head__en { color: #00552e; }
.p-section-head.-on-light .p-section-head__lead { color: #5a6b5a; }

/* ── B：見出しリビールの段階化（日本語→金線→リード）──
   親 .p-section-head のフェードに、子要素ごとの遅延を重ねて上品に立ち上げる。
   日本語タイトルは clip-path で下から立ち上がるワイプ。動きは小さく抑える。 */
.p-section-head__lead {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .8s cubic-bezier(.2,.7,.2,1),
                transform .8s cubic-bezier(.2,.7,.2,1);
    transition-delay: .34s;
}
.p-section-head__ja {
    clip-path: inset(0 0 105% 0);
    transition: clip-path 1s .12s cubic-bezier(.2,.7,.2,1);
}
.p-section-head.is-inview .p-section-head__lead { opacity: 1; transform: none; }
.p-section-head.is-inview .p-section-head__ja   { clip-path: inset(0 0 -8% 0); }

/* モーション無効設定を尊重 */
@media (prefers-reduced-motion: reduce) {
    .p-section-head { opacity: 1; transform: none; transition: none; }
    .p-section-head__en::before { transform: scaleX(1); transition: none; }
    .p-section-head__lead { opacity: 1; transform: none; transition: none; }
    .p-section-head__ja { clip-path: none; transition: none; }
}


/* ============================================================
   施設マップセクション (p-fmap) — 地図中央・3カード絶対配置
   ============================================================ */
.p-fmap {
    overflow: hidden;
    /* p-corp-about__lower の終端（生成り #f7f3e9 ベース）とそのまま地続きに見えるよう、
       上端は同色の平坦な帯から始める。見出し・リード文の間（〜380px＝.p-fmap__stage
       開始手前）はこの生成り単色を維持し、地図（.p-fmap__map、sticky開始点）に
       差し掛かるあたりから自身のラジアルグラデーションへフェードインさせる。
       継ぎ目直後で色が変わり始めると「繋げた」意味が薄れるため、フェード開始位置を
       意図的に離してある。
       下端も同様に、次のお知らせセクション（t-corp-news、背景 --corp-bg-beige = #f7f3e9）
       へ地続きに見えるよう、末尾260pxで単色の#f7f3e9へ収束させる
       （薄いグリーン→ベージュの境界線をなくす）。 */
    background:
        linear-gradient(180deg, #f7f3e9 0%, #f7f3e9 380px, rgba(247, 243, 233, 0) 620px),
        linear-gradient(180deg, rgba(247, 243, 233, 0) 0%, rgba(247, 243, 233, 0) calc(100% - 260px), #f7f3e9 100%),
        radial-gradient(circle at 38% 34%, #ffffff 0%, #ecf6ef 52%, #def0e3 100%);
    padding: 100px 0 120px;
}
/* 右上の透かし英字：.p-section-head__ja-row::before に content/color だけ与える */
.p-fmap .p-section-head__ja-row::before {
    content: 'FACILITIES';
    color: rgba(0, 85, 46, 0.05);
}

.p-fmap__inner {
    max-width: none;
    margin: 0;
    padding: 0 var(--corp-gutter);
}

/* ステージ（左に大きな地図 / 右に施設パネル縦並び）
   見出し（.p-section-head）とのバランスを画面幅を問わず保つため、開始位置に
   viewport基準の余白を追加する（clampで固定px指定より自然に伸縮させる）。 */
.p-fmap__stage {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 64px;
    margin-top: clamp(20px, 3vw, 40px);
    align-items: start;
}

/* 宮城県SVGマップ（左・大きく主役。背景はセクションと一体化） */
.p-fmap__map {
    position: sticky;
    top: 100px;
    width: 100%;
    background: transparent;
    padding: 20px 0 8px;
}
/* 背景の大きなウォーターマーク文字 */
.p-fmap__miyagi {
    font-size: clamp(48px, 7vw, 110px);
    font-weight: 900;
    letter-spacing: 0.06em;
    color: rgba(47,122,79,0.06);
    line-height: 1;
    pointer-events: none;
    text-align: right;
    margin: 0;
    padding-right: 14px;
}
.p-fmap__bg-svg {
    position: relative;
    z-index: 1;
    width: 100%;
    height: auto;
    display: block;
}
/* PC（sticky表示時）: MIYAGIとヒントをSVGに重ねて絶対配置し、SVGを最大化 */
@media (min-width: 861px) {
    .p-fmap__map {
        position: sticky;
    }
    .p-fmap__bg-svg {
        max-height: calc(100vh - 160px);
        width: auto;
        max-width: 100%;
        margin: 0 auto;
        display: block;
    }
    .p-fmap__miyagi {
        position: absolute;
        bottom: 38px;
        right: 0;
        padding-right: 4px;
        z-index: 2;
    }
    .p-fmap__hint {
        position: absolute;
        bottom: 8px;
        right: 0;
        padding-right: 4px;
        z-index: 2;
    }
}

/* 県境線 */
.p-fmap__svg-border {
    fill: #cdeed3;
    stroke: #7fc787;
    stroke-width: 0.8px;
}

/* ピン共通 */
.p-fmap__pin { cursor: pointer; }
/* マーカー（円・番号）だけ拡大対象に。ラベル文字は拡大させない */
.p-fmap__pin-bg,
.p-fmap__pin-num {
    transition: transform 0.22s ease, filter 0.22s ease;
    transform-box: fill-box;
    transform-origin: center;
}
.p-fmap__pin-bg { filter: drop-shadow(0 2px 6px rgba(0,0,0,0.35)); }
.p-fmap__pin-ring {
    fill: none;
    stroke-width: 1.5;
    opacity: 0;
    animation: fmap-pulse 2.8s ease-out infinite;
    transform-box: fill-box;
    transform-origin: center;
}
.p-fmap__pin:nth-child(2) .p-fmap__pin-ring { animation-delay: 0.9s; }
.p-fmap__pin:nth-child(3) .p-fmap__pin-ring { animation-delay: 1.8s; }
@keyframes fmap-pulse {
    0%   { r: 11px; opacity: 0.7; }
    100% { r: 34px; opacity: 0; }
}
.p-fmap__pin-num {
    font-size: var(--fs-10); font-weight: 800; fill: #fff;
    text-anchor: middle; dominant-baseline: central; pointer-events: none;
}
/* ピンの引き出し線・地名ラベル */
.p-fmap__pin-leader {
    stroke: #6f8a76; stroke-width: 0.8px; stroke-dasharray: 2 2;
}
.p-fmap__pin-label {
    font-size: var(--fs-10); font-weight: 700; fill: #1a3b27;
    paint-order: stroke; stroke: #fff; stroke-width: 2.5px;
    stroke-linejoin: round; pointer-events: auto; cursor: pointer;
    transition: fill 0.22s ease, font-size 0.22s ease;
}
.p-fmap__pin-label--end { text-anchor: end; }
/* ホバー：マウスデバイスのみ（タッチデバイスのphantom hover対策） */
@media (hover: hover) {
    .p-fmap__pin:hover .p-fmap__pin-bg,
    .p-fmap__pin:hover .p-fmap__pin-num { transform: scale(1.25); }
    .p-fmap__pin:hover .p-fmap__pin-bg { filter: drop-shadow(0 3px 8px rgba(0,0,0,0.45)); }
    .p-fmap__pin:hover .p-fmap__pin-label { fill: #003d20; font-size: var(--fs-11); }
}
/* タップ時の押し込み感（タッチ・マウス共通） */
.p-fmap__pin:active .p-fmap__pin-bg,
.p-fmap__pin:active .p-fmap__pin-num { transform: scale(1.1); }
/* ヒントテキスト（PC・モバイル共通、マップ内SVG直下に配置） */
.p-fmap__hint {
    display: block;
    text-align: right;
    font-size: var(--fs-15);
    color: #6f8a76;
    margin-top: 10px;
    padding: 0 8px 4px;
    letter-spacing: 0.03em;
}

/* モバイル：1行に収まらず中途半端な位置で折り返してしまうため、
   画面幅に合わせて文字サイズを縮めて必ず1行で表示する。
   計算式：この行が使える幅は「画面幅 − 左右の余白（実測 76px）」で、
   本文23文字は文字サイズの約21.8倍の幅になる。安全側に 84px を引いて割り、
   上限は元の 15px（画面幅 410px あたりで頭打ち）。 */
@media (max-width: 860px) {
    .p-fmap__hint {
        white-space: nowrap;
        font-size: min(15px, calc((100vw - 84px) / 21.8));
    }
}
/* アクティブ（パネルホバー時）：マーカーのみ拡大、ラベルは色変化のみ */
.p-fmap__pin.is-active .p-fmap__pin-bg,
.p-fmap__pin.is-active .p-fmap__pin-num { transform: scale(1.4); }
.p-fmap__pin.is-active .p-fmap__pin-bg { filter: drop-shadow(0 3px 10px rgba(0,0,0,0.5)); }
.p-fmap__pin.is-active .p-fmap__pin-label {
    fill: var(--card-color, #1a3b27);
    font-weight: 800;
}


/* 施設パネル（右・縦並び）
   1枚目カードの上端にも見出しからの余白を持たせる（地図側の開始位置とは
   独立に、viewport基準で伸縮する余白を追加）。 */
.p-fmap__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin-top: clamp(16px, 2.4vw, 32px);
}

/* パネル */
.p-fmap__card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e6efe8;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 34px rgba(0,0,0,0.07);
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.5s ease, transform 0.5s ease, box-shadow 0.3s ease;
    /* ピンクリックでジャンプ時、PCヘッダー(~100px)の下に隠れないよう余白を確保 */
    scroll-margin-top: 120px;
}
.p-fmap__card.is-visible { opacity: 1; transform: translateY(0); }
.p-fmap__card:nth-child(2).is-visible { transition-delay: 0.12s; }
.p-fmap__card:nth-child(3).is-visible { transition-delay: 0.24s; }
/* ピンクリックでジャンプした際の一時ハイライト */
.p-fmap__card.is-jump {
    box-shadow: 0 0 0 3px var(--card-color, #00552e), 0 22px 52px rgba(0,0,0,0.13);
    transform: translateY(0);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.p-fmap__card:hover {
    box-shadow: 0 22px 52px rgba(0,0,0,0.13);
    transform: translateY(-5px);
}

/* リンク（head + photo をまとめてリンク化） */
.p-fmap__card-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* ヘッダー（番号 + 地名 + 施設名 + 詳細情報ボタン） */
.p-fmap__card-head {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 26px 32px;
    background: color-mix(in srgb, var(--card-color) 7%, #fff);
    transition: background-color 0.3s ease;
}
.p-fmap__card-link:hover .p-fmap__card-head {
    background: var(--card-color);
}
.p-fmap__card-num {
    flex-shrink: 0;
    width: 56px; height: 56px; border-radius: 50%;
    background: var(--card-color); color: #fff;
    font-size: var(--fs-24); font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--card-color) 45%, transparent);
    transition: background-color 0.3s ease, color 0.3s ease;
}
.p-fmap__card-link:hover .p-fmap__card-num {
    background: #fff;
    color: var(--card-color);
}
.p-fmap__card-headtxt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.p-fmap__card-area {
    font-size: var(--fs-15); font-weight: 700; color: var(--card-color);
    letter-spacing: 0.04em;
    transition: color 0.3s ease;
}
.p-fmap__card-link:hover .p-fmap__card-area { color: rgba(255,255,255,0.85); }
.p-fmap__card-corp {
    display: block;
    font-size: var(--fs-13); font-weight: 600;
    color: #6a8a72; letter-spacing: 0.02em;
    margin-bottom: 2px;
    transition: color 0.3s ease;
}
.p-fmap__card-link:hover .p-fmap__card-corp { color: rgba(255,255,255,0.7); }
.p-fmap__card-name {
    font-size: var(--fs-25); font-weight: 600;
    color: #1a2b1a; line-height: 1.35; margin: 0;
    transition: color 0.3s ease;
}
.p-fmap__card-link:hover .p-fmap__card-name { color: #fff; }

/* 写真 */
.p-fmap__card-photo {
    height: 220px;
    overflow: hidden;
}
.p-fmap__card-photo img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}
.p-fmap__card:hover .p-fmap__card-photo img { transform: scale(1.06); }

/* 情報リスト（ゆったり・すっきり） */
.p-fmap__card-info {
    margin: 0;
    padding: 16px 32px 8px;
    flex: 1;
}
.p-fmap__card-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 0;
    border-bottom: 1px solid #eef4ef;
}
.p-fmap__card-row:last-child { border-bottom: none; }
.p-fmap__card-row dt {
    flex-shrink: 0;
    width: 104px; /* アイコン除去に合わせてラベル幅を詰め（「交通アクセス」が収まる幅）、dd（値）を広げる */
    display: flex; align-items: center; gap: 0;
    font-size: var(--fs-15); font-weight: 700; color: #486b52;
    white-space: nowrap;
}
/* アイコン（.p-fmap__card-ico）はPC・モバイルとも非表示。空いた分はラベル列を
   詰めて値（dd）の領域を広げる。マークアップ（SVG）はDOMに残すがCSSで除去。 */
.p-fmap__card-ico { display: none; }
.p-fmap__card-row dd {
    margin: 0; flex: 1;
    font-size: var(--fs-18); color: #2a3a2e; line-height: 1.5; font-weight: 700;
}
.p-fmap__card-row dd a {
    color: var(--card-color); text-decoration: none; font-weight: 700;
}
.p-fmap__card-row dd a:hover { text-decoration: underline; }

/* 詳細情報ボタン（.p-fmap__card-head 右上・外部リンクアイコン付き・施設カラー）
   num + headtxt はヘッダー内で左詰めのまま、margin-left:auto で右端へ寄せる。
   ヘッダー内に収まるようコンパクトな丸ボタンに調整。 */
.p-fmap__card-detail {
    flex-shrink: 0;
    margin-left: auto;
    padding: 11px 18px;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    background: var(--card-color); color: #fff;
    font-size: var(--fs-16); font-weight: 700;
    white-space: nowrap;
    border-radius: 10px;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease;
}
.p-fmap__card-link:hover .p-fmap__card-detail {
    background: #fff;
    color: var(--card-color);
}
.p-fmap__card-extico { width: 17px; height: 17px; }


/* レスポンシブ */
@media (max-width: 1180px) {
    .p-fmap__stage { gap: 44px; }
    .p-fmap__list { gap: 26px; }
    .p-fmap__card-name { font-size: var(--fs-22); }
    .p-fmap__card-head { padding: 22px 16px; gap: 16px; }
    .p-fmap__card-info { padding: 12px 26px 6px; }
    .p-fmap__card-row dt { width: 92px; font-size: var(--fs-14); }
    .p-fmap__card-row dd { font-size: var(--fs-16); }
}

@media (max-width: 860px) {
    .p-fmap__stage {
        display: flex;
        flex-direction: column;
        gap: 44px;
    }
    .p-fmap__map {
        position: relative;
        top: auto;
        z-index: auto;
        max-width: 620px;
        margin: 0 auto;
        width: 100%;
        padding: 12px 12px 16px;
        background: rgba(255, 255, 255, 0.5);
        border-radius: 16px;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    }
    .p-fmap__list { max-width: 620px; margin: 0 auto; width: 100%; }
    /* SPヘッダー(top:5px + 高さ60px) + 余白 */
    .p-fmap__card { scroll-margin-top: 80px; }
    /* モバイル：地名ラベルを拡大してタップしやすくする */
    .p-fmap__pin-label {
        font-size: var(--fs-13);
        stroke-width: 4px;
    }
}

@media (max-width: 768px) {
    .p-fmap { padding: 64px 0 84px; }
    .p-fmap__map { padding: 22px 16px 16px; }
    .p-fmap__card-name { font-size: var(--fs-20); }
    .p-fmap__card-num { width: 48px; height: 48px; font-size: var(--fs-20); }
    .p-fmap__card-photo { height: 190px; }

    /* 詳細情報ボタンはアイコンのみにし、施設名（可変長）が折り返さないよう
       headtxt側の横幅を確保する。テキストは視覚的には隠すが、スクリーン
       リーダー用に DOM 上には残す（clip技法によるvisually-hidden）。 */
    .p-fmap__card-detail {
        width: 44px;
        height: 44px;
        padding: 0;
        gap: 0;
        flex-shrink: 0;
    }
    .p-fmap__card-detail-text {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
    .p-fmap__card-extico { width: 19px; height: 19px; }
}

@media (max-width: 480px) {
    .p-fmap__card-head { gap: 14px; padding: 20px 20px; }
    .p-fmap__card-num { width: 40px; height: 40px; font-size: var(--fs-17); }
    .p-fmap__card-name { font-size: var(--fs-17); }
    .p-fmap__card-detail { width: 38px; height: 38px; }
    .p-fmap__card-extico { width: 16px; height: 16px; }

    /* dt（ラベル）は内容幅、dd（値）は次の行に全幅で折り返す。
       アイコンを除去したため、値の折り返しインデント（旧50px）は不要にして全幅に広げる。 */
    .p-fmap__card-row { flex-wrap: wrap; row-gap: 6px; }
    .p-fmap__card-row dt { width: auto; }
    .p-fmap__card-row dd { flex-basis: 100%; font-size: var(--fs-15); padding-left: 0; }
}

/* ============================================================
   新着情報（既存 t-home-news の上書き）
   ============================================================ */
.t-corp-news {
    background: var(--corp-bg-beige, #F7F3E9);
    /* About／施設マップ（100px 0 120px）と縦リズムを揃える（コーポレートtop専用） */
    padding: 100px 0 120px;
}
@media (max-width: 768px) {
    /* モバイルは「お知らせ一覧を見る」ボタンがセクション最終要素になるため、
       PCと同じ120pxの下余白だと間延びして見える。詰める。
       !important は旧・汎用ルール .t-home-news { padding: 56px 0 120px !important }
       （news.css、max-width:767px）に勝つために必要。 */
    .t-corp-news {
        padding-bottom: 64px !important;
    }
}


/* ============================================================
   泉松会について (p-corp-about)
   上段（p-corp-about__upper）＝動画背景＋法人特徴＝ブランドグリーン。
   下段（p-corp-about__lower）＝理事長挨拶（短縮版）＝白背景。
   動画は上段のみに収めることで、object-fit:cover による過度な拡大を防ぐ。
   上段→下段はグラデーションで自然に繋げ、境界線を作らない。
   ============================================================ */
.p-corp-about {
    position: relative;
}

/* ---- 上段：動画背景＋法人特徴 ---- */
.p-corp-about__upper {
    position: relative;
    overflow: hidden;
    background: #00552e;
    /* 上下の余白配分を調整。下側（法人特徴カードと理事長挨拶の間）はさらに詰め、
       その分を上側（動画背景の縦幅）に回すことで、全体の高さを保ちつつ
       ギャップだけをタイトにする。フェード曲線（.p-corp-about__bg::after等）は
       すべて%基準のため、上下の配分を変えても動画の見え方の比率は崩れない。 */
    padding: 150px 0 55px;
}
/* 右上の透かし英字：.p-section-head__ja-row::before（タイトル中央に自動追従）に
   content/color だけ与える。位置指定は共通コンポーネント側で完結。 */
.p-corp-about__upper .p-section-head__ja-row::before {
    content: 'FEATURES';
    color: rgba(255,255,255,0.06);
}

/* 背景：透析室の環境映像＋緑オーバーレイ（Recruit と同じ作法）。
   映像は「気配」程度に沈め、白文字の可読性とブランド緑を保つ。 */
.p-corp-about__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #00552e;
}
.p-corp-about__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    /* 動画は上端のみフェードイン（220pxまで透明＝波形FVとの継ぎ目と同色→320pxで全表示）。
       下端のフェードは .p-corp-about__bg::after 側の1本のグラデーションだけに任せる
       （映像側にも別カーブの透明化を重ねると、2つのグラデーションが干渉し合い
       「階段状」に見えてしまうため、下端の減衰は1系統に一本化する）。 */
    -webkit-mask-image: linear-gradient(180deg, transparent 220px, #000 320px);
    mask-image: linear-gradient(180deg, transparent 220px, #000 320px);
}
.p-corp-about__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    /* 上端220pxは波形FVの下端・.p-corp-about__inner の背景と完全に同じ #00552e
       （不透明）にし、継ぎ目を色差ゼロで埋没させる。その下から徐々に映像を見せる。
       下端は「暗くする→戻す」の折り返し1回のみのシンプルなV字カーブにし、
       色相も終始 #00552e 系に統一（色相が変わる中継点を作らない）。
       88%〜100%は完全不透明の #00552e で変化ゼロのまま維持し（＝傾き0の
       バッファ帯）、.p-corp-about__lower 側の冒頭にも同じ傾き0のバッファを
       用意することで、継ぎ目をまたいで「変化なし→変化なし」の状態にし、
       勾配の変化点（キンク）を継ぎ目そのものから遠ざけて馴染ませる。 */
    background:
        linear-gradient(180deg,
            #00552e 0%,
            #00552e 220px,
            rgba(0, 66, 37, 0.68) 44%,
            #00552e 88%,
            #00552e 100%);
}
/* モーション無効時は映像を止め、poster/背景静止画を見せる */
@media (prefers-reduced-motion: reduce) {
    .p-corp-about__video { display: none; }
}
/* モバイル軽量化：映像は緑オーバーレイ(0.90〜0.95)でほぼ不可視なのに、
   マスク付き全画面ループ動画の毎フレーム合成が FV→ABOUT 遷移を重くする。
   小画面では非表示にし、ベース緑＋グラデのみで見せる（見た目はほぼ同一）。
   ※実デコード停止は JS 側で pause も行う。 */
@media (max-width: 768px) {
    .p-corp-about__video { display: none; }

    /* ── モバイルの継ぎ目に出る白い線の対策（2つの原因の両方に手当てする）──
       原因1：要素自身の背景色の滲み出し
              → .p-corp-about__lower の background-color: #f7f3e9 を廃止（下部の定義を参照）
       原因2：セクションの高さが端数(例:1181.94px)になり、dpr=2の端末では継ぎ目が
              半端なデバイスピクセルに落ちて、隙間から背後の body の生成り(#f7f3e9)
              が覗く。「緑どうしの継ぎ目」でだけ白線として目立つ。
              → 下記の 1px 重ね＋同色の box-shadow で境界そのものを無くす。
       ※どちらか一方だけでは線が残るため、両方必要（片方を外すと再発する）。
       重ねる1pxは隣接要素と同色なので、見た目・グラデーション演出は変わらない。 */
    .p-corp-about__upper {
        /* 上端＝FV(緑)、下端＝下段の上端バッファ(緑) と同色 */
        margin-top: -1px;
        box-shadow: 0 -1px 0 0 #00552e, 0 1px 0 0 #00552e;
    }
    .p-corp-about__lower {
        /* 上端＝上段の下端(緑)、下端＝次セクション p-fmap(生成り) と同色 */
        margin-top: -1px;
        box-shadow: 0 -1px 0 0 #00552e, 0 1px 0 0 #f7f3e9;
    }
}
.p-corp-about__inner {
    position: relative;
    z-index: 2;
    max-width: none;
    margin: 0;
    padding: 0 var(--corp-gutter);
}

/* 法人の特徴：写真＋タイトルの5枚（浜松医療センター「取り組み」セクション参考）。
   カード全体がリンクになっており、ホバーで写真にゴールドの色調オーバーレイが付く。
   非対称の「バナー＋グリッド」構成：1枚目（安心・安全な医療 = -featured）が
   横画面で最上段に跨がり、残り4枚がその下に縦構成（ポートレート）で並ぶ。
   横幅（PCのみ）は .l-header__inner に合わせて連続的に伸縮させる（固定 max-width
   ではなく、画面幅に応じたビューポート基準の幅）。center寄せは margin:auto ではなく
   left+transform 単独で行う（margin:autoを併用すると親要素のpadding量によって
   誤差が生じ、右にずれて見えることがあるため）。1024px以下では .l-header__inner
   自身がガター基準の余白に戻るのに合わせ、こちらも通常フロー（親 .p-corp-about__inner
   の var(--corp-gutter) 余白）に戻す。 */
.p-corp-features {
    display: grid; grid-template-columns: repeat(5,1fr); gap: 20px;
    padding: 0; list-style: none;
    width: calc(100vw - 80px);
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}
@media (max-width: 1024px) {
    .p-corp-features {
        width: auto;
        position: static;
        left: auto;
        transform: none;
    }
}
.p-corp-features__link {
    position: relative;
    display: flex;
    flex-direction: column;
    text-decoration: none;
}
.p-corp-features__photo {
    position: relative;
    /* PC横画面では5枚とも同じ縦構成（ポートレート）で1列に並ぶ。
       1枚目を跨がせる大きなバナー表示はモバイルのみ（下部の@media参照）。 */
    aspect-ratio: 3 / 4;
    border-radius: 16px;
    overflow: hidden;
    background: #003d20;
}
.p-corp-features__photo img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}
.p-corp-features__photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(0,85,46,0.55) 0%, rgba(191,166,122,0.55) 100%);
    opacity: 0;
    transition: opacity 0.35s ease;
}
/* 写真左上の縦書きラベル（浜松医療センター参考）。.p-corp-features__title と
   同じタイトルを表示する白背景タグとして写真の上端から少しはみ出すように配置し、
   ホバーでゴールドに色が付く。.p-corp-features__photo の子ではなく
   .p-corp-features__link の子（写真と兄弟）にしてあるのは、photo側の
   overflow:hidden に上端のはみ出しごとクロップされてしまうのを避けるため。 */
.p-corp-features__vlabel {
    position: absolute;
    top: -20px;
    left: 18px;
    z-index: 2;
    writing-mode: vertical-rl;
    text-orientation: upright;
    /* 高さ自動のままだと、「管理栄養士による個別栄養指導」のような長いタイトルが
       縦1列に収まらず2列に折り返されて崩れてしまう。white-space:nowrapで
       改行・折り返しを禁止し、必ず1列の縦書きにする。 */
    white-space: nowrap;
    background: #fff;
    color: #1a2b1a;
    /* 高齢者でも読める大きさを優先し、17px→20pxへさらに拡大。 */
    font-size: var(--fs-20);
    font-weight: 700;
    letter-spacing: 0.12em;
    padding: 18px 10px 20px;
    border-radius: 8px;
    box-shadow: 0 8px 18px rgba(0,0,0,0.22);
    transition: background 0.3s ease, color 0.3s ease;
}
/* 「管理栄養士による個別栄養指導」など特に長いタイトル専用の縮小版。
   写真の高さ＋はみ出し量を超えると下のタイトル文字と視覚的に重なってしまうため、
   この項目だけ少し小さくして収める。 */
.p-corp-features__vlabel.-long {
    font-size: var(--fs-15);
    letter-spacing: 0.06em;
    padding: 16px 9px 18px;
}
.p-corp-features__title {
    margin-top: 16px;
    font-size: var(--fs-16);
    font-weight: 700;
    color: #fff;
    text-align: center;
    letter-spacing: 0.02em;
    transition: color 0.3s ease;
}
.p-corp-features__link:hover .p-corp-features__photo img { transform: scale(1.06); }
.p-corp-features__link:hover .p-corp-features__photo::after { opacity: 1; }
.p-corp-features__link:hover .p-corp-features__title { color: #bfa67a; }
.p-corp-features__link:hover .p-corp-features__vlabel { background: #bfa67a; color: #fff; }

/* ---- モバイル：1つ跨ぎ＋2つ＋2つ ----
   2カラムにし、1枚目（-featured）を2列分跨がせるだけで、
   「跨ぎ1／2列／2列」の並びが自然に得られる（PC横画面は5枚横並びのため、
   跨ぎ・バナー比率の指定はこのモバイル用ブロックにのみ持たせる）。 */
@media (max-width: 900px) {
    .p-corp-features {
        grid-template-columns: repeat(2,1fr);
        /* タグが写真上端から20pxはみ出すため、行間の余白（row-gap）が
           20pxの gap のままだと上の段の写真とタグが接近しすぎて余白不足に
           見える。行間だけ広げ、列間は詰めたままにする。 */
        row-gap: 44px;
        column-gap: 16px;
    }
    .p-corp-features__item.-featured { grid-column: 1 / -1; }
    .p-corp-features__item.-featured .p-corp-features__photo { aspect-ratio: 16 / 9; }
    /* モバイルはカード幅が狭いため、タグをもう少し左に寄せて文字も縮小する。 */
    .p-corp-features__vlabel {
        left: 10px;
        font-size: var(--fs-15);
        padding: 14px 8px 16px;
    }
    .p-corp-features__vlabel.-long {
        font-size: var(--fs-12);
        padding: 12px 7px 14px;
    }
}

/* ============================================================
   下段：理事長挨拶（短縮版）
   上段のブランドグリーンからグラデーションで自然に切り替える。白ベタはやめ、
   .p-global-menu.is-open と同じ「淡い三色（赤・緑・青）の放射グラデーション＋
   ぼかし」を起用し、生成りベース(#f7f3e9)に空気感のある色味を重ねる。
   カードは浜松医療センター参考の落ち着いたトーンに合わせ、この背景の上に
   コンパクトな2カラムカードとして表示（全文は「続きを読む」リンク先）。
   ============================================================ */
.p-corp-about__lower {
    position: relative;
    overflow: hidden; /* ::before のぼかしのハミ出し防止（p-global-menu と同じ作法） */
    /* ※ background-color: #f7f3e9 は指定しない。
       緑グラデーションの「下」に生成りを敷くと、要素の上端が端数座標に乗る
       モバイルで背景色とグラデーションの縁の丸めがズレ、生成りが上端1pxに
       滲み出て白い線に見えるため。body の背景が同じ #f7f3e9 なので、
       指定しなくても下部（グラデーションが透明になる領域）の見た目は同じ。 */
    /* 上段の下端（映像がグリーンへ溶け込んで終わる境目）から、この生成りベースへ
       グラデーションで橋渡しする。境界線を作らない。冒頭48pxは変化ゼロのバッファ
       （上段側の傾き0の帯と継ぎ目をまたいで揃える）にし、そこから340pxかけて
       ゆっくりフェードアウトさせることで、より長く・なだらかに馴染ませる。 */
    background-image: linear-gradient(180deg, #00552e 0%, #00552e 48px, rgba(0, 85, 46, 0) 340px);
    padding: 0 0 100px;
}
/* p-global-menu.is-open と同じ「淡い三色グラデーション」層。
   継ぎ目（上端）では transparent にマスクし、徐々にフェードインさせる。
   マスクを掛けずに inset:-10% の::beforeだけで表現すると、継ぎ目の位置でこの色味が
   いきなりフル濃度で現れてしまい、緑のグラデーションの収束点と合わさって
   「段差」に見えてしまうため、1本の連続したカーブになるよう分離した。
   冒頭56pxは変化ゼロのバッファとし、そこから400pxかけてゆっくり現れるようにする。
   下端も同様に、次の p-fmap との継ぎ目手前120pxで生成り単色(#f7f3e9)へ収束させる
   （p-fmap 側の上端も同じ #f7f3e9 の平坦バッファから始まるため、継ぎ目の両側が
   同一の単色で揃い、色味の差による段差が見えなくなる）。 */
.p-corp-about__lower-wash {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, transparent 56px, #000 400px, #000 calc(100% - 120px), transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, transparent 56px, #000 400px, #000 calc(100% - 120px), transparent 100%);
}
.p-corp-about__lower-wash::before {
    content: '';
    position: absolute;
    inset: -10%;
    background-image:
        radial-gradient(at 15% 15%, rgba(231, 0, 19, 0.08) 0%, transparent 70%),
        radial-gradient(at 85% 20%, rgba(0, 85, 46, 0.07) 0%, transparent 70%),
        radial-gradient(at 50% 85%, rgba(20, 41, 137, 0.06) 0%, transparent 80%);
    filter: blur(50px);
}
.p-corp-greeting-wrap {
    position: relative;
    z-index: 1;
    /* 幅・中央寄せは中の .p-corp-greeting（カード本体）側で行う。ここは縦方向の
       余白だけを担当する（グラデーションの余白が目立たないよう上に詰める）。
       1024px以下（.l-header__inner がガター基準の余白に戻る帯）では、以前と
       同じ左右ガターをここで持たせる。 */
    padding: 60px 0 0;
}
@media (max-width: 1024px) {
    .p-corp-greeting-wrap { padding: 18px var(--corp-gutter) 0; }
}
.p-corp-greeting {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: stretch;
    background: #fff;
    border: 1px solid #e6efe8;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0,40,20,0.14);
    /* 横幅は .l-header__inner（ヘッダーの帯）と同じ計算式（100vw - 80px）で
       連続的に伸縮させ、ビューポート中央に配置する。margin:auto ではなく
       left+transform 単独で中央寄せする（margin:autoを併用すると親要素の
       padding量によって誤差が生じ、右にずれて見えることがあったため）。 */
    width: calc(100vw - 80px);
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}
@media (max-width: 1024px) {
    /* .l-header__inner 自身もこの幅でガター基準の余白に戻るのに合わせ、
       こちらも通常フロー（親 .p-corp-greeting-wrap の左右ガター）に戻す。 */
    .p-corp-greeting {
        width: auto;
        position: static;
        left: auto;
        transform: none;
    }
}
/* 左：メインビジュアル */
.p-corp-greeting__visual {
    position: relative;
    /* min-heightだけだと img の height:100% が定まった親高さを持てず、画像本来の
       （縦長の）アスペクト比のまま伸びてカード全体を巨大化させてしまう
       （実測でカードが1000px超に）。img を絶対配置にしてこのボックス自身の高さに
       確実に追従・クロップさせる（＝写真は上下をカットして構わない）。
       min-heightは右側の短縮文章の自然な高さ（実測約380px）より少し高めに設定し、
       グリッドのalign-items:stretchで右側もこの高さに揃う＝写真に少し余裕を持たせる。 */
    min-height: 440px;
    overflow: hidden;
}
.p-corp-greeting__visual img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 22%;
    display: block;
}
/* 右：テキスト（短縮版＋続きを読むボタン） */
.p-corp-greeting__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(28px, 3vw, 40px) clamp(28px, 5vw, 64px);
}
.p-corp-greeting__label {
    font-size: var(--fs-14);
    font-weight: 700;
    letter-spacing: 0.3em;
    color: var(--color-primary);
    text-transform: uppercase;
    margin-bottom: 16px;
}
.p-corp-greeting__catch {
    font-size: clamp(22px, 2.4vw, 32px);
    font-weight: 700;
    color: #1a2b1a;
    line-height: 1.5;
    margin-bottom: 20px;
    letter-spacing: 0.03em;
}
.p-corp-greeting__text-short {
    font-size: var(--fs-17);
    line-height: 1.95;
    color: #5a6b5a;
}
/* ホバー挙動は「お知らせ一覧を見る」(.c-button.-top-blue) と揃える：
   通常＝プライマリ色ベタ＋同色ボーダー、ホバー＝背景白・文字プライマリ色の白反転。 */
.p-corp-greeting__more {
    align-self: flex-end;
    margin-top: 28px;
    display: inline-flex;
    align-items: center;
    padding: 14px 30px;
    background: var(--color-primary);
    color: #fff;
    font-size: var(--fs-14);
    font-weight: 700;
    letter-spacing: 0.05em;
    border: 2px solid var(--color-primary);
    border-radius: 100px;
    text-decoration: none;
    transition: all 0.3s ease;
}
.p-corp-greeting__more:hover {
    background: #fff;
    color: var(--color-primary);
}

/* ---- タブレット ---- */
@media (max-width: 980px) {
    .p-corp-greeting { grid-template-columns: 1fr; }
    /* aspect-ratio は position:absolute の子を持つ場合 iOS Safari で高さ0になるため
       明示的な height を使用する */
    .p-corp-greeting__visual { min-height: 0; height: 56vw; max-height: 480px; }
    .p-corp-greeting__content { padding: clamp(32px, 6vw, 48px) clamp(24px, 6vw, 40px); }
}

/* ---- スマートフォン ---- */
@media (max-width: 600px) {
    .p-corp-about__upper { padding: 72px 0 48px; }
    .p-corp-about__inner { padding: 0 var(--corp-gutter); }
    .p-corp-about__lower { padding: 0 0 72px; }
    .p-corp-greeting-wrap { padding: 16px var(--corp-gutter) 0; }
    .p-corp-greeting { border-radius: 18px; }
    .p-corp-greeting__visual { height: 75vw; max-height: 360px; }
    .p-corp-greeting__catch { font-size: clamp(20px, 6vw, 24px); }
    .p-corp-greeting__text-short { font-size: var(--fs-16); line-height: 1.9; }
}


/* ============================================================
   採用情報 (p-corp-recruit)
   ============================================================ */
/* 参考サイト（https://aishinkan.jp/）の採用情報セクションに寄せたレイアウト。
   写真パネルは「上辺＝逆ドーム（中央がへこむ谷形）／下辺＝オーバル（丸く膨らむ）」の
   2種類のカーブを持つ1枚の形になる。border-radius だけでは中央がへこむ凹カーブは
   作れないため、
     1) .p-corp-recruit__photo … 下辺だけオーバルに湾曲した写真の矩形パネル
     2) .p-corp-recruit::before … セクション背景と同色の楕円を写真の上辺中央に重ね、
        写真を上から丸く"食い込ませる"ことで、結果として上辺が谷形（逆ドーム）に見える
   の2層構成で再現する。
   上下のカーブの深さ・曲率を完全に揃えるため、共通の変数 --recruit-curve（写真パネル
   の高さに対する割合）を使う。下辺は border-radius の縦成分にそのまま指定し、
   上辺のノッチ楕円は「幅100%・高さ = --recruit-curve の2倍」を境界線上（top:0）に
   half だけ突き出す形にする。これは border-radius の角丸と全く同じ楕円弧（幅50%・
   高さ --recruit-curve の四半楕円）を上下対称に組み合わせているのと数学的に同一で、
   凹み（谷）と膨らみ（山）の比率が厳密に一致する。 */
.p-corp-recruit {
    position: relative;
    overflow: hidden;
    background: var(--color-primary-light);
    --recruit-curve: 10%;
}
/* 1) 写真パネル本体：採用情報がフッター直前の最終セクションになったため、
   下辺のオーバル形状は廃止しフラットにし、フッターとそのまま接続させる。
   上辺の逆ドーム（ノッチ）はそのまま維持。 */
.p-corp-recruit__photo {
    position: absolute;
    /* 上辺だけ 2px 空け、セクション自身のベージュ背景を覗かせる。
       セクション境界がサブピクセル位置（例 …96875px）に来ると、写真の暗い
       1行が半透明に合成されて灰色の細線として全幅に見えてしまうため、
       その1行そのものを作らない。ノッチ（::before）が覆う範囲なので
       見た目は変わらない。 */
    inset: 2px 0 0;
    border-radius: 0 0 0 0;
    background:
        linear-gradient(rgba(0, 30, 17, 0.6), rgba(0, 30, 17, 0.6)),
        url('../images/c-teamphoto-senshou-clinic.jpg') center 10% / cover;
    z-index: 0;
}
/* 2) 上辺中央に食い込む楕円ノッチ＝逆ドーム。下辺の border-radius と同じ曲率になるよう
   幅100%・高さ(--recruit-curve×2) の楕円を境界線上に半分だけ重ねる。 */
.p-corp-recruit::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(var(--recruit-curve) * 2);
    transform: translateY(-50%);
    border-radius: 50%;
    background: var(--color-primary-light);
    z-index: 1;
    pointer-events: none;
}
/* 採用は見出しが幅480pxの左カラム（.p-corp-recruit__content）内にあるため、
   透かし英字を ja-row 基準にすると狭いカラムの右端（＝セクション左半分）に留まり
   左寄りに見える。ja-row を position:static にして透かしの基準を全幅の
   .p-corp-recruit__inner（position:relative）へ移し、お知らせ（NEWS）と同様に
   セクション右端へ寄せる。 */
.p-corp-recruit .p-section-head__ja-row { position: static; }
/* 右上の透かし英字：.p-section-head__ja-row::before に content/color を与える。
   基準が __inner（全幅・左右padding=--corp-gutter）になったので、NEWS と同じく
   右端付近に来るよう right を --corp-gutter 基準で指定する（-20px はNEWSの食み出し量）。 */
.p-corp-recruit .p-section-head__ja-row::before {
    content: 'RECRUIT';
    color: rgba(255, 255, 255, 0.07);
    left: auto;
    right: calc(var(--corp-gutter) - 20px);
    /* 基準が __inner になったため top:50% だとセクション縦中央に来てしまう。
       見出し（採用情報）の中央ライン ≒ padding-top(150px) + 見出し高の半分 に合わせて
       上部へ引き上げ、お知らせ（NEWS）と同様タイトルと同じ高さに揃える。
       transform:translateY(-50%) は基本ルールから継承。 */
    top: 205px;
}
.p-corp-recruit__inner {
    position: relative;
    z-index: 2;
    /* お知らせ・特徴・施設紹介と同じく、固定 max-width の中央寄せではなく
       全幅（左右 --corp-gutter のみ）に展開して各セクションの帯幅を揃える。 */
    max-width: none;
    margin: 0;
    padding: 150px var(--corp-gutter) 120px;
}
.p-corp-recruit__content { max-width: 480px; }
/* 見出しは共通コンポーネント .p-section-head に統一（旧 __symbol/__title/__en/__lead は廃止）。
   採用はキャッチコピーを兼ねるため、JAのみ他セクションより一段大きく見せる。 */
.p-corp-recruit .p-section-head__ja {
    font-size: clamp(30px, 4.2vw, 46px);
    line-height: 1.4;
}
.p-corp-recruit .p-section-head { margin-bottom: clamp(28px, 3vw, 40px); }
/* 参考サイトの「採用サイトへ」ボタン＝白地・アウトライン・外部リンクアイコン、を踏襲
   （濃いグリーンの背景に合わせて白アウトライン→ホバーで白塗りに反転） */
.p-corp-recruit__btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 16px 34px; background: transparent; color: #fff;
    border: 1.5px solid rgba(255,255,255,0.7);
    font-size: var(--fs-15); font-weight:700; border-radius:100px;
    text-decoration:none; letter-spacing:.05em;
    transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.p-corp-recruit__btn svg { width: 16px; height: 16px; transition: transform 0.2s ease; }
.p-corp-recruit__btn:hover {
    background: #fff; color: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
.p-corp-recruit__btn:hover svg { transform: translate(2px, -2px); }

@media (max-width: 768px) {
    /* モバイルのノッチ：高さをセクション高の割合（--recruit-curve）で決めると
       画面幅に対してカーブが浅くなり、弧ではなく「区切り線」に見えてしまう。
       画面幅基準（vw）に切り替え、深さ＝幅の9%（=18vwの半分）にして
       PC（幅比 約4〜5%）に近い浅めのカーブにする。上限120px は 769px 以上
       （PC）の楕円高さとほぼ同じで、ブレークポイントで段差を出さないため。 */
    .p-corp-recruit::before { height: min(18vw, 120px); }

    /* 透かし英字（RECRUIT）の縦位置：PC は padding-top:150px 前提の
       top:205px 固定だが、モバイルは padding-top:88px で見出しも小さい。
       ja-row を position:relative に戻して「見出し行の中央」を基準にすれば、
       画面幅で見出しサイズが変わっても自動で追従する。
       （content が max-width:none なので、横位置＝右端寄せは変わらない） */
    .p-corp-recruit .p-section-head__ja-row { position: relative; }
    .p-corp-recruit .p-section-head__ja-row::before { top: 50%; }
    .p-corp-recruit__inner { padding: 88px var(--corp-gutter) 64px; }
    .p-corp-recruit__content { max-width: none; }
    .p-fmap__inner { padding: 0 var(--corp-gutter); }
}