/* 04 多々羅大橋 / Figma 0FzHAOrKnJXwHinKYa2bYE Desktop 2471:2・Mobile 2474:20（v7r2 原本）
   【デザイン部（Web実装担当） / Claude Code】2026-10-21
   1024px以上は 1440 の Figma を基準に --u（1440幅で1px）で縮尺し、1023px以下は 390 の Figma を基準に縦に流す。 */
.page-tatara { --tt-green:#2b8a37; --tt-green-deep:#1d6a29; --tt-citrus:#ffe156; --tt-ink:#123c55; --tt-paper:#fff8e1; --tt-white:#fff;
  --tt-hand:'Permanent Marker','Marker Felt',cursive; --tt-block:'Bowlby One','Arial Black',sans-serif; --tt-outline:'Londrina Outline',cursive; --tt-solid:'Londrina Solid','Arial Black',sans-serif;
  --tt-en:'Barlow Condensed','Arial Narrow',sans-serif; --tt-ja:'Noto Sans JP','Hiragino Sans','Hiragino Kaku Gothic ProN',sans-serif; }
html:has(body.page-tatara) { scroll-padding-top: 16px; }
.page-tatara main { background: var(--tt-green); }
.tt-page { container-type: inline-size; --u: min(1px, 100cqw / 1440); background: var(--tt-green); color: var(--tt-ink); font-family: var(--tt-ja); line-height: normal; -webkit-font-smoothing: antialiased; overflow-x: clip; }
.tt-page :where(p, h1, h2, h3, h4, h5, ul, ol, li, figure) { margin: 0; padding: 0; }
.tt-page :where(ul, ol) { list-style: none; }
.tt :where(p, h1, h2, h3, h4, li, figcaption) { word-break: auto-phrase; text-wrap: pretty; }
.tt-nb { white-space: nowrap; }
.tt-sen { display: inline; }
.tt section, .tt-band, .tt-foot { overflow-x: clip; }
.tt-in { position: relative; }
.tt img { display: block; }
.tt [hidden] { display: none !important; }

/* 共通部品 */
.tt-hand { font-family: var(--tt-hand); font-weight: 400; color: var(--tt-citrus); line-height: .95; letter-spacing: .01em; }
.tt-hand > span { display: block; }
.tt-vert { position: absolute; writing-mode: vertical-rl; font-family: var(--tt-en); font-weight: 700; letter-spacing: .24em; color: var(--tt-citrus); background: var(--tt-ink); padding: 12px 5px; font-size: 16px; line-height: 1; }
.tt-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box; min-height: 44px; margin: 0; font: 700 15px/1.45 var(--tt-ja); color: var(--tt-ink); background: var(--tt-paper); border: 2px solid var(--tt-ink); border-radius: 999px; box-shadow: 3px 3px 0 var(--tt-ink); text-decoration: none; white-space: nowrap; padding: 10px 22px; cursor: pointer; }
.tt-btn.is-solid { background: var(--tt-ink); color: var(--tt-white); box-shadow: 3px 3px 0 var(--tt-citrus); }
.tt-btn:disabled { opacity: .5; box-shadow: none; cursor: default; }
.tt-btn:not(:disabled):active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--tt-ink); }
.tt-page :focus-visible { outline: 3px solid var(--tt-ink); outline-offset: 3px; box-shadow: 0 0 0 6px var(--tt-white); }
.tt-src-list a { text-decoration: underline; text-underline-offset: 3px; }
.tt-src-list a:hover { text-decoration-thickness: 2px; }

/* ヘッダー（写真の上。ロゴは既存の偏集ロゴ、目次へは記事末の地図目次へ） */
.tt-header { position: absolute; z-index: 10; left: 0; right: 0; top: 0; display: flex; align-items: center; justify-content: space-between; height: 68px; padding: 0 16px; }
.tt-logo-badge { display: inline-flex; background: var(--tt-citrus); padding: 7px 11px; border-radius: 10px; box-shadow: 2px 2px 0 var(--tt-ink); }
.tt-brand { display: block; line-height: 0; margin: -8px -11px; padding: 8px 11px; }
/* ↑ロゴの黄色い札全体（73×44）を押せる範囲にする（見た目は Figma のまま） */
.tt-brand .brand-mark { width: auto; height: 28px; max-width: none; }
.tt-toc-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; box-sizing: border-box; padding: 9px 16px; font: 700 13px/1.45 var(--tt-ja); color: var(--tt-white); background: var(--tt-ink); border-radius: 999px; text-decoration: none; }
.tt-bars { display: inline-block; width: 16px; height: 2px; background: var(--tt-citrus); box-shadow: 0 -5px 0 var(--tt-citrus), 0 5px 0 var(--tt-citrus); }

