@charset "UTF-8";

/* =========================
   基本
========================= */

html, body {
  height: 100%;
}

body {
  margin: 0;
  background: #c1ffc1;
}

a[target="_blank"]::after {
  content: "↗";
  margin-left: 0.2em;
}

/* =========================
   汎用要素
========================= */

img {
  max-width: 100%;
  height: auto;
  margin: 0 1em 1em 0;
  float: left;
  
}

/* テキスト内アイコン */
img.text-icon {
  display: inline-block;
  vertical-align: middle;
  margin: 0 0.2em 0 0;
  width: 20px;
}

/* =========================
   ポップアップ（hover preview）
========================= */

.popup {
  position: relative;
  display: inline-block;
}

.popup:hover .preview,
.popup:focus-within .preview {
  display: block;
}

.preview {
  display: none;
  position: fixed;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  background: #fff;
  border: 1px solid #888;
  z-index: 1000;
  padding: 6px;
}

.preview img {
  display: block;
  max-width: 90vw;
  max-height: 90vh;
}

/* =========================
   hover 画像
========================= */

.img[data-hover] {
    cursor: default;
  max-width: 100%;
  box-sizing: border-box;
  border: 2px solid #ff0000;
}

.img[data-hover]:hover + .preview,
.img[data-hover]:focus + .preview {
  display: block;
}

/* =========================
   item（float 包含）
========================= */

.item {
  display: flow-root;
  margin: 0 1em 1em 0;
}

/* =========================
   レイアウト共通
========================= */

.intro {
  display: flex;
  gap: 1em;
  align-items: flex-start;
  background: lightgoldenrodyellow;
  border: 1px solid #f0e68c;
  padding: 8px;
  margin: 2px;
  box-sizing: border-box;
}

.intro-map {
  max-width: 100%;
  flex-shrink: 0;
}

.intro-text {
  flex: 1;
}

#main {
  padding: 20px;
}

#map {
  position: relative; /* ← ::after のため */
}

#map iframe {
  width: 100%;
  height: 100%;
  display: block;
}

/* =========================
   スマホ（max-width:700px）
========================= */

@media (max-width:700px) {

  :root {
    --toggle-h: 32px;
    --map-normal: 30vh;
    --map-full: 75vh;
  }

  #map-sticky {
  position: sticky;
  top: 0;
  z-index: 3000;
}

  #map-wrapper {
    position: sticky;
    top: 0;
    z-index: 2900;
  }

  /* ★ 高さは map だけが持つ */
  #map {
    height: var(--map-normal);
    transition: height 0.6s ease;
  }

  #map-wrapper.full #map {
    height: var(--map-full);
  }

  #map iframe {
    width: 100%;
    height: 100%;
    display: block;
  }

#map-toggle {
    height: var(--toggle-h);
  line-height: var(--toggle-h);
  background: #eee;
  border-bottom: 1px solid #888;
  text-align: center;
  font-size: 12px;
  cursor: pointer;
}

  .intro,
  .headline {
    position: relative;
    z-index: 1200;
  }

  .intro-map {
    width: 100vw;
    height: auto;
  }

  .hover-img {
    float: none;
    display: block;
    margin: 0 auto 1em;
  }

  #content {
    display: flex;
    flex-direction: column;
  }


  #main {
    padding: 10px;
  }

  /* map 下の区切り線 */
  #map::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: #888;
  }
}

/* =========================
   PC（min-width:701px）
========================= */

@media (min-width:701px) {

  #map {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 300px;
    border-right: 1px solid #888;
    z-index: 100;
  }

  #content {
    margin-left: 300px;
  }

   #map-toggle {
    display: none;
  }
}

/* =========================
   PC 超横長
========================= */

@media (min-width:1200px) {

  #map {
    width: 450px;
  }

  #content {
    margin-left: 450px;
  }
}

/* =========================
   オーバーレイ
========================= */

#overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.7);
  z-index: 9999;
}

#overlay img {
  max-width: 90vw;
  max-height: 90vh;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* =========================
   アクセシビリティ
========================= */

.popup:focus {
  outline: 2px solid #00f;
}

@media (hover: hover) {
  .hover-img[data-hover]:hover + .preview {
    display: block;
  }
}
/* =========================================================
   レイアウト構造ツリー（CSS / HTML 対応）
   ※ スマホ表示（max-width:700px）を主眼
   =========================================================

<body>
├─ #map-toggle
│   └─ 地図の拡大 / 縮小トグル
│      - position: sticky
│      - top: 0
│      - z-index: 最前面
│
├─ #map-wrapper
│   ├─（sticky コンテナ）
│   │   - position: sticky
│   │   - top: 0
│   │   - スクロール時の吸着基準
│   │
│   └─ #map
│       ├─（高さ制御の本体）
│       │   - height: var(--map-normal)
│       │   - .full 時: height: var(--map-full)
│       │   - transition: height
│       │
│       └─ iframe（Google Map）
│           - width: 100%
│           - height: 100%
│           - map UI は iframe 内部に依存
│
├─ #content
│   ├─ .intro
│   │   ├─ .intro-map
│   │   └─ .intro-text
│   │
│   ├─ .headline
│   │
│   └─ #main
│       └─ 本文コンテンツ
│
└─ その他要素
    ├─ .hover-img
    ├─ .popup / .preview
    └─ #overlay（画像拡大表示）

----------------------------------------------------------
状態管理（JS ⇔ CSS 連携）
----------------------------------------------------------
- #map-wrapper.full
    → 地図拡大状態
    → #map の height が --map-full になる

----------------------------------------------------------
設計方針メモ
----------------------------------------------------------
- sticky は wrapper が担当（map 自身は高さのみ）
- toggle は map とは完全に独立
- JS は class の付け外しのみ
- 高さ計算・再描画・iframe 操作は行わない
========================================================= */