:root{
  --ink:#0F1310;
  --ink-2:#161C18;
  --porcelain:#E9E5DA;
  --muted:#98A199;
  --jade:#6E9C82;
  --amber:#C08A3E;

  --wrap:min(1080px, 88vw);
  --serif:"Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --roman:"Marcellus", "Shippori Mincho B1", serif;
  --sans:"Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--ink);
  color:var(--porcelain);
  font-family:var(--sans);
  font-weight:400;
  line-height:1.9;
  letter-spacing:.04em;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}

.skip{
  position:absolute;left:-9999px;top:0;
  background:var(--porcelain);color:var(--ink);
  padding:.6rem 1rem;z-index:10;
}
.skip:focus{left:0}

:focus-visible{
  outline:2px solid var(--jade);
  outline-offset:3px;
}

.wrap{width:var(--wrap);margin-inline:auto}

/* ---------- hero ---------- */

.hero{
  position:relative;
  min-height:100svh;
  display:grid;
  place-items:center;
  padding:14vh 0 12vh;
  overflow:hidden;
  /* 写真素材が入ったら --hero-image を差し替える */
  background:
    radial-gradient(120% 80% at 50% 0%, #1B231D 0%, var(--ink) 62%),
    var(--ink);
}
.hero::after{
  content:"";
  position:absolute;inset:auto 0 0;height:38vh;
  background:linear-gradient(to top, var(--ink), transparent);
  pointer-events:none;
}
.hero-inner{
  width:var(--wrap);
  text-align:center;
  position:relative;z-index:1;
}

.eyebrow{
  font-family:var(--roman);
  font-size:.82rem;
  letter-spacing:.42em;
  text-transform:uppercase;
  color:var(--jade);
  margin:0 0 2.4rem;
  padding-left:.42em;
}

.wordmark{
  font-family:var(--roman);
  font-weight:400;
  font-size:clamp(3.1rem, 12vw, 7.4rem);
  line-height:1;
  letter-spacing:.14em;
  margin:0;
  padding-left:.14em;
}
.wordmark span{
  display:block;
  font-family:var(--serif);
  font-size:clamp(.72rem, 2.4vw, 1rem);
  font-weight:400;
  letter-spacing:.5em;
  color:var(--muted);
  margin-top:1.6rem;
  padding-left:.5em;
}

.hours{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(1rem, 4vw, 2.4rem);
  margin:clamp(3rem, 8vh, 5rem) 0 .9rem;
}
.hours-t{
  font-family:var(--roman);
  font-size:clamp(1.5rem, 5.2vw, 2.6rem);
  letter-spacing:.1em;
  line-height:1;
}
.hours-t i{font-style:normal;color:var(--jade)}
.hours-line{
  flex:0 1 clamp(3rem, 22vw, 12rem);
  height:1px;
  background:linear-gradient(to right, var(--jade), var(--amber));
  opacity:.85;
}
.hours-note{
  margin:0;
  font-size:.8rem;
  letter-spacing:.22em;
  color:var(--muted);
}

.lede{
  font-family:var(--serif);
  font-size:clamp(.95rem, 2.4vw, 1.06rem);
  line-height:2.4;
  max-width:31em;
  margin:clamp(2.6rem, 7vh, 4rem) auto 0;
  color:#D6D2C6;
}

.hero-cta{
  display:flex;
  flex-wrap:wrap;
  gap:.9rem;
  justify-content:center;
  margin:clamp(2.4rem, 6vh, 3.4rem) 0 0;
}
.btn{
  font-family:var(--roman);
  font-size:.94rem;
  letter-spacing:.16em;
  text-decoration:none;
  padding:.92em 2.1em;
  border:1px solid var(--porcelain);
  background:var(--porcelain);
  color:var(--ink);
  transition:background .25s, color .25s, border-color .25s;
}
.btn:hover{background:transparent;color:var(--porcelain)}
.btn.ghost{
  background:transparent;
  color:var(--porcelain);
  border-color:rgba(233,229,218,.5);
}
.btn.ghost:hover{border-color:var(--porcelain)}

/* ---------- sections ---------- */

.band{padding:clamp(5rem, 13vh, 9rem) 0}
.band + .band{border-top:1px solid rgba(233,229,218,.09)}
.tea-band{background:var(--ink-2)}

.label{
  font-family:var(--roman);
  font-size:.74rem;
  letter-spacing:.4em;
  text-transform:uppercase;
  color:var(--jade);
  margin:0 0 .7rem;
  padding-left:.4em;
}
.h2{
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(1.4rem, 4vw, 1.9rem);
  letter-spacing:.16em;
  margin:0 0 2.8rem;
}
.sub{
  font-family:var(--serif);
  color:var(--muted);
  margin:-2rem 0 2.8rem;
  font-size:.95rem;
}
.sub-b{
  margin:2.6rem 0 0;
  max-width:36em;
  line-height:2.2;
}

/* 料金 */

.rate{list-style:none;margin:0;padding:0;max-width:44em}
.rate li{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:baseline;
  gap:.4rem 1.2rem;
  padding:1.05rem 0;
  border-bottom:1px solid rgba(233,229,218,.11);
}
.rate-n{
  font-family:var(--serif);
  font-size:1.06rem;
  letter-spacing:.1em;
}
.rate-n em{
  font-family:var(--roman);
  font-style:normal;
  font-size:.74rem;
  letter-spacing:.16em;
  color:var(--muted);
  margin-left:.9em;
}
.rate-d{
  grid-column:1;
  font-size:.78rem;
  color:var(--muted);
  letter-spacing:.12em;
}
.rate-p{
  grid-row:1 / span 2;
  grid-column:2;
  align-self:center;
  font-family:var(--roman);
  font-size:1.24rem;
  color:var(--amber);
  letter-spacing:.04em;
}
.rate.two{max-width:34em}

.tax{
  margin:1.3rem 0 0;
  font-size:.8rem;
  letter-spacing:.12em;
  color:var(--muted);
}

.flavor{margin-top:3rem;max-width:40em}
.flavor-h{
  font-family:var(--roman);
  font-size:.76rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--jade);
  margin:0 0 .3rem;
}
.flavor-b{
  margin:0 0 1.7rem;
  font-size:.94rem;
  line-height:2.1;
}
.flavor-n{
  margin:0;
  font-size:.85rem;
  color:var(--muted);
}

