/* Readable activities, a speech position tied to the artwork, and a local base. */
.hero-art > .hero-speech { top:5%; left:63%; right:auto; width:max-content; max-width:35%; margin:0; z-index:3; font-size:13px; line-height:1.7; padding:10px 13px; border:0; border-radius:20px 20px 4px 20px; box-shadow:0 5px 25px #17455318; transform:rotate(-3deg); text-wrap:balance; animation:speech-arrive .2s 1s both; }
@keyframes speech-arrive { from { opacity:0; } to { opacity:1; } }
.hero-art > .hero-speech::after { content:""; position:absolute; left:22%; bottom:-7px; border-top:8px solid white; border-right:9px solid transparent; }
.hero[data-scene="sea"] .hero-art > .hero-speech { top:-12%; }
.hero[data-scene="forest"] .hero-art > .hero-speech { top:-5%; margin:0; }
.hero[data-scene="island"] .hero-art > .hero-speech { top:0; }
.hero[data-scene="town"] .hero-art > .hero-speech { top:1%; left:64%; }
.hero[data-scene="photo"] .hero-art > .hero-speech { top:1%; }
.card-top { align-items:flex-start; gap:10px; }
.card-top > span:first-child { flex-shrink:0; }
.card-top > span.experience-label { font-size:17px; font-weight:800; line-height:1.5; padding:9px 13px; border-radius:18px; max-width:calc(100% - 44px); text-align:left; text-wrap:balance; background:#fffef9f5; }
.hub-card-note { display:block; color:#00748a; font-size:12px; font-weight:700; margin-top:9px; }
.operator-intro { font-size:13px; line-height:1.9; margin-top:17px; }
.operator-intro a,.hub-note a,.guide-links a { color:#006b81; text-decoration:underline; text-underline-offset:4px; }
.hanon-section { max-width:1180px; margin:15px auto 75px; padding:42px; display:grid; grid-template-columns:1.1fr 1fr; gap:40px; background:linear-gradient(125deg,#e0f4ef,#f6f7e9); border:1px solid #b9ddd6; border-radius:30px 8px; }
.hanon-lead h2 { font-size:32px; line-height:1.6; margin:8px 0 20px; }
.hanon-lead p { font-size:15px; line-height:2; margin-bottom:17px; max-width:42em; }
.hanon-lead .eyebrow { font-size:10px; }
.hub-facts { display:flex; gap:8px; flex-wrap:wrap; margin:18px 0 24px; }
.hub-facts span { border:1px solid #9ac9c4; border-radius:6px; padding:5px 9px; font-size:12px; }
.hanon-lead .button { font-size:14px; padding:14px 18px; }
.hanon-lead .text-button { display:block; margin-top:12px; }
.hub-routes { display:grid; gap:13px; }
.hub-routes a { display:grid; align-content:center; gap:6px; background:#fffdf7; border-radius:14px; border:1px solid #d5e5dc; padding:20px 24px; }
.hub-routes small { color:#00748a; font-size:12px; }
.hub-routes strong { font-size:18px; }
.hub-routes span { font-size:13px; }
.hub-note { text-align:left; background:#eaf6ee; border-left:3px solid #008a9c; border-radius:0 13px 13px 0; padding:16px 18px; margin:22px 0 8px; }
.hub-note small { display:block; font-size:15px; font-weight:750; }
.hub-note p { font-size:14px; line-height:1.9; margin:8px 0; }
.hub-note a { font-size:13px; }
.result-sharing { border-top:1px solid #bad6d2; margin:40px auto 0; padding:28px 0 10px; max-width:930px; text-align:center; }
.result-sharing h2 { font-size:22px; margin-bottom:19px; }
.share-buttons { display:flex; justify-content:center; flex-wrap:wrap; gap:12px; }
.share-buttons .button { font-size:14px; padding:12px 19px; gap:8px; }
.share-note { font-size:12px; line-height:1.9; color:#4c6770; margin-top:16px; }
#share-dialog { max-width:540px; width:calc(100% - 32px); max-height:90dvh; overflow:auto; padding:25px; color:var(--ink); border:1px solid #abd7d5; border-radius:22px; background:var(--paper); }
#share-dialog::backdrop { background:#133d4d99; }
#share-dialog h2 { font-size:21px; padding-right:25px; }
#share-dialog > p { font-size:13px; line-height:1.9; margin:15px 0; }
#share-dialog .dialog-close { position:sticky; float:right; top:0; }
#share-image { display:block; width:min(270px,100%); height:auto; margin:18px auto; border:1px solid #c9ded8; border-radius:9px; }
[hidden],#share-image[hidden] { display:none!important; }
.print-result { display:none; }
.guide-main { max-width:1040px; padding:50px 28px; margin:auto; }
.guide-intro h1 { font-size:clamp(29px,4.2vw,48px); line-height:1.6; margin:12px 0 22px; }
.guide-intro > p { line-height:2; margin:15px 0; }
.guide-description { max-width:44em; }
.guide-actions { display:flex; gap:15px; flex-wrap:wrap; margin-top:28px; }
.guide-jump { display:flex; gap:10px; flex-wrap:wrap; margin:30px 0; }
.guide-jump a { padding:8px 14px; border-radius:30px; border:1px solid #9fcfd0; background:#eaf7f2; font-size:14px; }
.guide-base { background:#e5f3ed; padding:25px 30px; border-radius:18px; }
.guide-base h2 { font-size:23px; }
.guide-base p { margin-top:15px; line-height:1.9; }
.guide-route { margin-top:50px; padding:28px; background:white; border:1px solid #c7ded9; border-radius:22px; scroll-margin-top:100px; }
.guide-route-heading { display:grid; grid-template-columns:220px 1fr; gap:25px; align-items:center; }
.guide-route-heading img { width:100%; height:155px; object-fit:cover; border-radius:12px; }
.guide-route h2 { font-size:26px; line-height:1.65; margin:8px 0; }
.guide-route p { font-size:15px; line-height:1.95; }
.guide-transport { background:#edf7f5; padding:16px 20px; margin:25px 0; border-radius:8px; }
.guide-transport strong { display:block; margin-bottom:4px; }
.guide-steps { counter-reset:step; list-style:none; padding:0; }
.guide-steps li { padding:0 0 20px 46px; position:relative; }
.guide-steps li::before { counter-increment:step; content:counter(step,decimal-leading-zero); position:absolute; left:0; color:#00849a; font-weight:800; }
.guide-steps h3 { font-size:18px; margin-bottom:5px; }
.guide-caution { color:#576b67; font-size:13px!important; }
.guide-links { display:flex; flex-wrap:wrap; gap:12px 22px; margin-top:20px; font-size:13px; }
.guide-checklist { padding:35px 5px 0; }
.guide-checklist h2 { font-size:24px; margin-bottom:16px; }
.guide-checklist ul { padding-left:24px; line-height:2.1; margin-bottom:20px; }
.guide-source { font-size:12px; color:#576b67; margin-top:20px; }
@media(max-width:1000px) { .hanon-section { margin-left:25px; margin-right:25px; padding:30px; gap:24px; } }
@media(max-width:760px) {
 .hero-art > .hero-speech { font-size:11px; padding:8px 10px; left:63%; right:auto; }
 .card-top > span.experience-label { font-size:16px; }
 .hanon-section { grid-template-columns:1fr; margin:0 22px 45px; padding:24px; }
 .hanon-lead h2 { font-size:26px; }.hanon-lead p { font-size:14px; }.hub-routes a { padding:17px; }.hub-routes strong { font-size:17px; }
 .guide-main { padding:30px 20px; }.guide-route { padding:20px; }.guide-route-heading { grid-template-columns:1fr; gap:16px; }.guide-route-heading img { height:180px; }.guide-route h2 { font-size:24px; }.guide-base { padding:22px; }.guide-base h2 { font-size:21px; }
 .share-buttons { gap:10px; }.share-buttons .button { width:100%; }.operator-intro { font-size:12px; }
}
@media(max-width:350px) { .hero-art > .hero-speech { font-size:10px; padding:7px 8px; }.hanon-section { padding:20px; margin-left:16px; margin-right:16px; }.hanon-lead .button { font-size:12px; }.card-top > span.experience-label { font-size:15px; padding:8px 10px; } }
@page { size:A4; margin:14mm; }
@media print {
 * { animation:none!important; transition:none!important; box-shadow:none!important; text-shadow:none!important; }
 body { background:white!important; color:#173e4a!important; font-size:10pt; }
 body:not(.guide-page) > *:not(.print-result) { display:none!important; }
 body:not(.guide-page) > .print-result { display:block; }
 .print-result h1 { font-size:21pt; margin:8px 0 18px; }.print-result h2 { font-size:14pt; margin:14px 0 7px; }.print-result h3 { font-size:11pt; }.print-result p { font-size:10pt; line-height:1.7; margin:5px 0; }.print-intro { display:flex; gap:20px; align-items:center; }.print-intro img { width:145px; height:195px; object-fit:contain; }.print-spot { margin:13px 0; break-inside:avoid; }.print-result .hub-note { margin:14px 0; padding:10px 15px; }.print-result footer { font-size:8pt; line-height:1.7; margin-top:20px; }.print-result a { overflow-wrap:anywhere; }
 .guide-page .site-header,.guide-page .site-footer,.guide-actions,.guide-jump,.screen-only { display:none!important; }
 .guide-main { max-width:none; padding:0; }.guide-intro h1 { font-size:28pt; }.guide-intro > p { font-size:12pt; }.guide-base { margin-top:28px; padding:20px; }.guide-base p { font-size:11pt; }.guide-route { break-before:page; margin:0; padding:18px; }.guide-route-heading { grid-template-columns:180px 1fr; }.guide-route-heading img { height:130px; }.guide-route h2 { font-size:21pt; }.guide-route p { font-size:11pt; }.guide-steps li { padding-bottom:24px; }.guide-links { display:block; }.guide-links a { display:block; margin:10px 0; }.guide-links a::after { content:' (' attr(href) ')'; display:block; font-size:8pt; overflow-wrap:anywhere; }.guide-links a:first-child::after { content:'最新の経路はWeb版しおりのリンクから確認してください。'; }.guide-checklist { break-before:page; }.guide-checklist p { margin-top:15px; }
}

/* A visible, factual invitation from the site's operator, on every result tab. */
.stay-invite { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); background:#edf5e9; border:1px solid #c4dcd0; border-radius:24px 8px; overflow:hidden; margin:42px 0; }
.stay-invite figure { margin:0; position:relative; min-height:310px; }.stay-invite figure img { width:100%; height:100%; display:block; object-fit:cover; }.stay-invite figcaption { position:absolute; left:15px; bottom:15px; background:#fffef2e8; padding:5px 11px; border-radius:20px; font-size:10px; }
.stay-invite-copy { padding:30px; }.stay-invite-copy h2 { font-size:27px; line-height:1.6; margin:10px 0 15px; }.stay-invite-copy > p:not(.eyebrow) { font-size:14px; line-height:1.95; }.stay-invite-copy .eyebrow { font-size:10px; }.stay-facts { display:flex; flex-wrap:wrap; gap:7px; padding:0!important; margin:17px 0; list-style:none; }.stay-facts li { background:#ffffffb8; border:1px solid #bfdbcb; border-radius:5px; padding:5px 9px; font-size:12px; line-height:1.5; }.stay-invite-copy .button { font-size:14px; padding:15px 20px; line-height:1.7; }.stay-guide-link { display:block; color:#00798c; text-decoration:underline; text-underline-offset:4px; margin:17px 0; font-size:13px; }.stay-invite-copy > small { font-size:10px; color:#526d67; }
@media(max-width:700px) { .stay-invite { grid-template-columns:1fr; }.stay-invite figure { min-height:0; height:205px; }.stay-invite-copy { padding:23px; }.stay-invite-copy h2 { font-size:25px; }.stay-invite-copy .button { font-size:13px; padding:14px 16px; } }
@media print { .print-stay { background:#e9f3e9; border-left:3px solid #168183; padding:9px 13px; margin-top:12px; break-inside:avoid; font-size:10pt; }.print-result .print-stay p { font-size:9pt; }.print-result .print-stay a { font-size:9pt; } }

/* Home: make the lodging destination distinct from the on-site travel booklet. */
.hub-actions { display:grid; gap:16px; }
.hub-action { display:block; padding:19px 22px; border-radius:16px; border:2px solid transparent; text-decoration:none; transition:transform .18s,box-shadow .18s; }
.hub-action-stay { color:#fff; background:#15576a; border-color:#15576a; box-shadow:0 5px 0 #103e4a; }
.hub-action-guide { color:#174552; background:#fffdf7; border-color:#8bbcb8; }
.hub-action-label { display:flex; align-items:center; gap:8px; font-size:12px; line-height:1.5; }
.hub-action-label svg { width:21px; height:21px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.official-badge { margin-left:auto; border:1px solid #ffffff80; padding:2px 8px; border-radius:5px; font-size:10px; }
.hub-action strong { display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:21px; line-height:1.6; margin:9px 0 4px; }
.hub-action strong > span { flex-shrink:0; font-weight:400; }
.hub-action small { display:block; font-size:12px; line-height:1.8; }
.hub-action-stay small { color:#e0f3f1; }.hub-action-guide .hub-action-label { color:#427577; }
.hub-action:hover { transform:translateY(-2px); }.hub-action-guide:hover { background:#eff8f3; }.hub-action:focus-visible { outline:3px solid #c38337; outline-offset:5px; }
@media(max-width:600px) { .hub-action { padding:17px; }.hub-action strong { font-size:19px; }.hub-action small { font-size:11px; } }
@media(max-width:350px) { .hub-action { padding:15px 12px; }.hub-action strong { font-size:17px; }.hub-action-label { font-size:11px; }.official-badge { padding:2px 5px; } }
@media(prefers-reduced-motion:reduce) { .hub-action { transition:none; }.hub-action:hover { transform:none; } }