.section-inner{
    padding-inline: calc(40 / var(--vw) * var(--base));
}

@media screen and (min-width: 769px) {
    .section-inner{
        max-width: calc(1182 / var(--vw) * var(--base));
        margin-inline: auto;
    }
}

#pagetop{
    position: fixed;
    right: calc(40 / var(--vw) * var(--base));
    bottom: calc(40 / var(--vw) * var(--base));
    z-index: 999;
    background: url("../img/page-top.svg") no-repeat center/contain;
    width: calc(64 / var(--vw) * var(--base));
    height: calc(64 / var(--vw) * var(--base));
    cursor: pointer;
    opacity: 0;
    transition: 0.3s ease;
}

#pagetop.active{
    opacity: 1;
}

@media screen and (min-width: 769px) {
    #pagetop{
        width: calc(48 / var(--vw) * var(--base));
        height: calc(48 / var(--vw) * var(--base));
    }
}

#mv{
    overflow: hidden;
    background-color: #000;
    background-image: url("../img/mv-bg-sp.jpg");
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
}

.mv-inner{
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 100%;
}

#mv-title{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(90 / var(--vw) * var(--base));
}

#mv-title picture{
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    height: 0;
}

#mv-title.active picture{
    height: 100%;
}

#mv-title h1,
#mv-title p{
    display: flex;
    align-items: flex-end;
}

#mv-title h1 picture{
    transition: 0.4s ease-out;
}

#mv-title p picture{
    transition: 0.4s ease-out 0.4s;
}

.mv-item{
    position: absolute;
    z-index: 0;
    width: 100%;
}

#mv-work-title,
#mv-weekend-title{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
}

.mv-title{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(20 / var(--vw) * var(--base));
    background-color: rgba(0,0,0,0.6);
    height: calc(166 / var(--vw) * var(--base));
    padding-inline: calc(40 / var(--vw) * var(--base));
    color: #fff;
    font-size: calc(35 / var(--vw) * var(--base));
    font-weight: 700;
    letter-spacing: 0.025em;
    text-align: center;
    line-height: 1;
}

.mv-title-en{
    width: 100%;
}

@media (max-width: 768px) {
    #pin{
        display: grid;
        grid-template-rows: 1fr calc(404 / var(--vw) * var(--base));
    }

    #mv{
        padding-block-start: calc(106 / var(--vw) * var(--base));
    }
    
    .mv-inner{
        aspect-ratio: 750/1093;
    }

    #mv-title h1{
        width: calc(655 / var(--vw) * var(--base));
        aspect-ratio: 655/136;
    }

    #mv-title p{
        width: calc(695 / var(--vw) * var(--base));
        aspect-ratio: 695/242;
    }

    #mv-work{
        top: 0;
        left: 0;
    }

    #mv-weekend{
        bottom: 0;
        left: 0;      
    }

    #mv-work-image{
        aspect-ratio: 750/540;
        transform: translate(0,220%);
        opacity: 0;
    }

    #mv-weekend-image{
        aspect-ratio: 750/553;
        transform: translate(0,280%);
        opacity: 0;
    }

    #mv-work-title{
        transform: translate(0,280%);
        opacity: 0;
    }

    #mv-weekend-title{
        transform: translate(0,340%);
        opacity: 0;
    }
}

