@charset "utf-8";

:root {
    --vh: 1vh; /* 初期値、あとでJSで上書きされる */
}


/* ===========================
main
=========================== */
html, body {
    overscroll-behavior: none;
    overflow: hidden;
    height: 100%;
    touch-action: none;
}

html.is-x-app,
html.is-x-app body {
    overflow: auto;       /* Xアプリ内だけはスクロールロックを外す */
    touch-action: auto;
}
html.is-x-app .header {
    padding-top: 0;       /* safe-area-inset-top も一旦ナシで様子を見る */
}

html {
    overflow: hidden;   /* ← 追加 */
}

body {
    overflow: hidden;           /* スクロールさせたくないなら body だけでOK */
    min-height: 100vh;
    min-height: 100svh;         /* 対応ブラウザはこっちを優先してくれる */
}

.catchCopy__pc,
.catchCopy__bgPc,
.slideshow__pc {
    display: none;
}

.slideshow__sp {
    position: fixed;
    inset: 0;      /* top:0; right:0; bottom:0; left:0; と同じ */
    margin: 0;
    z-index: 0;
}

.slideshow__sp {
    will-change: transform;
}

/* .slideshow__sp > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
} */

/* slide */
.slideshow__sp img,
.slideshow__pc img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

/* 表示中の画像だけ見せる */
.slideshow__sp img.is-show,
.slideshow__pc img.is-show {
    opacity: 1;
}



/* オーバーレイを載せるための土台 */
.main {
    position: relative;
    /* 実際の高さは JS から渡す --vh を使う */
    height: calc(var(--vh) * 100);
    isolation: isolate;
}

.header {                      /* プロジェクトのヘッダークラスに合わせて片方使う */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding-top: env(safe-area-inset-top);
    z-index: 1000;              /* 最前面 */
}

.mainVisual__topic {
    position: absolute;
    z-index: 900;               /* ヘッダーの次に上 */
    left: 50%;
    top: 50%;                   /* 位置は後で調整 */
    transform: translate(-50%, -50%);
    margin: 0;
    width:280px;
}

.catchCopy__sp {
    display: block;
    width: 100%;            /* 画面に対する上限（お好みで） */
    height: auto;
    position: relative;
}

.mainVisual__topic::after {
    content: '';
    display: block;
    position: absolute;
    background-image: url(../images/sign.png);
    width: 60px;
    height: 45px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    bottom: 10px;
    right: -10px;
    transform: rotate(4deg);
}

/* NEWS（下部に固定して重ねる） */
.news {
    position: absolute;
    z-index: 800;
    left: 3.2vw;
    right: 3.2vw;
    bottom: 23px;                  /* 画面下に重ねる */
    padding: 18px 28px 17px;
    background: rgba(255, 255, 255, 0.85);
}


.news__close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 14px;
    height: 13px;
    background: url(../images/news-close.svg) center / contain no-repeat;
    cursor: pointer;
}

.news__topic {
    font-family: Outfit;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.006em;
    padding-bottom: 4px;
    border-bottom: 1px solid #7E9DE0;
}

.news__list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 8px;
}

.news__item {
    display: flex;
    gap: 6px;
    align-items: flex-start;
}

.news__item time {
    font-family: Outfit;
    font-size: 1.3rem;
    line-height: 1.5;
}

.nav__txt {
    font-size: 1.3rem;
    line-height: 1.5;
}

.sns {
    display: none;
}

/* main tb */
@media screen and (min-width: 768px){
    .header {                     
        height: 60px;
        color: var(--primary-white);
    }

    .plus-toggle::before,
    .plus-toggle::after {
        background-color: var(--primary-white);
    }

    .plus-menu li a ,
    .nav__item a {
        font-weight: 300;
    }

    /* .nav__item a::after,
    .plus-box__inner::after {
        background-color: rgba(255, 255, 255, 0.24);
    } */

    .catchCopy__sp {
        display: none;
    }

    .catchCopy__pc {
        display: block;
        width: 100%;            /* 画面に対する上限（お好みで） */
        height: auto;
        position: relative;
    }

    .mainVisual__topic {
        width:469px;
    }
    .mainVisual__topic::after {
        width: 88px;
        height: 66px;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        bottom: 28px;
        right: -14px;
    }
    /* NEWS（下部に固定して重ねる） */
    .news {
        left: 16px;
        right: auto;
        bottom: 16px;                  /* 画面下に重ねる */
        padding: 20px 32px;
        min-width: 400px;
    }

    .news__close {
        top: 20px;
        right: 20px;
    }

    .news__topic {
        font-size: 1.6rem;
    }

    .news__list {
        display: flex;
        flex-direction: column;
        gap: 4px;
        margin-top: 8px;
    }

    .news__item {
        align-items: flex-start;
    }

    .news__item time {
        font-size: 1.5rem;
    }

    .nav__txt {
        font-size: 1.5rem;
    }

    .sns {
        display: block;
        position: absolute;
        z-index: 700;
        right: 16px;
        bottom: 16px; 
    }

    .sns__list {
        display: flex;
        flex-direction: column;
        gap: 16px;
        align-items: center;
    }

    .sns__item img {
        height: 40px;
        width: auto;
    }

    .nav__item::after {
        background-color: rgba(255, 255, 255, 0.24);
    }

    .nav .plus-menu {
        background-color: transparent;
    }

    .header {
        background-color: transparent;
    }
}

/* main pc */
@media screen and (min-width: 1024px){
    .slideshow__sp {
        display: none;
    }

    .header {
        padding-right: 9px;
    }

    .catchCopy__pc {
        display: none;
    }

    .catchCopy__bgPc {
        display: block;
        width: 100%;            /* 画面に対する上限（お好みで） */
        height: auto;
    }

    .slideshow__pc {
        display: block;
        position: fixed;            /* ← 画面に貼り付け */
        inset: 0;                   /* ← 画面全体をカバー */
        margin: 0;                  /* pタグの既定余白を消す */
        z-index: 0;                 /* 背面レイヤー */
    }

    .mainVisual__topic::after {
        display: none;
        width: 22%;
        aspect-ratio: 4 / 3;
        bottom: 0;
        right: 0;
        transform: translate(15%, -35%);
        pointer-events: none;
    }

    .mainVisual__topic {
        width: auto;      /* 横幅は自動（高さ優先） */
        height: 40vh;     /* 画面の高さの40%を基準に */
        max-width: 100vw; /* 横は画面からはみ出さないように */
        overflow: visible;
    }

    .catchCopy__bgPc {
        display: block;
        height: 100%;     /* 親 (.mainVisual__topic) の40vhにフィット */
        width: auto;      /* 元画像の比率を維持したまま幅を自動計算 */
        object-fit: contain; /* 余白ありで全体を収めたい場合。トリミングしたいなら cover */
    }

        .nav-opacity {
        background-image: linear-gradient(#fff,#fff);
    }

}


/* main pc */
@media screen and (min-width: 1440px){
    .header {
        padding: 0 8.3%;
    }

    .header__inner {
        max-width: 1400px;
        margin: 0 auto;
        padding-right: 5px;
    }
}