/* =====================================================================
   shared/spot-detail.css
   スポットの詳細表示（2026-09-29新設・白基調デザイン）
   - スポットページ（/<エリア>/spot/*.html、scripts/export/spot_page_v2.py が出力）
   - 地図ページの詳細モーダル（city_*.html、shared/spot-detail.js が描画。幅900px）
   の両方がこのファイルを読み込み、同じ見た目にする。
   クラス名は既存の city_*.html のCSSと衝突しないよう、すべて sd- で始める。
   方針（Koba氏）：白基調、影・色面・枠などの装飾をなくし、細い線と余白で区切る。
   画像の角丸は残す。紺は強調の1色、さらに目立たせたいものはオレンジ。
   詳細：claude/機能検討_スポットページ_詳細モーダル_デザイン刷新_20260929.md
   ===================================================================== */
.sd-root {
  --sd-navy: #0f2044;
  --sd-orange: #d97757;
  --sd-orange-pale: #fbeee9;
  --sd-text: #1f1f1f;
  --sd-text-sub: #5f6368;
  --sd-line: #e6e6e6;
  --sd-line-strong: #dadce0;
  --sd-chip: #f1f3f4;
  --sd-hover: #f7f7f7;
  --sd-radius-img: 10px;
  font-family: 'Noto Sans JP', sans-serif;
  color: var(--sd-text);
  background: #fff;
  line-height: 1.7;
  text-align: left;
}
.sd-root *, .sd-root *::before, .sd-root *::after { box-sizing: border-box; }
.sd-root a { color: inherit; }
.sd-root button { font-family: inherit; }
.sd-root h1, .sd-root h2, .sd-root h3, .sd-root h4, .sd-root p, .sd-root dl, .sd-root dd, .sd-root ul { margin: 0; padding: 0; }

