@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, .br-480 {
    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: #000000; 
    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;
}

.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;
}

/* メインビジュアル全体のコンテナ */
.mv-container {
    position: relative; /* これを基準にしてロゴを配置します */
    width: 100%;
    overflow: hidden;
}

/* メインビジュアルの画像 */
.mv-img {
    width: 100%;
    display: block;
    height: auto;
}

/* 重ねるロゴの配置設定 */
.main-visual .logo {
    position: absolute; /* 絶対配置にして画像の上に重ねる */
    top: 40px;          /* 上からの位置 */
    left: 50%;          /* 左から50%の位置へ */
    transform: translateX(-50%); /* ロゴの幅の半分だけ左に戻して中央揃えにする場合 */
    z-index: 10;        /* 画像より確実に手前に表示させる */
    width: 250px;       /* ロゴの表示サイズ（適宜調整） */
    height: auto;
}


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

.sub-cap {
    padding: 60px 20px;
    text-align: left;
    background: #ffffff;
    position: relative;
    z-index: 30;
}

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

.description {
    font-family: "Noto Sans", sans-serif;
    font-size:32px;
    line-height: 1.6;
    font-weight: 700;
    margin-bottom: 40px;
    color: #1e7c6e;
}


/* ============================================================
   ギャラリー・スライダーセクション
   ============================================================ */
.gallery-slider-section {
    padding: 40px 0 60px;
    background-color: #fff;
    overflow: hidden; /* スライダーのはみ出しを画面外で隠す */
}

/* Swiperの画像調整 */
.gallery-swiper {
    width: 100%;
    padding-bottom: 60px; /* 下のテキストとの余白 */
}

.gallery-swiper .swiper-slide {
    width: 100%;
    height: auto;
}

.gallery-swiper .swiper-slide img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.gallery-swiper .swiper-slide-active img {
    opacity: 1;
}

/* テキスト・期間ボックスエリア */
.gallery-content {
    text-align: center;
    padding: 0 20px;
}

.gallery-content .inner {
    max-width: 1100px;
    margin: 0 auto;
}

.gallery-lead {
    font-family: "Noto Sans", sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.8;
    color: #1e7c6e; 
    margin-bottom: 40px;
}

/* 緑色の開催期間ボックス */
.fair-term-box {
    background-color: #1e7c6e; /* ディープグリーン */
    color: #ffffff;
    max-width: 650px;
    margin: 0 auto;
    padding: 30px 40px;
    border-radius: 20px; /* 角丸 */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    font-family: "Noto Sans", sans-serif;
}

.fair-term-box .box-title {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    margin-bottom: 15px;
}

.fair-term-box .box-sub {
    font-size: 1.8rem;
    font-weight: bold;
    margin-bottom: 10px;
}

.fair-term-box .box-date {
    font-size: 2rem;
    font-weight: 900;
    letter-spacing: 0.02em;
}


/* --- fairセクション --- */

img.brand-logo.fiat-logo {
    height: 100px;
}

.fair-title-area {
    width: 100%;
    background-color: #fff; 
    position: relative;
    z-index: 10;
    padding-top: 60px; 
    margin-bottom: 60px;
}

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

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

.fair-main-title {
    font-size: 38px;
    font-family: "Noto Sans", sans-serif;
    font-weight: bold;
    margin-bottom: 10px;
    color: #000;
}

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

/* ブランドロゴエリア */
.brand-header {
    display: block;
    align-items: center;
    text-align: center;
    margin-bottom: 30px;
    padding-top: 50px;
    padding-bottom: 18px;
}

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


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


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

