@charset "UTF-8";
/* ====================================================
　pageIndex_first.css
　リニューアル版：トップページ ファーストビュー（hero）専用スタイル
==================================================== */

/* ######################################################################################

　Hero（メインビジュアル）

###################################################################################### */

/*
    heroはposition:relativeの「位置指定要素」のため、単独でbackgroundを持たせると
    z-index:-1のfixed子要素（bg/video/overlay）より手前に自身の背景が描画されてしまう
    （position:relativeのみではスタッキングコンテキストが生成されず、
    　fixed子要素はルートのスタッキングコンテキストまで浮き上がって比較されるため）。
    そのためフォールバック背景色はbody側（.pageIndex）に持たせる。
*/
.pageIndex .hero{
    position:relative;
    overflow:hidden; /* max-height:100vhで帯を切り詰めた際、内容がビューポート外へ溢れて
        次セクションと重ならないようにする（PC/SPのmax-height指定はメディアクエリ側参照） */
    margin-top:-10rem; /* ヘッダー分だけ上に重ねる（ヘッダーはposition:stickyで浮いている） */
}

/* 画像・動画読み込み前のフォールバック背景色（キャンバス背景として最背面に描画される） */
.pageIndex{
    background:#001c4c;
}

/* メインイメージ（動画背景）は画面に対してfixed配置し、コンテンツ側がその上をスクロールしていく */
.pageIndex .hero__bg,
.pageIndex .hero__video,
.pageIndex .hero__overlay{
    position:fixed;
    inset:0;
    z-index:-1;
    width:100%;
    height:100dvh;
}

.pageIndex .hero__bg{
    width:100%;
    height:100%;
    object-fit:cover;
    /* 通常時は非表示（読み込み中は.pageIndexの単色背景のみを見せる）。
       動画の再生に失敗した場合のみ、JSが付与する.hero.isVideoErrorで表示する */
    opacity:0;
    visibility:hidden;
}

.pageIndex .hero__video{
    overflow:hidden;
    pointer-events:none;
}
.pageIndex .hero__videoMedia{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    /* 実際に再生が始まる（playingイベント）まで非表示にし、
       読み込み中の静止画/動画の一瞬の重なり・チラつきを防ぐ */
    opacity:0;
}

/* 動画がplayingイベントで実際に再生を開始した時点で表示する（top.js） */
.pageIndex .hero.isVideoPlaying .hero__videoMedia{
    opacity:1;
}

/* 動画の読み込み・再生に失敗した場合、または自動再生が拒否され一定時間再生されなかった場合のみ
   静止画（hero__bg）へ切り替える（top.js） */
.pageIndex .hero.isVideoError .hero__bg{
    opacity:1;
    visibility:visible;
}
.pageIndex .hero.isVideoError .hero__videoMedia{
    opacity:0;
}

/* 動きを抑えたい場合は動画を非表示にし、静止画（hero__bg）を背景として表示する。
   JSの再生状態classの有無に関わらず、常に静止画を優先して表示する */
@media (prefers-reduced-motion:reduce){
    .pageIndex .hero__videoMedia{
        display:none;
    }
    .pageIndex .hero__bg{
        opacity:1;
        visibility:visible;
    }
}

.pageIndex .hero__overlay{
    background:linear-gradient(180deg, rgba(0,28,76,0.35) 0%, rgba(0,28,76,0.1) 40%, rgba(0,28,76,0.55) 100%);
}

.pageIndex .hero__inner{
    position:relative;
}

.pageIndex .hero__copy{
    font-weight:900;
    color:#ffffff;
    letter-spacing:0.08em;
}
.pageIndex .hero__copyHighlight{
    color:#ffff27;
}

.pageIndex .hero__lead{
    font-weight:bold;
    color:#ffffff;
    /* Figma実測(node 6035:350)：18px基準で字間0.54px=0.03em。以前は指定なし(0)だった */
    letter-spacing:0.03em;
}

/* Figma実寸(node 6035:344、get_design_context実測)：塗りは#001C4Cのfill-opacity 0.9のみの
   単純な矩形(M0 0H800V60H0V0Z)。角丸・ぼかしはFigma上に存在しないため付与しない。 */
.pageIndex .hero__news{
    position:absolute;
    display:flex;
    /* 不具合修正：本文が2行・3行に折り返した際、centerだと日付が本文全体の天地中央に
       寄ってしまい、日付と本文1行目の位置がズレる。日付・本文とも上端基準で揃える */
    align-items:flex-start;
    background:rgba(0,28,76,0.9);
    color:#ffffff;
}
/* 不具合修正：.hero__news（帯全体）はdisplay:flexだが、実際の子要素はMTタグが出力する
   <a>1個のみ（日付・タイトルの<p>2個はどちらも<a>の子）のため、.hero__news自身の
   flexは日付とタイトルの横並びには効いておらず、<a>内で通常のブロック要素として縦積みに
   なっていた。実際に日付・タイトルが横並びになる階層＝<a>自身へflexを指定する */
