/* ============================================================
   REPLAY by ECLART 大宮駅東口店 — kinari paper / deep matcha
   One design for index / faq / reviews.
   ============================================================ */

:root{
  /* pipeline tokens — tokens.css may redefine after this file */
  --bg:#f2f0e4;
  --surface:#ffffff;
  --surface-2:#e9e6d6;
  --ink:#1d2318;
  --muted:#4d5540;
  --accent:#4a6018;
  --accent-ink:#4a6018;
  --on-accent:#f2f0e4;

  --serif:"Zen Old Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --sans:"Noto Sans JP","Hiragino Kaku Gothic ProN",sans-serif;

  --gutter:clamp(20px,4.5vw,64px);
  --colgap:clamp(20px,3vw,56px);
  --sec-gap:clamp(96px,12vw,150px);
  --hairline:1px solid rgba(29,35,24,.16);
  --hairline-soft:1px solid rgba(29,35,24,.09);
  --chrome-h:84px;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-padding-top:calc(var(--chrome-h) + 16px);}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth;}}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  font-weight:400;
  line-height:1.9;
  letter-spacing:.05em;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img{max-width:100%;display:block;}
a{color:inherit;}
p{margin:0 0 1.6em;}
p:last-child{margin-bottom:0;}
h1,h2,h3,h4{margin:0;font-weight:600;}
ul,ol{margin:0;padding:0;list-style:none;}

.wrap{max-width:1320px;margin-inline:auto;padding-inline:var(--gutter);}
.grid12{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--colgap);}

