@charset "utf-8";
/* ==============================================
   明和住宅 暮らしのガイド（地域情報・学区情報・住まい・暮らしのリンク集）専用CSS（guide.css）
   第1版 2026-09-17 CH2・GK2・LK2（337回目・社長ご指示「chiiki 内の10ファイル・top-linkfile 内の27ファイル・
     L-land 内の56ファイルを、ヘッダーやフッター・ページの幅とデザインを会社概要 company/index.html にして、
     ファイル名はそのままで上書きして今時のHTMLファイルに作り直し。画像はとりあえず今の写真を拡大して表示」）
   ★使っているページ＝/chiiki/ 10・/top-linkfile/ 26・/L-land/ 56 の92ページ（台本 _backup/2026-09-17/337/scripts/build337.py）。
     直したら代表のページ（chiiki/F-KyukyuByouin・top-linkfile/f-school・top-linkfile/high-school/fuchukoukou・
     L-land/Fudousan/TokyoSibu・L-land/index）で見た目を確かめる
   ----------------------------------------------
   読み込み順（厳守・各ページの head）:
   /css/jquery.bxslider.min.css → /css/meiwa-colors.css →
   /css/category1.css → /css/profile.css → /css/guide.css（必ず最後）
   ・土台は会社概要と同じ category1.css（横幅・フッターの見え方＝標準5-2 第26章で基準ページ alldata.html と一致済み）
     ＋ profile.css 第1章（ヘッダースライダー）・第3章と第9章（学校のページの表 dl.prof.flow-sp）。
     このファイルは「暮らしのガイドだけの部品」を足すだけ。
   ・見出し帯は category1.css 第6章をそのまま使う＝地域情報・学区情報は橙 .box-03 h2（#FF610D・タウンガイドの色＝標準6）、
     リンク集は緑 .box-01 h2（#00AB5D・その他のページの色）。白の太字20px以上で3.0:1。
   ・街の情報27ページの css/station.css とは別のファイル（あちらの直しがこちらに効かないように）。
     名前（.guide-*）もぶつからないように付けた。
   ・フッター（.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章・station.css 第1章と同じ）
   ================================
   「‐府中市の賃貸･売買不動産専門店 株式会社明和住宅‐」を空白の所だけで折り返す（標準43） */
#header p .hw { display: inline-block; }
/* h1 の末尾の（府中市栄町）（旧版）などは、スマホで「（府中市／栄町）」と途中で割れないように1かたまりに（標準43） */
#header h1 .h1-sub { display: inline-block; }
/* ================================
   2. 章のかたまり（section.guide-sec）と本文の幅
   ================================
   本文の幅はほかの段落（category1.css 第3章 p.al-l）と同じ＝スマホ720px・PC800px（PC本文20px） */
.guide-sec { clear: both; margin: 0 0 14px; }
.guide-box {
  max-width: 720px;
  margin: 6px auto;
  padding: 0 8px;
}
@media (min-width: 768px) {
  .guide-box {
    max-width: 800px;
    font-size: 20px;             /* PC本文20px【社】 */
  }
}
/* ================================
   3. ページの一覧（ul.guide-menu）＝リンク＋ひとこと説明
   ================================
   行頭マークは「#」（標準8）。リンクはタップ48px【G】（16px×1.75＝28px＋上下10px／PC 20px×1.75＝35px＋上下7px）。
   説明の文字は gray #4D4D4D（クリーム地7.7:1） */
ul.guide-menu {
  list-style: none;
  margin: 6px 0;
  padding: 0 0 0 1.3em;
}
ul.guide-menu li {
  position: relative;
  margin: 0 0 6px;
}
ul.guide-menu li::before {
  content: "#";
  position: absolute;
  left: -1.1em;
  top: 10px;                     /* 1行目（リンク）の文字の高さにそろえる */
  line-height: 1.75;
  color: #4D4D4D;
}
ul.guide-menu li > a,
ul.guide-menu li > .gm-now {
  display: inline-block;
  min-height: 48px;              /* 【G】タップ48px */
  padding: 10px 4px 10px 0;
}
ul.guide-menu li > .gm-now {     /* いま見ているページ（リンクにしない） */
  font-weight: bold;
  color: #4D4D4D;
}
ul.guide-menu .gm-desc {
  display: block;
  margin: -6px 0 0;              /* リンクの下の余白10pxのうち6pxを詰める（押し領域は変えない） */
  color: #4D4D4D;
}
@media (min-width: 768px) {
  ul.guide-menu li::before { top: 7px; }
  ul.guide-menu li > a,
  ul.guide-menu li > .gm-now { padding: 7px 4px 7px 0; }
  ul.guide-menu .gm-desc { margin-top: -4px; }
}
/* 説明の無い短い一覧（ほかのページへの案内）は、スマホは1行に1つ・PCは2段 */
ul.guide-menu.gm-compact { margin-bottom: 8px; }
@media (min-width: 768px) {
  ul.guide-menu.gm-compact {
    columns: 2;
    column-gap: 24px;
  }
  ul.guide-menu.gm-compact li { break-inside: avoid; }
}
/* ================================
   4. 施設などの一覧（dl.guide-list）＝名前（dt）＋所在地・電話など（dd）
   ================================
   スマホ（767px以下）＝名前の後ろに所在地などを続け、入り切らないときは丸ごと次の行へ（行の数を減らす）。
   PC・タブレット（768px以上）＝名前と所在地などの2列。
   行の高さは48px以上＝名前が地図などのリンクの行（タップ48px【G】）とそろえる。
   行の下線は情報を持たない装飾（#B87A00の点線＝会社概要の表と同じ）。所在地などの文字は gray #4D4D4D（7.7:1）。
   所在地・電話・補足は span（.gl-part）ごとに途中で割れない（標準43＝「042-366-／0119」のように割れない） */
