/* =========================================
   Import & Variables
   ========================================= */
/* Google Fontsの読み込み (Noto Sans JP, Poppins) */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Poppins:wght@300;400;500;600;700&display=swap');

:root {
    /* 新しいロゴから抽出したカラーパレット */
    /* 明るいブルー (ロゴの右側、上部の三角形など) */
    --primary-color: #4a90e2; 
    /* 濃いブルー (ロゴの左側、下部の三角形、テキストなど) */
    --primary-dark: #2c5282;
    /* ロゴのグラデーションを意識した中間色（ボタンホバー時などに使用） */
    --primary-medium: #3b76c4;

    --text-dark: #333333;
    --text-light: #f8f9fa;
    /* 背景色はクリーンな白とごく薄いブルーグレーで爽やかに */
    --bg-light: #f0f4f8; 

    --shadow-light: rgba(44, 82, 130, 0.1); /* 影の色も濃いブルー系に */
    --shadow-hover: rgba(44, 82, 130, 0.2);
    
    /* ヘッダーの高さ（PC/タブレット版） */
    --header-height: 98px; /* padding-top: 1.5rem + padding-bottom: 1.5rem + ロゴ50px */
}

/* =========================================
   Base Styles (HTML, Body, Headings)
   ========================================= */
/* 固定ヘッダー対策（スクロール時の余白確保） */
html, body {
    overflow-x: hidden; /* スマホで横スクロールを完全禁止 */
}

html {
    scroll-padding-top: calc(var(--header-height)); /* ヘッダー高さ + 余白 */
}

body {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 16px;
    line-height: 1.8;
    color: var(--text-dark);
    background-color: #fff;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', 'Noto Sans JP', sans-serif;
    font-weight: 600; /* 他の見出しは600のまま維持 */
    letter-spacing: 0.05em;
    color: var(--primary-dark); /* 見出しは濃いブルーで */
    margin-bottom: 1.5rem; /* 見出し下の余白を少し調整 */
}

/* PC版の見出しサイズ調整（基準16pxに対する倍率） */
h1 { font-size: 2.5rem; } /* 16px * 2.5 = 40px */
h2 { font-size: 2.25rem; } /* 16px * 2.25 = 36px (双日の見出し基準に合わせる) */
h3 { font-size: 1.5rem; }  /* 16px * 1.5 = 24px */

/* =========================================
   Layout & Utilities
   ========================================= */
section {
    padding: 5rem 0; /* セクションの余白も少し落ち着かせる */
}

.bg-light {
    background-color: var(--bg-light) !important;
}

.tablet-br {
    display: none;
}

.img-cover {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

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

.font-poppins {
    font-family: 'Poppins', sans-serif;
    letter-spacing: 0.05em;
}

/* =========================================
   Components: Buttons & Forms
   ========================================= */
/* ボタンのスタイル（グラデーションを適用） */
.btn-primary {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-medium));
    border: none; /* グラデーションの場合、ボーダーは不要な場合が多い*/
    padding: 0.8rem 2rem;
    font-size: 1rem; /* ボタンの文字も少し小さく */
    border-radius: 8px; /* 角丸を適用 */
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px var(--shadow-light); /* 影を適用 */
    color: #fff;
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--primary-medium), var(--primary-dark));
    box-shadow: 0 8px 20px var(--shadow-hover); /* ホバー時の影 */
    transform: translateY(-2px);
}

.btn-outline-primary {
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
    background-color: transparent;
    padding: 0.8rem 2rem;
    font-size: 1rem; /* ボタンの文字も少し小さく */
    border-radius: 8px; /* 角丸を適用 */
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px var(--shadow-light); /* 影を適用 */
}

.btn-outline-primary:hover {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-medium));
    border-color: transparent; /* ホバー時はボーダーを透明に */
    color: #fff;
    box-shadow: 0 8px 20px var(--shadow-hover); /* ホバー時の影 */
    transform: translateY(-2px);
}

