/*
heading
*/

.top-heading {
    display: flex;
    align-items: center;

    color: #231815;
    font-family: "Cinzel", "Noto Serif JP", serif;
    font-size: calc(3.125rem - clamp(0rem, -0.463rem + 1.16vw, 0.313rem));
    font-weight: 300;
    line-height: 1;
    letter-spacing: 0.3em;

    margin-bottom: 10px;
}

.top-heading::after {
    content: "";
    display: block;
    aspect-ratio: 1 / 1;
    background-color: currentColor;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    margin-left: 0.2em;
    width: 0.2em;
}

.top-heading-sub {
    font-family: "Cinzel", "Noto Serif JP", serif;
    font-size: calc(1.125rem - clamp(0rem, -0.185rem + 0.46vw, 0.125rem));
    font-weight: 300;
    line-height: 1.375;
    letter-spacing: 0.1em;
}

@media (max-width: 640px) {
    .top-heading {
        font-size: clamp(1.563rem, 7.81vw, 3.125rem);
        margin-bottom: clamp(5.008px, 1.56vw, 10px);
    }

    .top-heading::after {
        display: none;
    }

    .top-heading-sub {
        font-size: clamp(0.563rem, 2.81vw, 1.125rem);
    }
}

/*

/*
heading-point
*/

.top-heading-point {
    display: flex;
    align-items: center;
    gap: clamp(5.008px, 2.752px + 0.7vw, 10px);

    font-family: "Cinzel", "Noto Serif JP", serif;
    font-size: clamp(1.5rem, 0.944rem + 1.39vw, 1.875rem);
    font-weight: 300;
    line-height: 1;
    letter-spacing: 0.3em;
}

.top-heading-point__separator {
    display: block;
    background-color: #c6c7c7;
    height: 1px;
    width: 100%;
}

@media (max-width: 640px) {
    .top-heading-point {
        font-size: clamp(1.125rem, 0.75rem + 1.88vw, 1.5rem);
    }
}

/*
note
*/

.top-note {
    font-size: calc(1.125rem - clamp(0rem, -0.463rem + 1.16vw, 0.313rem));
    font-weight: 500;
    line-height: 1.77;
}

@media (max-width: 640px) {
    .top-note {
        font-size: clamp(0.75rem, 0.25rem + 2.5vw, 1.25rem);
    }
}

/*
intro
*/

.top-intro-text-block {
    padding-top: 188px;
    padding-left: clamp(72px, 45.328px + 4.17vw, 90px);
    padding-right: 32px;
    padding-bottom: clamp(108px, 78.368px + 4.63vw, 128px);
}

.top-intro-title {
    color: #0073bc;
    font-family: "Cinzel", "Noto Serif JP", serif;
    font-size: 5rem;
    font-weight: 300;
    line-height: 1;
    letter-spacing: clamp(0rem, -1.852rem + 4.63vw, 1.25rem);
    margin-bottom: calc(38px - clamp(0px, -26.672px + 4.17vw, 18px));
}

.top-intro-text-1 {
    font-size: calc(1.375rem - clamp(0rem, -0.37rem + 0.93vw, 0.25rem));
    font-weight: 500;
    line-height: 1.25;
    margin-bottom: 16px;
}

.top-intro-text-2 {
    font-size: 2.75rem;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: clamp(0rem, -0.038rem + 0.1vw, 0.026rem);
}

@media (max-width: 640px) {
    .top-intro-text-block {
        padding-top: clamp(120px, 19.264px + 15.74vw, 188px);
        padding-left: 16px;
        padding-right: 16px;
        padding-bottom: clamp(108px, 78.368px + 4.63vw, 128px);
    }

    .top-intro-title {
        font-size: clamp(2.5rem, 12.5vw, 5rem);
        margin-bottom: 20px;
    }

    .top-intro-text-1 {
        font-size: clamp(0.75rem, 0.125rem + 3.13vw, 1.375rem);
    }

    .top-intro-text-2 {
        font-size: clamp(1.375rem, 6.88vw, 2.75rem);
    }
}


/*
intro: bus
*/