.pageIndex .hero__news a{
    display:flex;
    align-items:flex-start;
    gap:2em;
    width:100%;
    /* 指示により現行サイトと同じ、日付＋タイトル部分の上限幅600px
       （帯自体の最大幅.hero__news{max-width:80rem=800px}より内側で折り返す） */
    max-width:60rem;
}
.pageIndex .hero__newsDate{
    flex:none;
    /* 横並び後、日付側が短い行でも縮まないようにする（フレックスアイテムはデフォルトで
       縮む対象になるため明示的に止める） */
    flex-shrink:0;
    font-weight:bold;
    /* 本文側（.hero__newsText）と同じline-height比率に揃え、align-items:flex-start時に
       行送りの差で上端の文字位置がズレないようにする（pのデフォルト行間を継承させない） */
    line-height:1.3;
}
.pageIndex .hero__newsText{
    overflow:hidden;
    text-overflow:ellipsis;
}

.pageIndex .hero__scroll{
    position:absolute;
    display:flex;
    flex-direction:column;
    align-items:center;
    color:#ffffff;
    font-family:"Oswald", sans-serif;
    letter-spacing:0.1em;
    writing-mode:vertical-rl;
}
/* スクロール指示線は装飾のため疑似要素で実装する（HTML側に空のspanを置かない） */
.pageIndex .hero__scroll::before{
    content:"";
    display:block;
    background:#ffffff;
}

@media print, screen and (min-width:768px){
    .pageIndex .hero{
        /* Figma（index2026_4）実寸：幅1920pxに対して高さ900px。PC表示は基準幅で固定し、
           画面幅に応じて伸縮させない（基準幅未満は横スクロールで対応）。
           指示によりビューポート高を超えないよう、max-height:100vhを上限として追加する
           （height:90rem固定は維持し、単純にheight:100vhへ置き換えない。ビューポート高が
           900px未満のノートPC等ではmax-heightが優先され帯がビューポート内に収まる） */
        height:90rem;
        max-height:100vh;
    }
    /* Figma実寸：コピー左端200px、上端304px。
       headerと同じく、本文セクション用の中央寄せ1000rem幅コンテナは使わない。
       不具合修正：指示により、画面幅1500〜1200pxではメインイメージの文字・お知らせ・
       スクロール表示を縮小・折り返しさせず、1500px時点のサイズ・配置関係のまま画面中央基準で
       左右へ均等にはみ出させ、そのはみ出し分だけを.hero自身の既存のoverflow:hiddenで
       クリップする（動画・静止画は元々position:fixed;inset:0でビューポート全面に敷かれており、
       この対象外＝維持）。
       hero__innerは元々position:relativeのみ（幅指定なし＝.hero全幅、左端0基準でpadding-left
       20remの分だけ右にコピーが始まる、1500px以上でも画面幅に追従して伸縮する「エッジ固定」
       設計）だった。1500px以上ではこの「エッジ固定」動作を変えない。1500px未満のみ、
       1500px幅で画面中央基準に固定する必要があるため、position:absoluteに変更し、
       left:min(0px, calc(50% - var(--pc-content-width) / 2))
       （1500px以上は0＝元のエッジ固定と同じ左端、1500px未満は中央基準のマイナス値＝
       左側へ均等にはみ出す）、width:max(var(--pc-content-width), 100%)
       （1500px以上は100%＝画面実幅のまま伸縮する元の動作、1500px未満は1500px固定）とする。
       この2つの式は1500pxちょうどでどちらも同じ値（left:0、width:100%=1500px）になるため、
       1500px以上の見た目・挙動は変更されない。 */
    .pageIndex .hero__inner{
        position:absolute;
        top:0;
        left:min(0px, calc(50% - var(--pc-content-width) / 2));
        width:max(var(--pc-content-width), 100%);
        padding-top:30.4rem;
        padding-right:6rem;
        padding-left:20rem;
    }
    .pageIndex .hero__copy{
        font-size:3.8rem;
        line-height:1.68;
    }
    .pageIndex .hero__lead{
        margin-top:1.2rem;
        font-size:1.8rem;
        line-height:1.55;
    }
    /* Figma実寸：ニュース帯は幅800px（41.6667vw）で画面右下に隙間なく接する（right:0/bottom:0）。
       角丸は左上のみに残し、右端・下端は画面端に接するリボン状の帯として再現する。
       不具合修正：hero__innerと同じ理由で、右端の基準をhero__innerと同じ
       min(0px, calc(50% - var(--pc-content-width) / 2))にする。1500px以上は0のまま
       （元のright:0＝画面右端固定と同じ）、1500px未満は中央基準のマイナス値になり、
       右側へ均等にはみ出す（bottom:0は高さに関わる指定のため変更しない）。 */
    .pageIndex .hero__news{
        right:min(0px, calc(50% - var(--pc-content-width) / 2));
        bottom:0;
        max-width:80rem;
        /* 本文1行時はFigma実寸の6rem（=上下padding 2.155rem×2+本文1行の行高1.69rem）を
           維持しつつ、2行・3行に折り返した場合は上下paddingを保ったまま帯の高さ自体を
           伸ばして背景が本文を覆いきれるようにする（heightで固定しない） */
        min-height:6rem;
        padding:2.155rem 2rem;
        gap:1.5rem;
    }
    .pageIndex .hero__newsDate{
        font-size:1.3rem;
    }
    .pageIndex .hero__newsText{
        font-size:1.3rem;
        line-height:1.3;
    }
    /* 不具合修正：hero__inner（左端min(0px, calc(50% - var(--pc-content-width) / 2))＋
       padding-left:20rem）と同じ左端を基準にコピー開始位置に揃えるため、同じ式に
       20rem足した位置にする（1500px以上はhero__innerと同じく20remのまま＝変更なし） */
    .pageIndex .hero__scroll{
        left:calc(min(0px, calc(50% - var(--pc-content-width) / 2)) + 20rem);
        bottom:4rem;
        font-size:1.1rem;
    }
    .pageIndex .hero__scroll::before{
        width:1px;
        height:9rem;
        margin-bottom:1rem;
    }
}

