@charset "UTF-8";
:root {
    /* font - 通常  */
    --font-base: "ab-megadot9", "Noto Sans JP", sans-serif;
    --font-sub: "Noto Sans JP", sans-serif;

    /* color - primitive (数値そのもの) */
    --color-white: #fff;

    --color-navy: #3A3E77;
    
    --color-blue-light-grad: linear-gradient(180deg,rgba(255, 255, 255, 1) 0%, rgba(166, 183, 216, 1) 50%, rgba(255, 255, 255, 1) 100%);
    --color-green-grad: linear-gradient(180deg,rgba(255, 255, 255, 1) 0%, rgba(209, 227, 238, 1) 50%, rgba(171, 222, 181, 1) 100%);
    --color-pink-grad: linear-gradient(180deg, rgb(245 158 221) 0%, rgb(236 172 239) 50%, rgb(250 225 244) 100%);
    
    /* color - semantic (用途固定) */
    --color-text: var(--color-navy);
    --color-bg: var(--color-blue-light-grad);
    
    /* ======================================================
       4px Grid (spacing)
    ====================================================== */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 28px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;

    /* ======================================================
       Z-index - 基本レイヤー
    ====================================================== */
    --z-background: -1;     /* 背景 */
    --z-base: 1;            /* 通常コンテンツ */
    --z-content: 10;        /* メインコンテンツ */
    --z-footer: 20;         /* フッター */

}



/*===================================================
    AOP reset
====================================================*/
body .wovn-languages,
body .header,
body .header-cover,
body .drawer,
body footer {
    display: none;
}

html body:not(.page--home) .wrap,
html body:not(.page--home) .content--main {
    padding: 0;
}

body {
    min-height: 100svh;
    min-height: 100dvh;
}

@media screen and (max-width: 960px){}



/*===================================================
    all
====================================================*/
.mainWrap {
    position: relative;
    z-index: var(--z-base);
    color: var(--color-text);
    font-family: var(--font-base);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    overflow: hidden;
}
.mainWrap img {
    display: block;
}

.bgBox {
    position: fixed;
    z-index: var(--z-background);
    inset: 0;
    min-height: 600px;
    background: var(--color-white);
    background: var(--color-bg);
    pointer-events: none;
    overflow: hidden;
}

