@charset "utf-8";
/*-----------------------------------------------
 * STORY
-------------------------------------------------*/
.cont-tit-en::before {
    width: min(calc(250 / var(--vw-min) * 100vw),250px);
    height: min(calc(39 / var(--vw-min) * 100vw),39px);
    background: url(../img/common/tit/story.svg)no-repeat center/contain;
}
@media screen and (max-width:768px){
    .cont-tit-en::before {
        width: calc(167 / var(--vw-min) * 100vw);
        height: calc(26 / var(--vw-min) * 100vw);
    }
}
.cont-tit-en::after {
    width: min(calc(269 / var(--vw-min) * 100vw),269px);
    height: min(calc(112 / var(--vw-min) * 100vw),112px);
    top: max(calc(-73 / var(--vw-min) * 100vw),-73px);
    left: max(calc(-9.5 / var(--vw-min) * 100vw),-9.5px);
    background: url(../img/common/tit/story-blur.svg)no-repeat center/contain;
}
@media screen and (max-width:768px){
    .cont-tit-en::after {
        width: calc(157 / var(--vw-min) * 100vw);
        height: calc(65 / var(--vw-min) * 100vw);
        top: calc(-33 / var(--vw-min) * 100vw);
        left: calc(5 / var(--vw-min) * 100vw);
    }
}
.story__tabs,
.story__detail {
    opacity: 0;
    transition: opacity .6s ease;
}
body.--story-loaded .story__tabs,
body.--story-loaded .story__detail {
    opacity: 1;
}
/*-----------------------------------------------
 * TAB
-------------------------------------------------*/
.story__tabLists {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: min(calc(12 / var(--vw-min) * 100vw),12px);
    margin-bottom: min(calc(58 / var(--vw-min) * 100vw),58px);
}
@media screen and (max-width:768px){
    .story__tabLists {
        gap: calc(8 / var(--vw-min) * 100vw);
        margin-bottom: calc(34 / var(--vw-min) * 100vw);
    }
}
.story__tabItem {
    width: min(calc(90 / var(--vw-min) * 100vw),90px);
}
@media screen and (max-width:768px){
    .story__tabItem {
        width: calc(76 / var(--vw-min) * 100vw);
    }
}
.story__tabLink {
    width: 100%;
    height: min(calc(50 / var(--vw-min) * 100vw),50px);
    display: block;
    padding: min(calc(4 / var(--vw-min) * 100vw),4px);
    background: rgba(255,255,255,.6);
    border: min(calc(1 / var(--vw-min) * 100vw),1px) solid var(--color-pinkE1A);
    text-decoration: none;
    transition: filter var(--duration-hover) var(--easing-hover), transform var(--duration-hover) var(--easing-hover-bounce);
}
@media screen and (max-width:768px){
    .story__tabLink {
        height: calc(42 / var(--vw-min) * 100vw);
        padding: calc(4 / var(--vw-min) * 100vw);
        border-width: calc(1 / var(--vw-min) * 100vw);
    }
}
.story__tabLink-in {
    font-size: min(calc(18 / var(--vw-min) * 100vw),18px);
    color: var(--color-blue2D9);
    font-weight: 600;
    line-height: 1;
    text-align: center;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-greenB7E);
}
@media screen and (max-width:768px){
    .story__tabLink-in {
        font-size: calc(14 / var(--vw-min) * 100vw);
    }
}
.story__tabItem.--is-active .story__tabLink-in {
    color: #fff;
    background-image: var(--green-90gradient);
}
@media (hover: hover) and (pointer: fine){
    .story__tabItem:not(.--is-active) .story__tabLink:hover {
        filter: brightness(1.06);
        transform: scale(1.04);
    }
}
/*-----------------------------------------------
 * DETAIL HEADER
-------------------------------------------------*/
.story__header {
    text-align: center;
    margin-bottom: min(calc(38 / var(--vw-min) * 100vw),38px);
}
@media screen and (max-width:768px){
    .story__header {
        margin-bottom: calc(24 / var(--vw-min) * 100vw);
    }
}
.story__ep {
    font-size: min(calc(44 / var(--vw-min) * 100vw),44px);
    color: var(--color-blue2D9);
    font-weight: 500;
    line-height: 1;
    letter-spacing: .04em;
}
@media screen and (max-width:768px){
    .story__ep {
        font-size: calc(32 / var(--vw-min) * 100vw);
    }
}
.story__tit {
    font-size: min(calc(24 / var(--vw-min) * 100vw),24px);
    color: var(--color-blue2D9);
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: .1em;
    margin-top: min(calc(12 / var(--vw-min) * 100vw),12px);
}
@media screen and (max-width:768px){
    .story__tit {
        font-size: calc(17 / var(--vw-min) * 100vw);
        margin-top: calc(8 / var(--vw-min) * 100vw);
    }
}
/*-----------------------------------------------
 * IMAGE
-------------------------------------------------*/
.story__swiperWrap {
    width: 100vw;
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
}
.story__imgItem.swiper-slide {
    width: min(calc(840 / var(--vw-min) * 100vw),840px);
    margin: 0 min(calc(6 / var(--vw-min) * 100vw),6px);
}
@media screen and (max-width:768px){
    .story__imgItem.swiper-slide {
        width: calc(339 / var(--vw-min) * 100vw);
        margin: 0 calc(4 / var(--vw-min) * 100vw);
    }
}
.story__img {
    width: 100%;
    height: 0;
    display: block;
    position: relative;
    overflow: hidden;
    padding-top: 56.25%;
    background: rgba(255,255,255,.6);
    border: min(calc(1 / var(--vw-min) * 100vw),1px) solid var(--color-pinkE1A);
}
@media screen and (max-width:768px){
    .story__img {
        border-width: calc(1 / var(--vw-min) * 100vw);
    }
}
.story__img img {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    inset: 0;
    object-fit: cover;
}
.story__img::after {
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    inset: 0;
    background-image: var(--green-gradient);
    opacity: .55;
    transition: opacity .4s ease;
    pointer-events: none;
}
.swiper-slide-active .story__img::after {
    opacity: 0;
}
.story__swiperWrap.--is-single .story__imgItem.swiper-slide {
    width: min(calc(840 / var(--vw-min) * 100vw),840px);
    margin: 0 auto;
}
@media screen and (max-width:768px){
    .story__swiperWrap.--is-single .story__imgItem.swiper-slide {
        width: calc(339 / var(--vw-min) * 100vw);
    }
}
.story__swiperWrap.--is-single .story__img::after {
    opacity: 0;
}
.story__swiperWrap.--is-single .story__thumbWrap {
    display: none;
}
/*-----------------------------------------------
 * THUMB
-------------------------------------------------*/
.story__thumbWrap {
    width: min(calc(840 / var(--vw-min) * 100vw),840px);
    margin: min(calc(8 / var(--vw-min) * 100vw),8px) auto 0;
}
@media screen and (max-width:768px){
    .story__thumbWrap {
        width: calc(339 / var(--vw-min) * 100vw);
        margin-top: calc(4 / var(--vw-min) * 100vw);
    }
}
.story__thumbLists {
    display: flex;
    flex-wrap: wrap;
    gap: min(calc(8 / var(--vw-min) * 100vw),8px);
}
@media screen and (max-width:768px){
    .story__thumbLists {
        gap: calc(4 / var(--vw-min) * 100vw);
    }
}
.story__thumbItem {
    width: calc((100% - min(calc(40 / var(--vw-min) * 100vw),40px)) / 6);
}
@media screen and (max-width:768px){
    .story__thumbItem {
        width: calc((100% - calc(8 / var(--vw-min) * 100vw)) / 3);
    }
}
.story__thumbBtn {
    width: 100%;
    display: block;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
}
.story__thumbImg {
    width: 100%;
    height: 0;
    display: block;
    position: relative;
    overflow: hidden;
    padding-top: 56.25%;
    border: min(calc(1 / var(--vw-min) * 100vw),1px) solid var(--color-pinkE1A);
}
@media screen and (max-width:768px){
    .story__thumbImg {
        border-width: calc(1 / var(--vw-min) * 100vw);
    }
}
.story__thumbImg img {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    inset: 0;
    object-fit: cover;
    pointer-events: none;
}
.story__thumbImg::after {
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    inset: 0;
    background-image: var(--green-gradient);
    opacity: .6;
    transition: opacity .3s ease;
    pointer-events: none;
}
.story__thumbItem.--is-active .story__thumbImg::after {
    opacity: 0;
}
@media (hover: hover) and (pointer: fine){
    .story__thumbItem:not(.--is-active) .story__thumbBtn:hover .story__thumbImg::after {
        opacity: .25;
    }
}
/*-----------------------------------------------
 * BODY
-------------------------------------------------*/
.story__body {
    width: min(calc(840 / var(--vw-min) * 100vw),840px);
    position: relative;
    margin: min(calc(60 / var(--vw-min) * 100vw),60px) auto 0;
    padding: min(calc(100 / var(--vw-min) * 100vw),100px) min(calc(80 / var(--vw-min) * 100vw),80px);
    background: rgba(255,255,255,.65);
    box-shadow: 0 0 20px 0 var(--color-green84B);
}
@media screen and (max-width:768px){
    .story__body {
        width: 100%;
        margin-top: calc(40 / var(--vw-min) * 100vw);
        padding: calc(50 / var(--vw-min) * 100vw) calc(20 / var(--vw-min) * 100vw) calc(70 / var(--vw-min) * 100vw);
    }
}
.story__block + .story__block {
    margin-top: min(calc(60 / var(--vw-min) * 100vw),60px);
}
@media screen and (max-width:768px){
    .story__block + .story__block {
        margin-top: calc(40 / var(--vw-min) * 100vw);
    }
}
.story__blockHd {
    display: flex;
    align-items: baseline;
    position: relative;
    gap: min(calc(14 / var(--vw-min) * 100vw),14px);
    padding-left: min(calc(23 / var(--vw-min) * 100vw),23px);
}
@media screen and (max-width:768px){
    .story__blockHd {
        gap: calc(10 / var(--vw-min) * 100vw);
        padding: calc(7 / var(--vw-min) * 100vw) 0 calc(9 / var(--vw-min) * 100vw) calc(20 / var(--vw-min) * 100vw);
    }
}
.story__blockHd::before {
    content: "";
    width: min(calc(3 / var(--vw-min) * 100vw),3px);
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background-color: var(--color-pinkE1A);
}
@media screen and (max-width:768px){
    .story__blockHd::before {
        width: calc(3 / var(--vw-min) * 100vw);
    }
}
.story__blockHd::after {
    content: "";
    width: min(calc(1 / var(--vw-min) * 100vw),1px);
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: min(calc(6 / var(--vw-min) * 100vw),6px);
    background-color: var(--color-pinkE1A);
}
@media screen and (max-width:768px){
    .story__blockHd::after {
        width: calc(1 / var(--vw-min) * 100vw);
        left: calc(6 / var(--vw-min) * 100vw);
    }
}
.story__blockTit {
    font-size: min(calc(24 / var(--vw-min) * 100vw),24px);
    color: var(--color-blue2D9);
    font-weight: 600;
    line-height: 1.6667;
    letter-spacing: .04em;
}
@media screen and (max-width:768px){
    .story__blockTit {
        font-size: calc(18 / var(--vw-min) * 100vw);
    }
}
.story__blockTitJa {
    font-size: min(calc(15 / var(--vw-min) * 100vw),15px);
    font-weight: 500;
    line-height: 1.6667;
    letter-spacing: .12em;
}
@media screen and (max-width:768px){
    .story__blockTitJa {
        font-size: calc(12 / var(--vw-min) * 100vw);
    }
}
.story__txt {
    font-size: min(calc(16 / var(--vw-min) * 100vw),16px);
    font-weight: 500;
    line-height: 1.875;
    padding-top: min(calc(30 / var(--vw-min) * 100vw),30px);
    white-space: pre-line;
}
@media screen and (max-width:768px){
    .story__txt {
        font-size: calc(12 / var(--vw-min) * 100vw);
        line-height: 1.8333;
        padding-top: calc(16 / var(--vw-min) * 100vw);
    }
}
/*-----------------------------------------------
 * STAFF
-------------------------------------------------*/
.story__staffLists {
    display: flex;
    flex-direction: column;
    gap: min(calc(10 / var(--vw-min) * 100vw),10px);
    padding-top: min(calc(30 / var(--vw-min) * 100vw),30px);
}
@media screen and (max-width:768px){
    .story__staffLists {
        gap: calc(8 / var(--vw-min) * 100vw);
        padding-top: calc(16 / var(--vw-min) * 100vw);
    }
}
.story__staffItem {
    font-size: min(calc(16 / var(--vw-min) * 100vw),16px);
    font-weight: 500;
    line-height: 1.875;
    display: flex;
    align-items: baseline;
}
@media screen and (max-width:768px){
    .story__staffItem {
        font-size: calc(12 / var(--vw-min) * 100vw);
        line-height: 1.8333;
    }
}
.story__staffItem-dt {
    color: var(--color-blue2D9);
    font-weight: 600;
    width: min(calc(160 / var(--vw-min) * 100vw),160px);
    flex-shrink: 0;
}
@media screen and (max-width:768px){
    .story__staffItem-dt {
        width: calc(110 / var(--vw-min) * 100vw);
    }
}
/*-----------------------------------------------
 * TRAILER
-------------------------------------------------*/
.story__movie {
    width: min(calc(600 / var(--vw-min) * 100vw),600px);
    margin: 0 auto;
    padding-top: min(calc(30 / var(--vw-min) * 100vw),30px);
}
@media screen and (max-width:768px){
    .story__movie {
        width: 100%;
        padding-top: calc(16 / var(--vw-min) * 100vw);
    }
}
.story__movieIn {
    position: relative;
    padding: min(calc(7 / var(--vw-min) * 100vw),7px);
    background: rgba(255,255,255,.4);
    border: min(calc(1 / var(--vw-min) * 100vw),1px) solid var(--color-pinkE1A);
}
@media screen and (max-width:768px){
    .story__movieIn {
        padding: calc(4 / var(--vw-min) * 100vw);
        border-width: calc(1 / var(--vw-min) * 100vw);
    }
}
.story__movieBtn {
    width: 100%;
    display: block;
    position: relative;
    overflow: hidden;
    padding: 56.25% 0 0;
    background: transparent;
    border: 0;
    cursor: pointer;
}
.story__movieBtn::before {
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image: var(--green-gradient);
    opacity: .65;
    transition: opacity var(--duration-hover) var(--easing-hover);
}
.story__movieBtn img {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    inset: 0;
    object-fit: cover;
    transition: transform var(--duration-hover-slow) var(--easing-hover);
}
.story__moviePlay {
    width: min(calc(110 / var(--vw-min) * 100vw),110px);
    height: min(calc(110 / var(--vw-min) * 100vw),110px);
    display: block;
    position: absolute;
    inset: 0;
    z-index: 2;
    margin: auto;
    background: url(../img/common/deco/playArrow.png)no-repeat center/contain;
    transition: transform var(--duration-hover) var(--easing-hover-bounce);
    pointer-events: none;
}
@media screen and (max-width:768px){
    .story__moviePlay {
        width: calc(72 / var(--vw-min) * 100vw);
        height: calc(72 / var(--vw-min) * 100vw);
    }
}
@media (hover: hover) and (pointer: fine){
    .story__movieBtn:hover::before {
        opacity: .4;
    }
    .story__movieBtn:hover img {
        transform: scale(1.05);
    }
    .story__movieBtn:hover .story__moviePlay {
        transform: scale(1.08);
    }
}