/* ─────────────────────────────────────────────
   omoware cannelé — shared stylesheet (minimal)
   inspired by ベルアメール京都別邸: white base, slow rhythm
───────────────────────────────────────────── */

:root{
  /* Warm caramel + gold palette — v1 tone, restored */
  --paper:#f7f0e1;          /* page background (warm paper) */
  --paper-warm:#ede0c6;     /* alt section bg */
  --cream:#f3e9d8;          /* card / soft bg */
  --ink:#2e1c10;            /* primary text — caramel-deep */
  --ink-soft:#5b3820;       /* caramel */
  --ink-mute:#8a6b35;       /* gold-dim, used for muted text */
  --ink-faint:#a89373;
  --gold:#c9a45c;           /* accent — gold */
  --gold-soft:#d9b97a;
  --line:#d8c8a5;           /* hairline on paper */
  --line-soft:#e6d8b5;
  --beige:var(--gold);      /* alias, in case stylesheet references --beige */
  --warm:var(--paper-warm); /* alias for warm section bg */
  --white:#fbf6ea;          /* near-white for footer alt, slightly warm */
  --serif:"Noto Serif JP", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
  --serif-en:"Cormorant Garamond", "Times New Roman", serif;
  --sans:"Noto Sans JP", -apple-system, "Hiragino Sans", "Yu Gothic", sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  line-height:2;
  letter-spacing:.05em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}

/* ────── Header ────── */
.header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:24px 56px;
  background:rgba(247,240,225,0);
  transition:background .4s ease, padding .4s ease, border-color .4s ease;
  border-bottom:1px solid transparent;
}
.header.scrolled,
.header.on-light{
  background:rgba(247,240,225,.94);
  backdrop-filter:saturate(140%) blur(8px);
  -webkit-backdrop-filter:saturate(140%) blur(8px);
  padding:16px 56px;
  border-bottom:1px solid var(--line);
}
.brand{
  font-family:var(--serif);
  font-weight:400;
  font-size:17px;
  letter-spacing:.32em;
  color:var(--ink);
  padding-left:.32em;
  line-height:1.2;
}
.brand .brand-en{
  display:block;
  font-family:var(--serif-en);
  font-style:italic;
  font-size:10px;
  letter-spacing:.4em;
  color:var(--ink-mute);
  margin-top:4px;
  text-transform:lowercase;
}
.nav{display:flex;gap:36px;align-items:center}
.nav a{
  font-family:var(--serif);
  font-weight:400;
  font-size:13px;
  letter-spacing:.32em;
  color:var(--ink);
  position:relative;
  padding:6px 2px;
  transition:color .25s ease;
}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;
  height:1px;background:var(--ink);transform:scaleX(0);transform-origin:right center;
  transition:transform .35s ease;
}
.nav a:hover::after,
.nav a.current::after{transform:scaleX(1);transform-origin:left center}
.nav a.current{color:var(--ink)}
.nav .en{
  display:block;
  font-family:var(--serif-en);
  font-style:italic;
  font-size:9px;
  letter-spacing:.36em;
  color:var(--beige);
  margin-top:2px;
  text-transform:uppercase;
}
.menu-btn{display:none}

/* ────── Page hero (sub pages) ────── */
.page-head{
  padding:200px 56px 100px;
  text-align:center;
  border-bottom:1px solid var(--line);
}
.crumbs{
  font-family:var(--serif-en);
  font-size:11px;
  letter-spacing:.4em;
  color:var(--ink-mute);
  margin-bottom:32px;
  text-transform:uppercase;
}
.crumbs a{color:var(--ink-mute);transition:color .25s ease}
.crumbs a:hover{color:var(--ink)}
.crumbs .sep{margin:0 14px;color:var(--beige)}
.page-kicker{
  display:inline-flex;align-items:center;gap:18px;
  font-family:var(--serif-en);
  font-style:italic;
  font-size:14px;
  letter-spacing:.36em;
  color:var(--beige);
  margin-bottom:36px;
  text-transform:uppercase;
}
.page-kicker::before, .page-kicker::after{
  content:"";width:42px;height:1px;background:var(--beige);
}
.page-title{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(28px, 3.4vw, 44px);
  letter-spacing:.18em;
  line-height:1.8;
  color:var(--ink);
}
.page-sub{
  margin-top:32px;
  font-size:14px;
  letter-spacing:.18em;
  color:var(--ink-mute);
  line-height:2.2;
  word-break:keep-all;
  overflow-wrap:break-word;
}

