@charset "UTF-8";

/* ==========================================================================
   【1. リセット＆ベース設定】
   ブラウザのデフォルトの余白や設定をリセットし、サイト全体の基本となる
   フォントや背景色、横ブレ防止の仕組みを設定します。
   ========================================================================== */
*, *::before, *::after { 
  box-sizing: border-box; 
}

/* スマホ表示の時だけ、横スクロール（画面のグラグラ）を強制的に防ぐバリア */
@media (max-width: 767px) { 
  html { 
    overflow-x: hidden; 
  } 
}

body {
  margin: 0;
  /* サイト全体の基本フォント */
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  color: #333;
  /* サイト全体の背景色 */
  background-color: #ffffff; 
  /* 横ブレ防止の基本設定 */
  overflow-x: hidden; 
}

a { 
  text-decoration: none; 
  color: inherit; 
}

/* ==========================================================================
   【2. レイアウトモジュール（コンテナとセクション）】
   サイトのコンテンツが横に広がりすぎないように守る基本の枠（コンテナ）と、
   各コンテンツのまとまり（セクション）の共通の隙間を設定します。
   ========================================================================== */
.l-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 10px;
}

.l-section { 
  /* 【ルール1】上下の位置調整はマイナス＝上、プラス＝下 */
  /* ★調整：ここの数値を小さく（マイナス方向に）すると、次のセクション全体が上に動きます */
  margin-top: 60px; 
}

/* ==========================================================================
   【各セクションの共通大見出し】
   「MINI/BMWの修理事例」などの大見出しのデザインです。
   左右に細いグレーの線を配置し、スッキリとした見た目にしています。
   ========================================================================== */
.c-sec-title,
.c-line-title {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  font-family: 'Roboto', "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-size: 1.0rem; 
  font-weight: 500; 
  color: #666666; 
  text-align: center;
  padding: 0;
  /* 【ルール1】上下の位置調整はマイナス＝上、プラス＝下 */
  /* ★調整：ここの数値を小さくすると、大見出し全体が上に動きます */
  margin-top: 50px; 
  /* ★調整：大見出しと、その下のコンテンツとの隙間です */
  margin-bottom: 20px;
}

/* 見出しの左右に引く細いグレーの線 */
.c-sec-title::before,
.c-sec-title::after,
.c-line-title::before,
.c-line-title::after {
  content: "";
  flex-grow: 1; 
  /* 【ルール2】背景などのサイズ指定は「開始位置＋高さ」で行う */
  height: 1px; 
  background-color: #cccccc; 
  border: none; 
  /* 【ルール1】上下の位置調整はマイナス＝上、プラス＝下 */
  margin-top: 0;
}

/* 線と文字の間の隙間 */
.c-sec-title::before, 
.c-line-title::before { 
  margin-right: 15px; 
}
.c-sec-title::after, 
.c-line-title::after { 
  margin-left: 15px; 
}

/* セクション内のコンテンツを囲む箱の上の隙間 */
.l-section__body { 
  /* 【ルール1】上下の位置調整はマイナス＝上、プラス＝下 */
  margin-top: 30px; 
}

/* ==========================================================================
   【3. ヘッダー (スマホ用基本設定)】
   画面の一番上に表示されるロゴの部分です。
   ========================================================================== */
.l-header {
  background-color: #ffffff; 
  border-bottom: 1px solid #ddd;
  position: relative;
  z-index: 100;
  /* 【ルール2】背景などのサイズ指定は「開始位置＋高さ」で行う */
  top: 0;
  height: 70px; 
}

.l-header__inner {
  display: flex;
  align-items: center;
  justify-content: flex-start; 
  gap: 15px; 
  height: 100%; 
  padding: 0 20px;
}

.l-header__logo h1 { 
  margin: 0; 
  display: flex; 
  align-items: center; 
}
.l-header__logo a { 
  display: block; 
  margin-top: 0; 
}
.l-header__logo-img { 
  width: 90px; 
  max-width: 100%; 
  height: auto; 
  display: block; 
}

/* ヘッダー内のSNSアイコン（スマホでは非表示、PC用で表示させます） */
.l-header__sns {
  display: flex;
  align-items: center;
  gap: 10px; 
}

.l-header__sns-link { 
  display: block; 
  transition: transform 0.3s ease, opacity 0.3s ease; 
  margin-top: 0; 
}
.l-header__sns-link:hover { 
  opacity: 0.8; 
  transform: translateY(-4px); 
}
.l-header__sns-img { 
  width: 35px; 
  height: auto; 
  display: block; 
  border-radius: 4px; 
}

/* ==========================================================================
   【4. メニュー周り ＆ 追従コンタクトボタン (スマホ用基本設定)】
   ハンバーガーボタンと、画面の端に追従してくるボタン群の設定です。
   ========================================================================== */
/* ハンバーガーボタン（三本線） */
.c-hamburger-btn {
  position: fixed; 
  right: 15px; 
  background-color: transparent; 
  border: none; 
  cursor: pointer; 
  z-index: 999;
  display: flex; 
  justify-content: center; 
  align-items: center; 
  padding: 0; 
  /* 【ルール2】背景などのサイズ指定は「開始位置＋高さ」で行う */
  top: 10px; 
  height: 45px; 
  margin-top: 0; 
}
.c-hamburger-btn__img { 
  width: 40px; 
  height: auto; 
  display: block; 
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)); 
  margin-top: 0; 
  transition: transform 0.3s ease, filter 0.3s ease; 
}

/* メニューを開いたときの全画面オーバーレイ */
.c-menu-overlay {
  position: fixed; 
  left: 0; 
  width: 100%; 
  background-color: #e5e7e8; 
  z-index: 10001; 
  opacity: 0; 
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease; 
  overflow-y: auto; 
  /* 【ルール2】背景などのサイズ指定は「開始位置＋高さ」で行う */
  top: 0; 
  height: 100vh;
}
.c-menu-overlay.is-active { 
  opacity: 1; 
  visibility: visible; 
}
.c-menu-overlay__inner { 
  position: relative; 
  max-width: 800px; 
  margin: 0 auto; 
  padding: 40px 30px; 
}
.c-menu-overlay__logo { 
  font-size: 1.2rem; 
  font-weight: bold; 
  color: #1b365d; 
}
.c-menu-nav { 
  margin-top: 50px; 
}
.c-menu-nav__grid { 
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  gap: 40px 20px; 
}
.c-menu-nav__main { 
  display: flex; 
  flex-direction: column; 
  font-size: 1.5rem; 
  font-weight: bold; 
  color: #000; 
  letter-spacing: 0.05em; 
}
.c-menu-nav__main span { 
  font-size: 0.75rem; 
  font-weight: normal; 
  color: #333; 
  margin-top: 5px; 
}
.c-menu-nav__sub { 
  list-style: none; 
  padding: 0; 
  margin-top: 15px; 
}
.c-menu-nav__sub li { 
  font-size: 0.75rem; 
  margin-top: 10px; 
}
.c-menu-nav__spacer { 
  margin-top: 40px; 
}
.c-menu-overlay__divider { 
  border: none; 
  border-top: 1px solid #ccc; 
  margin-top: 40px; 
}

/* メニュー内の閉じるボタン */
.c-menu-btn {
  display: flex; 
  justify-content: center; 
  align-items: center; 
  background-color: #000000; 
  color: #ffffff; 
  font-size: 1.1rem;
  font-weight: bold; 
  width: 100%; 
  max-width: 180px; 
  margin-left: auto; 
  margin-right: auto; 
  border-radius: 30px; 
  border: 1px solid #000000; 
  cursor: pointer; 
  /* 【ルール2】背景などのサイズ指定は「開始位置＋高さ」で行う */
  height: 50px; 
  /* 【ルール1】上下の位置調整はマイナス＝上、プラス＝下 */
  margin-top: 40px; 
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.c-menu-btn:hover { 
  background-color: #ffffff; 
  color: #000000; 
  transform: translateY(-4px); 
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15); 
}
.c-menu-overlay__copy { 
  font-size: 0.75rem; 
  color: #666; 
  text-align: center; 
  margin-top: 20px; 
}

/* スマホ表示ではPC用の追従ボタンを消す */
#pc-fixed-contact { 
  display: none !important; 
}

/* スマホ用下部追従ボタン（フワッと出てくる） */
#sp-fixed-btn {
  display: flex !important; 
  position: fixed; 
  z-index: 9999; 
  background-color: transparent; 
  left: 0; 
  width: 100%; 
  /* 【ルール2】背景などのサイズ指定は「開始位置＋高さ」で行う */
  top: 100%; 
  top: 100dvh; 
  height: 80px; 
  /* 【ルール1】上下の位置調整はマイナス＝上、プラス＝下 */
  transform: translateY(20px); 
  opacity: 0; 
  visibility: hidden; 
  box-shadow: 0 -5px 15px rgba(0,0,0,0.08); 
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.6s ease, visibility 0.6s;
}
#sp-fixed-btn.custom-show { 
  transform: translateY(-100%) !important; 
  opacity: 1 !important; 
  visibility: visible !important; 
}
#sp-fixed-btn a { 
  flex: 1; 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  justify-content: center; 
  text-decoration: none; 
  color: #333333; 
  text-align: center; 
  box-sizing: border-box; 
  padding: 0 2px; 
  border-right: 1px solid rgba(0, 0, 0, 0.1); 
  backdrop-filter: blur(15px); 
  -webkit-backdrop-filter: blur(15px); 
}
.btn-store, 
.btn-tel, 
.btn-line { 
  background-color: rgba(255, 255, 255, 0.95); 
}
#sp-fixed-btn a:last-child { 
  border-right: none; 
}
#sp-fixed-btn i { 
  font-size: 25px; 
  margin-top: 0px; 
  filter: none; 
}
#sp-fixed-btn a span { 
  font-family: 'Roboto', "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; 
  font-size: 11.5px; 
  font-weight: 800; 
  line-height: 1.25; 
  letter-spacing: 0.02em; 
  text-shadow: none; 
  margin-top: 5px; 
}
#sp-fixed-btn .slash { 
  margin: 0 2px; 
  font-weight: normal; 
}
.btn-store .c-coupon-img { 
  display: block; 
  width: 26px; 
  height: 26px; 
  object-fit: contain; 
  margin-left: auto; 
  margin-right: auto; 
  margin-top: 0px; 
  margin-bottom: 2px; 
}

/* ==========================================================================
   【5. メインビジュアル (スマホ用基本設定)】
   一番最初の大きな画像と文字のアニメーション部分です。
   ========================================================================== */
.l-hero-slider { 
  position: relative; 
  width: 100%; 
  margin-left: auto; 
  margin-right: auto; 
  overflow: hidden; 
  background-color: #ffffff; 
  /* 【ルール1】上下の位置調整はマイナス＝上、プラス＝下 */
  margin-top: 0; 
  /* 【ルール2】背景などのサイズ指定は「開始位置＋高さ」で行う */
  height: 80vh; 
}
.l-hero-slider__slide { 
  position: absolute; 
  left: 0; 
  width: 100%; 
  top: 0; 
  height: 100%; 
  opacity: 0; 
  animation: slideFade 10s infinite; 
}
.l-hero-slider__picture { 
  position: absolute; 
  top: 0; 
  height: 100%; 
  width: 100%; 
}
.l-hero-slider__picture--left { 
  clip-path: none; 
}
.l-hero-slider__picture--right { 
  display: none; 
}
.l-hero-slider__img { 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
  display: block; 
}
.l-hero-slider__picture--left .l-hero-slider__img { 
  animation: panDown 10s infinite; 
}
.l-hero-slider__slide:nth-child(1), 
.l-hero-slider__slide:nth-child(1) .l-hero-slider__img { 
  animation-delay: 0s; 
}
.l-hero-slider__slide:nth-child(2), 
.l-hero-slider__slide:nth-child(2) .l-hero-slider__img { 
  animation-delay: 5s; 
}

