@charset "utf-8";

/* ブランドカラー（プジョーブルー）の定義 */
:root {
    --peugeot-blue: #0074e8;
    --peugeot-dark-blue: #005bbc;
}

/* ==================================== */
/* ボタン共通設定（プジョーブルー） */
/* ==================================== */
/* ボタンの基本構造 */
.peugeot-page .btn-primary,
.peugeot-page .btn-detail-peugeot{
    position: relative;
    z-index: 1;
    overflow: hidden; /* はみ出した光を隠す */
    background-image: linear-gradient(0deg, #4bb7e6 0%, #00a3e0 100%);
    background-color: #00a3e0;
    border: 2px solid #00a3e0 !important;
    color: #ffffff !important;
    transition: color 0.3s;
    text-align: center;
}

/*  背景の土台（プジョーブルー） */
.peugeot-page .btn-primary::after,
.peugeot-page .btn-detail-peugeot::after{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -2;
    background: #00a3e0; /* 通常時の背景色 */
    content: "";
}

/*  スライドしてくる光の層（演出の核心） */
.peugeot-page .btn-primary::before,
.peugeot-page .btn-detail-peugeot::before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    /* 光のグラデーション */
    background: linear-gradient(45deg, #44c0ed 0%, rgb(255, 255, 255) 100%);
    content: "";
    transform-origin: right top;
    transform: skewX(45deg) scale(0, 1);
    transition: transform 0.3s ease-in-out; /* アニメーション速度 */
}

/* Hover時の動き */
.peugeot-page .btn-primary:hover::before,
.peugeot-page .btn-detail-peugeot:hover::before{
    transform-origin: left bottom;
    transform: skewX(45deg) scale(2, 2); /* 左下に向かって一気に広がる */
    opacity: 0;
    transition: transform 0.3s, opacity 0s 0.3s; /* スライド後にパッと消す */
}

/* ホバー時の文字色維持 */
.peugeot-page .btn-primary:hover,
.peugeot-page .btn-detail-peugeot:hover {
    color: #ffffff !important;
}

/* ロゴの大きさ調整 */
.peugeot-page .logo-peugeot {
    height: 60px; 
    width: auto;
}

/* ヘッダー全体の背景色 */
.peugeot-page header {
    /*
    background-color: #0074e8 !important;
    */

  background-color: #0d186e !important;

    
}

/* ナビゲーションの文字色を白にする（背景が暗くなるため） */
.peugeot-page .g-nav-list li a {
    color: #ffffff !important;
}

/* ホバー時の文字色（プジョーブルーに光る） */
.peugeot-page .g-nav-list li a:hover {
    color: var(--peugeot-blue) !important;
}

/* ==================================== */
/* プジョー・トップページ専用のMV調整 */
/* ==================================== */

/* MV全体のコンテナ */
.home.peugeot-page .mv {
    width: 100vw;
    position: relative;
    overflow: hidden;
    background-color: #000;
    /* PC/タブレットは16:9を維持 */
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    margin-top: 70px; /* ヘッダーの高さ */
}

/* 動画を配置する枠 */
.home.peugeot-page .mv-video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

/* YouTubeのUIと黒枠を隠すためのラッパー */
.home.peugeot-page .mv-video-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%) scale(0.95); /* 1.10倍に拡大して外側のUIを隠す */
}

.home.peugeot-page .mv-video-wrapper iframe {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    pointer-events: none;
}


/*パンくず*/
.breadcrumbs {
    width: 100%;
    text-align:left;
    padding-left: 40px;
}
.breadcrumbs a,
.breadcrumbs a:visited {
    color: #333 !important;
    text-decoration: none !important;
}

.breadcrumbs a:hover {
    opacity: 0.7;
}

.breadcrumbs ul li {
    display: inline-block;
    font-size: 11px;
    line-height: 1.5em;
    text-align: left;
}

.breadcrumbs ul li::after {
    content: ">";
    padding-right: 0.3em;
    padding-left: 0.3em;
}

.breadcrumbs ul li:last-child::after {
    content: "";
}

/* --- Jeepホーム専用パンくずをタイヤ痕に重ねる設定 --- */

/* PC版の調整 */
.peugeot-home-breadcrumb {
    position: relative;
    z-index: 10;
    margin-bottom: -100px; /* 下のセクションに100px分食い込ませる */
    padding-top: 20px;
    padding-left: 60px;
}


/* --- ヘッダー共通設定（高さを揃える） --- */
.main-header-bar {
    height: 70px; /* 高さを明示的に固定して統一 */
    padding: 0 30px; 
}

/* サブページ用ヘッダーの調整 */
.main-header-bar.sub-header {
    justify-content: space-between;
    position: relative; /* 子要素の基準点 */
}

/* フロントページ用の中央配置設定をサブページでは無効化 */
.main-header-bar.sub-header > .header-left {
    position: static;
    transform: none;
}

/* ロゴのサイズと社名の位置微調整 */
.logo-peugeot {
    height: 50px; 
    width: auto;
}

/* ハンバーガーメニューの配置（サブページ用） */
.main-header-bar.sub-header .hamburger {
    position: relative; 
    top: auto;
    right: auto;
}

/* ロゴと社名の並び */
.header-left {
    display: flex;
    align-items: center;
    gap: 15px;
}
.sub-logo-link {
    display: flex;
    align-items: center;
}

.company-name {
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 1px;
    line-height: 1;
    cursor: default;
}

/* 右側のパーツ（ボタンとハンバーガー） */
.header-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* 予約・お問合せボタン */
.btn-header-contact {
    display: inline-block;
    padding: 8px 20px;
    border: 1px solid #fff;
    border-radius: 20px;
    color: #fff;
    text-decoration: none;
    font-size: 13px;
    font-weight: bold;
    transition: background-color 0.3s, color 0.3s;
}

.btn-header-contact:hover {
    background-color: #fff;
    color: #000;
}

/* Jeepホーム専用パンくずの調整 */
.peugeot-home-breadcrumb {
    position: relative;
    z-index: 10;      /* タイヤ痕(z-index: -1)より上の数値にする */
    margin-top: 0px; /* MVとの隙間を微調整 */
    padding-left: 60px; /* PC版のロゴ位置などに合わせる */
}

/* ニュースセクション（タイヤ痕がある場所）の余白調整 */
.peugeot-topics {
    padding: 120px 0 40px; /* パンくずを外に出したので、上の余白を少し詰める */
    overflow: hidden;
}

.peugeot-home-breadcrumb + #peugeot_news .peugeot-topics-header {
    padding-top: 80px !important;
}

.peugeot-topics-header {
    text-align: center;
    position: relative;
    padding: 0px 0px 80px;
    overflow: hidden;
}
/* ==================================== */
/* ニュースセクション */
/* ==================================== */

.peugeot-topics {
    padding: 40px 0;
    overflow: hidden; /* 背景画像のはみ出しをカット */
}
/* タイトルエリア全体の親 */

.peugeot-topics-header {
    text-align: center;
    position: relative;
    padding: 0 0 80px 0; 
    overflow: hidden;
}

/* --- 背景画像の配置調整 --- */
.peugeot-topics-header::before {
    content: "";
    position: absolute;
    top: 0; 
    left: 0;
    transform: none;    
    width: 100vw;
    height: 250px;
    background-image: none; 
    background-repeat: no-repeat;
    background-position: left top; 
    background-size: contain;
    z-index: -1;
}

