@charset "UTF-8";

/* =========================================================
   SCHEDULE PAGE
   Mobile First

   画像トラックと情報カードトラックを分離し、
   同じサイズ・gap・移動量で同期させる
========================================================= */


/* =========================================================
   Lower FV
========================================================= */

.lower-fv--schedule {
    position: relative;
    overflow: hidden;
}

.lower-fv--schedule .lower-fv__content {
    position: relative;
    z-index: 2;
    padding-bottom: 48px;
}


/* =========================================================
   Schedule visual
========================================================= */

.schedule-visual {
    position: relative;

    width: 100%;
    padding: 0 0 110px;

    overflow: hidden;

    background-color: var(--color-white);
}


/* =========================================================
   Blue diagonal band
========================================================= */

.schedule-visual__band {
    position: absolute;
    top: 82px;
    right: -12%;
    left: -12%;
    z-index: 0;

    height: 250px;

    background-color: var(--color-primary);

    transform: rotate(-6deg);
    transform-origin: center;
}


/* =========================================================
   Slider
========================================================= */

.schedule-slider {
    --schedule-slide-width: min(82vw, 350px);
    --schedule-slide-gap: 18px;
    --schedule-track-padding: 20px;
    --schedule-image-height: 310px;
    --schedule-info-width: 74%;
    --schedule-info-right: -4px;
    --schedule-info-overlap: 82px;

    position: relative;
    z-index: 1;

    width: 100%;
    height: 530px;

    cursor: grab;
    touch-action: pan-y;
    user-select: none;
}

.schedule-slider.is-dragging {
    cursor: grabbing;
}


/* =========================================================
   Image viewport
========================================================= */

.schedule-slider__image-viewport {
    position: absolute;
    inset: 0;
    z-index: 1;

    overflow: hidden;
}


/*
   画像トラックだけを白い面で一括して隠す。
   情報カードは別viewportなので隠れない。
*/
.schedule-slider__image-viewport::before,
.schedule-slider__image-viewport::after {
    content: "";

    position: absolute;
    left: -12%;
    z-index: 5;

    width: 124%;
    height: 130px;

    background-color: var(--color-white);

    pointer-events: none;
}

.schedule-slider__image-viewport::before {
    top: -84px;

    transform: rotate(-6deg);
    transform-origin: center bottom;
}

.schedule-slider__image-viewport::after {
    top: calc(var(--schedule-image-height) - 44px);

    transform: rotate(-6deg);
    transform-origin: center top;
}


/* =========================================================
   Information viewport
========================================================= */

.schedule-slider__info-viewport {
    position: absolute;
    inset: 0;
    z-index: 10;

    overflow: visible;

    pointer-events: none;
}


/* =========================================================
   Tracks
========================================================= */

.schedule-slider__track {
    display: flex;
    align-items: stretch;

    gap: var(--schedule-slide-gap);

    width: max-content;
    height: 100%;

    padding-inline: var(--schedule-track-padding);

    will-change: transform;
}

.schedule-slider.is-dragging .schedule-slider__track {
    pointer-events: none;
}


/* =========================================================
   Slides
========================================================= */

.schedule-slider__slide {
    position: relative;

    flex: 0 0 var(--schedule-slide-width);

    width: var(--schedule-slide-width);
    height: 100%;

    margin: 0;
}

.schedule-slider__slide[aria-hidden="true"] {
    pointer-events: none;
}


/* =========================================================
   Image slide
========================================================= */

.schedule-slider__image-slide {
    height: var(--schedule-image-height);

    overflow: hidden;

    background-color: #c8c8c8;
}

.schedule-slider__image-slide img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    pointer-events: none;
    user-select: none;
}


/* =========================================================
   Information slide
========================================================= */

.schedule-slider__info-slide {
    height: 100%;
}


/* =========================================================
   Information card
========================================================= */

.schedule-card__info {
    position: absolute;

    top: calc(
        var(--schedule-image-height) -
        var(--schedule-info-overlap)
    );

    right: var(--schedule-info-right);

    width: var(--schedule-info-width);
    min-height: 188px;

    padding:
        24px
        20px
        25px
        24px;

    background-color: #efefef;

    pointer-events: auto;

}

