/* ============================================================
   PROJECT: HERO SECTION (p-hero)
============================================================ */

:root {
    --header-height: 80px;
}

/* ============================================================
   スクロールステージ（ヒーローのスクロール演出エリア）
   高さ 200dvh = ヒーロー自体(100dvh) + アニメーション用スクロール量(100dvh)
============================================================ */
.p-hero-scroll-stage {
    height: 260dvh; /* JS が実 px に上書き */
    position: relative;
    isolation: isolate;
    /* .p-hero-sticky は position:sticky のため、スクロール量とステージ高さの計算が
       僅かにズレる端末では sticky が外れた直後にステージ自体の背景（デフォルトのベージュ）
       が一瞬見えてしまう。次セクション（#about、#00552e）と同色にしておき、
       隙間が出ても継ぎ目に見えないようにする。 */
    background: #00552e;
}

/* ============================================================
   1. ベース構造
   sticky を .p-hero-sticky（clip-path なし）に担当させ、clip-path は .p-hero に置く。
   iOS Safari の「sticky + clip-path を同一要素にかけると壊れる」既知バグの回避。
   これによりスクロール位置はブラウザネイティブ合成で完全同期し、震えが消える。
============================================================ */
.p-hero-sticky {
    position: sticky;
    top: 0;
    width: 100%;
    /* dvh はモバイルのアドレスバー開閉で値が変化し、sticky で固定されている間に
       高さが伸縮して「拡大するような動き」に見えてしまう。svh（アドレスバー表示時の
       最小値で固定）を使い、スクロール中に高さが変わらないようにする。 */
    height: 100vh;
    height: 100svh;
    min-height: 600px;
    /* clip-path で隠れる余白部分（波形の下端）に敷く色。斜めグラデーションだと
       角度の投影計算上、中央付近では終端カラーに届かず色ムラが出るため、
       次セクション（#about）と完全に同じ単色 #00552e にして境目をゼロにする。 */
    background: #00552e;
}

