@charset "UTF-8";

/* 3つ目の画像だけ中央配置 */
.qa_area .qa_bnr:nth-child(3) {
    justify-self: auto;
    /* 他で設定してたら初期化*/

}

.modal-2__wrap {
    width: 100%;
}

/* 比率管理 */
.outer {
    position: relative;
    width: 100%;
    max-width: 585px;
    aspect-ratio: 585 / 400;
    margin: 0 auto;
}

/* 背景専用 */
.frame {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.frame1 {
    background: url("../images/img_tap_bg1.png") no-repeat center / contain;
}

.frame2 {
    background: url("../images/img_tap_bg2.png") no-repeat center / contain;
}

.frame3 {
    background: url("../images/img_tap_bg3.png") no-repeat center / contain;
}

/* 中身をまとめて管理 */
.content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    z-index: 1;

    /* はみ出し防止のキモ */
    transform-origin: center;
}


@media screen and (max-width: 767px) {
    .content {
        gap: 5%;
    }
}

/* 共通 */
.box {
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    max-width: 100%;
}

/* サイズ比率 */
.box1 {
    width: 51.5%;
    aspect-ratio: 301 / 107.5;
    background-image: url("../images/img_tap1_1.png");
}

.box2 {
    width: 26.2%;
    aspect-ratio: 153 / 46;
    background-image: url("../images/img_tap0_2.png");
}

.box3 {
    width: 41.6%;
    aspect-ratio: 243.5 / 110;
    background-image: url("../images/img_tap1_3.png");
}

.box4 {
    width: 63.2%;
    aspect-ratio: 370 / 97;
    background-image: url("../images/img_tap2_1.png");
}

.box5 {
    width: 26.2%;
    aspect-ratio: 153 / 46;
    background-image: url("../images/img_tap0_2.png");
}

.box6 {
    width: 30.3%;
    aspect-ratio: 177 / 115;
    background-image: url("../images/img_tap2_3.png");
}

.box7 {
    width: 57.8%;
    aspect-ratio: 338 / 106;
    background-image: url("../images/img_tap3_1.png");
}

.box8 {
    width: 26.2%;
    aspect-ratio: 153 / 46;
    background-image: url("../images/img_tap0_2.png");
}

.box9 {
    width: 33.2%;
    aspect-ratio: 194 / 148;
    background-image: url("../images/img_tap3_3.png");
}


@keyframes katakata {
    0% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(-5deg);
    }

    50% {
        transform: rotate(5deg);
    }

    75% {
        transform: rotate(-5deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

.kata2 {
    animation: katakata 2.5s steps(1) infinite;
}