/*
***************************************************************
セクション見出し（非表示）
***************************************************************
*/
#campaign-contents .sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/*
***************************************************************
アコーディオン
***************************************************************
*/
/* 見出し */
#campaign-contents .acc-wrap.nml-acc-wrap .triggle {
    font-weight: var(--fwNormal);
}

/* 店舗アコーディオンの上下余白を詰める　　*/
#shop-list-root .nml-acc-wrap {
    margin: 0 !important;
}

#shop-list-root .nml-acc-wrap+.nml-acc-wrap {
    margin-top: 0 !important;
}

/*
***************************************************************
販売店パネル：.shoplist-panel
***************************************************************
*/
#campaign-contents .shoplist-panel {
    display: block;
    height: 100%;
    background-color: var(--greyK2);
    position: relative;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

/*
***************************************************************
画像コンテナ
***************************************************************
*/
#campaign-contents .shoplist-panel .img-box {
    position: relative;
    overflow: hidden;
}

/*
***************************************************************
ブランクアイコン
***************************************************************
*/
#campaign-contents .shoplist-panel .blank-icon {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 16px;
    height: 16px;
    background: url("/assets/images/icn_blank.svg") no-repeat center / contain;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
    z-index: 3;
}

#campaign-contents .shoplist-panel:hover .blank-icon {
    opacity: 1;
    transform: scale(1.2);
}

/*
***************************************************************
オーバーレイテキスト（PC時のみ）
***************************************************************
*/
#campaign-contents .shoplist-panel .img-box::after {
    content: "ご予約はこちら";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(70, 160, 240, 0.7);
    color: #fff;
    font-size: 1.4rem;
    font-weight: bold;
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 2;
    pointer-events: none;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.7);
}

/*
***************************************************************
shimmerエフェクト
***************************************************************
*/
#campaign-contents .shoplist-panel .txt-box {
    padding: 16px 24px 24px;
    position: relative;
    transition: all 0.4s ease;
    overflow: hidden;
}

#campaign-contents .shoplist-panel:hover .txt-box::before {
    content: "";
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.3) 50%,
            rgba(255, 255, 255, 0) 100%);
    transform: skewX(-20deg);
    pointer-events: none;
    z-index: 1;
    animation: shimmer 0.8s ease-out forwards;
}

@keyframes shimmer {
    from {
        left: -75%;
    }

    to {
        left: 125%;
    }
}

/*
***************************************************************
テキスト
***************************************************************
*/
#campaign-contents .shoplist-panel .shopname {
    font-weight: 600;
    font-size: 1.6rem;
    text-align: center;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--greyK30);
}

#campaign-contents .shoplist-panel .txt-box .txt {
    font-size: 1.4rem;
    color: var(--greyK80);
    line-height: 1.6;
    display: block;
}

#campaign-contents .shoplist-panel .txt-box .sub {
    display: block;
    margin-top: 0.5em;
    font-size: 1.3rem;
    color: var(--greyK80);
}

/* ===============================
   PCのみ：ホバー/キーボード操作で同じ見せ方
   （オーバーレイとブランクアイコン）
   =============================== */
/* キーボード操作での可視フォーカス（全端末共通） */
#campaign-contents .shoplist-panel:focus {
    outline: none;
}

#campaign-contents .shoplist-panel:focus-visible {
    outline: 2px solid rgba(0, 0, 0, .25);
    outline-offset: 2px;
    border-radius: 4px;
}

@media (min-width: 769px) {

    /* 画像オーバーレイ */
    #campaign-contents .shoplist-panel:hover .img-box::after,
    #campaign-contents .shoplist-panel:focus-visible .img-box::after {
        opacity: 1;
    }

    /* ブランクアイコン（拡大＆表示） */
    #campaign-contents .shoplist-panel:hover .blank-icon,
    #campaign-contents .shoplist-panel:focus-visible .blank-icon {
        opacity: 1;
        transform: scale(1.2);
    }
}


/*
***************************************************************
スマホ時：ブランクアイコン常時表示／オーバーレイ非表示
***************************************************************
*/
@media screen and (max-width: 768px) {
    #campaign-contents .shoplist-panel .txt-box {
        padding: 16px 12px;
    }

    #campaign-contents .shoplist-panel .shopname {
        font-size: 1.4rem;
    }

    #campaign-contents .shoplist-panel .txt-box .txt,
    #campaign-contents .shoplist-panel .txt-box .sub {
        font-size: 1.3rem;
    }

    #campaign-contents .shoplist-panel .blank-icon {
        opacity: 1;
        transform: none;
    }

    #campaign-contents .shoplist-panel .img-box::after {
        content: none;
        display: none;
    }
}

