@charset "UTF-8";

/* sp375 */

/*2*/
@media screen and (max-width:780px) { /*SP*/
}
@media screen and (min-width:781px) , print { /*PC&TB*/
}

/*3*/
@media screen and (max-width:780px) { /*SP*/
}
@media screen and (min-width:781px) and ( max-width:1600px) { /*TB&PC*/
}
@media screen and (min-width:1601px) , print { /*PC*/
}

/*3*/
@media screen and (max-width:780px) { /*SP*/
}
@media screen and (min-width:781px) and ( max-width:1680px) { /*TB&PC*/
}
@media screen and (min-width:1681px) , print { /*PC*/
}


/* common */
html,body{background-color: #000;}
@media screen and (max-width:780px) { /*SP*/
    #contentsWrap {
        position: relative;   /* ★ 重要！ */
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        
        width: 100%;
        min-height: 100vh;
        background-color: #000;
        z-index: 0;           /* ★ */
    }

    a{
        transition: 0.3s;
    }
    a:hover{
        /* opacity: 0.5; */
    }
    a:active {
        /* transform: translateY(5px); */
        /* transform: translateY(1.33vw); */
    }
    a img{
        width: 100%;
    }
}
@media screen and (min-width:781px) , print { /*PC&TB*/
    #contentsWrap {
        position: relative;   /* ★ 重要！ */
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        
        width: 100%;
        min-height: 100vh;
        background-color: #000;
        z-index: 0;           /* ★ */
    }

    #contentsWrap::before {
        content:"";
        position: fixed;      /* 背景固定 */
        inset: 0;
        background: url("../img/Q_bg.webp") center/cover no-repeat;
        z-index: -1;          /* ★ このままでOK */
        pointer-events: none; /* 背景クリック無効（任意） */
    }

    a{
        transition: 0.3s;
    }
    a:hover{
        opacity: 0.5;
    }
    a img{
        width: 100%;
    }
}