/* ────── Hero (home) ────── */
.hero{
  min-height:100vh;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  padding:120px 56px 80px;
  gap:80px;
  position:relative;
}
.hero-copy{padding-left:48px}
.hero-eyebrow{
  font-family:var(--serif-en);
  font-style:italic;
  font-size:14px;
  letter-spacing:.36em;
  color:var(--beige);
  margin-bottom:48px;
  display:inline-flex;align-items:center;gap:18px;
}
.hero-eyebrow::before{
  content:"";width:42px;height:1px;background:var(--beige);
}
.hero h1{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(34px, 4.2vw, 60px);
  letter-spacing:.14em;
  line-height:1.7;
  color:var(--ink);
}
.hero h1 .accent{display:block;margin-top:.1em}
.hero-sub{
  margin-top:56px;
  font-size:13px;
  letter-spacing:.28em;
  color:var(--ink-mute);
  line-height:2.2;
}
.hero-visual{
  position:relative;
  aspect-ratio:4/5;
  overflow:hidden;
}
.hero-visual img{width:100%;height:100%;object-fit:cover}
.hero-mark{
  position:absolute;bottom:32px;left:-32px;
  writing-mode:vertical-rl;
  font-family:var(--serif-en);
  font-style:italic;
  font-size:11px;
  letter-spacing:.5em;
  color:var(--ink-mute);
}
.scroll-cue{
  position:absolute;left:50%;bottom:36px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:10px;
  font-family:var(--serif-en);
  font-size:10px;letter-spacing:.5em;color:var(--ink-mute);
  text-transform:uppercase;
}
.scroll-cue .line{width:1px;height:48px;background:var(--ink-mute);position:relative;overflow:hidden}
.scroll-cue .line::after{
  content:"";position:absolute;left:0;top:-48px;width:1px;height:48px;
  background:var(--ink);animation:drop 2.4s ease-in-out infinite;
}
@keyframes drop{0%{top:-48px}60%{top:48px}100%{top:48px}}

/* ────── Section base ────── */
section{padding:140px 56px}
section.warm{background:var(--warm)}
.wrap{max-width:1180px;margin:0 auto}

.label{
  font-family:var(--serif-en);
  font-style:italic;
  font-size:13px;
  letter-spacing:.4em;
  color:var(--beige);
  text-transform:uppercase;
  margin-bottom:32px;
  display:inline-flex;align-items:center;gap:18px;
}
.label::before{content:"";width:42px;height:1px;background:var(--beige)}

h2{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(24px, 2.4vw, 34px);
  letter-spacing:.18em;
  line-height:1.9;
  color:var(--ink);
  margin-bottom:32px;
}

.body-text, p.body{
  font-family:var(--serif);
  font-weight:300;
  font-size:15px;
  line-height:2.4;
  letter-spacing:.12em;
  color:var(--ink-soft);
  max-width:30em;
}

.body-text + .body-text, p.body + p.body{margin-top:1.4em}

/* ────── Two-column section (image + text) ────── */
.split{
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:120px;
  align-items:center;
}
.split.reverse{grid-template-columns:1fr 1.05fr}
.split-visual{overflow:hidden}
.split-visual.square{aspect-ratio:1/1}
.split-visual.tall{aspect-ratio:4/5}
.split-visual.wide{aspect-ratio:4/3}
.split-visual img{width:100%;height:100%;object-fit:cover}
.split-copy{padding-right:24px}
.split.reverse .split-copy{padding-right:0;padding-left:24px}

/* ────── Quote separator ────── */
.quote-sep{
  padding:120px 56px;
  text-align:center;
}
.quote-sep .ornament{
  display:block;width:1px;height:64px;background:var(--beige);
  margin:0 auto 48px;
}
.quote-sep p{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(20px, 2vw, 26px);
  letter-spacing:.24em;
  line-height:2.2;
  color:var(--ink);
}

/* ────── CTA ────── */
.cta{
  display:inline-flex;align-items:center;gap:24px;
  margin-top:56px;
  padding:18px 4px 16px;
  font-family:var(--serif);
  font-weight:400;
  font-size:14px;
  letter-spacing:.36em;
  color:var(--ink);
  border-bottom:1px solid var(--ink);
  transition:gap .35s ease, padding-right .35s ease;
}
.cta .arrow{
  width:42px;height:1px;background:var(--ink);position:relative;
  transition:width .35s ease;
}
.cta .arrow::after{
  content:"";position:absolute;right:0;top:-3px;
  width:8px;height:8px;border-top:1px solid var(--ink);border-right:1px solid var(--ink);
  transform:rotate(45deg);
}
.cta:hover{gap:32px;padding-right:8px}
.cta:hover .arrow{width:54px}