/*
***************************************************************
斜線装飾：.deco + .deco-inner
***************************************************************
*/
#campaign-contents .deco {
    display: inline-block;
    position: relative;
}

#campaign-contents .deco::before,
#campaign-contents .deco::after {
    content: '';
    width: 2px;
    height: 25px;
    background-color: currentColor;
    position: absolute;
    top: 20%;
}

#campaign-contents .deco::before {
    left: -10px;
    transform: rotate(-27deg);
}

#campaign-contents .deco::after {
    right: -10px;
    transform: rotate(27deg);
}

@media (max-width: 768px) {

    #campaign-contents .deco::before,
    #campaign-contents .deco::after {
        height: clamp(20px, 6vw, 50px);
    }
}

#campaign-contents .deco-inner {
    padding-inline: 1.6rem;
    display: inline-block;
    position: relative;
}

#campaign-contents .deco-inner::before,
#campaign-contents .deco-inner::after {
    content: '';
    width: 2px;
    height: 32px;
    background-color: currentColor;
    position: absolute;
    top: 0%;
}

#campaign-contents .deco-inner::before {
    left: 0;
    transform: rotate(-27deg);
}

#campaign-contents .deco-inner::after {
    right: 0;
    transform: rotate(27deg);
}

@media (max-width: 768px) {

    #campaign-contents .deco-inner::before,
    #campaign-contents .deco-inner::after {
        height: clamp(27px, 8vw, 64px);
    }
}


/*
***************************************************************
アニメーション：fade-in-up
***************************************************************
*/
#campaign-contents .fade-in-up,
#campaign-contents .fade-in-right,
#campaign-contents .fade-in-left {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .45s ease-out, transform .45s ease-out;
    transition-delay: var(--delay, 0ms);
}

#campaign-contents .fade-in-right {
    transform: translateX(24px);
}

#campaign-contents .fade-in-left {
    transform: translateX(-24px);
}

#campaign-contents .fade-in-up.visible,
#campaign-contents .fade-in-right.visible,
#campaign-contents .fade-in-left.visible {
    opacity: 1;
    transform: translate(0, 0);
}

/* 動きを減らす設定のユーザーにはアニメを無効化 */
@media (prefers-reduced-motion: reduce) {

    #campaign-contents .fade-in-up,
    #campaign-contents .fade-in-right,
    #campaign-contents .fade-in-left {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/*
***************************************************************
btn-page-top
***************************************************************
*/
#campaign-contents .btn-page-top {
    position: fixed;
    right: var(--size48);
    bottom: 80px;
    z-index: 30;
    width: var(--size48);
    height: var(--size48);
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

#campaign-contents .btn-page-top.show {
    opacity: 1;
    visibility: visible;
}

#campaign-contents .btn-page-top img {
    width: var(--size24);
    height: var(--size24);
}

@media screen and (max-width: 768px) {
    #campaign-contents .btn-page-top {
        right: var(--size8);
    }
}

/*
***************************************************************
CTA 表示切替（data-cta）
- ラッパー #campaign-contents か、CTAセクションに data-cta を付与
- 未指定 or "both" は両方表示（デフォルト）
***************************************************************
*/

/*
***************************************************************
2つ表示（デフォルト）
***************************************************************
*/
#campaign-contents:not([data-cta]) .cta-item,
#campaign-contents[data-cta="both"] .cta-item,
#campaign-contents [data-cta="both"] .cta-item {
    display: block;
}

/*
***************************************************************
来店予約のみ（2番目＝試乗を隠す）
***************************************************************
*/
#campaign-contents[data-cta="dealer"] .cta-item:nth-of-type(2),
#campaign-contents [data-cta="dealer"] .cta-item:nth-of-type(2) {
    display: none;
}

/*
***************************************************************
試乗予約のみ（1番目＝来店を隠す）
***************************************************************
*/
#campaign-contents[data-cta="drivecar"] .cta-item:nth-of-type(1),
#campaign-contents [data-cta="drivecar"] .cta-item:nth-of-type(1) {
    display: none;
}

/*
***************************************************************
1つだけのときは中央寄せ（左右の余白バランス調整）
***************************************************************
*/
#campaign-contents[data-cta="dealer"] .btn-wrap,
#campaign-contents[data-cta="drivecar"] .btn-wrap,
#campaign-contents [data-cta="dealer"] .btn-wrap,
#campaign-contents [data-cta="drivecar"] .btn-wrap {
    justify-content: center;
}