/* 中国茶（縦組み） */

.tea{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(9, minmax(0, 1fr));
  gap:0;
}
.tea li{
  display:flex;
  flex-direction:column;
  align-items:center;
  min-height:15em;
  min-width:0;
  padding:0 .5rem;
  border-left:1px solid rgba(110,156,130,.24);
}
.tea li:nth-child(9n+1){border-left:0}
.tea-cat{
  font-size:.68rem;
  letter-spacing:.2em;
  color:var(--jade);
  margin-bottom:1.5rem;
}
.tea-name{
  writing-mode:vertical-rl;
  font-family:var(--serif);
  font-size:clamp(1.25rem, 3.2vw, 1.85rem);
  letter-spacing:.24em;
  line-height:1;
}
.tea-price{
  margin-top:auto;
  white-space:nowrap;
  padding-top:1.4rem;
  font-family:var(--roman);
  font-size:.92rem;
  color:var(--amber);
}

.gloss{
  display:flex;
  flex-wrap:wrap;
  gap:.4rem 2rem;
  margin:3.6rem 0 0;
  padding-top:2rem;
  border-top:1px solid rgba(233,229,218,.09);
  font-size:.82rem;
  color:var(--muted);
}
.gloss div{display:flex;gap:.6rem}
.gloss dt{font-family:var(--serif);color:var(--porcelain)}
.gloss dd{margin:0}

/* 店舗情報 */

.info{margin:0;display:grid;gap:0}
.info > div{
  display:grid;
  grid-template-columns:9rem 1fr;
  gap:1.6rem;
  padding:1.5rem 0;
  border-bottom:1px solid rgba(233,229,218,.11);
}
.info dt{
  font-family:var(--serif);
  font-size:.9rem;
  letter-spacing:.16em;
  color:var(--muted);
}
.info dd{margin:0;line-height:2.1}
.link{
  color:var(--jade);
  text-underline-offset:.32em;
  text-decoration-thickness:1px;
}

/* footer */

.foot{
  padding:clamp(4rem, 10vh, 6rem) 0 3.4rem;
  border-top:1px solid rgba(233,229,218,.09);
  text-align:center;
}
.foot-mark{
  font-family:var(--roman);
  font-size:1.3rem;
  letter-spacing:.44em;
  margin:0 0 2.2rem;
  padding-left:.44em;
}
.foot-links{
  list-style:none;
  margin:0 0 2.4rem;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.6rem 2.2rem;
}
.foot-links a{
  font-family:var(--roman);
  font-size:.9rem;
  letter-spacing:.14em;
  text-decoration:none;
  color:var(--muted);
  transition:color .25s;
}
.foot-links a:hover{color:var(--porcelain)}
.foot-note{
  margin:0;
  font-size:.76rem;
  letter-spacing:.14em;
  color:#6C736C;
}

/* ---------- motion ---------- */

@keyframes rise{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}
.hero .eyebrow,
.hero .wordmark,
.hero .hours,
.hero .hours-note,
.hero .lede,
.hero .hero-cta{
  animation:rise .9s cubic-bezier(.2,.7,.3,1) both;
}
.hero .wordmark{animation-delay:.1s}
.hero .hours{animation-delay:.34s}
.hero .hours-note{animation-delay:.42s}
.hero .lede{animation-delay:.54s}
.hero .hero-cta{animation-delay:.66s}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important}
}

/* ---------- responsive ---------- */

@media (max-width:860px){
  :root{--wrap:min(1080px, 86vw)}
  .tea{grid-template-columns:repeat(5, minmax(0, 1fr));row-gap:3rem}
  .tea li{min-height:12.5em}
  .tea li:nth-child(9n+1){border-left:1px solid rgba(110,156,130,.24)}
  .tea li:nth-child(5n+1){border-left:0}
  .info > div{grid-template-columns:1fr;gap:.4rem}
  .info dt{font-size:.78rem;letter-spacing:.2em}
}

@media (max-width:520px){
  .tea{grid-template-columns:repeat(3, minmax(0, 1fr));row-gap:2.6rem}
  .tea li{min-height:11em;padding:0 .3rem}
  .tea li:nth-child(5n+1){border-left:1px solid rgba(110,156,130,.24)}
  .tea li:nth-child(3n+1){border-left:0}
  .tea-name{font-size:1.24rem;letter-spacing:.2em}
  .tea-cat{margin-bottom:1rem;font-size:.62rem}
  .tea-price{font-size:.82rem;padding-top:1rem}
  .btn{padding:.9em 1.6em;font-size:.88rem}
}