/* ────── Scene grid ────── */
.scene-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:56px 36px;
}
.scene-card{display:block;color:inherit}
.scene-card .pic{
  aspect-ratio:10/9;overflow:hidden;margin-bottom:20px;
  border-radius:14px;
  background:var(--cream);
  box-shadow:0 1px 2px rgba(46,28,16,.06);
}
.scene-card .pic img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 1.2s ease;
}
.scene-card:hover .pic img{transform:scale(1.04)}
.scene-head{
  display:flex;align-items:baseline;gap:14px;
  margin-bottom:10px;
}
.scene-card .scene-num{
  font-family:var(--serif-en);
  font-style:italic;
  font-size:24px;
  letter-spacing:.04em;
  color:var(--beige);
  line-height:1;
  flex:none;
}
.scene-card .scene-name{
  font-family:var(--serif);
  font-weight:400;
  font-size:16px;
  letter-spacing:.1em;
  line-height:1.5;
  color:var(--ink);
}
.scene-card .scene-desc{
  font-family:var(--serif);
  font-weight:300;
  font-size:12.5px;
  letter-spacing:.06em;
  line-height:1.9;
  color:var(--ink-mute);
  max-width:none;
}

/* ────── Products list ────── */
.product-list{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:80px 48px;
}
.product-card{display:flex;flex-direction:column;color:inherit}
.product-card .pic{
  aspect-ratio:4/5;overflow:hidden;margin-bottom:28px;background:var(--cream);
}
.product-card .pic img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 1.2s ease;
}
.product-card:hover .pic img{transform:scale(1.03)}
.product-card .p-num{
  font-family:var(--serif-en);
  font-style:italic;
  font-size:11px;
  letter-spacing:.4em;
  color:var(--beige);
  text-transform:uppercase;
  display:block;
  margin-bottom:10px;
}
.product-card .p-name{
  font-family:var(--serif);
  font-weight:400;
  font-size:18px;
  letter-spacing:.18em;
  color:var(--ink);
  margin-bottom:12px;
}
.product-card .p-price{
  font-family:var(--serif);
  font-weight:300;
  font-size:14px;
  letter-spacing:.14em;
  color:var(--ink-soft);
  margin-bottom:8px;
}
.product-card .p-price small{
  font-size:10px;letter-spacing:.32em;color:var(--ink-mute);
  margin-left:8px;
}
.product-card .p-note{
  font-family:var(--serif);
  font-weight:300;
  font-size:12px;
  letter-spacing:.12em;
  color:var(--ink-mute);
  line-height:1.9;
}
.product-card .buy-btn{
  display:block;
  margin-top:24px;
  padding:15px 20px;
  text-align:center;
  font-family:var(--serif);
  font-weight:400;
  font-size:13px;
  letter-spacing:.22em;
  line-height:1.4;
  color:var(--ink);
  background:transparent;
  border:1px solid var(--gold);
  border-radius:2px;
  word-break:keep-all;
  overflow-wrap:break-word;
  cursor:pointer;
  transition:background .3s ease, color .3s ease, border-color .3s ease;
}
.product-card .buy-btn:hover,
.product-card .buy-btn:focus-visible{
  background:var(--ink);
  border-color:var(--ink);
  color:var(--white);
}

/* 個数・お届け地域の選択（購入前） */
.buy-opts{
  display:flex;gap:12px;margin-top:20px;
}
.buy-opts .opt{display:flex;flex-direction:column;gap:6px;min-width:0}
.buy-opts .opt.qty{flex:0 0 84px}
.buy-opts .opt.area{flex:1 1 auto}
.buy-opts .opt-label{
  font-family:var(--serif-en);font-style:italic;
  font-size:10px;letter-spacing:.28em;color:var(--ink-mute);
}
.buy-opts select{
  width:100%;
  padding:11px 12px;
  font-family:var(--serif);font-weight:300;font-size:13px;letter-spacing:.06em;
  color:var(--ink);
  background:var(--white);
  border:1px solid var(--line);
  border-radius:2px;
  cursor:pointer;
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-mute) 50%),
                   linear-gradient(135deg,var(--ink-mute) 50%,transparent 50%);
  background-position:calc(100% - 15px) calc(50% + 1px), calc(100% - 10px) calc(50% + 1px);
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
}
.buy-opts select:focus-visible{outline:none;border-color:var(--gold)}
.product-card .buy-opts + .buy-btn{margin-top:14px}