/* --- タイトル文字の位置 --- */
.peugeot-topics-title-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
    margin-top: 40px; 
}

.peugeot-section-title {
    font-size: 3rem;
    font-family: "neue-haas-grotesk-display","Open Sans", sans-serif;
    font-weight: 700;
    color: #000;
    margin: 0;
    display: inline-block;
    padding: 0 15px;
    letter-spacing: -0.5px;
}

.peugeot-section-subtitle {
    font-size: 14px;
    color: #000;
    margin-top: 5px;
    display: inline-block;
    padding: 0 10px;
    font-weight: normal;
}

/* リード文全体のスタイル */
.peugeot-lead-text {
    font-size: 1.6rem;
    font-weight: 400; 
    color: #000;
    margin-top: 30px;
    font-family: "Noto Sans", sans-serif;
}

.text-bold {
    font-weight: 700; 
}

/*プジョーサイトのnews部分だけパンくずがあるのでタイトルを下げる。*/
.peugeot-home-breadcrumb + #peugeot_news .peugeot-topics-header {
    padding-top: 80px !important;
}

.peugeot-page .card-shop-name {
    background-color: var(--peugeot-blue) !important; /* #0074e8 */
    color: #ffffff !important;
}

/* --- モデルラインナップ セクション --- */
.peugeot-lineup {
    position: relative;
    width: 100%;
    min-height: 600px; 
    background-image: url('../img/peugeot/modellineup_bg.avif');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center; 
    margin: 10px 0 0;
}

.lineup-inner {
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    padding: 0 60px;
}

.peugeot-page .lineup-inner {
    display: flex;
    justify-content: flex-end; /* 右側に寄せる */
}

.lineup-image {
    width: 100%;
    aspect-ratio: 16 / 9; 
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 画像本体の設定 */
.lineup-image img {
    width: 100%;
    height: 100%;
    object-fit: contain; 
    object-position: center;
}

/* 左側の半透明ブラックボックス */
.lineup-box {
    width: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* 半透明の黒 */
    padding: 60px 50px;
    max-width: 500px;
    color: #fff;
    text-align: center;
}

.lineup-title {
    font-size: 42px;
    font-family: "neue-haas-grotesk-display","Open Sans", sans-serif;
    font-weight: bold;
    margin-bottom: 10px;
}

.lineup-subtitle {
    font-size: 16px;
    font-family: "Noto Sans", sans-serif;
    margin-bottom: 40px;
    letter-spacing: 1px;
}


/*特選車セクション*/
.peugeot-special {
    background-color: #f9f9f9; /* 背景色 */
    padding: 80px 0;
}

.peugeot-page .special-title-area {
    text-align: center;
    margin-bottom: 50px;
}

.peugeot-page .special-section-title {
    font-size: 3rem;
    font-family: "neue-haas-grotesk-display","Open Sans", sans-serif;
    font-weight: 700;
    color: #000;
    margin: 0;
}

.peugeot-page .special-section-subtitle {
    font-size: 14px;
    color: #000;
    margin-top: 20px;
    font-weight: normal;
}

/* ラベルとリード文の並び */
.peugeot-page .special-lead-area {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-top: 30px;
}

.peugeot-page .label-peugeot {
    background-color: #0074e8;
    color: #fff;
    font-weight: bold;
    padding: 5px 15px;
    font-size: 16px;
    white-space: nowrap;
}

.peugeot-page .special-lead-text {
    font-size: 18px;
    color: #000;
    margin: 0;
}

/* グリッドレイアウト */
.peugeot-page .special-list {
    display: grid;
    gap: 30px 20px;
    margin-bottom: 50px;
}

.peugeot-page .special-card {
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

/* 画像と左上の"New"バッジ */
.peugeot-page .card-image-wrap {
    position: relative;
    overflow: visible; 
    margin-top: 10px; 
    margin-left: 0; 
}

.peugeot-page .card-image-wrap img {
    width: 100%;
    height: auto;
    display: block;
}

.peugeot-page .badge-new {
    position: absolute;
    top: -10px; 
    left: -10px;
    width: 70px;
    height: 70px;
    background-color: #000;
    color: #fff;
    font-weight: bold;
    font-size: 13px;
    clip-path: polygon(0 0, 100% 0, 0 100%);
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 15px 0 0 6px;
    z-index: 10;
}

/* コンテンツエリア */
.peugeot-page .special-content {
    margin-top: 10px;
    padding: 10px 15px;
    text-align: left;
    border-left: 2px solid #0074e8;
}

.peugeot-page .special-card {
    background: #f9f9f9;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    padding: 0;
}

.peugeot-page .car-name {
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 10px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 5px;
    font-family: "neue-haas-grotesk-display","Open Sans", sans-serif;
}

.peugeot-page .car-detail {
    font-size: 12px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 15px;
    font-family: "neue-haas-grotesk-display","Open Sans", sans-serif;
}

/* 価格エリア */
.peugeot-page .price-area {
    display: flex;
    align-items: baseline;
    gap: 5px;
}

.peugeot-page .price-label {
    background-color: #0074e8;
    font-size: 11px;
    font-weight: bold;
    padding: 2px 5px;
    font-family: "neue-haas-grotesk-display","Open Sans", sans-serif;
}

.peugeot-page .price-value {
    color: #d32f2f; /* 赤系で強調 */
    font-size: 20px;
    font-weight: 800;
    font-family: "neue-haas-grotesk-display","Open Sans", sans-serif;
}

.peugeot-page .price-tax {
    font-size: 10px;
    color: #888;
    font-family: "neue-haas-grotesk-display","Open Sans", sans-serif;
}


/*プジョー認定中古車セクション*/

.peugeot-page .approved-title-area {
    text-align: center;
    margin-bottom: 50px;
}

.peugeot-page .approved-section-title {
    font-size: 3rem;
    font-family: "neue-haas-grotesk-display","Open Sans", sans-serif;
    font-weight: 700;
    color: #000;
    margin: 0;
}

.peugeot-page .approved-section-subtitle {
    font-size: 14px;
    color: #000;
    margin-top: 20px;
    font-weight: normal;
}

.peugeot-approved {
    background-color: #fff;
    padding: 80px 0;
    position: relative;
    overflow: hidden; 
}

.peugeot-page .peugeot-approved::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100vw; 
    max-width: 1200px; 
    height: 500px; 
    background-image: none; 
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: contain;
    z-index: 0; 
    pointer-events: none;
    opacity: 1; 
}

/* コンテナがタイヤ画像より上に来るように設定 */
.approved-container {
    position: relative;
    z-index: 5;
}
.approved-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px 15px;
    margin-bottom: 50px;
    padding: 0 10px;
}

.approved-card {
    padding-right: 0; 
    width: 100%;
}

.approved-card .card-image-wrap {
    margin-left: 0; 
    margin-top: 15px;
}

.approved-content {
    margin-left: 0;   
}

/* 店舗名タグを浮かせて配置 */
.peugeot-page .shop-tag {
    position: absolute;
    top: -5px; 
    left: -5px;
    background-color: #0074e8;
    color: #fff;
    padding: 5px 12px;
    font-size: 11px;
    font-weight: bold;
    z-index: 10;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.2); 
    white-space: nowrap;
}

/* 画像下の黒帯ロゴエリア */
.peugeot-page .dealer-logo-bar {
    background-color: #0074e8;
    color: #fff;
    display: flex;
    align-items: center;
    padding: 8px 12px;
    gap: 10px;
    justify-content: space-between;
}