/* ---------- type ---------- */
.display{font-family:var(--serif);font-weight:600;}
.sec-label{
  display:block;
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  font-size:.8rem;
  letter-spacing:.18em;
  color:var(--muted);
  margin-bottom:18px;
}
h2{
  font-family:var(--serif);
  font-size:clamp(1.6rem,3.2vw,2.3rem);
  line-height:1.4;
  letter-spacing:.08em;
  margin-bottom:clamp(28px,4vw,52px);
}
h3{font-family:var(--serif);line-height:1.5;}
.lede{max-inline-size:40ic;}
.em{color:var(--accent-ink);}
.small{font-size:.8rem;color:var(--muted);line-height:1.8;}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:12px 32px;
  background:var(--accent);
  color:#f2f0e4;
  font-family:var(--sans);
  font-size:.9rem;font-weight:500;letter-spacing:.14em;
  text-decoration:none;
  border:1px solid var(--accent);
  transition:background-color .3s cubic-bezier(.22,1,.36,1),color .3s cubic-bezier(.22,1,.36,1);
}
.btn:hover{background:color-mix(in srgb,var(--accent),#000 14%);border-color:color-mix(in srgb,var(--accent),#000 14%);}
.btn-ghost{
  background:transparent;color:var(--ink);border:1px solid var(--ink);
}
.btn-ghost:hover{background:var(--ink);color:var(--bg);}
.text-link{
  display:inline-flex;align-items:center;gap:.6em;
  font-size:.85rem;letter-spacing:.14em;text-decoration:none;
  color:var(--ink);padding:12px 0;min-height:44px;
}
.text-link::after{content:"→";color:var(--accent-ink);}
.text-link:hover{color:var(--accent-ink);}

/* ---------- chrome (header) ---------- */
.ewb-chrome-nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:var(--chrome-h);
  padding-inline:var(--gutter);
  background:var(--bg);
  border-bottom:var(--hairline-soft);
}
.ewb-brand{
  font-family:var(--serif);font-weight:600;
  font-size:1.05rem;letter-spacing:.04em;line-height:1.3;
  text-decoration:none;color:var(--ink);
  display:inline-flex;flex-direction:column;
}
.ewb-brand small{
  font-family:var(--sans);font-weight:400;
  font-size:.62rem;letter-spacing:.22em;color:var(--muted);margin-top:2px;
}
.chrome-right{display:flex;align-items:center;gap:clamp(16px,3vw,40px);}
.ewb-navpanel{display:flex;align-items:center;gap:clamp(16px,2.4vw,34px);}
.ewb-navpanel > a{
  font-size:.82rem;letter-spacing:.14em;text-decoration:none;
  color:var(--ink);padding:12px 2px;min-height:44px;
  display:inline-flex;align-items:center;
}
.ewb-navpanel > a:hover{color:var(--accent-ink);}
.ewb-navpanel .btn{min-height:44px;padding:8px 22px;font-size:.82rem;color:#f2f0e4;}
.ewb-navtoggle{display:none;}

/* condense on scroll — progressive (Chrome); solid kinari elsewhere */
@supports (animation-timeline: scroll()){
  .ewb-chrome-nav[data-overlay]{
    animation:chrome-condense linear both;
    animation-timeline:scroll(root);
    animation-range:0 180px;
  }
  .ewb-chrome-nav[data-overlay] .ewb-brand{
    animation:brand-shrink linear both;
    animation-timeline:scroll(root);
    animation-range:0 180px;
  }
  @keyframes chrome-condense{
    from{background:transparent;border-bottom-color:transparent;min-height:var(--chrome-h);}
    to{background:var(--bg);border-bottom-color:rgba(29,35,24,.16);min-height:64px;}
  }
  @keyframes brand-shrink{from{font-size:1.05rem;}to{font-size:.92rem;}}
}
@media (prefers-reduced-motion:reduce){
  .ewb-chrome-nav[data-overlay],
  .ewb-chrome-nav[data-overlay] .ewb-brand{animation:none;}
}

@media (max-width:900px){
  .ewb-navtoggle{
    display:inline-flex;flex-direction:column;justify-content:center;align-items:center;
    width:44px;height:44px;padding:0;background:none;border:0;cursor:pointer;
  }
  .ewb-navtoggle i{display:block;width:22px;height:1.5px;background:var(--ink);margin:3.5px 0;}
  .ewb-navpanel{
    display:none;
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--bg);
    border-bottom:var(--hairline);
    padding:8px var(--gutter) 28px;
  }
  .ewb-chrome-nav[data-open="true"] .ewb-navpanel{display:var(--ewb-panel-display,block);}
  .ewb-navpanel > a{border-top:var(--hairline-soft);font-size:.95rem;padding:14px 2px;}
  .ewb-navpanel .btn{margin-top:20px;}
}

/* ---------- hero ---------- */
.hero{
  position:relative;
  min-height:100svh;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:var(--colgap);
  align-items:stretch;
  padding-top:calc(var(--chrome-h) + clamp(40px,7vh,90px));
  padding-bottom:clamp(48px,8vh,96px);
  padding-inline:var(--gutter);
  max-width:1440px;margin-inline:auto;
  overflow:clip;
}
/* WebGL veil — script.js draws flowing olive strands here */
.hero-veil{position:absolute;inset:0;pointer-events:none;z-index:0;}
/* static fallback wash, intentional on its own */
.hero-veil::before{
  content:"";position:absolute;right:0;top:8%;
  width:52%;height:84%;
  background:radial-gradient(closest-side,rgba(74,96,24,.09),rgba(74,96,24,0) 72%);
}
.hero-media{
  grid-column:8/13;grid-row:1;
  position:relative;z-index:1;
  height:100%;
}
.hero-media img{
  width:100%;height:100%;
  aspect-ratio:3/4;
  object-fit:cover;object-position:center;
}
/* kinari paper edge fading over the photo — type that crosses stays on paper */
.hero-media::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,var(--bg) 0%,rgba(242,240,228,0) 30%);
}
.hero-media .hero-caption{z-index:2;}
.hero-media img{position:relative;z-index:0;}
.hero-caption{
  position:absolute;top:0;left:0;z-index:2;
  writing-mode:vertical-rl;
  font-family:var(--serif);
  font-size:.78rem;letter-spacing:.34em;
  color:var(--ink);
  background:var(--bg);
  padding:20px 12px;
}
.hero-copy{
  grid-column:1/9;grid-row:1;
  position:relative;z-index:2;
  align-self:center;
  padding-block:clamp(16px,3vh,40px);
}
.hero-eyebrow{
  width:fit-content;
  font-size:.8rem;letter-spacing:.24em;color:var(--muted);
  margin-bottom:clamp(20px,3vh,36px);
}
/* short olive strand under the statement — start of the signature line */
.hero-strand{display:block;margin:clamp(18px,3vh,30px) 0 clamp(22px,3.5vh,36px);}
.hero-strand path{stroke:var(--accent-ink);stroke-width:2;fill:none;vector-effect:non-scaling-stroke;}
.hero-title{
  font-size:clamp(2.8rem,7vw,5.5rem);
  line-height:1.28;
  letter-spacing:.08em;
}
.hero-title span{display:block;}
.hero-lede{
  max-inline-size:34ic;
  margin-top:clamp(24px,3.5vh,40px);
  font-size:.95rem;
}
.hero-actions{margin-top:clamp(28px,4.5vh,52px);display:flex;align-items:center;gap:clamp(18px,3vw,36px);flex-wrap:wrap;}