/* 店頭受取（副ボタン）。配送が主導線なので、枠線を細く色を薄くして主従を付ける。 */
.product-card .pickup-btn{
  display:block;
  margin-top:10px;
  padding:12px 20px;
  text-align:center;
  font-family:var(--serif);
  font-weight:300;
  font-size:12px;
  letter-spacing:.18em;
  line-height:1.4;
  color:var(--ink-faint);
  background:transparent;
  border:1px solid var(--line);
  border-radius:2px;
  word-break:keep-all;
  overflow-wrap:break-word;
  cursor:pointer;
  transition:color .3s ease, border-color .3s ease;
}
.product-card .pickup-btn:hover,
.product-card .pickup-btn:focus-visible{
  color:var(--ink);
  border-color:var(--gold);
}
.ship-note{
  margin-top:10px;
  font-family:var(--serif);font-weight:300;font-size:11px;
  letter-spacing:.06em;line-height:1.7;color:var(--ink-faint);
  word-break:keep-all;overflow-wrap:break-word;
}
@media (max-width:520px){
  .buy-opts{flex-direction:column;gap:10px}
  .buy-opts .opt.qty{flex:1 1 auto}
}

/* ────── How to enjoy ────── */
#how-to-enjoy{scroll-margin-top:90px}
.section-head{max-width:720px;margin:0 auto 100px;text-align:center}
.section-head .label{justify-content:center;margin-left:auto;margin-right:auto}
.section-head .body-text{margin:28px auto 0;text-align:center;max-width:34em}

.steps{display:flex;flex-direction:column;gap:96px}
.step .split-visual{
  border-radius:14px;
  box-shadow:0 1px 2px rgba(46,28,16,.06);
}
.step-num{
  font-family:var(--serif-en);
  font-style:italic;
  font-size:14px;
  letter-spacing:.4em;
  text-transform:uppercase;
  color:var(--beige);
  display:inline-flex;align-items:center;gap:18px;
  margin-bottom:26px;
}
.step-num::before{content:"";width:42px;height:1px;background:var(--beige)}
.step-title{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(21px, 2.1vw, 28px);
  letter-spacing:.12em;
  line-height:1.75;
  color:var(--ink);
  margin-bottom:26px;
}

.store-cards{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:28px;
  margin-top:120px;
}
.store-card{
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--white);
  padding:48px 32px;
  text-align:center;
}
.store-card .sc-en{
  font-family:var(--serif-en);
  font-style:italic;
  font-size:12px;
  letter-spacing:.36em;
  text-transform:uppercase;
  color:var(--beige);
  margin-bottom:20px;
}
.store-card .sc-label{
  font-family:var(--serif);
  font-weight:400;
  font-size:13px;
  letter-spacing:.28em;
  color:var(--ink-mute);
  margin-bottom:14px;
}
.store-card .sc-value{
  font-family:var(--serif);
  font-weight:300;
  font-size:22px;
  letter-spacing:.08em;
  line-height:1.5;
  color:var(--ink);
}

/* ────── Footer ────── */
.footer{
  padding:80px 56px 48px;
  text-align:center;
  border-top:1px solid var(--line);
}
.footer .mark{
  font-family:var(--serif);
  font-weight:400;
  font-size:15px;
  letter-spacing:.42em;
  color:var(--ink);
}
.footer .mark-en{
  display:block;
  font-family:var(--serif-en);
  font-style:italic;
  font-size:12px;
  letter-spacing:.5em;
  color:var(--ink-mute);
  margin-top:10px;
  text-transform:lowercase;
}
.footer .foot-nav{
  display:flex;justify-content:center;gap:36px;
  margin-top:40px;
}
.footer .foot-nav a{
  font-family:var(--serif);
  font-weight:300;
  font-size:12px;
  letter-spacing:.32em;
  color:var(--ink-mute);
  transition:color .25s ease;
}
.footer .foot-nav a:hover{color:var(--ink)}
.footer .copy{
  margin-top:56px;
  font-family:var(--serif-en);
  font-size:10px;
  letter-spacing:.4em;
  color:var(--ink-faint);
}


/* ────── Reveal ────── */
.reveal{opacity:0;transform:translateY(28px);transition:opacity 1.2s ease, transform 1.2s ease}
.reveal.in{opacity:1;transform:none}

