:root{
  --paper:#f4f1e8;
  --paper2:#eee8d9;
  --ink:#101514;
  --muted:rgba(16,21,20,.68);
  --line:rgba(16,21,20,.16);

  --teal:#0f6b66;
  --gold:#b89a56;

  --max:1100px;
  --thin:1px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  color: var(--ink);
  background:
    radial-gradient(1200px 700px at 15% 10%, rgba(15,107,102,.10), transparent 60%),
    radial-gradient(900px 600px at 85% 20%, rgba(184,154,86,.10), transparent 55%),
    linear-gradient(180deg, var(--paper), var(--paper2));
  letter-spacing:.02em;
  line-height:1.85;
}

a{color:inherit;text-decoration:none}
.container{max-width:var(--max);margin:0 auto;padding:0 18px}

.small{font-size:13px}
.muted{color:var(--muted)}
.h2{
  margin:0 0 14px;
  font-size: 18px;
  letter-spacing:.14em;
}
.section{padding: 34px 0}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px}
@media (max-width: 560px){ .section-head{flex-direction:column;align-items:flex-start} }

/* Header */
.header{
  position:sticky;top:0;z-index:50;
  background: rgba(244,241,232,.78);
  backdrop-filter: blur(10px);
  border-bottom: var(--thin) solid var(--line);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 0}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.brand img{height:52px;width:auto;display:block}
.brand-text{min-width:0}
.brand-name{font-weight:800;letter-spacing:.18em}
.brand-sub{font-size:12px;color:var(--muted);letter-spacing:.14em}

.nav{display:flex;gap:14px;flex-wrap:wrap;justify-content:flex-end;font-size:13px}
.nav a{padding:8px 10px;border: var(--thin) solid transparent}
.nav a:hover{border-color: rgba(15,107,102,.35); background: rgba(15,107,102,.06)}
@media (max-width: 560px){ .nav{display:none} }

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding: 12px 14px;
  border: var(--thin) solid rgba(16,21,20,.22);
  background: rgba(255,255,255,.35);
  letter-spacing:.10em;
  font-size:14px;
}
.btn.primary{
  border-color: rgba(15,107,102,.55);
  background: linear-gradient(180deg, rgba(15,107,102,.18), rgba(15,107,102,.10));
}
.btn:hover{transform: translateY(-1px)}
.btn:active{transform: translateY(0)}

/* Hero */
.hero{padding: 44px 0 24px}
.hero-wrap{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 20px;
  align-items:stretch;
}
.hero-copy{
  border-left: 3px solid rgba(184,154,86,.55);
  padding-left: 18px;
}
.hero-kicker{font-size:12px;letter-spacing:.20em;color:var(--muted)}
.hero-title{margin:10px 0 10px;font-size: clamp(28px, 3.2vw, 46px); line-height:1.22; letter-spacing:.12em}
.hero-lead{margin:0 0 18px;color:var(--muted)}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap}
.hero-note{margin-top:18px;display:flex;gap:10px;flex-wrap:wrap}
.pill{
  font-size:12px;letter-spacing:.14em;
  padding: 6px 10px;
  border: var(--thin) solid rgba(184,154,86,.40);
  background: rgba(184,154,86,.08);
}
.hero-media{
  border: var(--thin) solid var(--line);
  background: rgba(255,255,255,.35);
  overflow:hidden;
  min-height: 320px;
}
.hero-media img{width:100%;height:100%;object-fit:cover;display:block;filter: contrast(1.03) saturate(1.02)}
@media (max-width: 900px){
  .hero-wrap{grid-template-columns:1fr}
  .hero-media{min-height: 260px}
}

/* Concept lines (カード感を消す) */
.concept-lines{border-top: var(--thin) solid var(--line)}
.line{
  display:flex;gap:16px;
  padding: 14px 0;
  border-bottom: var(--thin) solid var(--line);
}
.line-head{width:110px;font-weight:800;letter-spacing:.12em}
.line-body{flex:1;color:var(--muted)}
@media (max-width: 560px){
  .line{flex-direction:column;gap:6px}
  .line-head{width:auto}
}

/* Chips */
.chips{display:flex;gap:10px;flex-wrap:wrap;margin: 10px 0 14px}
.chip{
  padding: 8px 10px;
  border: var(--thin) solid rgba(16,21,20,.22);
  background: rgba(255,255,255,.30);
  letter-spacing:.10em;
  font-size:13px;
  cursor:pointer;
}
.chip.is-active{
  border-color: rgba(15,107,102,.55);
  background: rgba(15,107,102,.10);
}

