:root {
  --ink:#163f50; --muted:#526b76; --paper:#fffdf7; --aqua:#00a6c9;
  --deep:#007a96; --pale:#e2f6f7; --line:#c4dedf; --sun:#ffe59a;
  --font:"Hiragino Maru Gothic ProN","Hiragino Sans","Noto Sans JP",Meiryo,sans-serif;
}
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:92px; -webkit-text-size-adjust:100%; }
body { margin:0; color:var(--ink); background:var(--paper); font:15px/1.8 var(--font); overflow-wrap:anywhere; }
button,input,textarea { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
button { color:inherit; cursor:pointer; }
button:disabled { cursor:default; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
button { border:0; }
h1,h2,h3,p { margin:0; }
h1,h2,h3 { line-height:1.5; letter-spacing:.025em; }
button:focus-visible,a:focus-visible,summary:focus-visible { outline:3px solid #db7025; outline-offset:5px; }
[tabindex="-1"]:focus { outline:none; }
[hidden] { display:none!important; }
.phrase { display:inline-block; }
.skip-link { position:fixed; left:20px; top:-100px; padding:12px 20px; background:#fff; z-index:100; }
.skip-link:focus { top:12px; }
.site-header { min-height:86px; padding:16px max(30px,calc((100vw - 1180px)/2)); display:flex; justify-content:space-between; align-items:center; gap:22px; background:var(--paper); border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:11px; font-size:20px; font-weight:800; white-space:nowrap; line-height:1.35; }
.brand small { display:block; font-size:10px; font-weight:500; letter-spacing:.13em; margin-top:4px; }
.brand-mark { width:48px; height:48px; flex-shrink:0; object-fit:contain; }
.site-header nav { display:flex; align-items:center; gap:27px; font-size:12px; font-weight:700; }
.site-header nav a { border-bottom:1px solid transparent; }
.site-header nav a:hover { border-color:var(--aqua); }
.motion-button { background:white; border:1px solid var(--line); display:flex; align-items:center; gap:7px; border-radius:24px; padding:9px 13px; min-height:42px; font-size:11px; }
.eyebrow { color:var(--deep); font:700 11px/1.5 var(--font); letter-spacing:.17em; }
.hero { background:#e5f7f8; background-image:radial-gradient(#8ed5df70 .8px,transparent .8px); background-size:15px 15px; position:relative; }
.hero-inner { max-width:1180px; padding:50px 0 35px; margin:auto; display:grid; grid-template-columns:1fr 1.02fr; gap:50px; align-items:center; }
.hero-kicker { margin:16px 0 10px; font-size:14px; font-weight:700; }
.hero h1 { font-size:clamp(38px,4.6vw,60px); font-weight:850; line-height:1.4; letter-spacing:.025em; }
.hero h1 em { font-style:normal; color:var(--deep); background:linear-gradient(transparent 66%,#fff0a7 66%,#fff0a7 88%,transparent 88%); }
.hero-description { margin:21px 0; font-size:14px; line-height:1.9; }
.hero-actions { display:flex; align-items:flex-start; flex-direction:column; gap:10px; }
.button { display:inline-flex; justify-content:center; align-items:center; gap:30px; min-height:56px; padding:14px 26px; font-weight:750; font-size:14px; border-radius:100px; transition:transform .2s,box-shadow .2s; line-height:1.6; border:2px solid var(--ink); }
.button span { font-size:20px; line-height:1; }
.button.primary { background:var(--aqua); color:#073442; text-shadow:none; box-shadow:3px 4px 0 var(--ink); }
.button.primary:hover { transform:translate(-1px,-2px); box-shadow:5px 6px 0 var(--ink); background:#22b5d2; }
.button.secondary { background:var(--paper); box-shadow:3px 4px 0 #c2dedf; }
.hero-meta { font-size:11px; margin-top:15px; color:var(--muted); }
.hero-meta span { margin:0 9px; color:#9bbabd; }
.hero-stage { position:relative; max-width:550px; width:100%; padding:0 8px 0 0; }
#hero-story { padding:12px; background:white; border-radius:22px; border:2px solid var(--ink); box-shadow:8px 8px 0 #a8d9df; transform:rotate(2deg); }
.hero-art { background:var(--card-shade); position:relative; height:382px; border-radius:12px; overflow:hidden; isolation:isolate; }
.scene-svg { width:100%; height:100%; position:absolute; inset:0; z-index:0; }
.hero-art .scene-svg { opacity:.8; }
.hero-art > img { position:absolute; left:15%; bottom:2%; width:75%; height:89%; object-fit:contain; z-index:1; animation:bob 6s ease-in-out infinite; filter:drop-shadow(0 7px 3px #39594c16); }
.hero-speech { position:absolute; top:19px; left:17px; z-index:2; background:white; border:1.5px solid var(--ink); border-radius:20px 20px 20px 2px; padding:7px 13px; font-size:12px; font-weight:700; transform:rotate(-4deg); }
.hero-buddy { position:absolute; right:12px; bottom:12px; z-index:2; font-size:10px; background:#ffffffe8; padding:4px 10px; border-radius:20px; }
.hero-sticker { position:absolute; right:-16px; top:-27px; width:95px; height:95px; z-index:3; display:grid; place-content:center; text-align:center; font-weight:800; font-size:14px; line-height:1.4; background:var(--sun); border:1.5px solid var(--ink); border-radius:50%; transform:rotate(12deg); }
.hero-destination { display:flex; align-items:center; justify-content:space-between; width:100%; padding:13px 12px 5px; text-align:left; background:white; gap:10px; }
.hero-destination small { display:block; font-size:10px; font-weight:500; color:var(--muted); }
.hero-destination strong { display:block; font-size:22px; }
.hero-destination > span:last-child { display:grid; place-items:center; width:39px; height:39px; border-radius:50%; background:var(--sun); border:1px solid var(--ink); font-size:22px; flex-shrink:0; }
.hero-switcher { margin-top:24px; display:flex; justify-content:center; align-items:center; gap:17px; font-size:11px; font-weight:700; letter-spacing:.16em; }
.hero-switcher button { background:white; border:1px solid var(--ink); border-radius:50%; width:40px; height:40px; }
.hero-switcher button:hover { background:var(--sun); }
.hero-bottom { background:var(--aqua); padding:14px max(30px,calc((100vw - 1180px)/2)); display:flex; justify-content:space-between; gap:15px; color:#083947; font-size:12px; font-weight:750; border-top:1.5px solid var(--ink); border-bottom:1.5px solid var(--ink); }
.hero-bottom a { white-space:nowrap; }
.collection { max-width:1180px; margin:auto; padding:90px 0 70px; }
.section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:30px; margin-bottom:35px; }
h2 { font-size:32px; }
.section-heading h2 { margin-top:10px; }
.section-heading > p { font-size:13px; color:var(--muted); }
.mobile-only { display:none; }
.collection-toolbar { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-bottom:20px; }
.area-filters { display:flex; flex-wrap:wrap; gap:9px; }
.area-filters button { background:white; border:1px solid #a5c4cc; border-radius:30px; padding:8px 15px; min-height:42px; font-size:12px; }
.area-filters button[aria-pressed="true"] { background:var(--ink); color:white; border-color:var(--ink); }
.area-filters span { font-size:10px; opacity:.8; margin-left:5px; }
#collection-count { font-size:11px; color:var(--muted); }
.area-note { padding:15px 20px; background:#eaf7f5; display:flex; gap:15px; align-items:center; border-radius:12px; margin-bottom:27px; font-size:12px; min-height:66px; }
.area-note > span { font-size:29px; color:var(--deep); }
.cards-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:27px; align-items:start; }
.cards-grid[data-filter="shirahama"],.cards-grid[data-filter="wakayama"] { grid-template-columns:repeat(2,minmax(0,1fr)); max-width:840px; margin:0 auto; }
.card-item { min-width:0; animation:appear .45s both; }
.travel-card { padding:0; width:100%; background:white; border:1.5px solid var(--ink); border-radius:18px; overflow:hidden; text-align:left; color:var(--ink); display:block; box-shadow:3px 4px 0 #cce4e3; transition:transform .25s,box-shadow .25s; }
button.travel-card:hover { box-shadow:5px 8px 0 #b9dfe0; }
.card-art { position:relative; display:block; height:275px; background:var(--card-shade); overflow:hidden; isolation:isolate; border-bottom:1px solid #bed1d1; }
.card-art .scene-svg { opacity:.75; }
.card-top { position:absolute; top:13px; left:14px; right:14px; display:flex; align-items:center; justify-content:space-between; gap:9px; z-index:2; }
.card-top > span:first-child { font-size:12px; font-weight:800; background:#ffffffd9; width:31px; height:31px; display:grid; place-items:center; border:1px solid var(--ink); border-radius:50%; }
.card-top > span:last-child { font-weight:700; font-size:11px; background:#ffffffeb; border-radius:24px; padding:3px 10px; }
.pair-image { position:absolute; width:82%; height:85%; object-fit:contain; bottom:3%; left:9%; z-index:1; transition:transform .45s; filter:drop-shadow(0 5px 3px #163f5012); }
.travel-card:hover .pair-image { transform:translateY(-3px) rotate(-1deg); }
.cat-badge { position:absolute; bottom:9px; right:10px; z-index:2; padding:3px 10px; border-radius:20px; background:#fffdf7ed; border:1px solid #92aab9; font-size:10px; }
.card-body { display:block; padding:16px 19px 14px; }
.card-area { display:block; font-size:10px; color:var(--muted); letter-spacing:.04em; }
.card-name { display:block; font-size:20px; font-weight:800; line-height:1.5; margin:5px 0; }
.card-motto { font-size:12px; color:var(--deep); font-weight:700; display:block; }
.card-bottom { display:flex; justify-content:space-between; align-items:center; gap:7px; border-top:1px dashed #bfd5d8; margin-top:13px; padding-top:11px; font-size:11px; }
.card-arrow { border:1px solid var(--ink); border-radius:50%; width:28px; height:28px; flex-shrink:0; display:grid; place-items:center; font-size:18px; background:var(--card-shade); }
.comparison-note { margin-top:38px; padding:30px 34px; display:grid; grid-template-columns:1fr 1fr; gap:22px 30px; border:1px dashed #7da9b2; border-radius:18px; background:#f7fbf7; }
.comparison-note > div + div { padding-left:30px; border-left:1px solid var(--line); }
.comparison-note span { font-size:10px; color:var(--deep); letter-spacing:.15em; }
.comparison-note h3 { font-size:18px; margin:5px 0 9px; }
.comparison-note button { background:transparent; border-bottom:1px solid #92bcc3; padding:5px 0; font-size:13px; }
.comparison-foot { grid-column:1/-1; font-size:11px; color:var(--muted); border-top:1px solid var(--line); padding-top:18px; }
.about-section { display:grid; grid-template-columns:.85fr 1fr; gap:65px; align-items:center; max-width:1060px; padding:40px 0 100px; margin:auto; }
.about-illustration { position:relative; min-height:460px; display:flex; align-items:center; justify-content:center; }
.about-circle { position:absolute; width:360px; height:360px; background:#dff2ee; border-radius:50% 40% 45% 42%; transform:rotate(8deg); }
.about-illustration img { width:310px; height:auto; position:relative; animation:bob 5.5s ease-in-out infinite; }
.speech { position:absolute; top:5px; right:-5px; background:white; border:1.5px solid var(--ink); padding:14px 20px; border-radius:23px 23px 23px 1px; font-size:15px; font-weight:700; transform:rotate(6deg); }
.about-copy h2 { font-size:30px; margin:10px 0 20px; }
.about-copy > p { font-size:13px; }
.steps { padding:0; margin:28px 0; list-style:none; }
.steps li { display:flex; gap:17px; margin:19px 0; align-items:flex-start; }
.steps li > span { background:var(--pale); width:36px; height:36px; border:1px solid var(--line); border-radius:50%; display:grid; place-items:center; flex-shrink:0; font-size:11px; font-weight:800; }
.steps h3 { font-size:14px; }
.steps p { font-size:12px; color:var(--muted); margin-top:3px; }
.faq-section { background:#f0f8f4; padding:65px max(24px,calc((100vw - 880px)/2)); }
.faq-section h2 { font-size:27px; margin:10px 0 27px; }
.faq-list details { background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:17px 22px; margin:12px 0; }
summary { cursor:pointer; font-weight:700; }
.faq-list summary { display:flex; justify-content:space-between; align-items:center; gap:20px; font-size:13px; list-style:none; }
.faq-list summary::-webkit-details-marker { display:none; }
.faq-list details[open] summary > span { transform:rotate(45deg); }
.faq-list p { font-size:12px; color:var(--muted); padding-top:14px; }
.closing { text-align:center; padding:70px 20px 90px; }
.closing > span { color:var(--deep); font-size:30px; }
.closing p { font-size:32px; font-weight:800; margin:8px 0 26px; }
.site-footer { padding:37px 20px 29px; background:#dff3f3; border-top:1px solid var(--line); text-align:center; }
.footer-brand { justify-content:center; font-size:18px; margin-bottom:20px; }
.site-footer p { font-size:12px; }
.site-footer .footer-note { color:var(--muted); font-size:10px; margin:16px 0; }
.site-footer > small { font-size:10px; letter-spacing:.06em; }
.text-button { background:transparent; padding:5px 0; font-size:12px; border-bottom:1px solid #a0c2c8; min-height:44px; }
.quiz-view { max-width:1000px; min-height:calc(100vh - 250px); margin:0 auto; padding:42px 20px 70px; }
.quiz-topline { display:flex; justify-content:space-between; align-items:center; font-size:11px; margin-bottom:10px; }
.quiz-topline strong { font-size:22px; color:var(--deep); }
.quiz-progress { display:block; width:100%; height:8px; appearance:none; border:0; border-radius:20px; background:#dbeeed; overflow:hidden; }
.quiz-progress::-webkit-progress-bar { background:#dbeeed; }
.quiz-progress::-webkit-progress-value { background:var(--aqua); transition:width .3s; }
.quiz-progress::-moz-progress-bar { background:var(--aqua); }
.quiz-layout { display:grid; grid-template-columns:270px minmax(0,1fr); gap:65px; align-items:center; padding:48px 0 0; }
.quiz-guide { display:flex; flex-direction:column; align-items:center; }
.quiz-guide img { width:230px; height:auto; }
.quiz-guide p { margin-top:15px; text-align:center; font-size:13px; background:var(--pale); border-radius:20px; padding:13px 20px; }
.question-content { animation:appear .35s both; }
.question-heading { font-size:25px; line-height:1.7; margin:10px 0 8px; }
.question-note { color:var(--muted); font-size:12px; margin-bottom:22px; }
.answers { display:grid; gap:12px; }
.answer { display:flex; align-items:center; text-align:left; gap:13px; border:1px solid #9ebbc4; background:white; border-radius:12px; min-height:66px; padding:13px 16px; font-size:13px; transition:background .15s,border .15s,transform .15s; }
.answer > span:first-child { font-size:11px; font-weight:800; width:29px; height:29px; border-radius:50%; background:#e9f5f5; display:grid; place-items:center; flex-shrink:0; }
.answer > span:last-child { margin-left:auto; opacity:0; }
.answer:hover { border-color:var(--deep); background:#f0fafa; transform:translateX(3px); }
.answer[aria-pressed="true"] { border:2px solid var(--deep); background:#d9f4f5; padding:12px 15px; }
.answer[aria-pressed="true"] > span:last-child { opacity:1; }
.quiz-bottom { display:flex; justify-content:space-between; gap:15px; margin-top:22px; }
.quiz-bottom-note { font-size:10px; color:var(--muted); margin-top:16px; }
.loading-view { padding:70px 0; text-align:center; }
.loading-deck { display:grid; place-items:center; width:94px; height:120px; background:var(--pale); border:2px solid var(--ink); border-radius:17px; margin:0 auto 35px; font-size:40px; color:var(--deep); animation:bob 1s infinite; }
.loading-view h2 { font-size:25px; }
.loading-view p { margin-top:15px; font-size:12px; }
.result-view { max-width:1080px; margin:auto; padding:42px 20px 70px; min-height:650px; }
.result-heading { text-align:center; }
.result-heading h1 { font-size:30px; margin:9px 0; }
.result-heading > p:last-child { font-size:12px; color:var(--muted); }
.result-nav { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:27px auto 36px; max-width:800px; }
.result-nav button { border:1px solid var(--line); background:white; border-radius:10px; font-size:12px; padding:12px 5px; }
.result-nav button > span:first-child { display:block; font-size:9px; margin-bottom:3px; color:var(--deep); }
.result-nav .nav-name { display:block; color:inherit; }
.result-nav .nav-name .phrase { display:inline-block; }
.result-nav button.active { background:var(--pale); border:1.5px solid var(--deep); font-weight:700; }
.result-panel { animation:appear .5s both; }
.result-pair { display:grid; grid-template-columns:330px minmax(0,1fr); gap:65px; align-items:center; max-width:930px; margin:auto; }
.result-copy h2 { font-size:31px; margin:12px 0; }
.result-copy .description { font-size:14px; }
.tags { display:flex; flex-wrap:wrap; gap:7px; margin:18px 0; }
.tags span { font-size:11px; background:#e7f3ef; padding:4px 10px; border-radius:20px; }
.difference-note { background:#eaf6f5; border-left:3px solid var(--aqua); padding:13px 16px; margin:17px 0; font-size:12px; }
.sensei-note { display:flex; align-items:center; gap:12px; margin-top:22px; }
.sensei-note > span { font-size:35px; color:var(--deep); }
.sensei-note small { display:block; font-size:10px; color:var(--muted); }
.sensei-note p { font-size:13px; }
.tie-note { font-size:10px; color:var(--muted); margin-top:15px; }
.result-next { margin-top:36px; border-top:1px solid var(--line); padding-top:25px; display:flex; align-items:center; justify-content:space-between; gap:14px; font-size:11px; }
.panel-intro { text-align:center; margin-bottom:30px; }
.panel-intro h2 { font-size:25px; margin:9px 0; }
.panel-intro p:last-child { font-size:12px; color:var(--muted); }
.spot-list { display:grid; gap:20px; }
.spot-row { display:grid; grid-template-columns:160px minmax(0,1fr); gap:25px; border:1px solid var(--line); border-radius:15px; padding:23px; background:white; }
.spot-visual { position:relative; width:160px; height:190px; border-radius:12px; overflow:hidden; background:var(--card-shade); }
.spot-visual > svg:last-child { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:70px; height:70px; color:#214b54; }
.spot-row h3 { font-size:22px; margin:7px 0; }
.spot-row p { font-size:12px; }
.spot-row .eyebrow { font-size:10px; }
.spot-caution { color:var(--muted); font-size:11px!important; }
.spot-links { display:flex; gap:15px; flex-wrap:wrap; margin:16px 0 8px; }
.spot-links a { border-bottom:1px solid var(--deep); font-size:12px; color:var(--deep); padding:3px 0; }
.reasons-layout { display:grid; grid-template-columns:1fr 1fr; gap:55px; padding:15px 15px 28px; }
.axis-chart { display:grid; gap:14px; margin-top:20px; }
.axis-label { display:flex; justify-content:space-between; font-size:12px; margin-bottom:5px; }
.axis-bar { background:#deeeed; border-radius:10px; height:10px; overflow:hidden; }
.axis-bar i { height:100%; background:var(--aqua); display:block; border-radius:10px; animation:grow 1s both; transform-origin:left; }
.chart-note { font-size:10px; color:var(--muted); margin-top:17px; }
.reason-item { background:#eaf6f5; border-radius:12px; padding:15px 18px; margin:12px 0; }
.reason-item p { font-size:10px; color:var(--muted); }
.reason-item strong { font-size:13px; display:block; margin-top:7px; }
.result-method,.answers-disclosure { border-top:1px solid var(--line); padding:17px 0; font-size:12px; }
.result-method p { padding:13px 0; color:var(--muted); font-size:11px; }
.answer-review { padding-left:20px; }
.answer-review button { background:transparent; text-align:left; padding:8px; border-bottom:1px solid var(--line); width:100%; font-size:12px; }
.answer-review small { display:block; color:var(--muted); }
.takeaway { text-align:center; padding:15px 0 20px; }
.takeaway > img { margin:0 auto 10px; width:120px; height:auto; }
.takeaway h2 { font-size:30px; margin:9px 0 17px; }
.takeaway p { font-size:13px; }
.takeaway-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:15px; margin:25px 0 18px; }
.takeaway .share-note { font-size:10px; color:var(--muted); margin-bottom:20px; }
.copy-fallback { display:block; width:100%; max-width:600px; margin:20px auto; min-height:170px; border:1px solid var(--line); border-radius:12px; padding:15px; font-size:12px; }
.insufficient { max-width:700px; margin:auto; }
.insufficient > p { font-size:13px; margin:12px 0; }
.review-list { display:grid; gap:10px; margin:24px 0; }
.review-list button { background:white; border:1px solid var(--line); padding:15px; text-align:left; border-radius:10px; font-size:12px; }
.review-list span { color:var(--deep); margin-right:12px; }
dialog { border:1.5px solid var(--ink); border-radius:22px; padding:38px; width:min(940px,calc(100% - 40px)); max-height:90dvh; overflow-y:auto; color:var(--ink); background:var(--paper); }
dialog::backdrop { background:#17333b90; backdrop-filter:blur(5px); }
.dialog-close { position:sticky; top:0; float:right; z-index:5; width:39px; height:39px; border:1px solid var(--ink); background:white; border-radius:50%; font-size:25px; margin:-20px -20px 0 0; }
.dialog-layout { display:grid; grid-template-columns:300px minmax(0,1fr); gap:34px; align-items:center; }
.dialog-copy h2 { font-size:25px; margin:9px 0 12px; }
.dialog-copy h3 { font-size:20px; margin:10px 0; }
.dialog-copy p { font-size:12px; }
.dialog-copy .district-label { font-size:11px; color:var(--deep); margin-bottom:12px; }
.dialog-copy .preview-label { font-size:10px; color:var(--muted); margin:16px 0 12px; }
.dialog-copy .button { font-size:12px; min-height:49px; padding:10px 20px; }
.toast { position:fixed; bottom:25px; left:50%; transform:translate(-50%,20px); width:max-content; max-width:90%; z-index:30; background:var(--ink); color:white; padding:12px 22px; border-radius:40px; font-size:12px; opacity:0; pointer-events:none; transition:.25s; }
.toast.visible { opacity:1; transform:translate(-50%,0); }
.noscript { position:fixed; bottom:0; background:white; border-top:2px solid var(--deep); padding:20px; z-index:50; width:100%; }
@keyframes bob { 0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-7px) rotate(1deg)} }
@keyframes appear { from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)} }
@keyframes grow { from{transform:scaleX(0)}to{transform:scaleX(1)} }
.js-motion .reveal { opacity:0; transform:translateY(18px); transition:opacity .6s,transform .6s; }
.js-motion .reveal.in-view { opacity:1; transform:none; }
.motion-off *, .motion-off *::before,.motion-off *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
.motion-off .reveal { opacity:1; transform:none; }
@media(min-width:1280px) { .hero-inner { min-height:610px; } }
@media(max-width:1250px) { .hero-inner,.collection { margin-left:40px; margin-right:40px; } .about-section { margin-left:55px; margin-right:55px; } .hero h1 { font-size:46px; } }
@media(max-width:1000px) {
 .hero-inner { gap:30px; } .hero h1 { font-size:39px; } .hero-art { height:335px; }
 .hero-sticker { right:-12px; width:78px; height:78px; font-size:12px; }
 .cards-grid { gap:20px; } .card-art { height:235px; } .card-body { padding:14px; } .card-name { font-size:17px; }
 .card-bottom { font-size:10px; } .about-section { gap:30px; } .about-circle { width:300px; height:300px; }
 .quiz-layout { grid-template-columns:215px minmax(0,1fr); gap:35px; } .result-pair { gap:35px; grid-template-columns:290px minmax(0,1fr); }
 .site-header { padding:16px 25px; } .site-header nav { gap:18px; }
}
@media(max-width:760px) {
 html { scroll-padding-top:20px; } .site-header { min-height:73px; padding:13px 20px; gap:10px; } .brand { font-size:17px; gap:8px; } .brand small { font-size:9px; } .brand-mark { width:40px; height:40px; }
 .site-header nav > a { display:none; } .motion-button { padding:8px 11px; } .motion-label { display:none; }
 .hero-inner { margin:0; padding:32px 26px 24px; grid-template-columns:1fr; gap:30px; }
 .hero-copy { text-align:center; } .hero h1 { font-size:40px; line-height:1.4; } .hero-kicker { font-size:12px; margin:12px 0; }
 .hero-description { margin:17px 0; font-size:12px; } .hero-actions { align-items:center; } .hero .eyebrow { font-size:9px; }
 .hero-stage { max-width:440px; margin:0 auto; padding:6px 9px; } .hero-art { height:320px; } .hero-sticker { top:-11px; right:-1px; width:72px; height:72px; font-size:11px; }
 .hero-speech { font-size:11px; top:15px; left:10px; } .hero-destination strong { font-size:20px; } .hero-switcher { margin-top:21px; }
 .hero-bottom { padding:12px 22px; font-size:10px; flex-direction:column; align-items:center; gap:2px; }
 .collection { padding:55px 0 40px; margin:0 22px; } .section-heading { display:block; margin-bottom:24px; } .section-heading h2 { font-size:29px; } .section-heading > p { margin-top:17px; font-size:12px; }
 .collection-toolbar { align-items:flex-start; flex-direction:column; gap:10px; } .area-filters { gap:7px; } .area-filters button { padding:7px 12px; font-size:11px; }
 .area-note { font-size:11px; padding:12px 14px; gap:10px; } .area-note > span { font-size:24px; }
 .cards-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; } .card-art { height:250px; } .card-name { font-size:17px; } .card-top { top:9px; left:8px; right:8px; gap:5px; } .card-top > span:last-child { font-size:9px; padding:3px 7px; }
 .comparison-note { padding:23px; gap:20px; } .comparison-note > div + div { padding-left:20px; } .comparison-note h3 { font-size:15px; } .comparison-note button { font-size:11px; }
 .about-section { grid-template-columns:1fr; gap:10px; margin:0 28px; padding:0 0 55px; } .about-illustration { min-height:340px; max-width:360px; width:100%; margin:auto; } .about-illustration img { width:235px; } .about-circle { width:285px; height:285px; } .speech { font-size:12px; top:15px; right:0; }
 .about-copy { max-width:490px; margin:auto; } .about-copy h2 { font-size:26px; } .faq-section { padding:45px 22px; } .faq-section h2 { font-size:23px; } .faq-list details { padding:16px; } .faq-list summary { font-size:12px; }
 .closing { padding:48px 20px 60px; } .closing p { font-size:27px; }
 .quiz-view { padding:24px 22px 45px; } .quiz-layout { grid-template-columns:1fr; gap:15px; padding-top:22px; } .quiz-guide { flex-direction:row; justify-content:center; gap:15px; } .quiz-guide img { width:90px; } .quiz-guide p { margin:0; padding:11px 17px; font-size:11px; text-align:left; } .question-heading { font-size:23px; } .question-note { font-size:11px; } .answer { min-height:65px; font-size:12px; gap:10px; } .quiz-bottom .text-button { font-size:11px; }
 .result-view { padding:30px 22px 45px; } .result-heading h1 { font-size:24px; } .result-nav { gap:6px; margin-bottom:24px; } .result-nav button { font-size:10px; padding:10px 3px; } .result-pair { grid-template-columns:1fr; gap:25px; } .result-card-wrap { width:min(330px,100%); margin:auto; } .result-copy { max-width:500px; margin:auto; } .result-copy h2 { font-size:27px; } .result-next .button { font-size:12px; padding:11px 18px; gap:14px; min-height:49px; }
 .spot-row { grid-template-columns:100px minmax(0,1fr); gap:17px; padding:17px; } .spot-visual { width:100px; height:140px; } .spot-row h3 { font-size:19px; } .spot-row .difference-note { padding:10px; } .reasons-layout { gap:27px; padding:10px 0 25px; } .takeaway h2 { font-size:27px; }
 .dialog-layout { grid-template-columns:1fr; gap:25px; } .dialog-layout > .travel-card { max-width:290px; margin:auto; } dialog { padding:29px 22px; width:calc(100% - 26px); } .dialog-close { margin:-16px -10px 0 0; }
}
@media(max-width:480px) {
 .hero h1 { font-size:36px; } .hero-art { height:290px; } .hero-art > img { width:85%; left:8%; height:84%; } .hero-description .phrase { font-size:12px; } .hero .button { font-size:13px; gap:24px; padding:13px 21px; }
 .hero-speech { font-size:10px; max-width:77%; } .hero-destination small { font-size:9px; } .hero-buddy { font-size:9px; }
 .cards-grid,.cards-grid[data-filter="shirahama"],.cards-grid[data-filter="wakayama"] { grid-template-columns:1fr; gap:24px; } .card-art { height:290px; } .card-body { padding:17px 19px; } .card-name { font-size:22px; } .card-top > span:last-child { font-size:11px; padding:3px 11px; } .card-top { top:13px; left:14px; right:14px; } .card-area { font-size:11px; } .card-motto { font-size:12px; } .card-bottom { font-size:11px; }
 .comparison-note { grid-template-columns:1fr; gap:22px; } .comparison-note > div + div { border:0; border-top:1px solid var(--line); padding:20px 0 0; } .comparison-note h3 { font-size:17px; } .comparison-note button { font-size:12px; }
 .spot-row { grid-template-columns:1fr; } .spot-visual { width:100%; height:100px; } .spot-visual .scene-svg { opacity:.65; } .spot-row .spot-visual > svg:last-child { width:50px; height:50px; } .reasons-layout { grid-template-columns:1fr; }
 .question-heading { font-size:21px; } .answer { padding:12px; } .answer[aria-pressed="true"] { padding:11px; } .takeaway-actions { flex-direction:column; align-items:stretch; } .takeaway-actions .button { font-size:12px; } .result-next { gap:8px; }
}
@media(max-width:350px) {
 .about-circle { width:250px; height:250px; }
 .hero-inner { padding:30px 19px 23px; } .hero h1 { font-size:31px; } .hero-art { height:250px; } .hero-sticker { width:63px; height:63px; font-size:10px; } .hero-destination { padding-left:4px; padding-right:4px; } .hero-destination strong { font-size:19px; }
 .collection { margin:0 17px; } .card-art { height:255px; } .card-name { font-size:20px; } .area-filters button { padding:7px 10px; } .quiz-view,.result-view { padding-left:17px; padding-right:17px; } .question-heading { font-size:19px; }
}
@media(prefers-reduced-motion:reduce) {
 html { scroll-behavior:auto; } *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
 .js-motion .reveal { opacity:1; transform:none; }
}