.schedule-card__info {
    clip-path: polygon(
        0 12%,
        100% 0,
        100% 88%,
        0 100%
    );
}
/* =========================================================
   Time
========================================================= */

.schedule-card__time {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;

    margin: 0 0 12px;

    font-family: var(--font-en);
    font-weight: 700;
    line-height: 0.9;

    white-space: nowrap;
}

.schedule-card__period {
    margin-right: -2px;

    color: #b9cce2;

    font-size: 27px;
    font-weight: 700;
    letter-spacing: -0.055em;
}

.schedule-card__clock {
    color: var(--color-primary);

    font-size: 43px;
    font-weight: 700;
    letter-spacing: -0.06em;
}


/* =========================================================
   Title
========================================================= */

.schedule-card__title {
    position: relative;

    margin: 0 0 8px;
    padding-bottom: 7px;

    color: var(--color-primary);

    font-size: 13px;
    font-weight: 700;
    line-height: 1.5;
}

.schedule-card__title::after {
    content: "";

    position: absolute;
    bottom: 0;
    left: 0;

    width: 54px;
    height: 1px;

    background-color: var(--color-primary);
}


/* =========================================================
   Text
========================================================= */

.schedule-card__text {
    margin: 0;

    color: var(--color-black);

    font-size: 12px;
    line-height: 1.5;

    overflow-wrap: anywhere;
}


/* =========================================================
   Slider dots
========================================================= */

.schedule-slider__dots {
    position: relative;
    z-index: 20;

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

    gap: 9px;

    min-height: 26px;
    margin-top: 18px;
}

.schedule-slider__dot {
    width: 7px;
    height: 7px;

    padding: 0;

    border: 0;
    border-radius: 50%;

    background-color: #b9b9b9;

    cursor: pointer;

    transition:
        width 0.3s ease,
        border-radius 0.3s ease,
        background-color 0.3s ease;
}

.schedule-slider__dot.is-active {
    width: 24px;

    border-radius: 999px;

    background-color: var(--color-primary);
}


/* =========================================================
   Tablet
========================================================= */

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

    .lower-fv--schedule .lower-fv__content {
        padding-bottom: 70px;
    }


    .schedule-visual {
        padding-bottom: 145px;
    }


    .schedule-visual__band {
        top: 110px;
        right: -10%;
        left: -10%;

        height: 335px;

        transform: rotate(-5deg);
    }


    .schedule-slider {
        --schedule-slide-width: min(52vw, 500px);
        --schedule-slide-gap: 24px;
        --schedule-track-padding: 38px;
        --schedule-image-height: 430px;
        --schedule-info-width: 64%;
        --schedule-info-right: -18px;
        --schedule-info-overlap: 104px;

        height: 690px;
    }


    .schedule-slider__image-viewport::before,
    .schedule-slider__image-viewport::after {
        height: 158px;
    }

    .schedule-slider__image-viewport::before {
        top: -82px;

        transform: rotate(-5deg);
    }

    .schedule-slider__image-viewport::after {
        top: calc(var(--schedule-image-height) - 62px);

        transform: rotate(-5deg);
    }


    .schedule-card__info {
        min-height: 218px;

        padding:
            30px
            27px
            31px
            34px;
    }

.schedule-card__info {
    clip-path: polygon(
        0 12%,
        100% 0,
        100% 88%,
        0 100%
    );
}
    .schedule-card__period {
        font-size: 35px;
    }

    .schedule-card__clock {
        font-size: 56px;
    }


    .schedule-card__title {
        margin-bottom: 10px;

        font-size: 15px;
    }


    .schedule-card__text {
        font-size: 14px;
        line-height: 1.5;
    }


    .schedule-slider__dots {
        margin-top: 24px;
    }
}