.p-hero {
    position: relative; /* 内部の絶対配置要素のための positioning context */
    width: 100%;
    height: 95%; /* 見た目の縦寸を少し圧縮（残り5%は .p-hero-sticky のグリーン地が見える） */
    padding: 0;
    box-sizing: border-box;
    z-index: 1;
    /* L字くり抜きは廃止。ヘッダー上部まで埋め尽くす常時フルブリードにし、
       下端だけ clinic-hero と同じ波形で静的にくり抜く（スクロールでは変化しない）。 */
    clip-path: url(#heroTopMask);
    transform: translateZ(0);
    backface-visibility: hidden;
}
/* PC: 波下グリーン地の上でも視認しやすい配置に収まったため、スクロール展開時に
   右バーを右端の縦タブへ変形させる演出は廃止。常に同じ位置・レイアウトのまま表示する。 */
/* 展開時はスクロールインジケーターを非表示（全画面感を保つため） */
.p-hero-sticky:has(.p-hero.is-expanded) .p-hero__scroll-indicator {
    opacity: 0 !important; /* JS の per-frame opacity 計算に勝つため */
    transition: opacity 0.35s ease;
    pointer-events: none;
}

/* ============================================================
   2. フレーム（スライダーを内包するコンテナ）
   L字くり抜きは廃止。個別の clip-path は持たず、外枠 .p-hero の
   波形 clip-path（#heroTopMask）にそのまま追従する。
============================================================ */
.p-hero__frame {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

/* ============================================================
   3. 背景スライダー
============================================================ */
.p-hero__slider {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.p-hero__slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transform: scale(1);
    animation: mainVisualFade 40s infinite;
}
/* フォールバック：1枚目は無条件で不透明度1をベースにしておく。
   通常再生時はアニメーションの計算値が常にこのベース値より優先されるため
   見た目に影響しない。一方、FireShotやPlaywrightのanimations:'disabled'の
   ようにキャプチャ時にアニメーションを止める・無効化するツールでは、
   アニメーションが外れた時点でこのベース値まで戻るため、1枚目の写真が
   消えず表示され続ける（clinic-hero.cssの .p-clinic-hero__slide:first-child
   と同じ対策）。 */
.p-hero__slide:first-child {
    opacity: 1;
}

.p-hero__slide:nth-child(1) { animation-delay: 0s; }
.p-hero__slide:nth-child(2) { animation-delay: 8s; }
.p-hero__slide:nth-child(3) { animation-delay: 16s; }
.p-hero__slide:nth-child(4) { animation-delay: 24s; }
.p-hero__slide:nth-child(5) { animation-delay: 32s; }

@keyframes mainVisualFade {
    0%   { opacity: 0; transform: scale(1); }
    4%   { opacity: 1; }
    20%  { opacity: 1; }
    24%  { opacity: 0; transform: scale(1.07); }
    100% { opacity: 0; }
}

/* ============================================================
   3.5 波線装飾（左端 → 右端へ走る白線）
============================================================ */
.p-hero__wave-outline {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 4;
    pointer-events: none;
    transform: translateY(180px); /* 波線アニメーション全体をさらに下へ */
}

.p-hero__wave-outline path {
    stroke: #fff;
    stroke-width: 1.2;
    stroke-linecap: round;
    fill: none;
    stroke-dasharray: 4000;
    stroke-dashoffset: 4000;
    opacity: 0;
    animation: heroWaveDash 12s infinite ease-in-out;
}

.p-hero__wave-outline path:nth-child(1) { animation-delay: 0s; }
.p-hero__wave-outline path:nth-child(2) { animation-delay: 0.6s; }
.p-hero__wave-outline path:nth-child(3) { animation-delay: 1.2s; }

@keyframes heroWaveDash {
    0%   { stroke-dashoffset: 4000; opacity: 0; }
    4%   { opacity: 0.18; }
    45%  { stroke-dashoffset: 0;    opacity: 0.18; }
    65%  { stroke-dashoffset: 0;    opacity: 0.18; }
    82%  { stroke-dashoffset: 0;    opacity: 0; }
    83%  { stroke-dashoffset: 4000; opacity: 0; }
    100% { stroke-dashoffset: 4000; opacity: 0; }
}

/* ============================================================
   3.5 シンボル装飾（青→赤→緑 ふわっとフェード）
============================================================ */
/* ============================================================
   4. グラデーションオーバーレイ（左側テキスト＋底面を暗幕）
============================================================ */
.p-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background:
        radial-gradient(
            ellipse 110% 80% at 50% 50%,
            transparent 10%,
            rgba(0, 0, 0, 0.35) 100%
        ),
        linear-gradient(
            to top,
            rgba(0, 0, 0, 0.50) 0%,
            rgba(0, 0, 0, 0.10) 30%,
            transparent 60%
        );
    pointer-events: none;
    will-change: opacity;
}

/* スクロール進行で中央暗幕を opacity だけで重ねる
   （JSが毎フレーム背景文字列を再生成するとレイヤ再描画が重いため、
     重い radial-gradient は静的レイヤとして持ち、--p-hero-darken で
     不透明度のみ動かす。コンポジタが処理するので CPU を消費しない） */
.p-hero__overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            ellipse 110% 80% at 50% 50%,
            rgba(0, 0, 0, 0.33) 0%,
            rgba(0, 0, 0, 0.90) 100%
        );
    opacity: var(--p-hero-darken, 0);
    transition: opacity 0.6s ease;
    pointer-events: none;
    will-change: opacity;
}

/* ============================================================
   4.5 キャッチコピー（スライダー上に白字で配置）
   opacity: 0 → JS の bgAppear で fade-in、スクロールで fade-out
============================================================ */
.p-hero__kv-copy {
    position: absolute;
    bottom: 50px; /* ディスプレイサイズによらず FV 下端から一定の余白を確保しつつ、少し上寄りに */
    left: 5%;
    z-index: 8;
    width: clamp(420px, 60%, 960px); /* 折り返し防止のため横幅に余裕を持たせる */
    opacity: 0; /* JS 制御 */
}

.p-hero__kv-en {
    display: block;
    font-size: clamp(0.85rem, 1.05vw, 1.1rem);
    font-weight: 600;
    letter-spacing: 0.18em;
    color: #bfa67a; /* ゴールド（見出し本体は白のまま、英字ラインのみアクセントで差し替え） */
    text-transform: uppercase;
    margin: 0; /* 見出しの下に配置するため上マージンは .p-hero__kv-ja 側で確保 */
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}

.p-hero__kv-ja {
    font-size: clamp(2rem, 3.5vw, 3.6rem); /* 参考サイトのように少し大きめ・はみ出る印象に */
    /* Windowsでは未ロードの600/700がかなり太く出るため、実ロード済みの500を使用
       （Zen Kaku Gothic New は 400/500/700/900 を読み込み） */
    font-weight: 500;
    line-height: 1.5;
    color: #fff;
    margin: 0 0 16px; /* 下の英字ラインとの間隔 */
    white-space: nowrap; /* 折り返し防止 */
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.4);
}