dl.guide-list {
  max-width: 720px;
  margin: 6px auto;
  padding: 0 8px;
}
dl.guide-list > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: .6em;
  min-height: 48px;              /* 【G】タップ48px（リンクの行とそろえる） */
  padding: 2px 0;
  border-bottom: 1px dotted #B87A00;
}
dl.guide-list dt {
  margin: 0;
  font-weight: normal;
}
dl.guide-list dd {
  margin: 0;
  color: #4D4D4D;                /* gray 7.7:1 */
}
dl.guide-list dd .gl-part {
  display: inline-block;
  margin-right: .6em;
}
dl.guide-list dd .gl-part:last-child { margin-right: 0; }
dl.guide-list dd .gl-line {      /* 診療科・ひとことなど、所在地の次の行に置くもの */
  display: block;
}
/* 名前のリンク（Googleマップ・学校のページ等）は文字の左端を他の行の名前とそろえ、上下の余白で押し領域48px【G】 */
dl.guide-list dt a {
  display: inline-block;
  min-height: 48px;
  padding: 10px 0;
}
@media (min-width: 768px) {
  dl.guide-list {
    max-width: 800px;
    font-size: 20px;             /* PC本文20px【社】 */
  }
  dl.guide-list > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    column-gap: 16px;
    min-height: 49px;
  }
  dl.guide-list dt a { padding: 7px 0; }   /* 20px×1.75＝35px＋上下7px＝49px */
}
/* ================================
   5. 学区域（dl.zone-list）＝学校名（dt）＋通学区域の行（dd の ul.zone-lines）
   ================================
   通学区域の行は1行に1区域。行頭マークは「#」（標準8）。
   平成24年4月に変わった区域は赤の太字（strong.zone-new・#D70700＝category1.css .red と同じ 4.9:1）。
   色だけに頼らないよう太字にし、表の上に「赤の太字＝変更」の説明を置く【W】1.4.1 */
dl.zone-list {
  max-width: 720px;
  margin: 6px auto;
  padding: 0 8px;
}
dl.zone-list > div {
  padding: 6px 0 8px;
  border-bottom: 1px dotted #B87A00;
}
dl.zone-list dt {
  margin: 0 0 2px;
  font-weight: bold;
  color: #003399;                /* 紺 9.9:1（FAQ の質問と同じ） */
}
dl.zone-list dt .z-addr {
  font-weight: normal;
  color: #4D4D4D;
}
dl.zone-list dd { margin: 0; }
ul.zone-lines {
  list-style: none;
  margin: 0;
  padding: 0 0 0 1.3em;
}
ul.zone-lines li {
  position: relative;
  margin: 0 0 2px;
}
ul.zone-lines li::before {
  content: "#";
  position: absolute;
  left: -1.1em;
  color: #4D4D4D;
}
strong.zone-new {
  color: #D70700;                /* red 4.9:1 */
  font-weight: bold;
}
@media (min-width: 768px) {
  dl.zone-list {
    max-width: 800px;
    font-size: 20px;
  }
}
/* ================================
   6. ページ内の目次（nav.guide-jump）＝学校名などへ移動するリンクの並び
   ================================
   リンクは inline-block で折り返し。タップ48px【G】・隣との間8px【G】（右の余白＋区切りの「／」） */
nav.guide-jump {
  max-width: 720px;
  margin: 6px auto;
  padding: 0 8px;
}
nav.guide-jump ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  column-gap: 8px;
}
nav.guide-jump li { margin: 0; }
nav.guide-jump a {
  display: inline-block;
  min-height: 48px;
  padding: 10px 4px;
}
@media (min-width: 768px) {
  nav.guide-jump {
    max-width: 800px;
    font-size: 20px;
  }
  nav.guide-jump a { padding: 7px 4px; }
}
/* ================================
   7. 写真（.guide-photos）＝4:3 の枠に入れて並べる
   ================================
   幅599px以下＝1列（本文の幅いっぱい）／600px以上＝2列（PCは1枚約390px＝旧ページの369pxより大きく）。
   枠の高さは padding-top:75%（4:3）で先に確保＝読み込み中にずれない【G】CLS（標準18＝aspect-ratio は使わない）。
   4:3 に近い写真は枠いっぱい（cover）、縦長・横長の写真（img.fit-contain）は切らずに全体を表示（余白は白）。
   写真の名前は下に16px（PC18px）で書く（画像の alt と同じ文字＝figcaption は読み上げない）。
   ★差し替える写真は横1000×縦750ピクセル（4:3）が基準（レポートの手引き） */
