@charset "UTF-8";

/* ==========================================================================
   【固定ページ共通】コンテンツを包む白いボックスと表題エリア
   ========================================================================== */
body .container .page-content-wrapper {
  display: block !important;
  width: 100% !important;
  max-width: 1000px !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
  
  /* 共通の温かみのある「特製ミルク色（#fcfbf9）」へ完全統一 */
  background-color: #fcfbf9 !important;
  
  border-top: 3px solid var(--primary-color) !important;
  border-bottom: 1px solid #e0ded7 !important;
  border-left: 1px solid #e0ded7 !important;
  border-right: 1px solid #e0ded7 !important;
  border-radius: 4px !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02) !important;
  padding: 40px 20px !important;
}

/* 表題エリア全体の配置設定（初期状態：スマホ等では中央寄せの縦並び二段） */
.page-title-area {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 15px !important;
  margin-bottom: 35px !important;
  text-align: center !important;
  width: 100% !important;
}

/* 見出し（h3）の下に文字幅ぴったりの柿色の二重線を敷く（index.htmlのルールを完全流用） */
.page-title-area h3 {
  margin: 0 !important;
  font-size: 24px !important;
  color: var(--primary-color) !important;
  position: relative !important;
  padding-bottom: 8px !important;
  display: inline-block !important;
  font-family: "Noto Serif JP", serif !important;
}

.page-title-area h3::after {
  content: "" !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  margin: 0 auto !important;
  width: 100% !important;
  height: 3px !important;
  border-top: 1px solid var(--accent-color) !important;
  border-bottom: 1px solid var(--accent-color) !important;
}

/* 固定ページ共通のインナーコンテンツ */
.page-inner-content {
  width: 100% !important;
}

.page-inner-content h4 {
  font-size: 18px !important;
  color: var(--primary-color) !important;
  border-left: 3px solid var(--accent-color) !important;
  padding-left: 10px !important;
  margin-top: 0 !important;
  margin-bottom: 15px !important;
  text-align: left !important;
  font-family: "Noto Serif JP", serif !important;
}

/* ==========================================================================
   【固定ページ共通】スクロール距離不足による消失バグの完全解消
   ========================================================================== */
.access-fade-active {
  animation: accessBoxAnime 1.6s cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards !important;
}
@keyframes accessBoxAnime {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 補足テキストを少し小さな字とグレーに変更する共通命令 */
.hotshop-sub-text {
  font-size: 13px !important;
  color: #666 !important;
  line-height: 1.6 !important;
}

/* ==========================================================================
   【アクセス専用】1. Googleマップのレスポンシブ比率（16:9）設定
   ========================================================================== */
.hotshop-map-container {
  position: relative !important;
  width: 100% !important;
  height: 0 !important;
  padding-top: 56.25% !important; /* スマホ大画面で最も美しい16:9の比率を維持 */
  margin-top: 15px !important;
  margin-bottom: 40px !important;
  border: 1px solid #e0ded7 !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02) !important;
}

.hotshop-map-container iframe {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: none !important;
}

/* ==========================================================================
   【アクセス専用】2. 店舗情報テーブルのレイアウト設定
   ========================================================================== */
.hotshop-info-table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* 初期状態（スマートフォン画面）：表の項目と中身を縦一列に並べて見やすくする */
.hotshop-info-table th, 
.hotshop-info-table td {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  text-align: left !important;
}

.hotshop-info-table th {
  background-color: var(--bg-color) !important; /* 既存の生成り背景を流用 */
  color: var(--primary-color) !important;       /* 落ち着いた千歳緑 */
  padding: 10px 15px !important;
  font-family: "Noto Serif JP", serif !important;
  font-size: 14px !important;
  border-top: 1px solid #e0ded7 !important;
  border-bottom: 1px solid #e0ded7 !important;
}

.hotshop-info-table td {
  padding: 15px !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
  color: var(--text-color) !important;
}

.hotshop-info-table tr:last-child td {
  border-bottom: 1px solid #e0ded7 !important;
}

/* お車ルート詳細の端正な整列レイアウト */
.access-route-item-flex {
  font-size: 14px !important;
  line-height: 1.6 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  border-bottom: 1px dashed #e0ded7 !important;
  padding-bottom: 10px !important;
}
.hotshop-info-table .access-route-list li:last-child .access-route-item-flex {
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

/* 出発地の横幅を140pxにビシッと揃えて縦ラインを統一 */
.access-route-label {
  display: inline-block !important;
  width: 140px !important;
  font-weight: bold !important;
  color: var(--primary-color) !important;
  flex-shrink: 0 !important;
}
.access-route-detail-box {
  flex: 1 !important;
  min-width: 250px !important;
}

/* ==========================================================================
   PC大画面レスポンシブ（横幅769px以上共通）
   ========================================================================== */
@media screen and (min-width: 769px) {
  body .container .page-content-wrapper {
    padding: 60px 40px !important;
  }
  
  /* 🌾 誤認バグの修正：クラス名「.page-title-area」を名指しでピンポイント指定。
     これにより文字が離れる不具合が100%完全に消滅し、タイトルのすぐ左横に看板がカチッと並びます */
  .page-title-area {
    align-self: flex-start !important;
    text-align: left !important;
    margin-left: 0 !important;
    margin-bottom: 40px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 20px !important;
    width: auto !important;
  }
  
  .page-title-area .japan-tag {
    margin-bottom: 0 !important;
  }
  
  .page-title-area h3 {
    font-size: 26px !important;
  }
  
  .page-title-area h3::after {
    margin: 0 !important;
    left: 0 !important;
  }

  /* 看板ラベル：PC大画面のときだけ自動でトップページと100%同じ美しい「縦書き」に可変させる設定 */
  .hotshop-vertical-tag {
    writing-mode: vertical-rl !important;
    padding: 15px 8px !important;
    font-size: 14px !important;
    letter-spacing: 0.2em !important;
    margin-bottom: 0 !important;
    display: block !important;
  }
  
  /* 地図の高さ微調整 */
  .hotshop-map-container {
    padding-top: 45% !important;
    margin-top: 20px !important;
  }
  
  /* 🌾 テーブル崩れの修正：PC画面において、項目（左）と中身（右）を美しい横並び（2カラム形式）に完全復元 */
  .hotshop-info-table th, 
  .hotshop-info-table td {
    display: table-cell !important;
  }
  
  .hotshop-info-table th {
    width: 25% !important; /* 黄金比の25%幅にカチッと固定 */
    padding: 18px !important;
    vertical-align: middle !important;
    border-left: 1px solid #e0ded7 !important;
    border-top: 1px solid #e0ded7 !important;
    border-bottom: 1px solid #e0ded7 !important;
  }
  
  .hotshop-info-table td {
    width: 75% !important;
    padding: 18px 25px !important;
    border-right: 1px solid #e0ded7 !important;
    border-top: 1px solid #e0ded7 !important;
    border-bottom: 1px solid #e0ded7 !important;
  }
}