.index{
    .section-include-preview{
        padding-top: var(--first-section-padding-top);
        padding-bottom: clamp(100px,18vw,220px)
    }
    .section10{
        position: relative;
        .wrap{
            &::before{
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(37, 37, 37, 0.30);
            }
        }
        .layout2{
            position: relative;
            z-index: 5;
            padding-top: clamp(56px,10vw,129px);
            padding-bottom: clamp(57px,11vw,130px);
            .small-title, .x-large-title{
                color: var(--color-white);
            }
            .x-large-title{
                overflow: hidden;
                position: relative;
                .section20-title-1{
                    transition: 1s;
                    animation: title-2 1s forwards;
                }
                .section20-title-2{
                    font-family: var(--font-1);
                    position: absolute;
                    top: 0; left: 0;
                    opacity: 0; transition: 1s;
                    font-weight: 600;
                    animation: title-1 1s forwards;
                }
                &.active{
                    .section20-title-1{
                        animation: title-1 1s forwards;
                    }
                    .section20-title-2{
                        animation: title-2 1s forwards;
                    }
                }
            }
            .reserve-btn{
                margin-top: clamp(20px,4vw,64px);
                font-size: clamp(15px,3.6vw,18px);
                font-weight: 500;
            }
        }
    }
    .section20{
        padding-top: clamp(100px,19vw,220px);
        padding-bottom: clamp(120px, 18vw, 280px);
        .swiper-container{
            margin-top: clamp(30px,7vw,64px);
            display: flex;
            align-items: center;
            gap: clamp(40px,9vw,163px);
            .swiper{
                height: 660px;
                aspect-ratio: 530/660;
                margin-inline: 0;
                border-radius: 20px;
                position: relative;
            }
            .swiper-slide{
                height: 100%;
                width: 100%;
            }
            .circle-btn{
                position: absolute;
                z-index: 1;
                bottom: 35px;
                right: 42px;
                width: 58px;
                height: 58px;
                border-radius: 50%;
                background: var(--color-black);
                outline: 1px solid var(--color-black);
                outline-offset: -1px;
            }
            .swiper:hover .circle-btn{
                animation: circle-move 1s infinite;
            }
            .navigation{
                flex-grow: 1;
              .page{
                  text-align: right;
                  padding-bottom: clamp(15px,4vw,20px);
                  font-family: var(--font-2);
                  font-size: clamp(12px,2vw,20px);
                  border-bottom: 1px solid var(--color-black);
              }
                .menu{
                    .special-item{
                        position: relative;
                        border-bottom: 1px solid var(--color-black);
                        padding-block: clamp(19px,5vw,22px) clamp(22px,6vw,29px);
                        transition: .4s;
                        .title-bottom{
                            display: flex;
                            justify-content: space-between;
                            align-items: end;
                            font-weight: 300;
                            .link a{
                                font-size: clamp(12px,2vw,14px);
                                border-bottom: 1px solid var(--color-3);
                                color: var(--color-3);
                                font-weight: 300;
                            }
                        }
                        .small-title{
                            color: var(--color-3);
                            transition: .4s;
                            font-weight: 300;
                        }
                    }
                }
            }
        }
    }
}
@keyframes title-1 {
    0% {
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        transform: translateY(-100%);
        opacity: 0;
    }
}
@keyframes title-2 {
    0% {
        transform: translateY(100%);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}
@media(width > 1023px){
    .index{
        .section20{
            .swiper-container{
                .navigation{
                    .menu{
                        .special-item:hover{
                            padding-block: clamp(19px,5vw,30px) clamp(22px,6vw,32px);
                            .small-title{
                                margin-bottom: 61px;
                            }
                        }
                    }
                }
            }
        }
    }
}
@media(width < 1024px) {
    .index{
        .section10{
            /*margin-bottom: 20px;*/
            .layout2{
                .x-large-title{
                    margin-bottom: 5px;
                    .section20-title-1,
                    .section20-title-2{
                    }
                }
            }
        }
        .section20 {
            .swiper-container{
                flex-direction: column;
                .swiper{
                    width: 100%;
                    aspect-ratio: 380/430;
                    height: auto;
                }
                .navigation{
                    width: 100%;
                }
            }
        }
        }
}
@media(width < 768px){
}
@media(width < 400px){
}