@charset "UTF-8";
/* ====================================================
　トップページ固有CSS（ファーストビュー内）
　pageIndex_first.css
==================================================== */


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

　HERO

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

/* ----- hero ----- */
.hero{
    overflow: hidden;
    position: relative;
    background: #050d26;
}
@media print, screen and (min-width: 768px){
    /* heightは寸法（margin/paddingの単位ルール対象外）のためpxのまま。
       margin-topは余白のためem化する */
    .hero{ height: 800px; margin-top: 5.5em; }
}
@media screen and (max-width: 767px){
    .hero{ height: max(313.85px, 123.0769vw); margin-top: 4.25em; } /* margin-topは固定ヘッダー高さ68px相当 */
}

/* hero__inner
---------------------------------------------------- */
.hero__inner{
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 1;
    height: 100%;
    padding-right: 11.2821vw;
    padding-left: 11.2821vw;
}
@media print, screen and (min-width: 768px){
    /* Figma実測はheroの天地中央ではなく上端から211px（1500px基準、
       heroの高さクランプ=800pxと同じ倍率で
       211/800=26.375%の位置）に固定配置している。justify-content:centerの
       ままだとコピー同士の相対間隔は正しくても、ブロック全体の開始位置が
       Figmaよりズレる（実測で約25px上に寄っていた）。SPと同様に上寄せへ
       変更し、heroの高さと同じ倍率で比例縮小するpadding-topを与える */
    .hero__inner{
        justify-content: flex-start;
        padding-top: 211px;
        padding-bottom: 10em;
        padding-right: 5em;
        padding-left: 7.4375em;
    }
}
@media screen and (max-width: 767px){
    /* Figmaはコピーをheroの天地中央ではなく上端から60px（390px基準）の
       位置に固定配置している。justify-content:centerのままだと
       コピー同士の相対間隔（catch→sub→cta）は正しくても、ブロック
       全体の開始位置がFigmaより下にずれる。上寄せに変更し、
       catchの開始位置がFigmaのtop:60と一致するpadding-topを与える */
    .hero__inner{ justify-content: flex-start; padding-top: 15.3846vw; }
    /* Figma実測は左44px・右4pxの非対称パディング（左右均等ではない）。
       共通のpadding-right:11.2821vw（左と同じ44px相当）のままだと
       テキスト幅がFigmaより40px狭くなり、hero__sub等が意図しない
       箇所で折り返される原因になっていたため右側だけ上書きする */
    .hero__inner{ padding-right: 1.0256vw; } /* 4px相当（390px基準） */
}

/* hero__inner内のpicture（PC/SP画像切り替え）
   picture要素自体はレイアウトに関与させず、中のimg（.hero__bg）を
   そのまま絶対配置させる */
.hero__inner picture{ display: contents; }

/* hero__bg
---------------------------------------------------- */
.hero__bg{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* hero__content
---------------------------------------------------- */
.hero__content{
    position: relative;
    z-index: 2;
}

/* hero__catch（メインビジュアルのコピー＝文字サイズを画面幅に連動させる特殊ケース）
---------------------------------------------------- */
.hero__catch{
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: 5.6rem;
    line-height: 1.6071;
    letter-spacing: -0.01em;
    color: var(--color-white);
    text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
}
@media screen and (max-width: 767px){
    .hero__catch{ font-size: 9.2308vw; line-height: 1.3889; }
}

/* hero__sub（キャッチコピーに続くリード文。同じ特殊ケースとして扱う）
---------------------------------------------------- */
.hero__sub{
    margin-top: 1.5em;
    font-weight: 700;
    font-size: 1.6rem;
    line-height: 2.125;
    letter-spacing: 0.1em;
    color: var(--color-white);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.25);
}
@media screen and (max-width: 767px){
    .hero__sub{ margin-top: 3.8462vw; font-size: 3.5897vw; line-height: 2; letter-spacing: 0.05em; }
}

/* hero__cta（ボタン文字は特殊ケースに該当しないため、SPは固定remとする）
---------------------------------------------------- */
.hero__cta{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 2em;
    width: 240px;
    height: 56px;
    border-radius: 4px;
    background: var(--color-primary);
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: 0.13em;
    color: var(--color-white);
    transition: opacity var(--transition);
}
.hero__cta:hover{ opacity: 0.85; }
@media screen and (max-width: 767px){
    .hero__cta{
        margin-top: 4.8718vw;
        width: max(246.15px, 76.9231vw);
        height: max(49.23px, 15.3846vw);
        font-size: 3.8462vw; /* Figma実測15px（390px基準） */
    }
    .hero__cta::after{ content: "→"; margin-left: 2.0513vw; font-size: 4.1026vw; } /* Figma実測16px（390px基準） */
}