/* 一番上の写真の紹介：写真のすぐ下の1行に、左に再生ボタンと時間、右に写真を送る点（Takeru, 11/9）。
   再生中は写真が場面ごとに替わり、読んでいる文が字幕で写真の上に出る。進み具合の線は写真の下の際。
   大きさは白銀比の刻み（silver.css の --s-*）から選ぶ。ボタンは 48px・角 4px（トークンの決まり） */
:is(.page-place, .page-audio) .intro { --intro-gap: var(--s-n3); --intro-inset: var(--s-n1); position: relative; isolation: isolate; touch-action: pan-y; user-select: none; }
:is(.page-place .detail__main, .page-audio .audio-try__player) > .media.intro { overflow: visible; margin-bottom: calc(var(--intro-gap) + 48px + var(--sp-3)); }
/* PC：写真の下の1行（48px）の下端を、右の列の最後「＋ 旅程に保存」（48px）の下端にそろえる（Takeru, 11/9） */
@media (min-width: 768px) { :is(.page-place .detail__main, .page-audio .audio-try__player) > .media.intro { margin-bottom: calc(var(--intro-gap) + 48px); } }
:is(.page-place, .page-audio) .intro img { -webkit-user-drag: none; }
:is(.page-place, .page-audio) .intro > img, :is(.page-place, .page-audio) .intro__photos, :is(.page-place, .page-audio) .intro .intro__photo, :is(.page-place, .page-audio) .intro::after { border-radius: inherit; }
:is(.page-place, .page-audio) .intro .intro__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .9s ease; z-index: 1; }
:is(.page-place, .page-audio) .intro .intro__photo.is-on { opacity: 1; }
:is(.page-place, .page-audio) .intro::after { content: ""; position: absolute; inset: auto 0 0; height: 45%; background: linear-gradient(to top, rgba(21, 21, 21, .62), rgba(21, 21, 21, .28) 45%, rgba(21, 21, 21, 0)); pointer-events: none; z-index: 2; opacity: 0; transition: opacity .4s ease; }
:is(.page-place, .page-audio) .intro.is-playing::after { opacity: 1; }

/* テロップ：映画の字幕のように、箱を敷かず白い文字だけ。写真の下のかげりと文字の影で読ませる（Takeru, 11/9「ださい」→ 軽く）。
   前の行がふっと消えてから、次の行がゆっくり浮かぶ。読んだところまでの色分けはしない */
