/* =====================
 ベース
===================== */
body {
    font-family: 'Noto Sans JP', sans-serif;
    margin: 0;
}

.site-wrap {
    width: 100%;
    overflow-x: hidden;
}

/* =====================
 幅の基準をFVに統一
===================== */

/* FV基準幅 */
.fv-inner {
    width: 100%;
    margin: 0 auto;
}

@media screen and (min-width: 1024px) {
    .fv-inner {
        max-width: 1100px;
    }
}

/* =====================
 FV以下 全セクション強制統一
===================== */

/* section-box を FV 幅に揃える */
.section-box {
    width: 100%;
    margin: 0 auto;
    padding: 20px 16px;
}

@media screen and (min-width: 1024px) {
    .section-box {
        max-width: 1100px;
    }
}

/* Tailwind の container を無効化して同幅にする */
.container {
    width: 100%;
    margin: 0 auto;
    padding-left: 16px;
    padding-right: 16px;
}

@media screen and (min-width: 1024px) {
    .container {
        max-width: 1100px;
    }
}

/* max-w-* 系を使っている中身をFV幅に揃える */
.max-w-4xl,
.max-w-5xl,
.max-w-6xl {
    max-width: 100%;
}

/* =====================
 画像
===================== */
.fv-image {
    width: 100%;
    height: auto;
    display: block;
}

/* =====================
 カラー
===================== */
.bg-nissan-red { background-color: ##F9FAFB; }
.text-nissan-red { color: #E60012; }
.bg-fair-yellow { background-color: #FFD700; }

/* =====================
 特典背景
===================== */
#benefits {
    background-image: url("img/background01.png");
    background-repeat: repeat-y;
    background-position: center top;
    background-size: cover;
    padding-top: 3rem;
    padding-bottom: 3rem;
}


/* スマホ時：section-box の高さ計算を正常化 */
@media screen and (max-width: 768px) {
    #benefits.section-box {
        display: block;
        overflow: visible;
    }
}

/* =====================
 検索背景
===================== */
#search {
    background-image: url("img/background02.png");
    background-repeat: repeat-y;
    background-position: center top;
    background-size: cover;
    padding-top: 3rem;
    padding-bottom: 3rem;
}


/* スマホ時：section-box の高さ計算を正常化 */
@media screen and (max-width: 768px) {
    #search.section-box {
        display: block;
        overflow: visible;
    }
}

/* =====================
 店舗情報背景
===================== */
#shops {
    background-image: url("img/background03.png");
    background-repeat: repeat-y;
    background-position: center top;
    background-size: cover;
    padding-top: 3rem;
    padding-bottom: 3rem;
}


/* スマホ時：section-box の高さ計算を正常化 */
@media screen and (max-width: 768px) {
    #shops.section-box {
        display: block;
        overflow: visible;
    }
}

/* =====================

/* =====================
 特典カード
===================== */
.benefit-card {
    background: #fff;
    border-radius: 1.25rem;
    box-shadow: 0 10px 25px rgba(0,0,0,.12);
    overflow: hidden;
}

.benefit-badge {
    display: inline-block;
    background: #FFE066;
    color: #E60012;
    font-weight: 900;
    padding: .5rem 1.25rem;
    border-radius: 9999px;
    margin-bottom: 1rem;
}

.benefit-title {
    font-size: 1.75rem;
    font-weight: 900;
    line-height: 1.2;
}

.benefit-title--red { color: #E60012; }
.benefit-title--blue { color: #2563eb; }
.benefit-title--green { color: #15803d; }

/* =====================
 アニメーション
===================== */
.slide-in-left,
.slide-in-right {
    opacity: 0;
    transition: all .8s ease;
}

.slide-in-left { transform: translateX(-80px); }
.slide-in-right { transform: translateX(80px); }

.slide-active {
    opacity: 1;
    transform: translateX(0);
}

/* =====================
 画像ボタン
===================== */
.img-btn {
    transition: transform .2s ease, opacity .2s ease;
}

.img-btn:hover {
    transform: translateY(-2px);
    opacity: .9;
}