.peugeot-page .mini-logo {
    height: 25px; /* メタリックロゴのサイズに合わせて調整 */
    width: 40px;
}

img.mini-logo {
    width: 40px;
}
.dealer-info-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

/* Official Dealerラベルのスタイル */
.official-label {
    display: inline-block;
    font-size: 6px;
    border: 1px solid #fff; /* 白い四角枠 */
    padding: 1px 4px;
    line-height: 1;
    letter-spacing: 0.5px;
    transform: scale(0.85); 
    transform-origin: left bottom;
}

.dealer-names {
    font-size: 10px;
    line-height: 1.3;
    margin: 0;
    white-space: nowrap;
}

/* コンテンツエリア */
.approved-content {
    padding: 10px;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.2); 
}

/* メーカー名 */
.car-maker {
    font-size: 11px;
    font-weight: normal;
    color: #000000;
    margin-bottom: 2px;
    display: block;
    line-height: 1.2;
}

/* 車種名 */
.car-name-main {
    font-size: 18px !important;
    font-weight: normal;
    margin-bottom: 8px;
    color: #000;
    display: block;
}

.info-item {
    font-size: 11px;
    color: #666;
}

/* 価格表示エリア */
.approved-price-area {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-top: 10px;
}

/* 各行（車両本体価格・支払総額）のレイアウト */
.price-row {
    display: flex;
    align-items: baseline; /* 文字の下端で揃える */
    justify-content: flex-end; /* 中身を右に寄せる */
    gap: 4px; /* 各要素の間の隙間 */
    width: 100%;
    margin-bottom: 2px;
}

/* ラベルを左側に残さず、数値のすぐ左に配置する場合 */
.price-label {
    font-size: 11px;
    color: #fff;
    margin-right: 5px; 
    font-family: "Noto Sans", sans-serif;
}

.jeep-approved .price-label,
.approved-list .price-label {
    background-color: transparent !important; /* 背景色を透明に */
    padding: 0;
    color: #666; 
    font-size: 12px;
}

/* 車両本体価格のスタイル（赤） */
.jeep-approved .main-price .price-unit,
.jeep-approved .main-price .price-number,
.jeep-approved .main-price .price-tax,
.approved-list .main-price .price-unit,
.approved-list .main-price .price-number,
.approved-list .main-price .price-tax {
    color: #d32f2f;
    font-family: "Noto Sans", sans-serif;
}

/* 支払総額のスタイル（黒） */
.peugeot-approved .total-price .price-unit,
.peugeot-approved .total-price .price-number,
.peugeot-approved .total-price .price-tax,
.approved-list .total-price .price-unit, 
.approved-list .total-price .price-number, 
.approved-list .total-price .price-tax {
    color: #000; 
    font-family: "Noto Sans", sans-serif;
}

/* --- 数字のサイズ微調整 --- */

/* 車両本体価格  */
.peugeot-approved .main-price .price-number,
.approved-list .main-price .price-number {
    font-size: 20px;
}

/* 支払総額 */
.peugeot-approved .total-price .price-number,
.approved-list .total-price .price-number {
    font-size: 20px; 
}

.peugeot-approved .main-price .price-unit,
.approved-list .main-price .price-unit {
    font-size: 10px;
}
.peugeot-approved .total-price .price-unit,
.approved-list .total-price .price-unit {
    font-size: 10px;
}

/* 年式などの情報の区切り線調整 */
.car-info-grid {
    border-top: 1px solid #ddd;
    padding: 10px 0 0;
    display: flex;
    justify-content: space-between;
}

/*特選車と認定中古車セクションのホバー*/
.special-card {
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background: #f9f9f9;
    overflow: visible !important;
}

/* ホバー時の画像拡大を一旦オフにするか、非常に小さくしてズレを防ぐ */
.special-card:hover .card-image-wrap img,
.approved-card:hover .card-image-wrap img {
    transform: none !important; 
}

.approved-card {
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background: #fff;
    height: 100%; /* 親のグリッド内で高さを揃える */
}

.approved-content {
    padding: 15px;
    flex-grow: 1; /* 余ったスペースをすべて使い切る */
    display: flex;
    flex-direction: column;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.1); /* 影の位置を安定させる */
}
/* 車両スペック情報の高さを固定する */

.car-spec {
    font-size: 13px;
    color: #333;
    line-height: 1.4;
    margin-bottom: 12px;
    height: 2.8em; /* 1.4（行間）× 2行 */
    min-height: 2.8em;
    overflow: hidden;
    display: block !important; 
}

/* 価格エリアを常に一番下に押し下げる */
.approved-price-area {
    margin-top: auto; /* 上部にマージンを自動で入れ、下端に固定 */
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.approved-card .card-image-wrap {
    margin: 0 !important; /* 個別マージンをリセット */
    width: 100%;
}

.approved-card .approved-content {
    margin: 0 !important; 
    padding: 10px 15px; /* 中の余白で調整 */
}

/* ホバー：カード全体（親）を動かす */
.special-card:hover,
.approved-card:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2) !important;
    z-index: 10; 
}

/* プジョーのミニロゴのみサイズを小さく調整 */
img.mini-logo[alt="peugeot"] {
    width: 30px !important;  
    height: auto !important; /* アスペクト比を維持 */
}


/* ====================================
   peugeot Footer & Store Section Integration
   ==================================== */

.store-title-area {
    text-align: center;
    margin-bottom: 50px;
}

.store-section-title {
    font-size: 3rem;
    font-family: "neue-haas-grotesk-display","Open Sans", sans-serif;
    font-weight: 700;
    color: #fff;
    margin: 0;
}

.store-section-subtitle {
    font-size: 14px;
    color: #fff;
    margin-top: 20px;
    font-weight: normal;
}

.peugeot-footer-visual-group section,
.peugeot-footer-visual-group div:not(.store-card) {
    background-color: transparent !important;
    background-image: none !important;
}


.store-card img {
    filter: brightness(0.8);
}
.peugeot-footer-visual-group {
    display: block !important;
    width: 100% !important;
    background-image: url('../img/peugeot/footer_bg.jpg') !important; /* 背景画像 */
    background-size: cover !important;
    background-position: right bottom !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
    color: #ffffff !important;
    padding-top: 100px;
    margin-top: 0;
    position: relative; /* 子要素の基準点 */
}

/* 店舗案内セクションを透明にする */
.peugeot-store-info {
    background: transparent !important; /* 背景を透過させる */
    background-color: transparent !important;
    padding: 0 0 40px 0 !important;
}

/* フッターを透過させ、ジープと同じ黒い透過帯にする */
.peugeot-footer {
    background: rgba(0, 0, 0, 0.4) !important; /* 黒の40%透過 */
    background-color: rgba(0, 0, 0, 0.4) !important;
    padding: 60px 0 100px;
    color: #fff;
    border-top: 1px solid rgba(255, 255, 255, 0.1); 
}

/* 余計な白背景を打ち消す */
main {
    background-color: transparent !important;
}

.home main {
    background-color: transparent !important;
}

/* タイトル・サブタイトル・リード文・メッセージの文字色を白に固定 */
.peugeot-footer-visual-group .approved-section-title,
.peugeot-footer-visual-group .approved-section-subtitle,
.peugeot-footer-visual-group .store-lead,
.peugeot-footer-visual-group .footer-message {
    color: #ffffff !important;
    text-align: center;
}

.store-lead {
    margin: 20px 0 50px;
    font-size: 24px;
}