/* ============================================================
   4.8 スクロール演出: 第2キャッチコピー
============================================================ */
.p-hero__kv-copy-2 {
    position: absolute;
    top: 38%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    z-index: 8;
    text-align: center;
    opacity: 0;
    will-change: opacity;
    white-space: nowrap;
}

/* ── コンセプト本文＋ボタン（スクロール演出 フェーズ3） ──
   .p-hero の波形 clip-path でボタンが隠れてしまうため、.p-hero-sticky 直下の
   兄弟要素として配置（他の兄弟要素と同じ回避パターン）。
   top は元々 .p-hero（高さ95%）基準の68%だったため、.p-hero-sticky（高さ100%）
   基準でも同じ絶対位置になるよう 68% × 0.95 ≒ 64.6% に換算している。 */
.p-hero__kv-copy-3 {
    position: absolute;
    top: 64.6%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    z-index: 11;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    will-change: opacity;
    width: clamp(280px, 82vw, 860px);
}

.p-hero__kv-copy-3.is-active {
    pointer-events: auto;
}

/* ボタンだけ本文より少し遅れて、ふわっと最後に浮かび上がる演出。
   .is-active は JS が op3(親の opacity 進行) > 0.5 で切り替えるため、
   本文がある程度見えたタイミングでボタンのフェード＋浮き上がりが始まる。 */
.p-hero__kv-copy-3.is-active .p-hero__kv3-btn {
    opacity: 1;
    transform: translateY(0);
}

.p-hero__kv3-text {
    font-size: clamp(1.05rem, 1.3vw, 1.3rem);
    line-height: 2.1;
    color: #fff;
    margin: 0 0 32px;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.75), 0 0 4px rgba(0, 0, 0, 0.5);
    font-weight: 500;
    letter-spacing: 0.03em;
}

.p-hero__kv3-btn {
    display: inline-block;
    padding: 16px 56px;
    border: 2px solid #bfa67a; /* ゴールドの縁取り（ハンバーガー・right-barと統一） */
    border-radius: 50px;
    color: #fff;
    font-size: var(--fs-16);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-decoration: none;
    background: linear-gradient(135deg, #006e37 0%, var(--corp-primary, #00552e) 100%);
    box-shadow: 0 8px 24px rgba(0, 85, 46, 0.45), 0 2px 6px rgba(0, 0, 0, 0.20);
    /* 本文より少し遅れて、ふわっと浮かび上がるための初期状態 */
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.8s ease 0.15s, transform 0.8s ease 0.15s, box-shadow 0.3s ease, background 0.3s ease;
}

.p-hero__kv3-btn:hover {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    border-color: #bfa67a;
    box-shadow: 0 12px 32px rgba(0, 85, 46, 0.40), 0 4px 10px rgba(0, 0, 0, 0.18);
    transform: translateY(-2px);
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.p-hero__kv2-en {
    display: block;
    font-size: clamp(0.8rem, 1.05vw, 1.1rem);
    font-weight: 600;
    letter-spacing: 0.18em;
    color: rgba(255, 255, 255, 0.85);
    text-transform: uppercase;
    margin-bottom: 16px;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}

.p-hero__kv2-ja {
    font-size: clamp(1.8rem, 2.9vw, 2.8rem);
    font-weight: 700;
    line-height: 1.75;
    color: #fff;
    margin: 0 0 20px;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.4);
}

/* ============================================================
   4.9 スクロールインジケーター（波下グリーンスペース・右下・縦書きSCROLL）
============================================================ */
.p-hero__scroll-indicator {
    /* .p-hero-sticky（position:sticky）を基準に、波形くり抜きの下に見えるグリーン地の
       左下に白字で配置。他の兄弟要素と同じ positioning context。
       画面右端の緊急連絡タブ（.p-hero__emergency、縦方向に大きく場所を取る）と
       重なるため、SPと同じく右側のシンボル・右バーとは分離して左寄せにしている。 */
    position: absolute;
    bottom: 45px;
    left: 24px;
    right: auto;
    z-index: 6;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    pointer-events: none;
    will-change: opacity;
}

.p-hero__scroll-text {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: var(--fs-12);
    font-weight: 700;
    letter-spacing: 0.32em;
    color: #fff;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
    text-transform: uppercase;
    font-family: 'Georgia', 'Times New Roman', serif;
}

.p-hero__scroll-line {
    position: relative;
    display: block;
    width: 1px;
    height: 70px;
    background: rgba(255, 255, 255, 0.3);
    overflow: hidden;
}

.p-hero__scroll-line::after {
    content: '';
    position: absolute;
    top: -50%;
    left: 0;
    width: 100%;
    height: 50%;
    background: #fff;
    animation: heroScrollLine 2s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

@keyframes heroScrollLine {
    0%   { top: -50%; }
    100% { top: 100%; }
}

/* ============================================================
   5. 右下グリーンバー
   .p-hero-sticky の波下グリーン地がそのまま背景になるため、バー自体の背景・枠は廃止。
============================================================ */
.p-hero__right-bar {
    position: absolute;
    bottom: 45px; /* コーポレートシンボル・スクロールインジケーターと下端ラインを揃える */
    right: 50px; /* 文字ベースになり重ねても自然なため、シンボルの上に重ねて右寄せ */
    z-index: 10;
    width: clamp(360px, 34vw, 480px); /* 横長バー: ボックス型より幅広・扁平に */
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
}

/* ── スライド番号（円リング進捗） ── */
.p-hero__bar-nums {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    padding-right: 16px;
    border-right: 1px solid rgba(255, 255, 255, 0.25); /* 番号とキャプションの区切り線 */
}

/* 番号バッジ（リング＋現在番号を重ねる枠） */
.p-hero__num-badge {
    position: relative;
    width: 46px;
    height: 46px;
    flex-shrink: 0;
}

/* 進捗リング */
.p-hero__num-ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg); /* 12時起点で時計回りに進む */
    overflow: visible;
}
.p-hero__num-track {
    fill: none;
    stroke: rgba(255, 255, 255, 0.22);
    stroke-width: 2.5;
}
.p-hero__num-prog {
    fill: none;
    stroke: #bfa67a;            /* ブランドのゴールド */
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-dasharray: 100;      /* pathLength=100 で正規化 */
    stroke-dashoffset: 100;
    animation: numRingDraw 8s linear infinite; /* 8s=1スライドの表示時間 */
}
@keyframes numRingDraw {
    0%   { stroke-dashoffset: 100; }
    100% { stroke-dashoffset: 0; }
}

