:root { --cream: #f7f1e7; --paper: #fffaf2; --sand: #efe6d8; --wood: #8b5e3c; --wood-light: #b97745; --navy: #24344b; --sky: #8cc9e8; --yellow: #f1bf64; --ink: #292724; --muted: #756e65; --line: rgba(41,39,36,.17); --panel-width: min(720px, 100vw); --serif: "Yu Mincho", "Hiragino Mincho ProN", Georgia, serif; --sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; }
* { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--cream); font-family: var(--sans); font-size: 16px; line-height: 1.7; overflow-x: hidden; }
button, a { color: inherit; font: inherit; }
button { border: 0; cursor: pointer; }
a { text-decoration: none; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--yellow); outline-offset: 4px; }
.loading-screen { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: var(--navy); color: var(--cream); }
.loading-window { width: min(360px, calc(100vw - 48px)); text-align: center; }
.loading-kicker { color: var(--sky); font-size: .68rem; letter-spacing: .18em; }
.loading-title { margin: 16px 0 0; font-family: var(--serif); font-size: 1.35rem; }
.loading-subtitle { margin: 1px 0 28px; color: rgba(247,241,231,.62); font-size: .85rem; }
.coffee-mark { position: relative; width: 90px; height: 92px; margin: 18px auto 8px; }
.coffee-cup { position: absolute; left: 19px; bottom: 16px; width: 58px; height: 37px; border: 3px solid var(--cream); border-top: 0; border-radius: 0 0 30px 30px; transform: skew(-4deg); }
.coffee-cup::before { content: ""; position: absolute; left: 0; right: 0; top: -6px; height: 9px; border: 3px solid var(--cream); border-radius: 50%; background: #7b4a32; }
.coffee-liquid { position: absolute; inset: 1px 6px auto; height: 5px; border-radius: 50%; background: var(--wood-light); }
.coffee-handle { position: absolute; left: 72px; bottom: 24px; width: 19px; height: 21px; border: 3px solid var(--cream); border-left: 0; border-radius: 0 16px 16px 0; }
.coffee-steam { position: absolute; bottom: 54px; width: 3px; height: 27px; border-radius: 50%; background: var(--cream); opacity: .55; }
.coffee-steam--one { left: 39px; transform: rotate(7deg); }.coffee-steam--two { left: 56px; height: 22px; transform: rotate(-7deg); }
.loading-progress { overflow: hidden; height: 2px; margin: 0 auto; background: rgba(247,241,231,.18); }.loading-progress span { display: block; height: 100%; background: var(--yellow); transform-origin: left; }
.site-shell { min-height: 100vh; }
.room-stage { position: relative; min-height: 100svh; isolation: isolate; overflow: hidden; background: var(--sand); }
.room-picture, .room-image { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.room-image { object-fit: cover; object-position: center; }
.room-wash { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(247,241,231,.56) 0%, rgba(247,241,231,.06) 34%, rgba(36,52,75,.05) 100%), linear-gradient(0deg, rgba(41,39,36,.15), transparent 30%); mix-blend-mode: multiply; }
.room-grain { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: .12; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.38'/%3E%3C/svg%3E"); mix-blend-mode: soft-light; }
.site-header { position: absolute; z-index: 8; inset: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 28px clamp(24px, 5vw, 78px); }
.brand-lockup { display: inline-flex; align-items: center; gap: 11px; color: var(--navy); }.brand-mark { display: grid; place-items: center; width: 31px; height: 31px; border: 1px solid currentColor; border-radius: 50%; font-size: 1.05rem; line-height: 1; }.brand-lockup strong { display: block; font-family: var(--serif); font-weight: 600; font-size: 1rem; letter-spacing: .04em; }.brand-lockup small { display: block; margin-top: -2px; color: var(--muted); font-size: .58rem; letter-spacing: .14em; }
.top-nav { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 38px); margin-left: auto; margin-right: clamp(14px, 3vw, 48px); }.nav-link { position: relative; padding: 5px 0; color: var(--navy); background: transparent; font-size: .84rem; letter-spacing: .05em; }.nav-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 200ms ease; }.nav-link:hover::after, .nav-link.is-active::after { transform: scaleX(1); transform-origin: left; }
.sound-toggle { display: flex; align-items: center; gap: 5px; padding: 7px 10px; border: 1px solid rgba(36,52,75,.35); border-radius: 50px; background: rgba(247,241,231,.2); color: var(--navy); font-size: .7rem; }.sound-toggle span { font-size: .65rem; }
.intro-copy { position: absolute; z-index: 5; top: 21%; left: clamp(24px, 8vw, 132px); max-width: 470px; padding: 12px 24px 17px 0; color: var(--navy); text-shadow: 0 1px 0 rgba(247,241,231,.2); }.intro-copy::before { content: ""; position: absolute; z-index: -1; inset: -12px auto -17px -22px; width: calc(100% + 88px); background: linear-gradient(90deg, rgba(247,241,231,.54), rgba(247,241,231,.10) 72%, transparent); pointer-events: none; }.eyebrow { margin: 0 0 18px; color: #536b74; font-size: .65rem; font-weight: 600; letter-spacing: .18em; }.intro-copy h1 { margin: 0; font-family: var(--serif); font-size: clamp(2.2rem, 4vw, 4.2rem); font-weight: 500; line-height: 1.16; letter-spacing: -.055em; }.intro-copy h1 em { color: var(--wood); font-style: normal; }.intro-note { margin: 24px 0 0; color: #4e5d62; font-family: var(--serif); font-size: 1rem; line-height: 2; }.intro-note span { color: var(--navy); font-family: var(--sans); font-size: .72rem; letter-spacing: .04em; }
.room-caption { position: absolute; z-index: 5; right: clamp(24px, 5vw, 78px); bottom: 30px; display: flex; align-items: center; gap: 12px; color: rgba(36,52,75,.76); font-size: .63rem; letter-spacing: .1em; }.room-caption i { width: 30px; height: 1px; background: currentColor; }
.hotspot-layer { position: absolute; z-index: 6; inset: 0; }.hotspot { position: absolute; width: 58px; height: 58px; padding: 0; background: transparent; border-radius: 50%; }.hotspot-ping { position: absolute; inset: 17px; display: block; border: 1px solid rgba(247,241,231,.9); border-radius: 50%; background: rgba(36,52,75,.16); box-shadow: 0 0 0 5px rgba(247,241,231,.2); }.hotspot-label { position: absolute; left: 50%; bottom: -28px; min-width: max-content; padding: 4px 8px; opacity: 0; transform: translate(-50%, 5px); border: 1px solid rgba(36,52,75,.15); border-radius: 3px; background: rgba(247,241,231,.88); color: var(--navy); box-shadow: 0 4px 12px rgba(41,39,36,.12); font-size: .68rem; letter-spacing: .03em; }.hotspot--art { left: 22%; top: 18%; }.hotspot--laptop { left: 35%; top: 39%; }.hotspot--notebook { left: 23%; top: 40%; }.hotspot--window { left: 72%; top: 19%; }.hotspot--coffee { left: 66%; top: 66%; }.hotspot--contact { left: 63%; top: 43%; }
.scroll-cue { position: absolute; z-index: 5; left: 50%; bottom: 30px; display: flex; align-items: center; gap: 11px; transform: translateX(-50%); color: rgba(36,52,75,.58); font-size: .6rem; letter-spacing: .18em; }.scroll-cue i { width: 26px; height: 1px; background: currentColor; }.room-hint { position: absolute; z-index: 7; right: 26px; bottom: 58px; display: grid; place-items: center; width: 29px; height: 29px; border: 1px solid rgba(36,52,75,.45); border-radius: 50%; background: rgba(247,241,231,.24); color: var(--navy); font-family: var(--serif); font-size: .8rem; }
.panel-backdrop { position: fixed; z-index: 20; inset: 0; background: rgba(36,52,75,.56); backdrop-filter: blur(3px); }.content-panel { position: fixed; z-index: 21; top: 0; right: 0; bottom: 0; width: var(--panel-width); overflow-y: auto; overscroll-behavior: contain; background: var(--paper); box-shadow: -22px 0 70px rgba(41,39,36,.22); }.panel-inner { min-height: 100%; padding: 38px clamp(24px, 5vw, 76px) 70px; }.panel-topline { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: .62rem; letter-spacing: .15em; }.panel-index { color: var(--wood); font-family: var(--serif); font-size: .9rem; }.panel-rule { flex: 1; height: 1px; background: var(--line); }.panel-close { display: inline-flex; align-items: center; gap: 8px; padding: 5px 0 5px 14px; background: transparent; color: var(--navy); font-size: .7rem; letter-spacing: .06em; }.panel-close span { font-size: 1.25rem; line-height: .7; }.panel-header { max-width: 550px; padding: clamp(42px, 9vh, 80px) 0 36px; }.panel-kicker { margin: 0 0 10px; color: var(--wood); font-size: .68rem; font-weight: 600; letter-spacing: .15em; }.panel-header h2 { margin: 0; color: var(--navy); font-family: var(--serif); font-size: clamp(2rem, 4vw, 3.6rem); font-weight: 500; letter-spacing: -.05em; line-height: 1.15; }.panel-description { max-width: 440px; margin: 16px 0 0; color: var(--muted); font-size: .92rem; }
.gallery-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }.gallery-card { min-width: 0; }.gallery-card__button, .travel-card__button, .cafe-card__button { display: block; width: 100%; padding: 0; text-align: left; background: transparent; }.gallery-card__image { position: relative; display: block; overflow: hidden; aspect-ratio: 1 / 1.08; background: var(--sand); }.gallery-card__image img, .travel-card__image img, .cafe-card__photo img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform 450ms ease, filter 450ms ease; }.gallery-card__button:hover img, .gallery-card__button:focus-visible img, .travel-card__button:hover img, .travel-card__button:focus-visible img, .cafe-card__button:hover img, .cafe-card__button:focus-visible img { transform: scale(1.045); filter: saturate(1.08); }.gallery-card__zoom { position: absolute; right: 10px; bottom: 10px; padding: 3px 7px; opacity: 0; background: rgba(255,250,242,.88); color: var(--navy); font-size: .65rem; transition: opacity 180ms ease; }.gallery-card__button:hover .gallery-card__zoom, .gallery-card__button:focus-visible .gallery-card__zoom { opacity: 1; }.gallery-card__copy { display: grid; grid-template-columns: 25px 1fr; gap: 0 7px; padding: 11px 0 20px; }.gallery-card__index { grid-row: span 2; color: var(--wood); font-family: var(--serif); font-size: .8rem; }.gallery-card__copy strong { color: var(--navy); font-family: var(--serif); font-size: 1.05rem; font-weight: 500; }.gallery-card__meta { color: var(--muted); font-size: .68rem; letter-spacing: .04em; }
.travel-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 27px 18px; }.travel-card__image { position: relative; display: block; aspect-ratio: 1.22 / 1; overflow: hidden; background: var(--sky); }.travel-card:nth-child(even) .travel-card__image { transform: translateY(18px); }.travel-card__stamp { position: absolute; right: 10px; bottom: 9px; padding: 3px 7px; background: rgba(255,250,242,.86); color: var(--navy); font-size: .63rem; letter-spacing: .09em; }.travel-card__copy { display: grid; grid-template-columns: 1fr auto; gap: 3px 8px; padding-top: 10px; }.travel-card__copy strong { color: var(--navy); font-family: var(--serif); font-size: 1.15rem; font-weight: 500; }.travel-card__copy > span { color: var(--wood); font-size: .68rem; align-self: center; }.travel-card__copy small { grid-column: 1 / -1; color: var(--muted); font-size: .76rem; line-height: 1.6; }
.cafe-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 34px 19px; }.cafe-card:nth-child(even) { transform: translateY(24px); }.cafe-card__photo { position: relative; display: block; aspect-ratio: .9 / 1; padding: 12px; background: #fff; box-shadow: 0 12px 18px rgba(41,39,36,.1); transform: rotate(-1.5deg); }.cafe-card:nth-child(2n) .cafe-card__photo { transform: rotate(1.6deg); }.cafe-card__tape { position: absolute; left: 50%; top: -8px; width: 48px; height: 17px; background: rgba(241,191,100,.64); transform: translateX(-50%) rotate(-2deg); }.cafe-card__copy { display: block; padding: 13px 5px 0; }.cafe-card__copy > span { display: block; color: var(--wood); font-size: .65rem; letter-spacing: .12em; text-transform: uppercase; }.cafe-card__copy strong { display: block; color: var(--navy); font-family: var(--serif); font-size: 1.15rem; font-weight: 500; }.cafe-card__copy small { display: block; color: var(--muted); font-size: .68rem; }.cafe-card__copy em { display: block; margin-top: 5px; color: var(--muted); font-size: .75rem; font-style: normal; line-height: 1.55; }
.about-layout { display: grid; grid-template-columns: 1.2fr .8fr; gap: 42px; }.about-letter { position: relative; padding: 32px 30px 38px; background: #fffdf9; box-shadow: 0 15px 28px rgba(41,39,36,.08); }.about-letter::before { content: ""; position: absolute; inset: 14px; border: 1px solid rgba(139,94,60,.18); pointer-events: none; }.letter-greeting { display: block; margin-bottom: 20px; color: var(--wood); font-family: var(--serif); font-size: .9rem; }.about-letter p { position: relative; margin: 0 0 16px; font-family: var(--serif); font-size: 1rem; line-height: 2; }.letter-sign { display: block; margin-top: 28px; color: var(--navy); font-family: var(--serif); text-align: right; }.profile-card { align-self: start; padding: 28px 24px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }.profile-avatar { display: grid; place-items: center; width: 60px; height: 60px; margin-bottom: 16px; border: 1px solid var(--navy); border-radius: 50%; color: var(--navy); font-size: 1.8rem; }.profile-name { margin: 0 0 18px; color: var(--navy); font-family: var(--serif); font-size: 1.35rem; }.profile-card dl { margin: 0; }.profile-card dl div { padding: 11px 0; border-top: 1px solid var(--line); }.profile-card dt { color: var(--wood); font-size: .66rem; letter-spacing: .11em; }.profile-card dd { margin: 3px 0 0; color: var(--ink); font-size: .8rem; }.profile-note { margin: 20px 0 0; color: var(--muted); font-size: .72rem; }
.contact-layout { display: grid; grid-template-columns: 1.1fr .9fr; gap: 52px; }.contact-message { padding: 36px 30px 40px; background: var(--navy); color: var(--cream); }.contact-icon { display: block; margin-bottom: 23px; color: var(--yellow); font-size: 2.5rem; line-height: 1; }.contact-message p { margin: 0 0 27px; font-family: var(--serif); font-size: 1.1rem; line-height: 1.9; }.email-link { display: inline-block; padding-bottom: 5px; border-bottom: 1px solid var(--yellow); color: var(--yellow); font-size: .86rem; word-break: break-all; }.social-list { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; padding-top: 4px; }.social-heading { color: var(--wood); font-size: .66rem; letter-spacing: .16em; }.social-list a { display: flex; justify-content: space-between; width: 100%; padding: 9px 0; border-bottom: 1px solid var(--line); color: var(--navy); font-family: var(--serif); }.social-list a b { color: var(--muted); font-family: var(--sans); font-size: .7rem; font-weight: 400; }.contact-small { color: var(--muted); font-size: .72rem; }
.lightbox { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 24px; background: rgba(36,52,75,.76); }.lightbox-backdrop { position: absolute; inset: 0; background: transparent; }.lightbox-dialog { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(280px, 1fr) minmax(180px, .42fr); width: min(900px, 100%); min-height: min(540px, 90vh); padding: 18px; background: var(--paper); box-shadow: 0 24px 80px rgba(0,0,0,.32); }.lightbox-close { position: absolute; z-index: 2; top: 10px; right: 14px; width: 32px; height: 32px; background: transparent; color: var(--navy); font-size: 1.6rem; }.lightbox-image-wrap { position: relative; min-height: 360px; background: var(--sand); }.lightbox-image-wrap img { width: 100%; height: 100%; display: block; object-fit: cover; }.lightbox-number { position: absolute; left: 15px; bottom: 12px; padding: 2px 7px; background: rgba(255,250,242,.86); color: var(--navy); font-size: .68rem; }.lightbox-caption { align-self: end; padding: 28px 28px 54px; }.lightbox-kicker { margin: 0 0 9px; color: var(--wood); font-size: .66rem; letter-spacing: .13em; }.lightbox-caption h3 { margin: 0; color: var(--navy); font-family: var(--serif); font-size: clamp(1.7rem, 3vw, 2.7rem); font-weight: 500; line-height: 1.2; }.lightbox-caption > p:last-child { margin: 16px 0 0; color: var(--muted); font-size: .78rem; line-height: 1.8; }.lightbox-controls { position: absolute; right: 32px; bottom: 25px; display: flex; align-items: center; gap: 16px; color: var(--navy); font-size: .75rem; }.lightbox-controls button { width: 27px; height: 27px; border: 1px solid var(--line); background: transparent; color: var(--navy); }.site-footer { display: flex; justify-content: space-between; gap: 14px; padding: 16px clamp(24px, 5vw, 78px); background: var(--navy); color: rgba(247,241,231,.65); font-size: .65rem; letter-spacing: .07em; }.toast { position: fixed; z-index: 50; left: 50%; bottom: 28px; max-width: calc(100vw - 40px); padding: 9px 14px; opacity: 0; transform: translate(-50%, 12px); border: 1px solid rgba(255,250,242,.2); background: var(--navy); color: var(--cream); font-size: .74rem; pointer-events: none; transition: opacity 220ms ease, transform 220ms ease; }.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
body.panel-is-open, body.lightbox-is-open { overflow: hidden; }

/* Percent hit regions use a small centered marker, not a stretched ellipse. */
.hotspot { min-width: 44px; min-height: 44px; border-radius: 5px; }
.hotspot-ping { inset: auto; top: calc(50% - 12px); left: calc(50% - 12px); width: 24px; height: 24px; }
.placeholder-tag { display: inline-block; padding: 4px 7px; color: #746b5e; background: #eee7db; font-size: .62rem; letter-spacing: .02em; }
.empty-state { padding: 30px 0; color: var(--muted); }.social-unlinked { display: flex; justify-content: space-between; gap: 15px; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: .9rem; }
.content-status { position: fixed; z-index: 80; bottom: 12px; left: 12px; right: 12px; padding: 12px; background: #fffdf9; border: 1px solid #d3ccc1; color: #24344b; font-size: .8rem; }.content-status button { margin-left: 12px; padding: 5px 9px; }