/* Q_entry */
@media screen and (max-width:780px) { /*SP*/
    #Q_entry{
        position: relative;
        display: flex; flex-direction: column; justify-content: center; align-items: center;
        /* width: 375px; */
        width: 100.00vw;
        background-color: #000;
        /* padding: 7.5px; */
        padding: 2.00vw;
    }
    .Q_entry_01{
        /* width: 360px; */
        width: 96.00vw;
    }
    .Q_entry_02{
        position: absolute;
        /* top: 180px; */
        top: 48.00vw;
        left: 50%;
        transform: translateX(-50%);
        /* width: 181px; */
        width: 48.27vw;
    }
    .Q_entry_03{
        position: absolute;
        /* top: 380px; */
        top: 101.33vw;
        left: 50%;
        transform: translateX(-50%);
        /* width: 229px; */
        width: 61.07vw;
    }
    .Q_entry_04{
        position: absolute;
        /* top: 920px; */
        top: 245.33vw;
        left: 50%;
        transform: translateX(-50%);
        /* width: 270px; */
        width: 72.00vw;
    }
    .Q_entry_p{
        position: absolute;
        /* top: 340px; */
        top: 90.67vw;
        left: 50%;
        transform: translateX(-50%);
        color: #fff;
        /* font-size: 12px; */
        font-size: 3.20vw;
        width: 100%;
        text-align: center;
    }
    /* -------------------------------------- */
    /* form */
    /* 全体の基本 */
    .Q_entry_form {
        position: absolute;
        /* top: 210px; */
        top: 56.00vw;
        left: 50%;
        transform: translateX(-50%);
        /* width: 300px; */
        width: 80.00vw;
        font-family: "Noto Sans JP", sans-serif;
        color: #e9eef5;
        display: flex; flex-direction: column; justify-content: center; align-items: center;
    }
    /* ラベル + 入力 */
    .Q_entry_formgroup {
        display: grid;
        /* gap: 8px; */
        gap: 2.13vw;
        /* margin-bottom: 20px; */
        margin-bottom: 5.33vw;
    }
    .Q_entry_formgroup label {
        /* font-size: 14px; */
        font-size: 3.73vw;
        font-weight: 700;
        letter-spacing: .02em;
    }
    .Q_entry_formgroup input[type="password"] {
        width: 100%;
        /* padding: 12px 14px; */
        padding: 3.20vw 3.73vw;
        font: inherit;
        color: #333;
        background: #e4e4e4;
        /* border: 1px solid #2a2d34; */
        border: 0.27vw solid #2a2d34;
        /* border-radius: 10px; */
        border-radius: 2.67vw;
        outline: none;
        transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
    }
    .Q_entry_formgroup input[type="password"]::placeholder {
        color: #70819a;
    }
    /* フォーカス時 */
    .Q_entry_formgroup input[type="password"]:focus-visible {
        border-color: #a5040e;
        /* box-shadow: 0 0 10px 10px rgba(165, 4, 14, 0.5); */
        box-shadow: 0 0 2.67vw 2.67vw rgba(165, 4, 14, 0.5);
        background: #e4e4e4;
    }
    /* ボタン */
    .Q_entry_btn {
        /* width: 100px; */
        width: 26.67vw;
        /* padding: 12px; */
        padding: 3.20vw;
        text-align: center;
        border: none;
        /* border-radius: 2px; */
        border-radius: 0.53vw;
        background: linear-gradient(180deg, #a5040e 0%, #a5040e 100%);
        color: #fff;
        /* font-size: 15px; */
        font-size: 4.00vw;
        /* letter-spacing: 0px; */
        letter-spacing: 0.00vw;
        font-weight: 700;
        cursor: pointer;
        /* box-shadow: 0 8px 18px rgba(79, 140, 255, 0.35); */
        box-shadow: 0 2.13vw 4.80vw rgba(79, 140, 255, 0.35);
        transition: transform .05s ease, filter .15s ease;
    }
    .Q_entry_btn:hover {
        /* filter: brightness(1.2); */
    }
    .Q_entry_btn:active {
        /* transform: translateY(5px); */
        transform: translateY(1.33vw);
    }
    .Q_entry_btn:focus-visible {
        /* box-shadow: 0 0 0 4px rgba(79, 140, 255, 0.35); */
        box-shadow: 0 0 0 1.07vw rgba(79, 140, 255, 0.35);
    }
}
@media screen and (min-width:781px) , print { /*PC&TB*/
    #Q_entry{
        position: relative;
        display: flex; flex-direction: column; justify-content: center; align-items: center;
        width: 375px;
        background-color: #000;
        padding: 7.5px;
    }
    .Q_entry_01{
        width: 360px;
    }
    .Q_entry_02{
        position: absolute;
        top: 180px;
        left: 50%;
        transform: translateX(-50%);
        width: 181px;
    }
    .Q_entry_03{
        position: absolute;
        top: 380px;
        left: 50%;
        transform: translateX(-50%);
        width: 229px;
    }
    .Q_entry_04{
        position: absolute;
        top: 920px;
        left: 50%;
        transform: translateX(-50%);
        width: 270px;
    }
    .Q_entry_p{
        position: absolute;
        top: 340px;
        left: 50%;
        transform: translateX(-50%);
        color: #fff;
        font-size: 12px;
        width: 100%;
        text-align: center;
    }

    /* -------------------------------------- */
    /* form */

    /* 全体の基本 */
    .Q_entry_form {
        position: absolute;
        top: 210px;
        left: 50%;
        transform: translateX(-50%);
        width: 300px;
        font-family: "Noto Sans JP", sans-serif;
        color: #e9eef5;
        display: flex; flex-direction: column; justify-content: center; align-items: center;
    }

    /* ラベル + 入力 */
    .Q_entry_formgroup {
        display: grid;
        gap: 8px;
        margin-bottom: 20px;
    }

    .Q_entry_formgroup label {
        font-size: 14px;
        font-weight: 700;
        letter-spacing: .02em;
    }

    .Q_entry_formgroup input[type="password"] {
        width: 100%;
        padding: 12px 14px;
        font: inherit;
        color: #333;
        background: #e4e4e4;
        border: 1px solid #2a2d34;
        border-radius: 10px;
        outline: none;
        transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
    }

    .Q_entry_formgroup input[type="password"]::placeholder {
        color: #70819a;
    }

    /* フォーカス時 */
    .Q_entry_formgroup input[type="password"]:focus-visible {
        border-color: #a5040e;
        box-shadow: 0 0 10px 10px rgba(165, 4, 14, 0.5);
        background: #e4e4e4;
    }

    /* ボタン */
    .Q_entry_btn {
        width: 100px;
        padding: 12px;
        text-align: center;
        border: none;
        border-radius: 2px;
        background: linear-gradient(180deg, #a5040e 0%, #a5040e 100%);
        color: #fff;
        font-size: 15px;
        letter-spacing: 0px;
        font-weight: 700;
        cursor: pointer;
        box-shadow: 0 8px 18px rgba(79, 140, 255, 0.35);
        transition: transform .05s ease, filter .15s ease;
    }

    .Q_entry_btn:hover {
        filter: brightness(1.2);
    }

    .Q_entry_btn:active {
        transform: translateY(5px);
    }

    .Q_entry_btn:focus-visible {
        box-shadow: 0 0 0 4px rgba(79, 140, 255, 0.35);
    }

}