/* メインビジュアル上の固定テキスト（オーバーレイ） */
.l-hero-slider__overlay { 
  position: absolute; 
  left: 0; 
  width: 100%; 
  top: 0; 
  height: 100%; 
  z-index: 20; 
  display: flex; 
  flex-direction: column; 
  justify-content: center; 
  align-items: center; 
  pointer-events: none; 
}
.l-hero-slider__sub-title { 
  position: relative; 
  color: #ffffff; 
  font-family: 'Roboto', "Helvetica Neue", Arial, sans-serif; 
  font-size: 1.1rem; 
  font-weight: bold; 
  letter-spacing: 0.25em; 
  margin-top: -8px; 
  margin-bottom: 0; 
}
.l-hero-slider__sub-title::before { 
  content: ""; 
  position: absolute; 
  background-color: #ffffff; 
  width: 1px; 
  left: -20px; 
  transform: rotate(45deg); 
  top: 100%; 
  height: 50px; 
  margin-top: -5px; 
}
.l-hero-slider__center-bar { 
  display: flex; 
  position: relative; 
  border-radius: 50px; 
  overflow: hidden; 
  width: 90%; 
  max-width: 340px; 
  height: 48px; 
  margin-top: 30px; 
}
.l-hero-slider__bar-left { 
  flex: 1; 
  position: relative; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  background-color: #262727; 
  color: #ffffff; 
  letter-spacing: 0.1em; 
  font-size: 0.85rem; 
  font-weight: bold; 
}
.l-hero-slider__bar-right { 
  flex: 1; 
  position: relative; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  background-color: #f8d63b; 
  color: #262727; 
  letter-spacing: 0.1em; 
  font-size: 0.85rem; 
  font-weight: bold; 
}

/* 背景画像と同期して切り替わるテキスト */
.l-hero-slider__sync-text { 
  position: absolute; 
  left: 0; 
  width: 100%; 
  text-align: center; 
  top: 50%; 
  height: auto; 
  transform: translateY(-50%); 
  opacity: 0; 
}
.l-hero-slider__bar-left .l-hero-slider__sync-text { 
  padding-right: 20px; 
  animation: slideFromCenterLeft 10s ease-out infinite; 
}
.l-hero-slider__bar-right .l-hero-slider__sync-text { 
  padding-left: 20px; 
  animation: slideFromCenterRight 10s ease-out infinite; 
}
.l-hero-slider__sync-text:nth-child(1) { 
  animation-delay: 0s; 
}
.l-hero-slider__sync-text:nth-child(2) { 
  animation-delay: 5s; 
}
.l-hero-slider__center-mark { 
  position: absolute; 
  left: 50%; 
  transform: translateX(-50%); 
  top: 50%; 
  height: 46px; 
  width: 46px; 
  margin-top: -23px; 
  z-index: 10; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  background-color: #201255; 
  border-radius: 50%; 
  border: 2px solid #ffffff; 
  color: #ffffff; 
  font-size: 0.9rem; 
  font-weight: normal; 
  font-family: 'Roboto', "Helvetica Neue", Arial, sans-serif; 
}
.l-hero-slider__main-title { 
  color: #ffffff; 
  font-weight: bold; 
  font-size: 1.5rem; 
  letter-spacing: 0.3em; 
  text-shadow: 0 2px 4px rgba(0,0,0,0.5); 
  margin-top: 30px; 
  margin-bottom: 0; 
}
.l-hero-slider__sns { 
  display: none !important; 
}

/* スクロールダウンアニメーション（縦線と文字） */
.l-hero-slider__scroll { 
  position: absolute; 
  left: 50%; 
  transform: translateX(-50%); 
  top: 100%; 
  height: 250px; 
  margin-top: -250px; 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  pointer-events: none; 
}
.l-hero-slider__scroll-text { 
  font-family: 'Roboto', "Helvetica Neue", Arial, sans-serif; 
  font-size: 0.9rem; 
  letter-spacing: 0.15em; 
  color: #ffffff; 
  animation: pulseText 2s ease-in-out infinite alternate; 
  margin-top: 0; 
  margin-bottom: 5px; 
}
.l-hero-slider__scroll-line { 
  width: 2px; 
  top: 0; 
  height: 190px; 
  background-color: rgba(255, 255, 255, 0.15); 
  position: relative; 
  overflow: hidden; 
  margin-top: 0; 
}
.l-hero-slider__scroll-line::before { 
  content: ""; 
  position: absolute; 
  left: 0; 
  top: 0; 
  height: 100%; 
  width: 100%; 
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); 
  animation: scrollDown 2s ease-in-out infinite; 
}
.l-hero-slider__scroll::after { 
  content: ""; 
  display: block; 
  width: 14px; 
  height: 14px; 
  border-bottom: 2px solid #ffffff; 
  border-right:  2px solid #ffffff; 
  margin-top: -10px; 
  transform: rotate(45deg); 
}

/* メインビジュアルのアニメーション定義 */
@keyframes slideFade { 
  0%   { opacity: 0; } 
  10%  { opacity: 1; } 
  40%  { opacity: 1; } 
  50%  { opacity: 0; } 
  100% { opacity: 0; } 
}
@keyframes slideFromCenterLeft { 
  0%   { opacity: 0; transform: translate(40px, -50%); } 
  10%  { opacity: 1; transform: translate(0, -50%); } 
  40%  { opacity: 1; transform: translate(0, -50%); } 
  50%  { opacity: 0; transform: translate(-20px, -50%); } 
  100% { opacity: 0; transform: translate(-20px, -50%); } 
}
@keyframes slideFromCenterRight { 
  0%   { opacity: 0; transform: translate(-40px, -50%); } 
  10%  { opacity: 1; transform: translate(0, -50%); } 
  40%  { opacity: 1; transform: translate(0, -50%); } 
  50%  { opacity: 0; transform: translate(20px, -50%); } 
  100% { opacity: 0; transform: translate(20px, -50%); } 
}
@keyframes panDown { 
  0%   { transform: scale(1.05) translateY(-2.5%); } 
  50%  { transform: scale(1.05) translateY(2.5%); } 
  51%  { transform: scale(1.05) translateY(-2.5%); } 
  100% { transform: scale(1.05) translateY(-2.5%); } 
}
@keyframes panUp { 
  0%   { transform: scale(1.05) translateY(2.5%); } 
  50%  { transform: scale(1.05) translateY(-2.5%); } 
  51%  { transform: scale(1.05) translateY(2.5%); } 
  100% { transform: scale(1.05) translateY(2.5%); } 
}
@keyframes pulseText { 
  0%   { opacity: 0.4; } 
  100% { opacity: 1; } 
}
@keyframes scrollDown { 
  0%   { transform: translateY(-100%); } 
  100% { transform: translateY(100%); } 
}

/* 吹き出しのプルプル動くアニメーション */
@keyframes jellyBubble { 
  0%   { transform: scale(1, 1); } 
  3%   { transform: scale(1.05, 0.95); } 
  6%   { transform: scale(0.95, 1.05); } 
  9%   { transform: scale(1.02, 0.98); } 
  12%  { transform: scale(0.99, 1.01); } 
  15%, 100% { transform: scale(1, 1); } 
}

/* スクロールしたらフワッと表示させる機能 */
.js-fade-up { 
  opacity: 0; 
  transform: translateY(30px); 
  transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1); 
}
.js-fade-up.is-visible { 
  opacity: 1; 
  transform: translateY(0); 
}

/* ==========================================================================
   【Informationアコーディオン (スマホ用基本設定)】
   クリックすると詳細が開く、お知らせエリアのデザインです。
   ========================================================================== */
.c-info-accordion { 
  background-color: transparent; 
  padding: 20px 0; 
  text-align: center; 
  /* 【ルール1】上下の位置調整はマイナス＝上、プラス＝下 */
  /* ★調整：ここの数値を小さくすると、Information全体が上に動きます */
  margin-top: 25px; 
}
.c-info-accordion__title { 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  position: relative; 
  z-index: 10; 
  background-color: transparent; 
  padding: 0; 
  font-family: 'Roboto', "Helvetica Neue", Arial, sans-serif; 
  font-size: 1.3rem; 
  font-weight: bold; 
  color: #4a4a55; 
  border-bottom: none; 
  margin-top: 0; 
  margin-bottom: 10px; 
  transform: none; 
}
.c-info-accordion__title::before, 
.c-info-accordion__title::after { 
  content: ""; 
  flex-grow: 1; 
  border-top: 2px solid #f8d63b; 
  border-bottom: 2px solid #333333; 
  height: 7px; 
  margin-top: 0; 
  background: transparent; 
}
.c-info-accordion__title::before { 
  margin-right: 15px; 
}
.c-info-accordion__title::after { 
  margin-left: 15px; 
}
.c-info-accordion__item { 
  border-bottom: none; 
  margin-top: 0; 
}
.c-info-accordion__summary { 
  display: block; 
  position: relative; 
  text-align: left; 
  border-top: 1px dotted #cccccc; 
  border-bottom: 1px dotted #cccccc; 
  padding: 10px 0 8px 0; 
  cursor: pointer; 
  list-style: none; 
}
.c-info-accordion__summary::-webkit-details-marker { 
  display: none; 
}
.c-info-accordion__summary-inner { 
  display: block; 
  padding-right: 0; 
}
.c-info-accordion__date { 
  display: block; 
  font-size: 0.85rem; 
  color: #666666; 
  margin-top: 0; 
}
.c-info-accordion__text { 
  display: block; 
  font-size: 0.9rem; 
  color: #555555; 
  line-height: 1.5; 
  margin-top: 5px; 
}
.c-info-accordion__more { 
  position: absolute; 
  left: 50%; 
  top: 100%; 
  height: 30px; 
  width: 50px; 
  margin-top: -24px; 
  background-color: #ffffff; 
  display: flex; 
  justify-content: center; 
  align-items: flex-start; 
  z-index: 10; 
  transform: translateX(-50%); 
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1); 
}
.c-info-accordion__summary:hover .c-info-accordion__more { 
  transform: translateX(-50%) translateY(4px); 
}
details[open] .c-info-accordion__more { 
  transform: translateX(-50%) rotate(180deg); 
}
details[open] .c-info-accordion__summary:hover .c-info-accordion__more { 
  transform: translateX(-50%) rotate(180deg) translateY(-4px); 
}
.c-info-double-arrow { 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  margin-top: 0px; 
}
.c-info-double-arrow span { 
  display: block; 
  width: 20px; 
  height: 20px; 
  border-bottom: 2px solid; 
  border-right:  2px solid; 
  transform: rotate(45deg); 
  transition: border-color 0.3s ease; 
  margin-top: -12px; 
}
.c-info-double-arrow span:first-child { 
  margin-top: 0; 
  border-color: #f8d63b; 
}
.c-info-double-arrow span:last-child { 
  border-color: #262727; 
}
.c-info-accordion__summary:hover .c-info-double-arrow span:first-child { 
  border-color: #e5c32b; 
}
.c-info-accordion__summary:hover .c-info-double-arrow span:last-child { 
  border-color: #000000; 
}
.c-info-accordion__content { 
  padding: 0; 
  text-align: left; 
  font-size: 0.85rem; 
  color: #666666; 
  line-height: 1.8; 
  margin-top: 15px; 
  margin-bottom: 20px; 
}
.c-info-accordion__text-detail { 
  margin-top: 0; 
  margin-bottom: 0; 
}
.c-info-gallery { 
  display: grid; 
  grid-template-columns: repeat(2, 1fr); 
  gap: 10px; 
  margin-top: 20px; 
}
.c-info-gallery__img { 
  width: 100%; 
  height: auto; 
  object-fit: cover; 
  image-rendering: -webkit-optimize-contrast; 
  image-rendering: crisp-edges; 
  border-radius: 6px; 
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); 
}
.c-info-btn-wrap { 
  display: flex; 
  justify-content: flex-start; 
  margin-top: 20px; 
}
.c-btn-instagram { 
  display: inline-flex; 
  align-items: center; 
  justify-content: center; 
  height: 45px; 
  padding: 0 25px; 
  border-radius: 50px; 
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); 
  color: #ffffff; 
  font-size: 0.9rem; 
  font-weight: bold; 
  text-decoration: none; 
  transition: transform 0.3s ease, box-shadow 0.3s ease; 
  margin-top: 0; 
}
.c-btn-instagram i { 
  margin-right: 8px; 
  font-size: 1.15rem; 
}
.c-btn-instagram:hover { 
  transform: translateY(-3px); 
  box-shadow: 0 5px 15px rgba(220, 39, 67, 0.4); 
}

