@charset "UTF-8";
/* =========================================================
   WABIAN — 画像・地図・レイアウト補助（担当A：テクニカルSEO）
   ※ assets/style.css には手を入れず、このファイルに追記する
   ========================================================= */

/* ---------- figure / picture（CLS対策：aspect-ratio を必ず固定） ---------- */
.fig{
  margin:0 0 1.8em;
  background:var(--kinari-2,#ebe4d5);
  border:1px solid var(--usuzumi,#d6cdbb);
}
.fig picture{display:block}
.fig img{
  width:100%;height:auto;display:block;
  aspect-ratio:var(--fig-ar,1200/630);
  object-fit:cover;
  /* 実画像が未設置でも背景が入るためレイアウトが崩れない */
  background:var(--kinari-2,#ebe4d5) url("/assets/img/placeholder.svg") center/cover no-repeat;
}
.fig figcaption{
  font-family:var(--gothic,sans-serif);
  font-size:13px;line-height:1.7;color:var(--sumi-3,#6b635a);
  padding:10px 14px;border-top:1px solid var(--usuzumi,#d6cdbb);
  background:var(--washi,#fbf8f1);margin:0;
}
.fig--fv{margin-bottom:2.2em}
@media(max-width:768px){
  .fig figcaption{font-size:12.5px;padding:9px 12px}
}

/* ---------- Googleマップ埋め込み（CLS対策） ---------- */
.map-embed{
  position:relative;
  aspect-ratio:16/9;
  background:var(--kinari-2,#ebe4d5);
  border:1px solid var(--usuzumi,#d6cdbb);
  margin:0 0 1em;
}
.map-embed iframe{
  position:absolute;inset:0;
  width:100%;height:100%;border:0;display:block;
}
@media(max-width:600px){.map-embed{aspect-ratio:4/3}}
.map-note{
  font-family:var(--gothic,sans-serif);font-size:13px;
  color:var(--sumi-3,#6b635a);margin:0 0 1.8em;
}

/* ---------- フッターナビ見出し ---------- */
/* 見出しアウトラインを汚さないため <h2> ではなく <p> + nav[aria-labelledby] にした。
   style.css の .fnav h2 と同等の見た目をここで再現する（style.css は編集しない）。 */
.fnav__ttl{
  font-size:12.5px;letter-spacing:.18em;color:var(--kincha,#a8874e);
  margin:0 0 12px;font-weight:600;line-height:1.6;
}
.fnav__col{min-width:0}

/* ---------- 記事ラッパ ---------- */
.post{display:block}

/* ---------- フォーカス可視化（WCAG 2.2 / マニュアル 22） ---------- */
:focus-visible{outline:2px solid var(--shu,#8c2f24);outline-offset:2px}