.container {
    position: relative;
    z-index: var(--z-content);
    width: 100%;
    height: 100vh;
    height: 100dvh;
    max-width: 1920px;
    min-height: 600px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.titBox {
    flex: 65;
}
.titBox h2 {
    width: 90%;
    margin: 0 auto;
}

.contentsBox {
    flex: 35;
    height: 100%;
    padding: var(--space-16) 0 0;
}

.mainBox {
    position: relative;
    z-index: 1;
    height: 100%;
    width: 90%;
    max-width: 440px;
    display: flex;
    flex-direction: column;
}

.frame {
    pointer-events: none;
}

.screenWrap {
    position: relative;
    z-index: 1;
    width: 100%;
    flex: 1;
}

.screenFrameBox {
    position: absolute;
    z-index: 2;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    pointer-events: none;
}
.screenFrameBox .screenFrameCenter {
    width: 100%;
    flex: 1;
    background: url(/static/produce101thegirls/fanclub/feature/game_island_qXHDsBzJ/image/frame/ph_frame_center.png);
    background-position: center top;
    background-repeat: repeat-y;
    background-size: 100% auto;
}

.screenBox {
    position: relative;
    z-index: 1;
    width: 84%;
    height: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.heart {
    position: absolute;
    z-index: 1;
    width: 35%;
    top: 5%;
    left: 8%;
    pointer-events: none;
}

.slide_game {
    z-index: 2;
    width: 100%;
    text-align: center;
}
.slide_game li {}
.slide_game .illust {
    padding: 0 27.5%;
    margin: 0 auto var(--space-4);
}
.slide_game .gameTxt {
    width: max-content;
    max-width: 80%;
    margin: 0 auto;
    padding: var(--space-4) var(--space-6);
    background: var(--color-green-grad);
    border-radius: 8px;
    border: 2px solid var(--color-navy);
    box-shadow: 2px 2px var(--color-navy);
    line-height: 1.5;
}

/* arrow */
.slide_game .slick-prev, 
.slide_game .slick-next {
    z-index: 10;
    width: 20%;
    height: auto;
    aspect-ratio: 253 / 229;
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
    top: 17.5%;

}
.slide_game .slick-prev {
    left: 4%;
}
.slide_game .slick-next {
    right: 4%;
}
.slide_game .slick-prev:before,
.slide_game .slick-next:before {
    content: "";
    width: 100%;
    aspect-ratio: 253 / 229;
    line-height: initial;
    border-radius: 0;
    opacity: 1;
}
.slide_game .slick-prev:before {
    content: "";
    background: url(/static/produce101thegirls/fanclub/feature/game_island_qXHDsBzJ/image/icon_arrow_l.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
}
.slide_game .slick-next:before {
    content: "";
    background: url(/static/produce101thegirls/fanclub/feature/game_island_qXHDsBzJ/image/icon_arrow_r.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
}

.backBtn a {
    position: absolute;
    left: 50%;
    bottom: var(--space-3);
    transform: translateX(-50%);
    display: block;
    font-size: 10px;
    letter-spacing: 0.05em;
    width: max-content;
    max-width: 80%;
    margin: 0 auto;
    padding: var(--space-2) var(--space-4);
    background: var(--color-pink-grad);
    border-radius: 8px;
    border: 2px solid var(--color-navy);
    box-shadow: 2px 2px var(--color-navy);
    line-height: 1;
}
          
.screenBg {
    position: absolute;
    z-index: -1;
    inset: 0;
    background: url(/static/produce101thegirls/fanclub/feature/game_island_qXHDsBzJ/image/bg_screen.webp);
    background-repeat: no-repeat;
    background-position: 7.5% 50%;
    background-size: cover;
    pointer-events: none;
}

.copy {
    position: absolute;
    z-index: var(--z-footer);
    font-size: 10px;
    left: var(--space-3);
    bottom: var(--space-3);
}
.copy span {
    font-family: var(--font-sub);
    font-size: 12px;
    font-weight: 800;
}

/* Tablet */
@media (min-width: 600px) and (max-width: 960px) {

    .titBox h2 {
        width: 100%;
    }

    .titBox {
        flex: 70;
    }

    .contentsBox {
        flex: 30;
        padding: var(--space-12) 0 0;
    }

    .mainBox {
        width: 95%;
        max-width: 400px;
    }

}

@media (min-width: 601px) {

    .screenLogoBox {
        display: none;
    }

}

/* SP */
@media (max-width: 600px) {

    .container {
        display: block;
        height: 100svh;
        height: 100dvh;
    }

    .titBox {
        display: none;
    }

    .contentsBox {
        width: 100%;
        padding: 0;
    }

    .mainBox {
        width: 100%;
        max-width: 767px;
    }

    .screenFrameBox .screenFrameCenter {
        background: url(/static/produce101thegirls/fanclub/feature/game_island_qXHDsBzJ/image/frame/ph_frame_sp_center.png);
        background-position: center top;
        background-repeat: repeat-y;
        background-size: 100% auto;
    }

    .screenBox {
        display: block;
    }

    .screenLogoBox {
        margin: 0 auto 5svh;
    }
    .screenLogo {
        margin: 0 auto 6%;
    }
    .screenHeart {
        width: 30%;
        margin: 0 0 0 8%;
    }

    .heart {
        display: none;
    }

    .slide_game .illust {
        max-width: 400px;
    }
    .slide_game .gameTxt {}

    /* arrow */
    .slide_game .slick-prev, 
    .slide_game .slick-next {
        max-width: 72px;
    }

    .copy {
        left: 12px;
        bottom: 2px;
        transform-origin: left;
        transform: rotate(-90deg);
        line-height: 1;
    }

    /* soon */
    .screenBox:has(.screenSoon) .screenLogoBox {
        margin: 0 auto 14svh;
    }
    .screenSoon {
        text-align: center;
    }
    
}