@media screen and (min-width: 769px) {
    #pin{
        display: grid;
        grid-template-rows: 1fr 35%;
        height: 100vh;
    }

    #mv-title{
        gap: calc(48 / var(--vw2) * var(--base2));
    }

    #mv-title h1{
        width: calc(635 / var(--vw2) * var(--base2));
        aspect-ratio: 635/152;
    }

    #mv-title p{
        width: calc(965 / var(--vw2) * var(--base2));
        aspect-ratio: 965/153;
    }

    #mv{
        position: relative;
        background-image: url("../img/mv-bg-pc.jpg");
        aspect-ratio: initial;
        width: 100%;
        padding-block-start: 85px;
    }

    .mv-item{
        display: flex;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    #mv-work{
        justify-content: flex-start;
        z-index: 1;
    }

    #mv-weekend{
        justify-content: flex-end;
        z-index: 0;
    }

    .mv-image{
        height: 100%;
    }

    #mv-work-image{
        width: 100%;
        transform: translate(-35%,120%);
        opacity: 0;
    }

    #mv-work-image .mv-image{
        transform: translateX(calc((1302 - 960)/-1302*100%)) skew(-25deg);
        transform-origin: right center;
        overflow: hidden;
        /*clip-path: polygon(0 0, 100% 0, calc(100% - 362px) 100%, 0 100%);*/
        width: calc(1302/1920*100%);
    }

    #mv-work-image img{
        object-position: right;
        transform: skew(25deg);
        transform-origin: right top;
    }

    #mv-weekend-image{
        width: 100%;
        aspect-ratio: 1920/686;
        transform: translate(-35%,240%);
        opacity: 0;
    }

    #mv-weekend-image img{
        margin-inline-start: calc(200/1920*100%);
    }

    #mv-work-title{
        transform: translate(-35%,160%);
        opacity: 0;
    }

    #mv-weekend-title{
        transform: translate(-35%,240%);
        opacity: 0;
    }

    #mv-weekend-title{
        display: flex;
        align-items: flex-end;
        justify-content: flex-end;
    }

    .mv-title{
        position: relative;
        align-items: flex-start;
        gap: calc(8 / var(--vw) * var(--base));
        background-color: transparent;
        box-sizing: border-box;
        width: 54%;
        height: calc(127 / var(--vw2) * var(--base2));
        font-size: calc(35 / var(--vw2) * var(--base2));
        text-align: left;
    }

    .mv-title:after{
        content: "";
        display: block;
        position: absolute;
        top: 0;
        z-index: -1;
        width: 120%;
        height: 100%;
        background-color: rgba(0,0,0,0.5);
    }

    .mv-title-en{
        width: calc(438 / var(--vw2) * var(--base2));
    }

    #mv-work-title .mv-title{
        top: calc(33 / var(--vw) * var(--base));
        /*clip-path: polygon(0 0, 100% 0, calc(100% - 56px) 100%, 0 100%);*/
    }

    #mv-work-title .mv-title:after{
        right: 0;
        transform: skew(-25deg);
        transform-origin: right top;
    }

    #mv-weekend-title .mv-title{
        bottom: calc(33 / var(--vw) * var(--base));
        /*clip-path: polygon(56px 0, 100% 0, 100% 100%, 0 100%);*/
        padding-inline-start: calc(90 / var(--vw) * var(--base));
    }

    #mv-weekend-title .mv-title:after{
        left: 0;
        transform: skew(-25deg);
        transform-origin: left bottom;
    }
}

#intro{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: calc(484 / var(--vw) * var(--base));
    background-color: var(--bg);
    color: #fff;
}

.intro-lead{
    margin-block-end: 1.0em;
    font-size: calc(36 / var(--vw) * var(--base));
    font-weight: 700;
    letter-spacing: 0.025em;
    text-align: center;
    line-height: 1;
}

@media screen and (min-width: 769px) {
    #intro{
        /*height: calc(410 / var(--vw) * var(--base));*/
        height: auto;
        font-size: calc(18 / var(--vw) * var(--base));
        font-weight: 400;
        line-height: calc(35/18);
        text-align: center;
    }

    .intro-lead{
        font-size: calc(34 / var(--vw) * var(--base));
        text-align: center;
    }
}

#first-edition{
    background: #f3eddf url("../img/first-edition-bg.png") repeat center top/cover;
    padding-block-start: calc(120 / var(--vw) * var(--base));
    padding-block-end: calc(100 / var(--vw) * var(--base));
}

.first-edition-title{
    margin-block-end: calc(38 / var(--vw) * var(--base));
    text-align: center;
}

.first-edition-title img{
    display: inline-block;
    width: calc(195 / var(--vw) * var(--base));
}

.cross-style-logo{
    margin-block-end: calc(60 / var(--vw) * var(--base));
    text-align: center;
}

