@charset "utf-8";

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

/* =====================================================================
*    story
* =================================================================== */
#story .subpage_ttl::before {
    background: url(../images/common/bg_deco6.png) no-repeat center center;
    background-size: auto 100%;
}

.story_sec {
    width: calc(650 / 750 * 100%);
    margin: 0 auto;
}

.story_number {
    margin: 0 0 0.5em;
    font-size: 3.2rem;
    line-height: 1;
    text-align: center;
}

.story_number span {
    display: inline-block;
    margin: 0 0.2em;
    font-size: 5.2rem;
}

.story_date {
    margin: 0 0 1.2em;
    color: #b79044;
    font-size: 2.4rem;
    line-height: 1.3;
    text-align: center;
}

.story_ttl {
    width: calc(550 / 650 * 100%);
    margin: 0 auto 0.7em;
    color: #da4043;
    font-size: 3.4rem;
    font-weight: 400;
    line-height: 1.471;
    text-align: center;
}

.story_main_img {
    margin: 0 0 calc(40 / 650 * 100%);
}

.story_main_img::before,
.story_main_img::after {
    content: "";
    display: block;
    width: calc(230 / 650 * 100%);
    padding-top: calc(139 / 650 * 100%);
    background: url(../images/story/bg_cloud1.png) no-repeat center center;
    background-size: auto 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    margin: calc(-61 / 650 * 100%) 0 0 calc(-118 / 650 * 100%);
}

.story_main_img::after {
    width: calc(328 / 650 * 100%);
    padding-top: calc(161 / 650 * 100%);
    background: url(../images/story/bg_cloud2.png) no-repeat center center;
    background-size: auto 100%;
    top: auto;
    left: auto;
    bottom: 0;
    right: 0;
    margin: 0 calc(-190 / 650 * 100%) calc(-54 / 650 * 100%) 0;
}

.story_main_img a::before {
	content: "";
    display: block;
	width: calc(120 / 750 * 100vw);
	height: calc(120 / 750 * 100vw);
    background-color: rgba(24, 32, 54, 0.85);
    border-radius: 50%;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
    z-index: 2;
}

.story_main_img a::after {
    content: "";
    display: block;
    width: calc(120 / 750 * 100vw);
	height: calc(120 / 750 * 100vw);
    background: url(../images/common/btn_movie.png) no-repeat center center;
    background-size: auto 100%;
    position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
    z-index: 2;
}

.story_details {
}

.story_txt {
    margin: 0 calc(50 / 650 * 100%) calc(70 / 650 * 100%);
    font-size: 2.4rem;
    line-height: 1.833;
}

.story_slider {
    width: calc(550 / 650 * 100%);
    margin: 0 auto calc(122 / 650 * 100%);
}

.story_slider::before {
    content: "";
    display: block;
    width: calc(762 / 550 * 100%);
    padding-top: calc(470 / 550 * 100%);
    background: url(../images/story/bg_water.png) no-repeat center center;
    background-size: auto 100%;
    position: absolute;
    top: 0;
    left: 0;
    margin: calc(-80 / 550 * 100%) 0 0 calc(-100 / 550 * 100%);
}