/* ==========================================================================
   【Information内 オイルメーカー3社ロゴ並び (スマホ用基本設定)】
   お知らせテキストの下に3つのロゴを横一列でバランスよく配置します。
   ========================================================================== */
.c-info-logos {
  display: flex;
  align-items: center; /* 高さの違うロゴ同士を上下中央で揃える */
  justify-content: center; /* 横方向の中央に揃える */
  gap: 12px; /* ★調整：ロゴとロゴの間の「横の隙間」です */
  width: 76%;
  margin-left: auto;
  margin-right: auto;
  
  /* 【ルール1】上下の位置調整はマイナス＝上、プラス＝下 */
  /* ★調整：ここの数値を小さく（マイナス方向に）すると、3つのロゴ全体が上に動き、上の文章との隙間が縮みます */
  margin-top: 8px; 
  
  /* ★調整：下の二重矢印と重ならないための隙間です。数値を小さくすると下の点線と矢印がロゴに近づきます */
  margin-bottom: 12px; 
}

.c-info-logos__img {
  /* 【ルール2】背景などのサイズ指定は「開始位置＋高さ」で行う */
  top: 0;
  height: auto; 
  display: block;
  
  /* 【ルール1】上下の位置調整はマイナス＝上、プラス＝下 */
  margin-top: 0;
}

/* 左：LIQUI MOLY（正方形に近いため横幅比率を抑えて高さを揃える） */
.c-info-logos__img--liquimoly {
  /* ★調整：数値を大きくするとリキモリのロゴが大きくなります */
  width: 22%; 
}

/* 中央：MOTUL（横長のため横幅比率を広めにとる） */
.c-info-logos__img--motul {
  /* ★調整：数値を大きくするとモチュールのロゴが大きくなります */
  width: 40%; 
}

/* 右：WAKO'S（横長のため横幅比率を広めにとる） */
.c-info-logos__img--wakos {
  /* ★調整：数値を大きくするとワコーズのロゴが大きくなります */
  width: 34%; 
}

/* ==========================================================================
   【求人バナーセクション (スマホ用基本設定)】
   Informationの下に表示される横長バナー画像の設定です。
   ========================================================================== */
.c-recruit-banner { 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  width: 100%; 
  /* 【ルール1】上下の位置調整はマイナス＝上、プラス＝下 */
  /* ★調整：ここの数値を小さくすると、バナーが上に動き、上のInformationとの隙間が縮みます */
  margin-top: 10px; 
  /* ★調整：ここの数値を小さく（マイナス方向に）すると、下の要素が上に引っ張られて隙間が縮みます */
  margin-bottom: -20px;
}

.c-recruit-banner__link { 
  display: block; 
  
  /* ★追加：スマホで左右の隙間を狭く（横幅を広く）する調整 */
  /* サイト全体の左右10pxの余白をマイナスで打ち消します。 */
  /* -10pxにすると画面の端ピッタリに広がり、-5pxなら少しだけ隙間が残ります。 */
  margin-left: -5px; 
  margin-right: -5px; 
  
  /* ★追加：上のマイナスにした数値の合計(5px+5px=10px)を足して、画像サイズを合わせます */
  /* もし上を-10pxにした場合は、ここは calc(100% + 20px) にしてください */
  width: calc(100% + 10px); 
  
  max-width: 1000px; 
  transition: transform 0.3s ease, box-shadow 0.3s ease; 
  border-radius: 8px; 
  /* 【ルール1】上下の位置調整はマイナス＝上、プラス＝下 */
  margin-top: 0; 
}

.c-recruit-banner__img { 
  width: 100%; 
  height: auto; 
  display: block; 
  border-radius: 6px; 
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); 
}

.c-recruit-banner__link:hover { 
  transform: translateY(-4px); 
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); 
}

/* ==========================================================================
   【グーネットピット見出し ＆ 整備項目バー (スマホ用基本設定)】
   スマホ表示では、上段に画像、下段に5つのグレーラベルを上下二段で配置します。
   ========================================================================== */
.c-goo-bar {
  display: flex;
  flex-direction: column; /* スマホでは上下二段に並べる設定 */
  width: 100%;
  max-width: 1000px; /* 求人バナーと最大幅を揃える設定 */
  margin-left: auto;
  margin-right: auto;
  gap: 10px; /* ★調整：上段の画像と、下段のグレー項目との間の隙間です */
  
  /* 【ルール1】上下の位置調整はマイナス＝上、プラス＝下 */
  /* ★調整：ここの数値を小さくするとバー全体が上に動き、上の求人バナーとの隙間が縮みます */
  /* （※求人バナー側の -20px を打ち消すため、35px前後からスタートしています） */
  margin-top: 16%; 
  
  /* ★調整：ここの数値を小さく（マイナス方向に）すると、下の「MINI/BMWの修理事例」が上に引っ張られて隙間が縮みます */
  margin-bottom: -40px; 
}

/* 上段（PCでは左側）：グーネットピット画像枠 */
.c-goo-bar__title {
  width: 100%;
  /* 【ルール1】上下の位置調整はマイナス＝上、プラス＝下 */
  margin-top: 0;
}

.c-goo-bar__img {
  width: 100%;
  /* 【ルール2】背景などのサイズ指定は「開始位置＋高さ」で行う */
  height: auto; 
  display: block;
}

/* 下段（PCでは右側）：5つのグレー項目を並べるリスト枠 */
.c-goo-bar__list {
  display: flex;
  flex-wrap: nowrap; /* 5つの項目を折り返さずに1列に並べる設定 */
  width: 100%;
  padding: 0;
  margin-left: 0;
  margin-right: 0;
  list-style: none;
  gap: 4px; /* ★調整：グレーの四角同士の「横の隙間」です */
  
  /* 【ルール1】上下の位置調整はマイナス＝上、プラス＝下 */
  margin-top: 0;
  margin-bottom: 0;
}

/* グレーの四角（各ラベル）のデザイン */
.c-goo-bar__item {
  flex-grow: 1; /* 文字数に合わせて横幅を自動で均等に広げる設定 */
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #9fa5a6; /* 画像と同じグレーの背景色 */
  color: #ffffff; /* 文字色（白） */
  font-size: clamp(0.6rem, 2.7vw, 0.8rem); /* スマホの画面幅に合わせて文字サイズを自動調整 */
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap; /* 文字が途中で改行されるのを防ぐ */
  padding: 0 4px; 
  
  /* 【ルール2】背景などのサイズ指定は「開始位置＋高さ」で行う */
  /* ★調整：ここの数値を大きくすると、グレーの四角が縦に太く（高く）なります */
  top: 0;
  height: 28px; 
  
  /* 【ルール1】上下の位置調整はマイナス＝上、プラス＝下 */
  margin-top: 0;
}


/* ==========================================================================
   【各ブランド一覧・タイプ別事例グリッド (スマホ用基本設定)】
   メーカーのロゴ画像や、修理事例のテキストリンクを並べる設定です。
   ========================================================================== */
.c-brand-grid { 
  display: grid; 
  grid-template-columns: repeat(4, 1fr); 
  gap: 10px; 
  justify-content: start; 
  margin-top: 20px; 
}
.c-brand-card { 
  display: block; 
  text-decoration: none; 
  transition: transform 0.3s ease, opacity 0.3s ease; 
}
.c-brand-card:hover { 
  opacity: 0.7; 
  transform: translateY(-3px); 
}
.c-brand-card__img { 
  width: 100%; 
  height: auto; 
  display: block; 
}

.c-type-grid { 
  display: grid; 
  grid-template-columns: repeat(2, 1fr); 
  gap: 10px; 
  justify-content: start; 
  margin-top: 20px; 
}
.c-type-card { 
  position: relative; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  background-color: #1b365d; 
  color: #ffffff; 
  text-decoration: none; 
  border-radius: 4px; 
  padding: 15px 25px 15px 10px; 
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease; 
}
.c-type-card__text { 
  font-family: 'Roboto', "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; 
  font-size: 0.8rem; 
  font-weight: 350; 
  text-align: center; 
  line-height: 1.3; 
}
.c-type-card::after { 
  content: ""; 
  position: absolute; 
  right: 15px; 
  top: 50%; 
  height: 6px; 
  width: 6px; 
  border-top: 2px solid #ffffff; 
  border-right: 2px solid #ffffff; 
  transform: rotate(45deg); 
  margin-top: -4px; 
  transition: right 0.3s ease; 
}
.c-type-card:hover { 
  background-color: #23487d; 
  box-shadow: 0 4px 10px rgba(27, 54, 93, 0.3); 
  transform: translateY(-3px); 
}
.c-type-card:hover::after { 
  right: 10px; 
}

/* ==========================================================================
   【修理事例の横スクロールスライダー (スマホ用基本設定)】
   画像を横にスワイプ（スクロール）できる機能の枠組みです。
   ========================================================================== */
.c-swipe-slider { 
  position: relative; 
  overflow-x: auto; 
  margin-left: -20px; 
  margin-right: -20px; 
  padding-left: 25px; 
  padding-right: 25px; 
  user-select: none; 
  cursor: grab; 
  margin-top: 10px; 
  -ms-overflow-style: none; 
  scrollbar-width: none; 
}
.c-swipe-slider::-webkit-scrollbar { 
  display: none; 
}
.c-swipe-slider__track { 
  display: flex; 
  flex-wrap: nowrap; 
  width: max-content; 
}
.c-swipe-slider__card { 
  display: block; 
  width: 85vw; 
  max-width: 340px; 
  flex-shrink: 0; 
  padding: 0 5px; 
  text-decoration: none; 
  transition: transform 0.3s ease; 
}
.c-swipe-slider__card:hover { 
  transform: translateY(-5px); 
}
.c-swipe-slider__img { 
  width: 100%; 
  height: auto; 
  display: block; 
  border-radius: 4px; 
}

/* ==========================================================================
   【スライダーの左右クリック矢印 (スマホ用：サークル無し・アイコン特化)】
   スライダーをボタンで動かす機能のデザインです。
   スマホでは背景を透明にし、アイコンを大きくして画像の上に乗せます。
   ========================================================================== */
.c-repair-cases { 
  position: relative; /* 矢印ボタンをこの枠を基準にして配置します */ 
}
.c-swipe-btn {
  position: absolute; 
  z-index: 100; 
  display: flex; 
  justify-content: center; 
  align-items: center;
  background-color: transparent; 
  border: none; 
  box-shadow: none; 
  color: #868484; 
  cursor: pointer;
  transition: transform 0.3s ease, color 0.3s ease; 
  top: 40%; 
  height: 45px; 
  width: 45px; 
  margin-top: -22.5px; 
}
.c-swipe-btn i { 
  font-size: 2.2rem; 
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.9)) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.3)); 
  margin-top: 0; 
}
.c-swipe-btn:hover { 
  background-color: transparent; 
  color: #f8d63b; 
  transform: translateY(-2px); 
}
.c-swipe-btn--prev { 
  left: -5px; /* ★調整：スマホでの左ボタンの位置。マイナスにすると左（外）へ動きます */ 
}
.c-swipe-btn--next { 
  right: -5px; /* ★調整：スマホでの右ボタンの位置。マイナスにすると右（外）へ動きます */ 
}