/* at reading width the display type runs across the photo's left edge */
@media (min-width:1100px){
  .hero-title{font-size:clamp(4.5rem,9.2vw,8.5rem);}
  .hero-media{margin-left:-80px;}
}

@media (max-width:900px){
  .hero{min-height:auto;padding-top:calc(var(--chrome-h) + 32px);row-gap:40px;}
  .hero-copy{grid-column:1/13;grid-row:1;align-self:start;}
  .hero-media{grid-column:1/13;grid-row:2;height:auto;}
  .hero-media img{aspect-ratio:4/5;max-height:72vh;}
  .hero-lede{max-inline-size:100%;margin-top:18px;}
  .hero-strand{margin:14px 0 18px;}
  .hero-actions{margin-top:26px;}
}

/* ---------- generic sections ---------- */
.sec{margin-top:var(--sec-gap);}

/* concept: text 1–6, photo 7–12 */
.about-text{grid-column:1/7;}
.about-text p{max-inline-size:40ic;}
.about-points{margin-top:36px;display:grid;gap:14px;}
.about-points li{
  display:flex;gap:.9em;font-size:.92rem;line-height:1.8;
}
.about-points li::before{
  content:"";flex:0 0 8px;width:8px;height:8px;margin-top:.7em;
  background:var(--accent-ink);
}
.about-media{grid-column:8/13;align-self:start;margin-top:clamp(40px,7vw,110px);}
.about-media img{aspect-ratio:4/5;object-fit:cover;width:100%;}
.about-media figcaption{margin-top:14px;font-size:.8rem;color:var(--muted);letter-spacing:.06em;}

@media (max-width:900px){
  .about-text,.about-media{grid-column:1/13;}
  .about-media{margin-top:0;max-width:520px;}
}

/* ---------- services index on white ---------- */
.paper{background:var(--surface);margin-top:var(--sec-gap);}
.paper .wrap{padding-block:clamp(80px,10vw,140px);}
.service-list{border-bottom:var(--hairline);}
.service{
  display:grid;grid-template-columns:repeat(12,1fr);gap:var(--colgap);
  padding-block:clamp(22px,3.2vw,36px);
  border-top:var(--hairline);
  align-items:baseline;
}
.service h3{grid-column:1/6;font-size:clamp(1.25rem,2.2vw,1.65rem);letter-spacing:.08em;}
.service h3 small{
  display:block;font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:.72rem;letter-spacing:.16em;color:var(--muted);margin-top:4px;
}
.service p{grid-column:6/13;color:var(--muted);font-size:.92rem;max-inline-size:44ic;}
@media (max-width:900px){
  .service{grid-template-columns:1fr;gap:6px;}
  .service h3,.service p{grid-column:1/-1;}
}