/* Q_top */
@media screen and (max-width:780px) { /*SP*/
    #Q_top{
        position: relative;
        display: flex; flex-direction: column; justify-content: center; align-items: center;
        /* width: 375px; */
        width: 100.00vw;
        background-color: #000;
        /* --- */
        display: none;
        opacity: 0;
    }
    .Q_top_01{
        /* width: 375px; */
        width: 100.00vw;
    }
    .Q_top_02{
        /* width: 375px; */
        width: 100.00vw;
    }
    .Q_top_03{
        position: absolute;
        /* top: 680px; */
        top: 181.33vw;
        left: 50%;
        transform: translateX(-50%);
        /* width: 315px; */
        width: 84.00vw;
    }
    .Q_top_04{
        position: absolute;
        /* top: 790px; */
        top: 210.67vw;
        left: 50%;
        transform: translateX(-50%);
        /* width: 315px; */
        width: 84.00vw;
    }
    .Q_top_05{
        position: absolute;
        /* top: 900px; */
        top: 240.00vw;
        left: 50%;
        transform: translateX(-50%);
        /* width: 315px; */
        width: 84.00vw;
    }
    .Q_top_06{
        position: absolute;
        /* top: 1080px; */
        top: 288.00vw;
        left: 50%;
        transform: translateX(-50%);
        /* width: 148px; */
        width: 39.47vw;
    }
    .Q_top_07{
        position: absolute;
        /* top: 1200px; */
        top: 320.00vw;
        left: 50%;
        transform: translateX(-50%);
        /* width: 315px; */
        width: 84.00vw;
    }
}
@media screen and (min-width:781px) , print { /*PC&TB*/
    #Q_top{
        position: relative;
        display: flex; flex-direction: column; justify-content: center; align-items: center;
        width: 375px;
        background-color: #000;
        /* --- */
        display: none;
        opacity: 0;
    }
    .Q_top_01{
        width: 375px;
    }
    .Q_top_02{
        width: 375px;
    }
    .Q_top_03{
        position: absolute;
        top: 680px;
        left: 50%;
        transform: translateX(-50%);
        width: 315px;
    }
    .Q_top_04{
        position: absolute;
        top: 790px;
        left: 50%;
        transform: translateX(-50%);
        width: 315px;
    }
    .Q_top_05{
        position: absolute;
        top: 900px;
        left: 50%;
        transform: translateX(-50%);
        width: 315px;
    }
    .Q_top_06{
        position: absolute;
        top: 1080px;
        left: 50%;
        transform: translateX(-50%);
        width: 148px;
    }
    .Q_top_07{
        position: absolute;
        top: 1200px;
        left: 50%;
        transform: translateX(-50%);
        width: 315px;
    }
}


