/* ======================================= */
/* ファイル名: access-route.css            */
/* 役割: ルート図共通スタイル（SP視認性特化ver） */
/* ======================================= */

/* --- ルート全体コンテナ --- */
.route {
  display: flex;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto 20px;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
  gap: 12px;
  align-items: stretch;
}

/* 路線名ラベル（左端ラベル） */
.line-label {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFF3E0;
  color: #4B2E2E;
  font-size: 15px;
  font-weight: bold;
  writing-mode: vertical-rl;
  padding: 15px 12px;
  border-radius: 4px;
  border: 1px solid #c49b6c;
  min-width: 55px;
  line-height: 1.2;
}

/* --- 共通のボックススタイル --- */
.route-box {
  flex: 1;
  padding: 24px 12px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  position: relative;
  border-radius: 4px;
  min-height: 115px;
}

/* 矢印（PC表示：右向き ▶） */
.route-box:not(:last-child)::after {
  content: "▶";
  position: absolute;
  right: -13px;
  top: 50%;
  transform: translateY(-50%);
  color: #c49b6c;
  font-size: 14px;
  z-index: 1;
}

/* --- カラーバリエーション --- */
.route-box.light { background: #f8f8f8; color: #222; border: 1px solid #ddd; }
.route-box.dark { background: #3a3a3a; color: #fff; }
.route-box.green { background: #2f4f3f; color: #fff; font-weight: bold; }

/* --- テキスト設定（PC） --- */
.route-box .title { 
  font-size: 18px; 
  font-weight: 700; 
  display: block;
  line-height: 1.3;
}

.route-box .sub { 
  font-size: 14px; 
  color: inherit; /* 親要素の色を継承 */
  opacity: 0.95; 
  line-height: 1.5; 
  display: block;
}

/* --- スマートフォン対応 (768px以下) --- */
@media screen and (max-width: 768px) {
  .route {
    flex-direction: column;
    gap: 32px; /* ボックス間の矢印スペースを微増 */
    margin-bottom: 60px; 
    padding: 20px;
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    border-radius: 8px;
  }

  .line-label {
    writing-mode: horizontal-tb;
    width: 100%;
    min-width: auto;
    padding: 14px;
    font-size: 17px; /* 路線名も少し大きく */
    background-color: #fdf5e6;
    border: none;
    border-bottom: 3px solid #c49b6c;
    border-radius: 4px 4px 0 0;
    margin-bottom: -20px;
  }

  .route-box {
    width: 100%;
    min-height: auto;
    padding: 28px 15px; /* 上下パディングを厚くして読みやすく */
    border: 1px solid #f0f0f0;
  }

  /* スマホでのテキストサイズを最大化 */
  .route-box .title {
    font-size: 20px; /* 駅名・場所名を強調 */
    margin-bottom: 4px;
  }

  .route-box .sub {
    font-size: 16px; /* 本文と同じ読みやすいサイズにアップ */
    opacity: 1; /* 透明度をなくしてハッキリさせる */
    font-weight: 500; /* やや太字にして視認性を確保 */
    color: #444; /* 濃いグレーにして読みやすく */
  }
  
  /* ダーク背景（緑・黒）のボックス内の文字色は白を維持 */
  .route-box.dark .sub,
  .route-box.green .sub {
    color: #fff;
  }

  /* 矢印（スマホ表示：下向き ▼） */
  .route-box:not(:last-child)::after {
    content: "▼";
    right: 50%;
    bottom: -30px; /* 隙間の中心 */
    top: auto;
    transform: translateX(50%);
    font-size: 18px;
  }
}