.guide-photos {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px 10px;
  max-width: 720px;
  margin: 10px auto 8px;
  padding: 0 8px;
}
.guide-photos figure { margin: 0; }
.guide-photos .ph {
  position: relative;
  padding-top: 75%;              /* 4:3 の枠 */
  overflow: hidden;
  border-radius: 8px;
  background: #FFFFFF;
}
.guide-photos .ph img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
.guide-photos .ph img.fit-contain { object-fit: contain; }
.guide-photos figcaption {
  margin: 3px 0 0;
  font-size: 16px;               /* 【G】16px下限 */
  line-height: 1.4;
  text-align: center;
}
@media (min-width: 600px) {
  .guide-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .guide-photos {
    max-width: 800px;
    gap: 14px 16px;
  }
  .guide-photos figcaption { font-size: 18px; }
}
/* ================================
   8. リンク集の1件（.link-card）＝サイト名のリンク（h3）＋バナー＋紹介文
   ================================
   サイト名は外部サイトへのリンク（target="_blank" rel="noopener"・文字に「（外部サイト）」＝標準14）。
   バナーは相手先の画像（88×31 など）＝拡大すると文字がつぶれるため元の大きさで表示し、紹介文の左に置く。 */
.link-card {
  max-width: 720px;
  margin: 8px auto 10px;
  padding: 0 8px 8px;
  border-bottom: 1px dotted #B87A00;
}
.link-card h3 {
  margin: 0;
  font-size: 18px;
  line-height: 1.5;
  font-weight: bold;
}
.link-card h3 a {
  display: inline-block;
  min-height: 48px;              /* 【G】タップ48px */
  padding: 10px 0;
}
.link-card p { margin: 0; }
.link-card .lc-banner {
  float: left;
  margin: 4px 10px 4px 0;
  max-width: none;
}
.link-card::after {              /* バナーの回り込み解除 */
  content: "";
  display: block;
  clear: both;
}
@media (min-width: 768px) {
  .link-card {
    max-width: 800px;
    font-size: 20px;
  }
  .link-card h3 { font-size: 21px; }
  .link-card h3 a { padding: 7px 0; }
}
/* ================================
   9. 都道府県の案内（dl.pref-nav）＝地方（dt）＋都道府県のリンク（dd）
   ================================
   都道府県名は短いのでリンクを横に並べる（inline-block・タップ48px【G】・隣との間8px【G】）。
   いま見ている都道府県は太字でリンクにしない（aria-current） */
dl.pref-nav {
  max-width: 720px;
  margin: 6px auto;
  padding: 0 8px;
}
dl.pref-nav > div {
  padding: 2px 0;
  border-bottom: 1px dotted #B87A00;
}
dl.pref-nav dt {
  margin: 4px 0 0;
  font-weight: bold;
  color: #007B43;                /* green 4.9:1（会社概要の表の項目名と同じ） */
}
dl.pref-nav dd {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  column-gap: 8px;
}
dl.pref-nav dd a,
dl.pref-nav dd .pn-now {
  display: inline-block;
  min-height: 48px;
  padding: 10px 6px;
}
dl.pref-nav dd .pn-now {
  font-weight: bold;
  color: #4D4D4D;
}
@media (min-width: 768px) {
  dl.pref-nav {
    max-width: 800px;
    font-size: 20px;
  }
  dl.pref-nav > div {
    display: grid;
    grid-template-columns: 7.5em minmax(0, 1fr);
    column-gap: 12px;
    align-items: start;
  }
  dl.pref-nav dt { margin: 7px 0 0; }
  dl.pref-nav dd a,
  dl.pref-nav dd .pn-now { padding: 7px 6px; }
}
/* ================================
   10. 当サイトへのリンクの見本（dl.link-us）と、バナーの見本
   ================================ */
dl.link-us {
  max-width: 720px;
  margin: 6px auto;
  padding: 0 8px;
}
dl.link-us dt {
  margin: 8px 0 0;
  font-weight: bold;
  color: #007B43;
}
dl.link-us dd {
  margin: 0;
  overflow-wrap: anywhere;       /* URL の折り返し */
}
dl.link-us dd img { vertical-align: middle; margin-right: 8px; }
@media (min-width: 768px) {
  dl.link-us {
    max-width: 800px;
    font-size: 20px;
  }
}
/* ================================================
   微調整のあとの再確認メモ
   □ 文字16px未満・見出し20px未満になっていないか
   □ タップ高さ48px未満・リンク同士の間隔8px未満がないか
   □ 写真の枠（padding-top:75%）と img の width/height 属性（CLS対策）を消していないか
   □ フッターの指定をこのファイルに足していないか（標準5-2）
   □ 幅320～428px（標準43）と 768・1280px で代表のページを実測したか
   ================================================ */