.wrap {
    display: block;
    max-width: 768px;
    min-width: 375px;
    margin: 0 auto;
    overflow: hidden;
}

img {
    display: block;
    width: 100%;
    height: 100%;
}

/* BAコンテンツ */
.ba {
    position: relative;
    margin-top: -10%;
    z-index: -1;
}

/* ユーザーボイスコンテンツ */
.userVoice {
    position: relative;
    margin-top: -12%;
}

.userVoice .user_slider {
    position: absolute;
    top: 42.5%;
    left: 0;
    width: 100%;
    z-index: 1000;
}

/* CTA */
.CTA {
    position: relative;
}

.CTA .CTA-wrap {
    width: 100%;
    margin-top: -28%;
    padding-bottom: 5%;
    background: #f3f3f3;
}

.CTA-wrap .swiper-button-next,
.CTA-wrap .swiper-button-prev {
    top: 55%;
    width: 7.5%;
    z-index: 1001;
}

.slider-box {
    position: relative;
}

.slider-box .slider-box-btn {
    position: absolute;
    width: 90%;
    bottom: 6%;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 1001;
    animation: btnAnime 3s ease-in-out infinite;
}


@keyframes btnAnime {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    50% {
        -webkit-transform: scale(.9);
        transform: scale(.9);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

.top-tab-menu,
.bottom-tab-menu {
    position: relative;
}

.tab-menu-head {
    position: absolute;
    top: 27.75%;
    left: 4.75%;
    width: 6%;
    z-index: 1000;
}

.top-tab-menu .swiper-wrapper,
.bottom-tab-menu .swiper-wrapper {
    margin-left: 10%;
}

.tab-menu-btn01,
.tab-menu-btn02,
.tab-menu-btn03,
.tab-menu-btn04 {
    cursor: pointer;
}

.tab-menu-btn01 {
    width: 25.17% !important;
    margin-left: -1.5%;
}

.tab-menu-btn02 {
    width: 21.5% !important;
    margin: 5.5% 0 0 -1.5%;
}

.tab-menu-btn03 {
    width: 21.5% !important;
    margin-top: 5.5%;
}

.tab-menu-btn04 {
    width: 20.75% !important;
    margin-top: 5.5%;
}

/* slideボタン */
.swiper-button-next, .swiper-button-prev {
    top: 70%;
    width: 7.5%;
    z-index: 1001;
}

.swiper-button-prev::after,
.swiper-button-next::after {
    content: "";
    width: 100%;
    height: 100%;
    margin: auto;
    font-size: 0;
    background: url(../images/arrow.png) center center/100% no-repeat;
}

.swiper-button-next::after {
    transform: rotateY(-180deg);
}

.swiper-pagination-bullets.swiper-pagination-horizontal {
    bottom: 5%;
}

.swiper-pagination-bullet {
    width: 15px;
    height: 15px;
}

.swiper-pagination-bullet-active {
    background: #dadada;
}
.top-tab-menu .swiper-slide-visible,
.bottom-tab-menu .swiper-slide-visible {
    opacity: .3;
}

.top-tab-menu .swiper-slide-thumb-active,
.bottom-tab-menu .swiper-slide-thumb-active {
    opacity: 1;
}

/* 独自設計 */
.dokuji {
    position: relative;
}

.dokuji_mv {
    position: absolute;
    top: 47.5%;
    left: 50%;
    width: 80%;
    transform: translateX(-50%);
    border-radius: 0 20px 0 20px;
    z-index: 1000;
}

/* FAQ */
.faq-wrap {
    margin-top: -25%;
}

.faq-box {
    padding: 0 20px;
    margin-bottom: 5%;
    box-sizing: border-box;
}

.faq-box:last-child {
    padding: 0 20px;
}

.faq-box dt {
    position: relative;
    cursor: pointer;
}

.faq-box dt::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 10px;
    width: 0;
    height: 0;
    display: block;
    border-style: solid;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
    border-top: 15px solid #fff;
    border-bottom: 0;
    z-index: 1000;
    transform: translateY(-50%);
    transition: all .3s ease-in-out;
}

.faq-box dt.open::before {
    transform: rotate(-180deg);
    top: 40.5%;
}

.faq-box dd {
    position: relative;
    display: none;
}

.faq-box dd .answer-link {
    position: absolute;
    top: 30%;
    left: 32.5%;
    width: 32.5%;
    z-index: 1000;
}

@media screen and (max-width: 500px) {
    .faq-box dt::before {
        border-right: 7.5px solid transparent;
        border-left: 7.5px solid transparent;
        border-top: 10px solid #fff;
    }
}

/* flowボタン */
.flow-wrap {
    position: fixed;
    bottom: 10px;
    right: 0;
    display: none;
    width: 30%;
    max-width: 300px;
    min-width: 150px;
    z-index: 1002;
}

.flow-wrap .flow-btn {
    display: block;
    width: 100%;
    margin: 0 0 0 auto;
    animation: btnAnime 3s ease-in-out infinite;
}