@keyframes going-top-intro-bus__image {
    0% {
        left: 0;
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    50% {
        opacity: 1;
    }

    100% {
        left: calc(100% - var(--width));
        opacity: 0;
    }
}

.top-intro-bus {
    display: block;
    position: relative;
    overflow-y: visible;
    height: 0;
    width: 100%;
    z-index: 15;
}

.top-intro-bus>img {
    --width: 216px;
    animation: going-top-intro-bus__image 2s linear both;
    animation-delay: 0.2s;

    display: block;
    aspect-ratio: 216 / 65;
    object-fit: contain;

    position: absolute;
    top: 0;
    left: 0;
    height: auto;
    width: var(--width);
    transform: translateY(-90%);
}

@media (max-width: 1024px) {
    .top-intro-bus>img {
        animation: going-top-intro-bus__image 1.5s linear both;
    }
}

@media (max-width: 640px) {
    .top-intro-bus>img {
        --width: clamp(140px, 64px + 23.75vw, 216px);
        animation: going-top-intro-bus__image 1s linear both;
    }
}


/*
intro: circle and sliders
*/

.top-intro-swap-circle-and-sliders {
    display: grid;
    grid-template-columns: 1fr;
}

.top-intro-swap-circle-and-sliders>*:first-child {
    grid-row: 1;
}

.top-intro-swap-circle-and-sliders>*:last-child {
    grid-row: 2;
}

@media (max-width: 1280px) {
    .top-intro-swap-circle-and-sliders>*:first-child {
        grid-row: 2;
    }

    .top-intro-swap-circle-and-sliders>*:last-child {
        grid-row: 1;
    }
}

/*
intro: slider
*/

.top-intro-sliders {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    width: 100%;
}

.top-intro-slider {
    position: relative;
    overflow: hidden;
    aspect-ratio: 7 / 8;
    width: 100%;
    height: auto;
}

.top-intro-slider-sp {
    display: none;
    position: relative;
    overflow: hidden;
    aspect-ratio: 640 / 325;
    width: 100%;
    height: auto;
}

.top-intro-slider__slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    opacity: 0;
}

.top-intro-slider__slide:first-child {
    opacity: 1;
}

.top-intro-slider__slide>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.top-intro-sliders__slider-1 {
    grid-column: 1;
    grid-row: 1;
    z-index: 5;
}

.top-intro-sliders__slider-2 {
    grid-column: 2;
    grid-row: 1;
    z-index: 5;
}

.top-intro-sliders__overlay-1 {
    grid-column: 1;
    grid-row: 1;
    z-index: 10;
}

.top-intro-sliders__overlay-2 {
    grid-column: 2;
    grid-row: 1;
    z-index: 10;
}

.top-intro-slider-overlay {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-rows: auto auto;
    margin-left: auto;
    margin-top: auto;
    padding: 14px 26px;
}

.top-intro-slider-overlay__2 {
    grid-column: 1;
    grid-row: 1;
    color: white;
    font-family: "Cinzel", "Noto Serif JP", serif;
    font-size: clamp(8.5rem, 3.13rem + 13.43vw, 12.125rem);
    font-weight: 400;
    line-height: 0.9;
}

.top-intro-slider-overlay__5 {
    grid-column: 2;
    grid-row: 1;
    color: white;
    font-family: "Cinzel", "Noto Serif JP", serif;
    font-size: clamp(13.125rem, 4.792rem + 20.83vw, 18.75rem);
    font-weight: 400;
    line-height: 0.8;
    margin-right: -0.1em;
}

.top-intro-slider-overlay__label {
    align-self: end;
    grid-column: 3;
    grid-row: 1;
    display: inline-block;
    background-color: white;
    color: black;
    font-family: "Noto Serif JP", serif;
    font-size: calc(1rem - clamp(0rem, -0.278rem + 0.69vw, 0.188rem));
    font-weight: 300;
    line-height: 1.25;
    text-align: center;
    padding: 4px 10px;
    margin-bottom: 20px;
    min-width: clamp(72px, 69.04px + 0.93vw, 82px);
}

.top-intro-slider-overlay__yo {
    grid-column: 2 / 4;
    grid-row: 2;
    color: white;
    font-family: "Cinzel", "Noto Serif JP", serif;
    font-size: clamp(1.125rem, 0.477rem + 1.62vw, 1.563rem);
    font-weight: 300;
    line-height: 1;
    letter-spacing: 0.3em;
    margin-left: 0.5em;
}

@media (max-width: 1280px) {
    .top-intro-sliders {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
        width: 100%;
    }

    .top-intro-slider {
        display: none;
    }

    .top-intro-slider-sp {
        display: block;
    }

    .top-intro-sliders__slider-1 {
        grid-column: 1;
        grid-row: 1;
    }

    .top-intro-sliders__slider-2 {
        grid-column: 1;
        grid-row: 2;
    }

    .top-intro-sliders__overlay-1 {
        grid-column: 1;
        grid-row: 1;
    }

    .top-intro-sliders__overlay-2 {
        grid-column: 1;
        grid-row: 2;
    }
}

