@charset "utf-8";
/* opening *************/
@keyframes olout {
    0%   { opacity: 1; height: 100%; }
    99%  { opacity: 0; height: 100%; }
    100% { opacity: 0; height: 0%; }
}
@keyframes olin {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}
#opening {
    position: fixed;
    z-index: 10;
    top: 0;
    left: 0;
    display: flex;
    flex-flow: wrap;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    overflow: auto;
    overscroll-behavior: none;
    background-image: linear-gradient(0deg, #DFDFDF 10%, #FBFBFB);
    animation: linear 0.5s 4s olout forwards;
}
#opening h1 {
    width: calc(330/375 * 100%);
    max-width: 330px;
    opacity: 0;
    animation: linear 1s 0.5s olin forwards;
}
@media only screen and (min-width:640px) {
    #opening h1 {
        width: calc(768/1350 * 100%);
        max-width: 768px;
    }
}
/***********************/
/*main_img**************/
@media only screen and (min-width:640px) {
    #main_img {
        display: block;
        position: relative;
        z-index: 3;
    }
}
/***********************/
/*statement*************/
#statement > .back {
    content: "";
    display: block;
    height: 70px;
    width: 100%;
}
#statement > .back .img {
    display: none;
}
#statement > .red {
    margin: 0 0 calc(40/375 * 100%) 0;
    background: url(../img/mk_up_sp.webp) top center/100% 100% no-repeat;
}
#statement > .blue {
    margin: calc(30/375 * 100%) 0 0 0;
    background: url(../img/mk_bottom_sp.webp) bottom center/100% 100% no-repeat;
}
#statement .box {
    width: calc(330/375 * 100%);
    margin: 0 auto 0 auto;
}
#statement .box .copy1,
#statement .box .copy2 {
    display: block;
    width: 100%;
    text-align: left;
    line-height: 0;
}
#statement .box .copy1,
#statement .box .copy2,
#statement .box .logo {
    opacity: 0;
    transform: translateY(10px);
    transition: 0.3s all;
}
#statement .box .copy1.active,
#statement .box .copy2.active,
#statement .box .logo.active {
    transform: translateY(0px);
    opacity: 1;
}
#statement .box .copy2 {
    /*margin-top: calc(60/330 * 100%);*/
}
#statement .box .logo {
    display: block;
    width: calc(290/330 * 100%);
    margin: calc(40/330 * 100%) auto 0 auto;
}
#statement .box a.button {
    line-height: 1.3;
    margin: calc(40/330 * 100%) auto 0 auto;
    aspect-ratio: auto;
    height: 65px;
    max-width: 330px;
}
#statement .box p.remarks {
    text-align: center;
    font-size: 1.3rem;
    margin-top: calc(20/330 * 100%);
}
@media only screen and (min-width:640px) {
    #statement {
        position: relative;
        margin: -2px 0 -2px 0;
    }
    #statement > .back {
        aspect-ratio: auto;
        width: 50%;
        height: 100%;
        margin: 0;
        position: absolute;
        z-index: 2;
        transition: 0.7s all ease-out;
    }
    #statement.active > .back {
        width: 0%;
    }
    #statement > .back .img {
        display: block;
        position: absolute;
        width: auto;
        height: 100%;
    }
    #statement > .back .img img {
        width: auto;
        height: 100%;
    }
    #statement > .red {
        top: 0;
        right: 0;
        background: #E95532 url(../img/mk_r_3pc.svg) center left/auto 100% no-repeat;
    }
    #statement > .red .img {
        top: 0;
        right: calc(100% - 2px);
    }
    #statement > .blue {
        top: 0;
        left: 0;
        background: #A9AAAA url(../img/mk_l_3pc.svg) center right/auto 100% no-repeat;
    }
    #statement > .blue .img {
        top: 0;
        left: calc(100% - 2px);
    }
    #statement .box {
        width: calc(550/950 * 100%);
        max-width: 640px;
        padding: calc(110/950 * 100%) 0 calc(110/950 * 100%) 0;
    }
    #statement .box .copy1,
    #statement .box .copy2,
    #statement .box .logo,
    #statement .box a.button,
    #statement .box p.remarks {
        width: 100%;
        opacity: 1;
        transform: translateX(0px);
    }
    #statement .box .copy2 {
        margin-top: calc(120/640 * 100%);
    }
    #statement .box .logo {
        width: calc(540/640 * 100%);
        margin-top: calc(65/640 * 100%);
    }
    #statement .box a.button {
        font-size: 1.6rem;
        height: 75px;
        width: calc(640/640 * 100%);
        max-width: 375px;
        margin: calc(65/640 * 100%) auto 0 auto;
        transition: 0.3s all;
    }
    #statement .box a.button:hover {
        background-color: #eeeeee;
    }
    #statement .box p.remarks {
        margin-top: calc(30/640 * 100%);
    }
}
@media only screen and (min-width:950px) {
    #statement .box {
        padding: 120px 0 110px 0;
    }
}
@media only screen and (min-width:1100px) {
    #statement .box {
        width: calc(640/950 * 100%);
        max-width: 640px;
    }
    #statement .box a.button {
        font-size: 2.2rem;
        aspect-ratio: 520/120;
        width: 520px;
        max-width: none;
        height: auto;
    }
    #statement .box p.remarks {
        font-size: 1.6rem;
    }
}
/***********************/
/*base******************/
.base .box {
    width: calc(330/375 * 100%);
    max-width: 800px;
    margin: 0 auto 0 auto;
}
.base .box h2 {
    font-size: 1.8rem;
    text-align: center;
    line-height: 1;
    padding-top: calc(25/330 * 100%);
}
@media only screen and (min-width:640px) {
    .base .box h2 {
        font-size: 2.4rem;
        padding-top: calc(60/800 * 100%);
    }
}
/***********************/
/*movie*****************/
#movie {
    background: #000000;
    color: #FFFFFF;
}
#movie .box h2 {
    font-size: 2.2rem;
    padding-top: calc(30/330 * 100%);
}
#movie .box .program {
    margin-top: calc(25/330 * 100%);
    padding-bottom: calc(30/330 * 100%);
}
#movie .box:has(dl.story) .program {
    padding-bottom: 0;
}
#movie .box .program .player > * {
    position: static !important;
}
#movie .box .program p {
    font-size: 1.6rem;
    margin-top: calc(20/330 * 100%);
    text-align: center;
}
#movie .box dl.story,
#movie .box dl.story > dt,
#movie .box dl.story > dd {
    margin: calc(15/330 * 100%) 0 0 0;
    padding-bottom: calc(30/330 * 100%);
    display: block;
}
#movie .box dl.story > dt {
    margin-top: 0;
    padding-bottom: 0;
    font-size: 1.8rem;
    text-align: center;
}
#movie .box dl.story > dd {
    margin-top: calc(12/330 * 100%);
    padding-bottom: 0;
    font-size: 1.3rem;
}
@media only screen and (min-width:640px) {
    #movie {
        position: relative;
        z-index: 2;
    }
    #movie .box h2 {
        font-size: 3.2rem;
        padding-top: calc(55/800 * 100%);
    }
    #movie .box .program {
        margin-top: calc(55/800 * 100%);
        padding-bottom: calc(60/800 * 100%);
    }
    #movie .box .program p {
        font-size: 1.8rem;
        margin-top: calc(25/800 * 100%);
    }
    #movie .box dl.story {
        margin-top: calc(60/800 * 100%);
        padding-bottom: calc(60/800 * 100%);
        display: flex;
        flex-flow: nowrap;
        justify-content: space-between;
    }
    #movie .box dl.story > dt {
        font-size: 2.0rem;
    }
    #movie .box dl.story > dd {
        width: calc(674/800 * 100%);
        margin: 0;
        font-size: 1.6rem;
    }
}
/***********************/
/*share*****************/
#share .box ul.list {
    margin: calc(25/330 * 100%) 0 0 0;
    padding: 0 0 calc(30/330 * 100%) 0;
    display: flex;
    flex-flow: wrap;
    justify-content: center;
    column-gap: calc(48/330 * 100%);
}
#share .box ul.list > li {
    display: block;
    margin: 0;
    padding: 0;
    width: calc(48/330 * 100%);
}
@media only screen and (min-width:640px) {
    #share .box ul.list {
        margin-top: calc(30/800 * 100%);
        padding-bottom: calc(60/800 * 100%);
        column-gap: calc(64/800 * 100%);
    }
    #share .box ul.list > li {
        width: calc(64/800 * 100%);
    }
    #share .box ul.list > li a {
        transition: 0.3s all;
    }
    #share .box ul.list > li a:hover {
        opacity: 0.7;
    }
}
/***********************/
/*cast******************/
#cast {
    border-top: 1px solid #ABABAB;
}
#cast .box figure {
    margin: calc(25/330 * 100%) 0 0 0;
    padding-bottom: calc(30/330 * 100%);
}
#cast .box figure .img {
    width: calc(200/330 * 100%);
    max-width: 245px;
    margin: 0 auto 0 auto;
}
#cast .box figure > figcaption {
    display: block;
    margin-top: calc(30/330 * 100%);
}
#cast .box figure > figcaption dl,
#cast .box figure > figcaption dl > * {
    display: block;
    margin: 0;
    padding: 0;
}
#cast .box figure > figcaption dl > dt {
    font-size: 2.0rem;
}
#cast .box figure > figcaption dl > dt span {
    font-size: 1.3rem;
}
#cast .box figure > figcaption dl > dd {
    margin-top: calc(20/330 * 100%);
    font-size: 1.3rem;
}
@media only screen and (min-width:640px) {
    #cast .box {
        max-width: 950px;
    }
    #cast .box h2 {
        padding-top: calc(60/950 * 100%);
    }
    #cast .box figure {
        margin-top: calc(60/950 * 100%);
        padding-bottom: calc(80/950 * 100%);
        display: flex;
        flex-flow: nowrap;
        justify-content: space-between;
        align-items: flex-start;
    }
    #cast .box figure .img {
        width: calc(245/950 * 100%);
        margin-left: 0;
    }
    #cast .box figure > figcaption {
        margin: 0;
        width: calc((950 - 245 - 105)/950 * 100%);
    }
    #cast .box figure > figcaption dl > dt {
        font-size: 3.2rem;
        line-height: 1;
    }
    #cast .box figure > figcaption dl > dt span {
        font-size: 1.6rem;
    }
    #cast .box figure > figcaption dl > dd {
        margin-top: calc(50/(950 - 245 - 105) * 100%);
        font-size: 1.6rem;
    }
}
/***********************/
/*corporate*************/
#corporate {
    border-top: 1px solid #ABABAB;
}
#corporate .box {
    width: calc(330/375 * 100%);
    max-width: 800px;
    margin: 0 auto 0 auto;
}
#corporate .box h2 {
    padding-top: calc(40/330 * 100%);
    line-height: 1;
}
#corporate .box a.button {
    margin: calc(34/330 * 100%) auto 0 auto;
    aspect-ratio: 230/56;
    width: calc(230/330 * 100%);
    max-width: 230px;
    border-radius: 56px;
    background-color: #231815;
    font-size: 1.4rem;
    color: #FFFFFF;
    filter: drop-shadow(0px 0px 0px rgb(0, 0, 0, 0))
}
#corporate .box a.button[target="_blank"]::after {
    background: #FFFFFF;
}
@media only screen and (min-width:640px) {
    #corporate .box h2 {
        padding-top: calc(60/800 * 100%);
        width: calc(530/800 * 100%);
        margin: 0 auto 0 auto;
    }
    #corporate .box a.button {
        margin-top: calc(60/800 * 100%);
        aspect-ratio: 300/70;
        width: calc(300/800 * 100%);
        max-width: none;
        font-size: 1.8rem;
        transition: 0.3s all;
    }
    #corporate .box a.button:hover {
        background-color: #4e4e4d;
    }
}
/***********************/