/* v9: 固定の文章と、お店へ向かう3つの場面。 */
.hero-visual{position:relative;grid-area:1/1}
.hero-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .85s,visibility .85s;overflow:hidden}
.hero-slide.is-active{opacity:1;visibility:visible}
.hero .hero-visual .journey-photo{width:100%;height:100%;object-fit:cover;animation:none;transform:scale(1.035)}
.hero .hero-visual .journey-blur{filter:blur(8px) brightness(.65);transform:scale(1.08)}
.hero-visual::after{z-index:1;background:linear-gradient(90deg,#17281eeb 0%,#17281eb8 48%,#17281e20 78%,#17281e38)}
.journey-phone{position:absolute;right:12%;top:50%;transform:translateY(-50%);width:230px;height:440px;padding:9px;background:#26322c;border:1px solid #718077;border-radius:30px;box-shadow:0 22px 55px #0005;display:flex;flex-direction:column;overflow:hidden}
.journey-phone .phone-speaker{width:32px;height:4px;background:#aab4ad;margin:1px auto 8px;flex-shrink:0;border-radius:4px}
.journey-screen{border-radius:20px;overflow:hidden;flex:1;min-height:0;background:#eee7d9}
.hero .hero-visual .journey-site{width:100%;height:auto;object-fit:contain;display:block;animation:none;transform:none}
.journey-map svg{display:block;width:100%;height:100%;object-fit:cover}
.hero-controls{position:absolute;z-index:3;left:64px;bottom:65px;display:flex;align-items:center;gap:18px;color:#fff}
.hero-controls[hidden]{display:none}
.hero-steps{display:flex;gap:14px}
.hero-controls button{font:inherit;color:inherit;background:transparent;border:0;cursor:pointer;min-width:44px;min-height:44px;padding:6px 0;text-align:left}
.hero-steps button{width:92px;font-size:12px}
.hero-bar{display:block;height:2px;background:#ffffff55;margin-top:9px;overflow:hidden}
.hero-bar i{display:block;width:100%;height:100%;background:#fff;transform:scaleX(0);transform-origin:left}
.hero-steps [aria-current="step"] .hero-bar i{transform:scaleX(var(--hero-progress,0))}
.hero-pause{display:grid;place-items:center;border:1px solid #ffffff77!important;border-radius:50%;width:44px;font-size:17px!important}
.hero-controls button:focus-visible{outline:2px solid white;outline-offset:4px}
.hero-copy{padding-bottom:120px}
@keyframes journey-zoom{from{scale:1}to{scale:1.045}}
@keyframes pin-drop{from{transform:translateY(-35px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes map-ripple{from{opacity:.7;transform:scale(.4)}to{opacity:0;transform:scale(1.8)}}
@keyframes site-glide{from{translate:0 0}to{translate:0 -20px}}
@media(prefers-reduced-motion:no-preference){
.hero .is-active .journey-photo{animation:journey-zoom 5.4s linear both}
.hero .is-active .map-pin{animation:pin-drop .7s .3s both}
.hero .is-active .map-ripple{transform-origin:127px 154px;animation:map-ripple 2s 1s infinite}
.hero .is-active .journey-site{animation:site-glide 4.5s ease-in-out both}
.hero:not(.is-running) .hero-slide *{animation-play-state:paused!important}
}
@media(min-width:761px) and (max-width:1100px){.hero h1{font-size:36px}.hero-copy{max-width:62%;padding-left:32px}.journey-phone{right:7%;width:195px;height:385px}.hero-controls{left:32px}}
@media(max-width:760px){
.hero{grid-template-rows:minmax(320px,1fr) auto;min-height:calc(100svh - 76px)}
.hero-visual{position:absolute;inset:0;min-height:0;height:100%;width:100%}
.hero-copy{grid-area:2/1;padding:18px 20px 142px;align-self:end}
.hero-visual::after{background:linear-gradient(180deg,#17281e18 0%,#17281e33 28%,#17281ef2 57%,#17281efa 100%)}
.journey-phone{top:18px;right:29%;transform:none;width:42%;height:280px;padding:6px;border-radius:23px;z-index:2}
.journey-screen{border-radius:16px}
.hero-controls{left:20px;right:20px;bottom:78px;justify-content:space-between;gap:12px}
.hero-steps{flex:1;gap:12px}.hero-steps button{width:auto;flex:1;font-size:11px}
.hero-foot{bottom:40px}
.hero .hero-visual .journey-photo{transform:scale(1.035)!important}
}
@media(prefers-reduced-motion:reduce){.hero-slide{transition:none}.hero .hero-visual .journey-photo{transform:none!important}.hero-steps [aria-current="step"] .hero-bar i{transform:scaleX(1)}}
/* 縦の余白を抑えつつ、短い画面では必要な高さだけ自然に伸ばす。 */
@media(max-width:760px){
.hero{grid-template-rows:minmax(290px,1fr) auto}
.journey-phone{height:250px}
.hero-copy{padding-bottom:102px}
.hero-description{line-height:1.8}
.hero-actions{margin-top:16px}
.hero-controls{bottom:38px}
.hero-foot{bottom:10px}
}
/* v9調整：スマホの下部固定ボタンに操作部が隠れないように。1枚目は地図を見る人が見えるように左寄せ、端末は右へ。 */
@media(max-width:760px){
.hero-copy{padding-bottom:calc(150px + env(safe-area-inset-bottom))}
.hero-controls{bottom:calc(84px + env(safe-area-inset-bottom))}
.hero .hero-foot{display:none}
.hero-slide:first-child .journey-photo:not(.journey-blur){object-position:30% center}
.hero-slide:first-child .journey-phone{right:5%;width:38%}
}
/* v9.1：スマホの枠を今の機種らしく。細い黒ベゼル・縦長の比率・上部のピル型カメラ・ガラスの映り込み。 */
.journey-phone{width:auto;height:440px;aspect-ratio:9/19;padding:6px;background:#0c0d0d;border:0;border-radius:40px;box-shadow:0 0 0 1.5px #4a4d4c,0 0 0 3px #1a1c1b,0 40px 70px -18px #000c,0 14px 28px -8px #0007}
.journey-phone::after{content:"";position:absolute;inset:6px;border-radius:34px;background:linear-gradient(118deg,#ffffff1f 0%,#ffffff08 28%,transparent 42%);pointer-events:none;z-index:3}
.journey-phone .phone-speaker{position:absolute;top:14px;left:50%;transform:translateX(-50%);width:30%;height:17px;margin:0;background:#000;border-radius:20px;z-index:4}
.journey-screen{border-radius:34px}
@media(min-width:761px) and (max-width:1100px){.journey-phone{height:385px}}
@media(max-width:760px){
.journey-phone,.hero-slide:first-child .journey-phone{width:auto;height:262px;padding:4px;border-radius:26px;box-shadow:0 0 0 1px #4a4d4c,0 0 0 2px #1a1c1b,0 24px 40px -12px #000c}
.journey-phone{right:auto;left:50%;transform:translateX(-50%)}
.hero-slide:first-child .journey-phone{left:auto;right:7%;transform:none}
.journey-phone::after{inset:4px;border-radius:22px}
.journey-phone .phone-speaker{top:9px;height:11px}
.journey-screen{border-radius:22px}
}
.hero-slide:nth-child(2) .journey-phone{aspect-ratio:600/1165}.hero-slide:nth-child(2) .journey-screen{background:#b04a36}
.hero .hero-visual .journey-site{height:auto;transform-origin:50% 0}
.hero .is-active .journey-site{animation:site-zoom 4.5s ease-in-out both}
@keyframes site-zoom{from{scale:1}to{scale:1.06}}
/* v9.2：端末をより本物らしく（チタン風の縁・側面ボタン・わずかな傾き）。Safariで波紋が画面外に描かれないよう transform-box を指定。 */
.journey-phone{overflow:visible;padding:5px;background:#060606;box-shadow:0 0 0 1.5px #9a9e9c,0 0 0 3px #3b3e3d,0 0 0 3.6px #6f7371,0 46px 70px -22px #000d,0 18px 30px -12px #0008;transform:translateY(-50%) perspective(1400px) rotateY(-13deg) rotateX(3deg)}
.journey-phone::before{content:"";position:absolute;left:-5px;top:21%;width:2.5px;height:7%;border-radius:2px 0 0 2px;background:#5e6260;box-shadow:0 calc(var(--btn-gap,34px)) 0 #5e6260}
.journey-phone::after{inset:5px;border-radius:35px;background:linear-gradient(115deg,#ffffff26 0%,#ffffff0a 22%,transparent 36%)}
.journey-screen{overflow:hidden;position:relative}
.journey-map svg{width:100%;height:100%}
.hero .is-active .map-ripple{transform-box:fill-box;transform-origin:center}
.map-pin{transform-box:fill-box;transform-origin:50% 100%}
@media(min-width:761px) and (max-width:1100px){.journey-phone{transform:translateY(-50%) perspective(1400px) rotateY(-13deg) rotateX(3deg)}}
@media(max-width:760px){
.hero{grid-template-rows:minmax(352px,1fr) auto}
.journey-phone,.hero-slide:first-child .journey-phone{top:70px;height:272px;padding:3.5px;--btn-gap:22px;box-shadow:0 0 0 1px #9a9e9c,0 0 0 2px #3b3e3d,0 0 0 2.5px #6f7371,0 26px 40px -14px #000d}
.journey-phone{transform:translateX(-50%) perspective(900px) rotateY(-12deg) rotateX(3deg)}
.hero-slide:first-child .journey-phone{transform:perspective(900px) rotateY(-12deg) rotateX(3deg)}
.journey-phone::before{left:-3.5px;width:2px}
.journey-phone::after{inset:3.5px;border-radius:23px}
.hero-controls{top:14px;bottom:auto}
.hero-copy{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
}
@media(prefers-reduced-motion:reduce){.journey-phone{transition:none}}
@media(max-width:760px){.hero-visual::after{background:linear-gradient(180deg,#17281e99 0%,#17281e1a 16%,#17281e2e 40%,#17281ef0 62%,#17281efa 100%)}}
/* v9.4：傾きは歪んで見えるのでやめる */
.journey-phone{transform:translateY(-50%)}
@media(min-width:761px) and (max-width:1100px){.journey-phone{transform:translateY(-50%)}}
@media(max-width:760px){.journey-phone{transform:translateX(-50%)}.hero-slide:first-child .journey-phone{transform:none}}

/* v10: 写真の表情を残しながら、文字側の暗さを補う。 */
.hero-visual::after{background:linear-gradient(90deg,#17281ef2 0%,#17281ecd 48%,#17281e30 78%,#17281e38)}
.hero-pause[hidden]{display:none}
@media(max-width:760px){
.hero-visual::after{background:linear-gradient(180deg,#17281e99 0%,#17281e1a 16%,#17281e45 40%,#17281efa 60%,#17281efc 100%)}
}
/* スマホの画面：上に時刻・電波・電池の帯を置き、内カメラ（黒い島）の下からページが始まるように */
.journey-screen{display:flex;flex-direction:column;container-type:inline-size}
.phone-status{flex:none;display:flex;align-items:center;justify-content:space-between;height:34px;height:16cqw;padding:0 7cqw 0 10cqw;background:#f4f3ef;color:#111;font:600 13px/1 -apple-system,"SF Pro Text","Helvetica Neue",sans-serif;font-size:6.4cqw;letter-spacing:-.01em}
.journey-screen .phone-status svg{display:block;flex:none;width:15cqw;height:auto}
.journey-web .phone-status{background:#21231e;color:#fff}
.journey-map svg,.journey-web .journey-site{flex:1 1 auto;min-height:0}
.hero .hero-visual .journey-web .journey-site{flex:none}
/* 地図の下の「徒歩」シートは画面の底に固定（地図は上から詰めて、余った下側だけ切れる） */
.journey-map{position:relative}
.journey-screen.journey-map .map-sheet{position:absolute;left:0;right:0;bottom:0;width:100%;height:auto;flex:none;z-index:1}
/* 2枚目（お店のサイト）：上の時刻の帯のぶんだけスマホを縦長にして、サイトの画像が下まで収まるように（帯は画面幅の16%＝画像600pxに対して96px） */
.hero-slide:nth-child(2) .journey-phone{aspect-ratio:600/1270}
.journey-screen.journey-map .map-sheet{bottom:-1px}