/*
***************************************************************
Visit Reserve
***************************************************************
*/
#campaign-contents #visit-reserve-section {
    background: var(--greyK2);
    padding-block: var(--blockMg);
}

#campaign-contents #visit-reserve-section>*:first-child {
    margin-top: 0;
}

#campaign-contents #visit-reserve-section>*:last-child {
    margin-bottom: 0;
}

/*
***************************************************************
右：アイコン＋見出し（既存レイアウトのまま）
***************************************************************
*/
#campaign-contents #visit-reserve-section .vr-icon-list.ttl-list {
    list-style: none;
    margin: var(--size16) 0 0;
    padding: 0;
    display: grid;
    row-gap: 48px;
}

#campaign-contents #visit-reserve-section .vr-icon-list.ttl-list li {
    display: grid;
    grid-template-columns: 48px 1fr;
    /* アイコン列 / 見出し列 */
    column-gap: 32px;
    align-items: center;
}

#campaign-contents #visit-reserve-section .vr-icon-list.ttl-list .icn {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#campaign-contents #visit-reserve-section .vr-icon-list.ttl-list .icn img {
    width: 100%;
    height: 100%;
    display: block;
}

#campaign-contents #visit-reserve-section .vr-icon-list.ttl-list .h5ttl {
    margin: 0;
    line-height: 1.6;
}

@media (max-width:768px) {
    #campaign-contents #visit-reserve-section .vr-icon-list.ttl-list {
        row-gap: 24px;
    }
}


/*
***************************************************************
画像カルーセル：四辺の余白を統一（見た目は以前のまま）
***************************************************************
*/
#campaign-contents #visit-reserve-section .cmn-img-slider-wrap {
    padding: 12px;
}

#campaign-contents #visit-reserve-section .cmn-img-slider-wrap .slider-btm-wrap {
    padding: 0;
    margin-top: 8px;
}

/*
***************************************************************
PC：右テキストをカルーセルと縦センター
***************************************************************
*/
@media (min-width:769px) {
    #campaign-contents #visit-reserve-section .txt-img-wrap.ai-s {
        align-items: center !important;
    }
}

/*
***************************************************************
SP（≤768px）：テキスト↔カルーセルの間は 24px を固定
***************************************************************
*/
@media (max-width:768px) {
    #campaign-contents #visit-reserve-section {
        padding-bottom: clamp(8px, 2.5vw, 16px);
    }

    /*
      ***************************************************************
      最後の要素の余白を念のためゼロに
      ***************************************************************
      */
    #campaign-contents #visit-reserve-section .inner-wrap>*:last-child,
    #campaign-contents #visit-reserve-section .inner-s-wrap>*:last-child {
        margin-bottom: 0 !important;
    }

    /*
      ***************************************************************
      スライダーのラッパの下paddingもオフ（重複を避ける）
      ***************************************************************
      */
    #campaign-contents #visit-reserve-section .cmn-img-slider-wrap {
        padding-bottom: 0;
    }

    #campaign-contents #visit-reserve-section .txt-img-wrap {
        gap: 16px;
    }
}

/*
***************************************************************
Drive Reserve
***************************************************************
*/
#campaign-contents #drive-reserve-section {
    background: var(--greyK2);
    padding-block: var(--contentMg);
}

#campaign-contents #drive-reserve-section>*:first-child {
    margin-top: 0;
}

#campaign-contents #drive-reserve-section>*:last-child {
    margin-bottom: 0;
}

/*
  ***************************************************************
  16:9（Brightcove/Video.js用）：inline <style> を排除して共通化
  ***************************************************************
  */
video-js#td-player.video-js.vjs-fluid:not(.vjs-audio-only-mode) {
    padding-top: 56.25%;
}

@media (max-width: 768px) {

    /*
    ***************************************************************
    SPの軽微な間合い調整（必要なら）
    ***************************************************************
    */
    #campaign-contents #drive-reserve-section .video-container {
        margin-top: var(--size16);
    }
}


/*
***************************************************************
注目モデル（SPスライダー）調整（#spOnlySlider）
・右チラ見せ：overflow可視 +（必要なら）右padding
・画像だけ拡大：スライド幅は100%のまま
***************************************************************
*/
/* 共通（SP時） */
@media (max-width: 768px) {
    #spOnlySlider .splide__track {
        overflow: visible;
    }

    #spOnlySlider .splide__track>.splide__list {
        overflow: visible;
    }

    #spOnlySlider .splide__list {
        gap: 14px;
        max-width: none;
        /* CSS側のpaddingは使わず、のぞきはJSのpeek/paddingに任せる */
    }

    #spOnlySlider .splide__slide .mt8 {
        overflow: visible;
    }

    /* ベースの拡大率（控えめ） */
    #spOnlySlider .car-visual {
        display: block;
        width: 100%;
        height: auto;
        transform: scale(1.28);
        transform-origin: center;
        will-change: transform;
    }
}