/* Q_main */
@media screen and (max-width:780px) { /*SP*/
    #Q_main{
        position: relative;
        display: flex; flex-direction: column; justify-content: center; align-items: center;
        /* width: 375px; */
        width: 100.00vw;
        height: 100vh;
        background-image: url("../img/Q_main_bg.webp");
        background-size: cover;
        background-position: center;
        background-repeat: repeat-y;
        /* aspect-ratio: 1500 / 2668;  */
        /* --- */
        display: none;
        opacity: 0;
    }
    .Q_mainBox{
        position: relative;
        display: flex; flex-direction: column; justify-content: flex-start; align-items: center;
        /* width: 375px; */
        width: 100.00vw;
        height: auto;
        /* background-image: url("../img/Q_main_bg.webp");
        background-size: cover;
        background-position: center;
        background-repeat: repeat-y; */
    }
    /* -------- */
    .Q_main_statusBox{
        display: flex; flex-wrap: nowrap; justify-content: center; align-items: center;
        /* margin: 10px 0 0 0; */
        margin: 2.67vw 0 0 0;
    }
    .Q_main_statusImg{
        /* width: calc( 35px * 1.05 ); */
        width: calc( 9.33vw * 1.05 );
        /* margin: 0 -2px 0 0; */
        margin: 0 -0.53vw 0 0;
    }
    .Q_main_statusImg:last-of-type{
        /* width: calc( 24px * 1.05 ); */
        width: calc( 6.40vw * 1.05 );
    }
    /* ----------- */
    .Q_main_question{
        display: flex; flex-direction: column; justify-content: center; align-items: center;
        /* height: 120px; */
        height: 32.00vw;
        /* font-size: 20px; */
        font-size: 5.33vw;
        font-weight: bold;
        color: #fff;
        /* margin: 10px 0 0 0; */
        margin: 2.67vw 0 0 0;
        /* padding: 0 10px 0 20px; */
        padding: 0 2.67vw 0 5.33vw;
    }
    /* ----------- */
    .Q_main_imgBox{
        display: flex; flex-direction: column; justify-content: center; align-items: center;
        width: 100%;
        /* margin: 10px 0 0 0; */
        margin: 2.67vw 0 0 0;
    }
    .Q_main_img{
        width: 70%;
    }
    /* ----------- */
    .Q_main_timerBox{
        display: flex; flex-wrap: nowrap; justify-content: center; align-items: center;
        /* width: 50px; */
        width: 13.33vw;
        /* height: 50px; */
        height: 13.33vw;
        /* margin: 10px 0 0 0; */
        margin: 2.67vw 0 0 0;
        /* padding: 4px 0 0 0; */
        padding: 1.07vw 0 0 0;
        /* font-size: 24px; */
        font-size: 6.40vw;
        font-weight: bold;
        color: #ffe791;
        position: absolute;
        /* top: 382px; */
        top: 101.87vw;
        /* right: 162px; */
        right: 43.20vw;
        overflow: hidden;
    }
    .Q_main_timerText1{
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
        /* width: 40px; */
        width: 10.67vw;
        /* margin: 10px 0 0 0; */
        margin: 2.67vw 0 0 0;
        /* font-size: 12px; */
        font-size: 3.20vw;
        font-weight: bold;
        color: #ffe791;
        position: absolute;
        /* top: 399px; */
        top: 106.40vw;
        /* right: 198px; */
        right: 52.80vw;
    }
    .Q_main_timerText2{
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
        /* width: 20px; */
        width: 5.33vw;
        /* margin: 10px 0 0 0; */
        margin: 2.67vw 0 0 0;
        /* font-size: 11px; */
        font-size: 2.93vw;
        font-weight: bold;
        color: #ffe791;
        position: absolute;
        /* top: 400px; */
        top: 106.67vw;
        /* right: 151px; */
        right: 40.27vw;
    }
    /* ----------- */
    .Q_main_answerBox{
        display: flex; flex-wrap: nowrap; justify-content: center; align-items: center;
        width: 100%;
        /* margin: 50px 0 0 0; */
        margin: 13.33vw 0 0 0;
        /* gap: 12px; */
        gap: 3.20vw;
    }
    .Q_main_answer_A,.Q_main_answer_B{
        display: flex; flex-direction: column; justify-content: center; align-items: center;
        background-image: url("../img/Q_main_BT_normal.webp");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        /* width: 150px; */
        width: 40.00vw;
        /* height: 60px; */
        height: 16.00vw;
        /* font-size: 20px; */
        font-size: 5.33vw;
        /* line-height: 22px; */
        line-height: 5.87vw;
        font-weight: bold;
        color: #fff;
        text-decoration: none;
        text-align: center;
    }
    .Q_main_answer_active{
        background-image: url("../img/Q_main_BT_active.webp");
        color: #000;
    }
    /* ----------- */
    .Q_main_nextBox{
        display: flex; flex-wrap: nowrap; justify-content: center; align-items: center;
        width: 100%;
        /* margin: 20px 0 0 0; */
        margin: 5.33vw 0 0 0;
    }
    .Q_main_next{
        display: flex; flex-direction: column; justify-content: center; align-items: center;
        background-image: url("../img/Q_main_BT_enter.webp");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        /* width: 315px; */
        width: 84.00vw;
        /* height: 60px; */
        height: 16.00vw;
        /* font-size: 20px; */
        font-size: 5.33vw;
        font-weight: bold;
        color: #fff;
        text-decoration: none;
    }
    /* Splide */
    .splide__slide .Q_area_slide {
        transition: transform 0.5s;
        position: relative;
    }
    .splide__slide.is-prev .Q_area_slide {
        /* transform: translateX(-50px); */
        transform: translateX(-13.33vw);
    }
    .splide__slide.is-next .Q_area_slide {
        /* transform: translateX(50px); */
        transform: translateX(13.33vw);
    }
}
@media screen and (min-width:781px) , print { /*PC&TB*/
    #Q_main{
        position: relative;
        display: flex; flex-direction: column; justify-content: center; align-items: center;
        width: 375px;
        height: 100vh;
        background-image: url("../img/Q_main_bg.webp");
        background-size: cover;
        background-position: center;
        background-repeat: repeat-y;
        /* aspect-ratio: 1500 / 2668;  */
        /* --- */
        display: none;
        opacity: 0;
    }
    .Q_mainBox{
        position: relative;
        display: flex; flex-direction: column; justify-content: center; align-items: center;
        width: 375px;
        height: auto;
        /* background-image: url("../img/Q_main_bg.webp");
        background-size: cover;
        background-position: center;
        background-repeat: repeat-y;
        aspect-ratio: 1500 / 2668;  */
    }
    /* -------- */
    .Q_main_statusBox{
        display: flex; flex-wrap: nowrap; justify-content: center; align-items: center;
        margin: 10px 0 0 0;
    }
    .Q_main_statusImg{
        width: calc( 35px * 1.05 );
        margin: 0 -2px 0 0;
    }
    .Q_main_statusImg:last-of-type{
        width: calc( 24px * 1.05 );
    }
    /* ----------- */
    .Q_main_question{
        display: flex; flex-direction: column; justify-content: center; align-items: center;
        height: 120px;
        font-size: 20px;
        font-weight: bold;
        color: #fff;
        margin: 10px 0 0 0;
        padding: 0 10px 0 20px;
    }
    /* ----------- */
    .Q_main_imgBox{
        display: flex; flex-direction: column; justify-content: center; align-items: center;
        width: 100%;
        margin: 10px 0 0 0;
    }
    .Q_main_img{
        width: 70%;
    }
    /* ----------- */
    .Q_main_timerBox{
        display: flex; flex-wrap: nowrap; justify-content: center; align-items: center;
        width: 50px;
        height: 50px;
        margin: 10px 0 0 0;
        padding: 4px 0 0 0;
        font-size: 24px;
        font-weight: bold;
        color: #ffe791;
        position: absolute;
        top: 382px;
        right: 162px;
        overflow: hidden;
    }
    .Q_main_timerText1{
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
        width: 40px;
        margin: 10px 0 0 0;
        font-size: 12px;
        font-weight: bold;
        color: #ffe791;
        position: absolute;
        top: 399px;
        right: 198px;
    }
    .Q_main_timerText2{
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
        width: 20px;
        margin: 10px 0 0 0;
        font-size: 11px;
        font-weight: bold;
        color: #ffe791;
        position: absolute;
        top: 400px;
        right: 151px;
    }
    /* ----------- */
    .Q_main_answerBox{
        display: flex; flex-wrap: nowrap; justify-content: center; align-items: center;
        width: 100%;
        margin: 50px 0 0 0;
        gap: 12px;
    }
    .Q_main_answer_A,.Q_main_answer_B{
        display: flex; flex-direction: column; justify-content: center; align-items: center;
        background-image: url("../img/Q_main_BT_normal.webp");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        width: 150px;
        height: 60px;
        font-size: 20px;
        line-height: 22px;
        font-weight: bold;
        color: #fff;
        text-decoration: none;
        text-align: center;
    }
    .Q_main_answer_active{
        background-image: url("../img/Q_main_BT_active.webp");
        color: #000;
    }
    /* ----------- */
    .Q_main_nextBox{
        display: flex; flex-wrap: nowrap; justify-content: center; align-items: center;
        width: 100%;
        margin: 20px 0 0 0;
    }
    .Q_main_next{
        display: flex; flex-direction: column; justify-content: center; align-items: center;
        background-image: url("../img/Q_main_BT_enter.webp");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        width: 315px;
        height: 60px;
        font-size: 20px;
        font-weight: bold;
        color: #fff;
        text-decoration: none;
    }

    /* Splide */
    .splide__slide .Q_area_slide {
        transition: transform 0.5s;
        position: relative;
    }
    .splide__slide.is-prev .Q_area_slide {
        transform: translateX(-50px);
    }
    .splide__slide.is-next .Q_area_slide {
        transform: translateX(50px);
    }

}


