@charset "UTF-8";

/**************************************
 * file: slider-settings.css
 * brief: Splide スライダー専用スタイル
 *
 * トップページの写真スライダーについて，
 * 本体の幅・角丸・影，キャプション，
 * 前後矢印，ページネーション，
 * スマホ表示時の調整を管理する．
 **************************************/

/* =========================================================
   調整用変数
   PC表示・タブレット表示・スマホ表示の調整は主にここで行う
========================================================= */

.top-page {
    /* 共通色・影 */
    --photo-slider-shadow: 0 1.6rem 3.8rem rgba(35, 101, 28, 0.16);

    /* スライダー本体 */
    --photo-slider-width: min(100%, 83rem);
    --photo-slider-aspect-ratio: 1.41421356 / 1;

    /* キャプション */
    --photo-slider-caption-left: 2.2rem;
    --photo-slider-caption-bottom: 1.8rem;
    --photo-slider-caption-side-gap: 4.4rem;
    --photo-slider-caption-padding-block: 0.8rem;
    --photo-slider-caption-padding-inline: 1.4rem;
    --photo-slider-caption-bg: rgba(200, 214, 196, 0.5);
    --photo-slider-caption-font-size: 1.3rem;
    --photo-slider-caption-line-height: 1.4;
    --photo-slider-caption-letter-spacing: 0.02em;
    --photo-slider-caption-blur: 0.8rem;

    /* 前後矢印 */
    --photo-slider-arrow-width: 6.4rem;
    --photo-slider-arrow-size: 2.2rem;
    --photo-slider-arrow-border-width: 0.3rem;
    --photo-slider-arrow-left: 2.4rem;
    --photo-slider-arrow-right: 2.4rem;
    --photo-slider-arrow-opacity-visible: 0.7;
    --photo-slider-arrow-opacity-hover: 1;
    --photo-slider-arrow-shadow: drop-shadow(0 0.1rem 0.2rem rgba(0, 0, 0, 0.8));

    /* ページネーション */
    --photo-slider-pagination-bottom: 1.8rem;
    --photo-slider-pagination-dot-size: 1rem;
    --photo-slider-pagination-dot-active-width: 1.6rem;
    --photo-slider-pagination-dot-margin-inline: 0.5rem;
    --photo-slider-pagination-dot-radius: 0.15rem;
    --photo-slider-pagination-dot-bg: rgba(255, 255, 255, 0.55);

    /* transition */
    --photo-slider-arrow-transition: 0.25s ease;
}

/* ==============================
   Slider wrapper
   スライダー全体の外枠
============================== */

.photo-slider-section__inner {
    display: flex;
    justify-content: center;
}

/* ==============================
   Splide body
   スライダー本体
============================== */

.photo-slider {
    position: relative;
    width: var(--photo-slider-width);
    aspect-ratio: var(--photo-slider-aspect-ratio);
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
    border-radius: var(--common-frame-radius-large);
    background: var(--common-white);
    box-shadow: var(--photo-slider-shadow);
}

.photo-slider .splide__track {
    height: 100%;
    overflow: hidden;
    border-radius: var(--common-frame-radius-large);
}

.photo-slider .splide__list {
    height: 100%;
}

.photo-slider .splide__slide {
    position: relative;
    height: 100%;
    background: var(--common-white);
}

/* ==============================
   Slide item
   各スライド
============================== */

.photo-slider__item {
    position: relative;
    height: 100%;
    margin: 0;
    background: var(--common-white);
}

.photo-slider__image {
    height: 100%;
    object-fit: cover;
}

/* ==============================
   Caption
   画像上のキャプション
============================== */

.photo-slider__caption {
    position: absolute;
    left: var(--photo-slider-caption-left);
    bottom: var(--photo-slider-caption-bottom);
    z-index: 4;
    max-width: calc(100% - var(--photo-slider-caption-side-gap));
    padding:
        var(--photo-slider-caption-padding-block)
        var(--photo-slider-caption-padding-inline);
    border-radius: var(--common-frame-radius-small);
    background: var(--photo-slider-caption-bg);
    color: var(--common-white);
    font-size: var(--photo-slider-caption-font-size);
    font-weight: bold;
    line-height: var(--photo-slider-caption-line-height);
    letter-spacing: var(--photo-slider-caption-letter-spacing);
    backdrop-filter: blur(var(--photo-slider-caption-blur));
}

/* ==============================
   Splide arrows
   前後矢印
============================== */

.photo-slider .splide__arrow {
    position: absolute;
    top: 0;
    z-index: 5;
    width: var(--photo-slider-arrow-width);
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    opacity: 0;

    /*
     * Splide標準CSSでは矢印に transform: translateY(-50%) が指定されている。
     * このCSSでは矢印ボタンを height: 100% で全面に広げるため、
     * 標準transformが残ると矢印全体が上にずれる。
     */
    transform: none;

    transition:
        background-color var(--photo-slider-arrow-transition),
        opacity var(--photo-slider-arrow-transition);
}

