@charset "UTF-8";
/* =======================================================================
   施設案内ページ専用 CSS（sisetu.html）
   共通：../css_acce/com_acce.css, com_item.css, com_layout.css
   配色はすべて共通CSSのカスタムプロパティ（var(--forest) 等）を参照するので、
   ヘッダーの「背景色（標準／黒／黄）」切替にもそのまま追従します。
   このCSSで固定色（#xxxxxx）は使っていません。
   クラス名はすべて sisetu- で始めて、他ページと衝突しないようにしています。
   ======================================================================= */

/* ---------- 本文へスキップ（キーボード・スクリーンリーダー向け） ---------- */
.sisetu-skip {
  position: absolute;
  left: 8px;
  top: -100px;
  z-index: 1000;
  padding: 10px 16px;
  background: var(--forest);
  color: var(--forest-contrast);
  border-radius: var(--radius-s);
  font-size: 0.9rem;
  text-decoration: none;
}
.sisetu-skip:focus {
  top: 8px;
}

/* ---------- フォーカスの見える化 ---------- */
.sisetu a:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

/* ---------- ページ全体 ---------- */
.sisetu {
  line-height: 1.8;
  font-size: 1rem;
  padding-bottom: 80px;
}
.sisetu .page-head {
  margin-bottom: 40px;
}
.sisetu .page-head .lead {
  line-height: 1.7;
}

/* ---------- セクション見出し（h2） ---------- */
.sisetu-section {
  margin-bottom: 64px;
}
.sisetu-section__title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1rem + 0.8vw, 1.45rem);
  line-height: 1.4;
  color: var(--forest);
}
.sisetu-section__title::before {
  content: "";
  flex: none;
  width: 6px;
  height: 1.4em;
  border-radius: 3px;
  background: var(--sage-deep);
}
.sisetu-section__lead {
  margin: 0 0 24px 18px;
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.7;
}

/* ---------- 案内図 ---------- */
.sisetu-map {
  margin: 0 0 32px;
  padding: 16px;
  background: var(--paper-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-m);
  text-align: center;
}
.sisetu-map img {
  display: inline-block;
  max-width: 100%;
  height: auto;
}
.sisetu-map figcaption {
  margin-top: 10px;
  color: var(--ink-soft);
  font-size: 0.9rem;
  line-height: 1.6;
}

/* ---------- 施設カード（4列 → 2列 → 1列／画像は常に上、文字は下） ---------- */
.sisetu-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.sisetu-card {
  display: flex;
  flex-direction: column;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.sisetu-card__img {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.sisetu-card__img img {
  width: 100%;
  height: auto;
}
.sisetu-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 14px 16px 18px;
}
.sisetu-card__name {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.45;
  color: var(--forest);
}
.sisetu-card__text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--ink);
}

/* ---------- 参考資料（緑のホール） ---------- */
.sisetu-doc {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--line-strong);
}
.sisetu-doc__title {
  margin: 0 0 6px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ink-soft);
}
.sisetu-doc ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.sisetu-doc li + li {
  margin-top: 6px;
}
.sisetu-doc a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 10px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--forest);
  text-decoration: none;
  border: 1px solid var(--forest);
  border-radius: var(--radius-s);
  background: var(--paper-2);
}
.sisetu-doc a:hover {
  background: var(--forest);
  color: var(--forest-contrast);
}

/* ---------- 関連情報（旧：右サイドメニュー） ---------- */
.sisetu-related {
  padding-top: 24px;
  border-top: 1px solid var(--line-strong);
}
.sisetu-related__title {
  margin: 0 0 14px;
  font-size: 1.05rem;
  color: var(--forest);
}
.sisetu-related ul {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sisetu-related a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  font-size: 0.95rem;
  color: var(--ink);
  text-decoration: none;
  background: var(--paper-2);
  border: 1px solid var(--forest);
  border-radius: 999px;
}
.sisetu-related a:hover {
  background: var(--forest);
  color: var(--forest-contrast);
}
.sisetu-related a[aria-current="page"] {
  background: var(--forest);
  color: var(--forest-contrast);
  font-weight: 700;
}

/* ---------- 画面サイズ別 ---------- */
@media (max-width: 1023px) {
  .sisetu-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 749px) {
  .sisetu .page-head {
    margin-bottom: 28px;
  }
  .sisetu-section {
    margin-bottom: 48px;
  }
  .sisetu-section__lead {
    margin-left: 0;
  }
  .sisetu-map {
    padding: 10px;
  }
}
/* 画像だけが小さくなりすぎないよう、ごく狭い画面では1列にする */
@media (max-width: 419px) {
  .sisetu-cards {
    grid-template-columns: 1fr;
  }
}