.cross-style-logo img{
    display: inline-block;
    width: calc(444 / var(--vw) * var(--base));
}

.first-edition-lead{
    margin-block-end: calc(26 / var(--vw) * var(--base));
    line-height: 1;
}

.text-bg{
    display: inline;
    background: linear-gradient(transparent 0%, var(--bg) 0%);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    padding: 0.1em 0.5em 0.2em;
    color: #fff;
    font-size: calc(38 / var(--vw) * var(--base));
    font-style: normal;
    font-weight: 900;
    letter-spacing: 0.03em;
    line-height: calc(60/38);
    white-space: nowrap;
}

.cross-style-rear-view{
    margin-block-end: calc(48 / var(--vw) * var(--base));
}

.accessories-list-wrap{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.accessories-list-item figure{
    height: calc(260 / var(--vw) * var(--base));
}

@media screen and (min-width: 769px) {
    #first-edition{
        background: #f3eddf url("../img/first-edition-bg-pc.jpg") repeat center top/cover;
        padding-block-start: calc(160 / var(--vw) * var(--base));
        padding-block-end: calc(60 / var(--vw) * var(--base));
    }

    .first-edition-wrap{
        display: flex;
        gap: calc(26 / var(--vw) * var(--base));
        margin-block-end: calc(28 / var(--vw) * var(--base));
    }

    .first-edition-title{
        width: calc(195 / var(--vw) * var(--base));
        margin-block-end: 0;
    }

    .cross-style-logo{
        width: calc(370 / var(--vw) * var(--base));
        margin-block-end: 0;
    }

    .cross-style-rear-view{
        width: calc(625 / var(--vw) * var(--base));
        margin-block-start: calc(-140 / var(--vw) * var(--base));
        margin-block-end: calc(30 / var(--vw) * var(--base));
        margin-inline-start: auto;
        margin-inline-end: calc(30 / var(--vw) * var(--base));
    }

    .accessories-list-wrap{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }

    .accessories-list-item figure{
        height: calc(305 / var(--vw) * var(--base));
    }

    .accessories-list-item:first-child{
        grid-column: 3/4;
        grid-row: 1/2;
    }
}

.hard-cargo-section{
    padding-block-start: calc(150 / var(--vw) * var(--base));
    padding-block-end: calc(40 / var(--vw) * var(--base));
}

.hard-cargo-title + p{
    margin-block-start: 0.2em;
    margin-block-end: calc(50 / var(--vw) * var(--base));
}

.hard-cargo-list-wrap{
    width: auto;
}

.hard-cargo-list-item{
    font-size: calc(36 / var(--vw) * var(--base));
    font-weight: 700;
    letter-spacing: 0;
    line-height: calc(44/36);
}

.hard-cargo-list-item span{
    display: inline-block;
    margin-block-start: 0.4em;
}

.hard-cargo-list-item span.icon-square{
    text-indent: 2.0em;
}

.hard-cargo-list-item span.icon-square:before{
    content: "";
    display: inline-block;
    width: 1.0em;
    height: 1.0em;
    margin-inline-end: 0.5em;
    background-color: #ee7700;
    transform: translateY(0.1em);
}

.hard-cargo-list-item small{
    display: inline;
    font-size: calc(26 / var(--vw) * var(--base));
    font-weight: 500;
    letter-spacing: 0.025em;
    line-height: calc(34/26);
}

.hard-cargo-list-item{
    width: auto;
}

.hard-cargo-list-item figure,
.hard-cargo-list-item picture{
    aspect-ratio: 750/472;
}

.movie-link{
    margin-block-start: calc(80 / var(--vw) * var(--base));
    text-align: center;
}

.slick-list{
    width: auto;
}

.btn-movie{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3em;
    background-color: var(--bg);
    box-sizing: border-box;
    width: calc(420 / var(--vw) * var(--base));
    height: calc(80 / var(--vw) * var(--base));
    padding-block-end: 0.1em;
    color: #fff;
    font-size: calc(42 / var(--vw) * var(--base));
    line-height: 1.2;
}

.btn-movie:hover{
    text-decoration-line: none;
}