/* コンタクトフォームの微調整 */
.form-control:focus, .form-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.25rem var(--shadow-light);
}

/* =========================================
   Header & Navigation
   ========================================= */
/* ヘッダー専用のコンテナクラス */
.container-header {
    width: 100%;
    padding-right: var(--bs-gutter-x, .75rem);
    padding-left: var(--bs-gutter-x, .75rem);
    margin-right: auto;
    margin-left: auto;
    max-width: 1320px; 
    
    display: flex;
    align-items: center; /* PC/タブレットで垂直中央揃え */
    justify-content: space-between;

    /* スマホメニューを下に落とすために必要 */
    flex-wrap: wrap; 
}

.navbar {
    /* 上下の余白を広げて、大きなロゴが入るスペースを作ります */
    padding-top: 1.5rem;    /* 変更前: 1rem */
    padding-bottom: 1.5rem; /* 変更前: 1rem */
    background-color: #fff !important;
    box-shadow: 0 4px 20px var(--shadow-light); /* 影を少しリッチに */
    height: var(--header-height); /* ヘッダーの高さを定義 */
    box-sizing: border-box; /* paddingを含めた高さ計算 */
}

/* ロゴ画像のスタイル調整 */
.navbar-brand-logo {
    /* 横長ロゴに合わせて高さを調整します */
    height: 50px; /* 110pxから変更。バランスを見て調整してください */
    width: auto;
    transition: transform 0.3s ease; /* ホバー時の効果用 */
}

.navbar-brand:hover .navbar-brand-logo {
    transform: scale(1.02); /* ホバー時に少しだけ拡大 */
}

/* ナビゲーションリンク */
.nav-link {
    font-weight: 600; /* 少し太くして存在感を出す */
    color: var(--primary-dark) !important;
    font-size: 1.1rem; /* ナビリンクは少し大きめを維持 */
    position: relative;
    transition: color 0.3s ease;
    /* HTMLで p-0 をつけたので、paddingの競合を避けるため追記 */
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
}

.nav-link:hover {
    color: var(--primary-color) !important;
}

/* 電話番号・営業時間 */
.navbar-contact-info {
    text-align: right;
    white-space: nowrap; /* これが重要です */
}

.navbar-contact-info .phone-number {
    font-family: 'Poppins', sans-serif; /* 数字をキリッとさせる */
    font-weight: 700;
    font-size: 1.5rem; /* 少し小さく調整 */
    color: var(--primary-dark);
    line-height: 1.2;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    transition: color 0.3s ease;
    white-space: nowrap; /* ここにも念のため追加 */
}

.navbar-contact-info .phone-number i {
    font-size: 1.3rem; /* アイコンサイズ調整 */
    margin-right: 0.5rem;
    color: var(--primary-color); /* アイコンを明るい青に */
}

.navbar-contact-info .phone-number:hover {
    color: var(--primary-color);
}

.navbar-contact-info .hours-info {
    font-size: 0.8rem; /* 少し小さく */
    color: #777;
    margin-top: 0.2rem;
}

/* お問い合わせボタン（ヘッダー内） */
.navbar .btn-primary {
    /* padding: 0.9rem 2.2rem; <-- HTMLの px-4 py-2 で制御します */
    font-size: 1rem; /* ボタン文字調整 */
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(46, 90, 158, 0.3); /* 影を強調 */
    /* 高さ揃えのために追加 */
    display: flex;
    align-items: center;
    justify-content: center;
}

.navbar .btn-primary:hover {
    box-shadow: 0 6px 20px rgba(46, 90, 158, 0.5);
    transform: translateY(-2px);
}

/* =========================================
   Hero Section
   ========================================= */

/* ページのメインヘッダー領域（ヘッダーの高さ分の余白確保） */
#hero-section,
.page-header {
    margin-top: var(--header-height); /* ヘッダー高さ + 余白 */
}

