/* ウリカフェHP。元はCodexのモック（design/tokens-hp.css + design/mocks/hp.css、T000）。ここが本物の正本 */
/* T000: 勤怠アプリ案Bの白黒ラベルを、喫茶店の紙と木の色へ。 */
:root {
  --bg: #f7f5f0;
  --surface: #fffdf8;
  --surface-2: #ede7dd;
  --ink: #171412;
  --ink-sub: #5f5952;
  --line: #171412;
  --primary: #171412;
  --on-primary: #fffdf8;
  --accent: #8c422e;
  --focus: #8c422e;
  --placeholder: #e4e4e4;
  --placeholder-ink: #626262;
  --font-body: 15px;
  --font-sub: 14px;
  --font-min: 12px;
  --leading-body: 1.8;
  --leading-heading: 1.4;
  --tracking-label: .16em;
  --font-sans: system-ui, -apple-system, "Hiragino Sans", "Yu Gothic UI", sans-serif;
  --font-heading: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif CJK JP", serif;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --radius-s: 2px;
  --tap: 44px;
  --button-height: 52px;
  --mark-size: 48px;
  --stroke: 1.6;
  --border-width: 1px;
  --double-width: 4px;
  --card-border: 1px solid var(--line);
}

/* ワイヤーと同じ構成・写真比率を保つ基礎レイアウト。 */
[hidden]{display:none!important}
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --sub:var(--ink-sub);--box:var(--placeholder);--box-ink:var(--placeholder-ink);--soft:var(--surface-2);
  --gut:16px;--max:1080px;
}
html{-webkit-text-size-adjust:100%}
body{font-family:system-ui,-apple-system,"Hiragino Sans","Yu Gothic UI",sans-serif;color:var(--ink);background:var(--bg);line-height:1.6;font-size:15px;padding-bottom:72px}
a{color:inherit}
img,svg{display:block}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}