/* ==========================================================================
   【中古車販売セクション (スマホ用基本設定)】
   ========================================================================== */
.c-usedcar-title { 
  text-align: center; 
  
  /* 【ルール1】上下の位置調整はマイナス＝上、プラス＝下 */
  /* ★調整（上の隙間）：ここの数値を小さく（マイナス方向に）すると、USED CAR SALESの見出し画像が上に動き、上のセクションとの隙間が縮みます */
  /* ※親枠(.l-section)に60pxの余白があるため、隙間を狭くしたい場合は「-15px」や「-30px」のようにマイナス値で調整してください */
  margin-top: -15px; 
}

.c-usedcar-title__img { 
  width: 90%; 
  max-width: 550px; 
  /* 【ルール2】背景などのサイズ指定は「開始位置＋高さ」で行う */
  top: 0;
  height: auto; 
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* 中古車カードの一覧グリッド */
.c-usedcar-list { 
  display: grid; 
  grid-template-columns: repeat(2, 1fr); 
  gap: 15px 10px; 
  
  /* 【ルール1】上下の位置調整はマイナス＝上、プラス＝下 */
  /* ★調整（下の隙間）：ここの数値を小さく（マイナス方向に）すると、下の車カード一覧が上に動き、USED CAR SALESの見出し画像との隙間が縮みます */
  /* （元の30pxから10pxに狭めています。さらに詰めたい場合は 0px や -10px にしてください） */
  margin-top: 10px; 
}

.c-usedcar-card { 
  background-color: #ffffff; 
  border-radius: 4px; 
  overflow: hidden; 
  transition: transform 0.3s ease, box-shadow 0.3s ease; 
  /* 【ルール1】上下の位置調整はマイナス＝上、プラス＝下 */
  margin-top: 0; 
}

.c-usedcar-card:hover { 
  /* 【ルール1】上下の位置調整はマイナス＝上、プラス＝下 */
  transform: translateY(-5px); 
  box-shadow: 0 5px 15px rgba(0,0,0,0.1); 
}

.c-usedcar-card__link { 
  display: flex; 
  flex-direction: column; 
  height: 100%; 
  text-decoration: none; 
  color: inherit; 
}

.c-usedcar-card__thumb { 
  position: relative; 
  width: 100%; 
  /* 【ルール2】背景などのサイズ指定は「開始位置＋高さ」で行う */
  height: auto; 
  aspect-ratio: 4 / 3; 
  overflow: hidden; 
  background-color: #f5f5f5; 
  /* 【ルール1】上下の位置調整はマイナス＝上、プラス＝下 */
  margin-top: 0; 
}

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

/* カード下部のテキスト＆アイコン領域 */
.c-usedcar-card__body { 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  /* ★修正：上の余白(padding-top)を0にし、車の写真とグーネット画像の隙間を狭めました */
  padding: 0 5px 10px 5px; 
  flex-grow: 1; 
}

/* ★修正：カード内の「グーネット中古車＆LINE」画像を車の写真と同じ横幅100%に拡大 */
.c-usedcar-card__badge { 
  /* 親枠(.c-usedcar-card__body)の左右5pxの余白を打ち消して、車の写真と完全に同じ幅にします */
  margin-left: -5px;
  margin-right: -5px;
  width: calc(100% + 10px); 
  max-width: none; /* 150pxの制限を解除 */
  /* 【ルール2】背景などのサイズ指定は「開始位置＋高さ」で行う */
  height: auto; 
  display: block;
  
  /* 【ルール1】上下の位置調整はマイナス＝上、プラス＝下 */
  /* ★調整：ここの数値を小さく（マイナスに）すると、グーネット画像が上に動き、車の写真との隙間がさらに狭まります */
  margin-top: 2px; 
}

/* ★修正：車種タイトル（グーネット画像のすぐ下に配置＆隙間を狭める） */
.c-usedcar-card__title { 
  color: #333333; 
  font-size: 0.85rem; 
  text-align: center; 
  line-height: 1.4; 
  
  /* 【ルール1】上下の位置調整はマイナス＝上、プラス＝下 */
  /* ★調整：ここの数値を小さく（マイナスに）すると、タイトルが上に動き、グーネット画像との隙間が狭まります */
  margin-top: 4px; 
  margin-bottom: 0; 
}

/* 価格（タイトルの下に配置） */
.c-usedcar-card__price { 
  color: #a11919; 
  font-family: 'Roboto', sans-serif; 
  font-size: 1.1rem; 
  font-weight: bold; 
  
  /* 【ルール1】上下の位置調整はマイナス＝上、プラス＝下 */
  /* ★調整：ここの数値を小さくすると、価格が上に動き、タイトルとの隙間が狭まります */
  margin-top: 2px; 
  margin-bottom: 0; 
}

/* 諸経費込テキスト（一番下に配置） */
.c-usedcar-card__tax { 
  color: #696969; 
  font-size: 0.7rem; 
  
  /* 【ルール1】上下の位置調整はマイナス＝上、プラス＝下 */
  /* ★調整：ここの数値を小さくすると、諸経費テキストが上に動きます */
  margin-top: 2px; 
  margin-bottom: 0; 
}

.c-usedcar-btn-wrap { 
  text-align: center; 
  /* 【ルール1】上下の位置調整はマイナス＝上、プラス＝下 */
  margin-top: 40px; 
}

.c-btn-outline { 
  display: inline-flex; 
  align-items: center; 
  justify-content: center; 
  background-color: transparent; 
  color: #333; 
  border: 1px solid #ccc; 
  padding: 12px 30px; 
  font-size: 0.9rem; 
  font-weight: bold; 
  text-decoration: none; 
  transition: all 0.3s ease; 
  /* 【ルール2】背景などのサイズ指定は「開始位置＋高さ」で行う */
  height: 50px; 
}

.c-btn-outline:hover { 
  background-color: #333; 
  color: #fff; 
}

.c-btn-outline i { 
  margin-left: 10px; 
}

/* ==========================================================================
   【タイヤ交換 / トラブル解決 / ご利用ステップ (スマホ用基本設定)】
   ========================================================================== */
.c-tire-flow { 
  display: flex; 
  flex-direction: column; 
  margin-top: 30px; 
}
.c-tire-image { 
  width: 100%; 
  text-align: center; 
  margin-top: 0; 
}
.c-tire-image__img { 
  width: 98vw; 
  max-width: 98vw; 
  margin-left: calc(50% - 49vw); 
  margin-right: calc(50% - 49vw); 
  display: block; 
  height: auto; 
}
.c-tire-image--spaced { 
  margin-top: 40px; 
}

/* 青い吹き出しの住所テーブル部分 */
.c-tire-address, 
.c-delivery-address { 
  width: 100%; 
  max-width: 820px; 
  margin-left: auto; 
  margin-right: auto; 
  margin-top: 25px; 
}
.c-delivery-address { 
  margin-top: 10px; 
}
.c-tire-address__title { 
  text-align: center; 
  font-family: 'Roboto', "Helvetica Neue", Arial, sans-serif; 
  font-size: 0.95rem; 
  font-weight: normal; 
  color: #333333; 
  margin-top: 0; 
  margin-bottom: 0; 
}
.c-tire-address__title span { 
  display: inline-block; 
  padding-bottom: 4px; 
  border-bottom: 3px solid #f3c200; 
}
.c-tire-address__bubble-title, 
.c-delivery-address__bubble { 
  position: relative; 
  background: linear-gradient(to bottom, #2a5591 0%, #0e2342 100%); 
  color: #ffffff; 
  text-align: center; 
  font-family: 'Roboto', "Helvetica Neue", Arial, sans-serif; 
  font-size: 1.1rem; 
  font-weight: 450; 
  border-radius: 4px; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  box-shadow: 0 4px 10px rgba(14, 35, 66, 0.3), inset 0 -2px 0 rgba(0, 0, 0, 0.15); 
  height: 55px; 
  margin-top: 0; 
  margin-bottom: 0; 
}
.c-tire-address__bubble-title::after, 
.c-delivery-address__bubble::after { 
  content: ""; 
  position: absolute; 
  left: 50%; 
  background: linear-gradient(135deg, #0c1e38 0%, #0e2342 100%); 
  transform: translateX(-50%) rotate(45deg); 
  border-radius: 2px; 
  box-shadow: 3px 3px 5px rgba(14, 35, 66, 0.2); 
  top: 100%; 
  height: 16px; 
  width: 16px; 
  margin-top: -8px; 
  z-index: -1; 
}
.c-tire-address__bubble-title::after, 
.c-delivery-address__bubble::after { 
  content: ""; 
  position: absolute; 
  left: 50%; 
  background-color: #0e2342; 
  transform: translateX(-50%) rotate(45deg); 
  top: 100%; 
  height: 16px; 
  width: 16px; 
  margin-top: -8px; 
}

.c-tire-address__sub-title, 
.c-delivery-address__subtext { 
  text-align: center; 
  font-family: 'Roboto', "Helvetica Neue", Arial, sans-serif; 
  font-size: 0.95rem; 
  color: #333333; 
  margin-top: 30px; 
}
.c-tire-address__sub-title span, 
.c-delivery-address__subtext span { 
  display: inline-block; 
  padding-bottom: 4px; 
  border-bottom: 3px solid #f3c200; 
}
.c-tire-table, 
.c-delivery-table { 
  width: 100%; 
  border-collapse: collapse; 
  border-top: 1px solid #e0e4e8; 
  margin-top: 25px; 
}
.c-delivery-table { 
  margin-top: 30px; 
}
.c-tire-table th, 
.c-tire-table td, 
.c-delivery-table th, 
.c-delivery-table td { 
  border-bottom: 1px solid #e0e4e8; 
  padding: 15px 4px; 
  font-size: 0.95rem; 
  line-height: 1.6; 
  text-align: left; 
  background-color: transparent; 
}
.c-tire-table th, 
.c-delivery-table th { 
  width: 15%; 
  text-align: center; 
  white-space: nowrap; 
  font-weight: normal; 
  color: #333333; 
  background-color: #f7f9fa; 
  font-size: 0.7rem; 
}
.c-tire-table td, 
.c-delivery-table td { 
  width: 85%; 
  color: #333333; 
  padding-left: 20px; 
}
.c-tire-table td a, 
.c-delivery-table td a { 
  pointer-events: none; 
  color: inherit; 
  text-decoration: none; 
  margin-top: 0; 
}
.c-tire-address__note, 
.c-delivery-address__note { 
  text-align: center; 
  color: #cc0000; 
  font-size: 0.8rem; 
  font-weight: normal; 
  margin-top: 15px; 
  margin-bottom: 0; 
}

/* 注意事項アコーディオン */
.c-tire-accordion { 
  width: 100%; 
  max-width: 800px; 
  margin-left: auto; 
  margin-right: auto; 
  margin-top: 10px; 
}
.c-accordion__summary { 
  display: block; 
  cursor: pointer; 
  list-style: none; 
}
.c-accordion__summary::-webkit-details-marker { 
  display: none; 
}
.c-accordion__btn { 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  width: 78%; 
  max-width: 200px; 
  margin-left: auto; 
  margin-right: auto; 
  background-color: #a31a1a; 
  color: #ffffff; 
  font-family: 'Roboto', "Helvetica Neue", Arial, sans-serif; 
  font-size: 0.9rem; 
  font-weight: bold; 
  border-radius: 8px; 
  height: 45px; 
  transition: opacity 0.3s ease, background-color 0.3s ease; 
  margin-top: 0; 
  animation: pulseButton 2s infinite; 
}
.c-accordion__btn:hover { 
  opacity: 1; 
  background-color: #c92222; 
  transform: translateY(-3px) scale(1.02); 
  box-shadow: 0 8px 20px rgba(163, 26, 26, 0.5); 
  animation: none; 
}
.c-accordion__btn:active { 
  transform: translateY(2px); 
  box-shadow: 0 2px 5px rgba(163, 26, 26, 0.3); 
}
.c-accordion__btn i { 
  margin-right: 10px; 
  font-size: 0.9rem; 
  transition: transform 0.3s ease; 
  margin-top: 0; 
  animation: pointRight 1.5s infinite; 
}
details[open] .c-accordion__btn { 
  background-color: #7a1414; 
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); 
  animation: none; 
}
details[open] .c-accordion__btn i { 
  transform: rotate(90deg); 
  animation: none; 
}
.c-accordion__content { 
  width: 100%; 
  animation: fadeDown 0.4s ease-out forwards; 
  margin-top: 20px; 
}
.c-accordion__img { 
  width: 100%; 
  display: block; 
  height: auto; 
}

/* お悩み解決セクション */
.c-trouble-header { 
  text-align: center; 
  position: relative; 
  z-index: 2; 
  margin-top: 10px; 
}
.c-trouble-header__img { 
  width: 95%; 
  margin-left: auto; 
  margin-right: auto; 
  display: block; 
  margin-top: 0px; 
  height: auto; 
}
.c-trouble-grid { 
  display: grid; 
  grid-template-columns: 1fr; 
  gap: 0; 
  width: 98vw; 
  max-width: 98vw; 
  margin-left: calc(50% - 49vw); 
  margin-right: calc(50% - 49vw); 
  margin-top: 8px; 
}
.c-trouble-image__img { 
  width: 100%; 
  display: block; 
  height: auto; 
}
.c-trouble-solution { 
  width: 95%; 
  max-width: 820px; 
  margin-left: auto; 
  margin-right: auto; 
  margin-top: 10px; 
}
.c-trouble-solution__bubble { 
  position: relative; 
  background: linear-gradient(to bottom, #2a5591 0%, #0e2342 100%); 
  color: #ffffff; 
  text-align: center; 
  font-family: 'Roboto', "Helvetica Neue", Arial, sans-serif; 
  font-size: 1.15rem; 
  font-weight: bold; 
  border-radius: 50px; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  box-shadow: 0 6px 15px rgba(14, 35, 66, 0.4), inset 0 -3px 0 rgba(0, 0, 0, 0.15); 
  height: 60px; 
  margin-top: 0; 
  margin-bottom: 0; 
  animation: jellyBubble 3s ease-in-out infinite; 
}
.c-trouble-solution__bubble::after { 
  content: ""; 
  position: absolute; 
  left: 50%; 
  background: linear-gradient(135deg, #0c1e38 0%, #0e2342 100%); 
  transform: translateX(-50%) rotate(45deg); 
  border-radius: 3px; 
  box-shadow: 3px 3px 5px rgba(14, 35, 66, 0.3); 
  top: 100%; 
  height: 16px; 
  width: 16px; 
  margin-top: -8px; 
  z-index: -1; 
}
.c-trouble-solution__image { 
  text-align: center; 
  margin-top: 20px; 
}
.c-trouble-solution__img { 
  width: 98vw; 
  max-width: 98vw; 
  margin-left: calc(50% - 49vw); 
  margin-right: calc(50% - 49vw); 
  display: block; 
  height: auto; 
}
.c-trouble-solution__img--bring { 
  position: relative; 
  z-index: 3; 
  margin-top: 0px; 
}
.c-trouble-solution__img--01 { 
  width: 50%; 
  margin-left: auto; 
  margin-right: auto; 
  margin-top: 410px; 
  height: auto; 
}
.c-trouble-solution__img--02 { 
  margin-top: 10px; 
}
.c-trouble-solution__img--03 { 
  position: relative; 
  z-index: 2; 
  margin-top: -25px; 
}

/* ご利用ステップ */
.c-step-flow { 
  width: 95%; 
  max-width: 1000px; 
  margin-left: auto; 
  margin-right: auto; 
  margin-top: 60px; 
}
.c-step-title { 
  text-align: center; 
  margin-top: 0; 
}
.c-step-title__img { 
  width: 90%; 
  max-width: 400px; 
  height: auto; 
  display: block; 
  margin-left: auto; 
  margin-right: auto; 
}
.c-step-grid { 
  display: grid; 
  grid-template-columns: 1fr; 
  gap: -10px; 
  margin-top: 60px; 
}
.c-step-item { 
  width: 100%; 
}
.c-step-img { 
  width: 100%; 
  height: auto; 
  display: block; 
}

/* ==========================================================================
   【リッチフッター (スマホ用基本設定)】
   店舗情報とコピーライトを表示するエリアです。
   ========================================================================== */
.l-footer {
  background-color: transparent; 
  color: #333333; 
  
  /* 下側の余白（padding-bottom）を大きく取り、追従ボタンに隠れないようにしています */
  padding: 60px 0 85px 0; 
  
  /* 【ルール1】上下の位置調整はマイナス＝上、プラス＝下 */
  /* ★調整：ここの数値を小さく（マイナス方向に）すると、上のセクションとの隙間が縮みます */
  margin-top: -50px; 
}

/* 店舗情報を囲む白いカード */
.c-footer-info {
  background-color: #ffffff;
  border-radius: 12px;
  padding: 20px 20px 30px 20px; 
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08); 
  border: 1px solid #eeeeee; 
  color: #333333;
  margin-top: 0;
}

.c-footer-info__title { 
  text-align: center; 
  font-size: 1.4rem; 
  color: #1b365d; 
  font-family: 'Roboto', "Helvetica Neue", Arial, sans-serif; 
  border-bottom: 2px solid #eeeeee; 
  padding-bottom: 15px; 
  margin-top: 0; 
  margin-bottom: 20px; 
}
.c-footer-table { 
  width: 100%; 
  border-collapse: collapse; 
}
.c-footer-table th, 
.c-footer-table td { 
  padding: 15px 5px; 
  border-bottom: 1px dashed #dddddd; 
  font-size: 0.9rem; 
  line-height: 1.6; 
  text-align: left; 
}
.c-footer-table tr:last-child th, 
.c-footer-table tr:last-child td { 
  border-bottom: none; 
}
.c-footer-table th { 
  width: 35%; 
  color: #555555; 
  font-weight: bold; 
  vertical-align: top; 
}
.c-footer-table th i { 
  color: #e05561; 
  width: 20px; 
  text-align: center; 
  margin-right: 5px; 
}
.c-footer-table td { 
  width: 65%; 
}
.u-text-small { 
  font-size: 0.75rem; 
  font-weight: normal; 
  color: #888888; 
}
.c-footer-tel { 
  color: #e05561; 
  font-size: 1.3rem; 
  font-family: 'Roboto', sans-serif; 
  font-weight: bold; 
}
.c-footer-link { 
  color: #1a73e8; 
  text-decoration: underline; 
  word-break: break-all; 
}
.c-footer-link i { 
  font-size: 0.8rem; 
  margin-right: 3px; 
}
.c-footer-sns { 
  display: flex; 
  flex-wrap: wrap; 
  gap: 10px; 
  align-items: center; 
}
.c-footer-sns img { 
  display: block; 
  width: 35px; 
  height: 35px; 
  border-radius: 6px; 
  transition: transform 0.3s ease; 
}
.c-footer-sns a:hover img { 
  transform: translateY(-3px); 
}
/* ==========================================================================
   【決済ロゴ画像の分割と配置 (スマホ用基本設定)】
   スマホ表示では2枚の画像を縦に並べ、枠からはみ出さないように調整します。
   ========================================================================== */
.c-footer-pay {
  display: flex;
  flex-direction: column; /* 縦に並べる設定 */
  gap: 8px; /* 上下の画像と画像の間の隙間 */
  
  /* 【ルール1】上下の位置調整はマイナス＝上、プラス＝下 */
  /* ★調整：ここの数値を大きく（プラスに）すると、画像全体が下に動きます */
  margin-top: 5px; 
}

/* 決済画像本体（重複と構文エラーを解消しました） */
.c-footer-pay__img {
  width: 100%; /* 親の枠（テーブルの右側）に合わせて自動縮小させ、はみ出しを防ぐ */
  /* ★調整：スマホでの決済ロゴ画像の大きさをここで制御します */
  max-width: 240px; 
  /* 【ルール2】背景などのサイズ指定は「開始位置＋高さ」で行う */
  top: 0;
  height: auto; 
  display: block; 
  /* 【ルール1】上下の位置調整はマイナス＝上、プラス＝下 */
  margin-top: 0;
}

/* ==========================================================================
   【SEO対策用 店舗紹介・キーワードテキストエリア (スマホ用基本設定)】
   デザインの邪魔をせず、検索エンジンに重要キーワードを認識させるテキスト枠です。
   ========================================================================== */
.c-seo-text-box {
  width: 100%;
  background-color: #f9f9fa; /* 主張しすぎないごく薄いグレー背景 */
  border: 1px solid #eeeeee;
  border-radius: 8px;
  padding: 15px;
  
  /* 【ルール1】上下の位置調整はマイナス＝上、プラス＝下 */
  /* ★調整：ここの数値を小さく（マイナス方向に）すると、テキスト枠全体が上に動き、上の店舗情報カードとの隙間が縮みます */
  margin-top: 20px; 
  
  /* 【ルール2】背景などのサイズ指定は「開始位置＋高さ」で行う */
  top: 0;
  height: auto; 
}
/* ▼ 追加：SEOテキストエリア内のロゴ枠 ▼ */
.c-seo-text-box__logo {
  text-align: center;
  
  /* 【ルール1】上下の位置調整はマイナス＝上、プラス＝下 */
  /* ★調整：ここの数値を小さく（マイナスに）すると、ロゴが上に動きます */
  margin-top: 0;
  
  /* ★調整：ロゴと下の見出しテキストとの隙間です */
  margin-bottom: 15px;
}

/* ▼ 追加：SEOテキストエリア内のロゴ画像本体 ▼ */
.c-seo-text-box__img {
  width: 100%;
  
  /* ★調整：スマホでのロゴの最大幅です。大きくしたい場合は数値を上げてください */
  max-width: 90px; 
  
  /* 【ルール2】背景などのサイズ指定は「開始位置＋高さ」で行う */
  top: 0;
  height: auto;
  display: inline-block;
}

.c-seo-text-box__title {
  font-size: 0.85rem;
  font-weight: bold;
  color: #4a4a55;
  line-height: 1.5;
  
  /* 【ルール1】上下の位置調整はマイナス＝上、プラス＝下 */
  /* ★調整：ここの数値を小さくすると、見出しが上に動きます */
  margin-top: 0;
  margin-bottom: 8px;
}

.c-seo-text-box__desc {
  font-size: 0.75rem; /* デザインを邪魔しない控えめな文字サイズ */
  color: #666666;
  line-height: 1.7;
  text-align: left;
  
  /* 【ルール1】上下の位置調整はマイナス＝上、プラス＝下 */
  margin-top: 0;
  margin-bottom: 0;
}

.c-seo-text-box__desc strong {
  font-weight: bold;
  color: #555555;
}

/* コピーライト部分（一番下） */
.l-footer__bottom { 
  /* 【ルール1】上下の位置調整はマイナス＝上、プラス＝下 */
  /* ★調整：ここの数値を小さくすると、コピーライトが上に動き、上のSEOテキスト枠との隙間が縮みます */
  margin-top: 20px; 
}
.l-footer__copy { 
  text-align: center; 
  color: #888888; 
  /* 【ルール1】上下の位置調整はマイナス＝上、プラス＝下 */
  margin-top: 0; 
}

/* ==========================================================================
   【モーダルウィンドウ (スマホ用基本設定)】
   クーポンやLINEのボタンを押した時に画面全体に被さって出てくる画面です。
   ========================================================================== */
.c-modal-overlay { 
  position: fixed; 
  left: 0; 
  width: 100%; 
  top: 0; 
  height: 100vh; 
  background-color: rgba(0, 0, 0, 0.7); 
  z-index: 100000; 
  opacity: 0; 
  visibility: hidden; 
  transition: opacity 0.3s ease, visibility 0.3s ease; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
}
.c-modal-overlay.is-active { 
  opacity: 1; 
  visibility: visible; 
}
.c-modal-content { 
  position: relative; 
  background-color: #ffffff; 
  width: 90%; 
  max-width: 500px; 
  max-height: 85vh; 
  border-radius: 8px; 
  overflow-y: auto; 
  padding: 40px 20px 30px 20px; 
  transform: translateY(20px); 
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1); 
}
.c-modal-overlay.is-active .c-modal-content { 
  transform: translateY(0); 
}
.c-modal-close-top { 
  position: absolute; 
  right: 15px; 
  top: 15px; 
  height: 30px; 
  width: 30px; 
  background-color: transparent; 
  border: none; 
  font-size: 1.8rem; 
  color: #666; 
  cursor: pointer; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  margin-top: 0; 
}
.c-modal-inner { 
  text-align: center; 
}
.c-modal-img { 
  width: 100%; 
  height: auto; 
  display: block; 
  margin-top: 0; 
  margin-bottom: 25px; 
}
.c-modal-action-btn { 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  width: 100%; 
  max-width: 320px; 
  margin-left: auto; 
  margin-right: auto; 
  border-radius: 50px; 
  color: #ffffff; 
  font-size: 1.1rem; 
  font-weight: bold; 
  text-decoration: none; 
  height: 60px; 
  margin-top: 0px; 
  margin-bottom: 30px; 
  transition: opacity 0.3s ease, transform 0.3s ease; 
}
.c-modal-action-btn:hover { 
  opacity: 0.8; 
  transform: translateY(-3px); 
}
.c-modal-action-btn--line { 
  background-color: #06c755; 
}

/* TELモーダルの設定 */
.c-modal-tel-header { 
  background-color: #f5f5f5; 
  border-radius: 30px; 
  padding: 10px 20px; 
  display: inline-block; 
  color: #333; 
  font-weight: bold; 
  font-size: 1.05rem; 
  margin-top: 0; 
  margin-bottom: 20px; 
}
.c-modal-tel-catch { 
  font-size: 0.95rem; 
  color: #666; 
  margin-top: 0; 
  margin-bottom: 10px; 
}
.c-modal-tel-number { 
  color: #eb6877; 
  font-size: 2rem; 
  font-weight: bold; 
  font-family: 'Roboto', sans-serif; 
  margin-top: 0; 
  margin-bottom: 30px; 
}
.c-modal-table { 
  width: 100%; 
  border-collapse: collapse; 
  border: 1px solid #eeeeee; 
  border-radius: 6px; 
  overflow: hidden; 
  text-align: left; 
  margin-top: 0; 
  margin-bottom: 30px; 
}
.c-modal-table th, 
.c-modal-table td { 
  padding: 15px 15px; 
  border-bottom: 1px solid #eeeeee; 
  font-size: 0.9rem; 
  line-height: 1.6; 
}
.c-modal-table th { 
  width: 30%; 
  background-color: #fafafa; 
  color: #666; 
  font-weight: normal; 
  border-right: 1px solid #eeeeee; 
}
.c-modal-table td { 
  width: 70%; 
  color: #333; 
}
.c-modal-close-bottom { 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  width: 180px; 
  margin-left: auto; 
  margin-right: auto; 
  background-color: #ffffff; 
  color: #333; 
  border: 1px solid #333; 
  border-radius: 30px; 
  font-size: 1rem; 
  font-weight: bold; 
  cursor: pointer; 
  height: 45px; 
  margin-top: 10px; 
  margin-bottom: 20px; 
  transition: background-color 0.3s, color 0.3s; 
}
.c-modal-close-bottom:hover { 
  background-color: #333; 
  color: #ffffff; 
}

/* クーポン詳細の装飾 */
.c-modal-desc { 
  text-align: left; 
  font-size: 0.95rem; 
  line-height: 1.6; 
  color: #333; 
  margin-top: 15px; 
  margin-bottom: 0; 
}
.c-modal-desc p { 
  margin-top: 15px; 
  margin-bottom: 0; 
}
.c-modal-highlight { 
  text-align: left; 
  max-width: 540px; 
  margin-left: auto; 
  margin-right: auto; 
  margin-top: 25px; 
  margin-bottom: 25px; 
}
.c-modal-highlight strong { 
  color: #cc0000; 
  font-size: 1.1em; 
}
.c-modal-note { 
  color: #cc0000; 
  font-weight: bold; 
  font-size: 0.9rem; 
}
.c-modal-note-box { 
  background-color: #fff5f5; 
  border: 1px solid #ffcccc; 
  border-radius: 6px; 
  padding: 15px; 
  text-align: center; 
  margin-top: 25px; 
  margin-bottom: 10px; 
}
.c-modal-note-box__lead { 
  color: #cc0000; 
  font-size: 1rem; 
  font-weight: bold; 
  line-height: 1.5; 
  margin-top: 0; 
  margin-bottom: 8px; 
}
.c-modal-note-box__sub { 
  color: #cc0000; 
  font-size: 0.85rem; 
  font-weight: bold; 
  line-height: 1.4; 
  margin-top: 0; 
  margin-bottom: 0; 
}
.c-modal-divider { 
  border: none; 
  border-top: 2px dashed #eeeeee; 
  margin-top: 35px; 
  margin-bottom: 35px; 
}
.c-modal-list { 
  text-align: left; 
  font-size: 0.95rem; 
  color: #333; 
  font-weight: bold; 
  list-style-type: none; 
  padding-left: 0; 
  margin-top: 15px; 
  margin-bottom: 25px; 
}
.c-modal-list li { 
  position: relative; 
  padding-left: 1.8em; 
  line-height: 1.5; 
  margin-top: 12px; 
}
.c-modal-list li::before { 
  content: "\f00c"; 
  font-family: "Font Awesome 5 Free"; 
  font-weight: 900; 
  color: #06c755; 
  position: absolute; 
  left: 0; 
  top: 0; 
  height: auto; 
  margin-top: 0; 
}
.c-modal-trouble-list { 
  background-color: transparent; 
  border: none; 
  padding: 0; 
  list-style-type: none; 
  text-align: left; 
  margin-top: 15px; 
  margin-bottom: 25px; 
}
.c-modal-trouble-list li { 
  position: relative; 
  padding-left: 2em; 
  font-size: 0.95rem; 
  color: #333333; 
  line-height: 1.6; 
  font-weight: bold; 
  margin-top: 12px; 
}
.c-modal-trouble-list li:first-child { 
  margin-top: 0; 
}
.c-modal-trouble-list li::before { 
  content: "\f00c"; 
  font-family: "Font Awesome 5 Free"; 
  font-weight: 900; 
  color: #cc0000; 
  position: absolute; 
  left: 5px; 
  top: 0; 
  height: auto; 
  margin-top: 0; 
}
.c-modal-trouble-bubble { 
  position: relative; 
  background: linear-gradient(to bottom, #2a5591 0%, #0e2342 100%); 
  color: #ffffff; 
  text-align: center; 
  font-weight: bold; 
  border-radius: 50px; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  box-shadow: 0 6px 15px rgba(14, 35, 66, 0.4), inset 0 -3px 0 rgba(0, 0, 0, 0.15); 
  font-size: 1.15rem; 
  height: 55px; 
  margin-top: 0; 
  margin-bottom: 25px; 
}
.c-modal-trouble-bubble::after { 
  content: ""; 
  position: absolute; 
  left: 50%; 
  background: linear-gradient(135deg, #0c1e38 0%, #0e2342 100%); 
  transform: translateX(-50%) rotate(45deg); 
  border-radius: 2px; 
  box-shadow: 3px 3px 5px rgba(14, 35, 66, 0.3); 
  top: 100%; 
  height: 14px; 
  width: 14px; 
  margin-top: -7px; 
  z-index: -1; 
}

/* LINE詳細用の装飾 */
.c-modal-qr { 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  background-color: #f9f9f9; 
  padding: 15px; 
  border-radius: 8px; 
  margin-top: -10px; 
  margin-bottom: 25px; 
}
.c-modal-qr__text { 
  font-size: 0.85rem; 
  color: #333333; 
  font-weight: bold; 
  text-align: center; 
  line-height: 1.5; 
  margin-top: 0; 
  margin-bottom: 15px; 
}
.c-modal-qr__img { 
  display: block; 
  width: 120px; 
  height: 120px; 
  object-fit: contain; 
  margin-top: 0; 
}
.c-modal-action-btn--map { 
  display: none; /* マップボタンはスマホでは非表示 */ 
}

/* ==========================================================================
   ▼ PC・タブレット用レイアウト（メディアクエリ：768px以上の画面で適用）
   ========================================================================== */
@media (min-width: 768px) {

  /* --- フッターと隙間の設定 --- */
  .l-container { 
    padding: 0 20px; 
  }

  .l-footer {
    /* PCでは追従ボタンがないため、下の余白を通常のサイズ(40px)に戻します */
    padding-bottom: 40px; 
    /* 【ルール1】上下の位置調整はマイナス＝上、プラス＝下 */
    /* ★調整：ここの数値を大きくするとフッターが下に動き、上のSTEP画像との隙間が広がります */
    margin-top: 30px; 
  }
  
  .l-footer__bottom {
    /* 白いカードとコピーライトの隙間をゆったりと取ります */
    margin-top: 50px; 
  }

  /* コピーライトがスクロール検知前に消えてしまうのを防ぐための強制表示 */
  .l-footer__bottom.js-fade-up {
    opacity: 1;
    transform: translateY(0);
  }

  /* --- 店舗情報カード（PC用） --- */
  .c-footer-info {
    max-width: 900px; 
    margin-left: auto;
    margin-right: auto;
    padding: 30px 60px 50px 60px; 
  }
  .c-footer-info__title { 
    font-size: 1.6rem; 
    margin-bottom: 30px; 
  }
  .c-footer-table th, 
  .c-footer-table td { 
    padding: 20px 10px; 
    font-size: 1rem; 
  }
  .c-footer-table th { 
    width: 25%; 
  }
  .c-footer-table td { 
    width: 75%; 
    padding-left: 30px; 
  }
  .c-footer-tel { 
    font-size: 1.6rem; 
  }
  .c-footer-sns img { 
    width: 45px; 
    height: 45px; 
  }
  .c-footer-pay {
    flex-direction: row; /* 横に並べる設定に上書き */
    align-items: center; /* 縦の中央で揃える */
    gap: 15px; /* 左右の画像と画像の間の隙間 */
  }

  .c-footer-pay__img {
    width: auto; /* 横幅の100%指定を解除して元の比率に戻す */
    
    /* ★調整：PCでの画像の大きさを調整します。大きくしたい場合は数値を上げてください */
    max-width: 280px; 
  }

  /* ==========================================================================
     【SEO対策用 店舗紹介・キーワードテキストエリア (PC用上書き)】
     PC表示では店舗情報カードと同じ横幅（900px）に揃えて配置します。
     ========================================================================== */
  .c-seo-text-box {
    max-width: 900px; /* 上の白い店舗情報カードと横幅をピタッと揃える */
    margin-left: auto;
    margin-right: auto;
    padding: 20px 30px;
    
    /* 【ルール1】上下の位置調整はマイナス＝上、プラス＝下 */
    /* ★調整：PC表示で、ここの数値を小さく（マイナス方向に）するとテキスト枠全体が上に動き、店舗情報カードとの隙間が縮みます */
    margin-top: 25px; 
  }
/* ▼ 追加：PC用でのロゴ枠と画像の微調整 ▼ */
  .c-seo-text-box__logo {
    /* 【ルール1】上下の位置調整はマイナス＝上、プラス＝下 */
    /* ★調整：PC表示でのロゴと下の見出しテキストとの隙間です */
    margin-bottom: 20px;
  }

  .c-seo-text-box__img {
    /* ★調整：PC表示でのロゴの最大幅です。大きくしたい場合は数値を上げてください */
    max-width: 120px;
  }
  .c-seo-text-box__title {
    font-size: 0.95rem;
  }

  .c-seo-text-box__desc {
    font-size: 0.8rem;
  }
  
  /* --- ヘッダー・メニュー（PC用） --- */
  .l-header { 
    background-color: transparent; 
    border-bottom: none; 
    position: absolute; 
    left: 0; 
    width: 100%; 
    z-index: 100; 
    top: 0; 
    height: 90px; 
  }
  .l-header__inner { 
    gap: 30px; 
  }
  .l-header__logo { 
    display: none; 
  }
  .l-header__sns { 
    display: none; 
  }

  .c-hamburger-btn, 
  #sp-fixed-btn { 
    display: none !important; 
  }
  .c-menu-btn { 
    height: 55px; 
  }

  /* --- 右側固定の4段タワーボタン（PC専用） --- */
  #pc-fixed-contact {
    display: flex !important; 
    flex-direction: column; 
    align-items: center; 
    position: fixed; 
    right: -150px; 
    opacity: 0; 
    visibility: hidden;
    z-index: 10000; 
    width: 105px; 
    top: 100vh; 
    height: auto; 
    transform: translateY(calc(-100% - 25px)); 
    transition: right 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.6s ease, visibility 0.6s;
  }
  #pc-fixed-contact.custom-show { 
    right: 8px; 
    opacity: 1; 
    visibility: visible; 
  }
  .contact-btns { 
    display: flex; 
    flex-direction: column; 
    width: 100%; 
    border-radius: 12px; 
    overflow: hidden; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.15); 
    border: 1px solid rgba(0,0,0,0.15); 
    margin-top: 0; 
  }
  .btn-menu-pc { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    width: 100%; 
    height: 100px !important; 
    background-color: rgba(255, 255, 255, 0.85); 
    border-bottom: 1px solid rgba(0, 0, 0, 0.4); 
    text-decoration: none; 
    transition: background-color 0.3s ease; 
  }
  .btn-menu-pc:hover { 
    background-color: #ffffff !important; 
  }
  .btn-menu-pc__img { 
    width: 48px; 
    height: auto; 
    display: block; 
    margin-top: 0; 
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.1)); 
    transition: transform 0.3s ease, filter 0.3s ease; 
  }
  .btn-menu-pc:hover .btn-menu-pc__img { 
    transform: translateY(-4px); 
    filter: drop-shadow(0 6px 8px rgba(0,0,0,0.2)); 
  }
  #pc-fixed-contact a:not(.btn-menu-pc) { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    width: 100%; 
    height: 100px; 
    color: #333333 !important; 
    text-decoration: none; 
    transition: background 0.3s ease; 
    padding: 0; 
    backdrop-filter: blur(15px); 
    box-sizing: border-box; 
  }
  .btn-mail-pc, 
  .btn-judge-pc { 
    border-bottom: 1px solid rgba(0, 0, 0, 0.4); 
  }
  .btn-mail-pc:hover, 
  .btn-judge-pc:hover, 
  .btn-line-pc:hover { 
    background: #ffffff !important; 
  }
  #pc-fixed-contact a:not(.btn-menu-pc) i { 
    font-size: 48px; 
    margin-top: 0px; 
    filter: none; 
    transition: transform 0.3s ease; 
  }
  #pc-fixed-contact a:not(.btn-menu-pc):hover i { 
    transform: translateY(-4px); 
  }

  /* --- メインビジュアル（PC用） --- */
  .l-hero-slider { 
    height: 100vh; 
    min-height: 750px; 
    max-height: 80vw; 
    margin-top: 0; 
  }
  .l-hero-slider__picture--left { 
    clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%); 
  }
  .l-hero-slider__picture--right { 
    display: block; 
    clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%); 
  }
  .l-hero-slider__picture--right .l-hero-slider__img { 
    animation: panUp 10s infinite; 
  }
  .l-hero-slider__center-bar { 
    max-width: 500px; 
    height: 60px; 
    margin-top: 40px; 
  }
  .l-hero-slider__bar-left, 
  .l-hero-slider__bar-right { 
    font-size: 1.2rem; 
    font-weight: bold; 
  }
  .l-hero-slider__center-mark { 
    border-width: 3px; 
    height: 48px; 
    width: 48px; 
    margin-top: -24px; 
    font-size: 1.2rem; 
  }
  
  /* メインビジュアル上のテキストをロゴ画像に置換（PCのみ） */
  .l-hero-slider__sub-title { 
    display: block; 
    color: transparent; 
    font-size: 0; 
    line-height: 0; 
    background-image: url("../images/top-logo_shiga5.png"); 
    background-repeat: no-repeat; 
    background-position: center bottom; 
    background-size: contain; 
    position: relative; 
    z-index: 30; 
    width: 400px; 
    height: auto; 
    aspect-ratio: 5 / 1; 
    margin-top: -55px; 
    margin-bottom: -15px; 
  }
  .l-hero-slider__sub-title::before { 
    display: block; 
    z-index: -1; 
    top: 50%; 
    height: 60px; 
    left: 90px; 
    margin-top: 14px; 
  }
  .l-hero-slider__sns { 
    display: flex !important; 
    position: absolute; 
    left: 50%; 
    transform: translateX(-50%); 
    top: 50%; 
    height: 50px; 
    margin-top: 100px; 
    z-index: 30; 
    gap: 17px; 
    pointer-events: auto; 
  }
  .l-hero-slider__sns-link { 
    display: block; 
    transition: transform 0.3s ease, opacity 0.3s ease; 
    margin-top: 0; 
  }
  .l-hero-slider__sns-link:hover { 
    opacity: 0.8; 
    transform: translateY(-5px); 
  }
  .l-hero-slider__sns-img { 
    width: 50px; 
    height: auto; 
  }
  .l-hero-slider__scroll { 
    left: 50%; 
    transform: translateX(-50%); 
    height: 180px; 
    margin-top: -200px; 
  }
  .l-hero-slider__scroll-text { 
    font-size: 0.9rem; 
    font-weight: bold; 
    letter-spacing: 0.25em; 
  }
  .l-hero-slider__scroll-line { 
    width: 4px; 
    height: 150px; 
  }

  /* --- 各セクション（PC用） --- */
  .c-sec-title, 
  .c-line-title { 
    font-size: 1.3rem; 
    margin-top: 90px; 
  }
  .c-brand-grid { 
    grid-template-columns: repeat(8, 1fr); 
    gap: 15px; 
    margin-top: 30px; 
  }
  .c-type-grid { 
    grid-template-columns: repeat(4, 1fr); 
    gap: 15px; 
    margin-top: 40px; 
  }
  .c-type-card { 
    padding: 25px 30px 25px 15px; 
  }
  .c-type-card__text { 
    font-size: 0.95rem; 
  }
  .c-type-card::after { 
    right: 20px; 
    height: 8px; 
    width: 8px; 
    margin-top: -5px; 
  }
  .c-type-card:hover::after { 
    right: 12px; 
  }
  .c-swipe-slider { 
    width: 100%; 
    overflow-x: auto; 
    margin-left: 0; 
    margin-right: 0; 
    margin-top: 20px; 
  }
  .c-swipe-slider__card { 
    width: 360px; 
    padding: 0 10px; 
    flex-shrink: 0; 
  }
  /* ==========================================================================
     【中古車販売セクション (PC用上書き：画面幅768px以上)】
      ========================================================================== */
  .c-usedcar-title {
    /* 【ルール1】上下の位置調整はマイナス＝上、プラス＝下 */
    /* ★調整（PCでの上の隙間）：ここの数値を小さく（マイナス方向に）すると、USED CAR SALESの見出し画像が上に動き、上の「タイプ別 修理事例」との隙間が縮みます */
    /* （もっと上に詰めたい場合は -10px や -30px、離したい場合は 20px や 40px にしてください） */
    margin-top: 0px; 
  }

  /* 中古車カードの一覧グリッド（PC：横4列） */
  .c-usedcar-list { 
    grid-template-columns: repeat(4, 1fr); 
    gap: 25px 20px; 
    
    /* 【ルール1】上下の位置調整はマイナス＝上、プラス＝下 */
    /* ★調整（PCでの下の隙間）：ここの数値を小さく（マイナス方向に）すると、下の車カード一覧全体が上に動き、見出し画像との隙間が縮みます */
    margin-top: 30px; 
  }

  /* ★修正：重複していた記述を削除し、1つにまとめました */
  .c-usedcar-card__title { 
    font-size: 0.95rem; 
    /* 【ルール1】上下の位置調整はマイナス＝上、プラス＝下 */
    /* ★調整：PC表示でのカード内グーネット画像と車種タイトルの隙間です。小さくするとタイトルが上に動きます */
    margin-top: 6px; 
  }

  .c-usedcar-card__price { 
    font-size: 1.3rem; 
    /* 【ルール1】上下の位置調整はマイナス＝上、プラス＝下 */
    /* ★調整：PC表示での車種タイトルと価格の隙間です。小さくすると価格が上に動きます */
    margin-top: 4px; 
  }

  .c-tire-image { 
    margin-top: 0; 
  }
  .c-tire-image__img { 
    width: 100%; 
    max-width: 750px; 
    margin-left: auto; 
    margin-right: auto; 
  }
  .c-tire-image--spaced { 
    margin-top: 35px; 
  }
  .c-tire-address, 
  .c-delivery-address { 
    margin-top: 50px; 
  }
  .c-delivery-address { 
    margin-top: 50px; 
  }
  .c-tire-address__bubble-title, 
  .c-delivery-address__bubble { 
    font-size: 1.55rem; 
    height: 65px; 
    max-width: 500px; 
    margin-left: auto; 
    margin-right: auto; 
  }
  .c-tire-address__sub-title, 
  .c-delivery-address__subtext { 
    font-size: 1.1rem; 
    margin-top: 35px; 
  }
  .c-tire-address__sub-title span, 
  .c-delivery-address__subtext span { 
    border-bottom: 4px solid #f3c200; 
  }
  .c-tire-table, 
  .c-delivery-table { 
    max-width: 700px; 
    margin-left: auto; 
    margin-right: auto; 
    margin-top: 30px; 
  }
  .c-delivery-table { 
    margin-top: 40px; 
  }
  .c-tire-table th, 
  .c-tire-table td, 
  .c-delivery-table th, 
  .c-delivery-table td { 
    padding: 25px 20px; 
    font-size: 1rem; 
  }
  .c-tire-table th, 
  .c-delivery-table th { 
    width: 20%; 
  }
  .c-tire-table td, 
  .c-delivery-table td { 
    width: 80%; 
    padding-left: 30px; 
  } 
  .c-tire-address__note, 
  .c-delivery-address__note { 
    font-size: 0.9rem; 
    margin-top: 20px; 
  }
  .c-delivery-address__note { 
    margin-top: 30px; 
    font-size: 1rem; 
  }
  .c-tire-accordion { 
    margin-top: 15px; 
  }
  .c-accordion__btn { 
    max-width: 600px; 
    font-size: 1.2rem; 
    height: 70px; 
  }
  .c-accordion__btn i { 
    font-size: 1.4rem; 
  }
  .c-accordion__content { 
    margin-top: 25px; 
  }
  .c-trouble-header { 
    margin-top: 60px; 
  }
  .c-trouble-header__img { 
    width: 100%; 
    max-width: 700px; 
    margin-top: 0; 
  }
  .c-trouble-grid { 
    grid-template-columns: repeat(2, 1fr); 
    width: 100%; 
    max-width: 1200px; 
    margin-left: auto; 
    margin-right: auto; 
    margin-top: 20px; 
  }
  .c-trouble-solution { 
    margin-top: 40px; 
  }
  .c-trouble-solution__bubble { 
    font-size: 1.6rem; 
    height: 75px; 
    max-width: 550px; 
    margin-left: auto; 
    margin-right: auto; 
  }
  .c-trouble-solution__image { 
    margin-top: 40px; 
  }
  .c-trouble-solution__img { 
    width: 100%; 
    max-width: 800px; 
    margin-left: auto; 
    margin-right: auto; 
  }
  .c-trouble-solution__img--bring { 
    margin-top: -5px; 
  }
  .c-trouble-solution__img--01 { 
    width: 60%; 
    max-width: 500px; 
    margin-left: auto; 
    margin-right: auto; 
    margin-top: 0px; 
  }
  .c-trouble-solution__img--02 { 
    margin-top: 10px; 
  }
  .c-trouble-solution__img--03 { 
    margin-top: -55px; 
  }
  .c-step-flow { 
    width: 100%; 
    max-width: 1200px; 
    margin-top: 100px; 
  }
  .c-step-title__img { 
    max-width: 550px; 
  }
  .c-step-grid { 
    grid-template-columns: repeat(3, 1fr); 
    gap: 10px; 
    margin-top: 100px; 
  }
  
  /* --- アコーディオン（PC用） --- */
  .c-info-accordion { 
    padding: 30px 0; 
    text-align: left; 
    margin-top: 60px; 
  }
  .c-info-accordion__title { 
    display: flex; 
    font-size: 1.5rem; 
    padding: 0; 
    margin-bottom: 20px; 
  }
  .c-info-accordion__title::before, 
  .c-info-accordion__title::after { 
    border-top: 3px solid #f8d63b; 
    border-bottom: 3px solid #333333; 
    height: 10px; 
    margin-top: -2px; 
  }
  .c-info-accordion__item { 
    border-bottom: 1px dotted #cccccc; 
  }
  .c-info-accordion__summary { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 20px 0; 
    border-top: none; 
    border-bottom: none; 
  }
  .c-info-accordion__summary-inner { 
    flex-grow: 1; 
    padding-right: 40px; 
  }
  .c-info-accordion__date { 
    font-size: 0.95rem; 
  }
  .c-info-accordion__text { 
    font-size: 1rem; 
    margin-top: 5px; 
  }
  .c-info-accordion__more { 
    position: relative; 
    left: auto; 
    top: auto; 
    width: auto; 
    height: auto; 
    margin-top: 0; 
    background-color: transparent; 
    transform: none; 
  }
  .c-info-accordion__summary:hover .c-info-accordion__more { 
    transform: translateY(4px); 
  }
  details[open] .c-info-accordion__more { 
    transform: rotate(180deg); 
  }
  details[open] .c-info-accordion__summary:hover .c-info-accordion__more { 
    transform: rotate(180deg) translateY(-4px); 
  }
  .c-info-double-arrow { 
    margin-top: 0; 
  }
  .c-info-double-arrow span { 
    width: 24px; 
    height: 24px; 
    border-width: 3px; 
    margin-top: -14px; 
  }
  .c-info-double-arrow span:first-child { 
    margin-top: 0; 
  }
  .c-info-accordion__content { 
    font-size: 0.95rem; 
    padding: 0; 
    margin-top: 10px; 
    margin-bottom: 20px; 
  }
  .c-info-gallery { 
    gap: 15px; 
    max-width: 600px; 
    margin-top: 25px; 
  }
  .c-info-btn-wrap { 
    margin-top: 25px; 
  }
  .c-btn-instagram { 
    height: 50px; 
    font-size: 0.95rem; 
    padding: 0 30px; 
  }

  /* ==========================================================================
     【Information内 オイルメーカー3社ロゴ並び (PC用上書き)】
     PC表示ではロゴが巨大になりすぎないよう最大幅を制限し、左寄せで配置します。
     ========================================================================== */
  .c-info-logos {
    justify-content: flex-start; /* PCでは上の文章に合わせて左寄せにする（※中央寄せにしたい場合は center にしてください） */
    width: 100%;
    /* ★調整：PCでの3社ロゴ全体の最大幅です。大きくしたい場合は600pxなどに増やしてください */
    max-width: 400px; 
    margin-left: 0;
    margin-right: auto;
    gap: 20px; /* ★調整：PCでのロゴ同士の横の隙間です */
    
    /* 【ルール1】上下の位置調整はマイナス＝上、プラス＝下 */
    /* ★調整：ここの数値を小さくするとロゴ全体が上に動き、上の文章との隙間が縮みます */
    margin-top: 15px; 
    
    /* PCでは二重矢印が右端に配置されるため、下の余白をスッキリさせます */
    margin-bottom: 5px; 
  }

  /* --- 求人バナーセクション（PC用上書き） --- */
  .c-recruit-banner { 
    /* 【ルール1】上下の位置調整はマイナス＝上、プラス＝下 */
    /* ★調整：PC表示で、上のInformationとの隙間を調整します */
    margin-top: 30px; 
    /* ★調整：PC表示で、下の修理事例との隙間を狭くする調整 */
    margin-bottom: -50px;
  }
  .c-recruit-banner__link { 
    width: 100%; /* PCではコンテナ幅いっぱい（max-width: 1000pxまで）広げる */
  }
  


