@charset "UTF-8";

/* ==========================================================================
   kyouai-wide.css ／ 別デザイン案・PC版（ウインドウ幅 481px 以上）
   担当は幅・段組み・文字の大きさだけ。色は書かないこと。
   ========================================================================== */

body{
  font-size: 17px;            /* 現状維持版より1px大きく。読み物寄りの設定 */
  min-width: var(--page-width);   /* 【重要】狭いときに版面が切れず横スクロールになる */
  padding: 56px 0 72px;
}

.page{
  width: var(--page-width);   /* ←PC版の版面幅（800px・固定） */
  padding: 0 45px 64px;
  box-sizing: border-box;     /* 【重要】余白を800pxの内側に含める */
}


/* --- 見出し ------------------------------------------------------------- */
.head{
  max-width: var(--content-width);
  padding-left: 20px;         /* 左の縦線と文字の間隔 */
  margin-bottom: 44px;        /* 見出しと最初の写真の間 */
}
.operator{
  padding: 3px 14px;
  font-size: 14px;
  letter-spacing: .12em;
  line-height: 1.6;
}
.route{
  margin-top: 10px;
  font-size: 38px;            /* 元は26px。今風版では主役として大きく */
  letter-spacing: .02em;
  line-height: 1.2;
}
.status{
  margin-left: 12px;       /* 路線名との間隔 */
  padding: 2px 9px;
  font-size: 13px;
  line-height: 1.5;
}
.via{
  margin-top: 10px;
  font-size: 15px;         /* 経由地。1ポイント大きくしています */
  letter-spacing: .06em;
  line-height: 1.7;
}


/* --- 写真 ----------------------------------------------------------------
   .figure（写真とキャプションのまとまり）は710px幅のまま。
   そのなかで、写真だけを570pxにしてページ中央に置き、
   キャプションは右端に寄せます。罫線は710px幅で引かれます。

     |←────────── 710px ──────────→|
     |        ┌──── 570px ────┐        |   ← 写真は中央
     |        │     写真      │        |
     |        └───────────────┘        |
     |─────────────────────────────────|   ← 罫線は710px
     |                    2012/02/24 …|   ← キャプションは右端

   写真の幅を変えるときは kyouai-base.css の :root にある --photo-width を。
   ------------------------------------------------------------------------ */
.figure{
  max-width: var(--content-width);
  margin-bottom: 40px;        /* 写真どうしの間隔。広めに取って1枚ずつ見せる */
}
.figure img{
  max-width: var(--photo-width);   /* ←PC版の写真幅（固定） */
  margin: 0 auto;                  /* ←ページ中央に置く */
}
.caption{
  margin-top: 10px;
  padding-top: 8px;
  font-size: 13px;
  text-align: right;               /* ←右端に寄せる */
}


/* --- 紹介文 ------------------------------------------------------------- */
.lead{
  max-width: 620px;           /* 1行が長すぎると読みにくいので本文より絞る */
  margin-bottom: 56px;
  font-size: 16px;
}


/* --- 注記 --------------------------------------------------------------- */
.notice{
  max-width: var(--content-width);
  padding: 4px 0 4px 16px;
  margin-bottom: 40px;
  font-size: 14.5px;
}


/* --- ページ下部 --------------------------------------------------------- */
.foot{
  max-width: var(--content-width);
  padding-top: 28px;
}
.meta{
  font-size: 14px;
}
.links{
  margin-top: 18px;
}
.links a{
  margin: 6px 10px 6px 0;
  padding: .5em 1.5em;
  font-size: 15px;
}