.btn-movie:after{
    content: "";
    display: inline-block;
    background: url("../img/icon-arrow.png") no-repeat center/contain;
    width: calc(47 / var(--vw) * var(--base));
    height: calc(47 / var(--vw) * var(--base));
    transform: translateY(0.05em);
}

@media screen and (min-width: 769px) {
    .hard-cargo-section{
        padding-block-start: calc(90 / var(--vw) * var(--base));
        padding-block-end: calc(10 / var(--vw) * var(--base));
    }

    .hard-cargo-title{
        width: calc(756 / var(--vw) * var(--base));
        margin-inline: auto;
    }

    .hard-cargo-title + p{
        margin-block-start: 0.2em;
        margin-block-end: calc(40 / var(--vw) * var(--base));
    }

    .hard-cargo-list-wrap{
        display: flex;
        justify-content: center;
        width: max-content;
        max-width: calc(1182 / var(--vw) * var(--base));
        margin-inline: auto;
    }

    #hard-cargo-panel .hard-cargo-list-wrap{
        display: grid;
        grid-template-columns: calc(500/1182*100%) 1fr 1fr;
        grid-template-rows: 1fr max-content;
    }

    #hard-cargo-panel .hard-cargo-list-item{
        min-height: calc(332 / var(--vw) * var(--base));
    }

    #hard-cargo-panel .hard-cargo-list-item:first-child{
        grid-row: span 2;
    }
    #hard-cargo-panel .hard-cargo-list-item:last-child{
        min-height: initial;
    }

    #hard-cargo-flaps .hard-cargo-list-wrap{
        column-gap: calc(18 / var(--vw) * var(--base));
    }

    .hard-cargo-list-item{
        width: auto;
        font-size: calc(18 / var(--vw) * var(--base));
        line-height: calc(22/18);
    }

    .hard-cargo-list-item span{
        display: inline-block;
        margin-block-start: 0.1em;
    }

    .hard-cargo-list-item span.icon-square{
        text-indent: 2.5em;
    }

    #hard-cargo-panel .hard-cargo-list-item span{
        margin-block-start: 0.75em;
        margin-inline-start: 0.75em;
    }

    #hard-cargo-flaps .hard-cargo-list-item span{
        margin-block-start: 0.75em;
    }

    .hard-cargo-list-item small{
        font-size: calc(14 / var(--vw) * var(--base));
        line-height: calc(20/14);
    }

    .hard-cargo-list-item figure,
    .hard-cargo-list-item picture{
        width: auto;
        aspect-ratio: 382/254;
    }  

    .hard-cargo-list-item figure .object-contain,
    .hard-cargo-list-item picture .object-contain{
        object-position: right center;
    }

    .movie-link{
        margin-block-start: calc(60 / var(--vw) * var(--base));
        text-align: center;
    }

    .btn-movie{
        width: calc(282 / var(--vw) * var(--base));
        height: calc(54 / var(--vw) * var(--base));
        font-size: calc(28 / var(--vw) * var(--base));
    }

    .btn-movie:after{
        width: calc(32 / var(--vw) * var(--base));
        height: calc(32 / var(--vw) * var(--base));
    }
}

#next-release{
    background-color: #dedede;
    padding-block-start: calc(140 / var(--vw) * var(--base));
    padding-block-end: calc(100 / var(--vw) * var(--base));
}

.next-release-lead{
    margin-block-end: calc(40 / var(--vw) * var(--base));
}

.next-release-intro{
    background-color: #fff;
    border: 2px solid var(--border);
    margin-block: calc(100 / var(--vw) * var(--base));
    padding-block-end: 0.1em;
    font-size: calc(36 / var(--vw) * var(--base));
    font-weight: 900;
    letter-spacing: 0.03em;
    line-height: calc(60 / var(--vw) * var(--base));
    text-align: center;
}

.cross-style-front-view{
    display: flex;
    justify-content: center;
}

.cross-style-front-view img{
    width: 100vw;
    max-width: inherit;
}

