@charset "utf-8";

/*
theme Name:modena
*/

/* CSS Document */

* {
  margin: 0px;
  padding: 0px;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  list-style:none;
}


html {
  height: 100%;
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}


body {
  color: #454545;
  background-color: #fff;
  font-size: 12px;
  font-family: "Yu Gothic Medium", "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
  height: 100%;
  width: 100%;
  letter-spacing: 0.05em;
  font-feature-settings: "palt" 1;
  font-kerning: auto;
  -webkit-text-size-adjust: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  overflow-x: hidden;
}

a {
    text-decoration: none !important; 
}

a:link, 
a:visited {
    text-decoration: none;
}

.br-pc, .br-tab, .br-sp {
    display: none;
}

/* 最初から表示させるためのクラス */
.is-visible {
    opacity: 1 !important;
    transform: translate(0, 0) !important;
    visibility: visible !important;
}

/* --- フェードインアニメーション --- */
.fade-in {
    opacity: 0; 
    transform: translateY(30px); 
    transition: opacity 0.8s ease-out, transform 0.8s ease-out; /* 0.8秒かけて変化 */
}

.fade-in.is-active {
    opacity: 1;
    transform: translateY(0);
}

/* ==================================== */
/* ページトップへ戻るボタン (.page-top) */
/* ==================================== */

.page-top {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 100;
    width: 50px;
    height: 50px;
    background-color: #ae1414; 
    color: #fff;            /* 白矢印 */
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    border-radius: 5px;     /* 少し角丸 */
    opacity: 0;             /* 初期状態は透明 */
    visibility: hidden;     /* 初期状態は非表示 */
    transition: all 0.3s ease;
    border: 1px solid #fff;
}

/* ボタンが表示された時のクラス */
.page-top.is-show {
    opacity: 0.8;
    visibility: visible;
}

.page-top:hover {
    opacity: 1;
    background-color: #6c6666;
    transform: translateY(-5px); /* 少し浮くアニメーション */
}

.page-top i {
    font-size: 20px;
}


header {
    position: fixed; 
    top: 0;
    left: 0;
    width: 100%;
    background-color: #ffffff; 
    z-index: 100; 
    color: #fff;
}

.main-header-bar {
    position: relative; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 30px 30px; 
}

/* ロゴの親要素（<a>タグ）のスタイル - 中央配置 */
.main-header-bar > a {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10; 
}

/* ロゴ画像 */
.logo {
    height: 30px; 
    width: auto;
    display: block; 
}

/*mv*/
.main-visual {
    width: 100%;
    margin-top: 60px; 
}

.main-visual img {
    width: 100%;
    height: auto;
    object-fit: cover; 
    display: block;
    aspect-ratio: auto;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- sub-capセクション --- */

.sub-cap {
    padding: 60px 20px;
    text-align: center;
    background: linear-gradient(180deg, #fff 0%, #fcd7d7 100%);
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 30;
}

.sub-cap .inner {
    max-width: 900px;
    margin: 0 auto;
}

.sub-title {
    font-family: "Noto Sans", sans-serif;
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 30px;
    color: #000;
}

.description {
    font-family: "Noto Sans", sans-serif;
    font-size: 18px;
    line-height: 1.8;
    margin-bottom: 40px;
    color: #333;
    font-weight: normal;
}

.description strong {
    font-weight: bold;
    font-size: 22px;
}

/* フェア開催期間の赤いボックス */
.term {
    background-color: #e60000;
    color: #fff;
    display: inline-block;
    padding: 20px 60px;
    border-radius: 10px; /* 角を少し丸める */
    font-size: 24px;
    font-weight: 900;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    font-family: "Noto Sans", sans-serif;
}

/* --- specialセクション --- */
.special {
    padding: 60px 0 60px;
    background-color: #fff;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 20;
}

.special .inner {
    max-width: 1100px; /* 3枚並びなので少し広めに */
    margin: 0 auto;
    padding: 0 20px;
}

.special-main-title {
    font-size: 32px;
    font-weight: 700;
    font-family: "Noto Sans", sans-serif;
    color: #000;
    margin-bottom: 20px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left center;
    display: inline-block;
    padding: 10px 60px 25px 20px; 
}

.special-lead {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 50px;
    color: #333;
    font-weight: normal;
    font-family: "Noto Sans", sans-serif;
}

/* グリッドレイアウト */
.special-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3列に並べる */
    gap: 40px 30px; /* 縦・横の隙間 */
}

.special-card {
    display: flex;
    flex-direction: column;
}

.card-img {
    position: relative; 
    width: 100%;
}

.card-img .badge {
    position: absolute;
    top: -10px;    
    left: -10px; 
    z-index: 2;
    width: 20%;
    max-width: 100px;
}

.card-img .main-photo {
    position: relative;
    z-index: 1;
    width: 100%; 
    aspect-ratio: 1 / 0.75; 
    object-fit:cover;
    border-radius: 15px; 
    display: block;
}

.card-img .badge img {
    width: 100%;
    height: auto;
    border-radius: 0 !important; /* 強制的に角丸を解除 */
    box-shadow: none;
    display: block;
}

.card-body {
    padding-top: 20px;
}

.card-body h3 {
    font-family: "Noto Sans", sans-serif;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #000;
}

.card-body p {
    font-family: "Noto Sans", sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: #333;
}

/* --- fairセクション --- */
.fair-title-area {
    width: 100%;
    background-color: #fff; 
    position: relative;
    z-index: 10;
    padding-top: 40px; 
    margin-bottom: 10px;
}

.fair-title-area .inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
    text-align: left; 
}

