@charset "utf-8";

/* CSS INFORMATION -====================================================
File name : previously.css
Description :
===================================================================== */

@media screen and (min-width: 768px) {
    
    .sec_ttl img {
            width: calc(473 / 1000 * 100%);
            margin: 0 auto;
        }
    .sub_wrap {
        padding-bottom: calc(145 / 1100 * 100%);
    }
    
    .previously::before,
    .previously::after,
    .previously .inner::after {
        content: "";
        display: block;
        width: calc(186 / 1100 * 100%);
        padding-top: calc(123 / 1100 * 100%);
        background: url(../images/common/bg_ring1.png) no-repeat left top;
        background-size: 100% auto;
        position: absolute;
        top: 0;
        left: 50%;
        margin: calc(637 / 1100 * 100%) 0 0 calc(461 / 1100 * 100%);
    }
    
    .previously::after {
        width: calc(189 / 1100 * 100%);
        padding-top: calc(126 / 1100 * 100%);
        background: url(../images/common/bg_ring2.png) no-repeat left top;
        background-size: 100% auto;
        margin: calc(1239 / 1100 * 100%) 0 0 calc(-647 / 1100 * 100%);
    }
    
    .previously .inner::after {
        width: calc(165 / 1100 * 100%);
        padding-top: calc(125 / 1100 * 100%);
        background: url(../images/common/bg_ring3.png) no-repeat left top;
        background-size: 100% auto;
        left: auto;
        right: 0;
        margin: calc(1862 / 1100 * 100%) calc(-56 / 1100 * 100%) 0 0;
    }
    
}

@media screen and (min-width: 1100px) {
    .sub_wrap {
        padding-bottom: 145px;
    }
    
    .previously::before {
        width: 186px;
        padding-top: 123px;
        margin: 637px 0 0 461px;
    }
    
    .previously::after {
        width: 189px;
        padding-top: 126px;
        margin: 1239px 0 0 -647px;
    }
    
}

/* =====================================================================
*    previously
* =================================================================== */
.bc_movie iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.previously {
    margin: 0 0 calc(150 / 750 * 100%);
}
.previously .sec_contents {
    width: calc(670 / 750 * 100%);
    margin: 0 auto;
    -webkit-box-shadow: 0 0 calc(10 / 750 * 100vw) rgba(0,0,0,0.1);
    box-shadow: 0 0 calc(10 / 750 * 100vw) rgba(0,0,0,0.1);
    z-index: 2;
}

.previously_box {
    background: linear-gradient(135deg, rgb(255, 252, 242) 0%, rgb(255, 250, 233) 30%, rgb(255, 250, 233) 100%);
}

.previously_box_wrap {
    padding: calc(110 / 670 * 100%) 0 calc(130 / 670 * 100%);
}

.previously_box::before,
.previously_box::after,
.previously_box_wrap::before,
.previously_box_wrap::after {
    content: "";
    display: block;
    width: calc(90 / 670 * 100%);
    padding-top: calc(90 / 670 * 100%);
    background: url(../images/common/bg_corner1.png) no-repeat center center;
    background-size: calc(80 / 90 * 100%) auto;
    position: absolute;
    top: 0;
    left: 0;
    margin: calc(15 / 670 * 100%) 0 0 calc(15 / 670 * 100%);
}

.previously_box::after {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    left: auto;
    right: 0;
    margin: calc(15 / 670 * 100%) calc(15 / 670 * 100%) 0 0;
}

.previously_box_wrap::before {
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
    top: auto;
    bottom: 0;
    margin: 0 0 calc(15 / 670 * 100%) calc(15 / 670 * 100%);
}

.previously_box_wrap::after {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    top: auto;
    bottom: 0;
    left: auto;
    right: 0;
    margin: 0 calc(15 / 670 * 100%) calc(15 / 670 * 100%) 0;
}

.previously_ttl {
    width: calc(540 / 670 * 100%);
    color: #ab9230;
    font-size: 6rem;
    font-family: "Noto Serif JP", 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", HGS明朝E, メイリオ, Meiryo, serif;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    letter-spacing: 0.05em;
    padding: 0 0 calc(30 / 670 * 100%);
    margin:0 auto;
}

.previously_movie {
    width: calc(540 / 670 * 100%);
    margin: 0 auto ;
    padding: calc(40 / 670 * 100%) 0 calc(50 / 670 * 100%);
    background: url(../images/common/line_yellow.png) repeat-x left top, url(../images/common/line_yellow.png) repeat-x left bottom;
    background-size: calc(10 / 540 * 100%) auto;
}

.previously_movie_photo {
    padding: calc(8 / 540 * 100%);
    background-color: #c9244f;
}

.previously_movie_btn::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: url(../images/top/btn_next_movie.png) no-repeat center center;
    background-size: calc(98 / 524 * 100%) auto;
    position: absolute;
    top: 0;
    left: 0;
}

