@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: 940px; */
        top: 250.67vw;
        left: 50%;
        transform: translateX(-50%);
        /* width: 148px; */
        width: 39.47vw;
    }
    .Q_top_07{
        position: absolute;
        /* top: 1075px; */
        top: 286.67vw;
        left: 50%;
        transform: translateX(-50%);
        /* width: 315px; */
        width: 84.00vw;
    }
    .Q_contact{
        position: absolute;
        /* top: 1150px; */
        top: 306.67vw;
        left: 50%;
        transform: translateX(-50%);
        color: #fff;
        /* font-size: 14px; */
        font-size: 3.73vw;
        text-decoration: none;
        white-space: nowrap;
    }
}
@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: 940px;
        left: 50%;
        transform: translateX(-50%);
        width: 148px;
    }
    .Q_top_07{
        position: absolute;
        top: 1075px;
        left: 50%;
        transform: translateX(-50%);
        width: 315px;
    }
    .Q_contact{
        position: absolute;
        top: 1150px;
        left: 50%;
        transform: translateX(-50%);
        color: #fff;
        font-size: 15px;
        text-decoration: none;
        white-space: nowrap;
    }
}


/* 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: 100%;
        background-position: center;
        background-repeat: repeat-y;
        /* aspect-ratio: 1500 / 2668;  */
        /* --- */
        display: none;
        opacity: 0;
    }
    /* 内側4方の罫線（試し・12px内側）：縦(左右)=solid/グラデ無、横(上下)=グラデ ・色は仮 */
    #Q_main::before{ /* 縦（左右）solid */
        content: "";
        position: absolute;
        /* inset: 6px; */
        inset: 1.60vw;
        border-left: 2px solid #B98C26;   /* 太さは2px固定 */
        border-right: 2px solid #B98C26;
        z-index: 2;
        pointer-events: none;
    }
    #Q_main::after{ /* 横（上下）グラデ */
        content: "";
        position: absolute;
        /* inset: 6px; */
        inset: 1.60vw;
        background:
            linear-gradient(90deg, #B98C26, #F0D66A, #B98C26) top    / 100% 2px no-repeat,
            linear-gradient(90deg, #B98C26, #F0D66A, #B98C26) bottom / 100% 2px no-repeat;
        z-index: 2;
        pointer-events: none;
    }
    .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: 20px 0 0 0; */
        margin: 5.33vw 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: 16px; */
        font-size: 4.27vw;
        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_question .q_note{
        /* font-size: 12px; */
        font-size: 3.20vw;
    }
    /* ----------- */
    .Q_main_imgBox{
        display: flex; flex-direction: column; justify-content: center; align-items: center;
        width: 100%;
        margin: 0 0 0 0;
    }
    .Q_main_img{
        width: 62%;
    }
    /* ----------- */
    .Q_main_timerWrap{
        display: grid;
        grid-template-columns: 1fr auto 1fr;   /* 中央=timerBoxが画面センター（桁変化でも不動）／両サイド均等 */
        align-items: center;
        width: 100%;
        /* column-gap: 8px; */
        column-gap: 2.13vw;
        margin: 0px 0 0 0;
    }
    .Q_main_timerBox{
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
        /* width: 40px; */
        width: 10.67vw;
        /* height: 50px; */
        height: 13.33vw;
        /* padding: 4px 0 0 0; */
        padding: 1.07vw 0 0 0;
        /* font-size: 24px; */
        font-size: 6.40vw;
        font-weight: bold;
        color: #ffe791;
        overflow: hidden;   /* 数字送りアニメ用 */
    }
    .Q_main_timerText1{
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-end;   /* boxの左に寄せる */
        align-items: center;
        justify-self: end;
        /* font-size: 12px; */
        font-size: 3.20vw;
        font-weight: bold;
        color: #ffe791;
    }
    .Q_main_timerText2{
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;   /* boxの右に寄せる */
        align-items: center;
        justify-self: start;
        /* font-size: 12px; */
        font-size: 3.20vw;
        font-weight: bold;
        color: #ffe791;
    }
    /* ----------- */
    .Q_main_answerBox{
        display: flex; flex-wrap: nowrap; justify-content: center; align-items: center;
        width: 100%;
        margin: 0px 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: 76px; */  /* 画像Q_main_BT_normal(295×150)比 */
        height: 20.34vw;
        /* font-size: 14px; */
        font-size: 3.73vw;
        /* line-height: 22px; */
        line-height: 5.87vw;
        font-weight: bold;
        color: #fff;
        text-decoration: none;
        text-align: center;
        /* filter: drop-shadow(0 4px 6px rgba(0,0,0,.4)); */
        filter: drop-shadow(0 1.07vw 1.60vw rgba(0,0,0,.4));
    }
    .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: 76px; */  /* 画像Q_main_BT_enter(620×150)比 */
        height: 20.32vw;
        /* font-size: 16px; */
        font-size: 4.27vw;
        font-weight: bold;
        color: #fff;
        text-decoration: none;
        /* filter: drop-shadow(0 4px 6px rgba(0,0,0,.4)); */
        filter: drop-shadow(0 1.07vw 1.60vw rgba(0,0,0,.4));
    }
    /* 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: 100%;
        background-position: center;
        background-repeat: repeat-y;
        /* aspect-ratio: 1500 / 2668;  */
        /* --- */
        display: none;
        opacity: 0;
    }
    /* 内側4方の罫線（試し・12px内側）：縦(左右)=solid/グラデ無、横(上下)=グラデ ・色は仮 */
    #Q_main::before{ /* 縦（左右）solid */
        content: "";
        position: absolute;
        inset: 6px;
        border-left: 2px solid #B98C26;
        border-right: 2px solid #B98C26;
        z-index: 2;
        pointer-events: none;
    }
    #Q_main::after{ /* 横（上下）グラデ */
        content: "";
        position: absolute;
        inset: 6px;
        background:
            linear-gradient(90deg, #B98C26, #F0D66A, #B98C26) top    / 100% 2px no-repeat,
            linear-gradient(90deg, #B98C26, #F0D66A, #B98C26) bottom / 100% 2px no-repeat;
        z-index: 2;
        pointer-events: none;
    }
    .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: 20px 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: 16px;
        font-weight: bold;
        color: #fff;
        margin: 10px 0 0 0;
        padding: 0 10px 0 20px;
    }
    .Q_main_question .q_note{
        font-size: 12px;
    }
    /* ----------- */
    .Q_main_imgBox{
        display: flex; flex-direction: column; justify-content: center; align-items: center;
        width: 100%;
        margin: 0 0 0 0;
    }
    .Q_main_img{
        width: 62%;
    }
    /* ----------- */
    .Q_main_timerWrap{
        display: grid;
        grid-template-columns: 1fr auto 1fr;   /* 中央=timerBoxが画面センター（桁変化でも不動）／両サイド均等 */
        align-items: center;
        width: 100%;
        column-gap: 8px;
        margin: 0px 0 0 0;
    }
    .Q_main_timerBox{
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
        width: 40px;
        height: 50px;
        padding: 4px 0 0 0;
        font-size: 24px;
        font-weight: bold;
        color: #ffe791;
        overflow: hidden;   /* 数字送りアニメ用 */
    }
    .Q_main_timerText1{
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-end;   /* boxの左に寄せる */
        align-items: center;
        justify-self: end;
        font-size: 12px;
        font-weight: bold;
        color: #ffe791;
    }
    .Q_main_timerText2{
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;   /* boxの右に寄せる */
        align-items: center;
        justify-self: start;
        font-size: 12px;
        font-weight: bold;
        color: #ffe791;
    }
    /* ----------- */
    .Q_main_answerBox{
        display: flex; flex-wrap: nowrap; justify-content: center; align-items: center;
        width: 100%;
        margin: 0px 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: 76px;  /* 画像Q_main_BT_normal(295×150)比 */
        font-size: 14px;
        line-height: 22px;
        font-weight: bold;
        color: #fff;
        text-decoration: none;
        text-align: center;
        filter: drop-shadow(0 4px 6px rgba(0,0,0,.4));
    }
    .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: 76px;  /* 画像Q_main_BT_enter(620×150)比 */
        font-size: 16px;
        font-weight: bold;
        color: #fff;
        text-decoration: none;
        filter: drop-shadow(0 4px 6px rgba(0,0,0,.4));
    }

    /* 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: 100%;
        background-position: center;
        background-repeat: repeat-y;
        /* padding: 50px 0; */
        padding: 13.33vw 0;
        /* --- */
        display: none;
        opacity: 0;
    }
    /* Q_mainと同じ罫線（内側6px・縦solid/横グラデ・2px・#B98C26） */
    #Q_result_allCorrect::before{
        content: "";
        position: absolute;
        /* inset: 6px; */
        inset: 1.60vw;
        border-left: 2px solid #B98C26;
        border-right: 2px solid #B98C26;
        z-index: 2;
        pointer-events: none;
    }
    #Q_result_allCorrect::after{
        content: "";
        position: absolute;
        /* inset: 6px; */
        inset: 1.60vw;
        background:
            linear-gradient(90deg, #B98C26, #F0D66A, #B98C26) top    / 100% 2px no-repeat,
            linear-gradient(90deg, #B98C26, #F0D66A, #B98C26) bottom / 100% 2px no-repeat;
        z-index: 2;
        pointer-events: none;
    }
    .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;
        -webkit-appearance: none; appearance: none; border: 0; background-color: transparent; cursor: pointer;   /* ネイティブbuttonの白背景/枠をリセット */
        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: 100%;
        background-position: center;
        background-repeat: repeat-y;
        padding: 50px 0;
        /* --- */
        display: none;
        opacity: 0;
    }
    /* Q_mainと同じ罫線（内側6px・縦solid/横グラデ・2px・#B98C26） */
    #Q_result_allCorrect::before{
        content: "";
        position: absolute;
        inset: 6px;
        border-left: 2px solid #B98C26;
        border-right: 2px solid #B98C26;
        z-index: 2;
        pointer-events: none;
    }
    #Q_result_allCorrect::after{
        content: "";
        position: absolute;
        inset: 6px;
        background:
            linear-gradient(90deg, #B98C26, #F0D66A, #B98C26) top    / 100% 2px no-repeat,
            linear-gradient(90deg, #B98C26, #F0D66A, #B98C26) bottom / 100% 2px no-repeat;
        z-index: 2;
        pointer-events: none;
    }
    .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;
        -webkit-appearance: none; appearance: none; border: 0; background-color: transparent; cursor: pointer;   /* ネイティブbuttonの白背景/枠をリセット */
        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: flex-start; align-items: center;
        /* width: 375px; */
        width: 100.00vw;
        height: 100vh;
        background-color: #000;
        color: #fff;
        background-image: url("../img/Q_main_bg.webp");
        background-size: 100%;
        background-position: center;
        background-repeat: repeat-y;
        /* padding: 50px 0; */
        padding: 13.33vw 0;
        /* --- */
        display: none;
        opacity: 0;
    }
    /* Q_mainと同じ罫線（内側6px・縦solid/横グラデ・2px・#B98C26） */
    #Q_result_inCorrect::before{
        content: "";
        position: absolute;
        /* inset: 6px; */
        inset: 1.60vw;
        border-left: 2px solid #B98C26;
        border-right: 2px solid #B98C26;
        z-index: 2;
        pointer-events: none;
    }
    #Q_result_inCorrect::after{
        content: "";
        position: absolute;
        /* inset: 6px; */
        inset: 1.60vw;
        background:
            linear-gradient(90deg, #B98C26, #F0D66A, #B98C26) top    / 100% 2px no-repeat,
            linear-gradient(90deg, #B98C26, #F0D66A, #B98C26) bottom / 100% 2px no-repeat;
        z-index: 2;
        pointer-events: none;
    }
    .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: flex-start; align-items: center;
        width: 375px;
        height: 100vh;
        background-color: #000;
        color: #fff;
        background-image: url("../img/Q_main_bg.webp");
        background-size: 100%;
        background-position: center;
        background-repeat: repeat-y;
        padding: 50px 0;
        /* --- */
        display: none;
        opacity: 0;
    }
    /* Q_mainと同じ罫線（内側6px・縦solid/横グラデ・2px・#B98C26） */
    #Q_result_inCorrect::before{
        content: "";
        position: absolute;
        inset: 6px;
        border-left: 2px solid #B98C26;
        border-right: 2px solid #B98C26;
        z-index: 2;
        pointer-events: none;
    }
    #Q_result_inCorrect::after{
        content: "";
        position: absolute;
        inset: 6px;
        background:
            linear-gradient(90deg, #B98C26, #F0D66A, #B98C26) top    / 100% 2px no-repeat,
            linear-gradient(90deg, #B98C26, #F0D66A, #B98C26) bottom / 100% 2px no-repeat;
        z-index: 2;
        pointer-events: none;
    }
    .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: 580px; */
        top: 154.67vw;
        left: 0;
        /* padding: 0 60px; */
        padding: 0 16.00vw;
        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_quiz_textBox p{
        /* letter-spacing: 2px; */
        letter-spacing: 0.53vw;
        /* margin: 0 0 15px 0; */
        margin: 0 0 4.00vw 0;
        /* font-size: 12px; */
        font-size: 3.20vw;
    }
    .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: 260px; */
        top: 69.33vw;
        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;
        /* filter: drop-shadow(0 4px 6px rgba(0,0,0,.4)); */
        filter: drop-shadow(0 1.07vw 1.60vw rgba(0,0,0,.4));
    }
    .Q_quiz_03{
        /* width: 147px; */
        width: 39.20vw;
        /* filter: drop-shadow(0 4px 6px rgba(0,0,0,.4)); */
        filter: drop-shadow(0 1.07vw 1.60vw rgba(0,0,0,.4));
    }
    /* ----------- */
    .Q_back{
        position: absolute;
        /* bottom: 50px; */
        bottom: 13.33vw;
        left: 50%;
        transform: translateX(-50%);
        /* width: 315px; */
        width: 84.00vw;
    }
    /* modal-no（Q_quiz_03から開く）: 画像Q_no ＋ ×ボタンQ_close ・位置/サイズは仮 */
    .Q_no{
        display: block;
        margin: 0 auto;
        /* width: 670px相当 */
        width: 89.33vw;   /* 仮 */
    }
    .Q_close{
        position: absolute;
        /* Q_no画像枠(.Q_modal_position)の外・右上（PCと同位置） */
        /* bottom: calc(100% + 20px); */
        bottom: calc(100% + 5.33vw);
        right: 0;
        /* width: 30px; */
        width: 8.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;
    }
    /* modal-no は中身が短くスクロール不要 → 枠外のQ_close(×)がクリップされないよう visible */
    #modal-no .modal__container { overflow: visible; }
    /* キーフレーム */
    @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: 580px;
        left: 0;
        padding: 0 60px;
        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_quiz_textBox p{
        letter-spacing: 2px;
        margin: 0 0 15px 0;
        font-size: 12px;
    }
    .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: 266px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
        gap: 20px;
    }
    .Q_quiz_02{
        width: 147px;
        filter: drop-shadow(0 4px 6px rgba(0,0,0,.4));
    }
    .Q_quiz_03{
        width: 147px;
        filter: drop-shadow(0 4px 6px rgba(0,0,0,.4));
    }
    /* ----------- */
    .Q_back{
        position: absolute;
        bottom: 50px;
        left: 50%;
        transform: translateX(-50%);
        width: 315px;
    }
    /* modal-no（Q_quiz_03から開く）: 画像Q_no ＋ ×ボタンQ_close ・位置/サイズは仮 */
    .Q_no{
        display: block;
        margin: 0 auto;
        width: 335px;   /* 仮：670/2 */
    }
    .Q_close{
        position: absolute;
        /* Q_no画像枠(.Q_modal_position)の外・右上 */
        bottom: calc(100% + 20px);
        right: 0px;
        width: 30px;
        cursor: pointer;   /* PC：通常リンクと同じポインタ（hrefなしa対策） */
    }
    /* ----------- */
    /* 表示制御（既存で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;
    }
    /* modal-no は中身が短くスクロール不要 → 枠外のQ_close(×)がクリップされないよう visible */
    #modal-no .modal__container { overflow: visible; }

    /* キーフレーム */
    @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%;
    }
}