/* 現在番号（スライドに同期してフェード切替） */
.p-hero__num-digit {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Georgia', serif;
    font-size: var(--fs-17);
    font-weight: 700;
    color: #fff;
    opacity: 0;
    animation: barItemFade 40s infinite;
}
.p-hero__num-digit:nth-of-type(1) { animation-delay: 0s; }
.p-hero__num-digit:nth-of-type(2) { animation-delay: 8s; }
.p-hero__num-digit:nth-of-type(3) { animation-delay: 16s; }
.p-hero__num-digit:nth-of-type(4) { animation-delay: 24s; }
.p-hero__num-digit:nth-of-type(5) { animation-delay: 32s; }

/* 総数 /05（静的） */
.p-hero__num-total {
    font-family: 'Georgia', serif;
    font-size: var(--fs-13);
    font-weight: 600;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.6);
}

/* ── キャプション群（バー幅が最小(360px)のときでも文字が収まるよう、少し縮小） ── */
.p-hero__captions {
    position: relative;
    height: 2.2em; /* 横長バー: label+name を横並びにするため1行分に圧縮 */
    flex: 1;
    min-width: 0;
    overflow: hidden; /* 万一の長い施設名でもバー外へはみ出さない安全策 */
}

.p-hero__caption {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    transform: translateY(8px);
    animation: captionFade 40s infinite;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    cursor: pointer;
}

a.p-hero__caption:hover .p-hero__caption-name {
    opacity: 0.8;
}

a.p-hero__caption:hover .p-hero__caption-icon {
    color: #fff;
    transform: translate(2px, -2px);
}

.p-hero__caption-label {
    flex-shrink: 0;
    font-size: clamp(0.5rem, 0.65vw, 0.6rem);
    font-weight: 600;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.65);
    text-transform: uppercase;
    font-family: 'Georgia', serif;
}

.p-hero__caption-name {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: clamp(0.85rem, 1.2vw, 1.05rem);
    font-weight: 800;
    color: #fff;
    white-space: nowrap;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
    text-decoration: none;
    transition: opacity 0.2s ease;
}

a.p-hero__caption-name:hover {
    opacity: 0.8;
}

.p-hero__caption-icon {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.75);
    transition: transform 0.25s ease, color 0.25s ease;
}