@media screen and (min-width: 768px) {
    .previously {
        margin: 0 0 calc(130 / 1100 * 100%);
    }
    
    .previously .sec_contents {
        width: 100%;
        -webkit-box-shadow: 0 0 calc(10 / 1100 * 100vw) rgba(0,0,0,0.1);
        box-shadow: 0 0 calc(10 / 1100 * 100vw) rgba(0,0,0,0.1);
    }
    
    .previously_box {
        background: linear-gradient(135deg, rgb(255, 255, 255) 0%, rgb(255, 250, 233) 50%, rgb(255, 250, 233) 100%);
    }
    
    .previously_box::before,
    .previously_box::after,
    .previously_box_wrap::before,
    .previously_box_wrap::after {
        width: calc(48 / 1000 * 100%);
        padding-top: calc(48 / 1000 * 100%);
        background-size: 100% auto;
        margin: calc(10 / 1000 * 100%) 0 0 calc(10 / 1000 * 100%);
    }
    
    .previously_box::after {
        margin: calc(10 / 1000 * 100%) calc(10 / 1000 * 100%) 0 0;
    }
    
    .previously_box_wrap::before {
        margin: 0 0 calc(10 / 1000 * 100%) calc(10 / 1000 * 100%);
    }
    
    .previously_box_wrap::after {
        margin: 0 calc(10 / 1000 * 100%) calc(10 / 1000 * 100%) 0;
    }
    
    .previously_box_wrap {
        padding: calc(80 / 1000 * 100%) 0;
    }
    
    .previously_ttl {
        font-size: 4rem;
        width: calc(798 / 1000 * 100%);
        margin: 0 auto ;
        padding: 0 0 calc(20 / 1000 * 100%);
    }
    .previously_movie {
        width: calc(630 / 1000 * 100%);
        margin: 0 auto ;
        padding: calc(30 / 1000 * 100%) 0 calc(35 / 1000 * 100%);
        background-size: calc(5 / 630 * 100%) auto;
    }
    
    .previously_movie_photo {
        padding: calc(4 / 630 * 100%);
    }
    
    .previously_movie_btn::after {
        background-size: calc(88 / 622 * 100%) auto;
        -webkit-transition: 0.3s ease;
        transition: 0.3s ease;
    }
    
    .previously_movie_btn:hover::after {
        -webkit-transform: scale(1.23);
        transform: scale(1.23);
    }
    
}

@media screen and (min-width: 1100px) {
    .previously {
        margin: 0 0 130px;
    }
    
    .previously .sec_contents {
        -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.1);
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }
    
}


/* =====================================================================
*    backnumber
* =================================================================== */
.backnumber_box {
    padding: calc(130 / 670 * 100%) 0 calc(80 / 670 * 100%);
    background: url(../images/common/bg_cross1.png) repeat left top;
    background-size: calc(64 / 670 * 100%) auto;
}

.bucknumber_list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: calc(620 / 670 * 100%);
    margin: 0 auto;
}

.bucknumber_list li {
    width: calc(300 / 620 * 100%);
    margin: 0 calc(20 / 620 * 100%) calc(30 / 620 * 100%) 0;
}

.bucknumber_list li:nth-child(2n),
.bucknumber_list li:last-child {
    margin-right: 0;
}

.bucknumber_list li figcaption {
    width: calc(60 / 300 * 100%);
    padding: 0.35em 0 0.5em;
    color: #fff;
    font-size: 2.6rem;
    font-family: "Noto Serif JP", 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", HGS明朝E, メイリオ, Meiryo, serif;
    line-height: 1;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    margin: calc(-10 / 300 * 100%) 0 0 calc(-8 / 300 * 100%);
}

.bucknumber_list li figcaption::before,
.bucknumber_list li figcaption::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    -webkit-transform: skewY(-15deg) rotate(2deg);
    transform: skewY(-15deg) rotate(2deg);
    position: absolute;
    top: 0;
    left: 0;
}

.bucknumber_list li figcaption::before {
    background-color: rgba(0, 0, 0, 0.8);
    margin: calc(5 / 60 * 100%) 0 0 calc(5 / 60 * 100%);
}

.bucknumber_list li figcaption::after {
    background-color: rgba(183, 15, 59, 0.9);
}

.bucknumber_list li figcaption span {
    font-weight: 600;
    z-index: 2;
}

@media screen and (min-width: 768px) {
    .backnumber_box {
        padding: calc(70 / 1000 * 100%) 0 calc(80 / 1000 * 100%);
        background-size: calc(64 / 1000 * 100%) auto;
    }
    
    .backnumber_box .sec_ttl {
        margin: 0 0 calc(50 / 1000 * 100%);
    }
    
    .bucknumber_list {
        width: calc(800 / 1000 * 100%);
    }
    
    .bucknumber_list li,
    .bucknumber_list li:nth-child(2n) {
        width: calc(188 / 800 * 100%);
        margin: 0 calc(16 / 800 * 100%) calc(16 / 800 * 100%) 0;
    }
    
    .bucknumber_list li:nth-child(4n),
    .bucknumber_list li:last-child {
        margin-right: 0;
    }
    
    .bucknumber_list li a figure::after {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        background-color: #fff;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        -webkit-transition: 0.3s ease;
        transition: 0.3s ease;
    }
    
    .bucknumber_list li a:hover figure::after {
        opacity: 0.4;
    }
    
    .bucknumber_list li figcaption {
        padding: 0.5em 0;
        font-size: 1.6rem;
    }
}

@media screen and (min-width: 1100px) {
    
}