@media screen and (min-width:768px){
    .story_sec {
        width: 100%;
    }
    
    .story_number {
        margin: 0 0 0.6em;
        font-size: 2.8rem;
    }
    
    .story_number span {
        font-size: 4.8rem;
    }
    
    .story_date {
        margin: 0 0 0.6em;
        font-size: 1.8rem;
    }
    
    .story_ttl {
        width: calc(800 / 1200 * 100%);
        margin: 0 auto 0.8em;
        font-size: 2.8rem;
    }
    
    .story_main_img {
        width: calc(900 / 1200 * 100%);
        margin: 0 auto calc(40 / 1200 * 100%);
    }
    
    .story_main_img::before {
        width: calc(230 / 900 * 100%);
        padding-top: calc(139 / 900 * 100%);
        margin: calc(-59 / 900 * 100%) 0 0 calc(-135 / 900 * 100%);
    }
    
    .story_main_img::after {
        width: calc(328 / 900 * 100%);
        padding-top: calc(161 / 900 * 100%);
        margin: 0 calc(-150 / 900 * 100%) calc(-47 / 900 * 100%) 0;
    }
    
    .story_main_img a::before {
        width: calc(90 / 900 * 100%);
	    height: 0;
        padding-top: calc(90 / 900 * 100%);
        -webkit-transition: 0.3s ease;
        transition: 0.3s ease;
    }
    
    .story_main_img a:hover::before {
        background-color: rgba(229, 22, 20, 0.85);
    }
    
    .story_main_img a::after {
        width: calc(90 / 900 * 100%);
	    height: 0;
        padding-top: calc(90 / 900 * 100%);
    }
    
    .story_txt {
        width: calc(800 / 1200 * 100%);
        margin: 0 auto calc(70 / 1200 * 100%);
        font-size: 1.6rem;
        line-height: 1.625;
    }
    
    .story_slider {
        width: calc(526 / 1200 * 100%);
        margin: 0 auto calc(117 / 1200 * 100%);
    }
    
    .story_slider::before {
        width: calc(762 / 526 * 100%);
        padding-top: calc(470 / 526 * 100%);
        margin: calc(-77 / 526 * 100%) 0 0 calc(-118 / 526 * 100%);
    }
}

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


/* =====================================================================
*    backnumber
* =================================================================== */
.backnumber_sec {
    width: calc(650 / 750 * 100%);
    margin: 0 auto;
    padding: calc(60 / 750 * 100%) calc(50 / 750 * 100%) calc(50 / 750 * 100%);
    background-color: #fff;
}

.backnumber_sec::after {
    content: "";
    display: block;
    width: calc(370 / 750 * 100%);
    padding-top: calc(285 / 750 * 100%);
    background: url(../images/story/bg_backnumber.png) no-repeat center top;
    background-size: auto 100%;
    position: absolute;
    bottom: 0;
    right: 0;
    margin: 0 calc(-69 / 750 * 100%) calc(-70 / 750 * 100%) 0;
}

.backnumber_ttl {
    width: calc(277 / 550 * 100%);
    margin: 0 auto calc(55 / 550 * 100%);
    padding: calc(93 / 550 * 100%) 0 0;
    background: url(../images/common/bg_deco6.png) no-repeat center top;
    background-size: calc(75 / 277 * 100%) auto;
}

.back_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;
    z-index: 2;
}

.back_list li {
    width: calc(250 / 550 * 100%);
    margin: 0 calc(50 / 550 * 100%) calc(30 / 550 * 100%) 0;
}

.back_list li:nth-child(even),
.back_list li:last-child {
    margin-right: 0;
}

.back_box {
}

.back_box .thumbs {
}

.back_box .number {
    margin: 0.5em 0 0;
    font-size: 2.4rem;
    line-height: 1;
    text-align: center;
}

.back_box .number span {
    color: #b79044;
    font-size: 3.4rem;
}

@media screen and (min-width:768px){
	.backnumber_sec {
        width: calc(900 / 1200 * 100%);
        padding: calc(60 / 1200 * 100%) calc(50 / 1200 * 100%) calc(50 / 1200 * 100%);
    }
    
    .backnumber_sec::after {
        width: calc(222 / 900 * 100%);
        padding-top: calc(172 / 900 * 100%);
        margin: 0 calc(-50 / 900 * 100%) calc(-50 / 900 * 100%) 0;
    }
    
    .backnumber_ttl {
        width: calc(166 / 800 * 100%);
        margin: 0 auto calc(35 / 800 * 100%);
        padding: calc(53 / 800 * 100%) 0 0;
        background-size: calc(44 / 166 * 100%) auto;
    }
    
    .back_list li,
    .back_list li:nth-child(even) {
        width: calc(150 / 800 * 100%);
        margin: 0 calc(12.5 / 800 * 100%) calc(30 / 800 * 100%) 0;
    }
    
    .back_list li:nth-child(5n) {
        margin-right: 0;
    }
    
    .back_list li a:hover {
        opacity: 0.7;
    }
    
    .back_box .number {
        font-size: 1.4rem;
    }
    
    .back_box .number span {
        font-size: 2rem;
    }
}

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