:root{--ink:#07394e;--gold:#cb9944;color-scheme:light}*{box-sizing:border-box}html,body{margin:0;background:#fff;color:var(--ink);font-family:'Meiryo','Yu Gothic',sans-serif}button{border:0;padding:0;font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #087ea0;outline-offset:3px}.phone{width:100%;max-width:430px;margin:auto;background:#fff;container-type:inline-size}.hero{height:128cqw;position:relative;isolation:isolate;overflow:hidden;border-radius:0 0 5.7cqw 5.7cqw;color:white}.scenery{position:absolute;inset:0;z-index:-3;background:url('assets/hagi-street.jpg') center/cover no-repeat}.shade{position:absolute;inset:0;z-index:-2;background:linear-gradient(180deg,transparent 45%,#00181238 88%,#00181220)}.status{height:17cqw;position:relative;display:flex;align-items:flex-start;justify-content:space-between;padding:3.3cqw 8.7cqw;font:600 4cqw Arial,sans-serif}.island{position:absolute;background:#000;width:32cqw;height:8.4cqw;border-radius:6cqw;left:50%;top:1.6cqw;transform:translateX(-50%)}.island:after{content:'';position:absolute;right:4cqw;top:2.7cqw;width:1.5cqw;height:1.5cqw;background:radial-gradient(circle at 65% 35%,#083165,#010913 60%);border-radius:50%}.status-icons{display:flex;gap:1.8cqw;align-items:center;margin-top:.25cqw}.status-icons svg{width:4.5cqw;height:3.5cqw;stroke-width:2.3}.status-icons .battery{width:6.5cqw}.journey{position:absolute;left:2.85cqw;right:2.85cqw;top:22cqw;height:19.5cqw;border:1px solid #ffffffa6;border-radius:5.5cqw;background:linear-gradient(115deg,#e3e8dc9c,#d8e8fb9c);backdrop-filter:blur(10px);box-shadow:0 2px 10px #00000012;display:grid;grid-template-columns:1fr 3cqw 1fr 3cqw 1fr;align-items:center;padding:2.5cqw 5cqw}.journey>span{display:flex;align-items:center;flex-direction:column;gap:1cqw}.journey strong{font-size:2.95cqw;white-space:nowrap;font-weight:600}.journey small{background:#e2f1f49c;font-size:2.7cqw;border-radius:10cqw;padding:0 3.1cqw;line-height:4.3cqw;white-space:nowrap}.journey .current{background:linear-gradient(#d4a64d,#c89537);color:white;box-shadow:0 0 10px #f5d98990}.journey em{font-size:4cqw;font-style:normal;color:#fff;margin-top:-1cqw}.dot{width:3.8cqw;height:3.8cqw;border-radius:50%;background:#e9f6ffc9;border:1px solid #9fb1ba;box-shadow:0 0 8px #fff3}.dot.gold{background:#c99b43;border:1px solid #fff;box-shadow:0 0 7px 4px #f4d58d4d}.location{position:absolute;left:3.55cqw;top:71cqw}.pill{display:inline-flex;align-items:center;gap:.9cqw;background:#fffaf0;color:var(--gold);border-radius:10cqw;padding:.8cqw 2cqw;font-size:3.3cqw;font-weight:600;line-height:4.6cqw}.pill svg{width:3.3cqw;height:3.8cqw;fill:currentColor;stroke:none}h1{font-family:'Yu Mincho',serif;font-size:8.9cqw;letter-spacing:.6cqw;line-height:1.3;font-weight:500;margin:2cqw 0 1.1cqw}.location p{font-size:4cqw;line-height:1.48;letter-spacing:.17cqw;margin:0 0 2.4cqw}.meta{display:flex;gap:3.7cqw;align-items:center;font-size:3.1cqw}.meta>span{display:flex;align-items:center;gap:1.1cqw}.meta svg{width:3.7cqw;height:3.7cqw;stroke-width:2.2}.meta .pin{fill:white;stroke:none}.meta .sun{color:#efbd62;fill:#efbd62;stroke-width:1.3}.voice{position:absolute;bottom:3cqw;left:2.85cqw;right:2.85cqw;height:13cqw;display:flex;align-items:center;gap:3cqw;text-align:left;color:#fff;border-radius:4.7cqw;border:1px solid #ffffffe0;background:linear-gradient(120deg,#afb8a55e,#b6c6d171);backdrop-filter:blur(12px);padding:1.5cqw 3.5cqw;font-size:3.15cqw;white-space:nowrap;letter-spacing:.04cqw}.avatar{width:8.7cqw;height:8.7cqw;border-radius:50%;object-fit:cover;flex-shrink:0}.below{padding:2.65cqw 2.85cqw 2cqw}.actions{display:grid;grid-template-columns:minmax(0,1fr);gap:1.8cqw}.actions button{height:12.3cqw;border-radius:8cqw;display:flex;align-items:center;justify-content:center;gap:2.5cqw;white-space:nowrap;font-size:4cqw}.record{color:white;background:linear-gradient(115deg,#e3b459,#c79a44 65%,#bb8d38);box-shadow:0 5px 14px #ad89302b}.record svg{width:6.3cqw;height:6.3cqw;stroke-width:1.5}.support{background:white;border:1px solid #ddd;color:var(--gold);box-shadow:0 3px 10px #00000018}.support svg{width:6.1cqw;height:6.1cqw;stroke-width:1.5}.heading{display:flex;justify-content:space-between;align-items:center;height:12.7cqw;padding-top:1.3cqw}h2{font-family:'Yu Mincho',serif;margin:0;font-size:5.1cqw;font-weight:600;letter-spacing:.2cqw}.heading button{display:flex;align-items:center;background:none;font-size:2.65cqw;font-weight:600;color:var(--gold)}.heading svg{width:2.5cqw;height:3.5cqw;margin-left:.8cqw}.recommendations{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.45cqw}.card{padding:0;text-align:left;background:white;border-radius:2.5cqw;overflow:hidden;box-shadow:0 2px 6px #00000014}.photo{display:block;width:100%;height:20.2cqw;object-fit:cover}.card-copy{height:12cqw;padding:1.45cqw 1.8cqw 1cqw;background:linear-gradient(#fff,#fcfaf8)}.card-copy.pink{background:linear-gradient(#ffe9e9,#fff)}.card strong{display:flex;gap:1.4cqw;align-items:center;font-size:2.2cqw;line-height:1.3;white-space:nowrap;font-weight:600;height:5cqw}.card strong svg{flex-shrink:0;width:3.2cqw;height:4.1cqw;stroke-width:2}.pink svg{color:#dc9696}.pottery-icon{color:var(--gold)}.rain-icon{color:#498aab}.card small{display:block;font-size:2.2cqw;color:#617c90;white-space:nowrap;line-height:1.5;margin-top:.6cqw;letter-spacing:-.05cqw}.card:nth-child(3) .card-copy,.card:nth-child(4) .card-copy{padding-left:1.2cqw;padding-right:.6cqw}.card:nth-child(3) strong,.card:nth-child(4) strong{gap:1cqw;font-size:2.05cqw}nav{display:flex;border-top:1px solid #ececec;padding:2.2cqw 1.6cqw 0;background:linear-gradient(#fff,#fdfdfd)}nav button{position:relative;display:flex;flex-direction:column;align-items:center;gap:1.1cqw;width:20%;padding-bottom:2.1cqw;font-size:2.6cqw;color:#607b8e;background:none;white-space:nowrap}svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}nav svg{width:5cqw;height:5cqw;stroke-width:1.5}nav [aria-current]{color:var(--ink);font-weight:600}nav .filled{fill:currentColor}nav [aria-current]:after{content:'';position:absolute;bottom:0;width:8cqw;height:.45cqw;background:var(--gold);border-radius:2cqw}.home-indicator{width:33.5cqw;height:1.35cqw;background:#92979b;border-radius:3cqw;margin:2.2cqw auto 2.3cqw}.review{display:none}dialog{border:1px solid #e4e9e8;border-radius:26px;padding:28px;width:min(370px,92vw);color:var(--ink);box-shadow:0 15px 70px #00273430}dialog::backdrop{background:#00233370;backdrop-filter:blur(5px)}dialog h2{font-size:22px}.close{float:right;background:#eff4f5;border-radius:50%;width:30px;height:30px;font-size:23px}dialog p{font-size:14px;line-height:1.8}textarea{width:100%;min-height:100px;border:1px solid #cedde1;border-radius:12px;padding:12px;font:inherit;margin:12px 0}dialog .record{width:100%;border-radius:25px;padding:13px}.feelings{display:flex;flex-wrap:wrap;gap:7px;margin-top:15px}.feelings button{background:#eff5f4;border-radius:20px;padding:8px 12px;font-size:13px}.feelings button[aria-pressed=true]{background:var(--ink);color:white}
.journey{color:var(--ink)}.voice>span{min-width:0;overflow:hidden;text-overflow:ellipsis}
html,body{font-family:'Yu Gothic','Meiryo',sans-serif;font-weight:500}h1{font-weight:600}h2{font-weight:700}.below{padding-bottom:1cqw}.record{background:linear-gradient(115deg,#e2b059,#c49a4a 55%,#bb8f3c)}.shade{background:linear-gradient(180deg,transparent 45%,#00181224 65%,#00181255 88%,#00181220)}.itinerary-preview{display:grid;gap:0;margin:22px 0 6px}.itinerary-stop{display:grid;grid-template-columns:24px 1fr auto;gap:12px;position:relative;align-items:center;padding:13px 0}.itinerary-stop:before{content:'';position:absolute;left:11px;top:32px;bottom:-13px;border-left:1px solid #d8d3be}.itinerary-stop:last-child:before{display:none}.stop-dot{width:23px;height:23px;border:1px solid #d7c6a3;border-radius:50%;background:#faf8f0}.itinerary-stop.current .stop-dot{background:var(--gold);box-shadow:0 0 0 4px #d9ae5425}.itinerary-stop small{color:#77909a}.detail-cover{width:100%;height:155px;object-fit:cover;border-radius:18px;margin:16px 0 5px}.sheet-tag{font-size:11px;color:#a87f35;letter-spacing:1px}.sheet-note{color:#6c8590;font-size:12px}dialog{position:fixed;top:auto;bottom:18px;margin:0 auto;max-height:85vh;overflow:auto}dialog .next-step{background:#eaf2f1;border-radius:14px;padding:13px;font-size:12px;line-height:1.8}
.location{line-height:1}.location p{line-height:1.45;margin-bottom:1.8cqw}.meta{line-height:1.25}.voice{line-height:1.4}.heading h2{font-weight:900;letter-spacing:0}.actions button{font-weight:500}.support{gap:1.7cqw}.card strong{font-weight:700}
/* 写真が変わっても、白文字の周辺には必ず減彩と暗い下地を置く。 */
.status{isolation:isolate}
.status:before{content:'';position:absolute;inset:0 0 -5cqw;z-index:-1;background:linear-gradient(#10232b99,#10232b66 60%,transparent);backdrop-filter:saturate(.45);mask-image:linear-gradient(#000 60%,transparent)}
.status b,.status-icons{filter:drop-shadow(0 1px 2px #0006)}
.location{isolation:isolate;right:3.55cqw}
.location:before{content:'';position:absolute;inset:-5cqw -3.55cqw -4cqw;z-index:-1;background:linear-gradient(90deg,#132229d9,#132229bb 65%,#13222999);backdrop-filter:saturate(.3) brightness(.75);mask-image:linear-gradient(transparent,#000 16%,#000 85%,transparent)}
.location h1,.location p,.meta{text-shadow:0 1px 2px #0006}
.voice{background:#1e2c36a6;backdrop-filter:blur(12px) saturate(.35)}
.journey{height:13cqw;min-height:48px;padding:1.5cqw 4cqw;border-radius:4cqw;background:linear-gradient(115deg,#ffffff32,#edf6ff40);backdrop-filter:blur(5px) saturate(.65);border:1px solid #ffffff9c;box-shadow:inset 0 1px 0 #ffffff4d,0 3px 12px #001b2614}
.journey>span{gap:1cqw}.journey strong{font-size:3cqw;text-shadow:0 1px 3px #ffffffc9}.journey .dot{width:2.5cqw;height:2.5cqw}.journey em{margin:0;color:#fff;text-shadow:0 1px 3px #102b4c99}
.heading h2{font-family:'Yu Gothic','Meiryo',sans-serif;font-size:16px;font-weight:700;letter-spacing:.02em}.heading button{font-size:11px}
.card .card-copy{height:auto;min-height:85px;padding:7px 5px 8px}.card strong,.card:nth-child(3) strong,.card:nth-child(4) strong{height:auto;min-height:34px;gap:3px;font-size:12px;line-height:1.4;white-space:normal;align-items:center;letter-spacing:0}.card strong span{min-width:0;overflow-wrap:anywhere}.card strong svg{width:12px;height:17px}.card small{font-size:11px;line-height:1.45;white-space:normal;overflow-wrap:anywhere;margin-top:5px;letter-spacing:0;min-height:32px;color:#526e80}.card:nth-child(3) .card-copy,.card:nth-child(4) .card-copy{padding:7px 5px 8px}
@container(max-width:350px){.recommendations{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.photo{height:25cqw}.card .card-copy{min-height:0}.card strong,.card:nth-child(3) strong,.card:nth-child(4) strong{font-size:13px;min-height:36px}.card small{min-height:0;font-size:12px}}
.location:before{background:linear-gradient(90deg,#1322298c,#13222980 65%,#13222966);backdrop-filter:saturate(.3) brightness(.8)}
.status:before{background:linear-gradient(#10232b80,#10232b52 60%,transparent)}
/* スクロールの有無でスマホの表示幅が変わらないよう、バーだけを非表示にする。 */
html{overflow-y:auto;scrollbar-width:none;scrollbar-gutter:auto}
html::-webkit-scrollbar,body::-webkit-scrollbar,dialog::-webkit-scrollbar{display:none;width:0;height:0}
body,dialog{scrollbar-width:none}
/* 写真の中央を明るく保ち、情報は下端に集める。 */
.shade{display:none}
.location{top:auto;bottom:4cqw;left:3.55cqw;right:3.55cqw}
.location:before{content:none}
.location h1{margin-top:1.8cqw;margin-bottom:1cqw}
.location p{margin-bottom:2.2cqw}
.photo-text,.meta>span,.meta>.voice{position:relative;isolation:isolate}
.photo-text{display:inline-block}
.photo-text:before,.meta>span:before,.meta>.voice:before{content:'';position:absolute;inset:-5px -9px;z-index:-1;pointer-events:none;background:#10212ca1;backdrop-filter:saturate(.4) brightness(.85);mask-image:radial-gradient(ellipse farthest-side,#000 48%,transparent 100%)}
.location h1,.location p,.meta{text-shadow:0 1px 3px #000b,0 0 5px #0005}
.meta{gap:2.6cqw;align-items:center;font-size:3.1cqw;line-height:1.4;white-space:nowrap}
.meta>span{flex-shrink:0;gap:.8cqw}
.meta .voice{position:relative;inset:auto;display:flex;flex:1;min-width:0;gap:.8cqw;width:auto;height:auto;padding:0;margin:0;border:0;border-radius:0;background:none;backdrop-filter:none;box-shadow:none;color:inherit;font:inherit;line-height:inherit;letter-spacing:0;text-align:left;text-shadow:inherit}
.meta .voice svg{width:3.7cqw;height:3.7cqw;flex-shrink:0}
.meta .voice>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.journey strong{color:#052b3b;font-size:3.15cqw;font-weight:800;text-shadow:0 0 2px #fff,0 0 5px #fff,0 1px 7px #fff}
.journey em{color:#123e50;font-weight:600;text-shadow:0 0 4px #ffffffd9}
/* 彩度を保ち、タイトルと説明の背後だけを透明なガラス状にぼかす。 */
.photo-text:before{inset:-4px -8px;background:rgba(24,39,45,.2);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:9px;mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.meta>span:before,.meta>.voice:before{backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);background:rgba(24,39,45,.2)}
.location h1,.location p{text-shadow:0 1px 3px #10212b99,0 0 1px #10212b66}
/* 文字の周囲に広がり、外縁で自然に消える丸いぼかし。 */
.photo-text:before{inset:-12px -19px;background:rgba(24,39,45,.2);border-radius:50%;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);mask-image:radial-gradient(ellipse farthest-side,#000 32%,#000d 52%,#0006 76%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse farthest-side,#000 32%,#000d 52%,#0006 76%,transparent 100%)}
.meta{position:relative;isolation:isolate}
.meta:before{content:'';position:absolute;inset:-14px -18px;z-index:-1;pointer-events:none;border-radius:50%;background:rgba(24,39,45,.22);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);mask-image:radial-gradient(ellipse farthest-side,#000 28%,#000d 50%,#0006 75%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse farthest-side,#000 28%,#000d 50%,#0006 75%,transparent 100%)}
.meta>span:before,.meta>.voice:before{content:none}
/* 左端の文字をフェードの中心部で覆い、広い外縁で緩やかに消す。 */
.photo-text:before{inset:-19px -35px;border-radius:40%;backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);mask-image:radial-gradient(ellipse farthest-side,#000 58%,#000e 70%,#0007 86%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse farthest-side,#000 58%,#000e 70%,#0007 86%,transparent 100%)}
.meta:before{inset:-21px -35px;backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);mask-image:radial-gradient(ellipse farthest-side,#000 55%,#000e 70%,#0007 86%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse farthest-side,#000 55%,#000e 70%,#0007 86%,transparent 100%)}
/* 各行の疑似要素を廃止し、全ての文字より背面にある共通レイヤーだけでぼかす。 */
.photo-text:before,.meta:before,.meta>span:before,.meta>.voice:before{content:none!important}
.photo-text,.meta,.meta>span,.meta>.voice{isolation:auto}
.location{isolation:isolate}
.text-blur{position:absolute;inset:-30px -25px;z-index:-1;pointer-events:none;background:rgba(24,39,45,.22);backdrop-filter:blur(13px);-webkit-backdrop-filter:blur(13px);mask-repeat:no-repeat;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;-webkit-mask-size:100% 100%}
/* ホーム全体を端末の表示領域に収め、時計と下部タブを常時表示する。 */
html,body{height:100%;overflow:hidden}
.phone{height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden}
.hero{height:auto;flex:1 1 0;min-height:0}
.below,nav,.home-indicator{flex-shrink:0}
nav{margin-top:auto}
.home-indicator{flex-shrink:0}
@container(max-width:350px){.recommendations{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:44cqw;gap:8px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;padding-bottom:3px}.recommendations::-webkit-scrollbar{display:none}.card{scroll-snap-align:start}.photo{height:20cqw}.card .card-copy{min-height:78px}.card strong,.card:nth-child(3) strong,.card:nth-child(4) strong{font-size:12px;min-height:32px}.card small{font-size:11px;min-height:28px}}
@media(max-height:720px){.journey{top:17cqw}.photo{height:15cqw}.heading{height:10cqw}.location h1{font-size:7.8cqw}.location p{font-size:3.6cqw}.card .card-copy{min-height:76px;padding-top:5px;padding-bottom:5px}.card small{min-height:29px;margin-top:3px}}