.store-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    padding: 0 10px;
    margin-bottom: 40px;
}

.store-card {
    flex: 1;
    position: relative;
    height: 350px;
    overflow: hidden;
    background-color: #000; 
}

.store-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4); 
    z-index: 1; 
    transition: background-color 0.3s ease;
}

.store-card:hover::after {
    background-color: rgba(0, 0, 0, 0.2);
}

.store-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    z-index: 0;
    transition: transform 0.5s ease;
}

/* テキストコンテンツを最前面に持ってくる */
.store-card-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 90%;
    z-index: 2; 
}
.store-card:hover img {
    transform: scale(1.1); 
}

.store-name {
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 25px;
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5); 
}

.btn-store-detail {
    display: inline-block;
    padding: 10px 30px;
    border: 1px solid #ffffff;
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    background: rgba(0, 0, 0, 0.2);
    transition: 0.3s;
    border-radius: 5px;
}

.btn-store-detail:hover {
    background: #ffffff;
    color: #000000;
}

/* メッセージエリア */
.footer-visual-area {
    width: 100% !important;
    background: transparent !important; 
    padding: 100px 20px;
    text-align: center;
    z-index: 1;
}

.footer-message {
    font-size: 24px;
    line-height: 2.2;
    font-weight: bold;
}


.-footer .copyright {
    color: rgba(255, 255, 255, 0.4) !important;
    margin-top: 30px;
}

/* --- フッターのボタン設定 --- */
.footer-back-button {
    text-align: center;
    margin: 30px 0 40px; /* ナビの下とコピーライトの間の余白 */
}

.peugot-footer {
    background-color: #000 !important;
    background-image: none !important;
    padding: 60px 0 30px;
    color: #fff;
    position: relative;
    z-index: 10;
}


.btn-back-corporate {
    display: inline-block;
    padding: 12px 50px;
    border: 1px solid #fff; /* ★白枠 */
    color: #fff;            /* 文字色も白 */
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
    transition: all 0.3s ease;
    background-color: transparent;
    border-radius: 5px;
}

.btn-back-corporate:hover {
    background-color: #fff;
    color: #000; /* 背景が白くなるので文字を黒に */
}

/* ==================================== */
/* フッター設定の切り分け */
/* ==================================== */

/* トップページ専用（透過設定） --- */
/* bodyに .home クラスがついている場合のみ透過させる */
.home.peugeot-page .peugeot-footer {
    background: rgba(0, 0, 0, 0.4) !important;
    background-color: rgba(0, 0, 0, 0.4) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 60px 0 100px;
}

/*  サブページ専用（透過なし・黒背景） --- */
/* bodyに .is-subpage クラスがついている場合 */
.is-subpage.peugeot-page .peugeot-footer {
    background-color: #000000 !important; /* 透過なしの黒 */
    background-image: none !important;    /* 背景画像を確実に消す */
    padding: 60px 0 100px;
    border-top: none;
}

/* サブページでは背景画像グループ（ビジュアルエリア）を表示させない */
.is-subpage.peugeot-page .peugeot-footer-visual-group {
    background-image: none !important;
    padding-top: 0 !important;
}


/* --- ニュース一覧ページ専用設定 --- */

.peugeotnews-page .peugeot-topics-header::before {
    display: none !important; 
}

.peugeotnews-page main {
    padding-top: 100px;
}

.peugeotnews-page .peugeot-topics-title-wrap {
    margin-top: 20px; /* タイヤ痕がないので上端に合わせる */
}
.peugeot-news-archive {
    position: relative; 
    overflow: hidden; 
    padding-bottom: 120px; 
}

.approved-page main {
    padding-top: 100px;
}

/* ==================================== */
/* モデルラインナップ */
/* ==================================== */
/* グリッド全体の設定 */
.peugeot-model-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 60px 20px !important;
    text-align: center;
}

/* カード全体のリンク */
.model-card-link {
    display: block;
    text-decoration: none !important;
    color: #000 !important;
    position: relative;
    padding-bottom: 20px;
    transition: 0.3s;
}

/* 画像のホバー効果 */
.model-card-link:hover .model-image img {
    transform: scale(1.05);
}

.model-image {
    width: 100%;
    margin-bottom: 15px;
    transition: transform 0.3s ease;
}

.model-image img {
    width: 100%;
    height: auto;
    object-fit: contain;
    transition: transform 0.3s ease-in-out !important; 
    will-change: transform; 
}

/* 車種名 */
.model-name {
    font-size: 16px !important;
    font-weight: bold;
    margin-bottom: 10px;
    text-transform: uppercase;
}

/* 矢印アイコン（SVG画像を使用） */
.model-arrow {
    display: block;
    margin: 0.3125rem auto 0; 
    height: 1.875rem;         
    width: 2rem;  
    background-image: url('../img/peugeot/242_Chevron_down.svg'); 
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.5;             /* 指定の透過度（50%） */
    transition: opacity 0.3s ease, filter 0.3s ease;
}

/* ホバー時の挙動：矢印の色を青に変え、透過を戻す */
.model-card-link:hover .model-arrow {
    opacity: 1;
    /* 黒いSVGをプジョーブルー(#0074e8)に変えるフィルタ */
    filter: invert(34%) sepia(98%) saturate(3474%) hue-rotate(195deg) brightness(98%) contrast(105%);
}

/* 下線：ホバー前は非表示 */
.model-card-link::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    height: 2px;
    background-color: transparent !important; /* 初期は透明 */
    transition: background-color 0.3s ease;
}

/* ホバー時のみプジョーブルーの線を出す */
.model-card-link:hover::after {
    background-color: var(--peugeot-blue) !important; 
}

/* ==================================== */
/* 特選車ページの調整 */
/* ==================================== */

/* 特選車ページ専用のリード文スタイル */

/* 親要素で範囲を限定 */
.page-specially-lead .special-lead-area {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-bottom: 50px; /* 下のカードリストとの間隔 */
}

/* このページだけの黄色ラベル */
.peugeot-page .page-specially-lead .label-yellow {
    background-color: #0074e8;
    color: #fff;
    font-size: 20px; 
    font-weight: bold;
    padding: 5px 15px;
    display: inline-block;
}


.peugeot-page .price-tag-yellow {
    background-color: #0074e8;
    color:#fff;
    padding: 8px 25px;
    font-weight: bold;
    font-size: 20px;
}

.peugeot-page .page-specially-lead .special-lead-text {
    font-size: 26px;
    font-weight: normal;
    color: #000;
    margin: 0;
    letter-spacing: 0.05em;
}

/*特選車の詳細ページ*/

/* スライダーのドットをプジョーブルーに変更 */
.peugeot-page .car-detail-slider .swiper-pagination-bullet-active {
    background-color: var(--peugeot-blue) !important; /* #0074e8 */
    opacity: 1;
}

/* 取り扱い店舗のボタン色もプジョーブルーに統一 */
.peugeot-page .btn-dealer-tel,
.peugeot-page .btn-dealer-form {
    background-color: var(--peugeot-blue) !important;
    transition: 0.3s ease;
}

.peugeot-page .btn-dealer-tel:hover,
.peugeot-page .btn-dealer-form:hover {
    background-color: var(--peugeot-dark-blue) !important; /* #005bbc */
}

/* 電話ボタン */
.peugeot-page #js-floating-banner .banner-tel {
    background-color: var(--peugeot-blue) !important; /* #0074e8 */
    color: #fff !important;
}

