/* leap snippets/jp-typo.css — 日本語の組版の土台（見出しは詰め、本文はベタ、文節で改行） */
html{text-spacing-trim:trim-start;hanging-punctuation:allow-end;-webkit-text-size-adjust:100%}
:where(h1,h2,h3,h4,.jp-tight){font-feature-settings:"palt" 1;letter-spacing:.02em;word-break:auto-phrase;text-wrap:balance;line-break:strict}
:where(p,li,dd,dt,td,th,figcaption){word-break:auto-phrase;line-break:strict;overflow-wrap:anywhere;text-wrap:pretty}
:where(.tate){writing-mode:vertical-rl;text-orientation:mixed;font-feature-settings:"vpal" 1;letter-spacing:.08em}
:where(.num,.mono){font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

:root{
  --paper:#f5f3f0; --paper-2:#e7e4df; --ink:#1c140e; --ink-2:#554b42; --pen:#a8321f; --rule:rgba(28,20,14,.18);
  --display:"Shippori Antique B1","Hiragino Kaku Gothic StdN",sans-serif;
  --body:"IBM Plex Sans JP","Hiragino Sans",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;--s10:144px;
  --pad:clamp(20px,4vw,56px); --max:1320px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-padding-top:72px}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.9;-webkit-font-smoothing:antialiased}
img{display:block;width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:2px solid var(--pen);outline-offset:3px}
.skip{position:absolute;left:-9999px}.skip:focus{left:12px;top:12px;z-index:9;background:var(--ink);color:var(--paper);padding:8px 12px}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:13px;letter-spacing:0;color:var(--pen)}
.nowrap{white-space:nowrap}

/* header */
.hd{position:sticky;top:0;z-index:5;background:var(--paper);border-bottom:1px solid var(--rule)}
.hd .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s5);height:64px}
.logo{font-family:var(--display);font-size:20px;text-decoration:none;line-height:1}
.logo small{display:block;font-family:var(--mono);font-size:12px;color:var(--ink-2);margin-top:5px}
.nav{display:flex;align-items:center;gap:var(--s6);font-size:15px}
.nav a:not(.btn){text-decoration:none;padding:6px 0;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .25s}
.nav a:not(.btn):hover{background-size:100% 1px}
@media (max-width:860px){.nav a:not(.btn){display:none}}
.btn{display:inline-flex;align-items:center;gap:var(--s3);min-height:48px;padding:0 var(--s5);border-radius:2px;background:var(--ink);color:var(--paper);text-decoration:none;font-weight:500;font-size:15px;transition:background .2s}
.btn:hover{background:#3a2c22}
.btn span{transition:transform .2s}.btn:hover span{transform:translateX(3px)}
.link{font-size:15px;text-underline-offset:5px;text-decoration-thickness:1px}

/* hero：縦組みの見出し（左）＋焙煎の写真（右は画面の端まで） */
.hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s7);padding-top:var(--s8);max-width:calc(var(--max) + (100vw - var(--max)) / 2);margin-left:max(0px,(100vw - var(--max)) / 2);padding-left:var(--pad)}
.hero__copy{display:grid;grid-template-columns:auto 1fr;gap:var(--s6);align-content:start}
.hero h1{font-family:var(--display);font-weight:400;font-size:clamp(44px,6.2vw,92px);line-height:1.15;writing-mode:vertical-rl;text-orientation:mixed;letter-spacing:.06em;height:min(78vh,8.6em)}
.hero__lead{align-self:end;max-width:17em;padding-bottom:var(--s3)}
.hero__lead p{margin-bottom:var(--s6)}
.hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s5)}
.hero__photo{margin:0}
.hero__photo img{aspect-ratio:3/2;object-fit:cover}
.hero__cap{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);padding:var(--s3) var(--pad) 0 0}
@media (max-width:860px){
  .hero{grid-template-columns:1fr;padding:0;margin:0;max-width:none;gap:var(--s6)}
  .hero__photo{order:-1}
  .hero__copy{padding-inline:var(--pad);grid-template-columns:1fr}
  .hero h1{writing-mode:horizontal-tb;height:auto;font-size:clamp(40px,11vw,56px);letter-spacing:.02em}
  .hero__cap{padding-inline:var(--pad)}
}