#hero-section {
    position: relative;
    
    /* HTMLに書いていた背景画像をこちらに移動 */
    /* background: url('img/hero_169_logo.png') no-repeat center bottom/cover; */
    background: url('img/hero_summer169.png') no-repeat center bottom/cover;
    
    /* PC版の高さを大きく調整 */
    height: calc(100svh - var(--header-height)); /* 100svhからヘッダーの高さを減算 */
    min-height: 600px; /* 650px から変更して車全体を見せる */
    
    display: flex;
    align-items: center;
}

/* 背景を暗くするフィルター（擬似要素で実装） */
#hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 35, 66, 0.5); /* 濃紺の半透明フィルター */
    z-index: 1;
}

/* コンテナをフィルターの上に表示 */
#hero-section .container {
    z-index: 2;
    position: relative;
}

/* テキスト幅の制限 */
.hero-content {
    max-width: 700px;
}

/* テキストスタイルの定義 */
.lead {
    text-shadow: 0 1px 3px rgba(0,0,0,0.2);
    font-size: 1.4rem;
    /* margin-bottom: 2rem !important; */
    margin-bottom: 0 !important;
    font-family: 'Poppins', sans-serif;
    font-weight: normal;
}

.page-header .lead {
    margin-bottom: 0;
}

/* =========================================
   Cards (General, Rental, CTA, Inventory)
   ========================================= */
