/* ═══════════════════════════════════════════════════
   Hero Slideshow — v1.6
   ・PC：max-width 指定 → 帯は左右外側に自動配置
   ・SP（≤768px）：帯なし・スライド100%・矢印はスライド上
═══════════════════════════════════════════════════ */

/* ──────────────────────────────────────────
   外枠：横並びレイアウト（左帯 ｜ スライド ｜ 右帯）
────────────────────────────────────────── */
.hero-slideshow {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    user-select: none;
    box-sizing: border-box;
    background: var(--band-color, #e8e8e8);
    /* ナビバーの高さ分の余白 */
    margin-bottom: 44px;
}

/* ──────────────────────────────────────────
   幅モード
────────────────────────────────────────── */
.hero-slideshow.hero-width-normal {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

.hero-slideshow.hero-width-full {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* ──────────────────────────────────────────
   スライドトラック
   max-width が指定された場合は中央寄せ
   帯は flex で残った余白に自動展開
────────────────────────────────────────── */
.hero-slides-track {
    position: relative;
    /* max-width は PHP の inline style で付与 */
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

/* max-width がある場合の中央寄せ補助 */
.hero-slideshow.hero-has-band .hero-slides-track {
    flex: 0 0 auto;    /* 固定幅にして帯が余白を埋める */
    width: calc(100% - var(--band-left, 0px) - var(--band-right, 0px));
}

/* ──────────────────────────────────────────
   サイドバンド
   max-width がある場合：帯が自動で残幅を埋める
────────────────────────────────────────── */
.hero-side-band {
    flex: 1 1 auto;         /* 余白を均等に埋める */
    min-width: var(--band-left, 40px);
    background-color: var(--band-color, #e8e8e8);
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-side-band--left  { min-width: var(--band-left,  40px); }
.hero-side-band--right { min-width: var(--band-right, 40px); }

/* ──────────────────────────────────────────
   ナビバー（STOP + ドット）
   スライドショー直下に全幅で配置
────────────────────────────────────────── */
.hero-nav-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    transform: translateY(100%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 16px 12px;
    background: #fff;
    z-index: 20;
}

/* ──────────────────────────────────────────
   各スライド
────────────────────────────────────────── */
.hero-slide {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.hero-slide.is-active {
    pointer-events: auto;
    z-index: 1;
}

/* ──────────────────────────────────────────
   背景画像
────────────────────────────────────────── */
.hero-slide-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    will-change: transform;
}

/* ──────────────────────────────────────────
   ズームアニメーション
────────────────────────────────────────── */
@keyframes heroZoom {
    from { transform: scale(1.06); }
    to   { transform: scale(1.00); }
}

.hero-zoom-on .hero-slide.is-active .hero-slide-bg {
    animation: heroZoom 8s ease-out forwards;
}

.hero-zoom-off .hero-slide-bg {
    animation: none !important;
    transform: none !important;
}

/* ──────────────────────────────────────────
   切り替え：フェード
────────────────────────────────────────── */
.hero-transition-fade .hero-slide {
    opacity: 0;
    transition: opacity 0.75s ease;
}

.hero-transition-fade .hero-slide.is-active {
    opacity: 1;
}

/* ──────────────────────────────────────────
   切り替え：スライド
────────────────────────────────────────── */
.hero-transition-slide .hero-slide {
    opacity: 1;
    transform: translateX(100%);
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-transition-slide .hero-slide.is-active {
    transform: translateX(0);
}

.hero-transition-slide .hero-slide.slide-out-left {
    transform: translateX(-100%);
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-transition-slide .hero-slide.slide-out-right {
    transform: translateX(100%);
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-transition-slide .hero-slide.slide-in-from-left {
    transform: translateX(-100%);
}

/* ──────────────────────────────────────────
   リンクオーバーレイ
────────────────────────────────────────── */
.hero-slide-link {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: block;
    cursor: pointer;
}

/* ──────────────────────────────────────────
   キャプション黒帯（グラデーション）
   タイトル/サブタイトルがある場合にのみ出力
────────────────────────────────────────── */
.hero-caption-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 55%;          /* グラデーションが届く高さ */
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.72) 0%,
        rgba(0, 0, 0, 0.45) 35%,
        rgba(0, 0, 0, 0)    100%
    );
    z-index: 2;
    pointer-events: none;
}

/* ──────────────────────────────────────────
   キャプション（黒帯の上に表示）
────────────────────────────────────────── */
.hero-slide-caption {
    position: absolute;
    bottom: 16%;
    left: 6%;
    z-index: 5;           /* overlay(2) / link(3) より前面 */
    color: #fff;
    text-shadow: 0 1px 6px rgba(0,0,0,.5);
    max-width: 70%;
    pointer-events: none;
}

.hero-slide-title {
    font-size: clamp(1rem, 2.5vw, 2.2rem);
    font-weight: 700;
    margin: 0 0 0.3em;
    line-height: 1.3;
}

.hero-slide-sub {
    font-size: clamp(0.75rem, 1.2vw, 1rem);
    margin: 0;
    opacity: 0.9;
}

/* ──────────────────────────────────────────
   矢印ボタン — 共通（縦細長シェブロン）
────────────────────────────────────────── */
.hero-arrow {
    background: transparent;
    border: none;
    padding: 6px 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.18s, color 0.18s;
    line-height: 1;
}

/* ── バンド内の矢印（PC）
   帯の「内側端（スライド寄り）」に固定
   position: absolute で帯の右端/左端近くに置く
────────────────────────────────────────── */
.hero-side-band {
    position: relative; /* 矢印の absolute 基準 */
}

.hero-side-band .hero-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #444;
    opacity: 0.75;
    padding: 10px 6px;
    z-index: 10;
}

/* 左バンドの矢印：帯の右端（スライドの直左）に寄せる */
.hero-side-band--left .hero-arrow {
    right: 6px;
    left: auto;
}

/* 右バンドの矢印：帯の左端（スライドの直右）に寄せる */
.hero-side-band--right .hero-arrow {
    left: 6px;
    right: auto;
}

.hero-side-band .hero-arrow:hover {
    opacity: 1;
    color: #000;
}

/* ── バンドなし時：スライド内左右端（絶対配置） ── */
.hero-slides-track .hero-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    color: #fff;
    opacity: 0.85;
    background: rgba(0,0,0,0.25);
    border-radius: 3px;
    padding: 8px 6px;
}

.hero-slides-track .hero-arrow:hover {
    opacity: 1;
    background: rgba(0,0,0,0.45);
}

.hero-slides-track .hero-arrow--prev { left: 8px; }
.hero-slides-track .hero-arrow--next { right: 8px; }

/* ──────────────────────────────────────────
   STOP / PLAY ボタン
────────────────────────────────────────── */
.hero-stop-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    background: #555;
    border: none;
    border-radius: 3px;
    padding: 4px 10px 4px 8px;
    cursor: pointer;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    line-height: 1;
    transition: background 0.18s;
    white-space: nowrap;
}

.hero-stop-btn:hover { background: #333; }

.hero-stop-btn.is-playing .icon-pause { display: block; }
.hero-stop-btn.is-playing .icon-play  { display: none;  }
.hero-stop-btn:not(.is-playing) .icon-pause { display: none;  }
.hero-stop-btn:not(.is-playing) .icon-play  { display: block; }

.stop-label { font-size: 11px; }

/* ──────────────────────────────────────────
   ページネーション ドット
────────────────────────────────────────── */
.hero-pagination {
    display: flex;
    align-items: center;
    gap: 6px;
}

.hero-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid #666;
    background: transparent;
    padding: 0;
    cursor: pointer;
    transition: background 0.22s, border-color 0.22s, transform 0.18s;
}

.hero-dot.is-active {
    background: #333;
    border-color: #333;
    transform: scale(1.25);
}

/* ──────────────────────────────────────────
   アクセシビリティ
────────────────────────────────────────── */
.hero-arrow:focus-visible,
.hero-dot:focus-visible,
.hero-stop-btn:focus-visible {
    outline: 2px solid #005fcc;
    outline-offset: 2px;
}

/* ══════════════════════════════════════════
   SP（スマートフォン）768px 以下
   ・帯は完全非表示
   ・スライドが 100% 幅で表示
   ・矢印はスライド内（半透明背景付き）に表示
══════════════════════════════════════════ */
@media (max-width: 768px) {

    /* 帯を非表示 */
    .hero-side-band {
        display: none !important;
    }

    /* スライドトラックをフル幅に戻す */
    .hero-slideshow.hero-has-band .hero-slides-track {
        flex: 1 1 auto;
        width: 100%;
        max-width: none !important;
    }

    /* 全幅モードの親も SP では画面幅に */
    .hero-slideshow.hero-width-full {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    /* バンドあり時でも矢印をスライド内に強制表示 */
    .hero-slideshow.hero-has-band .hero-slides-track .hero-arrow {
        display: flex;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10;
        color: #fff;
        opacity: 0.85;
        background: rgba(0,0,0,0.25);
        border-radius: 3px;
        padding: 8px 6px;
    }

    .hero-slideshow.hero-has-band .hero-slides-track .hero-arrow--prev { left: 8px; }
    .hero-slideshow.hero-has-band .hero-slides-track .hero-arrow--next { right: 8px; }

    .hero-slideshow.hero-has-band .hero-slides-track .hero-arrow:hover {
        opacity: 1;
        background: rgba(0,0,0,0.45);
    }

    /* キャプション調整 */
    .hero-slide-caption {
        bottom: 10%;
        left: 4%;
    }

    .hero-dot {
        width: 8px;
        height: 8px;
    }
}

/* ──────────────────────────────────────────
   SP用フォールバック矢印（バンドあり時）
   PC では非表示、SP では表示
────────────────────────────────────────── */
.hero-arrow--sp {
    display: none; /* PCでは隠す */
}

@media (max-width: 768px) {
    .hero-arrow--sp {
        display: flex;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10;
        color: #fff;
        opacity: 0.85;
        background: rgba(0,0,0,0.25);
        border-radius: 3px;
        padding: 8px 6px;
    }

    .hero-arrow--sp.hero-arrow--prev { left: 8px; }
    .hero-arrow--sp.hero-arrow--next { right: 8px; }

    .hero-arrow--sp:hover {
        opacity: 1;
        background: rgba(0,0,0,0.45);
    }
}