.p-hero__caption:nth-child(1) { animation-delay: 0s; }
.p-hero__caption:nth-child(2) { animation-delay: 8s; }
.p-hero__caption:nth-child(3) { animation-delay: 16s; }
.p-hero__caption:nth-child(4) { animation-delay: 24s; }
.p-hero__caption:nth-child(5) { animation-delay: 32s; }

/* ── 共通フェードアニメーション（番号・キャプション） ── */
@keyframes barItemFade {
    0%    { opacity: 0; }
    3.2%  { opacity: 1; }
    17.5% { opacity: 1; }
    20%   { opacity: 0; }
    100%  { opacity: 0; }
}

@keyframes captionFade {
    0%    { opacity: 0; transform: translateY(8px); }
    3.2%  { opacity: 1; transform: translateY(0); }
    17.5% { opacity: 1; transform: translateY(0); }
    20%   { opacity: 0; transform: translateY(-6px); }
    100%  { opacity: 0; transform: translateY(-6px); }
}

/* 旧プログレスバー／周回フレームは廃止。表示時間の進捗は番号の円リング
   (.p-hero__num-ring) に統合。 */

/* ── コーポレートシンボル（波形下部のグリーン地・右下）。透かし風に半透明・少し大きめに配置 ── */
.p-hero__symbol {
    position: absolute;
    bottom: 45px;
    right: 90px; /* スクロールインジケーターを画面端側に置くため、その分だけ左に余白を確保 */
    z-index: 6;
    width: clamp(70px, 10.5vw, 180px); /* 10.5vw を基準に、極端なサイズにならないよう上下限を設定 */
    height: auto;
    opacity: 0.55; /* 透かし風に半透明 */
    pointer-events: none;
}

/* ============================================================
   5.5 緊急連絡ステータス（ヘッダー直下・右寄せの横並びピルボタン）
   p-corp-safety の .t-corp-emergency（news.css）と同じ内容を、押すと開く
   画面中央モーダルとしてFV内に埋め込む。ボタン自体は常時表示。
   .p-hero の波形 clip-path の影響を受けないよう、他の兄弟要素と同じく
   .p-hero-sticky 直下に配置している（front-page.php 参照）。
   ※ PC/SP共通のデザイン（横並びピル＋中央モーダル）。SP固有の値は
   下部の @media (max-width: 768px) 内で上書きする。
============================================================ */
.p-hero__emergency {
    position: absolute;
    top: 150px;
    right: 0;
    left: auto;
    bottom: auto;
    transform: none;
    /* .ak-notice-sec（clinic-detail.phpのお知らせボックス、z-index:10）より
       手前に来るようにする。開いた状態でスクロールしても中央モーダル・
       背景暗幕がお知らせボックスの下に隠れてしまう不具合の対策。
       ヘッダー各種（1000〜9999）よりは十分低い値。 */
    z-index: 50;
}

/* 画面右端にピタッと張り付くピル型ボタン。横書き表示のため、
   右端に接する側（右2隅）は角丸なし、はみ出す側（左2隅）だけ丸める。
   ホバー時は右端（画面端で固定）はそのままに、padding-left だけを
   広げて左側にせり出す＝親要素(.p-hero__emergency)がshrink-to-fitで
   right:0固定のため、右に隙間ができずに済む。 */
.p-hero__emergency-toggle {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    padding: 20px 34px 20px 38px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-right: none;
    border-radius: 999px 0 0 999px;
    background: rgba(10, 20, 14, 0.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #fff;
    font-size: var(--fs-18);
    font-weight: 700;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, padding-left 0.25s ease;
}
.p-hero__emergency-toggle:hover {
    background: rgba(10, 20, 14, 0.62);
    border-color: rgba(255, 255, 255, 0.55);
    padding-left: 42px;
}
.p-hero__emergency-icon { width: 28px; height: 28px; flex-shrink: 0; }
.p-hero__emergency-label {
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    white-space: nowrap;
}
/* 更新日時：ラベルより控えめな見た目（細字・小さめ・やや透過）にする。 */
.p-hero__emergency-time {
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    font-size: var(--fs-14);
    font-weight: 500;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.68);
    white-space: nowrap;
    margin-left: 2px;
}

.p-hero__emergency-dot {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #4caf7d;
    flex-shrink: 0;
    box-shadow: 0 0 0 3px rgba(76, 175, 125, 0.28);
    animation: heroEmgPulse 2s ease-in-out infinite;
}
.p-hero__emergency-toggle.is-caution .p-hero__emergency-dot {
    background: #e0ab3d;
    box-shadow: 0 0 0 3px rgba(224, 171, 61, 0.28);
}
.p-hero__emergency-toggle.is-emergency .p-hero__emergency-dot {
    background: #e15353;
    box-shadow: 0 0 0 3px rgba(225, 83, 83, 0.28);
    animation-duration: 0.9s;
}

