/* ============================================================ THE RICE WINE CLUB — design system Manhattan after dark, 52nd floor. True black ground, warm bone text (never white), one antique-gold accent, no gradients. High-contrast didone at 3x body with wide tracking. Square corners, hairline rules, enormous space. Motion is slow and only ever dims — nothing snaps. ここが**唯一の意匠の出どころ**である。色・余白・書体は すべてこのブロックの値を動かせば変わる。 ============================================================ */ :root { /* ---- ground: 真の黒。夜の店内 ---- */ --ground: #000000; --ground-2: #0a0a0a; /* パネル */ --ground-3: #111111; /* 一段持ち上げた面 */ --chrome: rgba(23, 23, 23, 0.86); /* 固定ヘッダの膜 */ /* ---- text: 純白にしない。骨色が蝋燭の灯に見える ---- */ --bone: #ece9df; --bone-2: #b8b3a7; --bone-3: #8a857b; --bone-4: #5e5a52; /* ---- accent: 金 1 色のみ。地には絶対に使わない ---- */ --gold: #a29061; --gold-hi: #c8b585; --gold-dim: #6d6142; /* ---- hairlines ---- */ --line: #232323; --line-2: #333130; --ok: #8fae93; --warn: #cf9a4e; --danger: #d4736a; /* ---- type ---- */ --display: "Playfair Display", "Didot", "Bodoni MT", Georgia, serif; --sans: "Jost", "Futura", "Century Gothic", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --jp: "Shippori Mincho", "Yu Mincho", "Hiragino Mincho ProN", serif; /* 表示サイズの字間。刻印のように離す */ --track-display: 0.06em; /* 小さな英字ラベルの字間 */ --track-label: 0.18em; /* ---- shape: 直角。角丸は一切作らない ---- */ --r: 0; /* ---- 余白: ここが「高級感」の主成分 ---- */ --section: clamp(64px, 12vw, 180px); --block: clamp(40px, 8vw, 120px); --wrap: 1360px; --gap: clamp(16px, 2.4vw, 32px); --rule: 1px solid var(--line); /* ---- motion: 遅く、沈むだけ ---- */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --reveal: 1.4s; color-scheme: dark; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--ground); } body { margin: 0; background: var(--ground); color: var(--bone); font-family: var(--sans); font-size: 16px; font-weight: 300; line-height: 1.85; letter-spacing: 0.015em; -webkit-font-smoothing: antialiased; overflow-x: hidden; } [lang="ja"] { font-family: var(--jp); font-feature-settings: "palt" 1; } a { color: inherit; text-decoration: none; transition: opacity 0.4s var(--ease), color 0.4s var(--ease); } img { max-width: 100%; display: block; } button, input, select, textarea { font: inherit; color: inherit; } ::selection { background: var(--gold); color: var(--ground); } :focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--bone); color: var(--ground); padding: 14px 20px; } .skip-link:focus { left: 10px; top: 10px; } /* ---------- layout ---------- */ .wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 clamp(20px, 5vw, 60px); } .narrow { max-width: 680px; margin: 0 auto; } .narrow-sm { max-width: 380px; } .prose { max-width: 58ch; } .center-block { text-align: center; padding: var(--section) 0; } section { padding: var(--section) 0; } .two-col { display: grid; gap: var(--block); align-items: start; } /* ---------- type ---------- */ h1, h2, h3 { margin: 0; font-weight: 400; } .title-xl { font-family: var(--display); font-size: clamp(2.6rem, 8vw, 5.4rem); font-weight: 400; line-height: 1.12; letter-spacing: var(--track-display); text-wrap: balance; } .title-l { font-family: var(--display); font-size: clamp(1.8rem, 4.4vw, 3rem); line-height: 1.25; letter-spacing: var(--track-display); } .title-m { font-family: var(--display); font-size: clamp(1.45rem, 3vw, 2.1rem); line-height: 1.4; letter-spacing: var(--track-display); margin-top: 2.6em; } .title-s { font-family: var(--sans); font-size: 0.7rem; font-weight: 400; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--gold); margin-top: 3em; } .title-xl em, .title-l em { font-style: italic; color: var(--gold); } .lede { font-size: clamp(0.98rem, 1.5vw, 1.12rem); line-height: 2.1; letter-spacing: 0.06em; color: var(--bone-2); max-width: 44ch; } .muted { color: var(--bone-3); } .small { font-size: 0.84rem; } .tiny { font-size: 0.72rem; } .num { font-variant-numeric: tabular-nums; } .center { text-align: center; } /* 全体に反復する金の小見出し。大文字変換に頼らず、字間で見せる */ .eyebrow { font-size: 0.68rem; font-weight: 400; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--gold); margin: 0 0 22px; } .ruby { font-family: var(--jp); color: var(--bone-4); font-size: 0.8em; margin-left: 0.6em; letter-spacing: 0.1em; } .page-head { padding: var(--block) 0 clamp(20px, 4vw, 44px); } .page-head .muted { margin: 22px 0 0; max-width: 52ch; line-height: 2; } .section-head { display: flex; flex-wrap: wrap; gap: 18px 40px; align-items: flex-end; justify-content: space-between; margin-bottom: clamp(28px, 5vw, 60px); } .section-lede { color: var(--bone-3); max-width: 50ch; margin: -18px 0 clamp(28px, 4vw, 52px); line-height: 2; } /* 中央から開く下線。持ち上げず、光らせない */ .more { font-size: 0.68rem; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--gold); position: relative; padding-bottom: 6px; white-space: nowrap; } .more::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--gold); transform: scaleX(1); transform-origin: center; transition: transform 0.45s var(--ease); } .more:hover::after { transform: scaleX(1.35); } /* ---------- masthead ---------- */ .masthead { background: var(--chrome); backdrop-filter: blur(14px); border-bottom: var(--rule); position: sticky; top: 0; z-index: 40; } .promo { border-bottom: var(--rule); font-size: 0.64rem; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--bone-4); } .promo-inner { display: flex; justify-content: center; gap: 26px; padding: 11px 0; text-align: center; } .promo-inner > span:not(.promo-sync) { display: none; } .promo-sync { text-transform: none; letter-spacing: 0.06em; color: var(--gold-dim); } .masthead-main { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 18px 0; } .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; color: var(--bone); } .icon-btn:hover { color: var(--gold); } .brand { display: flex; flex-direction: column; align-items: center; line-height: 1; } .brand-lead { font-family: var(--display); font-style: italic; font-size: 0.8rem; color: var(--gold); letter-spacing: 0.1em; margin-bottom: 4px; } .brand-mark { font-family: var(--display); font-size: clamp(1.15rem, 4.4vw, 1.9rem); font-weight: 400; letter-spacing: 0.16em; white-space: nowrap; text-transform: uppercase; } .brand:hover { opacity: 0.6; } .masthead-actions { display: flex; align-items: center; gap: 18px; justify-self: end; } .search { display: none; align-items: center; gap: 10px; border-bottom: 1px solid var(--line-2); padding: 0 2px; color: var(--bone-4); } .search input { border: 0; background: transparent; outline: none; padding: 10px 0; width: 170px; font-size: 0.8rem; letter-spacing: 0.08em; } .search input::placeholder { color: var(--bone-4); } .search:focus-within { border-color: var(--gold); } .cart-link { display: inline-flex; align-items: center; gap: 9px; font-size: 0.66rem; letter-spacing: var(--track-label); text-transform: uppercase; } .cart-link:hover { color: var(--gold); } .cart-label { display: none; } .cart-count { min-width: 19px; height: 19px; padding: 0 5px; background: var(--gold); color: var(--ground); font-size: 0.64rem; display: inline-flex; align-items: center; justify-content: center; letter-spacing: 0; } .cart-count[data-count="0"] { background: transparent; color: var(--bone-4); box-shadow: inset 0 0 0 1px var(--line-2); } .nav { display: none; border-top: var(--rule); } .nav.open { display: block; } .nav-inner { display: flex; flex-direction: column; padding-bottom: 18px; } .nav-inner > a { padding: 16px 2px; font-size: 0.72rem; letter-spacing: var(--track-label); text-transform: uppercase; border-bottom: var(--rule); } .nav-inner > a[aria-current="page"] { color: var(--gold); } .search-mobile { display: flex; margin-top: 20px; } .search-mobile input { width: 100%; } /* ---------- buttons: 直角。hover は金へ ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 56px; padding: 16px 34px; border: 1px solid var(--bone); border-radius: var(--r); background: transparent; color: var(--bone); font-size: 0.68rem; font-weight: 400; letter-spacing: var(--track-label); text-transform: uppercase; cursor: pointer; transition: background 0.45s var(--ease), color 0.45s var(--ease), border-color 0.45s var(--ease); } .btn:hover { background: var(--gold); border-color: var(--gold); color: var(--bone); } .btn-primary { background: var(--bone); border-color: var(--bone); color: var(--ground); } .btn-primary:hover { background: var(--gold); border-color: var(--gold); color: var(--bone); } .btn-quiet { border-color: var(--line-2); color: var(--bone-2); } .btn-quiet:hover { background: transparent; border-color: var(--gold); color: var(--gold); } .btn-sm { min-height: 44px; padding: 12px 20px; font-size: 0.62rem; } .btn-block { width: 100%; } .btn[disabled] { opacity: 0.32; cursor: not-allowed; pointer-events: none; } .button-row { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 44px; } /* ---------- hero ---------- */ .hero { padding: clamp(48px, 12vw, 150px) 0 var(--block); } .hero-inner { display: grid; gap: var(--block); } .hero-copy .title-xl { margin: 10px 0 34px; } .stats { border-top: 1px solid var(--gold-dim); padding-top: 26px; } .stats-title { font-size: 0.64rem; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--gold); margin: 0 0 30px; } .stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 20px; margin: 0; } .stats-grid dd { margin: 0; font-family: var(--display); font-size: clamp(2.2rem, 6vw, 3rem); line-height: 1; letter-spacing: 0.02em; color: var(--bone); } .stats-grid dt { font-size: 0.62rem; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--bone-4); margin-top: 12px; } .stats-note { font-size: 0.76rem; color: var(--bone-4); margin: 32px 0 0; border-top: var(--rule); padding-top: 20px; line-height: 1.9; } /* ---------- 甘辛の軸 ---------- */ .axis { display: grid; border-top: 1px solid var(--gold-dim); } .axis-cell { padding: clamp(26px, 4vw, 44px) 0; display: block; border-bottom: var(--rule); } .axis-cell:hover { opacity: 0.55; } .axis-label { font-family: var(--display); font-size: clamp(1.7rem, 4vw, 2.3rem); line-height: 1.2; letter-spacing: var(--track-display); display: block; } .axis-desc { display: block; font-size: 0.82rem; color: var(--bone-3); margin: 14px 0 16px; max-width: 32ch; line-height: 1.95; } .axis-count { font-size: 0.62rem; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--gold-dim); } /* ---------- 香りの系統 ---------- */ .aroma-grid { display: grid; border-top: 1px solid var(--gold-dim); } .aroma-cell { display: block; padding: clamp(22px, 3vw, 34px) 0; border-bottom: var(--rule); } .aroma-cell:hover { opacity: 0.55; } .aroma-label { font-family: var(--display); font-size: clamp(1.4rem, 3vw, 1.8rem); line-height: 1.25; display: block; letter-spacing: var(--track-display); } .aroma-cell p { font-size: 0.8rem; color: var(--bone-3); margin: 12px 0 12px; line-height: 1.95; } .aroma-count { font-size: 0.62rem; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--gold-dim); } /* ---------- 商品札 ---------- 画像が無いので、銘柄名を縦に組んだ「刻印された札」を品物として立てる */ .grid { display: grid; gap: clamp(26px, 4vw, 52px) clamp(16px, 2.4vw, 32px); grid-template-columns: repeat(2, 1fr); } .card { display: flex; flex-direction: column; } .card:hover .card-plate { opacity: 0.62; } .card:hover .card-plate .plate-name { letter-spacing: 0.26em; } .card-plate { position: relative; background: var(--ground-2); box-shadow: inset 0 0 0 1px var(--line-2); aspect-ratio: 3 / 4; padding: 26px 14px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 14px; text-align: center; overflow: hidden; transition: opacity 0.6s var(--ease); } .plate-maker { font-size: 0.6rem; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--gold); line-height: 1.7; } .plate-name { writing-mode: vertical-rl; text-orientation: mixed; font-size: clamp(1.1rem, 3.4vw, 1.45rem); letter-spacing: 0.22em; line-height: 1.2; white-space: nowrap; font-weight: 400; color: var(--bone); flex: 1; display: flex; align-items: center; transition: letter-spacing 0.8s var(--ease); } .plate-origin { font-size: 0.58rem; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--bone-4); } .award-dot { position: absolute; top: 14px; left: 14px; color: var(--gold); font-size: 0.54rem; letter-spacing: var(--track-label); text-transform: uppercase; padding-bottom: 3px; border-bottom: 1px solid var(--gold-dim); } .card-body { padding: 20px 0 0; display: flex; flex-direction: column; gap: 12px; flex: 1; } .card-title { font-family: var(--display); font-size: 1.05rem; font-weight: 400; line-height: 1.45; letter-spacing: 0.03em; } .card-title a:hover { color: var(--gold); } .card-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 0.68rem; letter-spacing: 0.08em; color: var(--bone-4); align-items: center; } .card-tags { display: flex; flex-wrap: wrap; gap: 7px; } .card-foot { margin-top: auto; padding-top: 16px; border-top: var(--rule); display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .price { font-family: var(--display); font-size: clamp(1.3rem, 3vw, 1.55rem); line-height: 1; letter-spacing: 0.03em; color: var(--bone); } .price-lg { font-size: clamp(2.4rem, 7vw, 3.2rem); } .price-na { font-family: var(--sans); font-size: 0.72rem; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--bone-4); } /* ---------- tags / status ---------- */ .tag { display: inline-block; padding: 5px 11px; border: 1px solid var(--line-2); border-radius: var(--r); font-size: 0.6rem; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--bone-3); } .tag:hover { border-color: var(--gold); color: var(--gold); } .tag-cold { border-color: var(--gold-dim); color: var(--gold); } .status { display: inline-flex; align-items: center; gap: 7px; font-size: 0.64rem; letter-spacing: var(--track-label); text-transform: uppercase; } .status::before { content: ""; width: 4px; height: 4px; background: currentColor; } .status-ok { color: var(--ok); } .status-warn { color: var(--warn); } .status-muted { color: var(--bone-4); } .chip { display: inline-flex; align-items: center; gap: 9px; padding: 8px 14px; border: 1px solid var(--gold-dim); font-size: 0.62rem; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--gold); } .chip::after { content: "×"; font-size: 0.95rem; line-height: 1; } .chip:hover { opacity: 0.6; } /* ---------- notices ---------- */ .notice { border-left: 1px solid var(--gold-dim); padding: 16px 0 16px 22px; font-size: 0.82rem; color: var(--bone-3); margin: 0 0 var(--block); line-height: 1.95; } .notice-quiet { color: var(--bone-4); } .notice-alert { border-color: var(--danger); color: var(--danger); } .notice-ref { display: block; font-size: 0.68rem; color: var(--bone-4); margin-top: 8px; font-variant-numeric: tabular-nums; letter-spacing: 0.06em; } .alert { border-left: 1px solid var(--danger); color: var(--danger); padding: 16px 0 16px 22px; margin-bottom: 30px; font-size: 0.84rem; } .empty { padding: clamp(64px, 14vw, 140px) 20px; text-align: center; box-shadow: inset 0 0 0 1px var(--line); } .empty .title-m { margin: 0 0 14px; } .empty .btn { margin-top: 30px; } /* ---------- crumbs ---------- */ .crumbs { display: flex; flex-wrap: wrap; gap: 11px; font-size: 0.6rem; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--bone-4); padding: 26px 0 0; } .crumbs a:hover { color: var(--gold); } .crumb-sep { color: var(--line-2); } /* ---------- catalog ---------- */ .catalog { display: grid; gap: var(--block); align-items: start; } .filters { border-top: 1px solid var(--gold-dim); } .filters-summary { display: flex; align-items: center; justify-content: space-between; padding: 20px 0; cursor: pointer; list-style: none; min-height: 56px; font-size: 0.66rem; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--gold); } .filters-summary::-webkit-details-marker { display: none; } .filters[open] .filters-summary svg { transform: rotate(180deg); } .filter-group { border-top: var(--rule); padding: 22px 0; } .filters .filter-group:first-of-type { border-top: 0; } .filter-group h2 { font-size: 0.62rem; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--bone-4); margin-bottom: 14px; font-weight: 400; } .filter-input { width: 100%; border: 0; border-bottom: 1px solid var(--line-2); background: transparent; padding: 11px 2px; outline: none; letter-spacing: 0.06em; } .filter-input:focus { border-color: var(--gold); } .filter-hint { font-size: 0.68rem; color: var(--bone-4); margin: 10px 0 0; line-height: 1.8; } .choice { display: flex; align-items: center; gap: 12px; padding: 9px 0; cursor: pointer; font-size: 0.84rem; min-height: 38px; letter-spacing: 0.04em; } .choice:hover { color: var(--gold); } .choice input { accent-color: var(--gold); width: 15px; height: 15px; flex: none; } .filter-actions { display: flex; gap: 12px; padding-top: 24px; border-top: 1px solid var(--gold-dim); } .result-head { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: baseline; justify-content: space-between; padding-bottom: 20px; border-bottom: 1px solid var(--gold-dim); margin-bottom: clamp(28px, 4vw, 48px); } .result-count { font-family: var(--display); font-size: 1.5rem; letter-spacing: 0.03em; } .result-count .muted { font-family: var(--sans); font-size: 0.7rem; letter-spacing: var(--track-label); text-transform: uppercase; } .active-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; } /* ---------- product detail ---------- */ .detail { display: grid; gap: var(--block); align-items: start; padding-top: clamp(24px, 4vw, 48px); } .detail-plate { position: relative; background: var(--ground-2); box-shadow: inset 0 0 0 1px var(--line-2); aspect-ratio: 3 / 4; padding: 46px 28px 30px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 26px; text-align: center; } .detail-plate .plate-name { font-size: clamp(1.5rem, 5vw, 2.1rem); letter-spacing: 0.26em; } .plate-foot { font-size: 0.64rem; color: var(--bone-4); margin: 0; max-width: 30ch; line-height: 1.85; letter-spacing: 0.04em; } .detail-body .title-xl { font-size: clamp(2.1rem, 6vw, 3.6rem); margin: 12px 0 10px; } .detail-original { font-family: var(--jp); color: var(--bone-3); margin: 0 0 24px; letter-spacing: 0.16em; font-size: 1rem; } .detail-meta { margin-bottom: 34px; padding-bottom: 34px; border-bottom: var(--rule); } .note-block { border: 0; margin: 0; padding: 0; font-family: var(--display); font-style: italic; font-size: clamp(1.2rem, 2.4vw, 1.6rem); line-height: 1.75; color: var(--bone); letter-spacing: 0.03em; } .note-attr { display: block; font-family: var(--sans); font-style: normal; font-size: 0.62rem; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--gold); margin-top: 22px; } .note-original { font-family: var(--jp); font-size: 0.84rem; color: var(--bone-4); margin: 20px 0 0; line-height: 2; } .spec { width: 100%; border-collapse: collapse; margin-top: 44px; font-size: 0.86rem; } .spec th, .spec td { text-align: left; vertical-align: top; padding: 18px 0; border-bottom: var(--rule); } .spec th { width: 34%; font-weight: 400; color: var(--bone-4); font-size: 0.62rem; letter-spacing: var(--track-label); text-transform: uppercase; padding-right: 16px; } .spec-note { display: block; margin-top: 8px; color: var(--bone-3); line-height: 1.9; } .field-list { font-size: 0.72rem; color: var(--bone-4); word-break: break-word; letter-spacing: 0.04em; } .awards { margin-top: 48px; } .awards-list { list-style: none; margin: 16px 0; padding: 0; } .awards-list li { padding: 13px 0; border-bottom: var(--rule); font-size: 0.86rem; } .awards-list li::before { content: ""; display: inline-block; width: 16px; height: 1px; background: var(--gold); margin-right: 14px; vertical-align: middle; } .buy-box { margin-top: 48px; border-top: 1px solid var(--gold-dim); padding-top: 32px; display: flex; flex-direction: column; gap: 26px; } .buy-price { display: flex; flex-direction: column; gap: 10px; } .list-price { font-size: 0.72rem; color: var(--bone-4); letter-spacing: var(--track-label); text-transform: uppercase; } .list-price b { color: var(--gold); font-weight: 400; } .buy-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: stretch; } .buy-actions .btn { flex: 1; min-width: 190px; } .qty { display: inline-flex; box-shadow: inset 0 0 0 1px var(--line-2); } .qty button { width: 48px; min-height: 56px; border: 0; background: transparent; cursor: pointer; font-size: 1rem; color: var(--bone-3); } .qty button:hover { color: var(--gold); } .qty input { width: 54px; text-align: center; border: 0; box-shadow: inset 1px 0 0 var(--line-2), inset -1px 0 0 var(--line-2); background: transparent; -moz-appearance: textfield; font-variant-numeric: tabular-nums; } .qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* ---------- breweries ---------- */ .brewery-list { display: flex; flex-direction: column; border-top: 1px solid var(--gold-dim); } .brewery-row { display: grid; gap: 20px; padding: var(--block) 0; border-bottom: var(--rule); } .brewery-head h2 { font-family: var(--display); font-size: clamp(1.7rem, 4vw, 2.4rem); line-height: 1.25; letter-spacing: var(--track-display); display: inline; } .brewery-origin { font-size: 0.62rem; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--gold); margin: 14px 0 18px; } .brewery-figures { display: flex; flex-wrap: wrap; gap: 22px; font-size: 0.64rem; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--bone-4); } .brewery-products { list-style: none; margin: 0; padding: 0; font-size: 0.86rem; } .brewery-products li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: var(--rule); } .brewery-products a:hover { color: var(--gold); } .brewery-cta { justify-self: start; } /* ---------- glossary ---------- */ .glossary { display: grid; margin: 26px 0 0; border-top: 1px solid var(--gold-dim); } .gloss { border-bottom: var(--rule); padding: 26px 0; } .gloss dt { font-family: var(--display); font-size: clamp(1.25rem, 2.6vw, 1.6rem); line-height: 1.35; letter-spacing: var(--track-display); } .gloss dd { margin: 12px 0 0; color: var(--bone-3); font-size: 0.86rem; max-width: 52ch; line-height: 2; } .gloss dd a { color: var(--gold); } .gloss dd a:hover { opacity: 0.6; } .policy-list { padding-left: 0; list-style: none; color: var(--bone-3); border-top: var(--rule); } .policy-list li { padding: 18px 0; border-bottom: var(--rule); line-height: 1.95; } /* ---------- cart / forms ---------- */ .cart-table { width: 100%; border-collapse: collapse; } .cart-table th { text-align: left; font-size: 0.6rem; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--bone-4); font-weight: 400; padding: 14px 0; border-bottom: 1px solid var(--gold-dim); } .cart-table td { padding: 24px 0; border-bottom: var(--rule); vertical-align: middle; } .cart-table .r { text-align: right; font-variant-numeric: tabular-nums; } .cart-line-name { font-family: var(--display); font-size: 1.02rem; letter-spacing: 0.03em; } .cart-line-meta { display: block; font-size: 0.68rem; color: var(--bone-4); margin-top: 6px; letter-spacing: 0.08em; } .summary { box-shadow: inset 0 0 0 1px var(--line-2); padding: 30px; position: sticky; top: 108px; background: var(--ground-2); } .summary-title { font-size: 0.62rem; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--gold); margin: 0 0 26px; } .summary-lines { margin: 0 0 20px; } .summary-lines > div { display: flex; justify-content: space-between; gap: 18px; padding: 10px 0; } .summary-lines dt { color: var(--bone-4); font-size: 0.76rem; letter-spacing: var(--track-label); text-transform: uppercase; } .summary-lines dd { margin: 0; font-variant-numeric: tabular-nums; font-size: 0.92rem; } .summary-total { border-top: 1px solid var(--gold-dim); margin-top: 14px; padding-top: 20px !important; } .summary-total dt { color: var(--bone) !important; } .summary-total dd { font-family: var(--display); font-size: 1.9rem !important; line-height: 1; letter-spacing: 0.03em; } .summary .btn { margin-top: 14px; } .summary-items { list-style: none; margin: 0 0 20px; padding: 0; } .summary-items li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: var(--rule); font-size: 0.8rem; } .field { display: flex; flex-direction: column; gap: 10px; margin-bottom: 26px; } .field label { font-size: 0.62rem; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--bone-4); } .field input, .field textarea, .field select { border: 0; border-bottom: 1px solid var(--line-2); background: transparent; padding: 13px 2px; outline: none; font-size: 0.96rem; min-height: 50px; border-radius: var(--r); letter-spacing: 0.04em; } .field textarea { min-height: 96px; resize: vertical; box-shadow: inset 0 0 0 1px var(--line-2); border-bottom: 0; padding: 14px; } .field select { box-shadow: inset 0 0 0 1px var(--line-2); border-bottom: 0; padding: 14px; background: var(--ground-2); } .field input:focus, .field textarea:focus, .field select:focus { border-color: var(--gold); } .field-row { display: grid; gap: 26px; } .check { display: flex; gap: 16px; align-items: flex-start; margin: 36px 0; font-size: 0.86rem; border-top: var(--rule); border-bottom: var(--rule); padding: 28px 0; color: var(--bone-2); line-height: 1.9; } .check input { margin-top: 5px; width: 18px; height: 18px; accent-color: var(--gold); flex: none; } .shipping-choices { border: 0; border-top: 1px solid var(--gold-dim); padding: 0; margin: 44px 0; } .shipping-choices legend { font-size: 0.62rem; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--gold); padding: 22px 0 8px; } .shipping-choice { align-items: flex-start; gap: 16px; padding: 22px 0; border-bottom: var(--rule); } .shipping-choice input { margin-top: 4px; } .shipping-body { display: flex; flex-direction: column; gap: 7px; flex: 1; } .shipping-name { display: flex; justify-content: space-between; gap: 14px; font-size: 0.7rem; letter-spacing: var(--track-label); text-transform: uppercase; } .shipping-price { font-family: var(--display); font-size: 1.2rem; letter-spacing: 0.03em; text-transform: none; color: var(--bone); } .shipping-transit { font-size: 0.7rem; color: var(--gold-dim); letter-spacing: 0.08em; } .shipping-desc { font-size: 0.78rem; color: var(--bone-4); line-height: 1.85; } .shipping-block { font-size: 0.72rem; color: var(--danger); letter-spacing: 0.04em; } .shipping-choice[data-disabled="1"] { opacity: 0.4; } .remove-link { background: none; border: 0; padding: 0; font-size: 0.6rem; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--bone-4); border-bottom: 1px solid var(--line-2); cursor: pointer; } .remove-link:hover { color: var(--gold); border-color: var(--gold); } /* ---------- receipt ---------- */ .receipt { box-shadow: inset 0 0 0 1px var(--line-2); padding: clamp(36px, 8vw, 88px); text-align: center; margin-top: var(--block); background: var(--ground-2); } .order-no { font-family: var(--display); font-size: clamp(1.7rem, 6vw, 2.6rem); letter-spacing: 0.1em; margin: 10px 0 26px; color: var(--gold); } .receipt-items { list-style: none; padding: 0; margin: 44px auto; max-width: 440px; text-align: left; border-top: 1px solid var(--gold-dim); } .receipt-items li { display: flex; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: var(--rule); font-size: 0.86rem; } .receipt-total { border-bottom: 0 !important; font-family: var(--display); font-size: 1.1rem !important; } .receipt .btn { margin-top: 16px; } /* ---------- 約束 ---------- */ .promise { border-top: var(--rule); border-bottom: var(--rule); } .promise-grid { display: grid; } .promise-grid article { border-bottom: var(--rule); padding: clamp(28px, 4vw, 48px) 0; display: grid; gap: 16px; } .promise-grid article:last-child { border-bottom: 0; } .promise-no { font-family: var(--display); font-size: clamp(2rem, 5vw, 2.8rem); line-height: 1; color: var(--gold); } .promise-grid h3 { font-family: var(--display); font-size: clamp(1.2rem, 2.6vw, 1.5rem); line-height: 1.45; letter-spacing: var(--track-display); } .promise-grid p { margin: 0; color: var(--bone-3); font-size: 0.84rem; max-width: 38ch; line-height: 2; } /* ---------- admin ---------- */ .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 24px 0; border-top: 1px solid var(--gold-dim); } .admin-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; min-width: 920px; } .admin-table th, .admin-table td { border-bottom: var(--rule); padding: 14px 10px; text-align: left; vertical-align: middle; } .admin-table th { font-size: 0.58rem; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--bone-4); font-weight: 400; } .admin-table input[type="text"], .admin-table input[type="number"] { border: 0; border-bottom: 1px solid var(--line); background: transparent; padding: 7px 2px; width: 100%; min-width: 120px; } .admin-table input:focus { border-color: var(--gold); outline: none; } .admin-table input[type="number"] { width: 96px; min-width: 88px; text-align: right; } .admin-table .center { text-align: center; } .admin-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--gold); } /* ---------- footer ---------- */ .footer { border-top: var(--rule); margin-top: var(--section); padding: var(--block) 0 36px; } .footer-grid { display: grid; gap: 44px; } .footer-brand { font-family: var(--display); font-size: clamp(1.5rem, 5vw, 2.1rem); line-height: 1.2; letter-spacing: 0.14em; margin-bottom: 20px; text-transform: uppercase; } .footer-about p { margin: 0; color: var(--bone-4); font-size: 0.8rem; max-width: 38ch; line-height: 2; } .footer h2 { font-size: 0.6rem; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--gold); margin-bottom: 18px; font-weight: 400; } .footer ul { list-style: none; margin: 0; padding: 0; } .footer li { padding: 7px 0; font-size: 0.82rem; } .footer a:hover { color: var(--gold); } .footer-bottom { border-top: var(--rule); margin-top: 48px; padding-top: 24px; font-size: 0.66rem; color: var(--bone-4); letter-spacing: 0.08em; } /* ---------- toast ---------- */ .toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); background: var(--bone); color: var(--ground); padding: 16px 26px; font-size: 0.74rem; letter-spacing: var(--track-label); text-transform: uppercase; opacity: 0; pointer-events: none; transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); z-index: 60; max-width: calc(100vw - 32px); text-align: center; } .toast.show { opacity: 1; transform: translate(-50%, 0); } /* ---------- 画像 (image_url が在るときだけ) ---------- */ .card-plate-photo { padding: 0; } .card-photo, .detail-photo { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 3s var(--ease); } .card:hover .card-photo { transform: scale(1); } /* ---------- 現れ方: 遅く、下から ---------- */ .fadein { opacity: 0; transform: translateY(40px); transition: opacity var(--reveal) var(--ease), transform var(--reveal) var(--ease); } .fadein.is-active { opacity: 1; transform: translateY(0); } /* ============================================================ 広い画面 ============================================================ */ @media (min-width: 600px) { .grid-3, .grid-4 { grid-template-columns: repeat(3, 1fr); } .field-row { grid-template-columns: 1fr 1fr; } .promo-inner > span:not(.promo-sync) { display: inline; } .promo-inner { justify-content: space-between; } .cart-label { display: inline; } .glossary { grid-template-columns: repeat(2, 1fr); column-gap: 60px; } .axis { grid-template-columns: repeat(2, 1fr); column-gap: 44px; } .aroma-grid { grid-template-columns: repeat(2, 1fr); column-gap: 44px; } .promise-grid { grid-template-columns: repeat(3, 1fr); column-gap: 48px; } .promise-grid article { border-bottom: 0; } } @media (min-width: 960px) { .masthead-main { grid-template-columns: 1fr auto 1fr; padding: 24px 0; } .nav-toggle { display: none; } .brand { grid-column: 2; } .masthead-actions { grid-column: 3; } .search { display: flex; } .search-mobile { display: none; } .nav { display: block; } .nav-inner { flex-direction: row; justify-content: center; gap: clamp(28px, 4vw, 60px); padding: 0; } .nav-inner > a { border-bottom: 0; padding: 16px 2px; position: relative; } .nav-inner > a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: center; transition: transform 0.45s var(--ease); } .nav-inner > a:hover::after, .nav-inner > a[aria-current="page"]::after { transform: scaleX(1); } .hero-inner { grid-template-columns: 1.5fr 0.5fr; align-items: end; } .axis { grid-template-columns: repeat(4, 1fr); } .aroma-grid { grid-template-columns: repeat(5, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } .catalog { grid-template-columns: 250px 1fr; } .filters { position: sticky; top: 118px; } .filters-summary { display: none; } .filters > form { display: block !important; } .detail { grid-template-columns: 0.78fr 1.22fr; } .detail-plate { position: sticky; top: 128px; } .two-col { grid-template-columns: 1.45fr 0.55fr; } .brewery-row { grid-template-columns: 260px 1fr auto; gap: 40px; align-items: start; } .brewery-products { columns: 2; column-gap: 40px; } .brewery-products li { break-inside: avoid; } .footer-grid { grid-template-columns: 1.8fr 1fr 1fr 1fr; } } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } .fadein { opacity: 1; transform: none; } } /* ---------- 夜のマンハッタン ---------- 写真が使えないので、金のヘアラインと灯の入った窓で摩天楼を敷く。 参照した意匠はグラデーションを使わないので、ここも平面のまま重ねるだけ。 */ .hero { position: relative; } .hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: clamp(110px, 17vw, 240px); background-image: url("data:image/svg+xml,"); background-repeat: repeat-x; background-position: left bottom; background-size: auto 100%; opacity: 0.85; pointer-events: none; z-index: 0; } .hero .wrap { position: relative; z-index: 1; } .hero-inner { padding-bottom: clamp(90px, 14vw, 190px); } /* 街の上の一本の地平線 */ .hero { border-bottom: 1px solid var(--gold-dim); } /* ---------- 味わい / 注記 (白い意匠と同じクラス名。暗い側の見え方) ---------- */ .detail-section { border-top: 1px solid var(--gold-dim); padding: clamp(28px, 4vw, 48px) 0; } .detail-section > h2 { font-family: var(--display); font-size: clamp(1.4rem, 3vw, 1.9rem); letter-spacing: var(--track-display); margin-bottom: 22px; } .taste-grid { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--line); } .taste-card { background: var(--ground-2); padding: 20px 22px; } .taste-card .k { font-size: 0.62rem; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--gold); margin-bottom: 10px; } .taste-card .v { font-size: 0.95rem; line-height: 1.9; color: var(--bone-2); } .callout { border-top: 1px solid var(--gold-dim); padding: clamp(24px, 4vw, 40px) 0; font-size: 0.84rem; color: var(--bone-3); line-height: 1.95; } .callout h2 { font-size: 0.66rem; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--gold); margin-bottom: 12px; } .callout strong { color: var(--bone); font-weight: 400; } @media (min-width: 721px) { .taste-grid { grid-template-columns: repeat(3, 1fr); } }