/* 基本カードスタイル */
.card {
    border-radius: 8px; /* 角丸を適用 */
    box-shadow: 0 5px 15px var(--shadow-light); /* 影を適用 */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* レンタカーカードの画像ラッパー */
.rental-card .card-img-wrapper {
    height: 250px; /* スマホ版: 画像の高さを250pxに固定 */
    width: 100%;
    overflow: hidden;
}

/* Inventory Card のホバーエフェクト */
.inventory-card:hover {
    transform: translateY(-5px); /* ホバー時にふわっと浮く */
}

/* 新しいCTAカード（問い合わせブロック） */
.cta-card {
    /* 白背景に大きな影をつけて浮き上がらせるモダンなスタイル */
    box-shadow: 0 10px 40px rgba(44, 82, 130, 0.1); 
    border-color: rgba(44, 82, 130, 0.1) !important;
    transition: transform 0.3s ease;
}

/* .cta-card:hover {
    transform: translateY(-5px);
} */

.cta-card h3 {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    color: var(--primary-dark);
}

/* 価格リスト */
.price-container .border-bottom {
    border-color: rgba(0,0,0,0.08) !important;
}

/* =========================================
   Modules: Swiper & Map
   ========================================= */
/* Swiper スライドの枠を固定する */
.instagram-swiper .swiper-slide {
    overflow: hidden; /* ← これが重要：枠を固定 */
    border-radius: 8px;       /* ← 角丸を親に付ける */
}

/* 画像にズーム効果を付ける */
.instagram-swiper .swiper-slide img {
    border-radius: inherit;
    transition: transform 0.4s ease;
}

.instagram-swiper .swiper-slide img:hover {
    transform: scale(1.05); /* 内部が少しズームアップ */
    filter: brightness(0.95);
}

/* マップの埋め込み */
.map-responsive {
    overflow: hidden;
    padding-bottom: 56.25%;
    position: relative;
    height: 0;
    border-radius: 8px; /* 角丸を適用 */
    box-shadow: 0 5px 15px var(--shadow-light); /* 影を適用 */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.map-responsive iframe {
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    position: absolute;
    border-radius: 8px; /* iframe自体にも角丸を適用 */
}

/* =========================================
   Footer
   ========================================= */
footer {
    background-color: var(--primary-dark);
    color: var(--text-light);
    padding: 4rem 0; /* 余白を調整 */
    font-size: 0.95rem; /* フッター文字を少し小さく */
}

footer h5 { color: var(--text-light); }
footer a { color: #b3cce6; text-decoration: none; transition: color 0.3s ease; } /* リンク色を調整 */
footer a:hover { color: var(--text-light); }

.company-info-list li { margin-bottom: 0.5rem; }

/* フッター用ロゴスタイル */
.footer-logo {
    height: 60px; /* 横長ロゴに合わせて調整。80pxから変更 */
    width: auto;
    margin-bottom: 1.5rem;
}


/* =========================================
   Rental Page Specific
   ========================================= */
.rental-hero {
    background: linear-gradient(rgba(44, 82, 130, 0.7), rgba(44, 82, 130, 0.5)), url('img/rental_hero.png');
    background-size: cover;
    background-position: center;
    color: white;
    padding: 8rem 0 6rem;
    margin-top: var(--header-height);
}

.feature-icon-box {
    text-align: center;
    padding: 2rem;
    height: 100%;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: transform 0.3s ease;
}
/* .feature-icon-box:hover {
    transform: translateY(-5px);
} */
.feature-icon {
    font-size: 2.5rem;
    color: var(--primary-color);
    margin-bottom: 1rem;
}

.car-card {
    height: 100%;
    border: none;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    transition: transform 0.3s ease;
    overflow: hidden;
}
.car-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.12);
}
.car-img-top {
    height: 220px;
    object-fit: cover;
    width: 100%;
}
.car-specs {
    font-size: 0.9rem;
    color: #666;
}
.car-specs i {
    width: 20px;
    text-align: center;
    margin-right: 5px;
    color: var(--primary-medium);
}
.price-tag {
    color: var(--primary-dark);
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
}
.location-box {
    background-color: #f8f9fa;
    border-left: 5px solid var(--primary-color);
}

/* Japanese sub-text styling */
.ja-sub {
    display: block;
    font-size: 0.85em;
    color: #888;
    font-weight: normal;
    margin-top: 0.2rem;
    font-family: 'Noto Sans JP', sans-serif;
}
.text-white .ja-sub {
    color: rgba(255,255,255,0.8);
}


/* =========================================
   Custom Tile Checkbox (お問い合わせの種類)
   ========================================= */

.custom-tile-checkbox {
position: relative;
padding-left: 0; /* Bootstrapのデフォルトパディングをリセット */
margin-bottom: 0;
}

/* チェックボックス本体の位置とサイズ調整 */
.custom-tile-checkbox .form-check-input {
    position: absolute;
    left: 2.5rem;
    top: 50%;
    transform: translateY(-50%);
    margin-top: 0;
    z-index: 2;
    width: 1.4rem;
    height: 1.4rem;
    cursor: pointer;
    border-color: #adb5bd;
}

/* ラベル（外枠のカード部分）のデザイン */
.custom-tile-checkbox .form-check-label {
    display: block;
    background-color: #fff;
    border: 1px solid #dee2e6; /* 薄いグレーの枠線 */
    border-radius: 8px; /* 角丸 */
    padding: 1rem 1rem 1rem 3.5rem; /* チェックボックス分の左余白を確保 */
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 500;
    color: var(--text-dark);
}

/* ホバー時の挙動 */
.custom-tile-checkbox .form-check-label:hover {
    background-color: var(--bg-light); /* 薄い背景色 */
    border-color: var(--primary-medium); /* 枠線を少し青く */
}

/* チェックされた時の挙動 */
.custom-tile-checkbox .form-check-input:checked + .form-check-label {
    border-color: var(--primary-color); /* 枠線をメインカラーに */
    background-color: #f0f8ff; /* 非常に薄い青色（AliceBlue） */
    color: var(--primary-dark);
    font-weight: 600;
    box-shadow: 0 0 0 1px var(--primary-color); /* 枠線を太く見せる */
}

/* チェックされた時のチェックボックス本体の色 */
.custom-tile-checkbox .form-check-input:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

/* =========================================
   Contact Form Confirmation & Thanks Pages
   ========================================= */

/* 送信完了ページのアイコンサイズ */
.thanks-icon {
    font-size: 5rem;
    color: var(--primary-color) !important;
    animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* アイコンがポンッと出てくるアニメーション */
@keyframes popIn {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* =========================================
   Responsive Design
   ========================================= */

/* --- タブレット・スマホ (max-width: 991px) --- */
@media (max-width: 1080px) {
    /* ロゴサイズ調整 */
    .navbar-brand-logo {
        height: 50px; 
    }
}

/* タブレット (iPad縦など 768px 〜 1080px) 専用の調整 */
@media (min-width: 768px) and (max-width: 1080px) {
    html {
        scroll-padding-top: var(--header-height); /* ヘッダー高さ + 余白 */
    }
        
    /* 1. 全体のコンテナ幅を限界まで使う */
    .container-header {
        padding-left: 10px;
        padding-right: 10px;
    }
    
    /* 2. ロゴサイズを小さくしてあふれを防ぐ */
    .navbar-brand-logo {
        height: 45px;
    }

    /* 3. メニューの文字サイズと余白を詰める */
    .navbar-nav .nav-link {
        font-size: 0.9rem; 
        padding-left: 0.3rem !important; /* 0.5rem -> 0.8rem に拡大 */
        padding-right: 0.3rem !important; /* 0.5rem -> 0.8rem に拡大 */
    }

    /* 4. 右側のエリア（電話・ボタン）の間隔を詰める */
    .d-flex.gap-3 {
        gap: 0.8rem !important; /* さらに少し詰める */
    }
    .ms-md-4 {
        margin-left: 1.2rem !important; 
    }

    /* 5. 電話番号を小さく */
    .navbar-contact-info .phone-number {
        font-size: 1rem; /* 1.1rem -> 1.0rem に縮小 */
    }
    .navbar-contact-info .phone-number i {
        margin-right: 0.2rem;
        font-size: 1rem;
    }

    /* 6. 【修正】営業時間を「消す」のではなく「2行で小さく表示」に変更 */
    .navbar-contact-info .hours-info {
        display: block !important; /* 表示を強制 */
        font-size: 0.6rem; /* 文字をかなり小さく */
        line-height: 1.1;  /* 行間を詰める */
        margin-top: 2px;
        white-space: normal; /* 改行を許可 */
    }

    /* 7. お問い合わせボタンを小さく */
    .navbar .btn-primary {
        padding: 0.25rem 0.5rem; /* さらに少しパディングを削減 */
        font-size: 0.75rem;
    }

    #hero-section {
        margin-top: var(--header-height);
        padding: 4rem 0; /* 上下に余白を持たせる */
        height: calc(100svh - var(--header-height)); /* 100svhからヘッダーの高さを減算 */
        min-height: 300px; /* 650px から変更して車全体を見せる */
    }

    .page-header {
        margin-top: var(--header-height);
        padding: 4rem 0; /* 上下に余白を持たせる */
    }
    
    /* タブレット版：背景画像を右寄りに調整して車が見えるように */
    #hero-section {
        background-position: 70% center;
    }

    .rental-hero {
        background-position: 75% center;
    }
}

/* --- スマホ専用の調整 --- */
@media (max-width: 767px) {
    :root {
        --header-height: 76px;
    }
    html {
        scroll-padding-top: var(--header-height); /* ヘッダー高さ + 余白 */
    }
    
    /* 基準フォントサイズを14pxに変更 */
    html { font-size: 14px; }

    /* 見出しサイズ調整 */
    h1 { font-size: 1.8rem; }
    h2 { font-size: 1.7rem; }
    h3 { font-size: 1.3rem; }

    section { padding: 3rem 0; }
    
    .tablet-br {
        display: inline;
    }

    /* 定義リスト調整 */
    dl.row { margin-bottom: 0; }
    dl.row dt { font-weight: 700; }
    dl.row dd { margin-bottom: 0; }

    .navbar {
        padding-top: 0.8rem;
        padding-bottom: 0.8rem;
    }
    
    /* モバイルメニュー内の調整 */
    .navbar-collapse {
        background-color: #fff;
        padding: 1rem;
        border-radius: 8px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        margin-top: 1rem;
    }
    
    .navbar-nav {
        align-items: flex-start !important; /* 左寄せに */
    }
    
    .nav-link {
        padding-top: 0.8rem;
        padding-bottom: 0.8rem;
        font-size: 1.2rem;
        width: 100%;
        display: flex;
        justify-content: center;
    }
    
    .nav-link::after {
        display: none; /* モバイルでは下線アニメーションをオフに */
    }
    
    /* メニューが開いたときの下余白 */
    .navbar-collapse.show {
        padding-bottom: 1.5rem;
    }

    /* 電話番号・コンタクト情報 */
    .navbar-contact-info {
        text-align: center;
        margin-bottom: 1rem; /* ボタンとの間隔 */
    }
    
    .navbar-contact-info .phone-number {
        justify-content: center;
        font-size: 1.4rem;
    }
    
    /* 電話番号ブロックの改行を禁止して、幅を確保する */
    .navbar-contact-info,
    .navbar-contact-info .phone-number,
    .navbar-contact-info .hours-info {
        white-space: nowrap;
    }
    
    .navbar .btn-primary {
        width: 100%; /* ボタンを幅いっぱいに */
        text-align: center;
        height: 45px; /* ボタンと揃えるため高さ調整 */
    }
    
    /* Heroセクション調整 */
    #hero-section {
        margin-top: var(--header-height); /* スマホ版ではmargin-topを0に */
        padding: 4rem 0; /* 上下に余白を持たせる */
        height: calc(100svh - var(--header-height));
        max-height: 300px;
        background-position: 65% center;
    }

    .rental-hero {
        background-position: 80% center;
    }
    
    .page-header {
        margin-top: var(--header-height); /* page-headerはmargin-topを維持 */
    }
    
    #hero-section .lead {
        font-size: 1rem;
    }
    
    .hero-content {
        text-align: center; /* スマホでは中央寄せ */
        padding: 0 1rem;
        margin: 0 auto;
    }
    
    .confirm-content .col-md-4 {
        color: var(--primary-dark) !important; /* ラベルを濃い青にして視認性UP */
        margin-bottom: 0.2rem;
    }
    .confirm-content .border-bottom {
        padding-bottom: 1.5rem !important; /* スマホでは区切りを少し広めに */
    }
}