/* Q_result_allCorrect */
@media screen and (max-width:780px) { /*SP*/
    #Q_result_allCorrect{
        position: relative;
        display: flex; flex-direction: column; justify-content: center; align-items: center;
        /* width: 375px; */
        width: 100.00vw;
        height: auto;
        background-color: #000;
        color: #fff;
        background-image: url("../img/Q_main_bg.webp"); 
        background-size: cover;
        background-position: center;
        background-repeat: repeat-y;
        /* padding: 50px 0; */
        padding: 13.33vw 0;
        /* --- */
        display: none;
        opacity: 0;
    }
    .Q_result_allCorrectBox{
        display: flex; flex-direction: column; justify-content: center; align-items: center;
        /* width: 375px; */
        width: 100.00vw;
    }
    .Q_result_allCorrect_title{
        /* width: 315px; */
        width: 84.00vw;
    }
    .Q_result_allCorrect_download{
        /* width: 150px; */
        width: 36.23vw;
        /* margin: 20px 0 0 0; */
        margin: 4.83vw 0 0 0;
    }
    .Q_result_allCorrect_img{
        /* width: 135px; */
        width: 36.00vw;
        /* margin: 40px 0 0 0; */
        margin: 10.67vw 0 0 0;
    }
    .Q_result_allCorrect_size{
        display: flex; flex-direction: column; justify-content: center; align-items: center;
        background-image: url("../img/Q_result_allCorrect_bt.webp");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        /* width: 315px; */
        width: 84.00vw;
        /* height: 60px; */
        height: 16.00vw;
        /* font-size: 20px; */
        font-size: 5.33vw;
        /* line-height: 22px; */
        line-height: 5.87vw;
        font-weight: bold;
        color: #fff;
        text-decoration: none;
        text-align: center;
        /* margin: 20px 0 0 0; */
        margin: 5.33vw 0 0 0;
        transition: 0.3s;
    }
    .Q_result_allCorrect_size:hover{
        /* opacity: 0.5; */
    }
    .Q_result_allCorrect_size:active {
        /* transform: translateY(5px); */
        transform: translateY(1.33vw);
    }
    .Q_result_allCorrect_text{
        /* width: 250px; */
        width: 66.67vw;
        /* margin: 40px 0 0 0; */
        margin: 10.67vw 0 0 0;
    }
    .Q_result_allCorrect_textBox{
        /* width: 315px; */
        width: 84.00vw;
        /* margin: 20px 0 0 0; */
        margin: 5.33vw 0 0 0;
    }
    .Q_result_allCorrect_textBox p{
        /* font-size: 12px; */
        font-size: 3.20vw;
        /* line-height: 20px; */
        line-height: 5.33vw;
        /* margin: 0 0 5px 0; */
        margin: 0 0 1.33vw 0;
        font-weight: bold;
        /* text-indent: -12px; */
        text-indent: -3.20vw;
        /* padding-left: 12px; */
        padding-left: 3.20vw;
        /* letter-spacing: 1px; */
        letter-spacing: 0.27vw;
    }
    .Q_result_allCorrect_returnTop{
        /* width: 315px; */
        width: 84.00vw;
        transition: 0.3s;
        cursor: pointer;
        /* margin: 40px 0 0 0; */
        margin: 10.67vw 0 0 0;
    }
    .Q_result_allCorrect_returnTop:hover{
        /* opacity: 0.5; */
    }
    .Q_result_allCorrect_returnTop:active {
        /* transform: translateY(5px); */
        transform: translateY(1.33vw);
    }
    .Q_result_allCorrect_returnTop img{
        width: 100%;
    }
}
@media screen and (min-width:781px) , print { /*PC&TB*/
    #Q_result_allCorrect{
        position: relative;
        display: flex; flex-direction: column; justify-content: center; align-items: center;
        width: 375px;
        height: auto;
        background-color: #000;
        color: #fff;
        background-image: url("../img/Q_main_bg.webp"); 
        background-size: cover;
        background-position: center;
        background-repeat: repeat-y;
        padding: 50px 0;
        /* --- */
        display: none;
        opacity: 0;
    }
    .Q_result_allCorrectBox{
        display: flex; flex-direction: column; justify-content: center; align-items: center;
        width: 375px;
    }
    .Q_result_allCorrect_title{
        width: 315px;
    }
    .Q_result_allCorrect_download{
        width: 150px;
        margin: 20px 0 0 0;
    }
    .Q_result_allCorrect_img{
        width: 135px;
        margin: 40px 0 0 0;
    }
    .Q_result_allCorrect_size{
        display: flex; flex-direction: column; justify-content: center; align-items: center;
        background-image: url("../img/Q_result_allCorrect_bt.webp");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        width: 315px;
        height: 60px;
        font-size: 20px;
        line-height: 22px;
        font-weight: bold;
        color: #fff;
        text-decoration: none;
        text-align: center;
        margin: 20px 0 0 0;
        transition: 0.3s;
    }
    .Q_result_allCorrect_size:hover{
        opacity: 0.5;
    }
    .Q_result_allCorrect_text{
        width: 250px;
        margin: 40px 0 0 0;
    }
    .Q_result_allCorrect_textBox{
        width: 315px;
        margin: 20px 0 0 0;
    }
    .Q_result_allCorrect_textBox p{
        font-size: 12px;
        line-height: 20px;
        margin: 0 0 5px 0;
        font-weight: bold;
        text-indent: -12px;
        padding-left: 12px;
        letter-spacing: 1px;
    }
    .Q_result_allCorrect_returnTop{
        width: 315px;
        transition: 0.3s;
        cursor: pointer;
        margin: 40px 0 0 0;
    }
    .Q_result_allCorrect_returnTop:hover{
        opacity: 0.5;
    }
    .Q_result_allCorrect_returnTop img{
        width: 100%;
    }
}