@media screen and (max-width:767px){
    /* 不具合修正：SPメインビジュアルの高さがFigma実測(node 8002:17、390×540)より低かった
       (以前は97.4359vw=380px相当)。540/390=138.4615vwへ修正する。
       .hero自体はテキストの位置決め用ボックスにすぎず、実際の背景写真/動画は
       .hero__bg/.hero__videoがposition:fixed+height:100dvhで常にビューポート全面へ
       表示されるため、この高さ変更は「次セクションが始まるまでのスクロール量」のみに影響し、
       画像自体の縦横比・トリミングには影響しない */
    .pageIndex .hero{
        height:138.4615vw;
        margin-top:-16.4103vw;
        /* 指示によりビューポート高を超えないよう上限を追加する。100vhをまず指定し、
           対応環境（svh対応ブラウザ）では上書きでmax-height:100svhを使う
           （アドレスバーの表示/非表示で変動する100vhの実効値のうち、常に確保できる
           最小値=svhを上限にすることで、アドレスバー表示中でも溢れない）。
           非対応環境は100vhのままフォールバックする */
        max-height:100vh;
        max-height:100svh;
    }
    .pageIndex .hero__inner{
        /* 高さ修正に合わせ、コピー開始位置もFigma実測(maincopy top:160px→160/390=41.0256vw)へ
           再調整する（以前の44.6154vwは旧高さ基準の値だったため） */
        padding-top:41.0256vw;
        padding-right:5.1282vw;
        padding-bottom:0;
        padding-left:5.1282vw;
    }
    .pageIndex .hero__copy{
        font-size:7.1795vw;
        line-height:1.6;
    }
    .pageIndex .hero__lead{
        margin-top:2.0513vw;
        font-size:3.5897vw;
        line-height:1.5;
    }
    .pageIndex .hero__news{
        left:0;
        right:0;
        bottom:0;
        /* PCと同様、本文1行時の帯の高さ(19.7436vw)は上下paddingとして維持しつつ、
           2行・3行に折り返した場合は帯自体を伸ばす（heightで固定しない） */
        min-height:19.7436vw;
        padding:5.41vw 5.1282vw;
        gap:1.0256vw 3.0769vw;
        flex-wrap:wrap;
    }
    .pageIndex .hero__newsDate{
        font-size:2.8205vw;
        line-height:1.5;
    }
    /* 不具合修正：以前は日付とタイトルが縦積みだった前提でwidth:100%（タイトルを
       帯いっぱいに広げて次段に折り返す想定）を指定していたが、.hero__news a{display:flex}
       により日付と横並びになったため、width:100%のままだと日付分の余白を無視して
       画面幅いっぱいまで広がろうとしてしまう。flexアイテムとして残り幅まで自然に
       伸縮させるため、width指定自体を削除する */
    .pageIndex .hero__newsText{
        font-size:2.8205vw;
        line-height:1.5;
    }
    .pageIndex .hero__scroll{
        display:none;
    }
}