/* 再生バー（常時表示のシーク・時間・再生／一時停止） */
.tt-player { position: relative; background: var(--tt-ink); }
.tt-screen { position: relative; overflow: hidden; background: var(--tt-ink); }
.tt-video { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--tt-ink); }
.tt-bigplay { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; padding: 0; border-radius: 50%; background: rgba(18, 60, 85, .82); border: 3px solid var(--tt-citrus); cursor: pointer; }
.tt-bigplay span { width: 0; height: 0; border-style: solid; border-width: 12px 0 12px 19px; border-color: transparent transparent transparent var(--tt-citrus); margin-left: 5px; }
.tt-bar { display: flex; align-items: center; gap: 9px; height: 44px; padding: 0 10px; background: var(--tt-ink); color: var(--tt-white); font: 600 13px/1 var(--tt-en); letter-spacing: .04em; }
.tt-play, .tt-full { flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; margin: 0; border: 0; background: transparent; color: var(--tt-white); cursor: pointer; }
.tt-play { margin: 0 -16.5px; }
.tt-full { margin: 0 -14px; }
.tt-play svg { width: 11px; height: 14px; fill: currentColor; overflow: visible; }
.tt-play .tt-ico-pause, .tt-player.is-playing .tt-play .tt-ico-play { display: none; }
.tt-player.is-playing .tt-play .tt-ico-pause { display: block; }
.tt-full svg { width: 16px; height: 16px; }
.tt-full .tt-ico-exit, .tt-player.is-full .tt-full .tt-ico-full { display: none; }
.tt-player.is-full .tt-full .tt-ico-exit { display: block; }
.tt-time { flex: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tt-mute { flex: none; display: inline-flex; color: var(--tt-white); }
.tt-mute svg { width: 18px; height: 16px; }
.tt-seek { --p: 0%; flex: 1; min-width: 0; height: 44px; margin: 0; padding: 0; appearance: none; -webkit-appearance: none; background: transparent; cursor: pointer; touch-action: none; }
.tt-seek::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--tt-citrus) 0 var(--p), rgba(255, 255, 255, .35) var(--p) 100%); }
.tt-seek::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .35); }
.tt-seek::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--tt-citrus); }
.tt-seek::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 12px; height: 12px; margin-top: -4px; border: 0; border-radius: 50%; background: var(--tt-citrus); }
.tt-seek::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: var(--tt-citrus); }
.tt-seek:focus-visible { outline: 3px solid var(--tt-citrus); outline-offset: -6px; box-shadow: none; }
.tt-bar :focus-visible { outline: 3px solid var(--tt-citrus); outline-offset: -4px; box-shadow: none; }
.tt-status { padding: 6px 10px; background: var(--tt-ink); color: var(--tt-white); font-size: 12px; line-height: 1.6; }
.tt-player:fullscreen { display: flex; flex-direction: column; width: 100%; height: 100%; background: #000; }
.tt-player:fullscreen .tt-screen { flex: 1; height: auto !important; }
.tt-player:fullscreen .tt-video { object-fit: contain; background: #000; }
.tt-player:-webkit-full-screen { display: flex; flex-direction: column; width: 100%; height: 100%; background: #000; }
.tt-player:-webkit-full-screen .tt-screen { flex: 1; height: auto !important; }
.tt-player:-webkit-full-screen .tt-video { object-fit: contain; background: #000; }

/* ===================== スマホ・タブレット（Figma Mobile 390） ===================== */
.tt-fv { position: relative; height: 844px; overflow: hidden; background: #7fb6dc; }
.tt-fv-photo { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 32% 50%; }
.tt-fv .tt-in { height: 100%; }
.tt-seaside { position: absolute; left: 22px; top: 120px; font: 400 min(112px, 28.72vw)/.95 var(--tt-hand); letter-spacing: .01em; color: var(--tt-white); transform: rotate(-6deg); transform-origin: left top; text-shadow: 0 4px 16px rgba(18, 60, 85, .3); white-space: nowrap; }
.tt-seaside span { display: block; }
.tt-seaside span + span { margin-left: min(70px, 17.95vw); margin-top: -6px; }
.tt-fv-title { position: absolute; right: 20px; top: 352px; text-align: right; color: var(--tt-ink); text-shadow: 0 0 12px rgba(255, 255, 255, .35); }
.tt-fv-en { font: 600 15px/1.2 var(--tt-en); letter-spacing: .18em; }
.tt-fv-title h1 { font-weight: 900; font-size: 32px; letter-spacing: .1em; line-height: 1.2; margin-top: 4px; }

.tt-lead .tt-in, .tt-bs .tt-in, .tt-sb .tt-in, .tt-gal .tt-in, .tt-facts .tt-in, .tt-access .tt-in { max-width: 600px; margin-inline: auto; }
.tt-lead { padding: 22px 16px 40px; }
.tt-hero-cap { display: inline-block; font-size: 13px; line-height: 1.6; font-weight: 500; padding: 8px 12px; background: var(--tt-paper); transform: rotate(-1deg); box-shadow: 3px 3px 0 var(--tt-ink); }
.tt-headline { margin-top: 30px; }
.tt-headline span { display: block; width: max-content; background: var(--tt-citrus); color: var(--tt-ink); font-weight: 900; font-size: min(29px, 7.44vw); letter-spacing: .03em; line-height: 1; padding: 10px 14px 11px; box-shadow: 4px 4px 0 var(--tt-ink); transform: rotate(-2deg); }
.tt-headline span + span { margin: 10px 0 0 34px; transform: rotate(1deg); }
.tt-intro { margin-top: 28px; font-size: 15px; line-height: 1.95; font-weight: 500; padding: 18px; background: var(--tt-paper); border: 3px solid var(--tt-ink); box-shadow: 6px 6px 0 var(--tt-citrus); }
.tt-arrow-lead, .tt-arrow-bs, .tt-arrow-sb, .tt-vert-bs, .tt-vert-facts, .tt-vert-access, .tt-bracket, .tt-peek { display: none; }

.tt-band { position: relative; height: 80px; z-index: 6; }
.tt-strip { position: absolute; left: -40px; right: -40px; top: 16px; height: 46px; display: flex; align-items: center; overflow: hidden; white-space: nowrap; background: var(--tt-citrus); transform: rotate(-4deg); border-top: 3px solid var(--tt-ink); border-bottom: 3px solid var(--tt-ink); }
.tt-strip p { font: 400 22px/1.45 var(--tt-block); color: var(--tt-ink); padding-left: 16px; white-space: nowrap; }

.tt-frame { background: var(--tt-paper); padding: 8px 8px 14px; border: 3px solid var(--tt-ink); }
.tt-frame .tt-screen { height: auto; aspect-ratio: 336 / 196; }
.tt-below { padding: 12px 0 0; }
.tt-cap { font-size: 14px; line-height: 1.85; font-weight: 500; padding: 0 4px; }
.tt-below .tt-btn { display: flex; margin: 10px 2px 0 auto; font-size: 13px; padding: 9px 18px; }
.tt-cap .tt-sen { display: block; }

.tt-bs { padding: 18px 16px 40px; }
.tt-bs-title { font-size: min(58px, 14.87vw); transform: rotate(-3deg); text-shadow: 3px 4px 0 var(--tt-green-deep); }
.tt-uline { display: block; width: 150px; height: 30px; margin: 8px 0 18px 4px; }
.tt-frame-bs { box-shadow: 7px 7px 0 var(--tt-ink); transform: rotate(-.8deg); }

.tt-sb { padding: 20px 16px 50px; }
.tt-sb-head { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; }
.tt-sb-title { font-size: min(42px, 10.77vw); line-height: 1.02; transform: rotate(-4deg); text-shadow: 3px 4px 0 var(--tt-green-deep); }
.tt-bike { flex: none; width: min(140px, 35.9vw); height: auto; stroke-width: 9; }
.tt-bike .tt-bike-thin { stroke-width: 6; }
.tt-frame-sb { box-shadow: -7px 7px 0 var(--tt-citrus); transform: rotate(.6deg); }

.tt-gal { position: relative; background: var(--tt-paper); padding: 150px 16px 70px; }
.tt-vert-gal { left: -12px; top: -120px; font-size: 12px; padding: 9px 4px; }
.tt-sticker { position: absolute; right: -2px; top: -128px; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: var(--tt-citrus); color: var(--tt-ink); text-align: center; border: 2px solid var(--tt-ink); box-shadow: 3px 3px 0 var(--tt-ink); transform: rotate(-12deg); }
.tt-sticker-no { font: 700 10px/1.2 var(--tt-en); letter-spacing: .1em; }
.tt-sticker-num { font: 400 26px/.85 var(--tt-block); }
.tt-gal-title { position: relative; height: 104px; text-align: center; font-weight: 400; }
.tt-gal-s, .tt-gal-o { position: absolute; left: 0; right: 0; font-size: min(104px, 26.67vw); line-height: 1; letter-spacing: .03em; }
.tt-gal-s { font-family: var(--tt-solid); font-weight: 900; color: var(--tt-citrus); transform: translate(6px, 6px); }
.tt-gal-o { font-family: var(--tt-outline); color: var(--tt-ink); }
.tt-gal-lead { margin-top: 20px; padding: 22px 16px 40px; font-size: 15px; font-weight: 700; line-height: 1.85; text-align: center; }
.tt-gal-main { position: relative; margin-top: 34px; }
.tt-slide { position: relative; }
.tt-type { position: absolute; z-index: 3; left: -6px; top: -14px; background: var(--tt-green); color: var(--tt-white); font-weight: 900; font-size: 13px; line-height: normal; padding: 5px 12px; border: 2px solid var(--tt-ink); transform: rotate(-4deg); }
.tt-slide .tt-player, .tt-photo { border: 3px solid var(--tt-ink); box-shadow: 6px 6px 0 var(--tt-green); }
.tt-slide .tt-screen { height: auto; aspect-ratio: 352 / 196; }
.tt-photo { height: auto; aspect-ratio: 352 / 240; overflow: hidden; background: var(--tt-ink); }
.tt-photo img { width: 100%; height: 100%; object-fit: cover; }
.tt-capline { padding: 16px 2px 0; font-size: 14px; line-height: 1.85; font-weight: 500; }
.tt-gal:not(.is-ready) .tt-slide + .tt-slide { margin-top: 40px; }
.tt-ctrl { display: grid; grid-template-columns: auto 1fr auto; align-items: center; row-gap: 14px; margin-top: 18px; }
.tt-ctrl .tt-btn { min-width: 96px; font-size: 13px; padding: 9px 18px; }
.tt-count { justify-self: center; font: 700 22px/1.2 var(--tt-en); letter-spacing: .1em; }
.tt-ctrl .tt-enlarge { grid-column: 1 / -1; justify-self: center; min-width: 0; }
.tt-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 20px; }
.tt-thumb { position: relative; height: 52px; min-height: 44px; padding: 0; margin: 0; border: 2px solid var(--tt-ink); background: var(--tt-ink); opacity: .6; cursor: pointer; }
.tt-thumb.is-on { opacity: 1; outline: 3px solid var(--tt-citrus); outline-offset: 1px; }
.tt-thumb img { width: 100%; height: 100%; object-fit: cover; }
.tt-thumb span { position: absolute; left: -2px; top: -2px; background: var(--tt-ink); color: var(--tt-white); font: 700 12px/1.2 var(--tt-en); padding: 1px 6px; }
.tt-thumb i { position: absolute; right: 4px; bottom: 4px; width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 9px; border-color: transparent transparent transparent var(--tt-white); filter: drop-shadow(0 0 2px rgba(0, 0, 0, .6)); }
.tt-thumb:focus-visible { outline: 3px solid var(--tt-ink); outline-offset: 3px; }
.tt-gal-main:focus-visible { outline: 3px dashed var(--tt-ink); outline-offset: 12px; box-shadow: none; }

.tt-facts { position: relative; padding: 60px 16px 40px; }
.tt-facts-tab { position: absolute; z-index: 3; left: -6px; top: -32px; background: var(--tt-citrus); border: 3px solid var(--tt-ink); padding: 8px 16px 10px; transform: rotate(-3deg); box-shadow: 4px 4px 0 var(--tt-ink); }
.tt-facts-tab small { display: block; font-size: 13px; font-weight: 700; letter-spacing: .1em; line-height: normal; }
.tt-facts-tab strong { display: block; font-size: 32px; font-weight: 900; letter-spacing: .08em; line-height: 1.1; }
.tt-card { background: var(--tt-paper); padding: 66px 20px 26px; border: 3px solid var(--tt-ink); box-shadow: 8px 8px 0 var(--tt-citrus); }
.tt-facts-lead { font-size: 22px; font-weight: 900; line-height: 1.5; margin-bottom: 22px; }
.tt-facts-lead .tt-sen { display: block; }
.tt-n { font: 400 36px/1 var(--tt-block); color: var(--tt-green); -webkit-text-stroke: 1.5px var(--tt-ink); }
.tt-col h4 { font-size: 17px; font-weight: 900; margin: 8px 0 10px; line-height: 1.5; padding-bottom: 8px; border-bottom: 3px dotted var(--tt-ink); }
.tt-col { margin-bottom: 28px; }
.tt-col .tt-col-text { font-size: 15px; line-height: 1.95; }
.tt-srcs { padding-top: 16px; border-top: 3px solid var(--tt-ink); font-size: 13px; line-height: 1.9; }
.tt-srcs-h { font-size: 14px; font-weight: 900; }

.tt-access { position: relative; padding: 20px 16px 60px; }
.tt-rule { display: block; width: 100%; height: 20px; }
.tt-access-title { font-size: 29px; font-weight: 900; color: var(--tt-white); letter-spacing: .03em; line-height: 1.4; margin-top: 22px; text-shadow: 3px 3px 0 var(--tt-green-deep); }
.tt-access-title .tt-sen, .tt-introbox .tt-sen, .tt-note .tt-sen { display: block; }
.tt-introbox { margin-top: 16px; font-size: 15px; line-height: 1.9; font-weight: 500; padding: 14px 16px; background: var(--tt-paper); border: 3px solid var(--tt-ink); box-shadow: 5px 5px 0 var(--tt-ink); }
.tt-mapbox { margin-top: 26px; padding: 10px; background: var(--tt-paper); border: 3px solid var(--tt-ink); box-shadow: 7px 7px 0 var(--tt-citrus); transform: rotate(-.6deg); }
.tt-mapbox img { width: 100%; height: auto; border: 2px solid var(--tt-ink); }
.tt-mapbox figcaption { font-size: 13px; line-height: 1.8; margin-top: 10px; font-weight: 500; }
.tt-mapbtns { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
.tt-mapbtns .tt-btn { width: 100%; font-size: 13px; padding: 9px 18px; }
.tt-steps { margin-top: 30px; }
.tt-step { position: relative; background: var(--tt-paper); border: 3px solid var(--tt-ink); padding: 14px 14px 14px 66px; margin-bottom: 16px; box-shadow: 5px 5px 0 var(--tt-ink); }
.tt-step-num { position: absolute; left: 12px; top: 14px; display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; box-sizing: border-box; border-radius: 50%; background: var(--tt-citrus); border: 3px solid var(--tt-ink); font: 400 22px/1 var(--tt-block); color: var(--tt-ink); }
.tt-step h3 { font-size: 17px; font-weight: 900; line-height: 1.45; }
.tt-step p { font-size: 14px; line-height: 1.85; margin-top: 4px; }
.tt-note { background: var(--tt-citrus); border: 3px solid var(--tt-ink); padding: 12px 14px; font-size: 14px; font-weight: 700; line-height: 1.7; transform: rotate(-1deg); }
.tt-srcbox { margin-top: 30px; font-size: 13px; line-height: 1.85; padding: 16px; background: var(--tt-paper); border: 3px solid var(--tt-ink); }
.tt-srcbox .tt-srcs-h { margin-bottom: 4px; }
.tt-srcbox .tt-date { margin-top: 6px; }

/* 記事末：地図目次（既存の共通部品）→ 黄色の簡易フッター */
.tt-page .toc { position: relative; z-index: 1; }
.tt-foot-under { height: 14px; background: #fffcf2; }
.tt-foot { position: relative; z-index: 2; margin-top: -14px; background: var(--tt-citrus); padding: 60px 16px 40px; }
.tt-foot .tt-in { max-width: 600px; margin-inline: auto; }
.tt-foot-logo { width: auto; height: 46px; }
.tt-foot-en { margin-top: 22px; font: 700 14px/1.2 var(--tt-en); letter-spacing: .2em; color: var(--tt-ink); }

/* 拡大表示（既存の呉線・ギャラリーと同じ dialog の仕組み） */
.tt-dialog { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; border: 0; background: #0b1f2c; color: var(--tt-white); font-family: var(--tt-ja); }
.tt-dialog[open] { display: flex; flex-direction: column; }
.tt-dialog::backdrop { background: rgba(5, 20, 30, .9); }
.tt-dialog-bar { display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 16px; background: var(--tt-citrus); color: var(--tt-ink); }
.tt-dialog-bar img { flex: none; width: 56px; height: auto; }
.tt-dialog-bar h2 { flex: 1; min-width: 0; margin: 0; font: 700 16px/1.3 var(--tt-en), var(--tt-ja); font-family: var(--tt-en), 'Noto Sans JP', sans-serif; letter-spacing: .06em; }
.tt-dialog-close { flex: none; min-width: 44px; min-height: 44px; padding: 8px 16px; border: 2px solid var(--tt-ink); border-radius: 999px; background: var(--tt-ink); color: var(--tt-white); font: 700 14px/1 var(--tt-ja); cursor: pointer; }
.tt-dialog-close:focus-visible { outline: 3px solid var(--tt-ink); outline-offset: 3px; }
.tt-dialog-stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 12px; }
.tt-dialog-stage img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.tt-dialog-stage[data-state="loading"] img { opacity: 0; }
.tt-dialog-stage[data-state="loading"]::after { content: '読み込み中'; position: absolute; font-size: 14px; color: var(--tt-white); }
.tt-dialog-stage { position: relative; }
.tt-dialog-error { margin: 0; padding: 10px 16px; background: var(--tt-citrus); color: var(--tt-ink); font-size: 14px; font-weight: 700; line-height: 1.7; }
.tt-dialog-bar h2 .tt-sen { display: inline; }
@media (max-width: 1023px) { .tt-dialog-bar h2 .tt-sen { display: block; } }
.tt-dialog-stage .tt-player { display: flex; flex-direction: column; width: min(100%, calc((100dvh - 210px) * 16 / 9)); max-height: 100%; }
.tt-dialog-stage .tt-screen { aspect-ratio: 16 / 9; }
.tt-dialog-stage .tt-video { object-fit: contain; background: #000; }
.tt-dialog-caption { margin: 0; padding: 10px 16px max(14px, env(safe-area-inset-bottom)); font-size: 14px; line-height: 1.8; }
.tt-dialog :focus-visible { box-shadow: none; }
.tt-dialog .tt-bar :focus-visible { outline-color: var(--tt-citrus); }

@media (hover: hover) {
  .tt-btn:not(:disabled):hover { background: var(--tt-citrus); }
  .tt-btn.is-solid:not(:disabled):hover { background: #1f5677; }
  .tt-toc-btn:hover { background: #1f5677; }
  .tt-thumb:hover { opacity: .85; }
  .tt-thumb.is-on:hover { opacity: 1; }
}
@media (max-width: 1023px) {
  /* 出典のリンクはスマホで 44px のタップ領域を確保（Figma の行間 24px から広げた。理由は報告に記載） */
  .tt-src-list a { display: inline-flex; align-items: center; min-height: 44px; }
  .tt-lead, .tt-bs, .tt-sb, .tt-gal, .tt-facts, .tt-access { padding-left: max(16px, calc((100% - 600px) / 2)); padding-right: max(16px, calc((100% - 600px) / 2)); }
  .tt-lead .tt-in, .tt-bs .tt-in, .tt-sb .tt-in, .tt-gal .tt-in, .tt-facts .tt-in, .tt-access .tt-in { max-width: none; }
}

/* ===================== PC（Figma Desktop 1440。--u は 1440px 幅で 1px） ===================== */
@media (min-width: 1024px) {
  .tt-in { width: calc(1440 * var(--u)); margin-inline: auto; max-width: none !important; }
  .tt-vert { font-size: max(12px, calc(16 * var(--u))); padding: calc(12 * var(--u)) calc(5 * var(--u)); }
  .tt-arrow-lead, .tt-arrow-bs, .tt-arrow-sb, .tt-vert-bs, .tt-vert-facts, .tt-vert-access, .tt-bracket, .tt-peek { display: block; }
  .tt-btn { font-size: max(14px, calc(15 * var(--u))); padding: calc(10 * var(--u)) calc(22 * var(--u)); min-height: max(44px, calc(45 * var(--u))); }

  .tt-header { height: calc(96 * var(--u)); padding: 0 calc(48 * var(--u)); max-width: 1440px; margin-inline: auto; }
  .tt-logo-badge { padding: calc(10 * var(--u)) calc(16 * var(--u)); border-radius: calc(14 * var(--u)); box-shadow: 3px 3px 0 var(--tt-ink); }
  .tt-brand { margin: calc(-10 * var(--u)) calc(-16 * var(--u)); padding: calc(10 * var(--u)) calc(16 * var(--u)); }
  .tt-brand .brand-mark { height: calc(40 * var(--u)); }
  .tt-toc-btn { font-size: max(14px, calc(15 * var(--u))); padding: calc(12 * var(--u)) calc(22 * var(--u)); min-height: max(44px, calc(45 * var(--u))); }

  .tt-fv { height: calc(900 * var(--u)); min-height: 600px; }
  .tt-fv-photo { object-position: 50% 70%; }
  .tt-seaside { left: calc(96 * var(--u)); top: calc(118 * var(--u)); font-size: calc(206 * var(--u)); transform: rotate(-5deg); text-shadow: 0 6px 24px rgba(18, 60, 85, .28); }
  .tt-seaside span + span { margin-left: calc(300 * var(--u)); margin-top: calc(-18 * var(--u)); }
  .tt-fv-title { right: calc(96 * var(--u)); top: calc(300 * var(--u)); text-shadow: 0 0 14px rgba(255, 255, 255, .35); }
  .tt-fv-en { font-size: calc(24 * var(--u)); font-weight: 700; letter-spacing: .2em; }
  .tt-fv-title h1 { font-size: calc(46 * var(--u)); margin-top: calc(6 * var(--u)); }

  .tt-lead { padding: 0; }
  /* 1024〜1439px で文字の最小サイズにより導入文が伸びても、次の帯に重ならないよう縦に流す */
  .tt-lead .tt-in { box-sizing: border-box; min-height: calc(370 * var(--u)); padding: calc(110 * var(--u)) 0 calc(24 * var(--u)); }
  .tt-hero-cap { position: absolute; left: calc(80 * var(--u)); top: calc(40 * var(--u)); font-size: max(13px, calc(15 * var(--u))); line-height: normal; padding: calc(10 * var(--u)) calc(16 * var(--u)); transform: rotate(-1.2deg); }
  .tt-headline { position: absolute; left: calc(80 * var(--u)); top: calc(140 * var(--u)); margin: 0; }
  .tt-headline span { font-size: calc(54 * var(--u)); letter-spacing: .04em; padding: calc(12 * var(--u)) calc(20 * var(--u)) calc(14 * var(--u)); box-shadow: 6px 6px 0 var(--tt-ink); }
  .tt-headline span + span { margin: calc(14 * var(--u)) 0 0 calc(64 * var(--u)); }
  .tt-arrow-lead { position: absolute; left: calc(590 * var(--u)); top: calc(200 * var(--u)); width: calc(140 * var(--u)); height: auto; }
  .tt-intro { position: relative; margin: 0 0 0 calc(760 * var(--u)); width: calc(560 * var(--u)); font-size: max(15px, calc(17 * var(--u))); line-height: 2; padding: calc(24 * var(--u)) calc(30 * var(--u)); box-shadow: 8px 8px 0 var(--tt-citrus); }

  .tt-band { height: calc(140 * var(--u)); }
  .tt-strip { left: -60px; right: -60px; top: calc(28 * var(--u)); height: calc(78 * var(--u)); transform: rotate(-3deg); border-width: 4px; }
  .tt-strip p { font-size: calc(40 * var(--u)); letter-spacing: .02em; padding-left: calc(30 * var(--u)); }

  .tt-frame { padding: calc(16 * var(--u)) calc(16 * var(--u)) calc(22 * var(--u)); }
  .tt-below { display: flex; justify-content: space-between; align-items: flex-start; gap: calc(30 * var(--u)); padding: calc(18 * var(--u)) calc(6 * var(--u)) 0; }
  .tt-cap { font-size: max(14px, calc(16 * var(--u))); line-height: 1.9; padding: 0; }
  .tt-cap .tt-sen { display: inline; }
  .tt-below .tt-btn { flex: none; margin: 0; font-size: max(14px, calc(15 * var(--u))); padding: calc(10 * var(--u)) calc(22 * var(--u)); }
  .tt-bar { height: calc(52 * var(--u)); min-height: 44px; padding: 0 calc(20 * var(--u)); gap: calc(14 * var(--u)); font-size: max(13px, calc(17 * var(--u))); }
  .tt-play { margin: 0 -14.5px; }
  .tt-play svg { width: calc(15 * var(--u)); height: calc(18 * var(--u)); }
  .tt-full { margin: 0 -12px; }
  .tt-full svg { width: max(16px, calc(20 * var(--u))); height: max(16px, calc(20 * var(--u))); }
  .tt-mute svg { width: max(18px, calc(22 * var(--u))); height: max(16px, calc(20 * var(--u))); }
  .tt-seek::-webkit-slider-thumb { width: 14px; height: 14px; margin-top: -5px; }
  .tt-seek::-moz-range-thumb { width: 14px; height: 14px; }
  .tt-bigplay { top: 50%; width: calc(96 * var(--u)); height: calc(96 * var(--u)); }
  .tt-bigplay span { border-width: calc(20 * var(--u)) 0 calc(20 * var(--u)) calc(32 * var(--u)); margin-left: calc(8 * var(--u)); }

  .tt-bs { padding: 0; }
  .tt-bs .tt-in { height: calc(990 * var(--u)); }
  .tt-bs-title { position: absolute; left: calc(80 * var(--u)); top: calc(30 * var(--u)); font-size: calc(118 * var(--u)); text-shadow: 5px 6px 0 var(--tt-green-deep); }
  .tt-uline { position: absolute; left: calc(84 * var(--u)); top: calc(300 * var(--u)); width: calc(200 * var(--u)); height: calc(40 * var(--u)); margin: 0; }
  .tt-arrow-bs { position: absolute; left: calc(150 * var(--u)); top: calc(350 * var(--u)); width: calc(150 * var(--u)); height: auto; }
  .tt-vert-bs { right: calc(28 * var(--u)); top: calc(120 * var(--u)); }
  .tt-frame-bs { position: absolute; left: calc(300 * var(--u)); top: calc(230 * var(--u)); width: calc(1060 * var(--u)); box-shadow: 12px 12px 0 var(--tt-ink); transform: rotate(-1deg); }
  .tt-frame-bs .tt-screen { aspect-ratio: auto; height: calc(560 * var(--u)); }

  .tt-sb { padding: 0; }
  .tt-sb .tt-in { height: calc(800 * var(--u)); }
  .tt-sb-head { display: block; margin: 0; }
  .tt-frame-sb { position: absolute; left: calc(80 * var(--u)); top: calc(60 * var(--u)); width: calc(920 * var(--u)); box-shadow: -12px 12px 0 var(--tt-citrus); transform: rotate(.8deg); }
  .tt-frame-sb .tt-screen { aspect-ratio: auto; height: calc(500 * var(--u)); }
  .tt-frame-sb .tt-bigplay { width: calc(90 * var(--u)); height: calc(90 * var(--u)); }
  .tt-frame-sb .tt-bigplay span { border-width: calc(18 * var(--u)) 0 calc(18 * var(--u)) calc(30 * var(--u)); }
  .tt-bike { position: absolute; left: calc(1030 * var(--u)); top: calc(40 * var(--u)); width: calc(340 * var(--u)); stroke-width: 7; }
  .tt-bike .tt-bike-thin { stroke-width: 5; }
  .tt-sb-title { position: absolute; left: calc(1040 * var(--u)); top: calc(300 * var(--u)); font-size: calc(76 * var(--u)); text-shadow: 4px 5px 0 var(--tt-green-deep); }
  .tt-arrow-sb { position: absolute; left: calc(1030 * var(--u)); top: calc(610 * var(--u)); width: calc(120 * var(--u)); height: auto; }

  .tt-gal { margin-top: calc(20 * var(--u)); padding: 0; }
  .tt-gal .tt-in { height: calc(1460 * var(--u)); }
  .tt-vert-gal { left: calc(14 * var(--u)); top: calc(130 * var(--u)); font-size: max(12px, calc(16 * var(--u))); padding: calc(12 * var(--u)) calc(5 * var(--u)); }
  .tt-sticker { left: calc(1262 * var(--u)); right: auto; top: calc(56 * var(--u)); width: calc(130 * var(--u)); height: calc(130 * var(--u)); border-width: 3px; box-shadow: 4px 4px 0 var(--tt-ink); }
  .tt-sticker-no { font-size: calc(16 * var(--u)); }
  .tt-sticker-num { font-size: calc(52 * var(--u)); }
  .tt-gal-title { position: absolute; left: 0; right: 0; top: calc(90 * var(--u)); height: calc(250 * var(--u)); }
  .tt-gal-s, .tt-gal-o { font-size: calc(250 * var(--u)); letter-spacing: .04em; }
  .tt-gal-s { transform: translate(calc(12 * var(--u)), calc(12 * var(--u))); }
  .tt-gal-lead { position: absolute; left: 0; right: 0; top: calc(370 * var(--u)); margin: 0; padding: 0; font-size: max(15px, calc(18 * var(--u))); letter-spacing: .04em; line-height: normal; }
  .tt-bracket { position: absolute; top: calc(460 * var(--u)); width: calc(60 * var(--u)); height: calc(790 * var(--u)); border: 6px solid var(--tt-ink); }
  .tt-bracket-l { left: calc(40 * var(--u)); border-right: 0; border-radius: 18px 0 0 18px; }
  .tt-bracket-r { right: calc(40 * var(--u)); border-left: 0; border-radius: 0 18px 18px 0; }
  .tt-peek { position: absolute; top: calc(540 * var(--u)); width: calc(300 * var(--u)); height: calc(500 * var(--u)); overflow: hidden; border: 3px solid var(--tt-ink); opacity: .55; }
  .tt-peek img { width: 100%; height: 100%; object-fit: cover; }
  .tt-peek-l { left: calc(-150 * var(--u)); }
  .tt-peek-r { right: calc(-150 * var(--u)); }
  .tt-gal-main { position: absolute; left: calc(220 * var(--u)); top: calc(470 * var(--u)); width: calc(1000 * var(--u)); margin: 0; }
  .tt-type { left: calc(-14 * var(--u)); top: calc(-18 * var(--u)); font-size: max(13px, calc(16 * var(--u))); padding: calc(8 * var(--u)) calc(18 * var(--u)); border-width: 3px; }
  .tt-slide .tt-player, .tt-photo { box-shadow: 10px 10px 0 var(--tt-green); }
  .tt-slide .tt-screen { aspect-ratio: auto; height: calc(562 * var(--u)); }
  .tt-slide .tt-bar { height: calc(56 * var(--u)); padding: 0 calc(48 * var(--u)); }
  .tt-photo { aspect-ratio: auto; height: calc(618 * var(--u) + 6px); }
  .tt-capline { margin-top: calc(30 * var(--u)); padding: 0; font-size: max(15px, calc(17 * var(--u))); line-height: 1.9; text-align: center; }
  .tt-ctrl { display: flex; justify-content: center; gap: calc(28 * var(--u)); margin-top: calc(34 * var(--u)); }
  .tt-ctrl .tt-btn { min-width: calc(130 * var(--u)); font-size: max(14px, calc(15 * var(--u))); padding: calc(10 * var(--u)) calc(22 * var(--u)); }
  .tt-count { font-size: calc(28 * var(--u)); line-height: normal; }
  .tt-ctrl .tt-enlarge { min-width: calc(130 * var(--u)); }
  .tt-thumbs { display: flex; justify-content: center; gap: calc(18 * var(--u)); margin-top: calc(30 * var(--u)); }
  .tt-thumb { width: calc(150 * var(--u)); height: calc(92 * var(--u)); border-width: 3px; }
  .tt-thumb.is-on { outline-width: 4px; outline-offset: 2px; }
  .tt-thumb span { left: -3px; top: -3px; font-size: max(12px, calc(15 * var(--u))); padding: 2px 8px; }
  .tt-thumb i { right: 6px; bottom: 6px; border-width: 7px 0 7px 12px; }

  .tt-facts { padding: 0; }
  .tt-facts .tt-in { box-sizing: border-box; padding: calc(150 * var(--u)) 0 calc(89 * var(--u)); }
  .tt-vert-facts { right: calc(26 * var(--u)); top: calc(220 * var(--u)); }
  .tt-facts-tab { left: calc(44 * var(--u)); top: calc(70 * var(--u)); border-width: 4px; padding: calc(14 * var(--u)) calc(28 * var(--u)) calc(16 * var(--u)); box-shadow: 6px 6px 0 var(--tt-ink); }
  .tt-facts-tab small { font-size: calc(18 * var(--u)); }
  .tt-facts-tab strong { font-size: calc(52 * var(--u)); }
  .tt-card { position: relative; margin-left: calc(80 * var(--u)); width: calc(1280 * var(--u)); padding: calc(110 * var(--u)) calc(64 * var(--u)) calc(56 * var(--u)); border-width: 4px; box-shadow: 14px 14px 0 var(--tt-citrus); transform: rotate(-.4deg); }
  .tt-facts-lead { font-size: calc(36 * var(--u)); letter-spacing: .03em; line-height: 1.4; margin-bottom: calc(40 * var(--u)); }
  .tt-facts-lead .tt-sen { display: inline; }
  .tt-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(44 * var(--u)); }
  .tt-col { margin: 0; }
  .tt-n { font-size: calc(56 * var(--u)); -webkit-text-stroke: 2px var(--tt-ink); }
  .tt-col h4 { font-size: max(16px, calc(20 * var(--u))); margin: calc(12 * var(--u)) 0 calc(14 * var(--u)); padding-bottom: calc(10 * var(--u)); }
  .tt-col .tt-col-text { font-size: max(14px, calc(16 * var(--u))); line-height: 2; }
  .tt-srcs { display: flex; gap: calc(40 * var(--u)); align-items: baseline; margin-top: calc(44 * var(--u)); padding-top: calc(24 * var(--u)); font-size: max(13px, calc(14 * var(--u))); }
  .tt-srcs .tt-srcs-h { font-size: max(13px, calc(15 * var(--u))); }
  .tt-srcs .tt-src-list { display: flex; gap: calc(28 * var(--u)); }
  .tt-srcs .tt-date { margin: 0; }

  .tt-access { padding: 0; }
  /* 右の列（手順→出典）は縦に流し、出典は Figma の位置（上端1010）を下限に置く */
  .tt-access .tt-in { box-sizing: border-box; padding: calc(340 * var(--u)) 0 calc(69 * var(--u)); }
  .tt-access-side { display: flex; flex-direction: column; margin-left: calc(840 * var(--u)); width: calc(520 * var(--u)); min-height: calc(911 * var(--u)); }
  .tt-vert-access { right: calc(26 * var(--u)); top: calc(120 * var(--u)); }
  .tt-rule { position: absolute; left: calc(80 * var(--u)); top: calc(10 * var(--u)); width: calc(1280 * var(--u)); height: calc(30 * var(--u)); }
  .tt-access-title { position: absolute; left: calc(80 * var(--u)); top: calc(90 * var(--u)); margin: 0; font-size: calc(58 * var(--u)); letter-spacing: .04em; line-height: normal; text-shadow: 5px 5px 0 var(--tt-green-deep); white-space: nowrap; }
  .tt-access-title .tt-sen, .tt-note .tt-sen { display: inline; }
  .tt-introbox { position: absolute; left: calc(80 * var(--u)); top: calc(200 * var(--u)); width: calc(760 * var(--u)); margin: 0; font-size: max(15px, calc(17 * var(--u))); padding: calc(18 * var(--u)) calc(26 * var(--u)); box-shadow: 6px 6px 0 var(--tt-ink); }
  .tt-mapbox { position: absolute; left: calc(80 * var(--u)); top: calc(340 * var(--u)); width: calc(700 * var(--u)); margin: 0; padding: calc(18 * var(--u)); box-shadow: 10px 10px 0 var(--tt-citrus); transform: rotate(-.8deg); }
  .tt-mapbox figcaption { font-size: max(13px, calc(14 * var(--u))); margin-top: calc(14 * var(--u)); }
  .tt-mapbtns { position: absolute; left: calc(80 * var(--u)); top: calc(1010 * var(--u)); flex-direction: row; gap: calc(20 * var(--u)); margin: 0; }
  .tt-mapbtns .tt-btn { width: auto; font-size: max(14px, calc(15 * var(--u))); padding: calc(10 * var(--u)) calc(22 * var(--u)); }
  .tt-steps { margin: 0 0 24px; }
  .tt-step { padding: calc(20 * var(--u)) calc(24 * var(--u)) calc(20 * var(--u)) calc(92 * var(--u)); margin-bottom: calc(22 * var(--u)); box-shadow: 6px 6px 0 var(--tt-ink); }
  .tt-step-num { left: calc(18 * var(--u)); top: calc(18 * var(--u)); width: calc(56 * var(--u)); height: calc(56 * var(--u)); font-size: calc(30 * var(--u)); }
  .tt-step h3 { font-size: max(16px, calc(20 * var(--u))); line-height: 1.4; }
  .tt-step p { font-size: max(14px, calc(16 * var(--u))); margin-top: calc(6 * var(--u)); }
  .tt-note { padding: calc(16 * var(--u)) calc(22 * var(--u)); font-size: max(14px, calc(16 * var(--u))); }
  .tt-srcbox { margin: auto 0 0; font-size: max(13px, calc(14 * var(--u))); padding: calc(20 * var(--u)) calc(24 * var(--u)); }
  .tt-srcbox .tt-srcs-h { font-size: max(13px, calc(15 * var(--u))); margin-bottom: calc(6 * var(--u)); }

  /* 地図目次に 10px 重ね、重ならない縁の下には地図の下端を上下反転した帯を敷く（Figma 2504:186） */
  .tt-foot-under { height: 10px; background: url(/assets/img/contents-map/map-footer-desktop.webp) center bottom / 100% auto no-repeat; transform: scaleY(-1); }
  .tt-foot { margin-top: -20px; height: calc(240 * var(--u)); min-height: 180px; padding: 0; }
  .tt-foot .tt-in { display: flex; align-items: center; gap: calc(32 * var(--u)); height: 100%; padding: 0 calc(80 * var(--u)) calc(10 * var(--u)); max-width: none; }
  .tt-foot-logo { height: calc(70 * var(--u)); }
  .tt-foot-en { margin: 0; font-size: max(14px, calc(20 * var(--u))); }

  .tt-dialog-stage { padding: 20px 48px; }
  .tt-dialog-caption { padding-inline: 48px; font-size: 16px; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  /* 地図目次はこの幅ではスマホ用の絵（既存部品の切替）。紙色の帯で縁をつなぐ */
  .tt-foot-under { background: #fffcf2; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tt-btn:not(:disabled):active { transform: none; }
}