@charset "utf-8";
html,body,div,span,iframe,h1,h2,h3,h4,h5,h6,p,img,small,strong,b,dl,dt,dd,ol,ul,li,
form,label,legend,table,tbody,tfoot,thead,tr,th,td,footer,header,menu,nav,section,video {
    margin:0; padding:0; border:0; outline:0; vertical-align:bottom; background:transparent;
}
body { line-height:1; -webkit-text-size-adjust: 100%;}
ul li { list-style:none;}
a { margin:0; padding:0; color: #666; text-decoration: none; vertical-align:baseline;}
a:hover { opacity: 0.7;}
table { border-spacing:0;}
/* ===================================================================================
  resetここまで
=================================================================================== */
#wrap {
    max-width: 750px;
    margin: 0 auto;
    box-shadow: 0 1px 20px rgba(0,0,0,.3);
}
.inst_sub { display: none;}
.inst_btn_area { position: relative;}
.inst_btn_area .inst_btn {
    width: 450px;
    margin: 0 auto;
    position: absolute;
    top: 16px;
    left: 0;
    right: 0;
    cursor: pointer;
}
.inst_btn_area .inst_btn::before {
    content: "";
    width: 30px;
    height: 30px;
    position: absolute;
    top: 25px;
    right: 70px;
    transition: all 0.3s ease-out;
}
.inst_btn_area .inst_btn.open::before { transform: rotate(180deg);}

.video_box,
.offer_area { position: relative;}
.video_box .video { position: absolute;}
.video_box .video01 {
    width: 580px;
    margin: 0 auto;
    top: 105px;
    left: 0;
    right: 0;
}
.video_box .video02 {
    width: 704px;
    top: 45px;
    left: 0;
}

/* 
=================
 オファーボタン位置
================= */
.offer_area .btn {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 75px;
}

.offer_area .btn2 {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 320px;
}

.offer_area .fv {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0px;
}

.qa_area {
    background: #FBE0DA;
    padding-bottom: 50px;
}
.qa_area .qa {
    width: 690px;
    margin: 0 auto 40px;
}
.qa_area .qa .qa_q { position: relative;}
.qa_area .qa .qa_q::before {
    content: "";
    display: block;
    width: 32px;
    height: 32px;
    margin-top: -16px;
    background: url("../img/qa_arrow.png")no-repeat center/100%;
    position: absolute;
    top: 50%;
    right: 24px;
    transform: rotate(180deg);
    transition: all 0.3s ease-out;
}
.qa_area .qa .qa_q.open::before { transform: rotate(0deg);}
.qa_area .qa .qa_a { display: none;}


.foot_link {
    display: flex;
    justify-content: center;
}
.foot_link li:first-child { border-right: solid 1px #666;}
.foot_link li a {
    display: block;
    color: #666;
    font-size: 26px;
    line-height: 25px;
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    padding: 0 25px;
}

@media screen and ( max-width: 750px) {
    img,video { width: 100%;}

    #loader {
        width: 53.3vw;
        height: 26.7vw;
        margin-top: -13.3vw;
        margin-left: -26.7vw;
    }
    #loader img { width: 10.7vw; height: 10.7vw;}
    #loader p { margin-top: 2vw}

    .fv video {
        width: 100vw;
        height: 146.7vw;
    }

    .inst_btn_area .inst_btn {
        width: 60vw;
        top: 2.1vw;
    }
    .inst_btn_area .inst_btn::before {
        width: 4vw;
        height: 4vw;
        top: 3.3vw;
        right: 9.3vw;
    }

    .offer_area .btn { bottom: 11vw;}
    .offer_area .btn2 { bottom: 42vw;}

    .video_box .video01 {
        width: 77.3vw;
        top: 14vw;
    }
    .video_box .video02 {
        width: 93.9vw;
        top: 6vw;
    }

    .qa_area { padding-bottom: 6.7vw;}
    .qa_area .qa {
        width: 92vw;
        margin: 0 auto 5.3vw;
    }
    .qa_area .qa .qa_q::before {
        width: 4.3vw;
        height: 4.3vw;
        margin-top: -2.1vw;
        right: 3.2vw;
    }
    .foot_link li a {
        font-size: 3.5vw;
        line-height: 3.3vw;
        padding: 0 3.3vw;
    }
}