.fair {
    padding-top: 0 !important;
}

.fair-main-title {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #000;
}

.fair-lead {
    font-size: 18px;
    margin-bottom: 20px;
    color: #333;
    font-family: "Noto Sans", sans-serif;
}

/* ブランドロゴエリア */
.brand-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
    padding-top: 40px;
    padding-bottom: 20px;
}

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

.brand-name {
    font-size: 24px;
    font-weight: 700;
    color: #000;
    font-family: "Noto Sans", sans-serif;
}

.fair {
    padding: 80px 0 0;
    background-color: #fff;
}

.fair-list-area {
    background: linear-gradient(180deg, #e74242 0%, #ae1414 100%);
    padding: 60px 0;
    color: #fff;
}

.car-item {
    padding-bottom: 60px;
    margin-bottom: 60px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3); /* 白い半透明の線で区切る */
}

.car-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}
.fair .inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 車両カード */
.car-card {
    width: 100%;
    padding: 60px 0;
    color: #fff;
    margin-bottom: 60px;
}

/* 内側の中央寄せ用 */
.car-card-inner {
    display: flex;
    align-items: flex-start;
    gap: 50px;
}

.car-visual {
    flex: 1.2;
    position: relative;
    width: 100%;
}

.car-visual img {
    width: 100%;
    height: auto;
    border-radius: 20px;
    background-color: #fff;
    display: block;
    position: relative;
    z-index: 1;
}

/* タグのコンテナ */
.car-tags {
    position: absolute;
    top: 15px;      /* 画像の縁からの距離 */
    left: 15px;
    z-index: 10;
    display: flex;
    gap: 8px;
    pointer-events: none; 
}

/* タグ単体のスタイル */
.tag-label {
    background-color: #d80000;
    color: #fff;
    padding: 5px 15px;
    border-radius: 8px;
    font-weight: bold;
    font-size: 14px;
    font-family: "Noto Sans", sans-serif;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    white-space: nowrap; /* 改行防止 */
}

.car-details {
    flex: 1;
}

.car-name {
    font-size: 35px;
    font-weight: 900;
    margin-bottom: 15px;
    font-family: "Noto Sans", sans-serif;
}

/* 特典リスト */
.benefit-list {
    list-style: none;
    padding: 0;
}