/* Q_result_inCorrect */
@media screen and (max-width:780px) { /*SP*/
    #Q_result_inCorrect{
        position: relative;
        display: flex; flex-direction: column; justify-content: center; align-items: center;
        /* width: 375px; */
        width: 100.00vw;
        height: auto;
        background-color: #000;
        color: #fff;
        background-image: url("../img/Q_main_bg.webp"); 
        background-size: cover;
        background-position: center;
        background-repeat: repeat-y;
        /* padding: 50px 0; */
        padding: 13.33vw 0;
        /* --- */
        display: none;
        opacity: 0;
    }
    .Q_result_inCorrectBox{
        display: flex; flex-direction: column; justify-content: center; align-items: center;
        /* width: 375px; */
        width: 100.00vw;
    }
    .Q_result_inCorrect_title{
        /* width: 315px; */
        width: 84.00vw;
    }
    .Q_result_inCorrect_text{
        /* width: 250px; */
        width: 66.67vw;
        /* margin: 40px 0 0 0; */
        margin: 10.67vw 0 0 0;
    }
    .Q_result_inCorrect_correctCount{
        /* font-size: 26px; */
        font-size: 6.93vw;
        font-weight: bold;
        /* margin: 40px 0 0 0; */
        margin: 10.67vw 0 0 0;
    }
    .Q_result_inCorrect_returnTop{
        /* width: 315px; */
        width: 84.00vw;
        transition: 0.3s;
        cursor: pointer;
        /* margin: 40px 0 0 0; */
        margin: 10.67vw 0 0 0;
    }
    .Q_result_inCorrect_returnTop:hover{
        /* opacity: 0.5; */
    }
    .Q_result_inCorrect_returnTop:active {
        /* transform: translateY(5px); */
        transform: translateY(1.33vw);
    }
    .Q_result_inCorrect_returnTop img{
        width: 100%;
    }
}
@media screen and (min-width:781px) , print { /*PC&TB*/
    #Q_result_inCorrect{
        position: relative;
        display: flex; flex-direction: column; justify-content: center; align-items: center;
        width: 375px;
        height: auto;
        background-color: #000;
        color: #fff;
        background-image: url("../img/Q_main_bg.webp"); 
        background-size: cover;
        background-position: center;
        background-repeat: repeat-y;
        padding: 50px 0;
        /* --- */
        display: none;
        opacity: 0;
    }
    .Q_result_inCorrectBox{
        display: flex; flex-direction: column; justify-content: center; align-items: center;
        width: 375px;
    }
    .Q_result_inCorrect_title{
        width: 315px;
    }
    .Q_result_inCorrect_text{
        width: 250px;
        margin: 40px 0 0 0;
    }
    .Q_result_inCorrect_correctCount{
        font-size: 26px;
        font-weight: bold;
        margin: 40px 0 0 0;
    }
    
    .Q_result_inCorrect_returnTop{
        width: 315px;
        transition: 0.3s;
        cursor: pointer;
        margin: 40px 0 0 0;
    }
    .Q_result_inCorrect_returnTop:hover{
        opacity: 0.5;
    }
    .Q_result_inCorrect_returnTop img{
        width: 100%;
    }
}


