/* トークン（配色は coolors.co「Deep Ocean Blue」0a1128-001f54-034078-1282a2-fefcfb をもとにした紺と白） */
:root {
  --bg: #fefcfb;
  --surface: #eef1f6;
  --ink: #001f54;
  --ink-sub: #5a6788;
  --line: #c9d0de;
  --accent: #0f7694;
  --navy: #001f54;
  --navy-2: #034078;
  --dark: #0a1128;
  --on-dark: #fefcfb;
  --on-dark-sub: #8f9bb8;
  --ph: #d5dbe6;
  --ph-2: #c3cbda;
  --ph-3: #e4e8ef;
  --ph-ink: #4a5878;
  --en: "Instrument Serif", "Times New Roman", serif;
  --gr: Inter, "Helvetica Neue", Arial, sans-serif;
  --jp: "Zen Kaku Gothic New", YuGothic, "Yu Gothic Medium", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  --ease: cubic-bezier(.55, .01, .45, 1);
  --ease-card: cubic-bezier(0, .15, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 15px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--dark); color: var(--ink); font-family: var(--jp); font-size: 1rem; font-weight: 400; line-height: 1.8; letter-spacing: .02em; font-feature-settings: "palt" 1; -webkit-font-smoothing: antialiased; overflow-x: clip; }
h1, h2, h3, p, ul, dl, dd, dt, figure { margin: 0; padding: 0; font-weight: 400; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.ib { display: inline-block; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.paper { background: var(--bg); position: relative; }
.en { font-family: var(--en); font-weight: 400; letter-spacing: -.03em; }
.min { font-family: var(--jp); font-weight: 700; }

/* 英字の見出し: 行ごとに下からせり上がる */
.row { display: block; }
.ch-w { display: inline-block; overflow: hidden; margin-bottom: -.2em; padding-bottom: .2em; min-width: .26em; vertical-align: top; }
.ch { display: inline-block; transform: translateY(126%); transition: transform 1.1s cubic-bezier(.16, 1, .3, 1); }
.row + .row .ch { transition-delay: .12s; }
.is-in .ch, .is-capture .ch { transform: none; }

/* ロゴ（仮のテキストロゴ） */
.logo { display: inline-flex; flex-direction: column; align-items: center; line-height: 1; font-weight: 700; white-space: nowrap; }
.logo__sub { font-size: .6em; letter-spacing: .5em; margin-right: -.5em; }
.logo__name { font-size: 1.25em; letter-spacing: .22em; margin-right: -.22em; margin-top: .5em; }

/* 矢印 */
.ico-arrow { width: 12px; height: 8px; fill: none; stroke: currentColor; stroke-width: 1.1; flex: none; }
.ico-arrow--up { transform: rotate(-45deg); }

/* ボタン（大・塗り）: 角のある箱。ホバーで色が左から入れ替わる */
.btn-l { position: relative; display: inline-flex; align-items: center; justify-content: space-between; gap: 28px; min-width: 250px; height: 64px; padding: 0 26px; font-size: .8667rem; font-weight: 700; line-height: 1; color: var(--on-dark); background: var(--accent); overflow: hidden; isolation: isolate; transition: color .5s var(--ease); }
.btn-l::before { content: ""; position: absolute; inset: 0; background: var(--on-dark); transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease); z-index: -1; }
.btn-l__inr { display: flex; align-items: center; justify-content: space-between; gap: 28px; width: 100%; }
.btn-l:hover { color: var(--navy); }
.btn-l:hover::before { transform: scaleX(1); transform-origin: left; }

/* ボタン（中・線）: 下線だけ。ホバーで線が引き直される */
.btn-m { position: relative; display: inline-flex; align-items: center; height: 54px; padding: 0 4px; font-size: .9333rem; font-weight: 700; line-height: 1; }
.btn-m::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform-origin: left; transition: transform .5s var(--ease); }
.btn-m__inr { display: inline-flex; align-items: center; gap: 22px; }
.btn-m .ico-arrow { transition: transform .4s var(--ease); }
.btn-m--w { color: var(--on-dark); }
@media (hover: hover) {
  .btn-m:hover::after { animation: line .7s var(--ease); }
  .btn-m:hover .ico-arrow:not(.ico-arrow--up) { transform: translateX(6px); }
}
@keyframes line { 0% { transform: scaleX(1); transform-origin: right; } 49% { transform: scaleX(0); transform-origin: right; } 50% { transform: scaleX(0); transform-origin: left; } 100% { transform: scaleX(1); transform-origin: left; } }

/* ボタン（小・丸に矢印） */
.btn-s { position: relative; display: inline-flex; align-items: center; gap: 14px; font-size: .9333rem; font-weight: 700; line-height: 1; }
.btn-s__arrow { position: relative; width: 38px; height: 38px; border: 1px solid currentColor; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background .4s var(--ease), color .4s var(--ease); }
.btn-s--w { color: var(--on-dark); }
.btn-s--r { flex-direction: row; }
@media (hover: hover) { .btn-s:hover .btn-s__arrow { background: var(--on-dark); color: var(--dark); } }

/* 商品名・価格 */
.item-name { display: block; font-size: .9333rem; font-weight: 700; line-height: 1.43; text-align: center; }
.item-price { display: block; font-family: var(--gr); font-weight: 700; font-size: .7333rem; line-height: 1; margin-top: 12px; text-align: center; letter-spacing: .04em; }
@media (max-width: 1200px) { .item-name { font-size: calc((100vw - 376px) / 826 * 1 + 13px); } }

/* 写真（フリー素材の Unsplash。お店の写真が届いたら assets/img/ の同じ名前のファイルを差し替える） */
.pic { position: relative; width: 100%; height: 100%; overflow: hidden; background: var(--ph); }
.pic img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* 仮画像（地図） */
.ph { position: relative; width: 100%; height: 100%; background: linear-gradient(135deg, var(--ph-3), var(--ph) 55%, var(--ph-2)); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ph--b { background: linear-gradient(200deg, var(--ph-3), var(--ph-2)); }
.ph--c { background: linear-gradient(45deg, var(--ph), var(--ph-3)); }
.ph--dark { background: linear-gradient(160deg, #3a4763, #1b2540 60%, #2b3754); }
.ph--map { background: repeating-linear-gradient(0deg, transparent 0 39px, rgba(255, 255, 255, .55) 39px 40px), repeating-linear-gradient(90deg, transparent 0 59px, rgba(255, 255, 255, .55) 59px 60px), var(--ph); }
.ph__label { font-size: 11px; font-weight: 500; letter-spacing: .08em; line-height: 1.5; color: var(--ph-ink); text-align: center; padding: 0 .6em; }
.ph--dark .ph__label { color: rgba(254, 252, 251, .55); }

/* カードのホバー */
.zoom { overflow: hidden; transition: transform .75s var(--ease-card); }
.zoom > * { transition: transform .75s var(--ease-card); }
@media (hover: hover) { li:hover > .zoom { transform: scale(.95); } li:hover > .zoom > * { transform: scale(1.1); } }

/* 開幕の幕 */
.loader { position: fixed; inset: 0; z-index: 100000; background: var(--bg); display: flex; align-items: center; justify-content: center; color: var(--ink); font-size: 22px; transition: opacity 1.2s 1s, visibility 0s 2.2s; }
.loader__logo { transition: opacity 1.2s; }
.is-loaded .loader { opacity: 0; visibility: hidden; }
.is-loaded .loader__logo { opacity: 0; }
.is-capture .loader { display: none; }

@media (prefers-reduced-motion: reduce) { .ch { transition: none; } html { scroll-behavior: auto; } }