/* 緊急対応中：ドットの色だけでは目立ちにくいため、ボタン全体をうっすら赤く
   染めてアラート感を出す（front-page.php・clinic-detail.php共通）。 */
.p-hero__emergency-toggle.is-emergency {
    background: rgba(150, 30, 30, 0.55);
    border-color: rgba(255, 140, 140, 0.55);
}
.p-hero__emergency-toggle.is-emergency:hover {
    background: rgba(150, 30, 30, 0.72);
    border-color: rgba(255, 160, 160, 0.7);
}
@keyframes heroEmgPulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(76, 175, 125, 0.28); }
    50%      { box-shadow: 0 0 0 6px rgba(76, 175, 125, 0.10); }
}

/* 開いた状態：背景を軽く暗くして中央のパネルを見やすくする。
   pointer-events:none で下の要素へクリックを素通しし、
   「外側クリックで閉じる」処理をそのまま活かす。 */
.p-hero__emergency.is-open::after {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(10, 20, 14, 0.45);
    z-index: 1;
    pointer-events: none;
}

/* パネル本体のカード見た目（枠線・背景色等）は news.css の .t-corp-emergency が
   共通定義済み。-hero 修飾子では画面中央モーダルとしての絶対配置と
   出現アニメーションだけ足す。 */
.t-corp-emergency.-hero {
    position: fixed;
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    transform: translate(-50%, -50%) scale(0.96);
    width: min(640px, 88vw);
    max-height: 84vh;
    overflow-y: auto;
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
    opacity: 0;
    pointer-events: none;
    z-index: 2;
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.p-hero__emergency.is-open .t-corp-emergency.-hero {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
}
.t-corp-emergency.-hero .t-corp-emergency__inner { padding: 44px 52px; }
.t-corp-emergency.-hero .t-corp-emergency__head { position: relative; padding-right: 34px; }

/* 本文（説明文＋ステータス／リンク）：PCの横並びだと右側だけ間延びして見えるため、
   モバイルと同じく縦積みで、それぞれ幅いっぱいに伸ばして表示する
   （PC/SP共通・front-page.phpのモーダルのみに適用）。 */
.t-corp-emergency.-hero .t-corp-emergency__body {
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
}
.t-corp-emergency.-hero .t-corp-emergency__desc {
    flex: none;
    width: 100%;
}
.t-corp-emergency.-hero .t-corp-emergency__meta {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 10px;
}
.t-corp-emergency.-hero .t-corp-emergency__status {
    justify-content: center;
}
.t-corp-emergency.-hero .t-corp-emergency__link {
    justify-content: center;
}

.p-hero__emergency-close {
    position: absolute;
    top: -4px;
    right: -6px;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: #999;
    cursor: pointer;
    transition: color 0.2s ease;
}
.p-hero__emergency-close:hover { color: #333; }
.p-hero__emergency-close svg { width: 14px; height: 14px; }

/* ============================================================
   モバイル対応
============================================================ */
@media (max-width: 768px) {
    /* SP は縦幅に余裕がないため、PC(95%)よりもう少し圧縮して波下グリーン地を
       多めに見せる（symbol・scroll-indicator・kv-copy が座る余白を確保） */
    .p-hero {
        height: 95%;
    }

    /* 波線3本：SPでは中央より少し下くらいに見えるよう調整（キャッチコピーを下部配置に
       変更したことに合わせ、以前よりさらに少し下へ） */
    .p-hero__wave-outline {
        transform: translateY(110px);
    }

    /* 波線3本のなぞりアニメーション：PC(12s)より全体をゆっくりにしつつ、
       最初のなぞり（描画フェーズ）の比率をさらに伸ばして、よりゆっくり
       走らせているように見せる（消えるフェーズの比率はPCと同じ17%を維持） */
    .p-hero__wave-outline path {
        animation-duration: 18s;
        animation-name: heroWaveDashSP;
    }

    @keyframes heroWaveDashSP {
        0%   { stroke-dashoffset: 4000; opacity: 0; }
        4%   { opacity: 0.18; }
        65%  { stroke-dashoffset: 0;    opacity: 0.18; }
        75%  { stroke-dashoffset: 0;    opacity: 0.18; }
        92%  { stroke-dashoffset: 0;    opacity: 0; }
        93%  { stroke-dashoffset: 4000; opacity: 0; }
        100% { stroke-dashoffset: 4000; opacity: 0; }
    }

    /* ── 左下キャッチコピー：SPでは SCROLL インジケーターを撤去したので、
       その分だけ画面左端に寄せる。英字ライン末尾が右下シンボルに少しかかる位置に
       置き、コピーとシンボルを一体に見せて「グループ」を強調する。 ── */
    .p-hero__kv-copy {
        display: block;
        top: auto;
        bottom: 120px;  /* 英字ライン末尾がシンボルに少し重なる高さ（意図的） */
        left: 16px;     /* SCROLL 撤去分、左端まで寄せる */
        right: 6%;
        width: auto;
        text-align: left;
    }
    .p-hero__kv-en {
        font-size: var(--fs-12);
        letter-spacing: 0.16em;
        margin: 0;
    }
    .p-hero__kv-ja {
        /* 元の大きさに戻す（字間もPCと同じ 0.08em を継承）。
           収まらない狭幅では折り返す。 */
        font-size: clamp(1.15rem, 6vw, 1.85rem);
        line-height: 1.6;
        margin: 0 0 8px;
        white-space: normal;
    }

    /* ── スクロールインジケーター（縦書きSCROLL）：SPでは撤去。
       画面が狭くキャッチコピーの左スペースを圧迫するため非表示にし、
       その分キャッチコピーを左端へ寄せる（PCでは従来どおり表示）。 ── */
    .p-hero__scroll-indicator {
        display: none;
    }

    /* ── コーポレートシンボル：インジケーターが左に抜けた分、画面端側へさらに右寄せ ── */
    .p-hero__symbol {
        bottom: 20px;
        right: 20px;
    }

    /* SP のキャッチコピー切替は PC と同じく JS が scroll 進行（sE）に応じて
       opacity を直接制御する（旧・is-expanded 時の CSS 自動再生は廃止）。 */

    /* ── 第2キャッチコピー（コンセプト見出し）。上の余白をさらに詰める。
       配置・文面ともに左寄せ（左下キャッチコピー .p-hero__kv-copy と同じ左端基準）。
       幅は78vw/340px に収まっているため、画面右端の緊急連絡タブ（.p-hero__emergency）
       とは重ならない。 ── */
    .p-hero__kv-copy-2 {
        /* SPヘッダー（60px）分の余白を確保してコンテンツが隠れないようにする */
        top: calc(var(--header-height-sp, 60px) + 24%);
        left: 6%;
        right: auto;
        transform: translate3d(0, -50%, 0);
        width: min(78vw, 340px);
        text-align: left;
        white-space: normal;
    }
    .p-hero__kv2-en {
        font-size: var(--fs-11);
        letter-spacing: 0.22em;
        margin-bottom: 10px;
    }
    .p-hero__kv2-ja {
        font-size: clamp(1.15rem, 5vw, 1.6rem);
        line-height: 1.7;
        margin: 0 0 14px;
    }

    /* ── 第3コピー（本文＋ボタン）。
       .p-hero-sticky 基準に移動したため、top も .p-hero（高さ90%）基準の56%から
       56% × 0.9 ≒ 50.4% に換算。ボタン下と波形の間に余白を持たせるため、
       さらに少し上へ。
       kv-copy-2（タイトル）と同じく配置・文面ともに左寄せ（左端基準 left:6%）。
       幅は78vw/340pxに収まるため、画面右端の緊急連絡タブとは重ならない。 ── */
    .p-hero__kv-copy-3 {
        top: calc(var(--header-height-sp, 60px) + 52%);
        left: 6%;
        right: auto;
        transform: translate3d(0, -50%, 0);
        width: min(78vw, 340px);
        text-align: left;
    }
    .p-hero__kv3-text {
        font-size: var(--fs-14);
        line-height: 1.95;
        margin: 0 0 24px;
        letter-spacing: 0.02em;
    }
    .p-hero__kv3-btn {
        padding: 13px 36px;
        font-size: var(--fs-14);
        letter-spacing: 0.10em;
    }

    /* PC 同様、スクロール展開時に右バーを変形・非表示にする演出は廃止。
       常に同じ位置・見た目のまま表示する。 */

    /* ── 右下グリーン地の文字バー（PCと同じく背景・枠なしの文字だけの表記、
       バー全体（番号＋キャプション）は横一列のまま、波下グリーン地の一番下・右寄せに配置。
       ただし SP は横幅に余裕がないため、キャプション内のラベル＋施設名だけは
       縦積みにして、途中で見切れず全部表示されるようにする。
       第2キャッチコピーと被らないよう、スクロールインジケーター・シンボルと
       合わせてさらに下（bottom:20px）へ下げる。インジケーターが左に抜けた分、
       シンボルと同じくさらに右寄せにする ── */
    .p-hero__right-bar {
        bottom: 10px;
        right: 20px;
        width: clamp(215px, 68vw, 280px);
        gap: 10px;
        /* flex-direction/align-items は PC と同じ横一列（row）を継承 */
    }
    .p-hero__bar-nums {
        gap: 7px;
        padding-right: 10px;
    }
    .p-hero__num-badge {
        width: 40px;
        height: 40px;
    }
    .p-hero__num-digit {
        font-size: var(--fs-15);
    }
    .p-hero__num-total {
        font-size: var(--fs-11);
    }
    .p-hero__captions {
        height: 3.6em; /* ラベル＋施設名の2行分 */
    }
    .p-hero__caption {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }
    .p-hero__caption-name {
        font-size: clamp(0.85rem, 3.1vw, 1rem);
        white-space: nowrap;
    }
    .p-hero__caption-label {
        font-size: var(--fs-9);
    }
    .p-hero__caption-icon {
        width: 12px;
        height: 12px;
    }

    /* 波線3本は旧・L字くり抜き（clip-path 全画面化）との競合でカクついていたため
       SP では非表示にしていたが、L字自体を廃止したので制約が消え、表示に戻せる。 */

    /* ── 緊急連絡ステータス：PC/SP共通の横並びピル＋中央モーダルは
       base（このメディアクエリの外）に定義済み。ここではSP固有の
       サイズ・余白・ヘッダーとの位置関係だけを上書きする。 ── */
    .p-hero__emergency {
        top: 76px;
        z-index: 900; /* .l-header（SPでz-index:1000）より下にし、スクロール時にヘッダーの裏へ正しく隠れるようにする */
    }
    .p-hero__emergency-toggle {
        width: auto;
        padding: 8px 12px 8px 16px;
        gap: 8px;
        font-size: var(--fs-14);
    }
    .p-hero__emergency-toggle:hover {
        padding-right: 12px; /* 横並びのため hover 時のせり出しは無効化 */
        padding-left: 16px;
    }
    /* 開いた状態でもトグル自体の見た目は変えない（中央モーダルのため幅の伸縮は不要） */
    .p-hero__emergency.is-open .p-hero__emergency-toggle {
        width: auto;
    }
    .p-hero__emergency-icon { width: 19px; height: 19px; }
    .p-hero__emergency-dot { width: 10px; height: 10px; }
    .p-hero__emergency-time {
        font-size: var(--fs-11);
    }

    .t-corp-emergency.-hero {
        width: min(320px, 86vw);
        max-height: 80vh;
    }
    .t-corp-emergency.-hero .t-corp-emergency__inner { padding: 20px 18px; }

    /* 更新日時：news.css側の共通モバイル値(0.6rem)だと小さすぎて読みにくいため、
       このモーダルパネルだけ少し大きくする。パネル幅(284px前後)に収まる範囲
       （実測で約270px）に収める0.7remを採用し、折り返さないよう nowrap も指定する。 */
    .t-corp-emergency.-hero .t-corp-emergency__timestamp {
        font-size: var(--fs-11);
        white-space: nowrap;
    }
}

/* ── 極小幅（iPhone SE 等 320px 相当）専用の微調整 ──
   右下の施設名バーは overflow:hidden でページはみ出しは起きないが、
   「村田透析クリニック」等の長い施設名＋外部リンクアイコンがバー幅に
   収まらず見切れるため、この幅だけ文字を少し縮めバーの右余白も詰める。 */
@media (max-width: 360px) {
    .p-hero__right-bar {
        right: 12px;
        width: clamp(210px, 74vw, 260px);
    }
    .p-hero__caption-name {
        font-size: clamp(0.72rem, 3.1vw, 1rem);
        gap: 4px;
    }
    .p-hero__caption-icon {
        width: 11px;
        height: 11px;
    }
}

/* 中間サイズ */
@media (max-width: 1100px) and (min-width: 769px) {
    .p-hero__kv-copy {
        width: 28%;
        left: 4%;
    }
    .p-hero__kv-ja {
        font-size: clamp(1rem, 2vw, 1.3rem);
    }
}

#about {
    position: relative;
    z-index: 5;
    margin-top: 0;
}