/* ==========================================================================
     【グーネットピット見出し ＆ 整備項目バー (PC用上書き)】
     PC表示では、左側に画像、右側に5つのグレーラベルを横一列で配置します。
     ========================================================================== */
  .c-goo-bar {
    flex-direction: row; /* PCでは横一列に並べる設定に上書き */
    align-items: center; /* 左右の要素を上下中央で揃える */
    justify-content: space-between;
    /* ★修正：1000pxの制限を解除し、下の「MINI/BMWの修理事例」の横幅とピタッと揃えます */
    max-width: 95%;
    gap: 15px; /* ★調整：左の画像と、右のグレー項目群との間の横の隙間です */
    
    /* 【ルール1】上下の位置調整はマイナス＝上、プラス＝下 */
    /* ★調整：ここの数値を小さくするとバー全体が上に動き、上の求人バナーとの隙間が縮みます */
    /* （※求人バナー側の -50px を打ち消すため、75px前後からスタートしています） */
    margin-top: 105px; 
    
    /* ★調整：ここの数値を小さく（マイナス方向に）すると、下の「MINI/BMWの修理事例」が上に引っ張られて隙間が縮みます */
    margin-bottom: -50px; 
  }

  /* 左側：グーネットピット画像の横幅比率 */
  .c-goo-bar__title {
    /* ★調整：ここの％を大きくすると左の画像が大きくなり、右のグレー項目が縮みます */
    width: 50%; 
    flex-shrink: 0; /* 画像が勝手に潰れるのを防ぐ */
  }

  /* 右側：5つのグレー項目リスト */
  .c-goo-bar__list {
    width: auto;
    flex-grow: 1; /* 残りの右側スペースいっぱいに広げる */
    gap: 8px; /* ★調整：PCでのグレーの四角同士の「横の隙間」です */
    
    /* 【ルール1】上下の位置調整はマイナス＝上、プラス＝下 */
    /* ★調整：左の画像に対して、右のグレー項目群の高さ位置を微調整したい場合はここをいじります（マイナスで上、プラスで下） */
    margin-top: 2px; 
  }

  /* グレーの四角（PC用サイズ） */
  .c-goo-bar__item {
    font-size: 0.85rem; /* ★調整：PCでの文字の大きさです */
    padding: 0 8px;
    
    /* 【ルール2】背景などのサイズ指定は「開始位置＋高さ」で行う */
    /* ★調整：PCでのグレーの四角の高さ（太さ）です */
    height: 32px; 
  }



  /* --- PCクーポン画像 --- */
  .btn-mail-pc .c-coupon-img { 
    display: block; 
    width: 48px; 
    height: 48px; 
    object-fit: contain; 
    margin-left: auto; 
    margin-right: auto; 
    margin-top: 0px; 
    transition: transform 0.3s ease; 
  }
  .btn-mail-pc:hover .c-coupon-img { 
    transform: translateY(-4px); 
  }

  /* --- モーダル（PC用） --- */
  .c-modal-content { 
    padding: 50px 40px 30px 40px; 
    border-radius: 12px; 
    max-width: 800px; 
  }
  .c-modal-tel-header { 
    font-size: 1.2rem; 
  }
  .c-modal-tel-catch { 
    font-size: 1rem; 
  }
  .c-modal-tel-number { 
    font-size: 2.5rem; 
    color: #1a73e8; 
  }
  .c-modal-table th, 
  .c-modal-table td { 
    font-size: 0.95rem; 
  }
  .c-modal-action-btn--map { 
    display: flex; 
    background-color: #1a73e8; 
    margin-top: 0px; 
    margin-bottom: 30px; 
  }
  .c-modal-trouble-bubble { 
    max-width: 500px; 
    margin-left: auto; 
    margin-right: auto; 
  }  
  .c-modal-highlight, 
  .c-modal-highlight + p { 
    text-align: left; 
    max-width: 500px; 
    margin-left: auto; 
    margin-right: auto; 
    margin-top: 50px; 
  }
  .c-modal-trouble-list { 
    padding: 40px 30px 20px 15px; 
  }
  .c-modal-trouble-list li { 
    font-size: 1.05rem; 
  }
  .c-modal-trouble-catch { 
    font-size: 1.3rem; 
  }

  /* --- スライダーの左右クリック矢印（PC用復活：サークルデザイン） --- */
  .c-swipe-btn {
    background-color: #ffffff; /* 白背景を復活 */
    border: 1px solid #e0e0e0; /* 枠線を復活 */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* 影を復活 */
    border-radius: 50%; /* 丸い形にする */
    
    /* PCでのボタンの大きさ */
    height: 55px; 
    width: 55px; 
    
    /* 【ルール1】上下の位置調整はマイナス＝上、プラス＝下 */
    /* 大きさの半分（27.5px）をマイナスして画像の中央に合わせる */
    margin-top: -27.5px; 
  }
  
  .c-swipe-btn i {
    font-size: 1.6rem; /* アイコンをサークルに収まるサイズに縮小 */
    filter: none; /* スマホで付けた光彩（影）を消す */
  }

  .c-swipe-btn:hover {
    background-color: #f8d63b; /* ホバーで背景が黄色になる */
    color: #333333; /* アイコンの色は黒に戻す */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
  }

  .c-swipe-btn--prev {
    /* ★調整：PCでは画像の枠外にはみ出させます。数値を小さく（マイナスに）すると外に出ます */
    left: -25px; 
  }

  .c-swipe-btn--next {
    /* ★調整：PCでは画像の枠外にはみ出させます。数値を小さく（マイナスに）すると外に出ます */
    right: -25px; 
  }

} /* ＝PCメディアクエリの終了＝ */