/* ---------- olive process band + signature strand ---------- */
.olive-band{
  margin-top:var(--sec-gap);
  background:var(--accent);
  color:#f2f0e4;
  padding-block:clamp(96px,13vw,170px);
}
.olive-band .sec-label{color:rgba(242,240,228,.9);}
.olive-band h2{color:#f2f0e4;}
.olive-band .band-lede{color:rgba(242,240,228,.92);max-inline-size:40ic;margin-bottom:clamp(56px,8vw,96px);}
.process-steps{
  display:grid;
  grid-template-columns:clamp(72px,12vw,180px) minmax(0,1fr);
  max-width:1000px;
}
.process-rail{position:relative;}
.strand{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
.strand-path{
  stroke:var(--bg);
  stroke-width:2;
  fill:none;
  vector-effect:non-scaling-stroke;
  /* fully drawn by default — script.js may scrub it via dasharray */
  stroke-dasharray:none;
}
.process-node{
  position:relative;
  padding-block:clamp(36px,6vw,72px);
}
.process-node:first-child{padding-top:0;}
.process-node:last-child{padding-bottom:0;}
.process-node::before{
  content:"";position:absolute;
  top:clamp(36px,6vw,72px);left:calc(clamp(72px,12vw,180px) / -2);
  width:11px;height:11px;border-radius:50%;
  transform:translate(-50%,-50%);
  background:var(--bg);
  box-shadow:0 0 0 3px var(--accent);
}
.process-node:first-child::before{top:0;}
.process-node h3{
  font-size:clamp(1.2rem,2.4vw,1.6rem);letter-spacing:.1em;
  color:#f2f0e4;
  display:flex;align-items:baseline;gap:1em;
}
.process-node h3 .num{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:.85rem;letter-spacing:.2em;color:rgba(242,240,228,.9);
}
.process-node p{
  color:rgba(242,240,228,.92);
  font-size:.92rem;max-inline-size:38ic;
  margin-top:12px;
}
@media (max-width:600px){
  .process-steps{grid-template-columns:44px minmax(0,1fr);}
  .process-node::before{left:calc(44px / -2);}
}

/* ---------- before / after ---------- */
.ba-media{grid-column:3/12;}
.ba-media img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:center;}
.ba-media figcaption{margin-top:16px;font-size:.85rem;color:var(--muted);max-inline-size:52ic;}
@media (max-width:900px){.ba-media{grid-column:1/13;}}

/* ---------- reviews + FAQ duo ---------- */
.duo{align-items:start;}
.pull{
  grid-column:1/12;
  font-family:var(--serif);font-weight:600;
  font-size:clamp(1.45rem,3vw,2.15rem);
  line-height:1.8;letter-spacing:.06em;
  margin-bottom:clamp(48px,6vw,80px);
}
.pull::before{content:"「";color:var(--accent-ink);}
.pull::after{content:"」";color:var(--accent-ink);}
.pull cite{
  display:block;font-style:normal;
  font-family:var(--sans);font-weight:400;
  font-size:.8rem;letter-spacing:.14em;color:var(--muted);
  margin-top:18px;
}
.duo-reviews{grid-column:1/8;}
.duo-faq{grid-column:8/13;}
.duo-colhead{
  font-size:.8rem;letter-spacing:.2em;color:var(--muted);
  margin-bottom:20px;
}
@media (max-width:900px){
  .pull,.duo-reviews,.duo-faq{grid-column:1/13;}
  .duo-faq{margin-top:clamp(64px,10vw,96px);}
}

/* review card */
.review{
  border-top:var(--hairline);
  padding-block:clamp(24px,3vw,34px);
}
.review-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4em 1.2em;margin-bottom:10px;}
.review-author{font-weight:500;font-size:.95rem;}
.review-stars{color:var(--accent-ink);letter-spacing:.18em;font-size:.85rem;}
.review-date{font-size:.75rem;color:var(--muted);letter-spacing:.1em;}
.review p{font-size:.9rem;color:var(--ink);margin:0;}
.duo-more{margin-top:26px;}

/* FAQ details (shared with faq.html) */
.faq-list details{border-top:var(--hairline);}
.faq-list details:last-of-type{border-bottom:var(--hairline);}
.faq-list summary{
  cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:18px 0;min-height:44px;
  font-weight:500;font-size:.95rem;line-height:1.7;
}
.faq-list summary::-webkit-details-marker{display:none;}
.faq-list summary::after{
  content:"+";font-family:var(--serif);font-weight:400;
  color:var(--accent-ink);font-size:1.2rem;line-height:1;flex:0 0 auto;
}
.faq-list details[open] summary::after{content:"−";}
.faq-list details p{font-size:.88rem;color:var(--muted);padding-bottom:22px;}

/* page head for faq.html / reviews.html */
.page-head{padding-top:calc(var(--chrome-h) + clamp(64px,10vw,120px));}
.page-head h1{
  font-family:var(--serif);
  font-size:clamp(1.9rem,4.5vw,3rem);
  line-height:1.5;letter-spacing:.08em;
}
.page-head .sec-label{margin-bottom:22px;}
.page-head .lede{margin-top:clamp(20px,3vw,32px);}

/* ---------- access ---------- */
.access{align-items:start;}
.access-info{grid-column:1/7;}
.access-map{grid-column:7/13;}
.access-map iframe{
  width:100%;height:340px;border:0;display:block;
  filter:grayscale(.25);
}
.access dl{margin:0 0 28px;}
.access dl div{
  display:grid;grid-template-columns:7.5em 1fr;gap:12px;
  padding:14px 0;border-top:var(--hairline-soft);
}
.access dl div:last-child{border-bottom:var(--hairline-soft);}
.access dt{font-size:.8rem;letter-spacing:.18em;color:var(--muted);padding-top:.35em;}
.access dd{margin:0;font-size:.95rem;}
.access dd a{text-decoration:none;}
.access dd a:hover{color:var(--accent-ink);}
@media (max-width:900px){
  .access-info,.access-map{grid-column:1/13;}
  .access-map{margin-top:40px;}
  .access dl div{grid-template-columns:6.5em 1fr;}
}