.photo-slider:hover .splide__arrow {
    opacity: var(--photo-slider-arrow-opacity-visible);
}

.photo-slider .splide__arrow:hover,
.photo-slider .splide__arrow:focus-visible {
    opacity: var(--photo-slider-arrow-opacity-hover);
}

.photo-slider .splide__arrow--prev:hover,
.photo-slider .splide__arrow--prev:focus-visible,
.photo-slider .splide__arrow--next:hover,
.photo-slider .splide__arrow--next:focus-visible {
    background: transparent;
}

.photo-slider .splide__arrow--prev {
    left: 0;
}

.photo-slider .splide__arrow--next {
    right: 0;
}

.photo-slider .splide__arrow svg {
    display: none;
}

/*
 * Splide標準のSVGアイコンは非表示にし，
 * 疑似要素で既存デザインに近い矢印を描画する。
 */
.photo-slider .splide__arrow::before {
    content: "";
    position: absolute;
    top: 50%;
    width: var(--photo-slider-arrow-size);
    height: var(--photo-slider-arrow-size);
    border-top:
        var(--photo-slider-arrow-border-width)
        solid
        var(--common-white);
    border-right:
        var(--photo-slider-arrow-border-width)
        solid
        var(--common-white);
    filter: var(--photo-slider-arrow-shadow);
}

.photo-slider .splide__arrow--prev::before {
    left: var(--photo-slider-arrow-left);
    transform: translateY(-50%) rotate(-135deg);
}

.photo-slider .splide__arrow--next::before {
    right: var(--photo-slider-arrow-right);
    transform: translateY(-50%) rotate(45deg);
}

.photo-slider .splide__arrow:focus-visible {
    outline: 2px solid var(--common-white);
    outline-offset: -0.6rem;
}

/* ==============================
   Splide pagination
   ページネーション
============================== */

.photo-slider .splide__pagination {
    position: absolute;
    left: 0;
    right: 0;
    bottom: var(--photo-slider-pagination-bottom);
    z-index: 5;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
}

.photo-slider .splide__pagination li {
    display: flex;
    align-items: center;
    margin: 0 var(--photo-slider-pagination-dot-margin-inline);
}

.photo-slider .splide__pagination__page {
    display: block;
    width: var(--photo-slider-pagination-dot-size);
    height: var(--photo-slider-pagination-dot-size);
    padding: 0;
    border: 0;
    border-radius: var(--photo-slider-pagination-dot-radius);
    background: var(--photo-slider-pagination-dot-bg);
    opacity: 1;
    transition:
        width 0.2s ease,
        background-color 0.2s ease;
}

.photo-slider .splide__pagination__page.is-active {
    width: var(--photo-slider-pagination-dot-active-width);
    transform: none;
    background: var(--common-white);
}

.photo-slider .splide__pagination__page:focus-visible {
    outline: 2px solid var(--common-white);
    outline-offset: 0.3rem;
}

/* ==============================
   Responsive - tablet
   タブレット表示設定
============================== */

@media screen and (max-width: 834px) {
    .top-page {
        --photo-slider-width: min(100%, 68rem);

        --photo-slider-caption-left: 1.8rem;
        --photo-slider-caption-bottom: 1.5rem;
        --photo-slider-caption-side-gap: 3.6rem;
        --photo-slider-caption-font-size: 1.2rem;

        --photo-slider-arrow-width: 5.6rem;
        --photo-slider-arrow-size: 2rem;
        --photo-slider-arrow-left: 2rem;
        --photo-slider-arrow-right: 2rem;

        --photo-slider-pagination-bottom: 1.5rem;
        --photo-slider-pagination-dot-size: 0.9rem;
        --photo-slider-pagination-dot-active-width: 1.5rem;
    }
}

/* ==============================
   Responsive - smartphone
   スマホ表示設定
============================== */

@media screen and (max-width: 600px) {
    .top-page {
        --photo-slider-width: 100%;

        --photo-slider-caption-left: clamp(1rem, 2vw, 1.2rem);
        --photo-slider-caption-bottom: clamp(0.9rem, 1.8vw, 1.1rem);
        --photo-slider-caption-side-gap: 2.4rem;
        --photo-slider-caption-padding-block: 0.55rem;
        --photo-slider-caption-padding-inline: 1rem;
        --photo-slider-caption-font-size: clamp(1rem, 1.84vw, 1.1rem);

        --photo-slider-arrow-width: clamp(4.2rem, 8vw, 4.8rem);
        --photo-slider-arrow-size: clamp(1.5rem, 2.8vw, 1.7rem);
        --photo-slider-arrow-left: clamp(1.2rem, 2.5vw, 1.5rem);
        --photo-slider-arrow-right: clamp(1.2rem, 2.5vw, 1.5rem);

        --photo-slider-pagination-bottom: 1.1rem;
        --photo-slider-pagination-dot-size: 0.8rem;
        --photo-slider-pagination-dot-active-width: 1.4rem;
        --photo-slider-pagination-dot-margin-inline: 0.35rem;
    }
}