body {
    overflow: hidden;
    font-family: "Kiwi Maru", serif;
    font-weight: 400;
    font-style: normal;
    line-height: 1.4;

    /*さいしょだけ*/
    pointer-events: none;
}

#content {
    width: 100vw;
    height: 100vh;
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    /* はみ出た部分を隠す */
}

#content:before,
#content:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: 120%;
    animation: float-bg 3.5s infinite ease-in-out;
}

#content:before {
    background: url(../images/bg_01.png) center center no-repeat;
    background-size: 120%;
    background-position: center 43%;
}

#content:after {
    background: url(../images/bg_02.png) center center no-repeat;
    background-size: 120%;
    animation-delay: 1s;
    background-position: center 43%;
}

@keyframes float-bg {
    0% {
        background-position: center 43%;
    }

    50% {
        background-position: center 57%;
    }

    100% {
        background-position: center 43%;
    }
}

header {
    padding-top: 100px;
    display: flex;
    justify-content: center;
    width: 100%;
}

.wrap {
    position: relative;
    z-index: 10;
}

img.mv {
    display: block;
    margin: 50px auto 0 auto;
    width: 928px;
}

img.main_illust {
    display: block;
    margin: 50px auto 0 auto;
    width: 778px;
}

a.btn {
    display: block;
    width: 715px;
    margin: 0 auto;
    background: #f8b500;
    text-align: center;
    line-height: 1;
    padding: 60px 20px 70px 20px;
    border-radius: 100px;
    font-size: 67px;
}

a.btn:hover {
    background: #ffe100;
}

.main_img {
    display: flex;
    justify-content: center;
}



img.start_btn {
    width: 715px;
    margin: 20px 0 0 0;
}

.menu_head {
    text-align: center;
    font-size: 64px;
    margin: 0 0 80px 0;
}

ul.menu_list {
    display: flex;
    flex-direction: column;
    gap: 60px;
}

ul.answer_list {
    display: flex;
    flex-direction: column;
    gap: 50px;
}

ul.answer_list button {
    display: block;
    width: 715px;
    margin: 0 auto;
    background: #f8b500;
    text-align: center;
    line-height: 1;
    padding: 60px 20px 70px 20px;
    border-radius: 100px;
    font-size: 67px;
}

ul.answer_list button:hover {
    background: #ffe100;
}

p.question_txt {
    text-align: center;
    font-size: 64px;
    margin: 0 0 80px 0;
}

ul.circle_list {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin: 60px 0 70px 0;
}

ul.circle_list li {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #cccccc;
}

ul.circle_list li.active {
    background: #FCA400;
}

.gas-choice01 {
    width: 715px;
    display: block;
    margin: 0 auto;
}

.gas-choice01-1 {
    margin-bottom: 60px;
}

ul.back_list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin-top: 60px;
}

ul.back_list li a {
    width: 452px;
}

img.osusume_txt {
    width: 676px;
    margin: 0 0 50px 0;
}

p.osusume_body {
    text-align: center;
    font-size: 64px;
    margin: 0 0 50px 0;
}

.main_img__answer img {
    max-width: 780px;
    margin: 0 0 30px 0;
}

.main_img__q {
    height: 640px;
}

.main_img__q__short {
    height: 540px;
}

.fade_body {
    opacity: 0;
    animation: fadeIn 1.4s forwards;
    animation-delay: 0.4s;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.fade_body__slow {
    opacity: 0;
    animation: fadeInSlow 3s forwards;
    animation-delay: 2s;
}

@keyframes fadeInSlow {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}



ul.answer_list__result {
    gap: 30px;
}

ul.answer_list__result li {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 25px;
}

ul.answer_list__result li img.logo {
    width: 252px;
}

ul.answer_list__result li button {
    font-size: 42px;
    max-width: 650px;
    margin: 0;
    padding: 45px 10px 55px 10px;
    line-height: 1.4;
}


/*モーダル*/
.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.8);
    animation: fadeIn 1s forwards;
}

.modal-content {
    background-color: #fff;
    margin: auto auto;
    border: 1px solid #888;
    width: 780px;
    animation: fadeIn 1s forwards;
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.modal-content p.common_txt {
    font-size: 45px;
    margin: 100px 0 140px 0;
}

.modal-content img.logo {
    max-width: 420px;
    display: block;
    margin: 0 auto 60px auto;
}

.modal-content p.product_txt {
    font-size: 70px;
    margin: 0 0 60px 0;
}

.modal-content p.product_txt__small {
    font-size: 45px;
}

.modal-content img.qr_code {
    max-width: 350px;
    display: block;
    margin: 0 auto 100px auto;
}

.modal-content span.close {
    position: absolute;
    top: 0;
    right: 0;
    width: 150px;
    transform: translate(50%, -50%);
}

.modal-content span.close img {
    width: 150px;
}


/*ガスコンロ*/
img.gas-02_01 {
    width: 637px;
    margin: 0 0 60px 0;
}

img.gas-03_01 {
    width: 750px;
    margin: 0 0 10px 0;
}

img.gas-04_01 {
    width: 723px;
    margin: 0 0 50px 0;
}

img.gas-05_01 {
    width: 723px;
}

img.gas-05_02 {
    width: 932px;
}

img.gas-05_03 {
    width: 788px;
    margin: 0 0 30px 0;
}





.test {
    width: 100%;
    height: auto;
}