/* ────── Vertical-text block (home story teaser) ────── */
.vtext-panel{
  display:flex;align-items:center;justify-content:center;
  padding:8px 0;
}
/* keep the block itself static — only the text columns slide up */
.vtext-panel.reveal{opacity:1;transform:none}
.vtext-row{
  display:flex;flex-direction:row-reverse;   /* read right → left */
  gap:46px;align-items:flex-start;justify-content:center;
}
.vgroup{
  display:flex;flex-direction:row-reverse;gap:22px;
  opacity:0;transform:translateY(48px);
  transition:opacity .85s ease, transform .95s cubic-bezier(.16,.8,.24,1);
  transition-delay:var(--d, 0s);
}
.vtext-panel.in .vgroup{opacity:1;transform:none}
.vcol{
  writing-mode:vertical-rl;
  font-family:var(--serif);font-weight:300;
  font-size:19px;line-height:2.15;letter-spacing:.26em;
  color:var(--ink);
}
.vcol.em{color:#8a5a22}

/* ────── Responsive ────── */
@media (max-width: 1100px){
  .nav{gap:24px}
  .nav a{font-size:12px;letter-spacing:.24em}
}
@media (max-width: 960px){
  .header{padding:18px 24px}
  .header.scrolled, .header.on-light{padding:14px 24px}
  .brand{font-size:14px;letter-spacing:.24em}
  .brand .brand-en{font-size:9px}
  .nav{display:none}
  .menu-btn{
    display:flex;flex-direction:column;justify-content:center;align-items:flex-end;
    gap:6px;width:30px;height:24px;background:transparent;border:none;cursor:pointer;
    /* 開いたメニュー(.nav.open z-index:60)より上に置き、✕で閉じられるようにする */
    position:relative;z-index:70;
  }
  .menu-btn span{display:block;width:24px;height:1px;background:var(--ink)}
  .menu-btn span:last-child{width:16px}

  /* Mobile menu drawer */
  .nav.open{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;
    position:fixed;inset:0;background:rgba(247,240,225,.98);z-index:60;
    backdrop-filter:blur(10px);
  }
  .nav.open a{font-size:18px;letter-spacing:.28em}
  .menu-btn.open span:nth-child(1){transform:translateY(3px) rotate(45deg)}
  .menu-btn.open span:nth-child(2){transform:translateY(-4px) rotate(-45deg);width:24px}
  .menu-close{
    position:absolute;top:18px;right:24px;background:transparent;border:none;
    font-family:var(--serif-en);font-size:11px;letter-spacing:.4em;color:var(--ink);
    cursor:pointer;
  }

  .hero{
    grid-template-columns:1fr;gap:48px;
    padding:120px 24px 80px;
    min-height:auto;
  }
  .hero-copy{padding-left:0;order:2}
  .hero-visual{order:1;aspect-ratio:4/5;max-height:70vh}
  .hero h1{font-size:28px;line-height:1.85}
  .hero-sub{margin-top:36px;font-size:12px}
  .hero-mark, .scroll-cue{display:none}

  section{padding:96px 24px}
  .split, .split.reverse{
    grid-template-columns:1fr;gap:48px;
  }
  .split-copy, .split.reverse .split-copy{padding:0}
  .split-visual.square, .split-visual.tall{aspect-ratio:5/6}

  .vtext-panel{padding:8px 0}
  .vtext-row{gap:30px}
  .vgroup{gap:16px}
  .vcol{font-size:16px;letter-spacing:.2em;line-height:2.05}

  .page-head{padding:140px 24px 72px}
  .page-title{font-size:24px;line-height:1.9;letter-spacing:.14em}
  .page-sub{font-size:13px;margin-top:24px}

  h2{font-size:22px;line-height:2;letter-spacing:.14em}
  .body-text{font-size:14px;line-height:2.2}
  .cta{margin-top:40px;font-size:12px;letter-spacing:.28em}
  .quote-sep{padding:80px 24px}

  .scene-grid{grid-template-columns:repeat(2, 1fr);gap:40px 24px}
  .scene-card .pic{border-radius:12px;margin-bottom:16px}
  .scene-head{gap:10px;margin-bottom:8px}
  .scene-card .scene-num{font-size:20px}
  .scene-card .scene-name{font-size:14px}
  .scene-card .scene-desc{font-size:11.5px;line-height:1.85}

  .section-head{margin-bottom:72px}
  .steps{gap:64px}
  .step .split-visual.wide{aspect-ratio:4/3}
  .step-num{margin-bottom:20px}
  .step-title{font-size:21px;margin-bottom:20px}
  .store-cards{grid-template-columns:1fr;gap:18px;margin-top:80px}
  .store-card{padding:36px 28px}
  .product-list{grid-template-columns:1fr;gap:64px}
  .product-card .pic{aspect-ratio:4/3}

  .footer{padding:64px 24px 36px}
  .footer .foot-nav{flex-wrap:wrap;gap:20px;margin-top:32px}
  .footer .foot-nav a{font-size:11px}
}

@media (max-width: 560px){
  .scene-grid{grid-template-columns:repeat(2, 1fr);gap:32px 16px}
}