@media (max-width: 640px) {
    .top-intro-slider-overlay {
        padding: clamp(7.008px, 2.19vw, 14px) clamp(0px, -26px + 8.13vw, 26px);
    }

    .top-intro-slider-overlay__2 {
        font-size: clamp(4.25rem, 21.25vw, 8.5rem);
    }

    .top-intro-slider-overlay__5 {
        font-size: clamp(6.563rem, 32.81vw, 13.125rem);
        margin-right: 0;
    }

    .top-intro-slider-overlay__label {
        font-size: clamp(0.5rem, 2.5vw, 1rem);
        padding: 4px 5px;
        min-width: clamp(36px, 11.25vw, 72px);
    }

    .top-intro-slider-overlay__yo {
        font-size: clamp(0.563rem, 2.81vw, 1.125rem);
        text-align: right;
    }
}

/*
intro: reserve circle button
*/

@keyframes rotating-top-intro-reserve__circle {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.top-intro-reserve {
    --size: 295px;
    display: block;
    aspect-ratio: 1 / 1;
    border-radius: 100%;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    pointer-events: visible;

    position: relative;
    height: var(--size);
    width: var(--size);
    margin-top: calc(var(--size) * -0.7);
    margin-bottom: calc(var(--size) * -0.3);
    margin-left: auto;
    margin-right: calc(var(--spacing) * 26);
    z-index: 20;
}

.top-intro-reserve__circle {
    animation: rotating-top-intro-reserve__circle 40s linear infinite;
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.top-intro-reserve__content {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 90%;
    height: 90%;
    transform: translate(-50%, -50%);
    transition: transform 0.1s ease-in-out;
    z-index: 2;
}

.top-intro-reserve:hover .top-intro-reserve__content {
    transform: translate(-50%, -50%) scale(1.05);
}

@media (max-width: 1280px) {
    .top-intro-reserve {
        margin-top: calc(var(--size) * -0.3);
        margin-bottom: calc(var(--size) * -0.2);
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 640px) {
    .top-intro-reserve {
        --size: clamp(160px, 25.008px + 42.19vw, 295.008px);
    }
}

/*
intro: features
*/

.top-intro-features {
    display: grid;
    align-items: center;
    justify-content: center;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    grid-template-rows: auto auto auto auto;

    text-align: center;

    padding-top: 60px;
    padding-bottom: clamp(75.008px, 23.152px + 8.1vw, 110px);
}

.top-intro-feature {
    display: contents;
}

.top-intro-feature__icon {
    grid-row: 1;
    display: block;
    margin: 0 auto;
    width: auto;
}

.top-intro-feature__icon-001 {
    height: 68px;
}

.top-intro-feature__icon-002 {
    height: 80px;
}

.top-intro-feature__icon-003 {
    height: 64px;
}

.top-intro-feature__text-1 {
    grid-row: 2;
    font-size: 1.25rem;
}

.top-intro-feature__text-2 {
    grid-row: 3;
    font-size: 3.125rem;
}

.top-intro-feature__text-3 {
    grid-row: 4;
    font-size: calc(1.125rem - clamp(0rem, -0.313rem + 1.56vw, 0.313rem));
}

.top-intro-feature-border,
.top-intro-features::after {
    grid-row: 1 / 5;
    width: 1px;
    height: 100%;
    background-color: #231815;
}

@media (max-width: 1280px) {
    .top-intro-features {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        margin-left: clamp(36px, 20.688px + 4.79vw, 72px);
        margin-right: clamp(36px, 20.688px + 4.79vw, 72px);
    }

    .top-intro-feature {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 44px 0;
    }

    .top-intro-features::after {
        content: "";
    }

    .top-intro-feature-border,
    .top-intro-features::after {
        grid-row: unset;
        height: 1px;
        width: 100%;
    }

    .top-intro-feature__text-1 {
        margin-top: 8px;
    }
}

@media (max-width: 640px) {
    .top-intro-feature__icon-001 {
        height: clamp(46px, 24px + 6.88vw, 68px);
    }

    .top-intro-feature__icon-002 {
        height: clamp(60px, 40px + 6.25vw, 80px);
    }

    .top-intro-feature__icon-003 {
        height: clamp(44px, 24px + 6.25vw, 64px);
    }

    .top-intro-feature__text-1 {
        font-size: clamp(1rem, 0.75rem + 1.25vw, 1.25rem);
    }

    .top-intro-feature__text-2 {
        font-size: clamp(2rem, 0.875rem + 5.63vw, 3.125rem);
    }

    .top-intro-feature__text-3 {
        font-size: clamp(0.75rem, 0.375rem + 1.88vw, 1.125rem);
    }
}

/*
banner
*/

.top-banner {
    display: block;
    aspect-ratio: 1000 / 325;
    background-image: url(../../bus-lp202508/images/banner/banner.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.top-banner__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    backdrop-filter: blur(20px) brightness(1.09);
    clip-path: polygon(0 0, 74% 0%, 44% 100%, 0 100%);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 0 clamp(15.008px, 8.256px + 2.11vw, 30px);
}

.top-banner__content__text-1 {
    font-size: clamp(0.625rem, 0.513rem + 0.56vw, 0.875rem);
    line-height: 1.4;
    margin-bottom: 20px;
}

.top-banner__content__text-2 {
    font-size: clamp(1.25rem, -0.995rem + 5.61vw, 2.625rem);
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 28px;
}

.top-banner__content__link {
    display: inline flex;
    align-items: center;
    justify-content: center;
    gap: clamp(5px, 3.52px + 0.46vw, 10px);

    background-color: #231815;
    border-radius: 999px;

    color: white;
    font-size: clamp(0.688rem, 0.539rem + 0.74vw, 1.188rem);
    font-weight: 500;
    line-height: 1;
    text-decoration: none;

    position: relative;
    padding: 10px 36px 14px 36px;
    transition: all 0.2s ease-in-out;
}

.top-banner__content__link:hover {
    transform: scale(1.05);
}

.top-banner__content__link::after {
    display: block;
    aspect-ratio: 1 / 1;
    background-color: white;
    content: "";
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    width: 0.5em;

    position: absolute;
    top: 50%;
    right: clamp(8px, 5.632px + 0.74vw, 16px);
    transform: translateY(-50%);
}

@media (max-width: 1280px) {
    .top-banner {
        aspect-ratio: 50 / 67;
        background-image: url(../../bus-lp202508/images/banner/banner-sp.webp);
        background-size: cover;
        background-position: right bottom;
        background-repeat: no-repeat;
        margin: 0 auto;
        max-width: min(500px, 100%);
    }

    .top-banner__content {
        align-items: start;
        justify-content: start;
        clip-path: polygon(0 0, 100% 0%, 100% 44%, 0 60%);
        padding: 30px;
    }

    .top-banner__content__text-1 {
        font-size: 1.3125rem;
        letter-spacing: -0.1em;
        margin-bottom: 1rem;
        word-break: keep-all;
    }

    .top-banner__content__text-2 {
        font-size: 2.5rem;
        letter-spacing: -0.1em;
        margin-bottom: 1.25rem;
        word-break: keep-all;
    }

    .top-banner__content__text-3 {
        width: 100%;
    }

    .top-banner__content__link {
        font-size: 1.375rem;
        width: 100%;
    }
}

@media (max-width: 640px) {
    .top-banner__content {
        clip-path: polygon(0 0, 100% 0%, 100% 50%, 0 66%);
        padding: clamp(15.008px, 4.69vw, 30px);
    }

    .top-banner__content__text-1 {
        font-size: calc((100vw - 32px - clamp(15.008px, 4.69vw, 30px) * 2) / 24);
    }

    .top-banner__content__text-2 {
        font-size: calc((100vw - 32px - clamp(15.008px, 4.69vw, 30px) * 2) / 15);
    }

    .top-banner__content__text-3 {
        width: 100%;
    }

    .top-banner__content__link {
        font-size: calc((100vw - 32px - clamp(15.008px, 4.69vw, 30px) * 2) / 25);
        padding: 10px 18px 14px;
        width: 100%;
    }
}

/*
outline
*/

.top-outline {
    display: grid;
    grid-template-columns: 34fr 52fr;
    grid-template-rows: auto 1fr auto;
    column-gap: clamp(16px, -216.72px + 30.3vw, 96px);

    border-bottom: 1px solid #c6c7c7;

    overflow: visible;

    margin-top: clamp(80px, -38.512px + 18.52vw, 160px);
    padding-top: 105px;
}

.top-outline__subtitle {
    margin-bottom: 44px;
}

.top-outline__content {
    grid-column: 1;
    grid-row: 1;
    padding-bottom: clamp(30px, 12.016px + 5.62vw, 70px);
}

.top-outline__points {
    grid-column: 2;
    grid-row: 1 / 4;
}

.top-outline__details {
    grid-column: 1;
    grid-row: 2;
    border-top: 1px solid #c6c7c7;
    padding-top: 70px;
    padding-bottom: 80px;

    font-size: calc(1.25rem - clamp(0rem, -0.278rem + 0.69vw, 0.188rem));
    font-weight: 300;
    line-height: 1.4;
}

.top-outline::after {
    grid-column: 1;
    grid-row: 3;
    display: block;
    aspect-ratio: 35 / 33;
    background-image: url(../../bus-lp202508/images/outline/deco_picture.webp);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    content: "";
    width: 100%;
}

.top-outline__text {
    font-size: calc(1.25rem - clamp(0rem, -0.278rem + 0.69vw, 0.188rem));
    font-weight: 300;
    line-height: 1.85;
}

.top-outline__points {
    display: flex;
    flex-direction: column;
    gap: clamp(30px, 16.512px + 4.21vw, 60px);
    padding-bottom: 110px;
}

.top-outline-point {
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 6.608px + 1.69vw, 24px);

    position: relative;
}

.top-outline-point__image {
    display: block;
    height: auto;
    width: 100%;
}

.top-outline-point__text {
    font-size: clamp(1.375rem, 1.19rem + 0.46vw, 1.5rem);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0em;
    z-index: 2;
}

.top-outline-point::after {
    content: "";
    display: block;

    aspect-ratio: 12 / 7;
    background-image: url(../../bus-lp202508/images/outline/check.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;

    position: absolute;
    bottom: 0;
    right: -34px;

    height: auto;
    width: 120px;
    z-index: 1;
}

@media (max-width: 1280px) {
    .top-outline {
        grid-template-columns: 1fr;
        grid-template-rows: none;
    }

    .top-outline__content {
        grid-column: 1;
        grid-row: 1;
    }

    .top-outline__points {
        grid-column: 1;
        grid-row: 2;
    }

    .top-outline__details {
        grid-column: 1;
        grid-row: 3;
    }

    .top-outline::after {
        display: none;
    }
}

@media (max-width: 640px) {
    .top-outline {
        margin-top: clamp(30px, -20px + 15.63vw, 80px);
        padding-top: clamp(30px, -45.008px + 23.44vw, 105.008px);
    }

    .top-outline__subtitle {
        margin-bottom: clamp(30px, 16px + 4.38vw, 44px);
    }

    .top-outline__text {
        font-size: clamp(1rem, 0.75rem + 1.25vw, 1.25rem);
    }

    .top-outline__details {
        font-size: clamp(1rem, 0.75rem + 1.25vw, 1.25rem);
        padding-top: clamp(35.008px, 10.94vw, 70px);
        padding-bottom: clamp(40px, 12.5vw, 80px);
    }

    .top-outline__points {
        padding-bottom: clamp(30px, -50px + 25vw, 110px);
    }

    .top-outline-point::after {
        width: clamp(80px, 40px + 12.5vw, 120px);
    }

    .top-outline-point__text {
        font-size: clamp(1rem, 0.75rem + 1.25vw, 1.25rem);
    }
}

/*
schedule
*/

.top-schedule {
    border-bottom: 1px solid #c6c7c7;
    position: relative;
    overflow: visible;
    padding: 42px 0 32px;
}

.top-schedule::after {
    display: block;
    aspect-ratio: 59 / 40;
    background-image: url(../../bus-lp202508/images/schedule/picture.webp);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    content: "";
    max-height: 70%;
    width: 60%;

    position: absolute;
    top: 12%;
    right: calc(clamp(0px, -516px + 50vw, 200px) * -1);
}

.top-schedule__heading-sub {
    margin-bottom: clamp(30px, 21.104px + 1.39vw, 36px);
}

.top-schedule__dl {
    margin-bottom: clamp(26px, 11.184px + 2.31vw, 36px);
}

@media (max-width: 1280px) {
    .top-schedule {
        background-color: white;
        padding: 40px 40px clamp(160px, -17.776px + 27.78vw, 280px) 40px;
    }

    .top-schedule::after {
        position: absolute;
        top: 100%;
        right: 50%;
        width: clamp(400px, -44.448px + 69.44vw, 700px);
        transform: translateX(50%) translateY(-50%);
    }
}

@media (max-width: 640px) {
    .top-schedule {
        padding: clamp(20px, 6.25vw, 40px) clamp(20px, 6.25vw, 40px) clamp(80px, 25vw, 160px) clamp(20px, 6.25vw, 40px);
    }

    .top-schedule::after {
        width: clamp(200px, 62.5vw, 400px);
    }

    .top-schedule__heading-sub {
        margin-bottom: clamp(20px, 10px + 3.13vw, 30px);
    }

    .top-schedule__dl {
        margin-bottom: clamp(14px, 2px + 3.75vw, 26px);
    }
}

/*
top-outline-and-schedule
*/

.top-outline-and-schedule {
    padding-bottom: 270px;
}

@media (max-width: 1280px) {
    .top-outline-and-schedule {
        margin-bottom: 130px;
    }
}

@media (max-width: 640px) {
    .top-outline-and-schedule {
        margin-bottom: clamp(30px, -70px + 31.25vw, 130px);
        padding-bottom: clamp(80px, -110px + 59.38vw, 270px);
    }
}

/*
modelhouse
*/

.top-modelhouse {
    padding-top: clamp(145.008px, 107.968px + 5.79vw, 170px);
}

.top-modelhouse-follow-area {
    position: relative;
}

.top-modelhouse-follow-area__area {
    font-size: 1.1875rem;
    font-weight: normal;
    line-height: 1;
    letter-spacing: 0.4em;

    position: absolute;
    top: 0;
    left: calc((100vw - var(--content-width-sm)) / 4 - 1em);
    height: 100%;
    width: 1.1875rem;
}

.top-modelhouse-follow-area__area__text {
    text-align: center;
    text-orientation: mixed;
    word-break: keep-all;
    white-space: nowrap;
    writing-mode: sideways-lr;

    position: sticky;
    top: 0;

    height: 100vh;
}

.top-modelhouse-complex {
    display: grid;
    grid-template-columns: 3fr 1fr;
    grid-template-rows: auto auto;
    margin-bottom: clamp(30px, 18.144px + 1.85vw, 38px);
}

.top-modelhouse-complex__heading {
    grid-column: 1 / 3;
    grid-row: 1;
    margin-bottom: clamp(50px, 26.304px + 3.7vw, 66px);
}

.top-modelhouse-complex__content {
    grid-column: 1 / 3;
    grid-row: 2;
}

.top-modelhouse-complex__text {
    grid-column: 2;
    grid-row: 1 / 3;
    z-index: 5;
}

.top-modelhouse-complex__text>p {
    background-color: white;

    font-size: clamp(2.063rem, 1.6rem + 1.16vw, 2.375rem);
    font-weight: 500;
    line-height: 1;
    text-orientation: mixed;
    writing-mode: vertical-rl;

    padding: 0 0.3em;
    width: fit-content;
}

.top-modelhouse-tabs {
    display: grid;
    align-items: end;
    grid-template-columns: auto auto 1fr;

    border-bottom: 1px solid black;

    margin-bottom: 40px;
}

.top-modelhouse-tabs__item {
    cursor: pointer;
    background-color: #9f9fa0;

    color: white;
    font-size: 1.1875rem;
    font-weight: 500;
    line-height: 1;
    padding: 10px 66px;

    transition: all 0.15s ease-in-out;
}

.top-modelhouse-tabs__item--active {
    background-color: #0073bc;
    padding: 14px 99px;
}

.top-modelhouse-tabs__item:not(.top-modelhouse-tabs__item--active):hover {
    background-color: #71a0bd;
    padding: 14px 66px;
}

.top-modelhouse-about {
    font-size: 1.625rem;
    font-weight: 500;
    line-height: 1.6;
}

.top-modelhouse-intro__image {
    display: block;
    margin-bottom: clamp(20px, 2.224px + 2.78vw, 32px);
    width: 100%;
}

.top-modelhouse-intro__text {
    display: flex;
    align-items: center;
    justify-content: space-between;

    font-size: clamp(1.188rem, 0.539rem + 1.62vw, 1.625rem);
    font-weight: 500;
    line-height: 1;
    text-align: center;

    margin-bottom: clamp(20px, -17.04px + 5.79vw, 45.008px);
}

.top-modelhouse-intro__text>span {
    overflow-wrap: anywhere;
    word-break: keep-all;
}

.top-modelhouse-intro__subimages {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(10px, -7.776px + 2.78vw, 22px);
}

.top-modelhouse-intro__subimages>img {
    display: block;
    width: 100%;
}

.top-modelhouse-point {
    padding-top: clamp(92px, 68.304px + 3.7vw, 108px);
}

.top-modelhouse-point__heading {
    margin-bottom: clamp(16px, -10.672px + 4.17vw, 34px);
}

.top-modelhouse-point__image {
    background-image: linear-gradient(0deg, #f7f7f8 0%, #f7f7f8 50%, white 50%, white 100%);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.top-modelhouse-point__image>img {
    display: block;
    width: 100%;
}

.top-modelhouse-point__content {
    background-color: #f7f7f8;
    padding-top: calc(50px - clamp(0px, -20.736px + 3.24vw, 14px));
    padding-bottom: clamp(90px, 75.184px + 2.31vw, 100px);
}

.top-modelhouse-point__content__heading {
    font-size: calc(1.875rem - clamp(0rem, -0.556rem + 1.39vw, 0.375rem));
    font-weight: 500;
    line-height: 1;
    margin-bottom: clamp(14px, -6.736px + 3.24vw, 28px);
}

.top-modelhouse-point__content__text {
    font-size: calc(1.25rem - clamp(0rem, -0.278rem + 0.69vw, 0.188rem));
    font-weight: 300;
    line-height: 1.8;
}

@media (max-width: 1280px) {
    .top-modelhouse-follow-area__area {
        display: none;
    }

    .top-modelhouse-complex {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
    }

    .top-modelhouse-complex__heading {
        grid-column: 1;
        grid-row: 1;
    }

    .top-modelhouse-complex__content {
        grid-column: 1;
        grid-row: 3;
    }

    .top-modelhouse-complex__text {
        grid-column: 1;
        grid-row: 2;
    }

    .top-modelhouse-complex__text>p {
        background-color: transparent;

        text-orientation: initial;
        writing-mode: initial;

        padding: 0;
        margin-bottom: clamp(50px, 26.304px + 3.7vw, 66px);
    }

    .top-modelhouse-complex__text>p>br {
        display: none;
    }
}

@media (max-width: 640px) {
    .top-modelhouse {
        padding-top: clamp(70px, 21.88vw, 140px);
    }

    .top-modelhouse-complex__heading {
        margin-bottom: clamp(25.008px, 7.81vw, 50px);
    }

    .top-modelhouse-complex__text>p {
        font-size: clamp(1.25rem, 0.438rem + 4.06vw, 2.063rem);
        margin-bottom: clamp(25.008px, 7.81vw, 50px);
    }

    .top-modelhouse-tabs {
        margin-bottom: clamp(20px, 6.25vw, 40px);
    }

    .top-modelhouse-tabs__item {
        padding: 10px clamp(10px, -46px + 17.5vw, 66px);
    }

    .top-modelhouse-tabs__item--active {
        padding: 0.875rem clamp(1.25rem, -3.75rem + 25vw, 6.25rem);
    }

    .top-modelhouse-tabs__item:not(.top-modelhouse-tabs__item--active):hover {
        padding: 14px clamp(10px, -46px + 17.5vw, 66px);
    }

    .top-modelhouse-intro__text {
        font-size: clamp(1rem, 0.75rem + 1.25vw, 1.25rem);
    }

    .top-modelhouse-about {
        font-size: clamp(1.125rem, 0.625rem + 2.5vw, 1.625rem);
    }

    .top-modelhouse-point {
        padding-top: clamp(45.008px, 14.06vw, 90px);
    }

    .top-modelhouse-point__heading {
        margin-bottom: 16px;
    }

    .top-modelhouse-point__content {
        padding-top: clamp(25.008px, 7.81vw, 50px);
        padding-bottom: clamp(45.008px, 14.06vw, 90px);
    }

    .top-modelhouse-point__content__heading {
        font-size: clamp(1.125rem, 0.375rem + 3.75vw, 1.875rem);
        margin-bottom: 14px;
    }

    .top-modelhouse-point__content__text {
        font-size: clamp(1rem, 0.75rem + 1.25vw, 1.25rem);
    }
}

/*
recommended
*/

.top-recommended {
    border: 1px solid #e1e2e2;
    padding-top: clamp(50px, -9.264px + 9.26vw, 90px);
    padding-left: clamp(40px, -164.448px + 31.94vw, 178px);
    padding-right: clamp(30px, -184.816px + 33.56vw, 175.008px);
    padding-bottom: clamp(50px, -31.488px + 12.73vw, 105.008px);
    margin-top: clamp(80px, 50.368px + 4.63vw, 100px);
    margin-bottom: clamp(80px, 35.552px + 6.94vw, 110px);
}

.top-recommended__heading {
    letter-spacing: calc(clamp(0rem, -1.481rem + 3.7vw, 1rem) - 0.125rem);
}

.top-recommended__heading-sub {
    margin-bottom: clamp(45.008px, 7.968px + 5.79vw, 70px);
}

.top-recommended-grid {
    display: grid;
    grid-template-columns: clamp(330px, 211.488px + 18.52vw, 410px) auto;
    grid-template-rows: auto;
    justify-content: space-between;
    gap: 16px;
}

.top-recommended-items__item {
    display: flex;
    align-items: center;
    gap: clamp(8px, 1.712px + 1.97vw, 22px);
    border-bottom: 1px solid #c6c7c7;
    padding: clamp(9px, -4.48px + 4.21vw, 39px) 0;

    font-size: clamp(1.25rem, 0.88rem + 0.93vw, 1.5rem);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0;
}

.top-recommended-items__item:first-child {
    border-top: 1px solid #c6c7c7;
}

.top-recommended-items__item::before {
    content: attr(data-index);

    display: block;
    aspect-ratio: 40 / 47;
    background-image: url(../../bus-lp202508/images/recommended/deco_index.svg);
    background-size: 95% 80%;
    background-position: left top;
    background-repeat: no-repeat;

    color: #231815;
    font-size: clamp(2rem, 1.444rem + 1.39vw, 2.375rem);
    padding-left: 0.5em;
    padding-top: 0.1em;
}

.top-recommended-text {
    font-size: clamp(0.938rem, 0.291rem + 3.23vw, 2.375rem);
    font-weight: 500;
    line-height: 1.43;
    text-orientation: mixed;
    writing-mode: vertical-rl;
    width: fit-content;
}

@media (max-width: 640px) {
    .top-recommended {
        padding-top: clamp(25.008px, 7.81vw, 50px);
        padding-left: clamp(20px, 6.25vw, 40px);
        padding-right: clamp(15.008px, 4.69vw, 30px);
        padding-bottom: clamp(25.008px, 7.81vw, 50px);
        margin-top: clamp(40px, 12.5vw, 80px);
        margin-bottom: clamp(40px, 12.5vw, 80px);
    }

    .top-recommended__heading-sub {
        margin-bottom: clamp(22px, -1.008px + 7.19vw, 45.008px);
    }

    .top-recommended-grid {
        grid-template-columns: 1fr;
    }

    .top-recommended-items {
        grid-row: 2;
    }

    .top-recommended-items__item {
        font-size: clamp(1rem, 0.75rem + 1.25vw, 1.25rem);
    }

    .top-recommended-items__item::before {
        font-size: clamp(1rem, 5vw, 2rem);
    }

    .top-recommended-text {
        grid-row: 1;
        text-orientation: initial;
        writing-mode: initial;
    }
}

/*
about us
*/

.top-aboutus {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    padding-top: clamp(105px, 90.192px + 2.31vw, 115px);
    padding-bottom: 75px;
}

.top-aboutus__content {
    grid-column: 1;
    grid-row: 1;
}

.top-aboutus__heading-sub {
    margin-bottom: clamp(22px, 1.264px + 3.24vw, 36px);
}

.top-aboutus__dl {
    margin-bottom: 20px;
}

.top-aboutus__map {
    grid-column: 2;
    grid-row: 1;
    align-self: center;

    display: flex;
    align-items: center;
    justify-content: end;

    aspect-ratio: 35 / 41;
}

.top-aboutus__map iframe {
    height: 100%;
    width: 100%;
    border: 0;
}

.top-aboutus__note {
    grid-column: 1 / 3;
    grid-row: 2;
}

@media (max-width: 1280px) {
    .top-aboutus {
        grid-template-columns: 1fr;
        padding-top: clamp(50px, 15.63vw, 100px);
        padding-bottom: clamp(35.008px, 10.94vw, 70px);
    }

    .top-aboutus__content {
        grid-column: 1;
        grid-row: 1;
    }

    .top-aboutus__note {
        grid-column: 1;
        grid-row: 2;
        margin-bottom: 75px;
    }

    .top-aboutus__map {
        grid-column: 1;
        grid-row: 3;
        aspect-ratio: unset;
    }

    .top-aboutus__map iframe {
        max-height: unset;
        height: 580px;
        width: 100%;
    }
}

@media (max-width: 640px) {
    .top-aboutus__note {
        margin-bottom: clamp(35.008px, 10.94vw, 70px);
    }

    .top-aboutus__map iframe {
        height: clamp(340px, 100px + 75vw, 580px);
    }
}