@media screen and (min-width: 769px) {
    #next-release{
        padding-block-start: calc(200 / var(--vw) * var(--base));
        padding-block-end: calc(140 / var(--vw) * var(--base));
    }

    .next-release-wrap{
        display: grid;
        grid-template-columns: 50% 50%;
        grid-template-rows: max-content 1fr;
        margin-block-start: calc(30 / var(--vw) * var(--base));
    }

    .next-release-wrap p{
        margin-block: 0;
        padding-inline: 0.5em;
    }

    .next-release-lead{
        margin-block-start: 0;
        margin-block-end: calc(30 / var(--vw) * var(--base));
    }

    .cross-style-front-view{
        display: flex;
        justify-content: flex-start;
        grid-column: 2/3;
        grid-row: 1/3;
        padding-inline-start: calc(10 / var(--vw) * var(--base));
    }

    .cross-style-front-view img{
        width: auto;
        max-width: 100%;
    }

    .next-release-intro{
        font-size: calc(39 / var(--vw) * var(--base));
        line-height: calc(64 / var(--vw) * var(--base));
    }
}

@media screen and (min-width: 1400px) {
    .cross-style-front-view img{
        max-width: inherit;
        width: calc(670 / var(--vw) * var(--base));
    }
}

.scene-section:not(:last-child){
    margin-block-end: calc(100 / var(--vw) * var(--base));
}

.scene-title{
    width: calc(470 / var(--vw) * var(--base));
}

@media screen and (max-width: 768px) {
    .scene-lead-wrap{
        position: relative;
        margin-block-start: calc(10 / var(--vw) * var(--base));
        padding-block-start: calc(35 / var(--vw) * var(--base));
    }

    .scene-lead{
        position: absolute;
        top: 0;
        left: 0;
    }

    .scene-view{
        display: flex;
        justify-content: center;
    }

    .scene-view img{
        display: inline-block;
        width: 100vw;
        max-width: inherit;
    }
}

@media screen and (min-width: 769px) {
    .scene-section:not(:last-child) {
        margin-block-end: calc(150 / var(--vw) * var(--base));
    }

    #work.scene-section .section-inner{
        display: grid;
        grid-template-columns: calc(470/1182*100%) calc(674/1182*100%);
        grid-template-rows: max-content 1fr;
        gap: calc(38/1182*100%);
    }

    #weekend.scene-section .section-inner{
        display: grid;
        grid-template-columns: calc(674/1182*100%) calc(470/1182*100%);
        grid-template-rows: max-content 1fr;
        gap: calc(38/1182*100%);
    }

    .scene-lead-wrap{
        display: contents;
    }

    #work .scene-view{
        grid-column: 2/3;
        grid-row: 1/3;
    }

    #weekend .scene-view{
        grid-column: 1/2;
        grid-row: 1/3;
    }
}

.next-release-section{
    margin-block-start: calc(120 / var(--vw) * var(--base));
}

.next-release-headline{
    background-color: var(--bg);
    box-sizing: border-box;
    height: calc(60 / var(--vw) * var(--base));
    margin-block-start: 0;
    margin-block-end: calc(24 / var(--vw) * var(--base));
    color: #fff;
    font-size: calc(36 / var(--vw) * var(--base));
    font-weight: 900;
    letter-spacing: 0.03em;
    line-height: calc(56 / var(--vw) * var(--base));
    text-align: center;
}

.next-release-list-item{
    font-size: calc(36 / var(--vw) * var(--base));
    font-weight: 700;
    letter-spacing: 0;
    line-height: calc(44/36);
}

.next-release-list-item span{
    display: inline-flex;
    margin-block-start: 0.5em;
}

.next-release-list-item span:before{
    content: "";
    display: inlie-block;
    background-color: #ec6c00;
    width: calc(36 / var(--vw) * var(--base));
    height: calc(36 / var(--vw) * var(--base));
    clip-path: polygon(0 0,100% 0,0 100%);
}