/* ---- ヘッダー ---- */
.sd-header { position: sticky; top: 0; z-index: 100; background: #fff; border-bottom: 1px solid var(--sd-line); }
.sd-header-inner { max-width: 960px; margin: 0 auto; height: 60px; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sd-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; min-width: 0; }
.sd-brand img { height: 36px; width: auto; display: block; }
.sd-brand span { font-size: 15px; font-weight: 700; color: #434343; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-map-btn { display: inline-flex; align-items: center; gap: 6px; background: var(--sd-navy); color: #fff !important; text-decoration: none; font-size: 13px; font-weight: 700; padding: 8px 16px; border-radius: 999px; white-space: nowrap; border: 0; cursor: pointer; flex-shrink: 0; }
.sd-map-btn svg { width: 16px; height: 16px; }
.sd-close { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--sd-chip); color: var(--sd-text); font-size: 20px; line-height: 1; cursor: pointer; flex-shrink: 0; }

/* ---- 本文の枠 ---- */
.sd-main { max-width: 960px; margin: 0 auto; padding: 16px 24px 48px; }
.sd-crumb { font-size: 12px; color: var(--sd-text-sub); margin-bottom: 14px; }
.sd-crumb a { text-decoration: none; }
.sd-crumb a:hover { text-decoration: underline; }
.sd-crumb .sep { margin: 0 6px; color: #b0b0b0; }

/* ---- モザイク（写真・動画） ----
   PC：1件＝1枚／2件＝大1＋右1＋写真募集／3件＝大1＋右に縦2／4件＝大1＋右上横長1＋右下2／
   5件以上＝大1＋右2×2（6件以上は5枠目に「+N」）。写真が無く動画だけなら、大きいプレーヤー＋右に写真募集。
   2026-09-30：5件以上は、大1＋右2×2の下に同じ大きさの枠を4列で足していく（最大40枠、それ以上は40枠目に「+N」）。
   最後の段の空いた枠は写真募集。
   スマホ：大1の下に正方形を3列（1〜4件は3つまで、5件以上は最大9つ。それ以上は9つ目に「+N」）。 */
.sd-mosaic { display: grid; gap: 6px; height: 420px; }
.sd-mosaic.s1 { grid-template-columns: 1fr; }
.sd-mosaic.s3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.sd-mosaic.s4 { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; }
.sd-mosaic.s5 { height: auto; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: 207px 207px; grid-auto-rows: 207px; }
.sd-mosaic.s5 > .sd-tile:first-child { grid-column: span 2; }
.sd-mosaic > .sd-tile.recruit.span-c1 { grid-column: span 1; }
.sd-mosaic > .sd-tile.recruit.span-c2 { grid-column: span 2; }
.sd-mosaic > .sd-tile.recruit.span-c3 { grid-column: span 3; }
.sd-mosaic > .sd-tile:first-child { grid-row: 1 / -1; }
.sd-mosaic.s4 > .sd-tile:nth-child(2) { grid-column: 2 / 4; }
.sd-mosaic > .sd-tile.span-rows { grid-row: 1 / -1; }
.sd-mosaic.video-lead { grid-template-columns: 3fr 1fr; height: auto; }
.sd-mosaic.video-lead > .sd-tile:first-child { aspect-ratio: 16 / 9; }
.sd-tile { position: relative; overflow: hidden; border-radius: var(--sd-radius-img); background: var(--sd-chip); min-width: 0; min-height: 0; cursor: pointer; display: block; }
.sd-tile:focus-visible { outline: 3px solid var(--sd-navy); outline-offset: 2px; }
.sd-tile > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.sd-tile:hover > img { transform: scale(1.03); }
.sd-tile.is-player { cursor: default; background: #000; }
.sd-tile.is-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.sd-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.sd-play i { width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,.92); display: flex; align-items: center; justify-content: center; }
.sd-play i::before { content: ''; margin-left: 4px; border-style: solid; border-width: 9px 0 9px 14px; border-color: transparent transparent transparent var(--sd-text); }
.sd-play.small i { width: 36px; height: 36px; }
.sd-play.small i::before { border-width: 7px 0 7px 11px; margin-left: 3px; }
.sd-dur { position: absolute; right: 8px; bottom: 8px; background: rgba(0,0,0,.7); color: #fff; font-size: 11px; line-height: 1; padding: 4px 6px; border-radius: 4px; pointer-events: none; }
.sd-more { position: absolute; inset: 0; background: rgba(0,0,0,.45); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 22px; font-weight: 700; line-height: 1.3; pointer-events: none; }
.sd-more small { font-size: 12px; font-weight: 500; }
.sd-more.m-only { display: none; }
.sd-credit { position: absolute; left: 8px; bottom: 8px; max-width: calc(100% - 16px); background: rgba(0,0,0,.55); color: #fff; font-size: 11px; line-height: 1.4; padding: 2px 8px; border-radius: 999px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
/* Instagramのクレジット：Instagramを想起させるグラデーション（2026-09-30、2026-09-10の見た目に戻した。Koba氏要望） */
.sd-insta, .sd-insta-pill { display: inline-block; max-width: calc(100% - 16px); background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); color: #fff !important; font-size: 11px; font-weight: 700; line-height: 1.4; padding: 4px 10px; border-radius: 999px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
.sd-insta { position: absolute; right: 8px; bottom: 8px; z-index: 2; }
.sd-insta:hover, .sd-insta-pill:hover { opacity: .88; }
.sd-tile.recruit { background: var(--sd-hover); border: 1px solid var(--sd-line); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 16px; text-align: center; text-decoration: none; }
.sd-tile.recruit.sp-only { display: none; }
.sd-mosaic.expanded ~ .sd-recruit-link.no-pc { display: none; }
/* 2026-09-30：5件以上は、最初は従来のヒーロー（大1＋右2×2）だけ。「+N すべて見る」で下に広げる（.expanded） */
.sd-mosaic.s5:not(.expanded) > .sd-tile.x-pc { display: none; }
.sd-mosaic.s5:not(.expanded) > .sd-tile.e-only { display: none; }
.sd-more.c-sp { display: none; }
.sd-mosaic.expanded .sd-more.c-pc { display: none; }
.sd-mosaic-fold { display: none; text-align: center; margin-top: 10px; }
.sd-mosaic.expanded ~ .sd-mosaic-fold { display: block; }
.sd-mosaic-fold button { background: #fff; border: 1px solid var(--sd-line-strong, #dadce0); color: var(--sd-navy, #0f2044); font-size: 13px; font-weight: 700; padding: 7px 20px; border-radius: 999px; cursor: pointer; font-family: inherit; }
.sd-mosaic-fold button:hover { background: var(--sd-hover, #f7f7f7); }
.sd-tile.recruit .plus { width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--sd-orange); color: var(--sd-orange); display: flex; align-items: center; justify-content: center; font-size: 22px; line-height: 1; flex-shrink: 0; }
.sd-tile.recruit b { font-size: 14px; color: var(--sd-text); }
.sd-tile.recruit small { font-size: 12px; color: var(--sd-text-sub); line-height: 1.5; }
.sd-recruit-wide { border-radius: var(--sd-radius-img); background: var(--sd-hover); border: 1px solid var(--sd-line); padding: 36px 24px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.sd-recruit-wide b { font-size: 16px; }
.sd-recruit-wide small { font-size: 13px; color: var(--sd-text-sub); }
.sd-recruit-link { text-align: right; margin-top: 8px; font-size: 12px; color: var(--sd-text-sub); line-height: 1.6; }
.sd-recruit-link a { color: var(--sd-orange); text-decoration: none; font-weight: 700; margin-left: 10px; white-space: nowrap; }
.sd-recruit-link a::before { content: '+ '; }
.sd-recruit-link a:hover { text-decoration: underline; }
.sd-poster-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-bottom: 12px; font-size: 14px; }
.sd-poster-bar .sd-insta-pill { font-size: 13px; max-width: 100%; }
.sd-poster-bar .share { margin-left: auto; background: #fff; border: 1px solid var(--sd-line-strong); color: var(--sd-navy); border-radius: 999px; padding: 5px 14px; font-family: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.sd-poster-bar .share:hover { background: var(--sd-hover); }
.sd-poster-bar .share + .all { margin-left: 0; }
.sd-poster-bar .all { margin-left: auto; font-size: 13px; color: var(--sd-navy); white-space: nowrap; }
.sd-btn-orange { display: inline-block; background: var(--sd-orange); color: #fff !important; font-size: 13px; font-weight: 700; padding: 8px 18px; border-radius: 999px; text-decoration: none; }
.sd-lead-info .sd-vcap { margin-top: 12px; }
.sd-lead-caption { font-size: 13px; color: var(--sd-text-sub); margin-top: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-lead-caption b { color: var(--sd-text); font-weight: 500; margin-right: 12px; }

/* ---- タイトル ---- */
.sd-title { margin: 24px 0 8px; }
.sd-title h1 { font-size: 28px; line-height: 1.35; font-weight: 700; letter-spacing: .01em; }
.sd-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.sd-chip { background: var(--sd-chip); color: var(--sd-text-sub); font-size: 12px; line-height: 1.6; padding: 2px 10px; border-radius: 999px; }
.sd-chip.video { background: var(--sd-orange-pale); color: var(--sd-orange); font-weight: 500; }

/* ---- 2列（説明文＋基本情報） ---- */
.sd-cols { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; margin-top: 24px; }
.sd-desc { font-size: 15px; line-height: 1.95; overflow-wrap: anywhere; }
.sd-info { border-top: 1px solid var(--sd-line); align-self: start; }
.sd-info dl { display: grid; grid-template-columns: 84px minmax(0, 1fr); }
.sd-info dt, .sd-info dd { padding: 11px 0; border-bottom: 1px solid var(--sd-line); font-size: 13px; line-height: 1.6; }
.sd-info dt { color: var(--sd-text-sub); }
.sd-info dd { overflow-wrap: anywhere; }
.sd-info dd a { color: var(--sd-navy); }
.sd-sns { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.sd-sns img { width: 22px; height: 22px; display: block; }

/* ---- セクション ---- */
.sd-section { margin-top: 56px; }
.sd-section h2 { font-size: 20px; font-weight: 700; margin-bottom: 16px; line-height: 1.4; }
.sd-section h2 small { font-size: 13px; font-weight: 400; color: var(--sd-text-sub); margin-left: 8px; }
.sd-section h3.sd-sub { font-size: 15px; font-weight: 700; margin: 32px 0 12px; }

.sd-player { position: relative; aspect-ratio: 16 / 9; border-radius: var(--sd-radius-img); overflow: hidden; background: #000; }
.sd-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.sd-vcap { margin-top: 12px; }
.sd-vcap h3 { font-size: 16px; font-weight: 700; line-height: 1.5; }
.sd-vmeta { font-size: 12px; color: var(--sd-text-sub); margin-top: 2px; }
.sd-vdesc { font-size: 13px; color: var(--sd-text-sub); margin-top: 8px; line-height: 1.7; overflow-wrap: anywhere; }
.sd-highlights { list-style: none; margin-top: 8px; }
.sd-highlights li { font-size: 13px; padding: 4px 0; cursor: pointer; display: flex; gap: 10px; }
.sd-highlights li:hover .lbl { text-decoration: underline; }
.sd-highlights .t { color: var(--sd-navy); font-weight: 700; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.sd-vgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 16px; }
.sd-vitem { cursor: pointer; min-width: 0; }
.sd-vitem .thumb { position: relative; aspect-ratio: 16 / 9; border-radius: var(--sd-radius-img); overflow: hidden; background: var(--sd-chip); }
.sd-vitem .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.sd-vitem:hover .thumb img { transform: scale(1.03); }
.sd-vitem h4 { font-size: 13px; font-weight: 500; line-height: 1.5; margin-top: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.sd-vitem .sd-vmeta { font-size: 11px; }
.sd-vitem .sd-vdesc { font-size: 12px; margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.sd-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; border-top: 1px solid var(--sd-line); }
.sd-links a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--sd-line); text-decoration: none; font-size: 14px; }
.sd-links a:hover .nm { text-decoration: underline; }
.sd-links .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 近くのスポットの写真（2026-09-30。写真が無いスポットは文字だけ） */
.sd-links .th { width: 80px; height: 60px; border-radius: 8px; overflow: hidden; background: var(--sd-chip); flex-shrink: 0; }
.sd-links .th img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.sd-links a:hover .th img { transform: scale(1.05); }
.sd-links a:has(.th) { padding: 10px 0; }
.sd-links .km { color: var(--sd-text-sub); font-size: 12px; white-space: nowrap; }

/* 近くのスポットの番号（下の地図の番号と対応） */
.sd-links .no { width: 22px; height: 22px; border-radius: 50%; background: var(--sd-orange); color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* ---- 小さな地図（近くのスポットの直下。2026-09-30） ----
   最初は同じ大きさの枠だけ（表示のずれを出さない）。画面に近づくと spot-detail.js が地図に置き換える */
.sd-minimap { position: relative; height: 380px; margin-top: 24px; border-radius: var(--sd-radius-img); overflow: hidden; background: var(--sd-chip); }
.sd-minimap-ph { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--sd-text-sub); font-size: 13px; text-align: center; padding: 16px; background: var(--sd-chip); }
.sd-minimap-ph svg { width: 28px; height: 28px; color: var(--sd-navy); }
.sd-minimap-ph small { font-size: 11px; color: #9aa0a6; }
.sd-minimap.loaded .sd-minimap-ph { display: none; }
.sd-minimap.failed .sd-minimap-ph small { visibility: hidden; }
.sd-minimap-foot { margin-top: 12px; text-align: right; }
.sd-minimap-foot .sd-btn-line { font-size: 13px; padding: 8px 18px; }
.sd-minimap-foot .sd-btn-line svg { width: 16px; height: 16px; }
.sd-mm-main { position: relative; width: 28px; height: 36px; cursor: default; z-index: 2; }
.sd-mm-main i { position: absolute; left: 0; bottom: 0; width: 28px; height: 28px; border-radius: 50% 50% 50% 0; background: var(--sd-navy, #0f2044); transform: rotate(-45deg); transform-origin: center; bottom: 6px; box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.sd-mm-main i::after { content: ''; position: absolute; left: 9px; top: 9px; width: 10px; height: 10px; border-radius: 50%; background: #fff; }
.sd-mm-main span { position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%); background: var(--sd-navy, #0f2044); color: #fff; font-size: 12px; font-weight: 700; line-height: 1.4; padding: 3px 10px; border-radius: 999px; white-space: nowrap; font-family: 'Noto Sans JP', sans-serif; box-shadow: 0 2px 6px rgba(0,0,0,.2); }
.sd-mm-pt { width: 24px; height: 24px; border-radius: 50%; background: var(--sd-orange, #d97757); color: #fff; border: 2px solid #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.3); font-family: 'Noto Sans JP', sans-serif; }
.sd-mm-popup .maplibregl-popup-content { padding: 0; border-radius: 10px; overflow: hidden; box-shadow: 0 6px 24px rgba(0,0,0,.18); }
.sd-mm-popup a { display: block; text-decoration: none; color: #1f1f1f; font-family: 'Noto Sans JP', sans-serif; }
.sd-mm-popup img { display: block; width: 100%; height: 120px; object-fit: cover; }
.sd-mm-popup b { display: block; font-size: 13px; padding: 8px 12px 0; line-height: 1.5; }
.sd-mm-popup span { display: block; font-size: 11px; color: #5f6368; padding: 2px 12px 10px; }

.sd-faq { border-top: 1px solid var(--sd-line); }
.sd-faq-item { padding: 16px 0; border-bottom: 1px solid var(--sd-line); }
.sd-faq-q { font-size: 14px; font-weight: 700; }
.sd-faq-a { font-size: 14px; color: var(--sd-text-sub); margin-top: 6px; }

/* 2026-10-06：寄稿の欄（自治体・観光協会・専門家など。spot_page_v2.build_contributions_html） */
.sd-contrib-list, .sd-contrib-more { border-top: 1px solid var(--sd-line); }
.sd-contrib-more { border-top: 0; }
.sd-contrib-item { padding: 18px 0; border-bottom: 1px solid var(--sd-line); }
.sd-contrib-kinds { font-size: 12px; font-weight: 700; color: var(--sd-navy); margin-bottom: 6px; }
.sd-contrib-kinds .sep { color: var(--sd-text-sub); font-weight: 400; margin: 0 6px; }
.sd-contrib-body { font-size: 15px; line-height: 1.9; overflow-wrap: anywhere; }
.sd-contrib-by { margin-top: 8px; font-size: 13px; color: var(--sd-text-sub); display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.sd-contrib-by .nm { font-weight: 700; color: var(--sd-text); }
.sd-contrib-by .nm a { color: var(--sd-navy); text-decoration: none; }
.sd-contrib-by .nm a:hover { text-decoration: underline; }
.sd-contrib-more summary { cursor: pointer; list-style: none; padding: 14px 0; font-size: 13px; font-weight: 700; color: var(--sd-navy); border-bottom: 1px solid var(--sd-line); }
.sd-contrib-more summary::-webkit-details-marker { display: none; }
.sd-contrib-more summary:hover { text-decoration: underline; }
.sd-contrib-more[open] summary { display: none; }

.sd-disclaimer { margin-top: 48px; font-size: 12px; color: var(--sd-text-sub); line-height: 1.7; }
.sd-disclaimer a { color: var(--sd-navy); }
.sd-bottom-nav { margin-top: 32px; display: flex; gap: 12px; flex-wrap: wrap; }
.sd-btn-line { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--sd-line-strong); color: var(--sd-navy) !important; background: #fff; font-size: 14px; font-weight: 700; padding: 11px 20px; border-radius: 999px; text-decoration: none; cursor: pointer; }
.sd-btn-line:hover { background: var(--sd-hover); }
.sd-footer { border-top: 1px solid var(--sd-line); margin-top: 48px; }
.sd-footer-inner { max-width: 960px; margin: 0 auto; padding: 20px 24px; font-size: 12px; color: var(--sd-text-sub); display: flex; gap: 16px; flex-wrap: wrap; }
.sd-footer a { text-decoration: none; }
.sd-footer a:hover { text-decoration: underline; }

/* ---- ビューア（写真・動画を大きく表示） ---- */
/* z-index：画面下の「© Location Log｜About」の帯（shared/site-chrome.js、99999）より手前に出す（2026-09-30） */
.sd-viewer { position: fixed; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 100000; background: rgba(12,12,12,.94); display: none; flex-direction: column; font-family: 'Noto Sans JP', sans-serif; }
/* 2026-09-30：iPhone（WebKit）で写真の領域の高さが0になり崩れた（Koba氏報告）。
   ・全画面は inset ではなく top/right/bottom/left と height:100% で明示（古いiOSは inset 非対応）
   ・写真の領域（stage）は flex:1 1 0 で残りの高さを取り、写真の箱（media）はその中に絶対配置する。
     WebKit は flex で決まった高さを子の %（height:100%・max-height:100%）の基準にしないことがあるため。
   ・上のバー・キャプション・サムネイルの列は縮めない（flex-shrink:0）。 */
.sd-viewer > .sd-viewer-top, .sd-viewer > .sd-viewer-cap, .sd-viewer > .sd-viewer-strip { flex-shrink: 0; }
.sd-viewer.open { display: flex; }
.sd-viewer-top { display: flex; justify-content: space-between; align-items: center; color: #eee; padding: 12px 16px; font-size: 13px; }
.sd-viewer-top button { background: none; border: 0; color: #eee; font-size: 13px; cursor: pointer; padding: 6px 8px; font-family: inherit; }
.sd-viewer-top .x { font-size: 28px; line-height: 1; }
.sd-viewer-stage { flex: 1 1 0; min-height: 0; position: relative; }
.sd-viewer-media { position: absolute; top: 0; bottom: 0; left: 64px; right: 64px; display: flex; align-items: center; justify-content: center; }
.sd-viewer-media img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 4px; }
.sd-viewer-media .vplayer { width: 100%; width: min(100%, calc((100vh - 250px) * 16 / 9)); width: min(100%, calc((100dvh - 250px) * 16 / 9)); aspect-ratio: 16 / 9; background: #000; position: relative; }
.sd-viewer-media .vplayer iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.sd-viewer-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,.14); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; z-index: 2; }
.sd-viewer-nav:hover { background: rgba(255,255,255,.26); }
.sd-viewer-nav.prev { left: 12px; }
.sd-viewer-nav.next { right: 12px; }
.sd-viewer.single .sd-viewer-nav, .sd-viewer.single #sd-viewer-all { visibility: hidden; }
.sd-viewer-cap { color: #ccc; font-size: 12px; text-align: center; padding: 10px 16px 6px; min-height: 36px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 12px; line-height: 1.4; }
.sd-viewer-cap .sd-insta-pill { max-width: 100%; font-size: 12px; padding: 5px 12px; }
.sd-viewer-credit { color: #ccc; }
/* サムネイルの列（2026-09-30、Koba氏）：正方形。表示中は白い枠、マウスを乗せると少し大きく。左右にスクロール */
.sd-viewer-strip { display: flex; align-items: center; gap: 4px; padding: 4px 12px 14px; }
.sd-strip { flex: 1; min-width: 0; display: flex; gap: 8px; overflow-x: auto; padding: 8px 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.sd-strip::-webkit-scrollbar { display: none; }
/* 左右中央揃え（収まらないときは左端から並べて左右にスクロール。justify-content:center だと左端が切れるため余白で寄せる） */
.sd-strip > :first-child { margin-left: auto; }
.sd-strip > :last-child { margin-right: auto; }
.sd-viewer.strip-fit .sd-strip-nav { visibility: hidden; }
.sd-strip button { position: relative; flex: 0 0 64px; width: 64px; height: 64px; padding: 0; border: 0; border-radius: 6px; overflow: hidden; background: #333; cursor: pointer; opacity: .55; outline: 2px solid transparent; outline-offset: 2px; transition: transform .15s ease, opacity .15s ease; }
.sd-strip button img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sd-strip button:hover { transform: scale(1.12); opacity: 1; z-index: 1; }
.sd-strip button.active { opacity: 1; outline-color: #fff; }
.sd-strip button:focus-visible { outline-color: #fff; }
.sd-strip-nav { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(255,255,255,.14); color: #fff; font-size: 20px; line-height: 1; cursor: pointer; }
.sd-strip-nav:hover { background: rgba(255,255,255,.26); }
.sd-viewer.single .sd-viewer-strip, .sd-viewer.grid .sd-viewer-strip { display: none; }
.sd-viewer-cap a { color: #fff; }
.sd-viewer-label { color: #fff; font-weight: 700; }
.sd-viewer-spot { background: #d97757; color: #fff; border: 0; border-radius: 999px; padding: 5px 14px; font-family: inherit; font-size: 12px; font-weight: 700; line-height: 1.4; cursor: pointer; }
.sd-viewer-spot:hover { opacity: .88; }
.sd-viewer-grid { flex: 1; overflow-y: auto; padding: 8px 16px 24px; display: none; }
.sd-viewer.grid .sd-viewer-grid { display: block; }
.sd-viewer.grid .sd-viewer-stage, .sd-viewer.grid .sd-viewer-cap { display: none; }
.sd-viewer-grid-inner { max-width: 960px; margin: 0 auto; columns: 3 220px; column-gap: 8px; }
.sd-viewer-grid-inner button { display: block; width: 100%; margin: 0 0 8px; border: 0; padding: 0; background: none; cursor: pointer; position: relative; break-inside: avoid; }
.sd-viewer-grid-inner img { width: 100%; display: block; border-radius: 6px; }

/* ---- 地図へ移動中の表示 ---- */
.sd-loading { position: fixed; inset: 0; z-index: 9800; background: rgba(255,255,255,.9); display: none; flex-direction: column; align-items: center; justify-content: center; gap: 14px; font-size: 13px; color: var(--sd-text-sub, #5f6368); font-family: 'Noto Sans JP', sans-serif; }
.sd-loading.open { display: flex; }
.sd-loading i { width: 32px; height: 32px; border-radius: 50%; border: 3px solid #e6e6e6; border-top-color: #0f2044; animation: sd-spin .8s linear infinite; }
@keyframes sd-spin { to { transform: rotate(360deg); } }

/* ---- 地図ページの詳細モーダル（幅900px） ---- */
.sd-modal-overlay { position: fixed; inset: 0; z-index: 8000; background: rgba(15,15,15,.45); display: none; align-items: center; justify-content: center; padding: 20px; }
.sd-modal-overlay.open { display: flex; }
.sd-modal { width: min(900px, 100%); height: min(92dvh, 100%); background: #fff; border-radius: 16px; overflow-y: auto; overscroll-behavior: contain; box-shadow: 0 12px 48px rgba(0,0,0,.22); }
.sd-modal .sd-header-inner { padding: 0 20px 0 24px; height: 56px; }
.sd-modal .sd-main { padding-bottom: 32px; }

/* ---- スマホ ---- */
@media (max-width: 768px) {
  .sd-header-inner { padding: 0 16px; height: 56px; }
  .sd-brand img { height: 30px; }
  .sd-brand span { font-size: 13px; }
  .sd-map-btn { padding: 7px 12px; font-size: 12px; }
  .sd-main { padding: 12px 16px 40px; }
  .sd-mosaic, .sd-mosaic.s3, .sd-mosaic.s4, .sd-mosaic.s5, .sd-mosaic.video-lead { height: auto; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto; grid-auto-rows: auto; gap: 4px; }
  .sd-mosaic.s5 > .sd-tile:first-child { grid-column: 1 / -1; }
  .sd-mosaic > .sd-tile.recruit.pc-only { display: none; }
  .sd-mosaic.expanded ~ .sd-recruit-link.no-pc { display: block; }
  .sd-mosaic.expanded ~ .sd-recruit-link.no-sp { display: none; }
  .sd-more.pc-only, .sd-more.c-pc { display: none; }
  .sd-more.c-sp { display: flex; }
  .sd-mosaic.expanded .sd-more.c-sp { display: none; }
  .sd-mosaic.s5:not(.expanded) > .sd-tile.x-sp { display: none; }
  .sd-mosaic > .sd-tile:first-child { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 4 / 3; }
  .sd-mosaic.video-lead > .sd-tile:first-child { aspect-ratio: 16 / 9; }
  .sd-mosaic.s4 > .sd-tile:nth-child(2) { grid-column: auto; }
  .sd-mosaic > .sd-tile:not(:first-child) { aspect-ratio: 1 / 1; }
  .sd-mosaic > .sd-tile.m-hide { display: none; }
  .sd-mosaic > .sd-tile.recruit:not(:first-child) { aspect-ratio: auto; grid-row: auto; flex-direction: row; gap: 10px; padding: 12px; }
  .sd-mosaic > .sd-tile.recruit small { display: none; }
  .sd-mosaic > .sd-tile.recruit.sp-span3 { grid-column: 1 / -1; }
  .sd-mosaic > .sd-tile.recruit.sp-span2 { grid-column: span 2; }
  .sd-mosaic > .sd-tile.recruit.sp-span1 { grid-column: span 1; flex-direction: column; gap: 6px; padding: 8px; }
  .sd-mosaic > .sd-tile.recruit.sp-span1 b { font-size: 12px; }
  .sd-mosaic > .sd-tile.recruit.sp-only { display: flex; }
  .sd-more.m-only { display: flex; }
  .sd-mosaic.s1 > .sd-tile:first-child { aspect-ratio: 4 / 3; }
  .sd-title h1 { font-size: 23px; }
  .sd-cols { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .sd-section { margin-top: 44px; }
  .sd-section h2 { font-size: 18px; }
  .sd-vgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
  .sd-links { grid-template-columns: minmax(0, 1fr); }
  .sd-links .th { width: 72px; height: 54px; }
  .sd-minimap { height: 300px; }
  .sd-viewer-media { left: 8px; right: 8px; }
  .sd-viewer-nav { display: none; }
  .sd-strip-nav { display: none; }
  .sd-viewer-strip { padding: 2px 4px 12px; }
  .sd-strip button { flex-basis: 52px; width: 52px; height: 52px; }
  .sd-modal-overlay { padding: 0; }
  .sd-modal { width: 100%; height: 100%; border-radius: 0; }
}

/* 2026-10-15：投稿された文章（Koba氏）
   - 写真の上（モザイクのタイル）：左下に1行だけ。マウスを重ねると、Instagramのバッジの上に全文（5行まで）
   - ギャラリー（拡大表示）：写真の下に全文
   - 地図ページの「関連写真」タブ：写真の下に2行まで */
.sd-text { box-sizing: border-box; position: absolute; left: 8px; bottom: 8px; max-width: calc(50% - 12px); background: rgba(0,0,0,.55); color: #fff; font-size: 11px; line-height: 1.4; padding: 4px 10px; border-radius: 999px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; z-index: 1; }
@media (hover: hover) {
  .sd-tile:hover .sd-text { max-width: calc(100% - 16px); bottom: 38px; white-space: normal; border-radius: 8px; padding: 6px 10px; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; }
}
.sd-viewer-text { flex: 0 0 100%; box-sizing: border-box; padding: 0 max(0px, calc((100% - 720px) / 2)); margin-top: 4px; color: #eee; font-size: 13.5px; line-height: 1.7; text-align: left; white-space: pre-wrap; word-break: break-word; }
.area-photo-text { margin-top: 4px; font-size: 12px; line-height: 1.5; color: var(--ui-text-sub, #666); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }