* {
    margin: 0;
}

/* ベース: 共通の文字機能 */
html,
body {
    font-kerning: normal;
    font-feature-settings: "palt" 1; /* 日本語側に効く想定 */
    font-optical-sizing: auto; /* 対応フォントなら有効 */
    font-weight: 400;
    font-style: normal;
    /* background-color: #ddd; */
}

/* 英文: 自動で英語に適用 */
:lang(en) {
    font-family: "EB Garamond", serif;
}

/* 日本文: 自動で日本語に適用 */
:lang(ja) {
    font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3",
        "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "Noto Serif CJK JP",
        "Source Han Serif JP", "HG明朝E", "MS P明朝", "MS 明朝", serif;
    /* palt相当を宣言的に書くなら ↓（対応ブラウザで有効） */
    font-variant-east-asian: proportional-width;
}

/* どうしてもクラスで分けたいなら（重複を解消） */
.en,
.g-font {
    font-family: "EB Garamond", serif;
}
.jp {
    font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3",
        "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "Noto Serif CJK JP",
        "Source Han Serif JP", "HG明朝E", "MS P明朝", "MS 明朝", serif;
}

.wrapper {
    /* height: 100vh; */
    section {
        /* width: 100%; */
        width: 90%;
        margin: 0 auto;
        padding: 0.5rem 0;
        @media (max-width: 990px) {
            width: 100%;
            padding: 0;
        }
    }
}

.container {
    /* width: min(100% - 2rem); */
    width: 100%;
    /* height: 100%; */
    height: auto;
    padding-top: 60%;
    margin-inline: auto;
    position: relative;
    /* &::before {
        content: "";
        display: block;
        width: 40%;
        height: auto;
        aspect-ratio: 2 / 3;
    } */
    @media (max-width: 990px) {
        display: flex;
        flex-wrap: wrap;
        
        width: 100%;
        padding: 10px;
        /* margin-bottom: 2rem; */

        &::before{
            width: 90%;
        }
    }
    & > .slide {
        width: 50%;
        height: auto;
        background-repeat: no-repeat;
        background-size: contain;
        /* @media (max-width: 990px) {
            display: inherit;
            width: 70%;
            margin-inline: auto;
            padding-block: 0.5rem;
        } */
        @media (max-width: 990px) {
            width: 100%;
            /* width: calc(100% - 20px); */
            height: auto;
            /* aspect-ratio: 2/3; */
            aspect-ratio: 370/500;
            margin-bottom: 1rem;
        }
        & > .inner {
            display: block;
            width: 0%;
            height: auto;
            aspect-ratio: 2 / 3;
            background-repeat: no-repeat;
            background-size: contain;
            background-position: left top;
            transition: all 0.4s ease-in;
            transform-origin: bottom left;
            position: relative;
            &::after {
                content: "";
                display: block;
                width: 100%;
                height: 100%;
                background-color: #fff;
                position: absolute;
                right: 0;
                bottom: 0;
                transition: all 0.4s ease-in;
                transform-origin: right bottom;
                z-index: 1;
            }
            .number {
                display: block;
                width: 100%;
                font-size: 10px;
                position: absolute;
                bottom: 20px;
                transition: all 0.4s ease-in;
                visibility: hidden;
                @media (max-width: 768px) {
                    bottom: 10px;
                }
            }
            &.is-active {
                width: auto;
                max-width: 80%;
                &::after {
                    width: 0%;
                }
                & .number {
                    visibility: inherit;
                }
            }
            @media (max-width: 768px) {
                &.is-active {
                    max-width: 90%;
                }
            }
        }
        img {
            width: 100%;
            height: auto;
        }
        .spec {
            display: flex;
            width: 650px;
            height: auto;
            transform: rotate(90deg);
            position: absolute;
            top: 350px;
            @media (max-width: 768px) {
                top: 320px;
            }
            &::after {
                content: "";
                display: block;
                width: 100%;
                height: 100%;
                background-color: #fff;
                position: absolute;
                top: 0;
                right: 0;
                z-index: 1;
                transition: all 0.4s ease-in;
                transform-origin: right bottom;
            }
            dl {
                display: none;
                margin-right: 2rem;
                dt,
                dd {
                    line-height: 1.7;
                    letter-spacing: 1px;
                }
                dt {
                    font-size: 8px;
                }
                dd {
                    font-size: 11px;
                }
            }
            &.is-active {
                &::after {
                    width: 0%;
                }
                dl {
                    display: block;
                }
                .number {
                    display: block;
                }
            }
        }
        &.left {
            background-position: left top;
            position: absolute;
            top: 0;
            left: 0;
            overflow: hidden;
            /* 高さ用　箱馬 */
            /* &::before {
                content: "";
                display: block;
                width: 80%;
                height: auto;
                aspect-ratio: 2/3;
                position: absolute;
                top: 0;
                left: 0;
            } */
            @media (max-width: 990px){
                position: inherit;
                /* left: 10px; */
                /* &::before{
                    content: "";
                    display: block;
                    width: 90%;
                    height: auto;
                    aspect-ratio: 2/3;
                    position: absolute;
                    top: 0;
                    left: 0;
                    margin-block: .5rem;

                } */
            }
            .spec {
                right: -360px;
                @media (max-width: 768px) {
                    right: -346px;
                }
            }
            .number {
                text-align: right;
                left: 30px;
                @media (max-width: 768px) {
                    left: 28px;
                }
            }
            &.photo {
                span {
                    width: 80%;
                    &::after {
                        display: none;
                    }
                }
            }
        }
        &.right {
            background-position: right top;
            position: absolute;
            top: 0;
            right: 0;
            overflow: hidden;
            /* 高さ用　箱馬 */
            /* &::before {
                content: "";
                display: block;
                width: 80%;
                height: auto;
                aspect-ratio: 2/3;
                position: absolute;
                top: 0;
                left: 0;
            } */
            @media (max-width: 990px){
                position: inherit;
                /* top: inherit;
                bottom: 0;
                left: inherit;
                right: 10px; */
                &::before{
                    width: auto;
                    width: 90%;
                    margin-block: .5rem;
                }
            }
            span {
                margin-left: auto;
            }
            .spec {
                left: -360px;
                @media (max-width: 768px) {
                    left: -346px;
                }
            }
            .number {
                text-align: left;
                right: 30px;
                @media (max-width: 768px) {
                    right: 28px;
                }
            }
            &.photo {
                span {
                    width: 80%;
                    &::after {
                        display: none;
                    }
                    .spec {
                        &::after {
                            width: 0%;
                        }
                        dl {
                            display: block;
                        }
                    }
                }
            }
        }
        /* &.active{
            & .inner{
                width: auto;
                max-width: 80%;
                @media (max-width: 768px) {
                    max-width: 90%;
                }
                &::after {
                    width: 0%;
                }
                & .number {
                    visibility: inherit;
                }
                & .spec{
                    &::after {
                        width: 0%;
                    }
                    dl {
                        display: block;
                    }
                    .number {
                        display: block;
                    }
                }
            }
        } */
    }
}

