/* ============================================================
   undo UDON FACTORY — Digital Pamphlet (JA)
   Design system modeled on shiseilabo-web-catalogue (consistent
   cqh type scale) × undo brand identity (udon-undo.jp palette).
   Inside-page sizing uses container-query units (cqh / cqw):
   design page 600 × 840  →  1cqh = 8.4px , 1cqw = 6px
   ============================================================ */
:root{
  --ink:#262017;
  --ink-soft:#574f44;
  --muted:#9a8d79;
  --paper:#f8f5ee;
  --paper-2:#f1ebdf;
  --line:#e4ddcd;
  --red:#cf2e2e;
  --red-deep:#a82323;
  --gold:#b9892f;
  --gold-soft:#dcc189;

  --serif:"Shippori Mincho","Hiragino Mincho ProN",serif;
  --sans:"Zen Kaku Gothic New","Hiragino Sans",sans-serif;
  --latin:"Cormorant Garamond","Shippori Mincho",serif;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  font-family:var(--sans);color:var(--ink);
  background:radial-gradient(120% 90% at 50% -8%, #ece5d7 0%, #e2d9c8 55%, #d6cbb6 100%);
  height:100vh;display:flex;flex-direction:column;overflow:hidden;
}

/* ---------- top bar ---------- */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.7rem 1.5rem;color:var(--ink);flex:none}
.topbar .brand{display:flex;align-items:center;gap:.6rem}
.topbar .brand img{height:22px;width:auto;display:block}
.topbar .brand .sep{width:1px;height:18px;background:var(--line)}
.topbar .brand small{font-family:var(--latin);font-size:.66rem;letter-spacing:.26em;color:var(--gold);font-weight:700;text-transform:uppercase}
.topbar .lang{font-family:var(--latin);font-size:.74rem;letter-spacing:.14em;font-weight:700;
  border:1px solid var(--line);padding:.3rem .8rem;border-radius:999px;color:var(--ink-soft);background:rgba(255,255,255,.55)}

/* ---------- stage ---------- */
.stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;
  padding:.3rem .5rem;position:relative;overflow:hidden}
#book{margin:0 auto;touch-action:pan-y}
#book .page{background:var(--paper)}

.loader{position:absolute;inset:0;display:grid;place-items:center;color:#8a7e6b;
  font-size:.8rem;letter-spacing:.18em;pointer-events:none;transition:opacity .4s;font-family:var(--latin)}
.loader .spin{width:28px;height:28px;border:3px solid rgba(138,126,107,.2);
  border-top-color:var(--red);border-radius:50%;animation:sp 1s linear infinite;margin:0 auto .7rem}
@keyframes sp{to{transform:rotate(360deg)}}

/* ---------- controls ---------- */
.controls{display:flex;align-items:center;justify-content:center;gap:1.1rem;
  padding:.45rem 1rem .3rem;color:var(--ink);flex:none}
.controls button{appearance:none;border:1px solid var(--line);background:rgba(255,255,255,.7);
  color:var(--ink);width:42px;height:42px;border-radius:50%;cursor:pointer;font-size:1.05rem;
  display:grid;place-items:center;transition:.2s}