/* Q_modal */
@media screen and (max-width:780px) { /*SP*/
    .Q_modal_position{
        position: relative;
        width: 100%;
    }
    .Q_coupon,.Q_stamp,.Q_quiz{
        /* width: 375px; */
        width: 100.00vw;
    }
    .Q_coupon_textBox{
        position: absolute;
        /* top: 790px; */
        top: 210.67vw;
        left: 0;
        /* padding: 0 30px; */
        padding: 0 8.00vw;
        font-weight: bold;
        color: #000;
    }
    .Q_stamp_textBox{
        position: absolute;
        /* top: 1380px; */
        top: 368.00vw;
        left: 0;
        /* padding: 0 30px; */
        padding: 0 8.00vw;
        font-weight: bold;
        color: #000;
    }
    .Q_quiz_textBox{
        position: absolute;
        /* top: 770px; */
        top: 205.33vw;
        left: 0;
        /* padding: 0 50px; */
        padding: 0 13.33vw;
        font-weight: bold;
    }
    .Q_coupon_textBox p , .Q_stamp_textBox p , .Q_quiz_textBox p{
        /* font-size: 12px; */
        font-size: 3.20vw;
        /* line-height: 20px; */
        line-height: 5.33vw;
        /* margin: 0 0 5px 0; */
        margin: 0 0 1.33vw 0;
        /* text-indent: -12px; */
        text-indent: -3.20vw;
        /* padding-left: 12px; */
        padding-left: 3.20vw;
        /* letter-spacing: 1px; */
        letter-spacing: 0.27vw;
        color: #000;
    }
    .Q_coupon_textBox p a , .Q_stamp_textBox p a , .Q_quiz_textBox p a{
        color: #a5040e;
        text-decoration: underline;
        /* text-underline-offset: 4px; */
        text-underline-offset: 1.07vw;
    }
    .Q_quiz_box{
        position: absolute;
        /* top: 310px; */
        top: 82.67vw;
        left: 50%;
        transform: translateX(-50%);
        display: flex; flex-wrap: nowrap; justify-content: center; align-items: center;
        /* gap: 20px; */
        gap: 5.33vw;
    }
    .Q_quiz_02{
        /* width: 147px; */
        width: 39.20vw;
    }
    .Q_quiz_03{
        /* width: 147px; */
        width: 39.20vw;
    }
    /* ----------- */
    .Q_back{
        position: absolute;
        /* bottom: 50px; */
        bottom: 13.33vw;
        left: 50%;
        transform: translateX(-50%);
        /* width: 315px; */
        width: 84.00vw;
    }
    /* ----------- */
    /* 表示制御（既存でOK） */
    .modal { display: none; }
    .modal.is-open { display: block; }
    /* ===== MicroModal の開閉アニメ（CSSのみ） ===== */
    /* 開くとき（aria-hidden="false"） */
    .micromodal-slide[aria-hidden="false"] .modal__overlay {
    animation: mmfadeIn 0.25s ease-out forwards;
    }
    .micromodal-slide[aria-hidden="false"] .modal__container {
    animation: mmslideIn 0.25s ease-out forwards;
    }
    /* 閉じるとき（aria-hidden="true"） */
    .micromodal-slide[aria-hidden="true"] .modal__overlay {
    animation: mmfadeOut 0.2s ease-in forwards;
    }
    .micromodal-slide[aria-hidden="true"] .modal__container {
    animation: mmslideOut 0.2s ease-in forwards;
    }
    /* オーバーレイ＆本体の基本（既存＋推奨） */
    .modal__overlay {
    background: rgba(0, 0, 0, 0.6);
    position: fixed;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    will-change: opacity;
    }
    .modal__container {
    position: relative;
    max-width: 100vw;
    max-height: 100vh;
    overflow-y: auto;                 /* 縦長画像スクロール */
    -webkit-overflow-scrolling: touch;
    will-change: transform, opacity;
    }
    /* キーフレーム */
    @keyframes mmfadeIn   { from { opacity: 0; } to { opacity: 1; } }
    @keyframes mmfadeOut  { from { opacity: 1; } to { opacity: 0; } }
    /* @keyframes mmslideIn  { from { transform: translateY(16px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } */
    @keyframes mmslideIn  { from { transform: translateY(4.27vw); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
    /* @keyframes mmslideOut { from { transform: translateY(0); opacity: 1; } to { transform: translateY(12px); opacity: 0; } } */
    @keyframes mmslideOut { from { transform: translateY(0); opacity: 1; } to { transform: translateY(3.20vw); opacity: 0; } }
}
@media screen and (min-width:781px) , print { /*PC&TB*/
    .Q_modal_position{
        position: relative;
        width: 100%;
    }
    .Q_coupon,.Q_stamp,.Q_quiz{
        width: 375px;
    }
    .Q_coupon_textBox{
        position: absolute;
        top: 790px;
        left: 0;
        padding: 0 30px;
        font-weight: bold;
        color: #000;
    }
    .Q_stamp_textBox{
        position: absolute;
        top: 1380px;
        left: 0;
        padding: 0 30px;
        font-weight: bold;
        color: #000;
    }
    .Q_quiz_textBox{
        position: absolute;
        top: 770px;
        left: 0;
        padding: 0 50px;
        font-weight: bold;
    }
    .Q_coupon_textBox p , .Q_stamp_textBox p , .Q_quiz_textBox p{
        font-size: 12px;
        line-height: 20px;
        margin: 0 0 5px 0;
        text-indent: -12px;
        padding-left: 12px;
        letter-spacing: 1px;
        color: #000;
    }
    .Q_coupon_textBox p a , .Q_stamp_textBox p a , .Q_quiz_textBox p a{
        color: #a5040e;
        text-decoration: underline;
        text-underline-offset: 4px;
    }
    .Q_quiz_box{
        position: absolute;
        top: 310px;
        left: 50%;
        transform: translateX(-50%);
        display: flex; flex-wrap: nowrap; justify-content: center; align-items: center;
        gap: 20px;
    }
    .Q_quiz_02{
        width: 147px;
    }
    .Q_quiz_03{
        width: 147px;
    }
    /* ----------- */
    .Q_back{
        position: absolute;
        bottom: 50px;
        left: 50%;
        transform: translateX(-50%);
        width: 315px;
    }
    /* ----------- */
    /* 表示制御（既存でOK） */
    .modal { display: none; }
    .modal.is-open { display: block; }

    /* ===== MicroModal の開閉アニメ（CSSのみ） ===== */
    /* 開くとき（aria-hidden="false"） */
    .micromodal-slide[aria-hidden="false"] .modal__overlay {
    animation: mmfadeIn 0.25s ease-out forwards;
    }
    .micromodal-slide[aria-hidden="false"] .modal__container {
    animation: mmslideIn 0.25s ease-out forwards;
    }

    /* 閉じるとき（aria-hidden="true"） */
    .micromodal-slide[aria-hidden="true"] .modal__overlay {
    animation: mmfadeOut 0.2s ease-in forwards;
    }
    .micromodal-slide[aria-hidden="true"] .modal__container {
    animation: mmslideOut 0.2s ease-in forwards;
    }

    /* オーバーレイ＆本体の基本（既存＋推奨） */
    .modal__overlay {
    background: rgba(0, 0, 0, 0.6);
    position: fixed;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    will-change: opacity;
    }

    .modal__container {
    position: relative;
    max-width: 100vw;
    max-height: 100vh;
    overflow-y: auto;                 /* 縦長画像スクロール */
    -webkit-overflow-scrolling: touch;
    will-change: transform, opacity;
    }

    /* キーフレーム */
    @keyframes mmfadeIn   { from { opacity: 0; } to { opacity: 1; } }
    @keyframes mmfadeOut  { from { opacity: 1; } to { opacity: 0; } }
    @keyframes mmslideIn  { from { transform: translateY(16px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
    @keyframes mmslideOut { from { transform: translateY(0); opacity: 1; } to { transform: translateY(12px); opacity: 0; } }

}


/* Q_area */
@media screen and (max-width:780px) { /*SP*/
    .Q_area {
        display: block;
        width: 100%;
    }
}
@media screen and (min-width:781px) , print { /*PC&TB*/
    .Q_area {
        display: block;
        width: 100%;
    }
}

/* ------------------------------------------------ */
/* close ------------------------------------------ */
/* ------------------------------------------------ */
#Q_entry{
    position: relative;
    pointer-events: none;
}
@media screen and (max-width:780px) { /*SP*/
    #Q_entry::after{
        content: "コラボキャンペーンは\A終了しました";
        box-sizing: border-box;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        position: absolute;
        /* top: 0px; */
        top: 0.00vw;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.75);
        color: #fff;
        /* font-size: 20px; */
        font-size: 5.33vw;
        font-weight: bold;
        /* line-height: 30px; */
        line-height: 8.00vw;
        /* border-radius: 0px; */
        border-radius: 0.00vw;
        /* padding: 142px 0 0 0; */
        padding: 37.87vw 0 0 0;
        z-index: 3;
        white-space: pre-wrap;
    }
}
@media screen and (min-width:781px) , print { /*PC&TB*/
    #Q_entry::after{
        content: "コラボキャンペーンは\A終了しました";
        box-sizing: border-box;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        position: absolute;
        top: 0px;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.75);
        color: #fff;
        font-size: 20px;
        font-weight: bold;
        line-height: 2rem;
        border-radius: 0px;
        padding: 160px 0 0 0;
        z-index: 3;
        white-space: pre-wrap;
    }
}