*,*::before,*::after{box-sizing:border-box}
*{margin:0}
:root{
  --ink:#153b37;--ink-2:#31534f;--paper:#f5f2eb;--white:#fffdfa;
  --navy:#1d2d5c;
  --sage:#9bb59a;--sage-soft:#dfe9dd;--coral:#c66347;--coral-dark:#98442e;
  --gold:#d9a748;--line:#d9d6cc;--muted:#6b7773;
  --shadow:0 14px 40px rgba(25,57,52,.10);--radius:22px;
  --font:"Yu Gothic UI","Hiragino Kaku Gothic ProN","BIZ UDPGothic",Meiryo,sans-serif;
}
html,body{background:var(--paper)}
body{min-width:320px;color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.6;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
button{font:inherit}
button:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

/* ===== ヒーロー（全画面 → 自動フェードアウト） ===== */
.hero-overlay{position:fixed;inset:0;z-index:200;display:grid;place-items:center;text-align:center;padding:28px;color:#fff;background:url("../images/hero-family-history-collage-v2.webp") center/cover no-repeat;transition:opacity .9s ease}
.hero-overlay::after{content:"";position:absolute;inset:0;background:rgba(16,47,44,.46)}
.hero-overlay__inner{position:relative;z-index:1;animation:heroIn 1.1s ease both;transition:opacity .8s ease}
.hero-overlay--text-out .hero-overlay__inner{opacity:0}
.hero-overlay--hidden{opacity:0;pointer-events:none}
@keyframes heroIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.eyebrow{font-size:15px;font-weight:900;letter-spacing:.14em;color:#cfe0cd;margin-bottom:12px}
.hero-overlay h1{font-size:clamp(36px,10vw,58px);line-height:1.32;letter-spacing:.03em;font-weight:800}
.hero-overlay h1 em{font-style:normal;color:#f0c86b}

/* ===== 全体レイアウト（上半分マップ・下半分ブース紹介／ページスクロールなし） ===== */
/* ページ全体をスクロール可能にし（iOSのアドレスバーが縮む）、マップはstickyで上部に固定 */
.app-layout{min-height:100vh;min-height:100svh;display:flex;flex-direction:column}
.map-half{position:sticky;top:0;z-index:30;background:var(--paper);flex:0 0 auto;display:flex;flex-direction:column;padding:0 0 4px}
/* 下余白は大きめ：スクロール量を確保してiOSのアドレスバーが縮みやすくする */
.booths-half{flex:1 1 auto;padding-bottom:calc(130px + env(safe-area-inset-bottom))}

/* ===== マップ ===== */
.map-head{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--ink);color:#fff;padding:9px 14px}
.map-head h2{font-size:19px;letter-spacing:.03em}
.map-hint{font-size:17px;font-weight:700;color:#fff;white-space:nowrap;letter-spacing:.02em}
.map-stage{position:relative}
.map-scroll-wrap{width:100%;aspect-ratio:1040/770;overflow:hidden;touch-action:none;background:#faf9f5;border-bottom:1px solid #ddd9cc}
@media(orientation:landscape){.map-scroll-wrap{width:auto;max-width:100%;height:40dvh;margin:0 auto}}
#mapZoomLayer{width:100%;height:100%;transform-origin:0 0}
#mapSvgMain{width:100%;height:100%;display:block}
/* タップ可能な部屋には影で立体感（設備はフラットのまま＝押せない見た目） */
.map-group{cursor:pointer;pointer-events:all;transition:transform .35s ease;filter:drop-shadow(0 4px 3px rgba(0,0,0,.28))}
.map-group .map-room-rect{pointer-events:all}
.map-room-rect{transition:filter .18s,stroke-width .18s}
.map-group:active .map-room-rect{filter:brightness(1.05)}
.map-group--enlarged .map-room-rect{filter:drop-shadow(0 8px 16px rgba(0,0,0,.35))}
/* カレント（いま見ている紹介の場所）は黄色＋細い緑枠で強調 */
/* vector-effectにより画面上で常に1px（ピンチ拡大しても太らない） */
.map-group--current .map-room-rect{fill:#ffe084;stroke:var(--ink);stroke-width:1px;vector-effect:non-scaling-stroke}

/* ===== ブース紹介（下半分いっぱいに表示） ===== */
.booths-half .swiper{height:auto;padding:6px 0 12px}
/* PCなど広い画面ではカードが横に伸びすぎないよう幅を制限 */
@media(min-width:700px){
  .booths-half .swiper{max-width:620px;margin:0 auto}
  /* 横長トリミングになる分、講演会の写真は上寄りを見せる（頭が切れないように） */
  [data-booth="lecture"] .booth-card__img{object-position:center 20%}
}
.booths-swiper-map .swiper-slide{height:auto;display:flex}
.booths-swiper-map .swiper-slide:focus{outline:none}
.booth-card{width:100%;display:flex;flex-direction:column;border-radius:var(--radius);overflow:hidden;background:var(--white);box-shadow:0 10px 20px -6px rgba(25,57,52,.18);border:1px solid var(--line)}
.booth-card__top{flex:0 0 auto;height:140px;position:relative;overflow:hidden;background:#e9e6dd;display:flex;align-items:center;justify-content:center}
.booth-card__top--puzzle{background:linear-gradient(135deg,#3f6b52,#5a8b72)}
.booth-card__top--lecture{background:linear-gradient(135deg,#b57e22,#d99b43)}
.booth-card__ph{position:relative;z-index:1;font-size:56px;line-height:1;filter:drop-shadow(0 3px 6px rgba(0,0,0,.3))}
.booth-card__slide{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center 18%;opacity:0;transition:opacity .55s ease-in-out;z-index:1}
.booth-card__bg{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;transform:scale(1.06);z-index:0}
.booth-card__img{width:100%;height:100%;object-fit:cover;display:block;position:absolute;top:0;left:0;z-index:1}
.booth-card__title{position:absolute;z-index:3;bottom:10px;left:0;max-width:100%;padding:5px 16px 5px 14px;background:rgba(255,253,250,.78);color:var(--ink);font-size:22px;font-weight:800;line-height:1.35;box-shadow:0 2px 10px rgba(0,0,0,.18)}
/* 丸数字の下に文字が来ないよう、2行目以降を数字1文字分インデント */
.booth-card__title--num{padding-left:calc(14px + 1em);text-indent:-1em}
.booth-card__body{flex:0 1 auto;min-height:0;overflow-y:auto;padding:12px 18px 14px;-webkit-overflow-scrolling:touch}
.booth-card__body p{font-size:18.5px;color:#111;line-height:1.55}

/* ナビ矢印（丸背景なし・カード外側の余白部分に配置） */
/* 写真(140px)のすぐ下＝説明文エリアの上部に配置 */
.booths-swiper-map .swiper-button-prev,.booths-swiper-map .swiper-button-next{width:30px;height:48px;background:none;border:none;box-shadow:none;color:var(--ink);top:152px;bottom:auto;margin-top:0}
.booths-swiper-map .swiper-button-prev{left:0}
.booths-swiper-map .swiper-button-next{right:0}
.booths-swiper-map .swiper-button-prev::after,.booths-swiper-map .swiper-button-next::after{font-size:26px;font-weight:800;text-shadow:0 0 6px rgba(255,255,255,.9),0 0 2px rgba(255,255,255,.9)}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}