/* Shelf (横スクロール) */
.shelf{
  display:flex;
  gap: 12px;
  overflow:auto;
  padding: 6px 2px 14px;
  scroll-snap-type: x mandatory;
  border-top: var(--thin) solid var(--line);
  border-bottom: var(--thin) solid var(--line);
}

.item{
  flex: 0 0 320px;
  scroll-snap-align: start;
  border: var(--thin) solid rgba(16,21,20,.18);
  background: rgba(255,255,255,.35);
}

.item img{
  width:100%;
  height:240px;
  object-fit:cover;
  display:block;
}

.item-body{padding: 12px}
.item-name{font-weight:800;letter-spacing:.10em;margin-bottom:6px}
.item-desc{color:var(--muted);font-size:13px;margin-bottom:10px}
.item-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border-top: var(--thin) solid var(--line);
  padding-top:10px;
  font-size:13px
}

.price{letter-spacing:.10em}

.tag{
  padding: 4px 8px;
  border: var(--thin) solid rgba(184,154,86,.40);
  background: rgba(184,154,86,.08);
  font-size:12px;
  letter-spacing:.14em;
}

.hint{
  margin-top:10px;
  color:var(--muted);
  font-size:13px
}

/* Guide */
.guide{border-top: var(--thin) solid var(--line)}
.guide-row{display:flex;gap:16px;padding: 14px 0;border-bottom: var(--thin) solid var(--line)}
.guide-k{width:110px;font-weight:800;letter-spacing:.12em}
.guide-v{flex:1;color:var(--muted)}
@media (max-width: 560px){
  .guide-row{flex-direction:column;gap:6px}
  .guide-k{width:auto}
}

/* Shop photos */
.shop-photos{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}

.shop-photo{
  margin:0;
  border: var(--thin) solid var(--line);
  background: rgba(255,255,255,.35);
  overflow:hidden;
}

.shop-photo img{
  width:100%;
  height:360px;
  object-fit:cover;
  display:block;
}

.shop-cap{
  padding:10px 12px;
  border-top: var(--thin) solid var(--line);
  color:var(--muted);
  font-size:13px;
  letter-spacing:.10em;
}

/* Payment */
.pay{border-top: var(--thin) solid var(--line); border-bottom: var(--thin) solid var(--line)}
.pay-row{display:flex;gap:16px;padding: 14px 0;border-top: var(--thin) solid var(--line)}
.pay-row:first-child{border-top:none}
.pay-k{width:160px;font-weight:800;letter-spacing:.10em}
.pay-v{flex:1;color:var(--muted)}
.pay-icons{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:8px}
.pay-icons img{
  height: 26px; width:auto; display:block;
  background: rgba(255,255,255,.95);
  padding: 6px 8px;
  border: var(--thin) solid rgba(184,154,86,.25);
}
@media (max-width: 560px){
  .pay-row{flex-direction:column;gap:6px}
  .pay-k{width:auto}
}

/* Contact */
.contact{display:grid;grid-template-columns: 1fr 1fr;gap:12px}
.contact-box{border: var(--thin) solid var(--line);background: rgba(255,255,255,.35);padding: 16px}
.contact-h{font-weight:800;letter-spacing:.12em;margin-bottom:8px}
.contact-row{display:flex;justify-content:space-between;gap:10px;padding:10px 0;border-top: var(--thin) solid var(--line);color:var(--muted)}
.contact-row:first-of-type{border-top:none}
@media (max-width: 900px){ .contact{grid-template-columns:1fr} }

/* Footer */
.footer{margin-top: 34px;border-top: var(--thin) solid var(--line);padding: 22px 0 30px;background: rgba(244,241,232,.60)}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.footer-links{display:flex;gap:14px;flex-wrap:wrap}
.footer a:hover{opacity:.85}

/* Mobile adjustments */
@media (max-width: 560px){

  .shelf{
    display:grid;
    grid-template-columns: 1fr;
    gap:12px;
    overflow:visible;
    padding: 10px 0 0;
    scroll-snap-type: none;
    border-top: var(--thin) solid var(--line);
    border-bottom: none;
  }

  .item{
    flex: none;
    width: 100%;
  }

  .item img{
    height: 220px;
  }

  .hint{
    display:none;
  }

  .shop-photos{
    grid-template-columns: 1fr;
  }

  .shop-photo img{
    height:240px;
  }
}