/* 端末幅で微調整（ネストせずトップレベルに分離！） */
@media (max-width: 420px) {
    #spOnlySlider .car-visual {
        transform: scale(1.30);
    }
}

@media (min-width: 421px) and (max-width: 768px) {
    #spOnlySlider .car-visual {
        transform: scale(1.26);
    }
}

/* 任意：スムーズ感 */
#spOnlySlider .splide__list {
    scroll-behavior: smooth;
}

/*
***************************************************************
フォレスター車種モーダルの受賞テキスト調整
***************************************************************
*/
/* 行全体を中央寄せ：inline-flex の mv-award を中央寄せにする */
#campaign-contents .lp-modal-box[data-car="forester"] .mv-btm-lead {
    text-align: center;
}

/* アイコン＋テキストを横並びに */
#campaign-contents .lp-modal-box[data-car="forester"] .mv-btm-lead .mv-award {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    column-gap: 8px;
}

/* アイコンサイズ */
#campaign-contents .lp-modal-box[data-car="forester"] .mv-btm-lead .mv-award img {
    width: 32px;
    height: auto;
    flex: 0 0 auto;
}

/* テキスト部分はブロック化しておく（左揃えしやすくするため） */
#campaign-contents .lp-modal-box[data-car="forester"] .mv-btm-lead .mv-award-text {
    display: inline-block;
}


/* SP */
@media (max-width: 768px) {

    /* フォントサイズ 1.8rem に上書き */
    #campaign-contents .lp-modal-box[data-car="forester"] .mv-btm-lead .mv-award {
        font-size: 1.8rem !important;
    }

    /* テキストだけ左寄せにする */
    #campaign-contents .lp-modal-box[data-car="forester"] .mv-btm-lead .mv-award-text {
        text-align: left;
    }
}


/*
***************************************************************
工場出荷モーダルの iframe サイズだけ調整
***************************************************************
*/
.modal-win-body[data-area="modal_delivery"] .modal-win-main {
    padding: 0;
}

.modal-win-body[data-area="modal_delivery"] iframe {
    width: 100%;
    height: min(85vh, 900px);
    border: 0;
    display: block;
}

@media (max-width: 768px) {
    .modal-win-body[data-area="modal_delivery"] iframe {
        height: 80vh;
    }
}



/*
***********************************************************
   キャンペーン終了対応
   ***********************************************************
*/
/* =========================================
   終了メッセージ（オーバーレイ用）
   ※ デフォルトは非表示
   ========================================= */
#campaign-contents .cta .apply-button .closeTxt {
    display: none;
}

/* .close が付いたラッパー内ではリンクを無効化 */
#campaign-contents .cta .apply-button.close a {
    pointer-events: none;
}

/* オーバーレイを載せるための position */
#campaign-contents .cta .apply-button.close {
    position: relative;
}

/* =========================================
     終了時オーバーレイ
     ========================================= */
#campaign-contents .cta .apply-button.close .closeTxt {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    background: rgba(0, 0, 0, 0.9);
    color: #fff;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    z-index: 5;
    pointer-events: none;
}

/* SP 時の文字サイズだけ少し下げる */
@media (max-width: 768px) {
    #campaign-contents .cta .apply-button.close .closeTxt {
        font-size: 1.6rem;
    }
}

/* =========================================
     上部の終了案内エリア（黒い帯）の微調整
     ========================================= */
.notice-area-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.notice-area.alert .notice-area-inner {
    padding-top: 10px;
    padding-bottom: 10px;
}

/* ===========================
   車種モーダル内のCTAレイアウト調整
   =========================== */
#campaign-contents .modal-win-body .section.cta {
    margin-left: 0;
    margin-right: 0;
}

#campaign-contents .modal-win-body .section.cta .inner-wrap {
    max-width: 100%;
    padding-left: 0%;
    padding-right: 0%;
}

#campaign-contents .modal-win-body .cta .apply-button.close {
    overflow: hidden;
}

#campaign-contents .modal-win-body .cta .apply-button.close .closeTxt {
    font-size: 1.4rem;
}