/* 焙煎記録：曲線は左に貼りつき、右の4つの記録を読み進めると線が伸びる */
.record{padding-block:var(--s10)}
.record__head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s7);margin-bottom:var(--s8)}
.record__head h2,.beans h2,.shop h2{font-family:var(--display);font-weight:400;font-size:clamp(30px,3.6vw,48px);line-height:1.35}
.record__head p{max-width:30em;color:var(--ink-2);align-self:end}
.record__body{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s7);align-items:start}
.chart{position:sticky;top:96px;border-top:2px solid var(--ink);padding-top:var(--s4)}
.chart__read{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:var(--s4)}
.chart__read b{font-family:var(--mono);font-weight:400;font-size:clamp(28px,3vw,40px);color:var(--pen);font-variant-numeric:tabular-nums}
.chart svg{width:100%;height:auto;overflow:visible}
.chart .grid line{stroke:var(--rule);stroke-width:1}
.chart .axis text{font-family:var(--mono);font-size:12px;fill:var(--ink-2)}
.chart .curve{fill:none;stroke:var(--pen);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.chart .mark circle{fill:var(--paper);stroke:var(--pen);stroke-width:2}
.chart .mark text{font-family:var(--mono);font-size:12px;fill:var(--pen)}
.steps{list-style:none;counter-reset:s}
.step{min-height:46vh;padding:var(--s5) 0 var(--s8);border-top:1px solid var(--rule)}
.step__t{display:flex;gap:var(--s4);align-items:baseline;margin-bottom:var(--s3)}
.step h3{font-family:var(--display);font-weight:400;font-size:24px}
.step p{color:var(--ink-2);max-width:24em}
.record__after{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--s7);align-items:end;margin-top:var(--s8)}
.record__after p{font-family:var(--display);font-size:clamp(22px,2.4vw,30px);line-height:1.6;max-width:16em}
@media (max-width:860px){.record__head,.record__body,.record__after{grid-template-columns:1fr}.chart{top:64px;background:var(--paper);z-index:1;padding-bottom:var(--s3)}.step{min-height:38vh}}

/* 今月の豆：品書きの表（カードを並べない） */
.beans{padding-block:var(--s9) var(--s10);border-top:1px solid var(--rule)}
.beans .wrap{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--s7);align-items:start}
.beans figure{margin:0;position:sticky;top:96px}
.beans figcaption{font-size:14px;color:var(--ink-2);margin-top:var(--s3)}
.beans__note{color:var(--ink-2);font-size:15px;margin:var(--s3) 0 var(--s6)}
.menu{width:100%;border-collapse:collapse}
.menu th,.menu td{text-align:left;vertical-align:top;padding:var(--s5) var(--s4) var(--s5) 0;border-top:1px solid var(--rule);font-weight:400}
.menu thead th{font-size:13px;color:var(--ink-2);padding-block:var(--s2);border-top:2px solid var(--ink)}
.menu .name{font-family:var(--display);font-size:22px;line-height:1.4}
.menu .name small{display:block;font-family:var(--body);font-size:13px;color:var(--ink-2)}
.menu .roast{white-space:nowrap}
.roastbar{display:inline-grid;grid-template-columns:repeat(5,14px);gap:3px;vertical-align:middle;margin-right:6px}
.roastbar i{height:6px;background:var(--rule)}.roastbar i.on{background:var(--ink)}
.menu .price{white-space:nowrap;font-family:var(--mono);font-size:15px}
.menu td:last-child{padding-right:0;text-align:right;white-space:nowrap}
@media (max-width:860px){.beans .wrap{grid-template-columns:1fr}.beans figure{position:static}.menu thead{display:none}.menu tr{display:grid;grid-template-columns:1fr auto;padding:var(--s4) 0;border-top:1px solid var(--rule)}.menu td{border:0;padding:2px 0}.menu .name{grid-column:1/-1}}