/* =========================================================
   PC
========================================================= */

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

    .lower-fv--schedule .lower-fv__content {
        padding-bottom: 0;
    }


    .schedule-visual {
        padding-bottom: 190px;
    }


    .schedule-visual__band {
        top: 150px;
        right: -8%;
        left: -8%;

        height: 440px;

        transform: rotate(-5deg);
    }


    .schedule-slider {
        --schedule-slide-width: min(42vw, 720px);
        --schedule-slide-gap: 14vw;
        --schedule-track-padding: 4vw;
        --schedule-image-height: 550px;
        --schedule-info-width: 46%;
        --schedule-info-right: -26px;
        --schedule-info-overlap: 150px;

        height: 820px;
    }


    .schedule-slider__image-viewport {
        overflow: visible;
    }


    .schedule-slider__image-viewport::before,
    .schedule-slider__image-viewport::after {
        width: 122%;
        height: 220px;
    }

    .schedule-slider__image-viewport::before {
        top: -132px;

        transform: rotate(-5deg);
    }

    .schedule-slider__image-viewport::after {
        top: calc(var(--schedule-image-height) - 82px);

        transform: rotate(-5deg);
    }


    .schedule-card__info {
        min-height: 190px;

        padding:
            29px
            27px
            27px;
    }

.schedule-card__info {
    clip-path: polygon(
        0 12%,
        100% 0,
        100% 88%,
        0 100%
    );
}
    .schedule-card__period {
        font-size: 34px;
    }

    .schedule-card__clock {
        font-size: 48px;
    }


    .schedule-card__title {
        margin-bottom: 8px;

        font-size: 13px;
    }


    .schedule-card__text {
        font-size: 14px;
        line-height: 1.5;
    }


    .schedule-slider__dots {
        margin-top: 28px;
    }
}


/* =========================================================
   Large PC
========================================================= */

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

    .schedule-visual {
        padding-bottom: 215px;
    }


    .schedule-visual__band {
        top: 165px;
        height: 500px;
    }


    .schedule-slider {
        --schedule-slide-width: min(40vw, 780px);
        --schedule-slide-gap: 14vw;
        --schedule-track-padding: 5vw;
        --schedule-image-height: 610px;
        --schedule-info-width: 45%;
        --schedule-info-right: -30px;
        --schedule-info-overlap: 132px;

        height: 890px;
    }


    .schedule-slider__image-viewport::before,
    .schedule-slider__image-viewport::after {
        height: 245px;
    }

    .schedule-slider__image-viewport::before {
        top: -145px;
    }

    .schedule-slider__image-viewport::after {
        top: calc(var(--schedule-image-height) - 92px);
    }


    .schedule-card__info {
        min-height: 205px;

        padding:
            33px
            29px
            29px;
    }

.schedule-card__info {
    clip-path: polygon(
        0 12%,
        100% 0,
        100% 88%,
        0 100%
    );
}
    .schedule-card__period {
        font-size: 38px;
    }

    .schedule-card__clock {
        font-size: 52px;
    }


    .schedule-card__title {
        font-size: 14px;
    }


    .schedule-card__text {
        font-size: 14px;
    }
}


/* =========================================================
   Hover
========================================================= */

@media (hover: hover) and (pointer: fine) {

    .schedule-slider__dot:hover {
        background-color: var(--color-primary);
    }

}


/* =========================================================
   Accessibility
========================================================= */

.visually-hidden {
    position: absolute;

    width: 1px;
    height: 1px;

    margin: -1px;
    padding: 0;

    overflow: hidden;

    clip: rect(0 0 0 0);

    white-space: nowrap;

    border: 0;
}


/* =========================================================
   Reduced motion
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .schedule-slider__track {
        transition: none;
    }

}


/* =========================================================
   Information slider diagonal alignment
   カード群の並びを画像と同じ傾斜にする
========================================================= */

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

    /*
       JSがtransformを操作するinfo-trackではなく、
       その外側を傾ける
    */
    .schedule-slider__info-viewport {
        transform: rotate(-5deg);
        transform-origin: center;
    }

    /*
       カードの文字まで傾かないよう、
       各カードを逆方向へ戻す
    */
    .schedule-card__info {
        transform: rotate(5deg);
        transform-origin: center;
    }
}