:is(.page-place, .page-audio) .intro__caption { position: absolute; left: 0; right: 0; bottom: calc(var(--intro-inset) + var(--s-n2)); z-index: 3; width: fit-content; max-width: calc(100% - var(--intro-inset) * 4); margin: 0 auto; padding: 0; background: none; color: #fff; font-size: var(--s-2); font-weight: 700; letter-spacing: .04em; line-height: var(--lh-head); text-align: center; text-shadow: 0 1px 2px rgba(0, 0, 0, .55), 0 0 12px rgba(0, 0, 0, .35); text-wrap: balance; word-break: keep-all; overflow-wrap: anywhere; }
:is(.page-place, .page-audio) .intro__caption[hidden], :is(.page-place, .page-audio) .intro:not(.is-playing) .intro__caption { display: none; }

/* 写真の下の1行 */
/* 再生の部品の箱は写真の上端から下の1行までを覆う（線とデモ表示を写真の上に置くため）。触れるのは中の部品だけ */
:is(.page-place, .page-audio) .intro__player { position: absolute; top: 0; bottom: calc(-1 * (var(--intro-gap) + 48px)); left: 0; right: 0; z-index: 3; display: flex; align-items: flex-end; gap: var(--s-0); margin: 0; padding: 0; border: 0; background: none; color: var(--c-text); pointer-events: none; padding-right: calc(var(--intro-dots, 5) * 24px + var(--s-0)); }
:is(.page-place, .page-audio) .intro__player > * { pointer-events: auto; }
:is(.page-place, .page-audio) .intro__play { display: inline-grid; grid-template-columns: auto auto; align-items: center; justify-items: start; gap: var(--s-n1); min-height: 48px; padding: 0; border: 0; background: none; color: var(--c-text); font: inherit; font-size: var(--s-0); font-weight: 700; white-space: nowrap; flex-shrink: 0; cursor: pointer; }
:is(.page-place, .page-audio) .intro__icon { box-sizing: border-box; width: 48px; height: 48px; padding: 14px; border-radius: 50%; background: var(--component-button-primary-background); color: #fff; }
:is(.page-place, .page-audio) .intro__icon { transition: transform .15s ease, background-color .15s ease; }
:is(.page-place, .page-audio) .intro__play:hover .intro__icon { background: var(--component-button-primary-background-hover); transform: scale(1.04); }
:is(.page-place, .page-audio) .intro__play:active .intro__icon { transform: scale(.96); }
:is(.page-place, .page-audio) .intro__play:focus-visible { outline: 2px solid var(--base-color-ao); outline-offset: 3px; border-radius: 24px; }
:is(.page-place, .page-audio) .intro__icon, :is(.page-place, .page-audio) .intro__label { grid-area: 1 / 1; }
:is(.page-place, .page-audio) .intro__label { grid-column: 2; }
:is(.page-place, .page-audio) .intro__icon--pause, :is(.page-place, .page-audio) .intro__player[data-sg-state="playing"] .intro__icon--play { display: none; }
:is(.page-place, .page-audio) .intro__player[data-sg-state="playing"] .intro__icon--pause { display: block; }
/* Both labels keep their place so the row (and the time after it) never moves when the label changes. */
:is(.page-place, .page-audio) .intro__label--pause, :is(.page-place, .page-audio) .intro__player[data-sg-state="playing"] .intro__label--play { visibility: hidden; }
:is(.page-place, .page-audio) .intro__player[data-sg-state="playing"] .intro__label--pause { visibility: visible; }
:is(.page-place, .page-audio) .intro__time { align-self: flex-end; margin: 0; line-height: 48px; white-space: nowrap; font-size: var(--s-0); font-variant-numeric: tabular-nums; }
:is(.page-place, .page-audio) .intro__sep { margin: 0 .3em; opacity: .5; }

/* 進み具合の線：YouTube のスマホ版のように、写真の下の際に細く（Takeru, 11/9）。触れる高さは 24px、見える線は 3px */
:is(.page-place, .page-audio) .intro__seek { --intro-done: 0%; --intro-done-color: var(--base-color-ao-light); --intro-rest-color: rgba(128, 128, 128, .45); position: absolute; left: 0; right: 0; bottom: calc(48px + var(--intro-gap) - 10px); width: 100%; height: 24px; margin: 0; padding: 0; background: none; -webkit-appearance: none; appearance: none; cursor: pointer; touch-action: none; }
:is(.page-place, .page-audio) .intro__seek::-webkit-slider-runnable-track { height: 4px; border-radius: 0; background: linear-gradient(to right, var(--intro-done-color) var(--intro-done), var(--intro-rest-color) var(--intro-done)); }
:is(.page-place, .page-audio) .intro__seek::-moz-range-track { height: 4px; background: var(--intro-rest-color); }
:is(.page-place, .page-audio) .intro__seek::-moz-range-progress { height: 4px; background: var(--intro-done-color); }
:is(.page-place, .page-audio) .intro__seek::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; box-sizing: border-box; width: 14px; height: 14px; margin-top: -5px; border: 2px solid #fff; border-radius: 50%; background: var(--intro-done-color); box-shadow: 0 0 2px rgba(0, 0, 0, .5); }
:is(.page-place, .page-audio) .intro__seek::-moz-range-thumb { box-sizing: border-box; width: 14px; height: 14px; border: 2px solid #fff; border-radius: 50%; background: var(--intro-done-color); box-shadow: 0 0 2px rgba(0, 0, 0, .5); }
:is(.page-place, .page-audio) .intro:not(.is-playing) .intro__seek::-webkit-slider-thumb { opacity: 0; }
:is(.page-place, .page-audio) .intro:not(.is-playing) .intro__seek::-moz-range-thumb { opacity: 0; }
:is(.page-place, .page-audio) .intro__seek:focus-visible { outline: 2px solid var(--base-color-ao); outline-offset: 2px; }
:is(.page-place, .page-audio) .intro__player:not([data-sg-ready]) .intro__seek { display: none; }
/* 「音声は準備中」などのデモ表示（再生中だけ、写真の左上に小さく） */
:is(.page-place, .page-audio) .intro .intro__now { display: block; position: absolute; left: var(--intro-inset); bottom: auto; top: var(--intro-inset); margin: 0; font-size: var(--s-n2); }
:is(.page-place, .page-audio) .intro__title { display: none; }
:is(.page-place, .page-audio) .intro__now .hp__demo { display: none; margin: 0; white-space: nowrap; font-size: var(--s-n2); padding: 2px var(--s-n3); border-radius: 4px; background: rgba(21, 21, 21, .6); color: #fff; }
:is(.page-place, .page-audio) .intro.is-playing .intro__now .hp__demo { display: inline-block; }

/* 写真を送る点：写真の下の右。いまの写真だけ蒼の短い棒になる。落ち着いた形で（Takeru, 11/9） */
:is(.page-place, .page-audio) .intro__dots { position: absolute; top: calc(100% + var(--intro-gap)); right: 0; z-index: 4; display: flex; align-items: center; width: calc(var(--intro-dots, 5) * 24px); height: 48px; overflow: hidden; }
:is(.page-place, .page-audio) .intro__dots-track { display: flex; align-items: center; transform: translateX(calc(var(--intro-dots-first, 0) * -24px)); transition: transform .3s ease; }
:is(.page-place, .page-audio) .intro__dot.is-edge::before { transform: scale(.6); }
:is(.page-place, .page-audio) .intro__dot { display: grid; place-items: center; flex-shrink: 0; width: 24px; height: 32px; padding: 0; border: 0; background: none; cursor: pointer; }
:is(.page-place, .page-audio) .intro__dot::before { content: ""; width: 6px; height: 6px; border-radius: 3px; background: rgba(21, 21, 21, .5); transition: width .3s ease, background-color .3s ease, transform .3s ease; }
:is(.page-place, .page-audio) .intro__dot:hover::before { background: rgba(21, 21, 21, .7); }
:is(.page-place, .page-audio) .intro__dot[aria-current="true"]::before { width: 20px; background: var(--base-color-ao); }
:is(.page-place, .page-audio) .intro__dot:focus-visible { outline: 2px solid var(--base-color-ao); outline-offset: -2px; border-radius: 4px; }

/* 全画面のボタン（スマホだけ、写真の右下。横持ちのスマホでも出す） */
:is(.page-place, .page-audio) .intro__full { display: none; position: absolute; right: var(--s-n4); bottom: var(--s-n2); z-index: 4; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .45); color: #fff; cursor: pointer; }
:is(.page-place, .page-audio) .intro__full-out, :is(.page-place, .page-audio) .intro.is-full .intro__full-in { display: none; }
:is(.page-place, .page-audio) .intro.is-full .intro__full-out { display: inline; }
:is(.page-place, .page-audio) .intro__full:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* 全画面：黒地に写真をおさめ、スマホの動画プレーヤーと同じ並び。中央に再生、下に左から時間・右に全画面を終えるボタン、その下に線。
   再生中は3秒さわらないと部品が消え、画面を軽くたたくと出る */
html.intro-full-open { overflow: hidden; }
:is(.page-place .detail__main, .page-audio .audio-try__player) > .media.intro.is-full { position: fixed; inset: 0; z-index: 10000; width: auto; height: auto; min-height: 0; margin: 0; aspect-ratio: auto; border-radius: 0; background: #000; }
/* 全画面はいつも横向き（Takeru, 11/9）。向きを固定できない端末（iPhone など）で縦に持っているときは、画面ごと90度回して横にする */
@media (orientation: portrait) {
  :is(.page-place .detail__main, .page-audio .audio-try__player) > .media.intro.is-full { inset: auto; top: 0; left: 0; width: 100vh; height: 100vw; width: 100dvh; height: 100dvw; transform-origin: top left; transform: rotate(90deg) translateY(-100%); }
}
:is(.page-place, .page-audio) .intro.is-full > img, :is(.page-place, .page-audio) .intro.is-full .intro__photo { object-fit: contain; object-position: 50% 50% !important; border-radius: 0; }
:is(.page-place, .page-audio) .intro.is-full .media__ph, :is(.page-place, .page-audio) .intro.is-full .intro__dots { display: none; }
:is(.page-place, .page-audio) .intro.is-full::after { height: 40%; border-radius: 0; opacity: 1; }
:is(.page-place, .page-audio) .intro.is-full .intro__player { bottom: 0; padding-right: 0; }
:is(.page-place, .page-audio) .intro.is-full .intro__play { position: absolute; left: 50%; top: 50%; grid-template-columns: auto; place-items: center; gap: 0; width: 64px; height: 64px; min-height: 0; padding: 0; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(0, 0, 0, .45); color: #fff; }
:is(.page-place, .page-audio) .intro.is-full .intro__play:hover { background: rgba(0, 0, 0, .6); }
:is(.page-place, .page-audio) .intro.is-full .intro__label { display: none !important; }
:is(.page-place, .page-audio) .intro.is-full .intro__icon { width: 28px; height: 28px; padding: 0; background: none; }
:is(.page-place, .page-audio) .intro.is-full .intro__time { position: absolute; left: var(--s-0); bottom: calc(env(safe-area-inset-bottom) + 22px); color: #fff; font-size: var(--s-n1); line-height: 40px; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
:is(.page-place, .page-audio) .intro.is-full .intro__full { width: 44px; height: 44px; right: var(--s-n3); bottom: calc(env(safe-area-inset-bottom) + 22px); }
:is(.page-place, .page-audio) .intro.is-full .intro__seek { --intro-done-color: #fff; --intro-rest-color: rgba(255, 255, 255, .4); left: var(--s-0); right: auto; width: calc(100% - 2 * var(--s-0)); bottom: calc(env(safe-area-inset-bottom) + 12px); }
:is(.page-place, .page-audio) .intro.is-full .intro__seek::-webkit-slider-thumb { opacity: 1; }
:is(.page-place, .page-audio) .intro.is-full .intro__seek::-moz-range-thumb { opacity: 1; }
/* 字幕：いつも同じ高さ（時間と線のすぐ上）。部品が出ても消えても動かない（Takeru, 11/9） */
:is(.page-place, .page-audio) .intro.is-full .intro__caption { bottom: calc(env(safe-area-inset-bottom) + 34px); max-width: calc(100% - 2 * 112px); font-size: var(--s-2); }
:is(.page-place, .page-audio) .intro.is-full .intro__now { top: calc(env(safe-area-inset-top) + var(--s-0)); left: var(--s-0); }
:is(.page-place, .page-audio) .intro.is-full :is(.intro__play, .intro__time, .intro__seek, .intro__full, .intro__now) { transition: opacity .25s ease; }
:is(.page-place, .page-audio) .intro.is-full:not(.is-ui) :is(.intro__play, .intro__time, .intro__seek, .intro__full, .intro__now) { opacity: 0; pointer-events: none; }

@media (max-width: 767px), (pointer: coarse) and (max-height: 767px) {
  :is(.page-place, .page-audio) .intro__full { display: grid; }
}
:is(.page-place, .page-audio) .intro.is-full .intro__full { display: grid; }
@media (max-width: 767px) {
  :is(.page-place, .page-audio) .intro { --intro-inset: var(--s-n2); }
  /* スマホ：時間は「紹介を見る」のすぐ下に小さく置き、点と同じ行で競わせない（点が何個に増えてもぶつからない。Takeru, 11/11） */
  :is(.page-place, .page-audio) .intro__player { padding-right: calc(var(--intro-dots, 5) * 24px + 2px + var(--s-n3)); }
  :is(.page-place, .page-audio) .intro__play { gap: var(--s-n3); font-size: var(--s-n1); }
  :is(.page-place, .page-audio) .intro:not(.is-full) .intro__label { align-self: start; margin-top: 5px; line-height: 1.3; }
  :is(.page-place, .page-audio) .intro:not(.is-full) .intro__time { position: absolute; left: calc(48px + var(--s-n3)); bottom: 5px; font-size: var(--s-n2); line-height: 1.3; color: rgba(21, 21, 21, .72); }
  :is(.page-place, .page-audio) .intro__dots { right: 2px; }
  :is(.page-place, .page-audio) .intro__caption { bottom: var(--s-n2); max-width: calc(100% - 2 * (40px + var(--s-n4))); font-size: var(--s-0); letter-spacing: .02em; }
  :is(.page-place, .page-audio) .intro.is-full .intro__caption { max-width: calc(100% - 2 * 112px); }
  :is(.page-place, .page-audio) .intro.is-playing .intro__now .hp__demo { padding: 0 var(--s-n4); }
}
@media (prefers-reduced-motion: reduce) {
  :is(.page-place, .page-audio) .intro .intro__photo, :is(.page-place, .page-audio) .intro::after, :is(.page-place, .page-audio) .intro__dot::before, :is(.page-place, .page-audio) .intro__dots-track { transition: none; }
}