@font-face { font-family: "LP Maru"; src: url("/assets/fonts/ZenMaruGothic-Black-lp.woff2") format("woff2"); font-weight: 900; font-display: swap; }
:root { --paper: #efe6d6; --card: #fffaf1; --ink: #1e1b18; --sub: #4a4038; --green: #3e5a4a; --orange: #d0662a; --line: #e0d2bb; --display: "LP Maru", "Hiragino Maru Gothic ProN", sans-serif; }
* { box-sizing: border-box; }
html, body { margin: 0; }
body { color: var(--ink); background: var(--paper) url("/assets/lp/dots.webp") 0 0 / 143px 143px; font-family: "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif; line-height: 1.7; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; }
.site-header { position: sticky; top: 0; z-index: 20; background: rgba(247, 241, 230, .94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 5px solid #785c42; box-shadow: 0 4px 0 rgba(60, 40, 20, .12); }
.nav { width: min(calc(100% - 32px), 1160px); margin: 0 auto; display: flex; align-items: center; gap: 20px; height: 72px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand .brand-icon { width: 40px; height: 40px; border-radius: 10px; box-shadow: 0 3px 6px rgba(60, 40, 20, .2); }
.brand img.brand-logo { height: 32px; width: auto; }
.nav-actions { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.nav-link { text-decoration: none; font-family: var(--display); font-weight: 900; font-size: 15px; color: var(--ink); white-space: nowrap; }
.nav-link:hover { color: var(--orange); }
.nav-cta { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; white-space: nowrap; background: var(--orange); color: #fffdf8; font-family: var(--display); font-weight: 900; font-size: 16px; letter-spacing: .04em; padding: 10px 22px 9px; border-radius: 14px; border: 2px solid var(--ink); box-shadow: 0 4px 0 var(--ink); transform: translateY(-2px); transition: transform .1s, box-shadow .1s; }
.nav-cta:hover { background: #dc7236; }
.nav-cta:active { transform: translateY(2px); box-shadow: 0 0 0 var(--ink); }
.nav-cta svg { width: 18px; height: 18px; }
.phrase { display: inline-block; }
html:not([lang="ja"]) .phrase { display: inline; }
html:not([lang="ja"]) .phrase + .phrase::before { content: " "; }
.soon, .pill { display: inline-block; background: var(--orange); color: #fffdf8; font-family: var(--display); font-weight: 900; border-radius: 999px; padding: .35em 1.1em; font-size: 16px; letter-spacing: .04em; }
.coming .visual { display: grid; place-items: center; }
.plus-card { display: grid; justify-items: center; gap: 4px; width: 62%; padding: 22px 10px; background: var(--card); border: 5px dashed rgba(30, 27, 24, .45); border-radius: 18px; font-family: var(--display); font-weight: 900; font-size: 15px; transform: rotate(-3deg); }
.plus-card .plus { font-size: 72px; line-height: 1; color: var(--orange); }
.cta { text-align: center; padding: clamp(60px, 9vw, 110px) 16px clamp(80px, 11vw, 140px); background: #efe4d1 url("/assets/lp/backdrop.webp") center bottom / cover no-repeat; margin-top: 64px; }
.cta-card { display: inline-flex; flex-direction: column; align-items: center; gap: 18px; background: rgba(255, 250, 241, .94); border: 1px solid var(--line); border-radius: 28px; padding: 40px clamp(24px, 5vw, 64px); box-shadow: 0 18px 40px rgba(60, 40, 20, .18); max-width: 100%; }
.cta-brand { display: flex; align-items: center; gap: 16px; }
.cta-brand .icon { width: 84px; height: 84px; border-radius: 20px; box-shadow: 0 8px 16px rgba(60, 40, 20, .22); }
.cta-brand .logo { height: 58px; width: auto; }
.cta-title { margin: 0; font-family: var(--display); font-weight: 900; font-size: clamp(24px, 3.4vw, 40px); line-height: 1.3; }
.stores { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.stores img { height: 54px; width: auto; }
main { width: min(calc(100% - 32px), 1160px); margin: 0 auto; }
.directory-intro { text-align: center; padding: 56px 0 36px; }
.eyebrow { margin: 0; color: var(--orange); font-family: var(--display); font-weight: 900; letter-spacing: .06em; }
.directory-intro h1 { margin: 4px 0 10px; font-family: var(--display); font-weight: 900; font-size: clamp(34px, 5vw, 52px); line-height: 1.25; }
.directory-intro p { color: var(--sub); }
.directory-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.directory-card { background: var(--card); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; box-shadow: 0 10px 24px rgba(60, 40, 20, .1); scroll-margin-top: 110px; display: flex; flex-direction: column; }
.directory-card:target { outline: 4px solid var(--orange); outline-offset: 2px; }
.visual { position: relative; height: 270px; overflow: hidden; background: #efe4d1 url("/assets/lp/backdrop.webp") center bottom / cover no-repeat; }
.visual .box { position: absolute; left: 8%; bottom: 17%; width: 42%; transform: rotate(-4deg); filter: drop-shadow(0 12px 14px rgba(60, 40, 20, .35)); }
.preview { position: absolute; right: 11%; top: 24px; width: 29%; aspect-ratio: 780 / 1688; border: 4px solid var(--ink); border-radius: 18px; overflow: hidden; background: #000; transform: rotate(4deg); box-shadow: 0 12px 20px rgba(60, 40, 20, .3); cursor: zoom-in; }
.preview img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.zoom { position: absolute; right: 10px; bottom: 10px; background: rgba(30, 27, 24, .82); color: #fff; font-size: 12px; padding: 4px 10px; border-radius: 999px; pointer-events: none; }
.card-copy { padding: 18px 22px 20px; flex: 1; }
.card-copy h2 { margin: 0 0 6px; font-family: var(--display); font-weight: 900; font-size: 21px; line-height: 1.35; }
.card-copy > p { margin: 0 0 12px; color: var(--sub); font-size: 14.5px; line-height: 1.65; }
details { border-top: 1px dashed var(--line); padding-top: 10px; font-size: 14px; }
summary { cursor: pointer; font-weight: 700; color: var(--green); }
details p { color: var(--sub); margin: 8px 0 0; }
footer { background: var(--ink); padding: 36px 16px; }
.footer-inner { width: min(100%, 1160px); margin: 0 auto; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; justify-content: space-between; }
.footer-logo { height: 32px; width: auto; filter: invert(1) brightness(1.4); }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 13px; }
.footer-links a { color: #d8cfc1; text-decoration: none; }
dialog { border: 0; border-radius: 20px; padding: 16px; background: var(--card); max-width: min(92vw, 440px); max-height: 92vh; }
dialog::backdrop { background: rgba(30, 27, 24, .7); }
.viewer-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.viewer-header h2 { margin: 0; font-family: var(--display); font-weight: 900; font-size: 18px; }
.viewer-header button { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 6px 14px; cursor: pointer; font: inherit; }
dialog img { max-height: calc(92vh - 90px); width: auto; margin: 0 auto; border-radius: 12px; }
.locale-note { grid-column: 1 / -1; }
@media (max-width: 960px) { .directory-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .directory-grid { grid-template-columns: 1fr; } .nav-link { display: none; } .nav { height: 60px; gap: 10px; width: calc(100% - 24px); } .brand .brand-icon { width: 32px; height: 32px; border-radius: 8px; } .brand img.brand-logo { height: 24px; } .nav-actions { gap: 8px; } .nav-cta { padding: 8px 12px 7px; font-size: 13px; border-radius: 12px; } .nav-cta svg { width: 15px; height: 15px; } .visual { height: 250px; } .cta-brand .icon { width: 64px; height: 64px; } .cta-brand .logo { height: 44px; } .footer-inner { justify-content: center; } .footer-links { justify-content: center; } }
.filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 0 28px; }
.filters button { font-family: var(--display); font-weight: 900; font-size: 15px; color: var(--ink); background: var(--card); border: 2px solid var(--ink); border-radius: 999px; padding: 8px 18px; cursor: pointer; box-shadow: 0 3px 0 var(--ink); }
.filters button[aria-pressed="true"] { background: var(--orange); color: #fffdf8; }
.filters button:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.directory-card[hidden] { display: none; }
.meta { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; padding: 0; }
.meta li { font-size: 12px; font-weight: 700; color: var(--green); background: #e7efe9; border-radius: 999px; padding: 2px 10px; }