/* 写真の置き場 */
.ph{background:var(--box);color:var(--box-ink);display:flex;align-items:center;justify-content:center;text-align:center;font-size:12px;line-height:1.4;padding:8px;border-radius:4px;position:relative;overflow:hidden}
.ph::before{content:"";position:absolute;inset:0;background:linear-gradient(to top right,transparent calc(50% - .5px),#ccc calc(50% - .5px),#ccc calc(50% + .5px),transparent calc(50% + .5px))}
.ph span{position:relative;background:var(--box);padding:2px 6px}
.r43{aspect-ratio:4/3}.r11{aspect-ratio:1/1}.r169{aspect-ratio:16/9}.r34{aspect-ratio:3/4}

/* 上のバー */
.top{position:sticky;top:0;z-index:10;background:var(--bg);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:56px}
.logo{display:flex;align-items:center;gap:8px;font-weight:700;text-decoration:none;letter-spacing:.04em}
.logo i{width:36px;height:36px;border:2px solid var(--ink);border-radius:50%;display:flex;align-items:center;justify-content:center;font-style:normal;font-size:9px}
.nav{display:none;gap:28px;font-size:14px}
.nav a{text-decoration:none}
.nav a[aria-current]{border-bottom:2px solid var(--ink)}
.menu-btn{width:44px;height:44px;border:1px solid var(--line);border-radius:6px;background:none;display:flex;align-items:center;justify-content:center}

/* 節 */
section{padding:40px 0;border-bottom:1px solid #eee}
.h2{font-size:20px;font-weight:700;margin-bottom:4px;letter-spacing:.04em}
.en{font-size:11px;color:var(--sub);letter-spacing:.2em;margin-bottom:16px;display:block}
.lead{color:var(--sub);font-size:14px;margin-bottom:16px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 20px;border:2px solid var(--ink);border-radius:6px;text-decoration:none;font-weight:700;font-size:15px;background:var(--bg)}
.btn.fill{background:var(--ink);color:#fff}
.btn.block{display:flex;width:100%}
.more{display:block;text-align:right;margin-top:16px;font-size:14px;font-weight:700}

/* 最初の画面 */
.hero{position:relative;border-bottom:none;padding:0}
.hero .ph{height:min(62svh,520px);border-radius:0}
.hero-card{background:var(--bg);margin:-72px var(--gut) 0;position:relative;border:2px solid var(--ink);border-radius:6px;padding:16px}
.hero-card .big{font-size:22px;font-weight:700;line-height:1.35}
.hero-card .facts{display:flex;flex-wrap:wrap;gap:4px 16px;margin:8px 0 12px;font-size:14px}
.hero-card .row{display:grid;grid-template-columns:1fr 1fr;gap:8px}

/* 横にめくる列 */
.rail{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;margin-right:calc(var(--gut)*-1)}
.rail>*{flex:0 0 78%;scroll-snap-align:start}
.dots{display:flex;gap:6px;justify-content:center;margin-top:8px}
.dots i{width:6px;height:6px;border-radius:50%;background:var(--line)}
.dots i:first-child{background:var(--ink)}

.seats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:16px 0}
.seats div{border:1px solid var(--line);border-radius:6px;padding:10px 6px;text-align:center;font-size:12px}
.seats b{display:block;font-size:20px}
.ways{display:grid;gap:8px}
.ways li{list-style:none;display:flex;gap:12px;align-items:center;border:1px solid var(--line);border-radius:6px;padding:12px}
.ways li .ic{width:40px;height:40px;flex:0 0 40px;border:1.5px solid var(--ink);border-radius:50%}
.ways small{display:block;color:var(--sub);font-size:12px}

/* 品のカード */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px 12px}
.item .ph{margin-bottom:8px}
.item .nm{font-weight:700;font-size:14px;line-height:1.4}
.item .pr{font-size:14px}
.item .ds{font-size:12px;color:var(--sub);line-height:1.5}

/* 営業・アクセスの枠（全ページ共通） */
.visit{background:var(--soft)}
.visit dl{display:grid;grid-template-columns:5em 1fr;gap:8px 12px;font-size:14px;margin-bottom:16px}
.visit dt{color:var(--sub)}
.visit .acts{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.visit .acts .btn{padding:0 4px;font-size:13px;flex-direction:column;min-height:64px;gap:2px}
.visit .acts .btn i{width:20px;height:20px;border:1.5px solid currentColor;border-radius:50%}

footer{padding:32px 0 24px;font-size:13px;color:var(--sub)}
footer .links{display:flex;flex-wrap:wrap;gap:8px 20px;margin-bottom:12px}

/* 下の固定バー（スマホのみ） */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--bg);border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr 1fr;padding:6px 8px calc(6px + env(safe-area-inset-bottom));gap:6px}
.dock a{min-height:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-decoration:none;font-size:11px;font-weight:700;gap:2px;border-radius:6px}
.dock a i{width:20px;height:20px;border:1.5px solid currentColor;border-radius:50%}
.dock a.main{background:var(--ink);color:#fff}

/* ページ内の見出し・チップ */
.pagehead{padding:28px 0 8px;border:none}
.pagehead h1{font-size:24px;letter-spacing:.04em}
.chips{position:sticky;top:56px;z-index:9;background:var(--bg);display:flex;gap:8px;overflow-x:auto;padding:10px var(--gut);border-bottom:1px solid var(--line)}
.chips a{flex:0 0 auto;border:1px solid var(--ink);border-radius:999px;padding:6px 14px;font-size:13px;text-decoration:none;min-height:36px;display:flex;align-items:center}
.chips a:first-child{background:var(--ink);color:#fff}

.mlist{display:grid;gap:12px}
.mrow{display:grid;grid-template-columns:96px 1fr;gap:12px;align-items:center;border-bottom:1px solid #eee;padding-bottom:12px}
.mrow .nm{font-weight:700}
.mrow .pr{font-weight:700}
.mrow .ds{font-size:12px;color:var(--sub)}
.mrow .tg{display:inline-block;font-size:11px;border:1px solid var(--line);border-radius:4px;padding:0 6px;margin-right:4px}

/* 豆 */
.bean{border:1px solid var(--line);border-radius:6px;padding:14px;display:grid;gap:8px}
.bean .nm{font-weight:700;font-size:16px}
.roast{display:grid;grid-template-columns:3em 1fr 3em;align-items:center;gap:8px;font-size:11px;color:var(--sub)}
.roast .bar{display:grid;grid-template-columns:repeat(5,1fr);gap:3px}
.roast .bar i{height:8px;border:1px solid var(--ink);border-radius:2px}
.roast .bar i.on{background:var(--ink)}
.tags{display:flex;gap:6px;flex-wrap:wrap}
.tags span{font-size:12px;border:1px solid var(--ink);border-radius:999px;padding:1px 10px}
.bean .pr{display:flex;justify-content:space-between;font-size:14px;border-top:1px dashed var(--line);padding-top:8px}

/* アクセス */
.hours{border:2px solid var(--ink);border-radius:6px;padding:16px}
.hours .t{font-size:28px;font-weight:700;letter-spacing:.02em}
.steps{counter-reset:s;display:grid;gap:16px}
.steps li{list-style:none;display:grid;grid-template-columns:1fr;gap:6px}
.steps li b::before{counter-increment:s;content:counter(s) ". "}
.from{display:grid;gap:8px}
.from div{border:1px solid var(--line);border-radius:6px;padding:12px}
.from b{display:block}
.from span{font-size:13px;color:var(--sub)}
table.spec{width:100%;border-collapse:collapse;font-size:14px}
table.spec th,table.spec td{text-align:left;padding:10px 0;border-bottom:1px solid #eee;vertical-align:top}
table.spec th{width:6em;color:var(--sub);font-weight:400}

/* PC */
@media (min-width:900px){
  :root{--gut:32px}
  body{padding-bottom:0;font-size:16px}
  .dock{display:none}
  .nav{display:flex}
  .menu-btn{display:none}
  .top .wrap{height:72px}
  .chips{top:72px}
  section{padding:72px 0}
  .h2{font-size:26px}
  .hero .ph{height:min(78vh,720px)}
  .hero-card{position:absolute;left:max(32px,calc((100% - var(--max))/2 + 32px));bottom:48px;margin:0;width:420px}
  .rail{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:auto auto;overflow:visible;margin-right:0}
  .rail>*{flex:none}
  .rail>*:first-child{grid-row:span 2;aspect-ratio:auto}
  .dots{display:none}
  .split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
  .seats{margin-top:0}
  .grid2.g4{grid-template-columns:repeat(4,1fr)}
  .grid3pc{grid-template-columns:repeat(6,1fr)!important}
  .visit .acts{max-width:480px}
  .mlist{grid-template-columns:1fr 1fr;gap:16px 40px}
  .mrow{grid-template-columns:120px 1fr}
  .beans{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
  .steps{grid-template-columns:repeat(3,1fr)}
  .from{grid-template-columns:repeat(3,1fr)}
}

/* 喫茶店の白黒ラベル。装飾は枠と文字に、色は写真に。 */
html { scroll-padding-top: 140px; }
body { font-family: var(--font-sans); line-height: var(--leading-body); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
button { font: inherit; color: inherit; cursor: pointer; }
a { text-underline-offset: .25em; }
a:hover { text-decoration-thickness: 2px; }
.icon { width: 22px; height: 22px; flex: 0 0 22px; }
.photo { position: relative; overflow: hidden; background: var(--surface-2); }
.photo img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; }
.ph { border-radius: 0; border: 1px solid #ccc; }
.ph span { padding: 4px 8px; }
.top { background: var(--surface); border-bottom: 4px double var(--ink); }
.top .wrap { height: 64px; }
.logo { font-size: 14px; letter-spacing: .07em; min-height: 48px; }
.logo .mark { width: 44px; height: 48px; object-fit: contain; }
.menu-btn { border: 1px solid var(--ink); border-radius: 0; }
.nav a { min-width: 44px; min-height: 48px; display: flex; align-items: center; }
.nav a[aria-current] { border-bottom: 2px solid var(--accent); }
section { padding: 48px 0; border-bottom: 1px solid #d9d2c7; }
.h2 { display: table; max-width: 100%; padding: 5px 12px; background: var(--ink); color: var(--on-primary); font-size: 20px; font-family: var(--font-heading); line-height: 1.5; letter-spacing: .08em; }
.en { color: var(--accent); font-size: 11px; font-weight: 700; letter-spacing: .2em; margin-top: 8px; margin-bottom: 24px; }
.lead { line-height: 1.9; }
.btn { min-height: var(--button-height); border-radius: 0; border-width: 1px; background: var(--surface); position: relative; }
.btn.fill { background: var(--primary); color: var(--on-primary); border: 4px double var(--on-primary); outline: 1px solid var(--ink); outline-offset: -1px; }
.btn:hover { background: var(--surface-2); }
.btn.fill:hover { background: #342a23; }
[aria-disabled="true"] { color: #68635d; background: #e4e1db; border: 1px solid #b7b0a6; cursor: default; text-decoration: none; }
.btn.fill[aria-disabled="true"] { background: #e4e1db; color: #68635d; border: 1px solid #b7b0a6; outline: none; }
.hero { padding: 0 0 12px; }
.hero > .photo { height: clamp(260px, 48svh, 420px); }
.hero > .photo img { object-position: 52% 48%; }
.hero-card { padding: 20px 16px; background: var(--surface); border: 5px double var(--ink); border-radius: 0; margin-top: -48px; }
.hero-card .big { font-family: var(--font-heading); font-size: 26px; letter-spacing: .03em; line-height: 1.5; }
.hero-card .facts { display: grid; gap: 0; margin: 10px 0 16px; font-size: 13px; }
.hero-card .row .btn { font-size: 14px; padding: 0 8px; }
.rail { gap: 16px; }
.rail > * { flex-basis: 80%; }
.rail .photo { aspect-ratio: 4 / 3; }
.dots i { background: #c4bbae; }
.dots i.active { background: var(--ink); }
.seats { border: 4px double var(--ink); gap: 0; background: var(--surface); }
.seats div { border: 0; border-radius: 0; padding: 14px 6px; }
.seats div + div { border-left: 1px solid #d9d2c7; }
.seats b { font-family: Georgia, serif; font-size: 28px; line-height: 1.4; }
.ways li { border: 0; border-bottom: 1px solid #d9d2c7; border-radius: 0; padding: 12px 0; }
.ways li .ic { border: 0; border-radius: 0; display: flex; align-items: center; justify-content: center; }
.ways li .icon { width: 28px; height: 28px; }
.item .photo { margin-bottom: 10px; }
.item .nm { font-family: var(--font-heading); font-size: 16px; }
.item .pr { color: var(--accent); margin-top: 6px; font-weight: 700; }
.item .ds { margin-top: 2px; }
.tags span { border-color: #b7b0a6; border-radius: 2px; background: var(--surface); padding: 3px 10px; }
.visit { background: var(--surface-2); border-top: 4px double var(--ink); }
.visit dl { line-height: 1.9; }
.visit .acts .btn { min-height: 72px; gap: 6px; }
.more { min-height: 44px; display: flex; justify-content: flex-end; align-items: center; }
footer { padding: 32px 0; background: var(--surface); }
footer .links { gap: 0 20px; }
footer .links a { display: inline-flex; min-height: 44px; min-width: 44px; align-items: center; }
.dock { border-top: 4px double var(--ink); background: var(--surface); }
.dock a { border-radius: 0; min-height: 48px; }
.dock a.main { background: var(--ink); color: var(--on-primary); }
.pagehead { padding: 32px 0 16px; }
.pagehead h1 { font-family: var(--font-heading); font-size: 30px; border-bottom: 4px double var(--ink); padding-bottom: 14px; letter-spacing: .08em; }
.pagehead .lead { margin-top: 16px; margin-bottom: 0; }
.chips { top: 68px; padding: 10px 16px; background: var(--surface); }
.chips a { min-height: 44px; min-width: 44px; border-radius: 2px; }
.mrow { border-bottom: 1px solid #d9d2c7; gap: 16px; padding-bottom: 16px; }
.mrow .nm { font-family: var(--font-heading); line-height: 1.6; }
.mrow .pr { color: var(--accent); }
.mrow .tg { border-radius: 0; }
.bean { border: 4px double var(--ink); border-radius: 0; padding: 20px; background: var(--surface); gap: 14px; }
.bean .nm { font-family: var(--font-heading); font-size: 18px; }
.bean .pr { border-top: 1px solid #d9d2c7; padding-top: 14px; }
.bean .pr b { color: var(--accent); }
.roast .bar i { height: 10px; border-radius: 0; }
.hours { border: 5px double var(--ink); border-radius: 0; padding: 24px 20px; background: var(--surface); }
.hours .t { font-family: Georgia, var(--font-sans); font-size: 34px; }
.steps { gap: 28px; }
.steps li b { font-family: var(--font-heading); }
.steps li b::before { color: var(--accent); }
.from { gap: 16px; }
.from div { border: 1px solid var(--ink); border-radius: 0; padding: 20px; background: var(--surface); }
.from b { font-family: var(--font-heading); margin-bottom: 8px; }
table.spec th, table.spec td { padding: 16px 0; border-bottom-color: #d9d2c7; overflow-wrap: anywhere; }
table.spec th { width: 6em; }
table.spec a { display: inline-flex; min-width: 44px; min-height: 44px; align-items: center; }
.copy-address { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; background: none; border: 0; text-decoration: underline; text-underline-offset: .25em; font-size: 13px; }
.copy-status { display: block; font-size: 12px; color: var(--accent); }

@media (max-width: 899px) {
  .nav[data-open="true"] { display: flex; position: absolute; top: 100%; left: 0; right: 0; padding: 16px; gap: 0; flex-direction: column; background: var(--surface); border-bottom: 4px double var(--ink); box-shadow: 0 12px 16px #17141218; }
  .nav[data-open="true"] a { padding: 8px 16px; }
}
@media (min-width: 900px) {
  html { scroll-padding-top: 160px; }
  .top .wrap { height: 84px; }
  .logo { font-size: 17px; gap: 12px; }
  .logo .mark { width: 48px; height: 52px; }
  .nav { gap: 32px; }
  section { padding: 80px 0; }
  .h2 { font-size: 26px; padding: 5px 18px; }
  .hero { padding: 0; }
  .hero > .photo { height: min(76vh, 720px); }
  .hero > .photo img { object-position: center 56%; }
  .hero-card { width: 460px; padding: 28px; bottom: 48px; margin: 0; }
  .hero-card .big { font-size: 34px; }
  .hero-card .facts { font-size: 15px; margin: 16px 0 24px; }
  .hero-card .row .btn { font-size: 15px; }
  .rail > :first-child { aspect-ratio: auto; }
  .rail { grid-template-columns: 2fr 1fr 1fr; }
  .pagehead { padding: 56px 0 24px; }
  .pagehead h1 { font-size: 40px; }
  .chips { top: 88px; padding-left: max(32px, calc((100% - 1080px) / 2 + 32px)); }
  .visit .acts { max-width: 560px; }
  .visit dl { max-width: 700px; }
  .beans { gap: 20px !important; }
  .hours .t { font-size: 40px; }
}
@media (prefers-reduced-motion: no-preference) {
  .btn, .nav a { transition: background-color .15s ease; }
}
/* スクロール後も選択中の点は1つだけ。 */
.dots i:first-child:not(.active) { background: #c4bbae; }