@charset "UTF-8";

/* SEO 用路線ページ（PC）の画面固有スタイル */

#contents {
  /* 路線ページ内容ラッパの末尾余白（フッター手前の間隔）。文字間 0.6px は Figma 全体のトラッキングに合わせページ単位で付与 */
  padding-bottom: 50px;
}

/* 2 階層パンくず */
.breadcrumb {
  width: 100%;
  margin: 0 auto;
}

.breadcrumb ul {
  margin: 0;
  padding: 13px 2px;
}

.breadcrumb ul li {
  display: inline;
}

.breadcrumb li:after {
  /* 階層区切り「>」 */
  content: ">";
  color: #222;
  padding: 0 3px;
}

.breadcrumb li:last-child:after {
  content: "";
}

.route-line__heading {
  /* 赤帯見出し。Figma: bg #d82035 / 上下13px左右12px / 白 Bold 16px。上10px・下25px を外部間隔として持つ */
  position: relative;
  margin: 20px 0 25px; /* Figma: 赤帯の上10px(pt-10)・下25px(pb-25) */
  padding: 13px 12px 13px 31.6px; /* 左 = 12(帯内側) + 4.8(白ビュレット) + 14.8(ビュレット右) */
  background-color: #d82035;
  color: #ffffff;
  font-family:
    "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-size: 16px;
  font-weight: bold;
  line-height: 19.2px;
}

.route-line__heading::before {
  /* 見出し左端の白ビュレット（Figma: 見出し文字の左に幅4.8pxの白い縦罫。帯左端から12px）*/
  content: "";
  position: absolute;
  top: 13px;
  bottom: 13px;
  left: 12px;
  width: 4.8px;
  background-color: #ffffff;
}

.route-line__body {
  /* 所属駅リンクブロックの地。Figma: 淡ピンク #ffeff1 / 枠線なし / 内側 24px */
  padding: 24px;
  background-color: #ffeff1;
  letter-spacing: 0.6px;
}

.route-line__stations {
  /* 所属駅リスト */
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr;
  column-gap: 48px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.route-line__station {
  /* 駅 1 行 */
  position: relative;
  display: flex;
  align-items: flex-start;
  min-height: 31.4px;
}

.route-line__stations .route-line__station-name {
  /* 駅名テキスト（活性リンク=a / 非活性=span 共通）。Figma: Yu Gothic 16px / #222。
     共通 a:link(#333) より優先させるため子孫セレクタで指定。
     左 13px（三角 3px + 余白 10px）はマーカー領域として活性／非活性の双方で確保し、
     マーカー非表示の駅でも駅名の左端が列内で揃うようにする */
  position: relative;
  padding-left: 13px;
  color: #222222;
  font-family:
    "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-size: 16px;
  font-weight: normal;
  line-height: 30.4px;
}

.route-line__stations a.route-line__station-name {
  /* 活性リンクのみ下線あり（Figma）。非活性 span はリンクと誤認されないよう下線なし */
  text-decoration: underline;
}

.route-line__stations a.route-line__station-name::before {
  /* 駅名左の赤い「›」マーカー（Figma の小さな赤矢印を CSS の三角で再現）。
     求人 0 件・未集計の駅（span 描画）はリンク先が無いためマーカーを出さない */
  content: "";
  position: absolute;
  top: 11.7px;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 3.5px 0 3.5px 3px;
  border-color: transparent transparent transparent #d82035;
}

.route-line__stations a.route-line__station-name:hover {
  /* ホバー時は下線を消してクリッカブルに見せる（他ページの a:hover と同挙動） */
  text-decoration: none;
}

.uline {
  border-bottom: 2px solid #d82035;
}

.link-type-01 a {
  background: url(/th/pc/img/common/icn_arrow_01.png) no-repeat center left;
  padding: 1px 0 0 10px;
}