/* Discover Osaka Like a Local — mobile first. 全クラス dol- 接頭辞（Lightning G3 と共存させるため） */
:root {
  --dol-ink: #1c2541;
  --dol-ink-soft: #4a5370;
  --dol-paper: #faf7f2;
  --dol-card: #ffffff;
  --dol-line: #e7e1d6;
  --dol-red: #d1452c;      /* 朱色 */
  --dol-gold: #c99a2e;
  --dol-indigo: #2b3a67;
  --dol-neon-a: #ff3d9a;   /* 日本橋：ネオン */
  --dol-neon-b: #22d3ee;
  --dol-radius: 14px;
  --dol-shadow: 0 2px 10px rgba(28, 37, 65, .08);
  --dol-tabbar-h: 62px;
  --dol-font: system-ui, -apple-system, "Segoe UI", "Hiragino Sans", "Noto Sans JP", "Noto Sans TC", "Noto Sans KR", "Microsoft JhengHei", "Malgun Gothic", sans-serif;
}
* { box-sizing: border-box; }
body.dol { margin: 0; font-family: var(--dol-font); color: var(--dol-ink); background: var(--dol-paper); line-height: 1.75; -webkit-text-size-adjust: 100%; padding-bottom: calc(var(--dol-tabbar-h) + env(safe-area-inset-bottom)); }
.dol :lang(en) { line-height: 1.6; }
.dol a { color: inherit; }
.dol img { max-width: 100%; display: block; }
.dol h1, .dol h2, .dol h3 { line-height: 1.3; margin: 0 0 .5em; }
.dol-wrap { width: min(1160px, 100% - 32px); margin-inline: auto; }
.dol-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dol-skip { position: absolute; left: -999px; top: 8px; background: #fff; padding: 8px 12px; z-index: 100; }
.dol-skip:focus { left: 8px; }
.dol :focus-visible { outline: 3px solid var(--dol-gold); outline-offset: 2px; }
.dol-preview-banner { background: repeating-linear-gradient(45deg, #ffe08a, #ffe08a 12px, #ffd25c 12px, #ffd25c 24px); color: #4a3500; font-size: .8rem; font-weight: 700; text-align: center; padding: 6px 12px; }

/* ---------- header ---------- */
.dol-header { position: sticky; top: 0; z-index: 50; background: rgba(250, 247, 242, .94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--dol-line); }
.dol-header__inner { display: flex; align-items: center; gap: 12px; height: 60px; }
.dol-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; margin: 0; }
.dol-logo__mark { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--dol-red); color: #fff; font-weight: 800; font-size: 1.1rem; flex: none; }
/* 「大」は飾りなので CSS で表示し、文字としては読ませない（コピーや検索結果で「大Discover…」とつながらないように） */
.dol-logo__mark[data-mark]::before { content: attr(data-mark); }
.dol-logo__text { font-weight: 800; font-size: .95rem; line-height: 1.1; letter-spacing: .01em; }
.dol-logo__text small { display: block; font-weight: 600; font-size: .7rem; color: var(--dol-red); letter-spacing: .12em; text-transform: uppercase; }
.dol-nav { display: none; }
.dol-nav ul, .dol-lang ul, .dol-tabbar ul { list-style: none; margin: 0; padding: 0; }
.dol-lang { margin-left: auto; position: relative; font-size: .85rem; }
.dol-lang summary { cursor: pointer; list-style: none; padding: 6px 12px; border: 1px solid var(--dol-line); border-radius: 999px; background: #fff; white-space: nowrap; }
.dol-lang summary::-webkit-details-marker { display: none; }
.dol-lang summary::before { content: "🌐 "; }
.dol-lang ul { position: absolute; right: 0; top: calc(100% + 6px); background: #fff; border: 1px solid var(--dol-line); border-radius: 12px; box-shadow: var(--dol-shadow); min-width: 150px; padding: 6px; }
.dol-lang a { display: block; padding: 8px 12px; border-radius: 8px; text-decoration: none; }
.dol-lang a:hover { background: var(--dol-paper); }
.dol-lang a[aria-current] { font-weight: 700; color: var(--dol-red); }
.dol-burger { width: 42px; height: 42px; border: 0; background: transparent; position: relative; cursor: pointer; }
.dol-burger span:first-child, .dol-burger span:first-child::before, .dol-burger span:first-child::after { position: absolute; left: 10px; width: 22px; height: 2px; background: var(--dol-ink); content: ""; transition: .2s; }
.dol-burger span:first-child { top: 20px; }
.dol-burger span:first-child::before { left: 0; top: -7px; }
.dol-burger span:first-child::after { left: 0; top: 7px; }
.dol-burger[aria-expanded="true"] span:first-child { background: transparent; }
.dol-burger[aria-expanded="true"] span:first-child::before { top: 0; transform: rotate(45deg); }
.dol-burger[aria-expanded="true"] span:first-child::after { top: 0; transform: rotate(-45deg); }
.dol-nav.is-open { display: block; position: absolute; left: 0; right: 0; top: 60px; background: var(--dol-paper); border-bottom: 1px solid var(--dol-line); box-shadow: var(--dol-shadow); }
.dol-nav.is-open a { display: block; padding: 14px 20px; text-decoration: none; font-weight: 600; border-top: 1px solid var(--dol-line); }

/* ---------- mobile tab bar ---------- */
.dol-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: #fff; border-top: 1px solid var(--dol-line); padding-bottom: env(safe-area-inset-bottom); }
.dol-tabbar ul { display: flex; height: var(--dol-tabbar-h); }
.dol-tabbar li { flex: 1; }
.dol-tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; font-size: .68rem; text-decoration: none; color: var(--dol-ink-soft); gap: 2px; }
.dol-tabbar a[aria-current] { color: var(--dol-red); font-weight: 700; }
.dol-tab__icon { font-size: 1.2rem; line-height: 1; }

/* ---------- photo / placeholder ---------- */
.dol-photo { margin: 0; position: relative; overflow: hidden; border-radius: var(--dol-radius); aspect-ratio: 16 / 10; background: #ddd; }
.dol-photo img { width: 100%; height: 100%; object-fit: cover; }
.dol-photo--ph { background:
    radial-gradient(circle at 20% 25%, hsla(calc(var(--h) + 40), 80%, 75%, .9), transparent 55%),
    linear-gradient(135deg, hsl(var(--h), 55%, 52%), hsl(calc(var(--h) + 50), 50%, 32%));
  display: flex; align-items: flex-end; color: #fff; }
.dol-photo--neon { background:
    radial-gradient(circle at 25% 30%, rgba(255, 61, 154, .85), transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(34, 211, 238, .8), transparent 50%),
    linear-gradient(135deg, #1a1036, #0b1a33); }
.dol-photo__label { padding: 12px 14px; font-weight: 800; font-size: 1.05rem; text-shadow: 0 1px 6px rgba(0, 0, 0, .35); }
.dol-photo__badge { position: absolute; top: 10px; left: 10px; background: rgba(0, 0, 0, .55); color: #fff; font-size: .68rem; font-weight: 700; padding: 3px 8px; border-radius: 999px; letter-spacing: .04em; }
/* 写真のクレジット（2026-11-12）：写真の直下に右寄せ。スマホでも読める大きさ */
.dol-figure { margin: 0; }
.dol-photo__credit { margin: 3px 0 0; padding: 0 8px 0 0; text-align: right; font-size: .72rem; line-height: 1.4; color: var(--dol-ink-soft); overflow-wrap: anywhere; }
.dol-photo__credit a { color: inherit; }
.dol-card .dol-photo__credit { padding: 2px 10px 0; }
/* トップ・エリアの大きな背景写真：写真の右下に、背景付きで重ねる */
.dol-photo__credit--over { position: absolute; right: 8px; bottom: 6px; z-index: 2; margin: 0; padding: 2px 8px; border-radius: 6px; background: rgba(0, 0, 0, .5); color: #fff; font-size: .7rem; }
.dol-gallery .dol-figure { height: 100%; display: flex; flex-direction: column; }
.dol-gallery .dol-figure .dol-photo { flex: 1; }

/* ---------- hero ---------- */
.dol-hero { position: relative; min-height: 78vh; display: flex; align-items: flex-end; color: #fff; }
.dol-hero__bg { position: absolute; inset: 0; border-radius: 0; aspect-ratio: auto; }
.dol-hero__bg .dol-photo__label { display: none; }
.dol-hero__bg .dol-photo__badge { top: 14px; left: auto; right: 14px; }
.dol-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 14, 30, .05) 30%, rgba(10, 14, 30, .72)); }
.dol-hero__inner { position: relative; z-index: 1; padding: 40px 0 36px; }
.dol-hero__kicker { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: #ffd7a8; margin: 0 0 .5em; }
.dol-hero h1 { font-size: clamp(1.9rem, 7vw, 3.6rem); font-weight: 900; letter-spacing: -.01em; }
.dol-hero__lead { max-width: 40em; font-size: .98rem; opacity: .95; }
.dol-hero__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

.dol-btn { display: inline-flex; align-items: center; gap: 6px; padding: 12px 20px; border-radius: 999px; font-weight: 700; text-decoration: none; font-size: .92rem; }
.dol-btn--primary { background: var(--dol-red); color: #fff; }
.dol-btn--ghost { border: 2px solid #fff; color: #fff; }
.dol-btn--map { background: var(--dol-indigo); color: #fff !important; margin-top: 8px; }

/* ---------- sections / grid ---------- */
.dol-section { padding: 36px 0 8px; }
.dol-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.dol-section h2 { font-size: 1.35rem; font-weight: 800; position: relative; padding-left: 14px; }
.dol-section h2::before { content: ""; position: absolute; left: 0; top: .2em; bottom: .2em; width: 5px; border-radius: 3px; background: var(--dol-red); }
.dol-more { font-size: .85rem; font-weight: 700; color: var(--dol-red) !important; text-decoration: none; white-space: nowrap; }
.dol-lead { color: var(--dol-ink-soft); margin-top: 0; }
.dol-h1 { font-size: clamp(1.6rem, 5vw, 2.4rem); font-weight: 900; margin-top: 8px; }
.dol-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: 1fr; }
.dol-grid--scroll { grid-auto-flow: column; grid-auto-columns: 78%; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; margin-inline: -16px; padding-inline: 16px; }
.dol-grid--scroll > li { scroll-snap-align: start; }
.dol-card a { display: block; height: 100%; background: var(--dol-card); border-radius: var(--dol-radius); box-shadow: var(--dol-shadow); text-decoration: none; overflow: hidden; transition: transform .15s; }
.dol-card a:hover { transform: translateY(-2px); }
.dol-card__img { border-radius: 0; }
.dol-card__body { padding: 12px 14px 16px; }
.dol-card__title { font-size: 1.05rem; margin: 6px 0 4px; }
.dol-card__text { font-size: .87rem; color: var(--dol-ink-soft); margin: 0; }
.dol-card__meta { display: inline-block; margin-top: 8px; font-size: .75rem; font-weight: 700; color: var(--dol-red); }
.dol-chip { display: inline-block; font-size: .7rem; font-weight: 700; padding: 2px 10px; border-radius: 999px; background: #f3e9dc; color: #8a4b1e; text-decoration: none; }
.dol-chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* categories */
.dol-cats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dol-cat { display: flex; flex-direction: column; height: 100%; padding: 14px; border-radius: var(--dol-radius); color: #fff; text-decoration: none; min-height: 116px; background: var(--c, var(--dol-indigo)); }
.dol-cat__name { font-weight: 800; font-size: .95rem; line-height: 1.25; }
.dol-cat__label { font-size: .75rem; opacity: .9; font-weight: 700; }
.dol-cat__desc { font-size: .75rem; opacity: .85; margin-top: auto; line-height: 1.45; }
.dol-cat--highlights { --c: linear-gradient(135deg, #d1452c, #e7853a); }
.dol-cat--deep { --c: linear-gradient(135deg, #5b2a86, #ff3d9a); }
.dol-cat--historic { --c: linear-gradient(135deg, #6b4e2e, #b08b57); }
.dol-cat--samurai { --c: linear-gradient(135deg, #1c2541, #8a1c1c); }
.dol-cat--food { --c: linear-gradient(135deg, #e0a100, #d1452c); }
.dol-cat--nature-family { --c: linear-gradient(135deg, #2e7d4f, #7cb342); }
.dol-cat--cafe-shopping { --c: linear-gradient(135deg, #8a5a3c, #e0a96d); }
.dol-cat--night-seasonal { --c: linear-gradient(135deg, #14213d, #4b3f8f); }
/* 遊び・体験スポット特集（2026-11-12） */
.dol-exp-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 8px; }
.dol-exp-filter { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--dol-line); background: #fff; font: inherit; font-weight: 700; font-size: .88rem; cursor: pointer; color: var(--dol-ink); }
.dol-exp-filter[aria-pressed="true"] { background: var(--dol-red); border-color: var(--dol-red); color: #fff; }
.dol-exp-filter:focus-visible { outline: 2px solid var(--dol-indigo); outline-offset: 2px; }
.dol-exp-count { font-size: .85rem; color: var(--dol-ink-soft); margin: 0 0 12px; }
.dol-exps { list-style: none; padding: 0; margin: 0 0 32px; display: grid; gap: 20px; }
.dol-exp { background: var(--dol-card); border: 1px solid var(--dol-line); border-radius: var(--dol-radius); overflow: hidden; box-shadow: var(--dol-shadow); scroll-margin-top: 80px; }
.dol-exp[hidden] { display: none; }
.dol-exp__img { border-radius: 0; }
.dol-exp__body { padding: 14px 16px 18px; }
.dol-exp__name { margin: 8px 0 6px; font-size: 1.25rem; }
.dol-exp h4 { margin: 14px 0 4px; font-size: .95rem; }
.dol-exp__list { margin: 0; padding-left: 1.2em; font-size: .92rem; }
.dol-exp__tickets { margin: 14px 0 6px; }
.dol-exp__official { color: var(--dol-ink-soft); margin-left: 6px; }
.dol-exp__partners { margin: 8px 0; padding: 10px 12px; border: 1px dashed var(--dol-line); border-radius: 10px; font-size: .9rem; }
.dol-exp__pr { margin: 0 0 4px; }
.dol-exp__access { margin-top: 12px; }
@media (min-width: 960px) { .dol-exps { grid-template-columns: 1fr 1fr; } }
/* 季節イベント（2026-11-12） */
.dol-events { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 14px; }
.dol-event { background: var(--dol-card); border: 1px solid var(--dol-line); border-left: 4px solid var(--dol-indigo); border-radius: var(--dol-radius); padding: 14px 16px; box-shadow: var(--dol-shadow); }
.dol-event__status { margin: 0 0 4px; }
.dol-event__chip.is-now { background: var(--dol-red); border-color: var(--dol-red); color: #fff; }
.dol-event__year { font-size: .8rem; color: var(--dol-ink-soft); }
.dol-event__name { margin: 0 0 6px; font-size: 1.08rem; }
.dol-event__meta { display: grid; grid-template-columns: max-content 1fr; gap: 2px 12px; margin: 8px 0; font-size: .92rem; }
.dol-event__meta dt { font-weight: 700; color: var(--dol-ink-soft); }
.dol-event__meta dd { margin: 0; }
.dol-event h4 { margin: 10px 0 4px; font-size: .92rem; }
.dol-event__programs { margin: 0; padding-left: 1.2em; font-size: .9rem; }
.dol-event__programs li { margin-bottom: 4px; }
.dol-cat-head { padding: 22px; border-radius: var(--dol-radius); color: #fff; background: var(--c); margin: 8px 0 20px; }
.dol-cat-head h1 { font-size: 1.8rem; font-weight: 900; margin: 0; }
.dol-cat-head__label { font-weight: 700; margin: 0; opacity: .9; }

/* courses */
.dol-courses { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.dol-course-card a { display: block; padding: 16px 18px; background: var(--dol-card); border-radius: var(--dol-radius); box-shadow: var(--dol-shadow); text-decoration: none; border-left: 5px solid var(--dol-red); height: 100%; }
.dol-course-card h3 { font-size: 1.02rem; margin-bottom: 4px; }
.dol-course-card p { margin: 0; font-size: .87rem; color: var(--dol-ink-soft); }
.dol-course-card__stops { margin-top: 8px !important; font-size: .78rem !important; color: var(--dol-red) !important; font-weight: 600; }
.dol-steps { list-style: none; padding: 0; margin: 20px 0; display: grid; gap: 14px; counter-reset: s; }
.dol-step { position: relative; background: var(--dol-card); border-radius: var(--dol-radius); box-shadow: var(--dol-shadow); padding: 12px; }
.dol-step__num { position: absolute; top: -8px; left: -6px; z-index: 2; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--dol-red); color: #fff; font-weight: 800; }
.dol-step__link { display: grid; grid-template-columns: 96px 1fr; gap: 12px; text-decoration: none; align-items: center; }
.dol-step__link strong { display: block; }
.dol-step__link span span { font-size: .85rem; color: var(--dol-ink-soft); }
.dol-step__img { aspect-ratio: 1; }
.dol-step__img .dol-photo__label { display: none; }
.dol-step__map { display: inline-block; font-size: .78rem; margin-top: 8px; color: var(--dol-indigo); font-weight: 700; }
.dol-facts { display: flex; gap: 10px; margin: 0; flex-wrap: wrap; }
.dol-facts div { background: #fff; border: 1px solid var(--dol-line); border-radius: 12px; padding: 8px 14px; }
.dol-facts dt { font-size: .72rem; color: var(--dol-ink-soft); }
.dol-facts dd { margin: 0; font-weight: 700; }

/* map */
.dol-map { margin: 0; }
.dol-map svg { width: 100%; height: auto; display: block; }
.dol-map__bg { fill: #eef2f7; stroke: #d5dde8; }
.dol-map__river { fill: none; stroke: #9cc3e6; stroke-width: 14; stroke-linecap: round; opacity: .7; }
.dol-map__plateau { stroke: #c9b48a; stroke-width: 40; opacity: .25; stroke-linecap: round; }
.dol-map__north path { fill: var(--dol-ink); }
.dol-map__north text { font-size: 16px; font-weight: 800; fill: var(--dol-ink); }
.dol-map__pin circle { fill: var(--dol-red); stroke: #fff; stroke-width: 4; transition: r .15s; }
.dol-map__pin--neon circle { fill: var(--dol-neon-a); stroke: var(--dol-neon-b); }
.dol-map__pin text { font-size: 20px; font-weight: 800; fill: var(--dol-ink); paint-order: stroke; stroke: #eef2f7; stroke-width: 5px; }
.dol-map__pin:hover circle, .dol-map__pin:focus circle { r: 26; }
.dol-map--mini .dol-map__pin text { font-size: 24px; }
.dol-map figcaption { font-size: .78rem; color: var(--dol-ink-soft); margin-top: 6px; }
.dol-map-groups { display: grid; gap: 16px; margin-top: 24px; }
.dol-map-group { background: #fff; border-radius: var(--dol-radius); padding: 14px 18px; box-shadow: var(--dol-shadow); }
.dol-map-group h2 { font-size: 1.1rem; }
.dol-map-group ul { margin: 0; padding-left: 1.1em; }
.dol-ext { font-size: .75rem; color: var(--dol-indigo); margin-left: 4px; }

/* breadcrumbs */
.dol-bc ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; margin: 14px 0 0; padding: 0; font-size: .78rem; color: var(--dol-ink-soft); }
.dol-bc li + li::before { content: "›"; margin-right: 4px; }

/* spot / area */
.dol-spot__head { margin: 10px 0 14px; }
.dol-spot__hero { aspect-ratio: 16 / 9; margin-bottom: 20px; }
.dol-split { display: grid; gap: 24px; }
.dol-prose { font-size: 1rem; }
.dol-prose h2 { font-size: 1.2rem; margin-top: 1.6em; }
.dol-side { background: #fff; border-radius: var(--dol-radius); padding: 18px; box-shadow: var(--dol-shadow); align-self: start; }
.dol-side h2 { font-size: 1rem; margin-top: 1em; }
.dol-side h2:first-child { margin-top: 0; }
.dol-side h3 { font-size: .85rem; color: var(--dol-ink-soft); margin: 0 0 4px; }
.dol-side ul { margin: 0 0 4px; padding-left: 1.1em; font-size: .9rem; }
.dol-side__area a { font-weight: 700; color: var(--dol-red); text-decoration: none; }
.dol-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.dol-table th, .dol-table td { text-align: left; padding: 8px 4px; border-bottom: 1px solid var(--dol-line); vertical-align: top; }
.dol-table th { width: 7em; color: var(--dol-ink-soft); font-weight: 600; }
.dol-unverified { color: #9a6a00; font-size: .85em; }
.dol-note { font-size: .75rem; color: var(--dol-ink-soft); }
.dol-meta { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; font-size: .75rem; color: var(--dol-ink-soft); margin: 14px 0 0; border-top: 1px dashed var(--dol-line); padding-top: 10px; }
.dol-meta dd { margin: 0; }
.dol-history { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.dol-history__item { background: #fff; border-radius: 12px; padding: 12px 14px; border-left: 4px solid var(--b); }
.dol-history__item p { margin: 6px 0 0; }
.dol-history__item--fact, .dol-badge--fact { --b: #2b6cb0; }
.dol-history__item--tradition, .dol-badge--tradition { --b: #b7791f; }
.dol-history__item--legend, .dol-badge--legend { --b: #805ad5; }
.dol-badge { display: inline-block; font-size: .7rem; font-weight: 800; color: #fff; background: var(--b); padding: 2px 10px; border-radius: 999px; }
.dol-legend { list-style: none; display: flex; gap: 8px; padding: 0; margin: 8px 0 0; flex-wrap: wrap; }
.dol-tips { padding-left: 1.2em; }
.dol-tips li::marker { content: "💡 "; }
.dol-gallery { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dol-gallery li:first-child { grid-column: 1 / -1; }
.dol-gallery .dol-photo { aspect-ratio: 4 / 3; }
.dol-gallery li:first-child .dol-photo { aspect-ratio: 16 / 9; }

/* YouTube 動画（クリックで読み込み・16:9・画面幅に追従） */
.dol-videos { margin: 24px 0; }
.dol-video { margin: 0 0 16px; }
.dol-video__frame { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--dol-radius); background: #111; }
.dol-video__frame > a, .dol-video__frame > iframe, .dol-video__frame img { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.dol-video__frame img { object-fit: cover; transition: transform .3s; }
.dol-video__play { display: block; cursor: pointer; }
.dol-video__play:hover img, .dol-video__play:focus-visible img { transform: scale(1.03); }
.dol-video__play:focus-visible { outline: 3px solid var(--dol-red); outline-offset: -3px; }
.dol-video__btn { position: absolute; left: 50%; top: 50%; width: 68px; height: 48px; transform: translate(-50%, -50%); border-radius: 14px; background: rgba(230, 33, 23, .92); box-shadow: 0 4px 16px rgba(0, 0, 0, .35); }
.dol-video__btn::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-35%, -50%); border-style: solid; border-width: 10px 0 10px 17px; border-color: transparent transparent transparent #fff; }
.dol-video__cap { padding: 8px 2px 0; font-size: .92rem; }
.dol-video__title { display: block; }
.dol-video__desc { display: block; color: var(--dol-ink-soft); margin-top: 2px; }
.dol-videos--home { margin: 0; display: grid; gap: 16px; }
.dol-videos--home .dol-video { margin: 0; }
@media (min-width: 640px) { .dol-videos--home { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .dol-videos--home { grid-template-columns: repeat(3, 1fr); } }

/* 大阪からの日帰り観光・大阪への行き方 */
.dol-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 8px 0; }
.dol-routes { min-width: 100%; font-size: .9rem; }
.dol-routes th, .dol-routes td { vertical-align: top; }
.dol-routes td:not(:first-child), .dol-routes th:not(:first-child) { white-space: nowrap; }
.dol-routes small { color: var(--dol-ink-soft); }
.dol-routes td:first-child { min-width: 11em; }
.dol-sights { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.dol-sight { background: var(--dol-card); border: 1px solid var(--dol-line); border-radius: var(--dol-radius); padding: 10px 14px; }
.dol-sight h3 { margin: 0 0 2px; font-size: 1rem; }
.dol-sight p { margin: 0 0 4px; font-size: .92rem; }
.dol-steps--simple { padding-left: 1.4em; }
.dol-steps--simple li { margin: 4px 0; }
.dol-guide-sec { margin-bottom: 20px; }
.dol-tokyo-box { background: var(--dol-card); border: 1px solid var(--dol-line); border-left: 4px solid var(--dol-indigo); border-radius: var(--dol-radius); padding: 10px 14px; margin: 12px 0; }
.dol-tokyo-box h3 { margin: 0 0 8px; font-size: 1rem; }
.dol-tokyo-box p { margin: 8px 0 0; }
@media (min-width: 640px) { .dol-sights { grid-template-columns: 1fr 1fr; } }

/* 宿泊ガイド（Stay in Osaka） */
.dol-pr { display: inline-block; font-size: .68rem; font-weight: 800; letter-spacing: .04em; color: #7a5a00; background: #fff3c4; border: 1px solid #e6c65c; padding: 0 6px; border-radius: 4px; vertical-align: middle; }
.dol-stay-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.dol-stay-link { display: block; padding: 12px 14px; background: var(--dol-card); border: 1px solid var(--dol-line); border-radius: var(--dol-radius); color: inherit; text-decoration: none; }
.dol-stay-link strong { display: block; }
.dol-stay-link span { display: block; font-size: .88rem; color: var(--dol-ink-soft); margin-top: 2px; }
.dol-stay-link:hover strong { color: var(--dol-red); }
.dol-purposes { display: grid; gap: 10px; }
.dol-purpose { background: var(--dol-card); border: 1px solid var(--dol-line); border-radius: var(--dol-radius); padding: 12px 14px; }
.dol-purpose h3 { margin: 0 0 6px; font-size: 1rem; }
.dol-purpose ul { margin: 0; padding-left: 1.2em; }
.dol-stay-types { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.dol-stay-type { background: var(--dol-card); border-left: 4px solid var(--dol-indigo); border-radius: 8px; padding: 10px 14px; }
.dol-stay-type h3 { margin: 0 0 4px; font-size: 1rem; }
.dol-stay-type p { margin: 0; font-size: .92rem; }
.dol-pros, .dol-cons { padding-left: 1.3em; }
.dol-pros li::marker { content: "✓ "; color: #2e7d32; }
.dol-cons li::marker { content: "! "; color: var(--dol-red); font-weight: 800; }
.dol-stay-group { margin: 18px 0 8px; font-size: 1.05rem; }
.dol-stays { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.dol-stay { background: var(--dol-card); border: 1px solid var(--dol-line); border-radius: var(--dol-radius); overflow: hidden; box-shadow: var(--dol-shadow); }
.dol-stay--sponsored { border-color: #e6c65c; }
.dol-stay__img { border-radius: 0; }
.dol-stay__body { padding: 12px 14px 16px; }
.dol-stay__meta { margin: 0 0 4px; }
.dol-stay__name { margin: 0 0 4px; font-size: 1.15rem; }
.dol-stay__sub { margin: 10px 0 4px; font-size: .85rem; color: var(--dol-ink-soft); }
.dol-stay__address { font-size: .88rem; margin: 4px 0 0; }
.dol-stay__address strong { color: var(--dol-ink-soft); font-weight: 700; margin-right: 4px; }
.dol-stay__legal { font-size: .85rem; background: #f3f6fb; border-radius: 8px; padding: 8px 10px; }
.dol-stay__links { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 16px; margin-top: 12px; }
.dol-stay__booking { font-size: .88rem; }
.dol-stay__booking span { color: var(--dol-ink-soft); }
.dol-stay__booking ul { list-style: none; padding: 0; margin: 2px 0 0; display: flex; flex-wrap: wrap; gap: 4px 12px; }
.dol-stay-sponsored { background: #fffbea; border-radius: var(--dol-radius); padding: 4px 12px 12px; }
@media (min-width: 640px) {
  .dol-purposes { grid-template-columns: repeat(3, 1fr); }
  .dol-stay-types { grid-template-columns: 1fr 1fr; }
  .dol-stay-links { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 960px) {
  .dol-stays { grid-template-columns: 1fr 1fr; }
  .dol-stay-links { grid-template-columns: repeat(3, 1fr); }
}

.dol-area-hero { position: relative; color: #fff; min-height: 46vh; display: flex; align-items: flex-end; }
.dol-area-hero__bg { position: absolute; inset: 0; border-radius: 0; aspect-ratio: auto; }
.dol-area-hero__bg .dol-photo__label { display: none; }
.dol-area-hero__bg .dol-photo__badge { left: auto; right: 14px; }
.dol-area-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 20%, rgba(10, 14, 30, .75)); }
.dol-area-hero__inner { position: relative; z-index: 1; padding: 20px 0 28px; }
.dol-area-hero h1 { font-size: clamp(2rem, 8vw, 3.4rem); font-weight: 900; margin: 6px 0 4px; }
.dol-area-hero .dol-bc ol { color: rgba(255, 255, 255, .85); }
.dol-area-hero--neon h1 { text-shadow: 0 0 10px var(--dol-neon-a), 0 0 26px rgba(255, 61, 154, .6), 0 0 2px #fff; letter-spacing: .02em; }
.dol-area-hero--neon::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .04) 0 2px, transparent 2px 4px); }
.dol-area-nipponbashi .dol-section h2::before { background: linear-gradient(var(--dol-neon-a), var(--dol-neon-b)); }

/* policy / footer */
.dol-policy { margin: 40px 0 24px; padding: 18px 20px; border-radius: var(--dol-radius); background: #fff; border: 1px solid var(--dol-line); }
.dol-policy h2 { font-size: 1.05rem; }
.dol-policy p { font-size: .88rem; margin: 0; }
.dol-footer { background: var(--dol-ink); color: #e9ecf5; margin-top: 40px; padding: 32px 0 20px; font-size: .88rem; }
.dol-footer a { color: #e9ecf5; text-decoration: none; }
.dol-footer a:hover { text-decoration: underline; }
.dol-footer__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.dol-footer h2 { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: #ffd7a8; }
.dol-footer ul { list-style: none; padding: 0; margin: 0; }
.dol-footer li { margin: 4px 0; }
.dol-footer__policy { margin-top: 24px; font-size: .78rem; opacity: .85; }
.dol-footer .dol-note { color: #aeb5cc; }
.dol-footer__copy { font-size: .75rem; opacity: .7; }

/* root language chooser */
/* 言語選択ページ（2026-11-12 写真中心に改良。アニメーションなし・追加の画像やフォントなし） */
body.dol-root { padding-bottom: 0; background: #fff; }
.dol-root__page { max-width: 1040px; margin: 0 auto; padding: 16px 16px 40px; }
.dol-root__heroimg { aspect-ratio: 16 / 9; border-radius: 18px; }
.dol-root__heroimg .dol-photo__label { font-size: 1.4rem; }
.dol-root__intro { text-align: center; margin: 20px auto 8px; }
.dol-root__title { margin: 0; line-height: 1.3; font-size: clamp(1.5rem, 5vw, 2.2rem); font-weight: 800; letter-spacing: .01em; color: var(--dol-ink); }
.dol-root__sub { margin: 8px 0 4px; font-size: clamp(1rem, 3.2vw, 1.2rem); color: var(--dol-ink-soft); letter-spacing: .02em; }
.dol-root__lead { margin: 0; font-size: .95rem; color: var(--dol-ink); }
.dol-root__choose { text-align: center; margin: 24px auto 28px; max-width: 900px; }
.dol-root__choose h2 { margin: 0; font-size: 1.1rem; }
.dol-root__choose-sub { margin: 4px 0 12px; font-size: .82rem; color: var(--dol-ink-soft); }
.dol-root__langs { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dol-root__langs a { position: relative; display: block; padding: 16px 12px; background: #f4f4f2; border: 1px solid transparent; border-radius: 12px; text-decoration: none; font-weight: 700; color: var(--dol-ink); }
.dol-root__langs a:hover, .dol-root__langs a:focus-visible { background: #fff; border-color: var(--dol-line); box-shadow: var(--dol-shadow); }
.dol-root__langs a:focus-visible { outline: 2px solid var(--dol-indigo); outline-offset: 2px; }
.dol-root__langs a.is-suggested { background: #fff; border-color: var(--dol-red); }
.dol-root__langs a.is-suggested::after { content: attr(data-suggest); position: absolute; top: -9px; right: 10px; background: var(--dol-red); color: #fff; font-size: .68rem; font-weight: 700; padding: 1px 8px; border-radius: 999px; }
.dol-root__tiles { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.dol-root__tileimg { aspect-ratio: 1; border-radius: 14px; }
.dol-root__tileimg .dol-photo__label { display: none; }
.dol-root__title .dol-logo__mark { display: inline-grid; vertical-align: middle; margin: 0 8px 4px 0; width: 32px; height: 32px; font-size: 1rem; }
.dol-root__tileimg .dol-photo__badge { font-size: .58rem; top: 6px; left: 6px; right: 6px; text-align: center; padding: 2px 4px; }
.dol-root__tilelabel { margin: 6px 0 0; text-align: center; font-size: .85rem; font-weight: 600; }
@media (min-width: 720px) { .dol-root__page { padding-top: 24px; } .dol-root__heroimg { max-height: 52vh; width: 100%; } .dol-root__langs { grid-template-columns: repeat(4, 1fr); } .dol-root__tiles { gap: 16px; } }

/* ---------- tablet ---------- */
@media (min-width: 640px) {
  .dol-grid { grid-template-columns: repeat(2, 1fr); }
  .dol-grid--scroll { grid-auto-columns: 42%; }
  .dol-cats { grid-template-columns: repeat(3, 1fr); }
  .dol-courses { grid-template-columns: repeat(2, 1fr); }
  .dol-gallery { grid-template-columns: repeat(3, 1fr); }
  .dol-gallery li:first-child { grid-column: span 2; grid-row: span 2; }
  .dol-gallery li:first-child .dol-photo { aspect-ratio: auto; height: 100%; }
  .dol-map-groups { grid-template-columns: repeat(2, 1fr); }
  .dol-footer__cols { grid-template-columns: repeat(3, 1fr); }
}
/* ---------- desktop ---------- */
@media (min-width: 960px) {
  body.dol { padding-bottom: 0; }
  .dol-tabbar, .dol-burger { display: none; }
  .dol-header__inner { height: 68px; }
  .dol-nav { display: block; margin-left: auto; }
  .dol-nav ul { display: flex; gap: 4px; }
  .dol-nav a { display: block; padding: 8px 12px; border-radius: 8px; text-decoration: none; font-weight: 600; font-size: .92rem; }
  .dol-nav a:hover { background: #fff; color: var(--dol-red); }
  .dol-lang { margin-left: 8px; }
  .dol-hero { min-height: 72vh; }
  .dol-hero__inner { padding-bottom: 64px; }
  .dol-grid { grid-template-columns: repeat(3, 1fr); gap: 22px; }
  .dol-grid--scroll { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); grid-auto-columns: auto; overflow: visible; margin: 0; padding: 0; }
  .dol-grid--areas { grid-template-columns: repeat(3, 1fr); }
  .dol-cats { grid-template-columns: repeat(6, 1fr); }
  .dol-cat { min-height: 160px; }
  .dol-courses { grid-template-columns: repeat(3, 1fr); }
  .dol-split { grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; }
  .dol-side { position: sticky; top: 88px; }
  .dol-section { padding-top: 56px; }
  .dol-map--mini { max-width: 760px; }
  .dol-steps { grid-template-columns: repeat(2, 1fr); }
  .dol-map-groups { grid-template-columns: repeat(3, 1fr); }
}
/* ページ先頭へ戻るボタン（スクロールしたときだけ、目立たない半透明で右下に出す。スマホは下のタブバーの上） */
.dol-totop { position: fixed; right: 14px; bottom: calc(var(--dol-tabbar-h) + env(safe-area-inset-bottom) + 14px); z-index: 55; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(28, 37, 65, .15); background: rgba(255, 255, 255, .7); color: var(--dol-ink); font-size: 1.2rem; line-height: 1; cursor: pointer; box-shadow: 0 2px 8px rgba(28, 37, 65, .12); backdrop-filter: blur(4px); opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; }
.dol-totop.is-shown { opacity: .6; visibility: visible; }
.dol-totop:hover, .dol-totop:focus-visible { opacity: 1; }
.dol-totop:focus-visible { outline: 2px solid var(--dol-indigo); outline-offset: 2px; }
@media (min-width: 960px) { .dol-totop { right: 24px; bottom: 24px; } }
/* #review-xxx で来たとき、固定のヘッダーとタブに隠れないように */
.dol-review { scroll-margin-top: 130px; }
@media (prefers-reduced-motion: reduce) { .dol * { transition: none !important; } }

/* 調整: トップのヒーローは夕景トーン固定、日本橋のネオン仮画像は画像ごとに色相をずらす */
.dol-hero__bg.dol-photo--ph { background:
    radial-gradient(circle at 75% 20%, rgba(255, 196, 120, .95), transparent 45%),
    radial-gradient(circle at 15% 80%, rgba(209, 69, 44, .9), transparent 55%),
    linear-gradient(160deg, #f08a4b, #8e2c48 55%, #2b1d47); }
.dol-photo--neon { filter: hue-rotate(calc(var(--h) * .3deg)); }

/* 出典リスト（事実確認の根拠） */
.dol-sources__title { font-size: .8rem; color: var(--dol-ink-soft); margin: 14px 0 4px; }
.dol-sources { margin: 0; padding-left: 1.1em; font-size: .75rem; }
.dol-sources a { color: var(--dol-indigo); }
.dol-access small { color: var(--dol-ink-soft); }

/* ホテナビのホテルレビュー特集（2026-11-11） */
.dol-nav__sub a { padding-left: 36px !important; font-weight: 500; font-size: .92rem; }
.dol-nav__sub a::before { content: "└ "; color: var(--dol-ink-soft); }
@media (min-width: 960px) {
  .dol-nav__has-sub { position: relative; }
  .dol-nav ul.dol-nav__sub { display: none; position: absolute; top: 100%; left: 0; min-width: 200px; flex-direction: column; gap: 0; padding: 6px; background: var(--dol-paper); border: 1px solid var(--dol-line); border-radius: 10px; box-shadow: var(--dol-shadow); z-index: 60; }
  .dol-nav__has-sub:hover > .dol-nav__sub, .dol-nav__has-sub:focus-within > .dol-nav__sub { display: flex; }
  .dol-nav__sub a { padding: 8px 12px !important; white-space: nowrap; }
  .dol-nav__sub a::before { content: none; }
}
.dol-region-tabs { position: sticky; top: 60px; z-index: 20; background: rgba(250, 247, 242, .96); margin: 16px -20px 0; padding: 8px 20px; border-bottom: 1px solid var(--dol-line); }
.dol-region-tabs ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; overflow-x: auto; }
.dol-region-tabs a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--dol-line); background: #fff; text-decoration: none; font-weight: 700; white-space: nowrap; }
.dol-region-tabs a[aria-selected="true"] { background: var(--dol-red); border-color: var(--dol-red); color: #fff; }
.dol-region-tabs__n { font-size: .75rem; opacity: .8; }
.dol-region__role { font-size: .75rem; font-weight: 600; color: var(--dol-ink-soft); margin-left: 6px; }
.dol-region[hidden] { display: none; }
.dol-reviews { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.dol-review { background: var(--dol-card); border: 1px solid var(--dol-line); border-radius: var(--dol-radius); overflow: hidden; box-shadow: var(--dol-shadow); }
.dol-review__video { padding: 12px 12px 0; }
.dol-review__video .dol-video { margin-bottom: 8px; }
.dol-review__body { padding: 4px 14px 16px; }
.dol-review__lang { margin: 0 0 4px; }
.dol-review__credit { font-size: .82rem; color: var(--dol-ink-soft); margin: 0 0 6px; }
.dol-review__features { margin: 0; padding-left: 1.2em; font-size: .92rem; }
.dol-review-cta { margin: 32px 0; padding: 18px 20px; border-radius: var(--dol-radius); background: #fff; border: 1px solid var(--dol-line); border-left: 4px solid var(--dol-red); }
.dol-review-cta h2 { margin: 0 0 6px; font-size: 1.1rem; }
.dol-stay__review { margin: 12px 0 0; }
.dol-links { margin: 0; padding-left: 1.2em; }
@media (min-width: 960px) {
  .dol-region-tabs { top: 68px; }
  .dol-reviews { grid-template-columns: 1fr 1fr; }
}