.benefit-list li {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.benefit-list .tag {
    background-color: #fff;
    color: #d80000;
    font-weight: 700;
    font-family: "Noto Sans", sans-serif;
    padding: 4px 0;
    border-radius: 8px;
    width: 110px;
    text-align: center;
    margin-right: 15px;
    font-size: 13px;
    flex-shrink: 0;
}

.benefit-list .val {
    font-size: 16px;
    line-height: 1.4;
    font-family: "Noto Sans", sans-serif;
}

.benefit-list .val strong {
    font-size: 20px;
    font-weight: 700;
    font-family: "Noto Sans", sans-serif;
}

.car-details .note {
    margin-top: 20px;
    font-size: 11px;
    opacity: 1;
    text-align: left;
    font-family: "Noto Sans", sans-serif;
}
/* --- フェア特典：タグとレイアウトの微調整 --- */
.car-details {
    display: flex;
    flex-direction: column;
    gap: 2px; /* 全体の間隔をさらに凝縮 */
}

/* 購入資金・ローンの直接配置 */
.benefit-item.direct {
    display: flex;
    align-items: center;
    padding: 2px 0;
    color: #fff;
    width: 100%;
}

/* 白背景のタグ */
.tag.white-tag {
    background-color: #fff !important;
    color: #ae1414 !important; 
    border: none !important;
}

span.tag.white-tag {
    margin-left: 18px;
}

/* 白い背景ボックス（メンテナンス / アクセサリー&コーティング共通） */
.benefit-box {
    background-color: #fff;
    padding: 8px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    margin: 8px 0;
}

/* ボックス内の赤いアイテム */
.benefit-item.colored {
    background-color: #fff; 
    color: #ae1414;
    padding: 8px 12px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    width: 100%;
}

/* 共通タグのデザイン */
.benefit-item .tag {
    display: inline-block;
    font-size: 13px;
    font-weight: 800;
    padding: 3px 0;
    border-radius: 8px;
    min-width: 100px;
    text-align: center;
    margin-right: 15px;
    flex-shrink: 0;
}

/* ボックス内のタグは赤枠に白背景 */
.benefit-item.colored .tag {
    background-color: #ae1414;
    color: #fff;
    border: 1px solid #ae1414;
}

/* 「もしくは」のテキスト */
.benefit-divider {
    color: #fff;
    font-size: 13px;
    font-weight: bold;
    text-align: center;
    margin: 2px 0;
}

/* 「+」のテキスト */

.benefit-plus {
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    margin: 0;
}


/* 数値の強調 */
.benefit-item .val {
    font-size: 16px;
    font-weight: bold;
}
.benefit-item .val strong {
    font-size: 18px;
}

.note-link {
    text-align: left; 
}

/* aタグに対して直接、強制的に白を指定します */
.note-link a {
    color: #ffffff !important;   
    text-decoration: underline;   
    font-size: 11px;
    display: inline-block;
    padding: 2px 0;
    opacity: 1;
}

/* ホバー（マウスを乗せた時）の設定 */
.note-link a:hover {
    color: #eeeeee !important; 
    text-decoration: none;
}
/*jeepフェア*/
/* 黒のグラデーション背景 */
.jeep-bg {
    background: linear-gradient(180deg, #606060 0%, #000000 100%) !important;
    padding: 80px 0;
}

/* Jeepセクション内のボックス内の背景色（濃いグレー/黒） */
.jeep-bg .benefit-item.colored.jeep-color {
    color: #000;
}

/* Jeepセクション内のタグ設定 */
.jeep-bg .benefit-item .tag.jeep-tag {
    background-color: #ffe13a;
    color: #000;
    border: 1px solid #ffe13a;
}

/* 購入資金・ローンの白タグ内の文字色もJeepカラーに合わせる */
.jeep-bg .tag.white-tag {
    background-color: #ffeb3b !important;
    color: #000000 !important; 
    border: none !important;
}

/* リンクを白文字にする設定（!importantで強制） */
.jeep-bg .note-link a {
    color: #ffffff !important;
    text-decoration: underline;
}

.fair-jeep .benefit-list .tag {
    background-color: #ffe13a;
    color: #000;
}

.fair-jeep .car-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

/*ルノーフェア*/
/* 黄色のグラデーション背景 */
.renault-header .brand-logo {
    height: 80px; 
    width: auto;
}

.renault-area {
    color: #000 !important; 
    padding: 80px 0;
    background: linear-gradient(180deg, #fcdc03 0%, #ddbb00 100%) !important;
}

.renault-area .benefit-item.direct,
.renault-area .benefit-divider,
.renault-area .note {
    color: #000000 !important;
}


/* 「+」のテキスト */

.renault-area .benefit-plus {
    color: #000000;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    margin: 0;
}


/*  購入資金・ローンのタグ：白背景に黒文字 */
.renault-area .tag.white-tag {
    background-color: #000000 !important;
    color: #ffffff !important;
    border: 1px solid #000000 !important; /* 黄色に馴染むよう薄い枠線 */
}

/* ボックス内のアイテム背景：黒背景に白文字 */
.renault-area .benefit-item.colored.renault-color {
    background-color: #ffffff !important;
    color: #000000 !important;
}

/* ボックス内のタグ：白背景に黒文字 */
.renault-area .benefit-item.colored.renault-color .tag {
    background-color: #000000 !important;
    color: #ffffff !important;
    border: none !important;
}

/* 補足リンク：黄色背景なので黒文字 */
.renault-area .note-link a {
    color: #000000 !important;
    text-decoration: underline;
}

/* --- 共通の車両アイテム設定 --- */
.car-item {
    padding-bottom: 60px;
    margin-bottom: 60px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.6);
}

/* 最後のアイテムは線と余白を消す（共通） */
.car-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* --- 特選車両セクション専用スタイル --- */

.tokusen-area {
    background: transparent !important;
    padding: 0 !important;
}

.fair-tokusen {
    padding-top: 0 !important;
}
.tokusen-title-area {
    background-color: #fff;
    position: relative;
    z-index: 10;
    padding-top: 80px;
    padding-bottom: 20px;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
}


/* --- 特選車両：共通の形 --- */
.tokusen-card-wrapper {
    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 50px 0;
    color: #fff;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 3px 5px;
}
/* --- ブランド別：背景画像の指定 --- */

/*  FIAT (デフォルト) */
.tokusen-card-wrapper {
    background-image: url("../img/tokusen_red.png"); /* 基本は赤 */
}

/*  Jeep (クラスが付いている時だけ上書き) */
.tokusen-card-wrapper.tokusen-jeep {
    background-image: url("../img/tokusen_black.png") !important;
}

/*  Renault (クラスが付いている時だけ上書き) */
.tokusen-card-wrapper.tokusen-renault {
    background-image: url("../img/tokusen_yellow.png") !important;
}
/* ============================================================
   特選車両セクション専用
   ============================================================ */

/* 画像本体への設定 */
.tokusen-card-wrapper .car-visual img.img-border {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
    border-radius: 15px !important;
}

/*  白い情報ボックスの土台 */
.tokusen-card-wrapper .tokusen-info-box {
    background-color: #ffffff !important;
    padding: 15px !important;
    border-radius: 15px !important;
    width: 100% !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 7px !important; /* 縦の間隔を確保 */
}

/*  車名 (白ボックス内) */
.tokusen-card-wrapper .tokusen-info-box .car-name {
    color: #d80000!important; 
    font-size: 26px !important;
    font-weight: 900 !important;
    margin-bottom: 0 !important;
    text-align: left !important;
    white-space: normal !important;
    text-shadow: none !important;
    line-height: 1.2 !important;
}

/* --- [外] 購入資金・ローン部分 (文字色：赤) --- */
.tokusen-card-wrapper .benefit-item.direct-tokusen {
    display: flex !important;
    align-items: center !important;
    padding: 8px 0 0 !important; /* 余白を付けてくっつきすぎを解消 */
    gap: 15px !important;      /* タグと文字の隙間 */
}

.tokusen-card-wrapper .benefit-item.direct-tokusen .val {
    color: #d80000 !important; /* ボックス外の文字は赤 */
    font-weight: bold !important;
    font-size: 16px !important;
}

.tokusen-card-wrapper .tag.brand-tag {
    background-color: #d80000 !important;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    padding: 4px 0 !important;
    border-radius: 8px !important;
    min-width: 100px !important;
    text-align: center !important;
    flex-shrink: 0 !important;
    border: none !important;
    margin-left: 0 !important;
}

/* --- [内] 赤い箱の中の項目 (文字色：白) --- */
.tokusen-card-wrapper .benefit-box-inner {
    margin: 5px 0 !important;
}

.tokusen-card-wrapper .benefit-item.colored {
    background-color: #d80000 !important; /* 赤い箱背景 */
    padding: 5px 10px !important;
    border-radius: 8px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    width: 100% !important;
}

.tokusen-card-wrapper .benefit-item.colored .val {
    color: #ffffff !important; /* 赤い箱の中は白文字 */
    font-size: 14px !important;
    font-weight: bold !important;
}

.tokusen-card-wrapper .tag.white-tag {
    background-color: #ffffff !important;
    color: #d80000 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    padding: 3px 0 !important;
    border-radius: 20px !important;
    min-width: 100px !important;
    text-align: center !important;
    margin-right: 15px !important;
    flex-shrink: 0 !important;
    border: none !important;
    margin-left: 0 !important;
}

/* --- 特選車両：ボックス内の2項目（アクセサリー＆コーティング）の余白調整 --- */

/* ボックス内の各行（タグと文字の横並び）の設定 */
.tokusen-card-wrapper .benefit-item.colored .sub-row {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
}

/* ボックス内の文字色（白） */
.tokusen-card-wrapper .benefit-item.colored .val {
    color: #ffffff !important;
    font-size: 14px !important;
    margin: 0 !important;
}

/* ボックス内のタグ（白背景・赤文字） */
.tokusen-card-wrapper .tag.white-tag {
    background-color: #ffffff !important;
    color: #d80000 !important;
    min-width: 100px !important;
    text-align: center !important;
    border-radius: 8px !important;
    padding: 3px 0 !important;
    font-size: 12px !important;
    border: none !important;
    margin-left: 0 !important; 
}
.sub-row {
    padding: 8px 0px;
}

/* --- [その他] もしくは・注釈パーツ --- */
.tokusen-card-wrapper .benefit-divider-tokusen {
    color: #d80000 !important;
    font-weight: bold !important;
    text-align: center !important;
    margin: 8px 0 !important;
}

/* 「+」のテキスト */

.tokusen-card-wrapper .benefit-plus-tokusen {
    color: #d80000 !important;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    margin: 0;
}



.tokusen-card-wrapper .tokusen-info-box .note {
    color: #d80000 !important;
    margin-top: 5px;
    font-size: 11px !important;
    text-align: left !important;
}

.tokusen-card-wrapper .note-link a {
    color: #d80000!important;
    font-size: 11px !important;
}

.tokusen-card-wrapper .benefit-item.colored.two-rows {
    flex-direction: column !important; /* ここだけ縦並びにする */
    align-items: flex-start !important;
}
/* --- Jeep特選車専用：カラー上書き --- */

.tokusen-jeep .tag-label {
    background-color: #000000 !important;
    color: #ffffff !important;
}

/* 車名とボックス外のテキスト・もしくは・リンクを黒 */
.tokusen-jeep .tokusen-info-box .car-name,
.tokusen-jeep .benefit-item.direct-tokusen .val,
.tokusen-jeep .benefit-divider-tokusen,
.tokusen-jeep .note-link a{
    color: #000000 !important;
}

/* 「+」のテキスト */

.tokusen-jeep .benefit-plus-tokusen {
    color: #000000 !important;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    margin: 0;
}

.tokusen-jeep .tokusen-info-box .note{
    color: #000!important;
}

/* 購入資金・ローンのタグ：黄色背景に黒文字 */
.tokusen-jeep .tag.brand-tag {
    background-color: #000000 !important;
    color: #ffffff !important;
}

/* メンテナンス等のボックス背景：黒 */
.tokusen-jeep .benefit-item.colored {
    background-color: #000000 !important;
}

/* ボックス内のタグ：白背景に黒文字 */
.tokusen-jeep .tag.white-tag {
    background-color: #ffffff !important;
    color: #000000 !important;
}

/* ボックス外の注釈（背景画像の上）は白のまま */
.tokusen-jeep .car-details > .note {
    color: #000000 !important;
}


.tokusen-card-wrapper.tokusen-renault::before {
    background-image: url("../img/tokusen_yellow.png") !important;
}
.tokusen-renault .tag-label {
    background-color: #fcdc03 !important;
    color: #000000 !important; 
}

/* 車名とボックス外のテキスト・もしくは・リンク */
.tokusen-renault .tokusen-info-box .car-name{
    color: #000000 !important;
}

.tokusen-renault .note-link a{
    color: #000000 !important;
}
.tokusen-renault .tokusen-info-box .note{
    color: #000000 !important;
}

.tokusen-renault .benefit-item.colored .val {
    color: #000000 !important;
}

.tokusen-renault .benefit-item.direct-tokusen .val{
    color: #000 !important;
}

.tokusen-renault .benefit-divider-tokusen{
    color: #000000 !important;
}

/* 「+」のテキスト */

.tokusen-renault .benefit-plus-tokusen {
    color: #000000 !important;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    margin: 0;
}


/* 購入資金・ローンのタグ*/
.tokusen-renault .tag.brand-tag {
    background-color: #fcdc03 !important;
    color: #000000 !important;
}

/* メンテナンス等のボックス背景：黒 */
.tokusen-renault .benefit-item.colored {
    background-color: #fcdc03 !important;
}

/* ボックス内のタグ*/
.tokusen-renault .tag.white-tag {
    background-color: #000000 !important;
    color: #ffffff !important;
}

/* ボックス外の注釈（背景画像の上）は白のまま */
.tokusen-renault .car-details > .note {
    color: #000000 !important;
}



/* --- 特記事項セクション --- */
.notes-section {
    padding: 60px 0;
    background-color: #fff; 
}

.notes-box {
    max-width: 1200px;
    background-color: #f2f2f2;
    padding: 40px;
    margin: 0 auto;
    border-radius: 20px;
}

.notes-title {
    font-size: 18px;
    font-family: "Noto Sans", sans-serif;
    font-weight: 700;
    margin-bottom: 20px;
    color: #333;
}

.notes-list {
    list-style: none;
    padding: 0;
}

.notes-list li {
    font-size: 14px;
    font-family: "Noto Sans", sans-serif;
    line-height: 1.3;
    color: #000000;
    margin-bottom: 3px;
    padding-left: 1em;
}

.notes-list li:last-child {
    margin-bottom: 0;
}

/* --- ショップ情報セクション --- */
.shop-info {
    padding: 80px 0 0;
    background-color: #eee; /* 薄いグレーの背景 */
    text-align: center;
}

.shop-header {
    margin-bottom: 50px;
}

.shop-main-logo {
    height: 40px;
    margin-bottom: 15px;
}

.company-name {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
}

.company-address, .company-time, .company-holiday {
    font-size: 14px;
    line-height: 1.6;
    color: #333;
}

/* 3カラムレイアウト */
.shop-grid {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin: 0 auto 60px;
    max-width: 1200px;
}

.shop-card {
    flex: 1;
}

.shop-photo {
    width: 100%;
    height: auto;
    margin-bottom: 15px;
    border: 1px solid #ddd;
}

.shop-name {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 5px;
}

.shop-tel {
    font-size: 14px;
    color: #333;
    text-decoration: none;
}

.shop-tel:hover {
    text-decoration: underline !important;
}

/* マップ */
.shop-map {
    width: 100vw;          /* 画面の横幅100% */
    position: relative;
    left: 50%;
    transform: translateX(-50%); /* 親要素の幅に関わらず画面中央に配置 */
    margin-top: 40px;      /* 上の店舗カードとの隙間 */
    line-height: 0;        /* iframeの下にできる謎の隙間を解消 */
    overflow: hidden;
}

.shop-map iframe {
    width: 100% !important;
    display: block;        /* 下の隙間防止 */
}

/* もし親要素の shop-info 自体に左右パディングがある場合は打ち消す */
.shop-info {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* --- フッター専用スタイル --- */
.main-footer {
    padding: 30px 0;
    background-color: #fff;
    text-align: center;
    border-top: 1px solid #eee; /* 地図との境目に薄い線を入れる */
}

.footer-logo {
    margin-bottom: 30px;
}

.footer-logo img {
    height: 30px; 
    width: auto;
}

.footer-links {
    display: flex;
    justify-content: center;
    gap: 40px; /* リンク同士の間隔 */
    margin-bottom: 40px;
    padding: 0;
}

.footer-links li a {
    font-size: 14px;
    color: #666;
    text-decoration: none;
    transition: color 0.3s;
}

.footer-links li a:hover {
    color: #000;
    text-decoration: underline !important;
}

.copyright {
    font-size: 12px;
    color: #999;
    letter-spacing: 0.1em;
}

@media screen and (min-width: 1001px) {
    .br-pc {
        display: block !important;
    }
}

@media  screen and (max-width: 1000px) {
    .br-tab{
        display: block;
    }

    .br-pc{
        display: none;
    }

    .br-sp{
        display: none;
    }

    .special-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr); 
        gap: 40px 30px; /* 縦・横の隙間 */
    }

    .fair {
        padding: 40px 0 0;
    }

    .car-card-inner {
        display: flex;
        align-items: flex-start;
        gap: 20px;
    }
    
    .car-item {
        padding-bottom: 30px;
        margin-bottom: 30px;
    }

    .fair-list-area {
        padding: 40px 0;
    }

    .jeep-bg {
        padding: 40px 0;
    }

    .renault-header .brand-logo {
        height: 70px;
        width: auto;
    }

    .renault-area {
        padding: 40px 0;
    }

    .car-name {
        font-size: 28px;
        font-weight: 900;
        margin-bottom: 25px;
        font-family: "Noto Sans", sans-serif;
    }

    /*特選背景変更*/
    /* FIAT（デフォルト） */
    .tokusen-card-wrapper,
    .tokusen-card-wrapper::before {
        background-image: url("../img/tokusen_red_sp.png") !important;
    }

    /* Jeep */
    .tokusen-card-wrapper.tokusen-jeep,
    .tokusen-jeep.tokusen-card-wrapper::before {
        background-image: url("../img/tokusen_black_sp.png") !important;
    }

    /* Renault */
    .tokusen-card-wrapper.tokusen-renault,
    .tokusen-renault.tokusen-card-wrapper::before {
        background-image: url("../img/tokusen_yellow_sp.png") !important;
    }
}


@media screen and (max-width: 768px) {

    .br-pc {
        display: none !important; 
    }
    .br-sp {
        display: block !important; 
    }

    .main-visual {
        margin-top: 60px; 
    }
    
    .sub-title {
        font-size: 22px;
        font-weight: 700;
        margin-bottom: 15px;
        color: #000;
    }

    .description {
        font-size: 1rem;
        line-height: 1.8;
        margin-bottom: 30px;
        color: #333;
        font-weight: normal;
        text-align: left;
        padding: 0 20px;
    }

    .term {
        background-color: #e60000;
        color: #fff;
        display: inline-block;
        padding: 20px 15px;
        border-radius: 10px;
        font-size: 16px;
        font-weight: 700;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }

    .special .inner {
        max-width: 1100px;
        margin: 0 auto;
        padding: 0 30px;
    }
    .special-grid {
        display: grid;
        grid-template-columns: repeat(1, 1fr); 
        gap: 40px 30px; /* 縦・横の隙間 */
        text-align: center; 
        align-items: center; 
    }

    .card-img .main-photo {
        position: relative;
        z-index: 1;
        max-width: 480px;
        width: 100%;
        margin: 0 auto; 
        aspect-ratio: 1 / 0.65;
        object-fit: cover;
        border-radius: 15px;
        display: block;
    }
    .card-img .badge {
        left: 0;
    }

    .card-body h3 {
        font-size: 20px;
        font-weight: 700;
        margin-bottom: 10px;
        color: #000;
    }
    .card-body p {
        font-size: 16px;
        line-height: 1.5;
        color: #333;
    }

    .car-card {
        flex-direction: column;
        padding: 20px;
    }
    .car-name {
        font-size: 22px;
    }
    .benefit-list .val {
        font-size: 16px;
    }

    .tokusen-title-area {
        padding-top: 40px;
        padding-bottom: 10px;
    }
    .fair .inner {
        max-width: 1100px;
        margin: 0 auto;
        padding: 0 30px;
    }

    .car-card-inner {
        flex-direction: column; 
        gap: 30px;
        padding: 0;
    }

    .car-visual, 
    .car-details {
        max-width: 700px;
    }

    .car-details {
        width: 100%;
    }
    .car-item {
        padding-bottom: 40px;
        margin-bottom: 40px;
    }

    .car-tags {
        top: 10px;
        left: 10px;
    }

    .tag-label {
        font-size: 14px;
        padding: 3px 8px;
    }

    .car-name {
        font-size: 30px;
        padding-left: 20px;
    }

    /* 特典リストの崩れ防止 */
    .benefit-list li {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-bottom: 20px;
        justify-content: flex-start;
    }

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

    .fair-main-title {
        font-size: 26px;
        font-weight: 700;
        margin-bottom: 10px;
        color: #000;
    }

    .notes-section {
        padding: 40px 0;
    }
    .notes-box {
        padding: 25px;
        margin: 0 20px; /* 画面端にひっつかないよう調整 */
    }
    .notes-title {
        font-size: 16px;
    }
    .notes-list li {
        font-size: 13px;
    }

    /* FIAT（デフォルト） */
    .tokusen-card-wrapper {
        background-image: url("../img/tokusen_red_sp.png") !important;
    }

    /* Jeep */
    .tokusen-card-wrapper.tokusen-jeep {
        background-image: url("../img/tokusen_black_sp.png") !important;
    }

    /* Renault */
    .tokusen-card-wrapper.tokusen-renault {
        background-image: url("../img/tokusen_yellow_sp.png") !important;
    }

    /* スマホ版での背景サイズ調整（必要に応じて） */
    .tokusen-card-wrapper {
        background-size: 100% 100%; /* 画像の全体を収める設定 */
        padding: 40px 0; /* スマホ版の余白調整 */
    }

    .shop-grid {
        flex-direction: column;
        gap: 40px;
    }
    .shop-card {
        padding: 0 80px;
    }
    .shop-main-logo {
        height: 30px;
    }

    .footer-links {
        flex-direction: column; /* スマホでは縦並びに */
        gap: 20px;
    }
    .footer-logo img {
        height: 30px;
    }


}
@media screen and (max-width: 480px) {

    .br-pc{
        display: none;
    }

    .br-tab{
        display: none;
    }

    .br-sp{
        display: block;
    }

    .logo {
        height: 25px;
        width: auto;
        display: block;
    }

    .special-main-title {
        padding: 10px 60px 15px 0px;
        font-size: 28px;
    }

    .term {
        font-size: 14px;
    }

    .card-body p {
        font-size: 16px;
        line-height: 1.8;
        color: #333;
    }

    .card-body h3 {
        font-size: 20px;
    }

    .card-img .main-photo {
        position: relative;
        z-index: 1;
        width: 100%;
        aspect-ratio: 1 / 0.65;
        object-fit: cover;
        border-radius: 15px;
        display: block;
    }

    .special .inner {
        max-width: 1100px;
        margin: 0 auto;
        padding: 0 20px;
    }

    .special-grid {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 40px 30px;
    }

    .card-img .badge {
        left: -10px;
    }

    .fair .inner {
        max-width: 480px;
        margin: 0 auto;
        padding: 0 20px;
    }

    .brand-header {
        display: flex;
        align-items: center;
        gap: 20px;
        margin-bottom: 0;
        padding-bottom: 20px;
    }

    .brand-name {
        font-size: 20px;
        font-weight: 700;
        color: #000;
    }

    .fair-lead {
        font-size: 15px;
        margin-bottom: 30px;
        color: #333;
    }

    .fair-list-area {
        background: linear-gradient(180deg, #f03737 0%, #ae1414 100%);
        padding: 30px 0;
        color: #fff;
    }

    .benefit-item .val strong {
        font-size: 16px;
    }

    .benefit-item .val {
        font-size: 14px;
        font-weight: bold;
    }

    .car-name {
        margin-left: 0px;
        font-size: 26px;
    }

    .tag-label {
        font-size: 11px;
        padding: 3px 8px;
    }

    .renault-header .brand-logo {
        height: 60px;
        width: auto;
    }

    .shop-card {
        padding: 0 30px;
    }
}