/* 全体のコンテナ（マックス幅を既存の inner に合わせる） */
.renault-custom-layout {
    width: 100%;
    margin: 0 auto;
    background: linear-gradient(to bottom, #efdf00, #ede024);
    font-family: "Noto Sans", sans-serif;
    overflow: hidden;
}

/* ------------------------------------
    上部：写真と黄色ブロックの横並び
   ------------------------------------ */
.renault-top-block {
    display: flex;
    width: 100%;
    background: linear-gradient(to bottom, #efdf00, #ede024);
}

/* 左：写真 */
.renault-car-photo {
    flex: 0 0 50%;
    width: 50%;
}

.renault-car-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 右：情報エリア */
.renault-car-meta {
    flex: 0 0 50%;
    width: 50%;
    background: transparent;
    color: #222222;
    display: flex;
    align-items: center;
    padding: 60px 4%;
}

.renault-car-meta .jp-name {
    display: block;
    font-size: 30px;
    font-weight: bold;
    margin-bottom: 2px;
}

.renault-car-meta .en-name {
    font-size: 28px;
    font-weight: bold;
    letter-spacing: 0.05em;
    margin-bottom: 40px;
}

.renault-car-meta .catch-phrase {
    font-size: 25px;
    font-weight: bold;
    line-height: 1.6;
}

/* ------------------------------------
    中部：魅力のポイント（白背景）
   ------------------------------------ */
.renault-points-block {
    padding: 40px 60px;
    background-color: #ffffff;
}

.points-badge {
    display: inline-block;
    background-color: #333333;
    color: #ffffff;
    font-size: 25px;
    font-weight: bold;
    padding: 6px 20px;
    margin-bottom: 20px;
}

.points-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.points-list li {
    font-size: 22px;
    font-weight: bold;
    color: #333333;
    margin-bottom: 12px;
    padding-left: 15px;
    position: relative;
}

.points-list li::before {
    content: "・";
    position: absolute;
    left: 0;
    top: 0;
}

/* ------------------------------------
   下部：購入サポート特典（全面黄色）
   ------------------------------------ */
.renault-benefits-block {
    background: linear-gradient(to bottom, #efdf00, #ede024);
    padding: 45px 60px;
}

.benefits-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
}

.benefits-badge {
    background-color: #333333;
    color: #ffffff;
    font-size: 25px;
    font-weight: bold;
    padding: 6px 15px;
    white-space: nowrap;
}

.benefits-lead {
    font-size: 24px;
    font-weight: bold;
    color: #222222;
}

/* 白丸角の箇条書きカードスタック */
.benefits-cards-stack {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.benefit-white-card {
    background-color: #ffffff;
    border-radius: 10px;
    padding: 15px 25px;
    display: flex;
    align-items: flex-start;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    width: fit-content;
}

.benefit-white-card .card-num {
    font-size: 22px;
    font-weight: bold;
    color: #222222;
    margin-right: 15px;
    flex-shrink: 0;
}

.benefit-white-card .card-txt {
    font-size: 22px;
    font-weight: bold;
    color: #222222;
    line-height: 1.5;
}

.benefit-white-card .sub-detail {
    display: block;
    margin-top: 5px;
    padding-left: 0;
}


/* ============================================================
   フィアット
   ============================================================ */

.fiat-custom-layout {
    width: 100%;
    margin: 0 auto;
    background: linear-gradient(to bottom, #ed0202, #f54141);
    font-family: "Yu Gothic", "Meiryo", sans-serif;
    overflow: hidden;
}

/*  上部：写真とカラーブロックの横並び */
.fiat-top-block {
    display: flex;
    width: 100%;
    background: linear-gradient(to bottom, #ed0202, #f54141);
}

.fiat-car-photo {
    flex: 0 0 50%;
    width: 50%;
}

.fiat-car-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 右：情報エリア（レッド背景に映える白文字） */
.fiat-car-meta {
    flex: 0 0 50%;
    width: 50%;
    background: linear-gradient(to bottom, #ed0202, #f54141);
    color: #ffffff; 
    display: flex;
    align-items: center;
    padding: 60px 8%;
}

.fiat-car-meta .jp-name {
    display: block;
    font-size: 30px;
    font-weight: bold;
    margin-bottom: 2px;
}

.fiat-car-meta .en-name {
    font-size: 28px;
    font-weight: bold;
    letter-spacing: 0.05em;
    margin-bottom: 40px;
}

.fiat-car-meta .catch-phrase {
    font-size: 25px;
    font-weight: bold;
    line-height: 1.6;
}

/*  中部：魅力のポイント */
.fiat-points-block {
    background-color: #ffffff;
    padding: 40px 60px;
}

.fiat-points-block .points-inner {
    margin: 0 auto;
    padding: 0;
}

.fiat-points-block .points-badge {
    display: inline-block;
    background-color: rgb(51, 51, 51);
    color: rgb(255, 255, 255);
    font-size: 25px;
    font-weight: bold;
    padding: 6px 20px;
    margin-bottom: 20px;
}

.fiat-points-block .points-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.fiat-points-block .points-list li {
    font-size: 22px;
    font-weight: bold;
    color: #333333;
    margin-bottom: 12px;
    padding-left: 15px;
    position: relative;
}

.fiat-points-block .points-list li::before {
    content: "・";
    position: absolute;
    left: 0;
    top: 0;
}

/*  下部：購入サポート特典 */
.fiat-benefits-block {
    background: linear-gradient(to bottom, #ed0202, #f54141);
    padding: 45px 60px;
}

.fiat-benefits-block .benefits-inner {
    margin: 0 auto;
    padding: 0;
}

.fiat-benefits-block .benefits-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
}

.fiat-benefits-block .benefits-badge {
    background-color: #333333;
    color: #ffffff;
    font-size: 25px;
    font-weight: bold;
    padding: 6px 15px;
    white-space: nowrap;
}

.fiat-benefits-block .benefits-lead {
    font-size: 24px;
    font-weight: bold;
    color: #ffffff; /* 白抜き文字 */
}

/* 白丸角の箇条書きカード（文字幅フィット） */
.fiat-benefits-block .benefits-cards-stack {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.fiat-benefits-block .benefit-white-card {
    background-color: #ffffff;
    border-radius: 10px;
    padding: 18px 25px;
    display: flex;
    align-items: flex-start;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    width: fit-content;
}

.fiat-benefits-block .benefit-white-card .card-num {
    font-size: 22px;
    font-weight: bold;
    color: #222222;
    margin-right: 15px;
    flex-shrink: 0;
}

.fiat-benefits-block .benefit-white-card .card-txt {
    font-size: 22px;
    font-weight: bold;
    color: #222222;
    line-height: 1.6;
}

.fiat-benefits-block .benefit-white-card .sub-detail {
    display: block;
    margin-top: 5px;
}


/* ============================================================
   jeep
   ============================================================ */

img.brand-logo.jeep-logo {
    height: 80px;
}

.jeep-custom-layout {
    width: 100%;
    margin: 0 auto;
    background: linear-gradient(to bottom, #000000, #575757);
    font-family: "Yu Gothic", "Meiryo", sans-serif;
    overflow: hidden;
}

/*  上部：写真とカラーブロックの横並び */
.jeep-top-block {
    display: flex;
    width: 100%;
    background: linear-gradient(rgb(0, 0, 0), rgb(87, 87, 87));
}

.jeep-car-photo {
    flex: 0 0 50%;
    width: 50%;
}

.jeep-car-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 右：情報エリア（レッド背景に映える白文字） */
.jeep-car-meta {
    flex: 0 0 50%;
    width: 50%;
    background: transparent;
    color: #ffffff; 
    display: flex;
    align-items: center;
    padding: 60px 8%;
}

.jeep-car-meta .jp-name {
    display: block;
    font-size: 30px;
    font-weight: bold;
    margin-bottom: 2px;
}

.jeep-car-meta .en-name {
    font-size: 28px;
    font-weight: bold;
    letter-spacing: 0.05em;
    margin-bottom: 40px;
}

.jeep-car-meta .catch-phrase {
    font-size: 25px;
    font-weight: bold;
    line-height: 1.6;
}

/*  中部：魅力のポイント */
.jeep-points-block {
    background-color: #ffffff;
    padding: 40px 60px;
}

.jeep-points-block .points-inner {
    margin: 0 auto;
    padding: 0;
}

.jeep-points-block .points-badge {
    display: inline-block;
    background-color: #487f70;
    color: rgb(255, 255, 255);
    font-size: 25px;
    font-weight: bold;
    padding: 6px 20px;
    margin-bottom: 20px;
}

.jeep-points-block .points-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.jeep-points-block .points-list li {
    font-size: 22px;
    font-weight: bold;
    color: #333333;
    margin-bottom: 12px;
    padding-left: 15px;
    position: relative;
}

.jeep-points-block .points-list li::before {
    content: "・";
    position: absolute;
    left: 0;
    top: 0;
}

/*  下部：購入サポート特典 */
.jeep-benefits-block {
    padding: 45px 60px;
    background: linear-gradient(rgb(0, 0, 0), rgb(87, 87, 87));
}

.jeep-benefits-block .benefits-inner {
    margin: 0 auto;
    padding: 0;
}

.jeep-benefits-block .benefits-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
}

.jeep-benefits-block .benefits-badge {
    background-color: #487f70;;
    color: #ffffff;
    font-size: 25px;
    font-weight: bold;
    padding: 6px 15px;
    white-space: nowrap;
}

.jeep-benefits-block .benefits-lead {
    font-size: 24px;
    font-weight: bold;
    color: #ffffff; /* 白抜き文字 */
}

/* 白丸角の箇条書きカード（文字幅フィット） */
.jeep-benefits-block .benefits-cards-stack {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.jeep-benefits-block .benefit-white-card {
    background-color: #ffffff;
    border-radius: 10px;
    padding: 18px 25px;
    display: flex;
    align-items: flex-start;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    width: fit-content;
}

.jeep-benefits-block .benefit-white-card .card-num {
    font-size: 22px;
    font-weight: bold;
    color: #222222;
    margin-right: 15px;
    flex-shrink: 0;
}

.jeep-benefits-block .benefit-white-card .card-txt {
    font-size: 22px;
    font-weight: bold;
    color: #222222;
    line-height: 1.6;
}

.jeep-benefits-block .benefit-white-card .sub-detail {
    display: block;
    margin-top: 5px;
}





/* --- 特記事項セクション --- */
.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-info .title-area {
    max-width: 1000px;
    margin: 0 auto 60px;      /* 下の店舗情報との間にしっかり余白をあける */
    text-align: center;       /* 中身の要素をすべて中央揃えにする */
    padding: 0 20px;          /* スマホ等での画面端の詰まり防止 */
    display: block;           /* 確実に縦並びのブロックとして扱う */
}


.shop-info .shop-main-logo {
    width: 100%;
    max-width: 240px; 
    height: auto !important; 
    margin: 0 auto 60px !important;
    display: block !important; 
}

/* 追加した見出し（h2）の調整 */
.shop-info .title-area h2 {
    font-size: 26px;
    font-weight: 700;
    color: #111111;
    line-height: 1.4;
    letter-spacing: 0.03em;
    margin: 0 auto 35px;  
    display: block;           /* 独立した1行にする */
    position: relative;
    padding-bottom: 15px;
    width: fit-content;       /* 下線の長さを文字幅に合わせる */
}

/* 見出しの下のアクセント黒線 */
.shop-info .title-area h2::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background-color: #000000;
}

/* 紹介文（p）の調整 */
.shop-info .title-area p {
    font-size: 16px !important;
    color: #454545;
    line-height: 1.8; 
    text-align: center;
    max-width: 1000px !important;  
    margin: 0 auto; 
    display: block;
}

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

.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;
}


/* デフォルトではフローティングメニューを非表示 */
.floating-menu {
    display: none;
}

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

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

    .br-pc{
        display: none;
    }

    .br-sp{
        display: none;
    }

    .br-480{
        display: none !important;
    }
    

    .main-visual .logo {
        position: absolute;
        top: 40px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 10;
        width: 200px;
        height: auto;
    }

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

    .sub-cap {
        padding: 50px 20px;
        text-align: left;
        background: #ffffff;
        position: relative;
        z-index: 30;
    }

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

    .description {
        font-family: "Noto Sans", sans-serif;
        font-size: 26px;
        line-height: 1.6;
        font-weight: 700;
        margin-bottom: 40px;
        color: #1e7c6e;
    }


    .fair {
        padding: 40px 0 0;
    }

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

    .fair-main-title {
        font-size: 30px;
        font-family: "Noto Sans", sans-serif;
        font-weight: bold;
        margin-bottom: 10px;
        color: rgb(0, 0, 0);
    }

    .renault-top-block {
        flex-direction: column; /* 左右並びから縦並びに切り替え */
    }

    .renault-car-photo, 
    .renault-car-meta {
        width: 100%;
        flex: 0 0 100%;
    }

    .renault-car-meta {
        padding: 40px 30px; 
    }

    .renault-car-meta .en-name {
        margin-bottom: 25px; /* スペースを少し詰める */
    }

    .renault-points-block {
        padding: 40px 30px; /* タブレット用に左右余白を少し狭める */
    }

    .renault-benefits-block {
        padding: 45px 30px;
    }

    .fiat-top-block {
        flex-direction: column;
    }

    .fiat-car-photo, 
    .fiat-car-meta {
        width: 100%;
        flex: 0 0 100%;
    }

    .fiat-car-meta {
        padding: 40px 30px; 
    }

    .fiat-car-meta .en-name {
        margin-bottom: 25px; /* スペースを少し詰める */
    }

    .fiat-points-block {
        padding: 40px 30px; /* タブレット用に左右余白を少し狭める */
    }

    .fiat-benefits-block {
        padding: 45px 30px;
    }



    .jeep-top-block {
        flex-direction: column !important;
    }

    .jeep-car-photo, 
    .jeep-car-meta {
        width: 100%;
        flex: 0 0 100%;
    }

    .jeep-car-meta {
        padding: 40px 30px; 
    }

    .jeep-car-meta .en-name {
        margin-bottom: 25px; /* スペースを少し詰める */
    }

    .jeep-points-block {
        padding: 40px 30px; /* タブレット用に左右余白を少し狭める */
    }

    .jeep-benefits-block {
        padding: 45px 30px;
    }

    .floating-menu {
        display: none;
    }
    
}


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

    .br-pc{
        display: none;
    }

    .br-sp{
        display: none;
    }

    .br-480{
        display: none !important;
    }
    

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

    .sub-cap {
        padding: 50px 20px 30px;
        text-align: left;
        background: #ffffff;
        position: relative;
        z-index: 30;
    }

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

    .description {
        font-family: "Noto Sans", sans-serif;
        font-size: 22px;
        line-height: 1.6;
        font-weight: 700;
        margin-bottom: 40px;
        color: #1e7c6e;
    }

    .floating-menu {
        display: none;
    }
}


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

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

    .br-480{
        display: none !important;
    }
    
    .sub-title {
        font-size: 22px;
        font-weight: 700;
        margin-bottom: 15px;
        color: #000;
    }

    .main-visual .logo {
        position: absolute;
        top: 40px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 10;
        width: 180px;
        height: auto;
    }

    .description {
        font-family: "Noto Sans", sans-serif;
        font-size: 1.8rem;
        line-height: 1.8;
        font-weight: 700;
        margin-bottom: 40px;
        color: #1e7c6e;
        text-align: left;
    }


    /*スライド*/
    .gallery-lead {
        font-size: 1.3rem;
        line-height: 1.6;
        text-align: left;
        padding: 0 10px;
    }
    
    .fair-term-box {
        padding: 20px 15px;
        border-radius: 15px;
    }

    .fair-term-box .box-title {
        font-size: 1.2rem;
    }

    .fair-term-box .box-sub {
        font-size: 1rem;
    }

    .fair-term-box .box-date {
        font-size: 1.3rem;
    }

    .fair .inner {
        max-width: 1100px;
        margin: 0 auto;
        padding: 0 30px;
    }

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


    .renault-car-meta .jp-name {
        font-size: 22px; /* スマホで見やすい文字サイズに縮小 */
    }

    .renault-car-meta .en-name {
        font-size: 20px;
        margin-bottom: 20px;
    }

    .renault-car-meta .catch-phrase {
        font-size: 16px;
    }

    .renault-points-block {
        padding: 35px 20px; /* さらに余白を絞って画面端に合わせる */
    }

    .points-badge {
        font-size: 16px;
        margin-bottom: 15px;
    }

    .points-list li {
        font-size: 14px;
        line-height: 1.6;
    }

    .renault-benefits-block {
        padding: 40px 20px;
    }

    .benefits-header {
        flex-direction: column; /* 「購入サポート特典」と説明テキストを縦並びに */
        align-items: flex-start;
        gap: 10px;
        margin-bottom: 20px;
    }

    .benefits-badge {
        font-size: 16px;
    }

    .benefits-lead {
        font-size: 15px;
    }

    .benefit-white-card {
        width: 100%; /* スマホ画面では幅いっぱい、または自然な折り返しにする */
        padding: 15px;
    }

    .benefit-white-card .card-num {
        font-size: 15px;
        margin-right: 10px;
    }

    .benefit-white-card .card-txt {
        font-size: 14px;
        line-height: 1.5;
    }



    img.brand-logo.fiat-logo {
        height: 60px;
    }

    .fiat-car-meta .jp-name {
        font-size: 22px; /* スマホで見やすい文字サイズに縮小 */
    }

    .fiat-car-meta .en-name {
        font-size: 20px;
        margin-bottom: 20px;
    }

    .fiat-car-meta .catch-phrase {
        font-size: 16px;
    }

    .fiat-points-block {
        padding: 35px 20px; /* さらに余白を絞って画面端に合わせる */
    }

    .fiat-benefits-block {
        padding: 40px 20px;
    }

    .fiat-benefits-block .benefits-inner {
        padding: 0;
    }

    .fiat-points-block .points-badge {
        font-size: 16px;
    }

    .fiat-points-block .points-inner {
        margin: 0 auto;
        padding: 0;
    }

    .fiat-points-block .points-list li {
        font-size: 14px;
    }

    .fiat-benefits-block .benefits-header {
        flex-direction: column; /* 「購入サポート特典」と説明テキストを縦並びに */
        align-items: flex-start;
        gap: 10px;
        margin-bottom: 20px;
    }

    .fiat-benefits-block .benefits-badge {
        font-size: 16px;
    }

    .fiat-benefits-block .benefits-lead {
        font-size: 15px;
        font-weight: bold;
        color: #ffffff;
    }

    .fiat-benefits-block .benefit-white-card {
        width: 100%; /* スマホ画面では幅いっぱい、または自然な折り返しにする */
        padding: 15px;
    }

    .fiat-benefits-block .benefit-white-card .card-num {
        font-size: 15px;
        margin-right: 10px;
    }

    .fiat-benefits-block .benefit-white-card .card-txt {
        font-size: 14px;
        line-height: 1.5;
    }



    img.brand-logo.jeep-logo {
        height: 60px;
    }


    .jeep-car-meta .jp-name {
        font-size: 22px; /* スマホで見やすい文字サイズに縮小 */
    }

    .jeep-car-meta .en-name {
        font-size: 20px;
        margin-bottom: 20px;
    }

    .jeep-car-meta .catch-phrase {
        font-size: 16px;
    }

    .jeep-points-block {
        padding: 35px 20px; /* さらに余白を絞って画面端に合わせる */
    }

    .jeep-benefits-block {
        padding: 40px 20px;
    }
    
    .jeep-benefits-block .benefits-inner {
        padding: 0;
    }

    .jeep-points-block .points-inner {
        margin: 0 auto;
        padding: 0;
    }

    .jeep-points-block .points-badge {
        font-size: 16px;
    }

    .jeep-points-block .points-list li {
        font-size: 14px;
    }

    .jeep-benefits-block .benefits-header {
        flex-direction: column; /* 「購入サポート特典」と説明テキストを縦並びに */
        align-items: flex-start;
        gap: 10px;
        margin-bottom: 20px;
    }

    .jeep-benefits-block .benefits-badge {
        font-size: 16px;
    }

    .jeep-benefits-block .benefits-lead {
        font-size: 15px;
        font-weight: bold;
        color: #ffffff;
    }

    .jeep-benefits-block .benefit-white-card {
        width: 100%; /* スマホ画面では幅いっぱい、または自然な折り返しにする */
        padding: 15px;
    }

    .jeep-benefits-block .benefit-white-card .card-num {
        font-size: 15px;
        margin-right: 10px;
    }

    .jeep-benefits-block .benefit-white-card .card-txt {
        font-size: 14px;
        line-height: 1.5;
    }


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


    .shop-info .title-area h2 {
        font-size: 21px;      /* スマホで2行になっても綺麗に収まる文字サイズ */
        margin-bottom: 15px;
        padding-bottom: 12px;
    }

    .shop-info .title-area p {
        font-size: 14.5px;    /* スマホでの視認性を考慮したサイズ */
        line-height: 1.7;
        text-align: center;   
    }

    .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;
    }



    .floating-menu {
        display: flex;          
        position: fixed;           /* 画面の最下部に固定 */
        bottom: 0;
        left: 0;
        width: 100%;
        height: 60px;              /* ボタンの高さ */
        z-index: 9999;             /* 確実に一番手前に表示させる */
        background-color: #333333;
        box-shadow: 0 -4px 10px rgba(0,0,0,0.15);
        padding: 5px; 
        gap: 5px;
    }

    /* 各ボタンの共通スタイル */
    .float-btn {
        flex: 1; 
        display: flex;
        justify-content: center;  
        align-items: center;
        color: #ffffff !important; /* 文字色は白 */
        font-size: 16px;
        font-weight: bold;
        text-decoration: none;
        letter-spacing: 0.02em;
    }

    /* アイコン画像のサイズ・余白調整 */
    .float-icon {
        height: 24px; 
        width: auto;
        margin-right: 8px;         /* アイコンとテキストの間の距離 */
    }

    /* 電話ボタンの色 */
    .btn-tel {
        background-color: #31ace5;
    }

    /* LINEボタンの色*/
    .btn-line {
        background-color: #00c300;
    }

    body {
        padding-bottom: 60px;
    }

/* --- スマホ時のみページトップボタンをフローティングメニューの上に配置 --- */
    .page-top,
    .pagetop,
    #page-top {
        bottom: 75px !important;
        z-index: 9998 !important; 
    }

    .main-footer{
        padding: 30px 0 60px;
    }

}



@media screen and (max-width: 650px) {
    .description {
        font-family: "Noto Sans", sans-serif;
        font-size: 1.35rem;
        line-height: 1.8;
        font-weight: 700;
        margin-bottom: 40px;
        color: #1e7c6e;
        text-align: left;
    }
}



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

    .br-pc{
        display: none;
    }

    .br-tab{
        display: none;
    }

    .br-sp{
        display: block;
    }

    .br-480{
        display: block !important;
    }

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

    .main-visual .logo {
        position: absolute;
        top: 40px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 10;
        width: 150px;
        height: auto;
    }

    .description {
        font-family: "Noto Sans", sans-serif;
        font-size: 20px;
        line-height: 1.6;
        font-weight: 700;
        margin-bottom: 0;
        color: #1e7c6e;
        text-align: left;
    }


    .gallery-lead {
        font-size: 18px;
        line-height: 1.6;
        text-align: left;
        padding: 0 10px;
    }

    .fair-title-area {
        width: 100%;
        background-color: rgb(255, 255, 255);
        position: relative;
        z-index: 10;
        padding-top: 40px;
        margin-bottom: 40px;
    }


    .fair-term-box .box-title {
        font-size: 1.0rem;
    }
    .fair .inner {
        max-width: 480px;
        margin: 0 auto;
        padding: 0 20px;
    }

    .brand-header {
        display: block;
        text-align: center;
        align-items: center;
        gap: 20px;
        margin-bottom: 0;
        padding-bottom: 20px;
        padding-top: 24px;
    }

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

    .fair-main-title {
        font-size: 1.5rem;
        font-weight: 700;
        margin-bottom: 10px;
        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;
    }
}

@media screen and (max-width: 430px) {
    .description {
        font-family: "Noto Sans", sans-serif;
        font-size: 20px;
        line-height: 1.8;
        font-weight: 700;
        margin-bottom: 40px;
        color: #1e7c6e;
        text-align: left;
    }
}