/* --- タブレット・PC 専用の調整 (min-width: 768px) --- */
@media (min-width: 768px) {
    .rental-card .row {
        min-height: 350px; /* PC版のカード最小高さを確保 */
    }
    
    .rental-card .card-img-wrapper {
        height: 100%; /* 親要素(row)の高さに追従させる */
        min-height: 350px; /* 念のため最小高さを指定 */
    }
}

/* ================================
   Hero Background Slider (New)
   ================================ */
#hero-section {
    position: relative;
    overflow: hidden; /* はみ出し防止 */
}

/* 2枚のレイヤー（クロスフェード用） */
.hero-bg-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 1.6s ease-in-out;
    z-index: 0; 
}

/* アクティブなレイヤーだけ表示 */
.hero-bg-layer.active {
    opacity: 1;
}

/* テキストは最前面 */
#hero-section .container {
    position: relative;
    z-index: 2;
}

/* ====== 各画像の background-position (PC) ====== */
.hero-bg-1 { background-position: center bottom; }
.hero-bg-2 { background-position: center bottom; }
.hero-bg-3 { background-position: center center; }

/* ====== タブレット ====== */
@media (max-width: 1080px) {
    .hero-bg-1 { background-position: 70% center; }
    .hero-bg-2 { background-position: 50% center; }
    .hero-bg-3 { background-position: 55% center; }
}

/* ====== スマホ ====== */
@media (max-width: 767px) {
    .hero-bg-1 { background-position: 65% center; }
    .hero-bg-2 { background-position: 50% center; }
    .hero-bg-3 { background-position: 65% center; }
}