.controls button:hover:not(:disabled){background:var(--red);border-color:var(--red);color:#fff;transform:translateY(-1px)}
.controls button:disabled{opacity:.28;cursor:default}
.controls .meter{font-family:var(--latin);font-size:.95rem;letter-spacing:.1em;min-width:4.6rem;text-align:center}
.controls .meter b{font-size:1.15rem;font-weight:700}
.hint{text-align:center;color:#9a8d79;font-size:.64rem;letter-spacing:.14em;padding-bottom:.5rem;flex:none;font-family:var(--latin);text-transform:uppercase}

/* ============================================================
   PAGE
   ============================================================ */
.page{container-type:size;position:relative;overflow:hidden;background:var(--paper);color:var(--ink)}
.pad{position:absolute;inset:0;padding:5.8cqh 5.6cqw 6cqh;display:flex;flex-direction:column}
.full{position:absolute;inset:0}
.full img{width:100%;height:100%;object-fit:cover;display:block}
.veil{position:absolute;inset:0}

/* page furniture */
.pg-num{position:absolute;bottom:2.2cqh;font-size:1.2cqh;letter-spacing:.2em;color:var(--muted);
  font-family:var(--latin);font-weight:600}
.pg-num.l{left:5.6cqw}.pg-num.r{right:5.6cqw}
.pg-foot{position:absolute;bottom:2.2cqh;font-size:1.02cqh;letter-spacing:.32em;color:var(--muted);
  text-transform:uppercase;opacity:.75;font-family:var(--latin)}
.pg-foot.l{left:5.6cqw}.pg-foot.r{right:5.6cqw}

/* ---------- shared type scale (cqh) ---------- */
.eyebrow{font-family:var(--latin);font-weight:700;text-transform:uppercase;letter-spacing:.28em;
  font-size:1.5cqh;color:var(--red);display:flex;align-items:center;gap:1.8cqw;margin-bottom:2.4cqh}
.eyebrow::before{content:"";width:4.6cqw;height:1.5px;background:var(--red);display:inline-block;flex:none}
.eyebrow .no{color:var(--gold);font-size:1.6cqh}
.title{font-family:var(--serif);font-weight:700;line-height:1.36;color:var(--ink);letter-spacing:.02em}
.h-xl{font-family:var(--serif);font-weight:800;font-size:4.6cqh;line-height:1.32;letter-spacing:.03em;color:var(--ink)}
.h-lg{font-family:var(--serif);font-weight:700;font-size:3.5cqh;line-height:1.36;letter-spacing:.02em;color:var(--ink)}
.h-md{font-family:var(--serif);font-weight:700;font-size:2.7cqh;line-height:1.42;color:var(--ink)}
.lead{font-size:1.64cqh;line-height:1.95;color:var(--ink-soft);font-weight:400}
.small{font-size:1.42cqh;line-height:1.85;color:var(--muted)}
.divider{width:5.6cqh;height:2px;background:var(--gold);margin:2.4cqh 0}
b.k{color:var(--ink);font-weight:700}
em.em{color:var(--red);font-style:normal}

/* ---------- COVER ---------- */
.cover .veil{background:linear-gradient(180deg,rgba(18,14,9,.18) 0%,rgba(18,14,9,.30) 42%,rgba(18,14,9,.66) 100%)}
.cover .pad{padding:7cqh 6cqw;justify-content:space-between;color:#fff}
.cv-top{display:flex;justify-content:space-between;align-items:flex-start}
.cv-top .est{font-family:var(--latin);font-weight:700;letter-spacing:.26em;font-size:1.5cqh;
  text-transform:uppercase;text-align:right;opacity:.9;line-height:1.45}
.wordmark .km{font-family:var(--latin);font-weight:700;letter-spacing:.36em;font-size:1.7cqh;
  text-transform:uppercase;opacity:.9;padding-left:.3cqw}
.wordmark .nm{font-family:var(--serif);font-weight:800;font-size:11cqh;line-height:.95;letter-spacing:.02em}
.cv-chip{display:inline-flex;align-self:flex-start;background:rgba(248,245,238,.95);color:var(--ink);
  border-radius:999px;padding:1.2cqh 4cqw;font-weight:700;font-size:1.75cqh;letter-spacing:.04em;margin-bottom:2.6cqh}
.cv-tag{font-family:var(--serif);font-weight:700;font-size:4.6cqh;line-height:1.42;text-shadow:0 3px 22px rgba(0,0,0,.45)}
.cv-rule{width:11cqw;height:2px;background:var(--red);margin:2.6cqh 0 1.8cqh}
.cv-sub{font-size:1.66cqh;letter-spacing:.1em;color:#f1e8d8;opacity:.95}

/* ---------- split (image top + body) ---------- */
.split-img{position:absolute;top:0;left:0;right:0;height:36cqh;overflow:hidden}
.split-img img{width:100%;height:100%;object-fit:cover}
.split-body{position:absolute;left:0;right:0;bottom:0;top:36cqh;padding:5cqh 5.6cqw 6cqh;display:flex;flex-direction:column}

/* brand meaning */
.tag-pill{display:inline-block;align-self:flex-start;background:var(--red);color:#fff;font-weight:700;
  font-size:1.5cqh;letter-spacing:.04em;padding:1.1cqh 3.4cqw;border-radius:999px;margin-bottom:2.4cqh}
.logo-row{display:flex;align-items:center;margin-bottom:2.4cqh}
.logo-row img{height:4.6cqh;width:auto}

/* ---------- full-image caption pages ---------- */
.hero-cap{position:absolute;left:5.6cqw;right:5.6cqw;bottom:8cqh;color:#fff}
.hero-cap .ht{font-family:var(--serif);font-weight:700;font-size:4cqh;line-height:1.42;text-shadow:0 3px 18px rgba(0,0,0,.5)}
.hero-cap .hs{font-size:1.6cqh;line-height:1.85;margin-top:2cqh;opacity:.96;letter-spacing:.04em}
.hero-cap .rule{width:9cqw;height:2px;background:var(--red);margin:2.2cqh 0}

/* statement */
.statement .veil{background:linear-gradient(180deg,rgba(18,12,8,.34),rgba(18,12,8,.60))}
.statement .pad{justify-content:center;color:#fff}
.statement .eyebrow{color:#f0d9a8}
.statement .eyebrow::before{background:#e7b765}
.statement .eyebrow .no{color:#f0d9a8}
.statement .st-h{font-family:var(--serif);font-weight:800;font-size:4.6cqh;line-height:1.5;text-shadow:0 3px 18px rgba(0,0,0,.4)}
.statement .st-s{font-size:1.6cqh;line-height:1.95;margin-top:2cqh;opacity:.95;max-width:76cqw}

/* ---------- compare ---------- */
.compare{display:flex;flex-direction:column;gap:2.2cqh;margin-top:1cqh}
.cmp{background:#fff;border:1px solid var(--line);border-radius:14px;padding:2.6cqh 4cqw;display:flex;gap:3.4cqw;align-items:center}
.cmp.now{background:#fbf4e8;border-color:var(--gold-soft)}
.cmp .thumb{flex:none;width:15cqw;height:15cqw;border-radius:10px;object-fit:cover;background:var(--paper-2)}
.cmp .lab{font-family:var(--latin);font-size:1.2cqh;letter-spacing:.16em;font-weight:700;text-transform:uppercase;color:var(--muted);margin-bottom:.7cqh}
.cmp.now .lab{color:var(--red)}
.cmp .q{font-family:var(--serif);font-weight:700;font-size:2.2cqh;margin-bottom:.8cqh;line-height:1.35}
.cmp p{font-size:1.42cqh;line-height:1.7;color:var(--ink-soft)}
.cmp-arrow{align-self:center;color:var(--gold);font-size:2cqh;line-height:0}

/* ---------- reasons ---------- */
.reasons{display:flex;flex-direction:column;gap:2.6cqh;margin-top:1.2cqh}
.reason{display:flex;gap:3.4cqw;align-items:flex-start}
.reason .dot{flex:none;width:5cqh;height:5cqh;border-radius:50%;background:#fff;border:1.5px solid var(--gold-soft);
  color:var(--red);display:grid;place-items:center;font-weight:700;font-size:2.1cqh;font-family:var(--serif)}
.reason p{font-size:1.56cqh;line-height:1.8;color:var(--ink-soft);padding-top:.6cqh}
.reason p b{color:var(--ink);font-weight:700}

/* ---------- value list ---------- */
.vlist{display:flex;flex-direction:column;gap:2.8cqh;margin-top:1.4cqh}
.vrow{display:flex;gap:3.4cqw;align-items:flex-start;border-top:1px solid var(--line);padding-top:2.4cqh}
.vrow:first-child{border-top:0;padding-top:0}
.vrow .vn{flex:none;font-family:var(--serif);font-weight:700;color:var(--gold);font-size:3cqh;line-height:1;width:7cqw}
.vrow h4{font-family:var(--serif);font-size:2cqh;font-weight:700;margin-bottom:.9cqh;color:var(--ink)}
.vrow p{font-size:1.42cqh;line-height:1.75;color:var(--ink-soft)}

/* ---------- mvv ---------- */
.mvv{display:flex;flex-direction:column;gap:2.6cqh;margin-top:1.4cqh}
.mcard{border-left:2px solid var(--gold);padding-left:3.4cqw}
.mcard .k{font-family:var(--latin);font-size:1.25cqh;letter-spacing:.22em;color:var(--red);font-weight:700;text-transform:uppercase;margin-bottom:.9cqh}
.mcard h4{font-family:var(--serif);font-size:2.1cqh;font-weight:700;line-height:1.42;margin-bottom:.9cqh;color:var(--ink)}
.mcard p{font-size:1.4cqh;line-height:1.75;color:var(--ink-soft)}

/* ---------- actions ---------- */
.acts{display:grid;grid-template-columns:1fr 1fr;gap:2.4cqh 3cqw;margin-top:1.6cqh}
.act{background:#fff;border:1px solid var(--line);border-radius:12px;padding:2.6cqh 3cqw}
.act .ic{font-size:2.4cqh;margin-bottom:1cqh;line-height:1}
.act h4{font-family:var(--serif);font-size:1.72cqh;font-weight:700;line-height:1.4;margin-bottom:1cqh;color:var(--ink)}
.act p{font-size:1.28cqh;line-height:1.7;color:var(--ink-soft)}

/* ---------- products ---------- */
.store-lead{font-size:1.4cqh;line-height:1.7;color:var(--ink-soft);margin:1.4cqh 0 .4cqh;letter-spacing:.02em}
.store-lead a{color:var(--red-deep);font-weight:700;text-decoration:none;border-bottom:1px solid var(--gold)}
.gf-badge{display:inline-block;font-family:var(--latin);font-size:1.15cqh;letter-spacing:.12em;color:#5a8a4f;
  border:1px solid #aacf9e;border-radius:999px;padding:.3cqh 1.4cqw;font-weight:700;text-transform:uppercase;vertical-align:middle}
.prod-grid{display:grid;grid-template-columns:1fr 1fr;gap:2cqh 3cqw;margin-top:1.2cqh}
.prod{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:box-shadow .2s,transform .2s,border-color .2s}
a.prod:hover{border-color:var(--gold-soft);box-shadow:0 8px 22px rgba(40,28,16,.12);transform:translateY(-2px)}
a.prod .price::after{content:" ↗";font-family:var(--latin);color:var(--gold-deep,#bfa15c);font-size:1.4cqh;font-weight:700}
.prod .ph{aspect-ratio:1/0.6;background:var(--paper-2);overflow:hidden}
.prod .ph img{width:100%;height:100%;object-fit:cover}
.prod .info{padding:1.4cqh 3cqw 1.6cqh}
.prod .info h4{font-size:1.32cqh;line-height:1.45;font-weight:700;min-height:3.8cqh;margin-bottom:.5cqh;color:var(--ink)}
.prod .price{font-family:var(--serif);color:var(--red-deep);font-weight:700;font-size:2.1cqh}
.prod .price small{font-family:var(--sans);font-size:1.15cqh;font-weight:500;color:var(--muted);margin-left:.8cqw}

/* ---------- traveler ---------- */
.traveler .veil{background:linear-gradient(180deg,rgba(22,12,6,.34),rgba(22,12,6,.64))}
.traveler .pad{justify-content:center;color:#fff}
.tv-tag{display:inline-block;align-self:flex-start;background:var(--red);color:#fff;font-weight:700;
  font-size:1.45cqh;letter-spacing:.06em;padding:1.1cqh 3.4cqw;border-radius:999px;margin-bottom:2.6cqh}
.tv-h{font-family:var(--serif);font-weight:700;font-size:3.6cqh;line-height:1.55;text-shadow:0 3px 16px rgba(0,0,0,.45)}
.tv-s{font-size:1.6cqh;line-height:1.9;margin-top:2.2cqh;opacity:.95;max-width:80cqw}

/* ---------- closing ---------- */
.closing-band{position:absolute;top:0;left:0;right:0;height:21cqh;background:linear-gradient(120deg,var(--red),var(--red-deep))}
.closing-band .bt{position:absolute;left:5.6cqw;bottom:3cqh;color:#fff;font-family:var(--serif);font-weight:700;font-size:3.4cqh;line-height:1.42}
.closing .pad{justify-content:center}
.closing .lead-xl{font-family:var(--serif);font-weight:700;font-size:3.4cqh;line-height:1.5;color:var(--ink);margin-bottom:2.2cqh}
.closing .lead-xl .em{color:var(--red)}
.recruit{margin-top:2.4cqh;padding-top:2.2cqh;border-top:1px solid var(--line);
  font-size:1.36cqh;line-height:1.8;color:var(--ink-soft);letter-spacing:.02em}

/* ---------- contact / back ---------- */
.contact .veil{background:linear-gradient(180deg,rgba(22,16,10,.52),rgba(22,16,10,.76))}
.contact .pad{justify-content:center;color:#fff}
.contact .card{background:rgba(248,245,238,.97);color:var(--ink);border-radius:16px;padding:5cqh 6cqw;box-shadow:0 18px 44px rgba(0,0,0,.4)}
.contact .logo-c{height:4.4cqh;margin-bottom:2.8cqh}
.contact h3{font-family:var(--serif);font-size:2.8cqh;font-weight:700;margin-bottom:1.8cqh}
.contact .addr{font-size:1.5cqh;line-height:1.9;color:var(--ink-soft)}
.contact .rowline{display:flex;align-items:center;gap:1.6cqw;margin-top:1.8cqh;flex-wrap:wrap}
.contact .pill{background:var(--red);color:#fff;border-radius:999px;padding:1cqh 3cqw;font-weight:700;font-size:1.4cqh;text-decoration:none;transition:background .2s,transform .2s}
a.pill:hover{background:var(--red-deep);transform:translateY(-1px)}
.contact .links{margin-top:2.6cqh;font-size:1.36cqh;color:var(--ink-soft);line-height:1.85}
.contact .links a{color:var(--red-deep);font-weight:700;text-decoration:none;border-bottom:1px solid var(--gold)}

@media (max-width:560px){
  .topbar{padding:.6rem 1rem}
  .topbar .brand small{display:none}
  .controls button{width:40px;height:40px}
}