/* ---------- SNS ---------- */
.sns-list{border-bottom:var(--hairline);max-width:760px;}
.sns-list li{border-top:var(--hairline);}
.sns-list a{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:20px 2px;text-decoration:none;
}
.sns-list .plat{font-family:var(--serif);font-style:italic;font-size:1.05rem;letter-spacing:.06em;}
.sns-list .note{font-size:.8rem;color:var(--muted);}
.sns-list a:hover .plat{color:var(--accent-ink);}

/* ---------- closing ---------- */
.closing{margin-top:var(--sec-gap);}
.closing-copy{
  font-family:var(--serif);
  font-size:clamp(1.35rem,2.8vw,1.9rem);
  line-height:2;letter-spacing:.08em;
  max-inline-size:26ic;
  margin-bottom:clamp(32px,4vw,48px);
}
.closing-actions{display:flex;align-items:center;gap:clamp(18px,3vw,36px);flex-wrap:wrap;}

/* ---------- footer ---------- */
footer{
  background:var(--ink);color:#f2f0e4;
  margin-top:var(--sec-gap);
}
.foot-top{
  display:grid;grid-template-columns:repeat(12,1fr);gap:var(--colgap);
  padding-block:clamp(72px,10vw,130px) clamp(48px,6vw,80px);
}
.foot-name{
  grid-column:1/9;
  font-family:var(--serif);font-weight:600;
  font-size:clamp(2.1rem,5.5vw,4.2rem);
  line-height:1.3;letter-spacing:.04em;
}
.foot-name small{
  display:block;
  font-family:var(--sans);font-weight:400;
  font-size:.75rem;letter-spacing:.26em;
  color:rgba(242,240,228,.72);
  margin-top:14px;
}
.foot-phone{
  display:inline-block;
  grid-column:1/9;
  font-family:var(--serif);font-weight:600;
  font-size:clamp(1.7rem,4vw,2.9rem);
  letter-spacing:.08em;
  text-decoration:none;
  margin-top:clamp(24px,4vw,44px);
  color:#f2f0e4;
}
.foot-phone:hover{color:rgba(242,240,228,.8);}
.foot-contact{grid-column:9/13;justify-self:end;max-width:300px;text-align:left;}
.foot-contact .btn{width:100%;}
.foot-contact address{
  font-style:normal;font-size:.85rem;line-height:2;
  color:rgba(242,240,228,.85);
  margin-top:22px;
}
.foot-contact .foot-station{
  font-size:.78rem;letter-spacing:.1em;color:rgba(242,240,228,.65);
  margin-top:8px;
}
.foot-grid{
  display:grid;grid-template-columns:repeat(12,1fr);gap:var(--colgap);
  padding-block:clamp(40px,5vw,64px);
  border-top:1px solid rgba(242,240,228,.18);
}
.foot-col{grid-column:span 4;}
.foot-col h3{
  font-family:var(--sans);font-weight:500;
  font-size:.78rem;letter-spacing:.24em;
  color:rgba(242,240,228,.6);
  margin-bottom:18px;
}
.foot-col li,.foot-col p{font-size:.88rem;line-height:2.2;color:rgba(242,240,228,.88);}
.foot-col a{text-decoration:none;}
.foot-col a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px;}
.foot-legal{
  border-top:1px solid rgba(242,240,228,.18);
  padding-block:26px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:.72rem;letter-spacing:.14em;color:rgba(242,240,228,.55);
}
.foot-legal a{color:inherit;text-decoration:none;}
.foot-legal a:hover{color:#f2f0e4;}
@media (max-width:900px){
  .foot-name,.foot-phone{grid-column:1/13;}
  .foot-contact{grid-column:1/13;justify-self:start;margin-top:40px;}
  .foot-col{grid-column:span 12;}
}

/* ---------- misc ---------- */
:target{scroll-margin-top:calc(var(--chrome-h) + 24px);}
::selection{background:var(--accent);color:var(--on-accent);}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* ---------- reviews.html ---------- */
.review-list{max-width:880px;}