@charset "utf-8";
/* ==============================================
   明和住宅 街の情報（駅別タウン情報）専用CSS（station.css）
   第1版 2026-09-17 ST3（335回目・社長ご指示「station 内の駅別タウンインフォメーション27ページを、
     ヘッダー・フッター・ページの幅とデザインを会社概要 company/index.html と同じにして、
     ファイル名はそのままで今時のHTMLに作り直し。画像はあとでほとんど差し替えるので、
     とりあえず今の写真を拡大して表示」）
   ★使っているページ＝/station/ の街の情報27ページ（HF.html・Fuchu.html ほか）。
     直したら代表のページ（HF・bubaigawara・nakagawara・Chofu）で見た目を確かめる
   ----------------------------------------------
   読み込み順（厳守・各ページの head）:
   /css/jquery.bxslider.min.css → /css/meiwa-colors.css →
   /css/category1.css → /css/profile.css → /css/station.css（必ず最後）
   ・土台は会社概要と同じ category1.css（横幅・フッターの見え方＝標準5-2 第26章で
     基準ページ alldata.html と一致済み）＋ profile.css 第1章（ヘッダースライダー）。
     このファイルは「街の情報だけの部品」を足すだけ。
   ・見出し帯は category1.css 第6章の橙の帯（.box-03 h2＝#FF610D・白の太字20px以上で3.0:1）を
     そのまま使う（旧ページの橙の帯と同じ色味・標準6のタウンガイドの色）。
   ・フッター（.backline～#pageTop）の指定はここに書かない（標準5-2＝抜粋移植の禁止）。
   ----------------------------------------------
   記号:【G】Google基準【W】WCAG【社】当社ルール
   守る数値（下げる変更は不可）: 文字16px以上／PC本文20px／
   行間1.5以上／見出し20px以上／タップ48px以上・隣と8px以上／
   コントラスト 通常文字4.5:1・太字19px以上3:1
   ============================================== */
/* ================================
   1. h1 の下の1行の文節（company.css 第6章と同じ）
   ================================
   「‐府中市の賃貸･売買不動産専門店 株式会社明和住宅‐」を空白の所だけで折り返す（標準43） */
#header p .hw { display: inline-block; }
/* ================================
   2. 章のかたまり（section.town-sec）
   ================================ */
.town-sec { clear: both; margin: 0 0 12px; }
/* ================================
   3. トピックス（.town-topics）＝駅の写真＋紹介文＋時刻表・バス・駐輪場・地図のリンク
   ================================
   スマホ（767px以下）＝写真を本文の幅いっぱいに置き、その下に紹介文とリンク。
   PC・タブレット（768px以上）＝左に写真（46%）・右に紹介文とリンクの2列。
   写真の縦横比は img の width/height 属性で先に確保＝読み込み中にずれない【G】CLS */
.town-topics {
  max-width: 720px;
  margin: 6px auto;
  padding: 0 8px;
}
.town-topics figure.town-main { margin: 8px 0 4px; }
.town-topics figure.town-main img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}
.town-topics figcaption {
  margin: 2px 0 0;
  font-size: 16px;               /* 【G】16px下限 */
  line-height: 1.4;
  text-align: center;
}
.town-topics .tt-body p { margin: 6px 0; }
@media (min-width: 768px) {
  .town-topics {
    max-width: 800px;
    font-size: 20px;             /* PC本文20px【社】 */
    display: grid;
    grid-template-columns: 46% minmax(0, 1fr);
    column-gap: 20px;
    align-items: start;
  }
  .town-topics figure.town-main { margin: 8px 0; }
  .town-topics figcaption { font-size: 18px; }
}
/* ================================
   4. 施設の一覧（dl.town-list）＝施設の名前（dt）＋所在地（dd）
   ================================
   スマホ（767px以下）＝名前の後ろに所在地を続け、入り切らないときは所在地を丸ごと次の行へ
   （行の数を減らす＝社長の「項目名＋半角スペース＋本文」のお好みと同じ考え方）。
   PC・タブレット（768px以上）＝名前と所在地の2列。
   行の高さは48px以上＝名前が地図などのリンクの行（タップ48px【G】）とそろえる。
   行の下線は情報を持たない装飾（#B87A00の点線＝会社概要の表と同じ）。
   所在地の文字は gray #4D4D4D（クリーム地 7.7:1） */
dl.town-list {
  max-width: 720px;
  margin: 6px auto;
  padding: 0 8px;
}
dl.town-list > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: .5em;
  min-height: 48px;              /* 【G】タップ48px（リンクの行とそろえる） */
  padding: 2px 0;
  border-bottom: 1px dotted #B87A00;
}
dl.town-list dt {
  margin: 0;
  font-weight: normal;
}
dl.town-list dd {
  margin: 0;
  color: #4D4D4D;                /* gray 7.7:1 */
}
/* 名前のリンク（Googleマップ・当社の学校のページ等）は文字の左端を他の行の名前とそろえ、
   上下の余白で押し領域48px【G】を取る（16px×1.75＝28px＋上下10px） */
dl.town-list dt a {
  display: inline-block;
  min-height: 48px;
  padding: 10px 0;
}
@media (min-width: 768px) {
  dl.town-list {
    max-width: 800px;
    font-size: 20px;             /* PC本文20px【社】 */
  }
  dl.town-list > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 15em;   /* 所在地は最長「小金井市貫井南町３－２１－３」が1行に入る幅 */
    column-gap: 16px;
    min-height: 49px;
  }
  dl.town-list dt a { padding: 7px 0; }            /* 20px×1.75＝35px＋上下7px＝49px */
}
/* ================================
   5. 写真（.town-photos）＝4:3 の枠に入れて並べる
   ================================
   幅599px以下＝2列／600px以上＝3列（PCはページの幅いっぱい＝1枚約317px）。
   枠の高さは padding-top:75%（4:3）で先に確保＝読み込み中にずれない【G】CLS
   （標準18＝aspect-ratio は使わない）。4:3 に近い写真は枠いっぱい（cover）、
   縦長・横長の写真（img.fit-contain）は切らずに全体を表示（余白は白）。
   写真の名前は下に16px（PC18px）で書く（画像の alt と同じ文字＝figcaption は読み上げない）。
   ★差し替える写真は横1000×縦750ピクセル（4:3）が基準（レポートの手引き） */
.town-photos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 8px;
  margin: 10px 0 8px;
  padding: 0 4px;
}
.town-photos figure { margin: 0; }
.town-photos .ph {
  position: relative;
  padding-top: 75%;              /* 4:3 の枠 */
  overflow: hidden;
  border-radius: 8px;
  background: #FFFFFF;
}
.town-photos .ph img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
.town-photos .ph img.fit-contain { object-fit: contain; }
.town-photos figcaption {
  margin: 3px 0 0;
  font-size: 16px;               /* 【G】16px下限 */
  line-height: 1.4;
  text-align: center;
}
@media (min-width: 600px) {
  .town-photos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .town-photos { gap: 14px 12px; padding: 0 8px; }
  .town-photos figcaption { font-size: 18px; }
}
/* ================================================
   微調整のあとの再確認メモ
   □ 文字16px未満・見出し20px未満になっていないか
   □ タップ高さ48px未満・リンク同士の間隔8px未満がないか
   □ 写真の枠（padding-top:75%）と img の width/height 属性（CLS対策）を消していないか
   □ フッターの指定をこのファイルに足していないか（標準5-2）
   □ 幅320～428px（標準43）と 768・1280px で27ページの代表を実測したか
   ================================================ */