/* 来店予約・お問い合わせボタン (banner-service) */
.peugeot-page #js-floating-banner .banner-service {
    background-color: var(--peugeot-blue) !important;
    color: #fff !important;
    border-left: 1px solid rgba(255, 255, 255, 0.3) !important; 
}

/* アイコンやテキストの色も白に固定 */
.peugeot-page #js-floating-banner .banner-tel p,
.peugeot-page #js-floating-banner .banner-tel i,
.peugeot-page #js-floating-banner .banner-service p,
.peugeot-page #js-floating-banner .banner-service i {
    color: #fff !important;
}

/* --- 店舗紹介ページ --- */

.peugeot-page .store-page main {
    padding-top: 100px; 
}

.peugeot-page .store-page .store-header-title {
    text-align: center;
    padding: 80px 0 0;
    overflow: hidden;
    text-align: center;
}

.peugeot-page .store-page-content {
    padding-top: 100px; 
    padding-bottom: 100px !important;
    background-color: #fff;
}

/* 店舗詳細ページ内の特選車セクション余白調整 */
.store-specially-selected {
    padding: 60px 0 !important;
    background-color: #ffffff !important; 
}

/* 4枚1段にするためのグリッド設定 */
.peugeot-page .store-specially-selected .special-list {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important; /* PC版4列 */
    gap: 20px !important;
    margin-bottom: 40px !important;
}


/* ==================================== */
/* 買取査定ページ
/* ==================================== */

.purchase-hero {
    width: 100%;
    line-height: 0;
    position: relative;
}

.purchase-hero-inner {
    position: relative;
    width: 100%;
}

.purchase-hero-img {
    width: 100%;
    height: auto;
    min-height: 260px; /* スマホでの高さ確保 */
    object-fit: cover;
}

.purchase-hero-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 1200px;
    text-align: center;
    color: #ffffff;
    text-shadow: 
        0 0 20px rgba(0, 0, 0, 1),   /* 芯 */
        0 0 40px rgba(0, 0, 0, 0.8), /* 中間 */
        0 0 60px rgba(0, 0, 0, 0.6); /* 外側への広がり */
    line-height: 1.4;
    z-index: 5;
}

.hero-main-copy {
    font-size: 42px; 
    font-weight: 700;
    margin-bottom: 40px; 
    letter-spacing: 0.1em;
}

.hero-sub-copy {
    font-size: 26px;
    font-weight: 500;
}

.purchase-reason {
    padding: 100px 0;
    background-color: #fff;
    text-align: center;
}

.purchase-section-title {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 60px;
    color: #000;
    text-align: center;
}

/* 3カラムのグリッド */
.reason-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    align-items: stretch;
}

/* 各ボックスの設定 */
.reason-box {
    border: 1px solid #333;
    padding: 60px 30px 40px;
    position: relative;
    text-align: center;
    background-color: #fff;
}

/* 青い数字バッジ */
.reason-num {
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--peugeot-blue); /* #0074e8 */
    color: #fff;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    font-weight: 700;
}

.reason-box-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 25px;
    margin-top: 30px;
    color: #000;
    text-align: center;
}

.reason-text {
    font-size: 15px;
    line-height: 1.8;
    color: #333;
    text-align: left; /* 文章は左寄せで見やすく */
}

.purchase-store-contact {
    padding: 100px 0;
    background-color: #f9f9f9; /* 少し背景色を変えて区切りを明確に */
    text-align: center;
}

.store-contact-lead {
    font-size: 15px;
    line-height: 1.8;
    margin-bottom: 50px;
    color: #333;
}

.store-contact-lead span {
    font-size: 13px;
    display: block;
    margin-top: 5px;
}

/* グリッド設定（PC版） */
.store-contact-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.store-contact-box {
    background-color: transparent;
}

.store-img {
    width: 100%;
    margin-bottom: 20px;
    line-height: 0;
}

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

.store-contact-box .store-name {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #000;
    text-shadow: none;
}

.store-location {
    font-size: 13px;
    color: #666;
    margin-bottom: 20px;
}

/* 電話ボタン */
.btn-store-tel {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--peugeot-blue); /* #0074e8 */
    color: #fff !important;
    text-decoration: none;
    font-weight: bold;
    padding: 15px 10px;
    border-radius: 30px; /* 丸みのあるボタン */
    transition: background-color 0.3s;
    font-size: 16px;
    width: fit-content; 
    min-width: 230px;
    max-width: 300px; 
    margin: 0 auto;
}

.btn-store-tel:hover {
    background-color: var(--peugeot-dark-blue);
}

.store-business-hours {
    font-size: 13px !important; /* 他の情報より少し小さく */
    line-height: 1.6 !important;
    color: #666 !important;
    margin-top: 15px !important; /* ボタンとの隙間 */
    text-align: center !important;
    font-weight: normal;
}


.purchase-form-section {
    padding: 80px 0;
    background-color: #fff;
}

.form-lead-area {
    text-align: left; /* 画像に合わせて左寄せ */
    max-width: 900px;
    margin: 0 auto 40px;
    font-size: 15px;
    line-height: 1.8;
}

.peugeot-page .sirius-form textarea {
    width: 100%;
    padding: 15px;
    border: 1px solid rgb(204, 204, 204);
    border-radius: 2px;
    font-size: 16px;
    line-height: 1.6;
    background-color: rgb(255, 255, 255);
    resize: vertical;
    min-height: 150px;
}

/* --- 買取査定ページ専用：車検有効期限の横並び設定 --- */

.peugeot-page .form-input-inline-purchase {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

/* 年・月の入力ボックス幅を限定 */
.peugeot-page .form-input-inline-purchase input[name="expiry-year"] {
    width: 160px !important;
    text-align: left !important;
}

.peugeot-page .form-input-inline-purchase input[name="expiry-month"] {
    width: 160px !important;
    text-align: left !important;
}

/* 単位（年・月）のスタイル */
.peugeot-page .form-input-inline-purchase .input-unit {
    font-size: 16px !important;
    font-weight: 500 !important;
    color: #333 !important;
}


/* 特選車ページ専用：ulクラスによる境界線制御 */
@media screen and (min-width: 1201px) {
    /* プジョーのページ構成に合わせたセレクタ指定 */
    .peugeot-page.store-page-content .special-list.auto-border-list {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important; /* 4列に設定 */
        gap: 20px 20px !important; 
        position: relative !important;
        overflow: visible !important; 
        background-image: none !important;
        max-width: 1200px !important;
        margin: 0 auto !important;
    }


    /* カード本体の枠や影をリセット */
    .peugeot-page.store-page-content .special-card {
        background-color: transparent !important;
        padding: 0 !important;
        border: none !important;
        box-shadow: none !important;
        transform: none !important; 
        transition: none !important; 
        position: relative !important;
        z-index: 2;
    }

    /* 内側のリンク要素に影とホバーを適用 */
    .peugeot-page.store-page-content .special-card .card-link {
        display: flex !important;
        flex-direction: column !important;
        text-decoration: none !important;
        color: inherit !important;
        height: 100% !important;
        background-color: #fff !important; /* カード自体に白背景を付与 */
        box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1) !important;
        transition: transform 0.3s ease !important; 
        will-change: transform;
    }

    /* ホバー時の浮き上がりを -8px に統一 */
    .peugeot-page.store-page-content .special-card .card-link:hover {
        transform: translateY(-8px) !important;
    }
}

