@charset "UTF-8";

/* ==========================================================================
   kyouai-base.css ／「狭隘区間を行く」共通CSS・全画面共通

   ■ これは何か
     「狭隘区間を行く」シリーズで使う現行のCSSです。
     旧デザイン（元ページの見た目をそのまま保った版）も
     kyouai-old-*.css として残してあり、class名は完全に同じなので、
     <link> の3行を書き換えるだけで行き来できます。

       現行（今風）… kyouai-base.css / kyouai-wide.css / kyouai-narrow.css
       旧版        … kyouai-old-base.css / kyouai-old-wide.css / kyouai-old-narrow.css

   ■ デザインの考え方
     この記事は「1路線・写真数枚・短い紹介文」という単純な構成なので、
     装飾を足すより、余白と字組みで見せる方向にしています。

       1. 事業者名の帯を、行先方向幕のような細い横帯に。
          左端に太い色の縦線を立て、記事の背骨として最後まで通します。
       2. 写真を大きく1枚ずつ。キャプションは写真の下に細い罫線で区切り、
          日付と場所を左右に振り分けます（新聞や図録の作法）。
       3. 紹介文は一段大きく、行間を広く。読み物としての体裁を優先。
       4. 白場を広く取り、影や角丸は最小限。今の落ち着いた作りに寄せています。

   ■ 方針：このCSSには色を一切書きません
     色はすべて変数で、中身はHTML側の配色ブロックで決めます。
     kyouai-*.css と同じ変数名なので、配色ブロックはそのまま使えます。
   ========================================================================== */


/* ==========================================================================
   ★ 寸法・書体の設定（色以外）
   ========================================================================== */
:root{
  --page-width:    800px;   /* PC版の版面幅 */
  --content-width: 710px;   /* 見出し・下部の幅 */
  --photo-width:   570px;   /* PC版の写真の幅（固定・中央配置）。
                               スマホでは画面幅に従います */
  --font: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP",
          "BIZ UDPGothic", "游ゴシック体", Meiryo, sans-serif;
  --line-height: 2.0;       /* 現状維持版より広め。読み物寄りの組み */
}


/* --------------------------------------------------------------------------
   1. 土台
   -------------------------------------------------------------------------- */
html{
  -webkit-text-size-adjust: 100%;
}

body{
  margin: 0;
  background-color: var(--bg-color);
  background-image: var(--bg-image);
  background-repeat: var(--bg-repeat);
  background-size: var(--bg-size);
  color: var(--text);
  font-family: var(--font);
  line-height: var(--line-height);
  letter-spacing: .02em;
  font-feature-settings: "palt";   /* 和文の約物のアキを詰める */
}

.page{
  margin: 0 auto;
  text-align: left;        /* 今風版は全体を左寄せ基調にしています */
  background: var(--paper);
}

img{
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

/* 区切り線は使いません。余白で区切る方針なので、
   HTMLに残っている <hr> は見えなくしています。 */
hr{
  display: none;
}


/* --------------------------------------------------------------------------
   2. 見出し
   左端に太い縦線を立て、その内側に3行を寄せます。
   縦線は記事の背骨として、下の写真・本文とも左端がそろいます。
   -------------------------------------------------------------------------- */
.head{
  margin: 0 auto;
  border-left: 5px solid var(--accent);
}

.operator{                 /* 事業者名。細い横帯 */
  display: inline-block;
  margin: 0;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
}

.route{                    /* 路線名。このページで一番大きい文字 */
  margin: 0;
  font-weight: 800;
}

.via{                      /* 経由地。細く小さく、記号を薄く見せる */
  margin: 0;
  color: var(--muted);
  font-weight: 500;
}


/* --------------------------------------------------------------------------
   3. 写真と説明
   キャプションは写真の下に細い罫線で区切り、右端に寄せます。
   罫線は .figure の幅（PC版で710px）いっぱいに引かれ、
   写真だけがそのなかで中央に置かれます。
   -------------------------------------------------------------------------- */
.figure{
  margin: 0 auto;
}
.figure img{
  display: block;
  width: 100%;   /* PC版では kyouai-wide.css 側で最大570pxに制限し、
                    中央に置いています。スマホでは画面幅いっぱい。 */
}
.caption{
  margin: 0;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  text-align: right;
  letter-spacing: .08em;
  font-variant-numeric: tabular-nums;   /* 日付の数字の幅をそろえる */
}


/* --------------------------------------------------------------------------
   3.5 路線の現況（.status）
   「2012/03/31廃止」のように、路線名の右に添える小さな札です。
   廃止路線は色を変えたいので、専用の変数 --status を使っています。
   HTML側の配色ブロックで --status を指定してください
   （現役の路線ではこの要素自体を書かなければ何も出ません）。
   -------------------------------------------------------------------------- */
.status{
  display: inline-block;
  margin: 0;
  border: 1px solid var(--status);
  border-radius: 3px;
  color: var(--status);
  font-weight: 700;
  letter-spacing: .06em;
  white-space: nowrap;      /* 日付が途中で折り返さないように */
  vertical-align: middle;
}


/* --------------------------------------------------------------------------
   3.6 注記（.notice）
   廃止や代替運行の告知など、本文のあとに添える補足。
   路線の現況にあたるので、こちらも --status の色で囲みます。
   -------------------------------------------------------------------------- */
.notice{
  margin: 0 auto;
  border-left: 4px solid var(--status);
  color: var(--text);
}
.notice strong{
  color: var(--status);
}
.notice p{
  margin: 0;
}


/* --------------------------------------------------------------------------
   4. 紹介文
   一段大きく、行間を広く。1行が長くなりすぎないよう幅を絞ります。
   -------------------------------------------------------------------------- */
.lead{
  margin: 0 auto;
}
.lead p{
  margin: 0;
}


/* --------------------------------------------------------------------------
   5. ページ下部
   上に細い罫線を引いて本文と分けます。
   戻るリンクは輪郭ボタンにして、指でも押しやすくしています。
   -------------------------------------------------------------------------- */
.foot{
  margin: 0 auto;
  border-top: 1px solid var(--rule);
}
.meta{
  margin: 0;
  color: var(--muted);
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
}
.links{
  margin: 0;
}
.links a{
  display: inline-block;
  border: 1px solid var(--accent-border);
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--accent);
  font-weight: 700;
  letter-spacing: .04em;
  text-decoration: none;
  transition: background .2s ease, color .2s ease, transform .08s ease;
}
.links a::before{
  content: "← ";
}
@media (hover: hover){
  .links a:hover{
    background: var(--accent);
    color: var(--on-accent);
  }
}
.links a:active{
  transform: translateY(2px);
}


/* --------------------------------------------------------------------------
   6. 操作まわりの最低限
   -------------------------------------------------------------------------- */
a:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; }
}