/* 店：画面の端までの店内の写真＋定義リスト */
.shop{border-top:1px solid var(--rule)}
.shop__wide{margin:0}
.shop__wide img{aspect-ratio:21/9;object-fit:cover}
.shop .wrap{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,5fr) minmax(0,4fr);gap:var(--s7);padding-block:var(--s8) var(--s10);align-items:start}
.shop figure{margin:0}
.info{display:grid;grid-template-columns:6em 1fr;row-gap:var(--s3);margin-top:var(--s6);font-size:16px}
.info dt{color:var(--ink-2)}
.drinks{list-style:none;border-top:2px solid var(--ink)}
.drinks li{display:flex;justify-content:space-between;gap:var(--s4);padding:var(--s4) 0;border-bottom:1px solid var(--rule)}
.drinks .price{font-family:var(--mono);font-size:15px;white-space:nowrap}
@media (max-width:860px){.shop .wrap{grid-template-columns:1fr}.shop__wide img{aspect-ratio:4/3}.shop figure{max-width:280px}}

/* 定期便：帯の地を変え、表とフォーム */
.sub{background:var(--paper-2);padding-block:var(--s10)}
.sub .wrap{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:var(--s8);align-items:start}
.sub h2{font-family:var(--display);font-weight:400;font-size:clamp(36px,5.4vw,76px);line-height:1.25}
.sub__note{margin-top:var(--s6);max-width:24em;color:var(--ink-2)}
.plans{width:100%;border-collapse:collapse;margin-bottom:var(--s7)}
.plans th,.plans td{text-align:left;padding:var(--s4) 0;border-top:1px solid var(--rule);font-weight:400;vertical-align:baseline}
.plans tr:first-child th,.plans tr:first-child td{border-top:2px solid var(--ink)}
.plans th{font-family:var(--display);font-size:22px}
.plans td{color:var(--ink-2);font-size:15px}
.plans td.price{color:var(--ink);font-family:var(--mono);font-size:18px;text-align:right;white-space:nowrap}
.form{display:grid;gap:var(--s4)}
.form label{display:grid;gap:var(--s1);font-size:14px}
.form .req{color:var(--pen);font-size:12px;margin-left:6px}
.form input,.form select{font:inherit;font-size:16px;min-height:48px;padding:0 var(--s3);border:1px solid rgba(28,20,14,.4);border-radius:2px;background:var(--paper);color:var(--ink)}
.form button{justify-self:start;border:0;cursor:pointer;font:inherit}
.form__msg{font-size:14px;color:var(--pen);min-height:1.5em}
@media (max-width:860px){.sub .wrap{grid-template-columns:1fr}}

.ft{padding-block:var(--s7);font-size:13px;color:var(--ink-2);border-top:1px solid var(--rule)}
.ft .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--s4)}

.menu td:last-child .link{display:inline-flex;align-items:center;min-height:44px;min-width:44px;justify-content:flex-end}
.form__note{font-size:13px;color:var(--ink-2)}
.form__note a{text-underline-offset:3px}

.nav a:not(.btn){display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}
@media (max-width:860px){.nav a:not(.btn){display:none}}

/* 店内の写真は元の画像の幅（2752px＝高精細で1376px）を超えて引き伸ばさない */
.shop__wide{max-width:1376px;margin-inline:auto}

/* スマホ：ヘッダー・表の詰まりを直す */
@media (max-width:860px){
  .hd .wrap{height:60px;gap:var(--s3)}
  .logo{font-size:17px;white-space:nowrap}
  .logo small{display:none}
  .hd .btn{min-height:44px;padding:0 var(--s4);white-space:nowrap}
  .sp-hide{display:none}
  .menu tr{grid-template-columns:1fr auto;row-gap:var(--s1)}
  .menu td.roast,.menu td:nth-child(3){grid-column:1/-1}
  .menu td:nth-child(3){color:var(--ink-2);font-size:15px}
  .plans tr{display:grid;grid-template-columns:1fr auto;border-top:1px solid var(--rule);padding:var(--s3) 0}
  .plans tr:first-child{border-top:2px solid var(--ink)}
  .plans th,.plans td,.plans tr:first-child th,.plans tr:first-child td{border:0;padding:2px 0}
  .plans td:not(.price){grid-column:1/-1;grid-row:2}
}