@media (max-width:1200px) {

    .peugeot-page .store-specially-selected .special-list {
        grid-template-columns: repeat(3, 1fr) !important; /* タブレット2列 */
    }
}


@media (max-width: 1000px) {

    .home.peugeot-page .mv {
        margin-top: 0 !important;
        height: 60vw !important; 
        min-height: 400px !important; 
        position: relative !important;
        overflow: hidden;
    }

    /* 動画コンテナとwrapperを枠いっぱいに広げる */
    .home.peugeot-page .mv-video-container {
        padding-top: 0 !important;
        height: 100% !important;
    }

    .home.peugeot-page .mv-video-wrapper {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
        transform: none !important; /* PC版の中央寄せを解除 */
    }

    .home.peugeot-page .mv-video-wrapper iframe {
        object-fit: cover !important; /* 枠いっぱいに表示 */
    }

    .peugeot-topics-header::before {
        height: 120px;
        width: 120vw;
        left: -10px;
        background-size: cover;
    }

    .peugeot-lead-text {
        font-size: 1.4rem; 
        margin-top: 20px;
    }

    .peugeot-topics-header {
        padding: 0 0;
    }

    .peugeot-lead-text {
        font-size: 1.2rem;
    }

    #peugeot_news .peugeot-topics-header {
        padding-top: 80px !important; 
    }


    .jeep-lineup {
        background-image: url('../img/jeep_lineup_1200.jpg');
        min-height: 500px; /* 画像の比率に合わせて調整 */
    }

    .peugeot-lineup {
        min-height: 450px;
        margin: 10px 0 0;
        background-position: center; 
    }
    
    .lineup-box {
        max-width: 100%; 
        padding: 40px 20px;
    }
    
    .lineup-title {
        font-size: 32px;
    }

    .topics-list,
    .special-list,
    .approved-list {
        grid-template-columns: repeat(2, 1fr) !important; /* 強制的に2列 */
        gap: 20px;
    }

    .peugeot-footer-visual-group {
        background-size: 130% auto !important; 
        background-position: center bottom !important; 
        background-attachment: scroll !important;
        background-repeat: no-repeat !important;
        background-color: #000 !important; 
        padding-top: 60px;
    }
/*ニュースページ*/
    #peugeot_news .peugeot-topics-header {
        padding-top: 80px !important;
    }

/*  店舗紹介ページ  */

    .full-width-img {
        width: 100%;
        height: 300px;
        object-fit: cover;
        display: block;
    }
    .store-detail-card {
        height: 420px; 
        margin-bottom: 80px;
    }

    .store-info-box {
        padding: 20px; 
        width: 50%; 
    }

    .store-detail-name {
        font-size: 16px; 
        margin-bottom: 15px;
    }

    .store-address-group {
        font-size: 14px; 
        line-height: 1.6;
    }

    .peugeot-card { margin-bottom: 80px; }
    .peugeot-card:last-child { margin-bottom: 0 !important; }

    .detail-main-visual .full-width-img {
        width: 100%;
        height: 300px;
        object-fit: cover;
    }
    .gallery-item img {
        height: 220px;
    }

    .intro-text-wrap p {
        font-size: 16px;
        line-height: 1.8;
    }

    .summary-container {
        gap: 30px; 
    }
    
    .summary-title {
        font-size: 28px; 
    }
    
    .summary-table {
        font-size: 15px; 
    }

    .brand-logo-jeep {
        width: 200px;
        height: auto;
    }

    .brand-logo-peugeot {
        width: 100px;
        height: auto;
    }

    .peugeot-page .store-specially-selected .special-list {
        grid-template-columns: repeat(2, 1fr) !important; /* タブレット2列 */
    }

 /*モデルラインナップ*/

    .peugeot-model-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .model-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .dealer-info-section .inner {
        padding: 40px 0;
        width: 90%; 
    }

/*特選車詳細ページ*/
    .dealer-content-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

/* spanをブロック要素にすることで強制的に改行させる */
    .address-group span {
        display: block;
        margin-right: 0;
    }

    .dealer-address {
        display: flex;
        justify-content: center;
        margin-bottom: 25px;
    }

    .map-link {
        display: flex;
        align-items: flex-end; /* アイコンを下の行の高さに合わせる */
        justify-content: center;
        text-align: center;
        line-height: 1.6;
    }

    .slider-item {
        /* スマホでは 800px は大きすぎるため、画面幅に合わせつつ比率を維持します */
        flex: 0 0 85% !important;
        width: 85% !important;
        height: auto !important;
        aspect-ratio: 800 / 600; /* 比率を 4:3 に固定 */
    }

    /*買取ページ*/

    .hero-main-copy {
        font-size: 30px; 
        margin-bottom: 20px;
    }
    .hero-sub-copy {
        font-size: 17px;
    }
    .purchase-hero-text {
        text-shadow: 0 0 15px rgba(0, 0, 0, 0.9); /* スマホ用は影を少しタイトに */
    }

    .purchase-reason {
        padding: 60px 0;
        background-color: #fff;
        text-align: center;
    }
    .purchase-section-title {
        font-size: 24px;
        margin-bottom: 40px;
    }
    
    .reason-box {
        padding: 50px 20px 30px;
    }

    .reason-grid {
        grid-template-columns: repeat(2, 1fr); /* 基本を2列にする */
        gap: 30px 20px;
    }

    /* 3つ目のボックス（「安心の取引」）を下の段で中央に配置する */
    .reason-box:nth-child(3) {
        grid-column: 1 / 3; /* 2列分を占有させる */
        justify-self: center; /* 自身を中央寄せ */
        width: calc(50% - 10px); /* 上の段の1つ分と同じ幅にする */
    }

    .purchase-section-title {
        font-size: 28px;
        margin-bottom: 50px;
    }
    .store-contact-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px 20px;
    }
    .store-contact-box:nth-child(3) {
        grid-column: 1 / 3;
        justify-self: center;
        width: calc(50% - 10px);
    }

}