.trigg {
    position: relative;
    &::after {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        background-color: #fff;
        position: absolute;
        top: 0;
        right: 0;
        transform-origin: right bottom;
        transition: all 0.6s ease;
    }
    &.on {
        &::after {
            width: 0%;
        }
    }
}

.v1 {
    height: 100vh;
    position: relative;
    .logo {
        width: min(75%, 380px);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%) !important;
        img {
            opacity: 0;
            width: 100%;
            height: auto;
        }
    }
}
.v2 {
    width: 100%;
    height: auto;
    position: relative;
    margin-bottom: 10rem !important;
    @media (max-width: 990px) {
        margin-bottom: 4rem !important;
    }
    .top-descri {
        width: min(600px, 35%);
        margin: 0 auto;
        padding: 0 0 4rem;
        font-size: 14px;
        letter-spacing: 2px;
        @media (max-width: 990px) {
            width: 60%;
        }
        @media (max-width: 768px) {
            width: 90%;
        }
    }
    h1.bg_idx {
        display: block;
        line-height: 1.2;
        margin-bottom: 3rem;
        font-family: "EB Garamond", serif;
        font-optical-sizing: auto;
        font-weight: 400;
        font-style: normal;
        letter-spacing: 1.2px;
        font-size: 20px;
        text-align: center;
        @media (max-width: 768px) {
            font-size: 16px;
            letter-spacing: 1px;
        }
    }
    .txt {
        text-align: left;
        p {
            &:first-child {
                line-height: 2.2;
                margin-bottom: 20px;
                letter-spacing: 0.5px;
                font-size: 13px;
                text-align: justify;
                @media (max-width: 768px) {
                    font-size: 11px;
                }
            }
            &:last-child {
                line-height: 2.1;
                font-size: 14px;
                letter-spacing: 1px;
                @media (max-width: 768px) {
                    font-size: 12px;
                }
            }
        }
    }
    .center {
        width: min(620px, 36%);
        margin: 0 auto;
        text-align: center;
        @media (max-width: 990px) {
            width: 60%;
        }
        @media (max-width: 768px) {
            width: 95%;
        }
        span {
            display: block;
            width: 100%;
            height: auto;
            aspect-ratio: 2 / 3;
            background-image: url(../img/catalog1/c1_p06.webp);
            background-repeat: no-repeat;
            background-size: contain;
            background-position: left top;
            transition: all 0.4s ease-in;
            transform-origin: bottom left;
            position: relative;
            /* &::after {
                content: "";
                display: block;
                width: 100%;
                height: 100%;
                background-color: #fff;
                position: absolute;
                right: 0;
                bottom: 0;
                transition: all 0.4s ease-in;
                transform-origin: right bottom;
                z-index: 1;
            } */
        }
        &.on {
            span {
                &::after {
                    width: 0%;
                }
            }
        }
    }
}
.v3 {
    height: auto;
    min-height: 100%;
    .left {
        span {
            background-image: url(../img/catalog1/c1_p08.webp);
        }
    }
    .right {
        span {
            background-image: url(../img/catalog1/c1_p09.webp);
        }
    }
}
.v4 {
    height: auto;
    min-height: 100%;
    .left {
        span {
            background-image: url(../img/catalog1/c1_p010.webp);
        }
    }
    .right {
        span {
            background-image: url(../img/catalog1/c1_p011.webp);
        }
    }
}
.v5 {
    height: auto;
    min-height: 100%;
    .left {
        span {
            background-image: url(../img/catalog1/c1_p012.webp);
        }
    }
    .right {
        span {
            background-image: url(../img/catalog1/c1_p013.webp);
        }
    }
}
.v6 {
    height: auto;
    min-height: 100%;
    .left {
        span {
            background-image: url(../img/catalog1/c1_p014.webp);
        }
    }
    .right {
        span {
            background-image: url(../img/catalog1/c1_p015.webp);
        }
    }
}
.v7 {
    height: auto;
    min-height: 100%;
    /* padding: 16rem 5rem 2rem; */
    @media (max-width: 990px) {
        min-height: auto;
        .container {
            margin-bottom: 0;
        }
        .left {
            display: none;
        }
    }
    .left {
        span {
        }
    }
    .right {
        span {
            background-image: url(../img/catalog1/c1_p017.webp);
        }
        @media (max-width: 990px){
            margin-bottom: 0;
        }
    }
}
.v8 {
    height: auto;
    min-height: 100%;
    .left {
        span {
            background-image: url(../img/catalog1/c1_p018.webp);
        }
    }
    .right {
        span {
            background-image: url(../img/catalog1/c1_p019.webp);
        }
    }
}
.v9 {
    height: auto;
    min-height: 100%;
    @media (max-width: 990px) {
        min-height: auto;
        .container{
            margin-bottom: 0;
        }
        .left {
            display: none;
        }
        .right{
        }
    }
    .left {
        span {
        }
    }
    .right {
        span {
            background-image: url(../img/catalog1/c1_p021.webp);
        }
    }
}
.v10 {
    height: auto;
    min-height: 100%;
    .left {
        span {
            background-image: url(../img/catalog1/c1_p022.webp);
        }
    }
    .right {
        span {
            background-image: url(../img/catalog1/c1_p023.webp);
        }
    }
}
.v11 {
    .container {
        padding-top: 0;
        @media (max-width: 990px){
            margin-bottom: .5rem;
        }
        &::before{
            display: none;
        }
        .center {
            width: 100%;
            height: auto;
            aspect-ratio: 466/335;
            background-image: url(../img/catalog1/c1_p024_25.webp);
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
            margin-bottom: 0;
        }
    }
}
.v12 {
    height: auto;
    min-height: 100%;
    .left {
        span {
            background-image: url(../img/catalog1/c1_p026.webp);
        }
    }
    .right {
        span {
            background-image: url(../img/catalog1/c1_p027.webp);
        }
    }
}
.v13 {
    height: auto;
    min-height: 100%;
    .left {
        span {
            background-image: url(../img/catalog1/c1_p028.webp);
        }
    }
    .right {
        span {
            background-image: url(../img/catalog1/c1_p029.webp);
        }
    }
    @media (max-width: 990px) {
        .container {
            margin-bottom: 0;
            .left{
                margin-bottom: 2.5rem;
            }
            .right{
                margin-bottom: 0;
            }
        }
    }
}
.v14 {
    height: auto;
    min-height: 100%;
    .left {
        span {
            background-image: url(../img/catalog1/c1_p030.webp);
        }
    }
    .right {
        span {
            background-image: url(../img/catalog1/c1_p031.webp);
        }
    }
}
.v15 {
    height: auto;
    min-height: 100%;
    @media (max-width: 990px) {
        min-height: auto;
        .container {
            margin-bottom: 0;
        }
        .left {
            display: none;
        }
    }
    .left {
        span {
        }
    }
    .right {
        span {
            background-image: url(../img/catalog1/c1_p033.webp);
        }
    }
    @media (max-width: 990px) {
        .left {
            display: none;
        }
        .right{
            margin-bottom: 0;
        }
    }
}
.v16 {
    height: auto;
    min-height: 100%;
    .left {
        span {
            background-image: url(../img/catalog1/c1_p034.webp);
        }
    }
    .right {
        span {
            background-image: url(../img/catalog1/c1_p035.webp);
        }
    }
    @media (max-width: 990px) {
        .container {
            margin-bottom: 0;
        }
        .left{
            margin-bottom: 2.5rem;
        }
        .right{
            margin-bottom: 0;
        }
    }
}
.v17 {
    height: auto;
    min-height: 100%;
    .left {
        span {
            background-image: url(../img/catalog1/c1_p036.webp);
        }
    }
    .right {
        span {
            background-image: url(../img/catalog1/c1_p037.webp);
        }
    }
    @media (max-width: 990px){
        .left{
            margin-bottom: 2.5rem;
        }
    }
}
.v18 {
    height: auto;
    min-height: 100%;
    .left {
        span {
            background-image: url(../img/catalog1/c1_p038.webp);
        }
    }
    .right {
        span {
            background-image: url(../img/catalog1/c1_p039.webp);
        }
    }
}
.v19 {
    height: auto;
    min-height: 100%;
    .left {
        span {
            background-image: url(../img/catalog1/c1_p040.webp);
        }
    }
    .right {
        span {
            background-image: url(../img/catalog1/c1_p041.webp);
        }
    }
}
.v20 {
    height: auto;
    min-height: 100%;
    @media (max-width: 990px) {
        min-height: auto;
        .left{
            display: none;
        }
    }
    .right {
        span {
            background-image: url(../img/catalog1/c1_p043.webp);
        }
    }
}
.v21 {
    height: auto;
    min-height: 100%;
    .left {
        span {
            background-image: url(../img/catalog1/c1_p044.webp);
        }
    }
    .right {
        span {
            background-image: url(../img/catalog1/c1_p045.webp);
        }
    }
}
.v22 {
    height: auto;
    min-height: 100%;
    @media (max-width: 990px) {
        min-height: auto;
        .left{
            display: none;
        }
    }
    .right {
        span {
            background-image: url(../img/catalog1/c1_p047.webp);
        }
    }
}
.v23 {
    height: auto;
    min-height: 100%;
    .left {
        span {
            background-image: url(../img/catalog1/c1_p048.webp);
        }
    }
    .right {
        span {
            background-image: url(../img/catalog1/c1_p049.webp);
        }
    }
    @media (max-width: 990px) {
        .container {
            margin-bottom: 0;
        }
        .right{
            margin-bottom: 0;
        }
    }
}
.v24 {
    height: auto;
    min-height: 100%;
    @media (max-width: 990px) {
        min-height: auto;
        .right {
            display: none;
        }
    }
    .left {
        span {
            background-image: url(../img/catalog1/c1_p050.webp);
        }
    }
    .right {
        span {
        }
    }
}
.v25 {
    height: auto;
    min-height: 100%;
    @media (max-width: 990px) {
        min-height: auto;
        .right {
            display: none;
        }
    }
    .left {
        span {
            background-image: url(../img/catalog1/c1_p052.webp);
        }
    }
    .right {
        display: none;
        span {
        }
    }
}

footer {
    display: block;
    height: 30px;
    line-height: 30px;
    padding-top: 3rem;
    text-align: center;
    font-size: 9px;
    font-weight: normal;
    letter-spacing: 1px;
    position: relative;
    z-index: 2;
    @media (max-width: 990px){
        padding-top: 0;
    }
}