/* -------------------------------base(mobile)↓-------------------------------------- */
main::before{
    display: block;
    content: "Reborn toLive";
    font-family: var(--site-font-family-Celine-Peach-Free);
    font-weight: 400;
    font-size: calc(80 * var(--site-horizontal-ratio));
    line-height: calc(92 * var(--site-horizontal-ratio));
    letter-spacing: 0;
    background: linear-gradient(90deg, #FF9900 0%, #FA5A00 40.22%, #E41111 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position: absolute;
    left: 0;
    top:calc(163 * var(--site-horizontal-ratio));
    transform: translate(calc(-1 * var(--site-padding)),calc(-1 * 48 * var(--site-horizontal-ratio)));
    opacity: 0;
    z-index: -1;
}
main[class*="transition"]::before{
    opacity: 1;
    transform: translate(0%,calc(-1 * 48 * var(--site-horizontal-ratio)));
    transition:all 1.5s ease-in-out;
}

/* Top-h1 start */
div.Top-h1{
    position: relative;
    padding-bottom: calc(calc(354 + calc(229.05 / 2) - 112 - 300) * var(--site-horizontal-ratio));
    margin-top: calc(calc(162 - 32.5 - 20) * var(--site-horizontal-ratio));
    /* margin-bottom: calc(calc(229.05 / 2) * var(--site-horizontal-ratio)); */
}
div.Top-h1::after{
    display: block;
    content: "";
    width: 100vw;
    height: calc(44.91 * var(--site-horizontal-ratio));
    background: linear-gradient(90deg, #FF9900 0%, #FA5A00 40.22%, #E41111 100%);
    z-index: -2;
    transform: skew(-17.46deg) rotate(-17.46deg) translate(-107%,0%);
    position: absolute;
    left: 0;
    bottom: 0;
}
div[class*="Top-h1 transition"]::after{
    transform: skew(-17.46deg) rotate(-17.46deg) translate(-7%,0%);
    transition:transform 1.5s ease-in-out;
}
div.Top-h1>h1{
    font-size: calc(24 * var(--site-horizontal-ratio));
    line-height: calc(36 * var(--site-horizontal-ratio));
    opacity: 0;
    transform: translateX(calc(-1 * var(--site-padding)));
    letter-spacing: 0.6em;
    text-align: left;
}
div.Top-h1>h1.transition{
    opacity: 1;
    transform: initial;
    transition:all 1.2s ease-in-out;
}
div.Top-h1>h1+p{
    margin-top: calc(calc(300 - 162 - 108) * var(--site-horizontal-ratio));
    font-weight: 700;
    font-size: calc(14 * var(--site-horizontal-ratio));
    line-height: calc(28 * var(--site-horizontal-ratio));
    letter-spacing: 0.1em;
    opacity: 0;
    transform: translateX(calc(-1 * var(--site-padding)));
}
div.Top-h1>h1+p.transition{
    opacity: 1;
    transform: initial;
    transition:all 1.2s ease-in-out;
}
/* Top-h1 end */

/* strength start */
.strength>h2{
    padding-top: calc(calc(229.05 / 2) * var(--site-horizontal-ratio));
    position: relative;
}
.strength>h2::before{
    content: "STRENGTH";
    font-family: var(--site-font-family-Bayon);
    font-weight: 400;
    font-size: calc(80 * var(--site-horizontal-ratio));
    letter-spacing: 0.1em;
    position: absolute;
    top: 50%;
    opacity: 0;
    transform: translateY(-100%);
    /* mix-blend-mode:soft-light; */
    mix-blend-mode: overlay;
    line-height: calc(30 * var(--site-horizontal-ratio));
}
.strength>h2.transition::before{
    opacity: 1;
    transform: translateY(150%);
    transition:all 1s ease-in-out;
}
.strength>section{
    border: 1px dashed #ffffff;
    border-radius: calc(20 * var(--site-horizontal-ratio));
    margin-top: calc(20 * var(--site-horizontal-ratio));
    padding: calc(20 * var(--site-horizontal-ratio));
    display: flex;
    flex-wrap: wrap;
    gap: calc(14 * var(--site-horizontal-ratio));
}
.strength>section>*{
    width: 100%;
}
.strength>section::before{
    font-family: var(--site-font-family-Bison);
    font-weight: 700;
    font-size: calc(16 * var(--site-horizontal-ratio));
    line-height: calc(19.2 * var(--site-horizontal-ratio));
    letter-spacing: 0.1em;
}
.strength>section:nth-of-type(1)::before{
    content: "MOVIE";
}
.strength>section:nth-of-type(2)::before{
    content: "DESIGN";
}
.strength>section:nth-of-type(3)::before{
    content: "SCHOOL";
}
.strength>.btn{
    margin-top: calc(calc(1613 - 976 - 607) * var(--site-horizontal-ratio));
}
/* strength end */

/* about start */
.about{
    margin-top: calc(calc(1741 - 1101 - 560) * var(--site-horizontal-ratio));
    position: relative;
}
.about_splide{
    margin-bottom: calc(-20 * var(--site-horizontal-ratio));
    z-index: 0;
    filter: grayscale(100%);
}
.about_splide .splide__slide{
    height: calc(93.36 * var(--site-horizontal-ratio));
    position: relative;
}
.about_splide img{
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.about_splide~*{
    position: relative;
    z-index: 1;
}
.filterOff .about_splide{
    filter: grayscale(0%);
    transition:filter 1s ease-in-out;
}
.filterOn .about_splide{
    filter: grayscale(100%);
    transition:filter 1s ease-in-out;
}
.about>span:nth-of-type(1){
    display: block;
    width: 100%;
    text-align: center;
    font-weight: 700;
    font-size: calc(20 * var(--site-horizontal-ratio));
    line-height: calc(40 * var(--site-horizontal-ratio));
    letter-spacing: 0.1em;
}
.about>span:nth-of-type(1)::before{
    display: block;
    content: "ABOUT";
    font-family: var(--site-font-family-Bison);
    font-weight: 700;
    font-size: calc(30 * var(--site-horizontal-ratio));
    line-height: calc(36 * var(--site-horizontal-ratio));
    letter-spacing: 0.1em;
    margin-bottom: calc(calc(1863 - 1819 - 36) * var(--site-horizontal-ratio));
}
.about>.btn{
    margin-top: calc(calc(1933 - 1863 - 40) * var(--site-horizontal-ratio));
}
/* about end */

/* information start */
.information{
    margin-top: calc(calc(2061 - 240 - 1741) * var(--site-horizontal-ratio));
}
.information>span:first-child{
    font-family: var(--site-font-family-Bison);
    font-weight: 700;
    font-size: calc(30 * var(--site-horizontal-ratio));
    line-height: calc(36 * var(--site-horizontal-ratio));
    letter-spacing: 0.1em;
    display: block;
    width: 100%;
    text-align: center;
    margin-bottom: calc(calc(2137 - 2061 - 36) * var(--site-horizontal-ratio));
}
.information>div:nth-child(2){
    display: flex;
    flex-wrap: wrap;
    gap: calc(20 * var(--site-horizontal-ratio));
}
.information>div:nth-child(2)>a{
    display: grid;
    gap: calc(10 * var(--site-horizontal-ratio));
    grid-template-areas: 
        "info-img info-time"
        "info-img info-text";
    grid-template-columns: calc(120 * var(--site-horizontal-ratio)) 1fr;
    color: #ffffff;
    text-decoration: none;
}
.information>div:nth-child(2)>a>div{
    grid-area: info-img;
    position: relative;
    width: 100%;
    height: calc(68 * var(--site-horizontal-ratio));
    overflow: hidden;
}
.information>div:nth-child(2)>a>div>img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.information>div:nth-child(2)>a>time{
    grid-area: info-time;
    font-family: var(--site-font-family-Bison);
    font-weight: 700;
    font-size: calc(14 * var(--site-horizontal-ratio));
    line-height: calc(16.8 * var(--site-horizontal-ratio));
    letter-spacing: 0.1em;
}
.information>div:nth-child(2)>a>p{
    grid-area: info-text;
    font-weight: 500;
    font-size: calc(14 * var(--site-horizontal-ratio));
    line-height: calc(21 * var(--site-horizontal-ratio));
    letter-spacing: 0.1em;
}
.information>.btn{
    margin-top: calc(calc(2675 - 2137 - 508) * var(--site-horizontal-ratio));
}
/* information end */

/*== landscape responsive ==*/
@media screen and (max-width: 767px) and (orientation: landscape){
}
/*== landscape responsive ==*/
/* -------------------------------base(mobile)↑-------------------------------------- */

/* ---------------------------desktop(include ipad)↓--------------------------------- */
@media screen and (min-width: 768px){
    main::before{
        font-size: calc(140 * var(--site-horizontal-ratio));
        line-height: calc(161 * var(--site-horizontal-ratio));
        transform: translate(calc(-1* var(--site-padding)), calc(-1 * 90 * var(--site-horizontal-ratio)));
        top: calc(295 * var(--site-horizontal-ratio));
    }
    main[class*="transition"]::before{
        transform: translate(calc(1 * 33 * var(--site-horizontal-ratio)),calc(-1 * 90 * var(--site-horizontal-ratio)));
    }
    /* h1 start */
    div.Top-h1{
        padding-bottom: calc(calc(365 + calc(612.05 / 2) - 543 - 72) * var(--site-horizontal-ratio));
        margin-top: calc(calc(287 - 20 - 52) * var(--site-horizontal-ratio));
        /* margin-bottom: calc(calc(612.05 / 2)* var(--site-horizontal-ratio)); */
    }
    div.Top-h1::after{
        height: calc(120 * var(--site-horizontal-ratio));
    }
    div.Top-h1>h1{
        font-size: calc(48 * var(--site-horizontal-ratio));
        line-height: calc(72 * var(--site-horizontal-ratio));
        margin-top: 0;
    }
    div[class*="Top-h1 transition"]::after{
        transform: skew(-17.46deg) rotate(-17.46deg) translate(-1.5%, 0%);
    }
    div.Top-h1>h1+p{
        margin-top: calc(calc(543 - 216 - 287) * var(--site-horizontal-ratio));
        font-size: calc(18 * var(--site-horizontal-ratio));
        line-height: calc(36 * var(--site-horizontal-ratio));
    }
    /* h1 end */

    /* strength start */
    .strength{
        padding-top: calc(calc(306 - 200) * var(--site-horizontal-ratio));
        display: grid;
        grid-template-areas:
            "strength-h2 strength-h2 strength-h2 strength-h2"
            "strength-p strength-MOVIE strength-DESIGN strength-SCHOOL"
            "strength-btn strength-btn strength-btn strength-btn";
        grid-template-columns: calc(460 * var(--site-horizontal-ratio)) 1fr 1fr 1fr;
        column-gap: calc(30 * var(--site-horizontal-ratio));
    }
    .strength>h2{
        padding-top: calc(calc(200) * var(--site-horizontal-ratio));
        grid-area: strength-h2;
        font-size: calc(28 * var(--site-horizontal-ratio));
        line-height: calc(46 * var(--site-horizontal-ratio));
    }
    .strength>h2::before {
        font-size: calc(300 * var(--site-horizontal-ratio));
        line-height: calc(300 * var(--site-horizontal-ratio));
        right: -4.5%;
        z-index: -3;
    }
    .strength>h2.transition::before{
        transform: translateY(-14%);
    }
    .strength>p{
        grid-area: strength-p;
    }
    .strength>section{
        margin-top: 0;
        padding: calc(30 * var(--site-horizontal-ratio)) calc(20 * var(--site-horizontal-ratio));
    }
    .strength>section:nth-of-type(1){
        grid-area: strength-MOVIE;
    }
    .strength>section:nth-of-type(2){
        grid-area: strength-DESIGN;
    }
    .strength>section:nth-of-type(3){
        grid-area: strength-SCHOOL;
    }
    .strength>.btn{
        grid-area: strength-btn;
        margin-top: calc(calc(1312 - 1025 - 257) * var(--site-horizontal-ratio));
        margin-right: 0;
    }
    .strength>section::before{
        line-height: calc(28.91 * var(--site-horizontal-ratio));
    }
    /* strength end */

    /* about start */
    .about{
        margin-top: calc(calc(1472 - 1312 - 40) * var(--site-horizontal-ratio));
        position: relative;
    }
    .about_splide{
        margin-bottom: calc(0 * var(--site-horizontal-ratio));
    }
    .about_splide .splide__slide{
        height: calc(360 * var(--site-horizontal-ratio));
    }
    .about>span:nth-of-type(1){
        line-height: calc(30 * var(--site-horizontal-ratio));
        display: flex;
        align-items: center;
        gap: calc(calc(185 - 60 - 95) * var(--site-horizontal-ratio));
        position: absolute;
        left: calc(60 * var(--site-horizontal-ratio));
        bottom: calc(calc(1472 + 360 - 1712 - 48) * var(--site-horizontal-ratio));
    }
    .about>span:nth-of-type(1)::before{
        font-size: calc(40 * var(--site-horizontal-ratio));
        line-height: calc(48 * var(--site-horizontal-ratio));
        margin-bottom: 0;
    }
    .about>.btn{
        margin-top: calc(calc(1772 - 1712 - 48) * var(--site-horizontal-ratio));
        margin-left: 0;
        position: absolute;
        left: calc(60 * var(--site-horizontal-ratio));
        bottom: calc(calc(1472 + 360 - 1772 - 40) * var(--site-horizontal-ratio));
    }
    /* about end */

    /* information start */
    .information {
        margin-top: calc(calc(1952 - 1472 - 360) * var(--site-horizontal-ratio));
    }
    .information>span:first-child{
        text-align: left;
        font-family: var(--site-font-family-Bayon);
        font-weight: 400;
        font-size: calc(40 * var(--site-horizontal-ratio));
        line-height: calc(72.27 * var(--site-horizontal-ratio));
        margin-bottom: calc(calc(2040 - 1952 - 72) * var(--site-horizontal-ratio));
    }
    .information>div:nth-child(2){
        gap: initial;
        row-gap: calc(30 * var(--site-horizontal-ratio));
        justify-content: space-between;
    }
    .information>div:nth-child(2)>a{
        width: calc(650 * var(--site-horizontal-ratio));
        justify-content: space-between;
        gap: calc(30 * var(--site-horizontal-ratio));
        grid-template-columns: calc(240 * var(--site-horizontal-ratio)) 1fr;
    }
    .information>div:nth-child(2)>a>div{
        height: calc(135.2 * var(--site-horizontal-ratio));
    }
    .information>div:nth-child(2)>a>time{
        align-self: self-end;
    }
    .information>div:nth-child(2)>a>p{
        font-weight: 500;
        font-size: calc(16* var(--site-horizontal-ratio));
        line-height: calc(32* var(--site-horizontal-ratio));
        align-self: self-start;
    }
    .information>.btn{
        margin-top: calc(calc(2546 - 2040 - 465.6) * var(--site-horizontal-ratio));
    }
    /* information end */

}

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

}
/* ---------------------------desktop(include ipad)↑--------------------------------- */