/* ------ common ------ */
* {
    margin: 0;
    padding: 0;
}
img {
    max-width: 100%;
    display: block;
    vertical-align: top;
}
.main {
    width: 640px;
    margin: auto;
}
.relative {
    position: relative;
}
.absolute {
    position: absolute;
    z-index: 2;
}
/*置中*/
.center {
    left: 50%;
    transform: translate(-50%);
}
a {
    display: block;
    transition: all 0.2s ease-in-out;
}
a:hover {
    opacity: 0.8;
}


/* ------ offer ------ */
.btn_offer {
    width: 100%;
    padding: 4% 0 8%;
}
.btn_info {
    display: block;
    width: 10%;
    height: 2em;
    top: 78.2%;
    left: 44.5%;
    border-bottom: 2px solid transparent;
}
.btn_info:hover {
    background: rgba(255, 255, 255, 0.6);
    border-bottom: 2px solid rgba(0, 0, 0, 0.6);
}


/* ------ area ------ */
.movie_box {
    top: 35%;
    width: 90%;
    height: 364px;
}

.qa {
    padding: 28% 0 0;
}
.qa_title {
    left: 0;
    top: 6%;
}


/* ------ slick slider ------ */
.slick-slide img {
    margin: auto;
}
.slick-prev, .slick-next {
    z-index: 99;
    width: 40px;
    height: 40px;
}
.slick-prev:before, .slick-next:before {
    content: '';
    font-size: unset;
}
.slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus {
    background: inherit;
    opacity: 0.8;
}
.slick-prev {
    left: 0%;
}
.slick-next {
    right: 0%;
}
.slick-dotted.slick-slider {
    margin-bottom: 8%;
    padding-bottom: 8%;
}
.slick-dots {
    bottom: 0;
}
.slick-dots li button:before {
    font-size: 20px;
    opacity: 1;
    color: #898989;
}
.slick-dots li button:hover:before, .slick-dots li button:focus:before {
    opacity: 0.8;
}
.slick-dots li.slick-active button:before {
    color: #880f0e;
}


@media screen and (max-width: 641px) {
    .main {width: 100%;}
    .slick-prev, .slick-next {
        width: 8vw;
        height: 8vw;
    }
    .slick-slide img {
        width: 94vw;
    }
    .movie_box {
        height: 60vmin;
    }
}