@media screen and (max-width: 768px) {
    .next-release-list-wrap{
        width: 100%;
    }

    .next-release-list-item{
        width: 100vw;
    }

    .next-release-list-item figure,
    .next-release-list-item picture{
        aspect-ratio: 750/472;
    }

    .next-release-list-item:has(.wide){
        width: calc(1332 / var(--vw) * var(--base));
    }

    .next-release-list-item figure.wide{
        width: calc(1332 / var(--vw) * var(--base));
        aspect-ratio: 1332/472;
    }
}

@media screen and (min-width: 769px) {
    .next-release-section{
        max-width:  calc(1182 / var(--vw) * var(--base));
        margin-block-start: calc(36 / var(--vw) * var(--base));
        margin-inline: auto;
    }

    .next-release-headline{
        margin-block-end: calc(15 / var(--vw) * var(--base));
        font-size: calc(32 / var(--vw) * var(--base));
        font-weight: 700;
    }

    .next-release-list-wrap{
        display: flex;
        gap: calc(12 / var(--vw) * var(--base));
        width: 100%;
    }

    .next-release-list-item{
        font-size: calc(20 / var(--vw) * var(--base));
    }

    .next-release-list-item span:before{
        width: calc(24 / var(--vw) * var(--base));
        height: calc(24 / var(--vw) * var(--base));
    }
}

#catalog{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    position: relative;
    background: url("../img/catalog-view-sp.jpg") no-repeat center/cover;
    aspect-ratio: 750/1132;
}

.cross-style-logo-wh{
    margin-block-end: calc(40 / var(--vw) * var(--base));
    text-align: center;
}

.cross-style-logo-wh img{
    width: calc(444 / var(--vw) * var(--base));
}

.catalog-pdf{
    margin-block-end: calc(40 / var(--vw) * var(--base));
    width: 100%;
    text-align: center;
}

.btn-catalog{
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    border: 2px solid red;
    border-radius: calc(30 / var(--vw) * var(--base));
    width: calc(490 / var(--vw) * var(--base));
    height: calc(64 / var(--vw) * var(--base));
    color: #000;
    font-size: calc(26 / var(--vw) * var(--base));
    font-weight: 500;
    letter-spacing: 0.03em;
    line-height: 1.2;
}

.btn-catalog small{
    font-size: calc(18 / var(--vw) * var(--base));
    font-weight: 500;
}

@media screen and (min-width: 769px) {
    #catalog{
        background: url("../img/catalog-view-pc.jpg") no-repeat center/cover;
        aspect-ratio: initial;
        min-height: calc(876 / var(--vw) * var(--base));
    }

    .cross-style-logo-wh{
        margin-block-end: calc(40 / var(--vw) * var(--base));
        text-align: center;
    }

    .cross-style-logo-wh img{
        width: calc(370 / var(--vw) * var(--base));
    }

    .catalog-pdf{
        margin-block-end: calc(30 / var(--vw) * var(--base));
    }

    .btn-catalog{
        border-radius: calc(20 / var(--vw) * var(--base));
        width: calc(376 / var(--vw) * var(--base));
        height: calc(50 / var(--vw) * var(--base));
        font-size: calc(22 / var(--vw) * var(--base));
    }

    .btn-catalog small{
        font-size: calc(14 / var(--vw) * var(--base));
    }

    .btn-catalog:hover{
        text-decoration-line: none;
    }
}

@media screen and (min-width: 1920px) {
    #catalog{
        aspect-ratio: 1920/876;
    }
}

/**
 * Simple fade transition,
 */
.mfp-fade.mfp-bg {
	opacity: 0;
	-webkit-transition: all 0.15s ease-out; 
	-moz-transition: all 0.15s ease-out; 
	transition: all 0.15s ease-out;
}
.mfp-fade.mfp-bg.mfp-ready {
	opacity: 0.8;
}
.mfp-fade.mfp-bg.mfp-removing {
	opacity: 0;
}

.mfp-fade.mfp-wrap .mfp-content {
	opacity: 0;
	-webkit-transition: all 0.15s ease-out; 
	-moz-transition: all 0.15s ease-out; 
	transition: all 0.15s ease-out;
}
.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
	opacity: 1;
}
.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
	opacity: 0;
}