@media (max-width: 768px) {

.peugeot-page .header-left {
        display: flex !important;
        flex-direction: row !important; /* 横並びを強制 */
        align-items: center !important; /* 上下中央揃え */
        gap: 10px; /* ロゴと会社名の間の隙間 */
    }

    /* ロゴのリンク設定 */
    .peugeot-page .sub-logo-link {
        display: block !important;
        margin-bottom: 0 !important;
    }

    /* 会社名のテキスト設定 */
    .peugeot-page .company-name {
        margin-top: 0 !important; 
        white-space: nowrap; 
    }

    .logo-peugeot {
        height: 60px; 
    }

    /* 社名をロゴの下に小さく配置 */
    .company-name {
        display: block; 
        font-size: 9px; 
        transform: scale(0.9); 
        transform-origin: left top;
        white-space: nowrap;
        opacity: 0.9;
        padding-left: 10px;
    }

    /* 右側エリア：ボタンとハンバーガーの並び */
    .header-right {
        gap: 8px;
    }

    .btn-header-contact {
        padding: 6px 10px;
        font-size: 10px;
        border-radius: 15px;
        margin-right: 45px; 
    }

    /* ハンバーガーメニューを右端中央に固定 */
    .main-header-bar.sub-header .hamburger {
        position: absolute;
        right: 5px;
        top: 50%;
        transform: translateY(-50%);
    }


/* ---  トップページ専用の設定（動画用） --- */
    .home.peugeot-page .mv {
        margin-top: 0 !important;   /* mainのpaddingで調整するため0にリセット */
        height: 75vw !important;    /* 4:3の比率 (3÷4=0.75) */
        min-height: 300px !important;
        position: relative !important;
        overflow: hidden;
        background-color: #000;
        padding-top: 70px !important;
    }

    /* 動画コンテナ内の絶対配置をスマホ用に最適化 */
    .home.peugeot-page .mv-video-container {
        padding-top: 0 !important;
        height: 100% !important;
        position: relative;
    }

    .home.peugeot-page .mv-video-wrapper {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100% !important;
        height: 100% !important;
        transform: translate(-50%, -50%) scale(1.1) !important;
    }

    .home.peugeot-page .mv-video-wrapper iframe {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important; /* 黒枠を出さずに枠いっぱいに表示 */
    }


    .home.peugeot-page .mv-video-wrapper iframe {
        object-fit: cover !important;
    }
    /*パンくず*/
    .breadcrumbs {
        width: 100%;
        text-align:left;
        padding-left: 20px;
    }

    .peugeot-home-breadcrumb {
        margin-bottom: -80px; /* スマホでは食い込み量を少し減らす */
        padding-left: 20px;
    }

    .peugeot-topics-header {
        padding: 0 0;
    }
    .peugeot-topics-header::before {
        height: 120px; 
        width: 120vw; 
        left: -10px;  
        background-size: cover;
    }
    
    .peugeot-topics-title-wrap {
        margin-top: 30px; 
    }

    .peugeot-section-title {
        font-size: 28px;
        padding: 0 10px;
    }

    .peugeot-section-subtitle {
        font-size: 12px;
        margin-top: 3px;
    }

    .peugeot-lead-text {
        font-size: 1.2rem;
        margin-top: 30px;
        padding: 0 15px;
        line-height: 1.6;
    }
    
    .peugeot-topics .btn-primary {
        width: 200px;
        font-size: 14px;
        padding: 0.8em 1.5em;
    }

    .peugeot-lineup {
        min-height: 350px;
        margin: 10px 0 0;
        background-position: center; 
    }
    
    .lineup-box {
        max-width: 100%; 
        padding: 40px 20px;
    }
    
    .lineup-title {
        font-size: 32px;
    }

    /*特選車セクション*/

    .special-lead-area { flex-direction: column; gap: 10px; }


    .peugeot-page .special-section-title { 
        font-size: 24px;
    }

    .peugeot-page .special-lead-area {
        flex-direction: column;
        gap: 5px;
    }
    .peugeot-page .special-lead-text { 
        font-size: 15px;
    }

    /*認定中古車セクション*/

    .dealer-names {
        font-size: 8px;
        line-height: 1.3;
        margin: 0;
        white-space: nowrap;
    }
    .peugeot-approved::after {
        width: 120vw;
        height: 120px;
    }

    .peugeot-footer-visual-group {
        background-attachment: scroll !important;
        padding-top: 40px;
    }

    .store-lead {
        margin: 20px 0 50px;
        font-size: 20px;
    }

    .store-grid {
        grid-template-columns: 1fr; 
        gap: 5px;
    }

    .store-card {
        height: 350px; 
    }

    .store-name {
        font-size: 20px; 
        margin-bottom: 15px;
    }

    .footer-visual-area {
        padding: 60px 20px; 
    }

    .peugeot-store-info {
        background-color: #000; 
    }

    .footer-message {
        font-size: 18px;
        line-height: 2;
    }
    .peugeot-page .approved-section-title {
        font-size: 2rem;
        font-family: "neue-haas-grotesk-display","Open Sans", sans-serif;
        font-weight: 700;
        color: #000;
        margin: 0;
    }

    .store-section-title{
        font-size: 2rem;
    }

    .peugeot-footer-visual-group {
        background-size: 170% auto !important; 
        background-position: right bottom !important; 
        background-attachment: scroll !important;
        background-repeat: no-repeat !important;
        background-color: #000 !important; 
        padding-top: 60px;
    }

    .peugeot-footer-visual-group {
        background-color: #000; 
    }

    .footer-back-button {
        margin: 20px 0 30px;
    }
    .btn-back-corporate {
        font-size: 13px;
    }

    .peugeot-page .store-detail-card {
        display: block !important; /* flexやabsoluteの重なりを解除 */
        height: auto !important;
        margin-bottom: 50px !important;
        border: 1px solid #eee;
        background-color: #fff;
    }

    /* . 画像エリア：全幅表示にする */
    .peugeot-page .store-visual-box {
        width: 100% !important;
        height: 250px !important; /* スマホで見やすい高さに固定 */
    }

    /*  情報ボックス：画像の下に配置し、背景を白に戻す */
    .peugeot-page .store-info-box {
        position: static !important; /* absoluteを解除 */
        width: 100% !important;
        height: auto !important;
        padding: 30px 20px !important;
        background-color: #fff !important; 
        box-shadow: none !important;
    }

    /* テキストサイズの微調整 */
    .peugeot-page .store-detail-name {
        font-size: 20px !important;
        margin-bottom: 15px !important;
    }

    .peugeot-page .store-address-group {
        font-size: 14px !important;
        line-height: 1.6 !important;
    }

    /* ボタンをスマホ幅に合わせる */
    .peugeot-page .btn-detail-peugeot {
        width: 100% !important;
        max-width: 280px;
        margin-top: 20px !important;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    /*特選車の詳細ページ*/

    .peugeot-page .page-specially-lead .special-lead-text {
        font-size: 18px;
        font-weight: normal;
        color: #000;
        margin: 0;
        letter-spacing: 0.05em;
    }


/*買取ページ*/
    .hero-main-copy {
        font-size: 24px; /* スマホで1〜2行に収まるサイズ */
        margin-bottom: 20px;
    }
    .hero-sub-copy {
        font-size: 18px;
    }
    .purchase-hero-text {
        text-shadow: 0 0 15px rgba(0, 0, 0, 0.9); /* スマホ用は影を少しタイトに */
    }

    .reason-grid {
        grid-template-columns: 1fr !important; /* 強制的に1列にする */
        gap: 40px;
    }

    /* 3つ目のボックスの設定をリセットして全幅にする */
    .reason-box:nth-child(3) {
        grid-column: auto;
        width: 100%;
    }

    .purchase-section-title {
        font-size: 22px;
        margin-bottom: 40px;
    }

    .reason-box {
        padding: 50px 20px 30px;
    }

    .store-contact-grid {
        grid-template-columns: 1fr !important;
        gap: 40px;
    }

    .store-contact-box:nth-child(3) {
        grid-column: auto;
        width: 100%;
    }
    
    .purchase-store-contact {
        padding: 60px 0;
    }

    .peugeot-page .form-input-inline-purchase {
/*
        display: block !important;
        */


    }

    .peugeot-page .form-input-inline-purchase input[name="expiry-year"],
    .peugeot-page .form-input-inline-purchase input[name="expiry-month"] {
        width: 100% !important; /* 横幅を他の項目と統一 */
        margin-bottom: 10px;    /* 下に隙間を作る */
        text-align: left !important;
    }

    /* 「年」「月」の文字をラベルのように調整、または非表示にする場合 */
    .peugeot-page .form-input-inline-purchase .input-unit {
        display: block;
        margin-bottom: 15px;
        font-size: 14px !important;
        color: #666 !important;
        text-align: right; /* 右に寄せて区切りを明確にする */
    }
}


@media (max-width: 650px) {
    .topics-list,
    .special-list,
    .approved-list {
        grid-template-columns: 1fr !important; /* 強制的に1列 */
        padding: 0 30px;
    }

    .full-width-img {
        height: 120px;
    }

    .peugeot-page .store-specially-selected .special-list {
        grid-template-columns: 1fr !important; /* スマホ1列 */
    }

    .hero-main-copy {
        font-size: 22px; /* スマホで1〜2行に収まるサイズ */
        margin-bottom: 20px;
    }
    .hero-sub-copy {
        font-size: 16px;
    }
    .purchase-hero-text {
        text-shadow: 0 0 15px rgba(0, 0, 0, 0.9); /* スマホ用は影を少しタイトに */
    }


}

@media (max-width: 480px) {
    .home.peugeot-page .mv {
        margin-top: 0 !important;   /* mainのpaddingで調整するため0にリセット */
        height: 75vw !important;    /* 4:3の比率 (3÷4=0.75) */
        min-height: 270px !important;
        position: relative !important;
        overflow: hidden;
        background-color: #000;
        padding-top: 70px !important;
    }

    /* 動画コンテナ内の絶対配置をスマホ用に最適化 */
    .home.peugeot-page .mv-video-container {
        padding-top: 0 !important;
        height: 100% !important;
        position: relative;
    }

    .home.peugeot-page .mv-video-wrapper {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
        transform: none !important; /* PC用の中央寄せを解除 */
    }

    .home.peugeot-page .mv-video-wrapper iframe {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important; /* 黒枠を出さずに枠いっぱいに表示 */
    }

/*下部ページのcss*/
    .peugeot-page .logo-peugeot {
        height: 40px;
    }
    .company-name {
        font-size: 8px;
    }

    .peugeot-section-title {
        font-size: 2rem !important;
    }

    .peugeot-topics-title-wrap {
        margin-top: 40px;
    }
    .peugeot-section-subtitle {
        font-size: 11px;
    }

    .peugeot-topics-header {
        padding: 0 0;
    }

    .peugeot-lead-text {
        font-size: 1rem;
        margin-top: 15px;
        display: inline-block;
        text-align: center;
        max-width: 90%;
    }
    .btn-header-contact {
        font-size: 9px;
        padding: 5px 8px;
    }

    .peugeot-topics-header::before {
        height: 120px; 
        width: 180vw; 
        left: -10px;  
        background-size: cover;
    }

    .peugeot-topics-title-wrap {
        margin-top: 40px;  
    }

    .peugeot-section-title {
        font-size: 24px;
        padding: 0 10px;
    }

    /* リード文との間隔 */
    .peugeot-lead-text {
        margin-top: 25px;
        font-size: 1rem;
    }

    .peugeot-topics{
        padding: 40px 0 40px;
        overflow: hidden;
    }
    
    .lineup-inner {
        max-width: 400px;
        width: 100%;
        margin: 0 auto;
        padding: 20px 30px;
    }

    .peugeot-lineup {
        background-image: url('../img/peugeot/peugeot_lineup_480.png'); 
        min-height: 200px; 
        background-position: center;
        margin-top: 0; 
    }

    .lineup-box {
        padding: 30px 15px; 
    }

    .lineup-title {
        font-size: 24px; 
    }

    .lineup-subtitle {
        font-size: 13px;
        margin-bottom: 25px;
    }

    /*特選車セクション*/

    .special-lead-area { flex-direction: column; gap: 10px; }


    .peugeot-page .special-section-title { 
        font-size: 24px;
    }

    .peugeot-page .special-lead-area {
        flex-direction: column;
        gap: 5px;
    }
    .peugeot-page .special-lead-text { 
        font-size: 15px;
    }

    .special-list {
        grid-template-columns: 1fr !important;
        padding: 0 10px;
    }
    .card-image-wrap {
        margin: 10px 0 0 0; 
    }
    .special-lead-area { flex-direction: column; gap: 20px; }
    .label-yellow { font-size: 14px; }

/* タイトル全体のレイアウトを調整 */
    .summary-title {
        display: flex;
        flex-direction: column; 
        align-items: flex-start; 
        gap: 5px; 
    }

    /* アイコンと英語テキストを横並び維持の設定 */
    .summary-title {
        position: relative;
        padding-left: 45px; 
    }

    .summary-title .sirius_icon {
        position: absolute;
        left: 0;
        top: 5px; 
    }

    /* 日本語部分を独立した行にする */
    .summary-title span, 
    .summary-title .title-sub-jp {
        display: block; 
        margin-left: 0; 
        font-size: 12px; 
        color: #888; 
    }
    .btn-contact-flat {
        font-size: 16px;
        height: 60px;
    }

/*認定中古車セクション*/

    .peugeot-page .approved-section-title {
        font-size: 2rem;
        font-family: "neue-haas-grotesk-display","Open Sans", sans-serif;
        font-weight: 700;
        color: #000;
        margin: 0;
    }

    .peugeot-page .approved-list {
        grid-template-columns: 1fr !important;
        padding: 0 10px;
    }


    .dealer-names {
        font-size: 10px;
        line-height: 1.6;
        margin: 0;
        white-space: nowrap;
    }

    .peugeot-footer-visual-group {
        background-attachment: scroll !important;
        padding-top: 40px;
    }

    .store-grid {
        grid-template-columns: 1fr; /* 完全1列 */
        gap: 10px;
    }

    .store-lead {
        margin: 20px 0 30px;
        font-size: 16px;
        padding: 0 20px;
    }

    .store-card {
        height: 350px; 
    }

    .store-name {
        font-size: 18px; /* 文字を少し小さく */
        margin-bottom: 15px;
    }

    .footer-visual-area {
        padding: 60px 20px; 
        background: transparent !important; 
    }

    .peugeot-store-info {
        background-color: #000 !important; 
    }

    .footer-message {
        font-size: 16px; 
        line-height: 2;
    }

    .store-section-title{
        font-size: 2rem;
    }

    .page-link {
        width: 35px;
        height: 35px;
        font-size: 12px;
    }

    .peugeot-model-grid {
        grid-template-columns: 1fr !important;
        gap: 10px 0 !important;
    }

    .detail-main-visual .full-width-img {
        width: 100%;
        height: 150px;
        object-fit: cover;
    }

/*特選車の詳細ページ*/

    .peugeot-page .page-specially-lead .special-lead-text {
        font-size: 16px;
    }

/*買取ページ*/

    .purchase-hero-img {
        width: 100%;
        height: auto;
        min-height: 170px;
        object-fit: cover;
    }

    .hero-main-copy {
        font-size: 24px; /* スマホで1〜2行に収まるサイズ */
        margin-bottom: 18px;
    }
    .hero-sub-copy {
        font-size: 14px;
    }
    .purchase-hero-text {
        text-shadow: 0 0 15px rgba(0, 0, 0, 0.9); /* スマホ用は影を少しタイトに */
    }

    /* 電話ボタン */
    .btn-store-tel {
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: var(--peugeot-blue); /* #0074e8 */
        color: #fff !important;
        text-decoration: none;
        font-weight: bold;
        padding: 15px 10px;
        border-radius: 30px; /* 丸みのあるボタン */
        transition: background-color 0.3s;
        font-size: 16px;
        width: fit-content; 
        min-width: 230px;
        max-width: 300px; 
        margin: 0 auto;
    }

    .store-business-hours {
        font-size: 12px !important;
        margin-top: 10px !important;
    }



}