/* ============================================================
   TOKENS — Dusty Rose × White palette (brighter)
   ============================================================ */
:root{
  /* Base whites — much brighter */
  --ivory:   #ffffff;
  --cream:   #fdfbfb;
  --beige:   #f5efe6;

  /* Brand color system */
  --rose-lt: #f5efe6;   /* Accent候補 */
  --blush:   #e5d6d8;   /* Sub */
  --rose:    #a58086;   /* Main */
  --mauve:   #8b5a5f;   /* 深みローズ */
  --rose-dk: #8b5a5f;

  --charcoal:#4a3638;   /* Accent */
  --muted:   #b09aa0;
  --brown:   #8b5a5f;

  /* Gold → ローズ系に統一 */
  --gold:    #a58086;
  --gold-lt: #e5d6d8;
  --gold-dk: #8b5a5f;

  --ff-en:'Cormorant Garamond',serif;
  --ff-jp:'Noto Serif JP',serif;
  --ff-ui:'Jost',sans-serif;
  --expo:cubic-bezier(0.16,1,0.3,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--ivory);
  color:var(--charcoal);
  font-family:var(--ff-jp);
  font-weight:300;
  line-height:1.9;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}

.sp{position:fixed;top:0;left:0;height:1px;background:linear-gradient(90deg,var(--gold-lt),var(--mauve));z-index:999;width:0}

/* ============================================================
   LOADER
   ============================================================ */

/* ============================================================
   SHARED
   ============================================================ */
.btn-txt{display:inline-flex;align-items:center;justify-content:center;gap:1rem;font-family:var(--ff-ui);font-weight:300;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--brown);border:1px solid rgba(165,128,134,.45);padding:.85rem 1.4rem;background:transparent;min-height:44px;transition:gap .3s var(--expo),background .35s,border-color .35s,color .35s}
.btn-txt::after{content:'';display:block;width:24px;height:1px;background:var(--gold);transition:width .35s var(--expo)}
.btn-txt:hover{gap:1.4rem;background:rgba(165,128,134,.06);border-color:var(--rose)}
.btn-txt:hover::after{width:36px}
.btn-txt.lt{color:var(--brown)}
.btn-txt.lt::after{background:var(--gold)}
.btn-pri{display:inline-flex;align-items:center;gap:1.2rem;font-family:var(--ff-ui);font-weight:300;font-size:.72rem;letter-spacing:.25em;text-transform:uppercase;color:var(--ivory);background:var(--brown);padding:1.1rem 3rem;border:1px solid var(--brown);transition:background .35s,color .35s}
.btn-pri:hover{background:transparent;color:var(--brown)}

/* ph helpers */
.ph-icon svg{display:block;margin:0 auto}
.ph-lbl{font-family:var(--ff-ui);font-weight:200;font-size:.5rem;letter-spacing:.3em;text-transform:uppercase;text-align:center}

/* ============================================================
   SECTION 01 — OPENING TYPOGRAPHIC HERO
   Full-screen dark, oversized type-only
   ============================================================ */
#opening{
  position:relative;
  width:100%;
  height:100svh;
  min-height:700px;
  background:var(--cream);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:40px 7vw 10vh;
}

/* Enormous background letter */
.op-giant{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  font-family:var(--ff-en);
  font-style:italic;
  font-weight:300;
  font-size:clamp(30vw,42vw,50vw);
  line-height:.85;
  color:rgba(107,79,67,.055);
  pointer-events:none;
  user-select:none;
  white-space:nowrap;
  letter-spacing:-.02em;
  opacity:0;
}

/* Top breadcrumb */
.op-breadcrumb{
  position:absolute;
  top:calc(1.6rem + 60px);
  right:7vw;
  font-family:var(--ff-ui);
  font-weight:200;
  font-size:.55rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--muted);
  display:flex;
  align-items:center;
  gap:.8rem;
  opacity:0;
}
.op-breadcrumb::before{content:'';display:block;width:20px;height:1px;background:var(--gold);opacity:.6}

/* Gold horizontal rule */
.op-rule{
  position:absolute;
  top:50%;left:0;right:0;
  height:1px;
  background:linear-gradient(90deg,transparent 0%,rgba(181,149,106,.25) 30%,rgba(181,149,106,.25) 70%,transparent 100%);
  transform:scaleX(0);
  transform-origin:left;
}

/* Small inset photo top-left */
.op-photo-inset{
  position:absolute;
  top:calc(1.6rem + 70px);
  left:7vw;
  width:clamp(140px,16vw,200px);
  aspect-ratio:3/4;
  background:linear-gradient(160deg,var(--beige),var(--blush));
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  transform:translateY(-16px);
}
.op-photo-inset .ph-lbl{color:rgba(107,79,67,.4)}

/* Main headline */
.op-main{position:relative;z-index:2}
.op-eyebrow{
  font-family:var(--ff-ui);
  font-weight:200;
  font-size:.58rem;
  letter-spacing:.38em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:1.6rem;
  opacity:0;
  transform:translateY(8px);
}
.op-h1{
  font-family:var(--ff-jp);
  font-weight:200;
  font-size:clamp(1.04rem,1.55vw,1.29rem);
  color:var(--muted);
  letter-spacing:.1em;
  line-height:2;
  margin-bottom:.6rem;
  overflow:hidden;
}
.op-h1 .l{display:block;opacity:0;transform:translateY(28px)}

.op-catch{
  font-family:var(--ff-en);
  font-style:italic;
  font-weight:300;
  font-size:clamp(1.8rem,3.5vw,3rem);
  color:var(--charcoal);
  letter-spacing:.04em;
  line-height:1.2;
  margin-bottom:3rem;
  opacity:0;
  transform:translateY(20px);
}

.op-scroll{
  display:flex;
  align-items:center;
  gap:1rem;
  opacity:0;
}
.op-scroll span{font-family:var(--ff-ui);font-weight:200;font-size:.52rem;letter-spacing:.32em;text-transform:uppercase;color:var(--muted)}
.op-scroll-bar{width:48px;height:1px;background:var(--beige);position:relative;overflow:hidden}
.op-scroll-bar::after{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:var(--gold);animation:sb 2s ease-in-out infinite}
@keyframes sb{0%{left:-100%}50%{left:0}100%{left:100%}}

/* ============================================================
   SECTION 02 — BRAND NAME FULL-SCREEN TYPE
   Ivory bg, the brand name and flower meaning fill the space
   ============================================================ */
#brand-reveal{
  position:relative;
  background:var(--ivory);
  overflow:hidden;
  display:flex;
  align-items:stretch;
  padding-top:60px;  /* 上部余白 */
}

.br-left{
  width:55%;
  padding:14vh 6vw 14vh 7vw;
  display:flex;
  flex-direction:column;
  justify-content:center;
  position:relative;
  z-index:2;
}

/* Huge italic Iberis background */
.br-big{
  position:absolute;
  left:2vw;
  top:50%;
  transform:translateY(-50%);
  font-family:var(--ff-en);
  font-style:italic;
  font-weight:300;
  font-size:clamp(10rem,22vw,26rem);
  line-height:.9;
  color:rgba(107,79,67,.045);
  pointer-events:none;
  user-select:none;
  white-space:nowrap;
  z-index:0;
  left:2vw;
}

.br-label{
  font-family:var(--ff-ui);
  font-weight:200;
  font-size:.58rem;
  letter-spacing:.38em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:2rem;
  z-index:1;
}
.br-kana{
  font-family:var(--ff-jp);
  font-weight:200;
  font-size:clamp(1.2rem,2.2vw,2rem);
  color:var(--charcoal);
  letter-spacing:.1em;
  line-height:1.5;
  margin-bottom:.6rem;
  z-index:1;
}
.br-meaning{
  font-family:var(--ff-en);
  font-style:italic;
  font-weight:300;
  font-size:clamp(1rem,1.8vw,1.5rem);
  color:var(--gold);
  letter-spacing:.14em;
  margin-bottom:2.5rem;
  z-index:1;
  display:flex;
  align-items:center;
  gap:1rem;
}
.br-meaning::before{content:'';display:block;width:24px;height:1px;background:var(--gold-lt);flex-shrink:0}
.br-body{
  font-size:clamp(.97rem,1.1vw,1.05rem);
  line-height:2.5;
  color:var(--charcoal);
  opacity:.78;
  max-width:420px;
  z-index:1;
}

/* Right: stacked photos */
.br-right{
  width:45%;
  position:relative;
  overflow:hidden;
}
.br-photo-bot{display:none}
.br-photo-top{
  background:linear-gradient(160deg,var(--beige),var(--blush));
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.br-photo-bot{
  background:linear-gradient(135deg,var(--rose),var(--mauve));
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.br-photo-bot .ph-lbl{color:rgba(107,79,67,.4)}
/* Photo inner border */
.ph-inset-border{position:absolute;inset:14px;border:1px solid rgba(181,149,106,.15);pointer-events:none}

/* Vertical divider line between sections */
.br-vdiv{
  position:absolute;
  top:10%;bottom:10%;
  left:55%;
  width:1px;
  background:linear-gradient(180deg,transparent,var(--beige),transparent);
  z-index:3;
}

/* ============================================================
   SECTION 03 — STORY NARRATIVE
   Centered narrow column with bleeds and margin photos
   ============================================================ */
#narrative{
  position:relative;
  background:var(--ivory);
  overflow:hidden;
}

/* Chapter marker bar — full-width */
.chap-bar{
  width:100%;
  padding:3rem 7vw;
  display:flex;
  align-items:center;
  gap:2rem;
  background:var(--cream);
  border-top:1px solid var(--beige);
  border-bottom:1px solid var(--beige);
}
.chap-bar.dark{
  background:#a58086;
  border-color:rgba(255,255,255,.2);
}
.chap-num{
  font-family:var(--ff-en);
  font-style:italic;
  font-weight:300;
  font-size:4rem;
  line-height:1;
  color:rgba(255,255,255,.2);
  flex-shrink:0;
  transition:color .4s;
}
.chap-bar.dark .chap-num{color:rgba(255,255,255,.45)}
.chap-divider{flex:1;height:1px;background:var(--beige)}
.chap-bar.dark .chap-divider{background:rgba(255,255,255,.3)}
.chap-title{
  font-family:var(--ff-jp);
  font-weight:300;
  font-size:clamp(1.04rem,1.45vw,1.19rem);
  color:var(--charcoal);
  letter-spacing:.08em;
}
.chap-bar.dark .chap-title{color:#ffffff;font-weight:400}
.chap-sub{
  font-family:var(--ff-ui);
  font-weight:200;
  font-size:.55rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--gold);
  flex-shrink:0;
}

/* ---- Block A: Photo bleeds LEFT, text right ---- */
.bleed-left{
  display:grid;
  grid-template-columns:40vw 1fr;
  min-height:70vh;
}
.bl-photo{
  background:linear-gradient(160deg,var(--beige),var(--blush));
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
/* ▼ 追加：Chapter 1（創業者）写真のみコンテナを縦長アスペクト比に固定し、頭部の切れを防止 */
#blPh1{
  aspect-ratio:3/4;
  height:auto;
  max-height:100%;
  align-self:center;
}
#blPh1 img{
  object-position:center top !important;
}
/* ▲ 追加ここまで */
.bl-text{
  padding:10vh 6vw 10vh 5vw;
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:var(--ivory);
}
.bl-text h3{
  font-family:var(--ff-jp);
  font-weight:300;
  font-size:clamp(1rem,1.8vw,1.4rem);
  color:var(--charcoal);
  line-height:1.85;
  letter-spacing:.06em;
  margin-bottom:1.5rem;
}
.bl-text p{
  font-size:clamp(.97rem,1.1vw,1.05rem);
  line-height:2.55;
  color:var(--charcoal);
  opacity:.78;
}
.bl-rule{width:32px;height:1px;background:var(--gold-lt);margin:1.4rem 0}

/* ---- Block B: Light warm bleed with photo right ---- */
.bleed-dark{
  background:#c9848e;
  padding:14vh 7vw;
  position:relative;
  overflow:hidden;
}
.bleed-dark::before{
  content:'';
  position:absolute;inset:0;
  background:radial-gradient(ellipse at 60% 50%,rgba(255,255,255,.18) 0%,transparent 60%);
  pointer-events:none;
}
.bd-inner{
  max-width:760px;
}
.bd-label{
  font-family:var(--ff-ui);
  font-weight:200;font-size:.55rem;
  letter-spacing:.35em;text-transform:uppercase;
  color:rgba(255,255,255,.7);
  margin-bottom:2rem;
  display:flex;align-items:center;gap:.8rem;
}
.bd-label::before{content:'';display:block;width:20px;height:1px;background:rgba(255,255,255,.5)}
.bd-h3{
  font-family:var(--ff-jp);
  font-weight:400;
  font-size:clamp(1rem,1.8vw,1.4rem);
  color:#ffffff;
  line-height:1.9;
  letter-spacing:.06em;
  margin-bottom:1.5rem;
}
.bd-rule{width:32px;height:1px;background:rgba(255,255,255,.4);margin:1.4rem 0}
.bd-body{
  font-size:clamp(.97rem,1.1vw,1.05rem);
  line-height:2.55;
  color:rgba(255,255,255,.88);
  opacity:1;
}
/* Photo: right side bleeding off edge */
.bd-photo{
  position:absolute;
  top:0;right:0;bottom:0;
  width:35%;
  background:linear-gradient(160deg,var(--blush),var(--mauve));
  overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.bd-photo::before{
  content:'';position:absolute;left:0;top:0;bottom:0;
  width:60px;
  background:linear-gradient(90deg,#d4899a,transparent);
  z-index:1;
}
.bd-photo .ph-lbl{color:rgba(107,79,67,.4);position:relative;z-index:2}

/* ---- Block C: text left, photo right with overlap ---- */
.bleed-right{
  background:#fff;
  position:relative;
  overflow:hidden;
}
/* 上下に淡いローズのグラデーション */
.bleed-right::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(229,214,216,.08) 0%,rgba(229,214,216,.18) 100%);
  pointer-events:none;
}
.br2-text{
  position:relative;z-index:1;
  max-width:min(1080px,94vw);
  margin:0 auto;
  padding:8rem 5vw;
  text-align:center;
}
.br2-line{display:block}
@media(min-width:900px){.br2-line{white-space:nowrap}}
.br2-lbl{
  font-family:var(--ff-ui);font-weight:200;font-size:.55rem;
  letter-spacing:.36em;text-transform:uppercase;
  color:#a58086;margin-bottom:2rem;
  display:flex;align-items:center;justify-content:center;gap:.8rem;
}
.br2-lbl::before,.br2-lbl::after{content:'';width:20px;height:1px;background:#a58086;flex-shrink:0}
.br2-text p{
  font-family:var(--ff-jp);
  font-weight:200;
  font-size:clamp(1rem,1.15vw,1.1rem);
  line-height:2.6;
  color:#4a3638;
  opacity:.85;
  letter-spacing:.06em;
}
.br2-rule{width:32px;height:1px;background:#e5d6d8;margin:2rem auto}
.br2-photo{display:none}

/* ============================================================
   SECTION 04 — FULL-SCREEN QUOTE CARD (film title-card style)
   ============================================================ */
#quote-card{
  position:relative;
  background:var(--rose);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:60vh;
  padding:10vh 7vw;
}
#quote-card::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 50%,rgba(255,255,255,.15) 0%,transparent 70%);
}
/* Top and bottom rules */
#quote-card::after{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);
}
.qc-bottom-rule{
  position:absolute;bottom:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);
}
.qc-inner{text-align:center;position:relative;z-index:1;max-width:820px}
.qc-num{
  font-family:var(--ff-en);
  font-style:italic;
  font-weight:300;
  font-size:5rem;
  line-height:.9;
  color:rgba(255,255,255,.2);
  display:block;
  margin-bottom:.5rem;
}
.qc-text{
  font-family:var(--ff-jp);
  font-weight:200;
  font-size:clamp(1.1rem,2.5vw,2rem);
  color:var(--ivory);
  line-height:2;
  letter-spacing:.08em;
  margin-bottom:1.5rem;
  opacity:.95;
}
.qc-sub{
  font-family:var(--ff-en);
  font-style:italic;
  font-weight:300;
  font-size:clamp(.9rem,1.4vw,1.1rem);
  color:rgba(255,255,255,.7);
  letter-spacing:.18em;
  opacity:.8;
}

/* ============================================================
   SECTION 05 — MISSION (numbered vertical list)
   Very different from standard cards — linear, expansive
   ============================================================ */
#mission{
  background:var(--ivory);
  position:relative;
  overflow:hidden;
}

.ms-header{
  padding:14vh 7vw 8vh;
  border-bottom:1px solid var(--beige);
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:4vw;
}
.ms-h2{
  font-family:var(--ff-en);
  font-style:italic;
  font-weight:300;
  font-size:clamp(2.5rem,5vw,4.5rem);
  line-height:1;
  color:var(--charcoal);
  letter-spacing:.04em;
}
.ms-sub{
  max-width:380px;
  font-size:clamp(.97rem,1.1vw,1.05rem);
  line-height:2.3;
  color:var(--charcoal);
  opacity:.72;
}

/* Each mission row: full-width, number large on left, text right */
.ms-row{
  display:grid;
  grid-template-columns:7vw 1fr;
  gap:0;
  border-bottom:1px solid var(--beige);
  transition:background .35s;
}
.ms-row:hover{background:var(--rose-lt)}

.ms-row-num{
  padding:5vh 3vw;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  border-right:1px solid var(--beige);
}
.ms-row-num span{
  font-family:var(--ff-en);
  font-style:italic;
  font-weight:300;
  font-size:clamp(3rem,6vw,5rem);
  line-height:1;
  color:var(--beige);
  transition:color .4s;
}
.ms-row:hover .ms-row-num span{color:var(--rose)}

.ms-row-body{
  padding:5vh 7vw 5vh 4vw;
  display:flex;
  align-items:center;
  gap:6vw;
}
.ms-row-body h3{
  font-family:var(--ff-jp);
  font-weight:300;
  font-size:clamp(.95rem,1.5vw,1.2rem);
  color:var(--charcoal);
  letter-spacing:.06em;
  line-height:1.75;
  flex-shrink:0;
  width:22vw;
}
.ms-row-body p{
  font-size:clamp(.76rem,1vw,.84rem);
  line-height:2.3;
  color:var(--muted);
  flex:1;
}
/* Thin gold accent line appears on hover */
.ms-row-accent{
  width:0;height:2px;
  background:var(--gold-lt);
  transition:width .5s var(--expo);
  margin-top:1rem;
}
.ms-row:hover .ms-row-accent{width:40px}

/* ============================================================
   SECTION 06 — CLOSING CTA (rose tinted, elegant)
   ============================================================ */
#s-cta{
  position:relative;
  background:#fff;
  overflow:hidden;
  padding:0;
}
/* ────────────────────────────────────────
   CTAセクション：全面画像 + テキスト重ね
   ──────────────────────────────────────── */
#s-cta{
  position:relative;
  background:#2a1820;
  overflow:hidden;
  min-height:clamp(520px,72vw,820px);
  display:flex;align-items:center;justify-content:center;
  padding:0;
}

/* 背景画像（透かし）*/
.cta-bg-img{
  position:absolute;inset:0;
  background-image:url('../images/hero-sub.webp');
  background-size:cover;background-position:center;
  opacity:.4;
  animation:cta-ken 20s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes cta-ken{
  0%  {transform:scale(1.06) translate(0,0)}
  50% {transform:scale(1.08) translate(-1%,.5%)}
  100%{transform:scale(1.06) translate(.5%,-1%)}
}

/* グラデーションオーバーレイ */
.cta-overlay{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(30,14,20,.55) 0%,rgba(30,14,20,.35) 40%,rgba(30,14,20,.72) 100%);
  pointer-events:none;
}

/* コンテンツ */
.cta-content{
  position:relative;z-index:2;
  text-align:center;
  padding:8rem 5vw;
  max-width:900px;
  width:100%;
}

/* 上のライン装飾 */
.cta-top-line{
  width:1px;height:52px;
  background:linear-gradient(180deg,transparent,rgba(229,214,216,.6));
  margin:0 auto 3rem;
}

/* 英字装飾（マスクリビール）*/
.cta-word-en{
  font-family:var(--ff-en);font-style:italic;font-weight:300;
  font-size:clamp(3.2rem,8vw,8rem);
  color:rgba(255,255,255,.9);
  letter-spacing:.06em;line-height:1;
  display:block;margin-bottom:1.4rem;
  clip-path:inset(0 100% 0 0);
  transition:clip-path 1.6s cubic-bezier(.16,1,.3,1) .2s;
}
.cta-word-en.visible{clip-path:inset(0 0% 0 0)}

/* セパレーターライン */
.cta-sep{
  width:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(229,214,216,.5),transparent);
  margin:1.8rem auto 2rem;
  transition:width 1.4s cubic-bezier(.16,1,.3,1) .5s;
}
.cta-sep.visible{width:clamp(120px,20vw,280px)}

/* 日本語メッセージ */
.cta-message{
  font-family:var(--ff-jp);font-weight:200;
  font-size:clamp(1.07rem,1.35vw,1.27rem);
  color:rgba(255,255,255,.82);
  letter-spacing:.14em;
  line-height:2.8;
  margin-bottom:0;
}
.cta-message em{
  font-style:normal;
  color:#e5d6d8;
  font-weight:300;
}

/* ボタンエリア */
.cta-btns{
  display:flex;
  flex-direction:row;
  gap:1.4rem;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:3.5rem;
  opacity:0;transform:translateY(16px);
  transition:opacity .9s ease .3s,transform .9s ease .3s;
}
.cta-btns.visible{opacity:1;transform:none}

/* 主ボタン：LINE（白塗り）*/
.cta-btn-pri{
  display:inline-flex;align-items:center;gap:1rem;
  font-family:var(--ff-ui);font-weight:300;font-size:.76rem;
  letter-spacing:.18em;text-transform:uppercase;
  color:#4a3638;background:rgba(255,255,255,.92);
  padding:1.1rem 3rem;border:1px solid rgba(255,255,255,.8);
  transition:background .4s,box-shadow .4s;
  white-space:nowrap;text-decoration:none;
  min-width:220px;justify-content:center;
}
.cta-btn-pri::after{content:'';width:18px;height:1px;background:#8b5a5f;transition:width .4s}
.cta-btn-pri:hover{background:#fff;box-shadow:0 12px 40px rgba(0,0,0,.2)}
.cta-btn-pri:hover::after{width:28px}

/* 副ボタン：商品一覧（ゴーストボタン）*/
.cta-btn-sec{
  display:inline-flex;align-items:center;gap:1rem;
  font-family:var(--ff-ui);font-weight:300;font-size:.72rem;
  letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.8);background:transparent;
  padding:1rem 2.8rem;border:1px solid rgba(255,255,255,.38);
  transition:background .4s,border-color .4s,color .4s;
  white-space:nowrap;text-decoration:none;
  min-width:220px;justify-content:center;
}
.cta-btn-sec::after{content:'';width:14px;height:1px;background:rgba(255,255,255,.5);transition:width .4s}
.cta-btn-sec:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.65);color:#fff}
.cta-btn-sec:hover::after{width:22px}

/* 不要クラス */
.cta-bg-num,.cta-inner,.cta-text,.cta-right,.cta-action,
.cta-prelude,.cta-botanical,.cta-prelude-rule,
.cta-rule,.cta-label,.cta-h2,.cta-btns-old{display:none}

@media (max-width: 540px){
  .cta-btns{flex-direction:column}
  .cta-btn-pri,.cta-btn-sec{min-width:0;width:260px}
}

/* ============================================================
   RESPONSIVE — 統一BP: 1140 / 840 / 540
   ============================================================ */

/* === 1140px以下: ノートPC調整 === */
@media (max-width: 1140px){
  .br-left{padding:10vh 5vw}
  .br-big{font-size:clamp(8rem,18vw,20rem)}
  .br-body{font-size:clamp(.95rem,1.1vw,1.05rem)}
  .bl-text{padding:8vh 5vw}
  .bleed-dark{padding:10vh 5vw}
  .bd-h3{font-size:clamp(.98rem,1.7vw,1.3rem)}
  .ms-header{padding:10vh 5vw 6vh}
  .ms-row-body{padding:4vh 5vw 4vh 3vw}
  .ms-row-body h3{width:22vw;font-size:clamp(.92rem,1.4vw,1.1rem)}
  .cta-content{padding:6rem 5vw}
}

/* === 840px以下: タブレット/大型SP === */
@media (max-width: 840px){
  /* INTRO — SP版で折返ししないサイズに */
  .intro-text{font-size:clamp(.78rem,3.2vw,1.05rem);padding:0 4vw;letter-spacing:.12em;white-space:nowrap}

  /* BRAND REVEAL */
  #brand-reveal{flex-direction:column}
  .br-left,.br-right{width:100%}
  .br-left{padding:8vh 6vw 6vh}
  /* SP: 高さ固定をやめてアスペクト比で全体表示 */
  .br-right{height:auto;min-height:0;aspect-ratio:4/5}
  .br-photo-top{height:auto !important;min-height:0 !important;aspect-ratio:4/5}
  .br-photo-top img{position:relative;width:100%;height:auto;display:block}
  .br-vdiv{display:none}
  .br-big{font-size:clamp(7rem,22vw,14rem);left:0;right:0;text-align:center}
  .br-kana{font-size:clamp(1.1rem,3.4vw,1.6rem)}
  .br-meaning{font-size:clamp(.95rem,2.6vw,1.2rem)}
  .br-body{max-width:none}

  /* NARRATIVE chapter bar */
  .chap-bar{padding:2.4rem 6vw;gap:1.4rem;flex-wrap:wrap}
  .chap-num{font-size:3rem}
  .chap-title{font-size:clamp(.95rem,2.4vw,1.1rem);flex-basis:100%;order:2}
  .chap-divider{display:none}
  .chap-sub{order:3;font-size:.5rem}

  /* BLEED LEFT */
  .bleed-left{grid-template-columns:1fr;min-height:auto}
  /* SP: Chapter 1 (Before) 画像を見切れないようアスペクト比に */
  .bl-photo{height:auto;min-height:0;aspect-ratio:4/5;order:1}
  .bl-photo img{object-fit:cover;object-position:center}
  .bl-text{padding:7vh 6vw;order:2}
  .bl-text h3{font-size:clamp(.98rem,2.6vw,1.2rem)}

  /* BLEED DARK */
  .bleed-dark{padding:8vh 6vw;display:flex;flex-direction:column}
  /* SP: Chapter 2 (Turning Point) 画像を上、テキストを下に配置 */
  .bd-photo{
    position:relative;
    top:auto;right:auto;bottom:auto;
    width:100%;
    height:auto;
    aspect-ratio:4/5;
    margin-top:0;
    display:block;
    order:1;
  }
  .bd-photo::before{display:none}
  .bd-photo img{position:relative !important;inset:auto !important;width:100%;height:100%;object-fit:cover}
  .bd-inner{order:2;margin-top:2.2rem}
  .bd-h3{font-size:clamp(1rem,2.8vw,1.25rem)}
  .bd-body{font-size:clamp(.95rem,2.4vw,1.05rem)}

  /* BLEED RIGHT (Resolution) */
  .br2-text{padding:6rem 6vw}
  .br2-line{white-space:normal}

  /* MISSION */
  .ms-header{flex-direction:column;align-items:flex-start;gap:1.6rem;padding:7vh 6vw 4vh}
  .ms-row{grid-template-columns:60px 1fr}
  .ms-row-num{padding:4vh 1.2vw}
  .ms-row-num span{font-size:clamp(2.4rem,5vw,3.4rem)}
  .ms-row-body{flex-direction:column;gap:.8rem;padding:4vh 6vw 4vh 2vw}
  .ms-row-body h3{width:auto;font-size:clamp(.95rem,2.6vw,1.1rem)}

  /* CTA */
  #s-cta{min-height:clamp(440px,80vw,640px)}
  .cta-content{padding:6rem 6vw}
  .cta-message{font-size:clamp(1rem,2.4vw,1.18rem);line-height:2.4}
}

/* === 540px以下: スマートフォン === */
@media (max-width: 540px){
  .br-big{font-size:clamp(6rem,26vw,11rem)}
  .br-kana{font-size:clamp(1rem,4.5vw,1.3rem)}
  .br-body{font-size:clamp(.92rem,3.6vw,1rem);line-height:2.2}

  .chap-bar{padding:2rem 5vw;gap:.8rem}
  .chap-num{font-size:2.2rem}
  .chap-title{font-size:.9rem;line-height:1.7}

  .bl-text h3{font-size:clamp(.95rem,3.4vw,1.1rem);line-height:1.85}
  .bd-h3{font-size:clamp(.95rem,3.6vw,1.15rem);line-height:1.85}

  .br2-text{padding:4.5rem 6vw}
  .br2-text p{font-size:clamp(.92rem,3.6vw,1rem);line-height:2.3}

  .ms-row{grid-template-columns:50px 1fr}
  .ms-row-num span{font-size:2.2rem}
  .ms-row-body h3{font-size:.95rem}
  .ms-row-body p{font-size:.78rem;line-height:2.1}

  .cta-word-en{font-size:clamp(2.6rem,12vw,4.4rem)}
  .cta-message{font-size:.95rem;line-height:2.3}
}

/* ============================================================
   INTRO SPLASH — FV前の導入演出
   ============================================================ */
#intro-splash{
  position:fixed;inset:0;
  background:#ffffff;
  z-index:10000;
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;
}
.intro-text{
  font-family:'Noto Serif JP',serif;
  font-weight:200;
  font-size:clamp(1.1rem,2.2vw,1.8rem);
  color:#2e2426;
  letter-spacing:.18em;
  line-height:2;
  text-align:center;
  opacity:0;
}

/* ============================================================
   NAV — index.html統一
   ============================================================ */
nav{position:fixed;top:0;left:0;right:0;z-index:200;padding:1.6rem 4rem;display:flex;align-items:center;justify-content:space-between;transition:background .5s,backdrop-filter .5s}
nav.sc{background:rgba(250,247,242,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.n-logo{display:flex;flex-direction:column;gap:.1rem;text-decoration:none}
.n-en{font-family:'Cormorant Garamond','Ovo',serif;font-style:italic;font-weight:500;font-size:2.1rem;color:var(--ivory);letter-spacing:.08em;line-height:1;transition:color .5s}
nav.sc .n-en{color:var(--brown)}
.n-sub{font-family:var(--ff-ui);font-weight:200;font-size:.55rem;color:rgba(255,255,255,.6);letter-spacing:.25em;text-transform:uppercase;transition:color .5s}
nav.sc .n-sub{color:var(--muted)}
.n-links{display:flex;gap:2.4rem;list-style:none;margin:0;padding:0}
.n-links a{font-family:var(--ff-ui);font-weight:300;font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.75);text-decoration:none;transition:color .5s;position:relative}
nav.sc .n-links a{color:var(--charcoal);opacity:.7}
.n-links a::after{content:'';position:absolute;bottom:-3px;left:0;width:0;height:1px;background:var(--gold,#c9a961);transition:width .3s var(--expo,cubic-bezier(.16,1,.3,1))}
.n-links a:hover::after,.n-links a.cur::after{width:100%}
.n-links a:hover,.n-links a.cur{opacity:1}
.n-cta{font-family:var(--ff-ui);font-weight:300;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:#fff;background:linear-gradient(135deg,var(--mauve,#8b5a5f),var(--rose,#a58086));border:none;padding:.7rem 1.8rem;text-decoration:none;box-shadow:0 4px 16px rgba(139,90,95,.28);transition:transform .35s,box-shadow .35s,filter .35s}
.n-cta:hover{transform:translateY(-2px);box-shadow:0 10px 32px rgba(139,90,95,.45);filter:brightness(1.08)}
.n-ham{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:8px}
.n-ham span{display:block;width:22px;height:1px;background:var(--ivory);transition:background .5s}
nav.sc .n-ham span{background:var(--charcoal)}

/* ============================================================
   FOOTER — index.html統一
   ============================================================ */
footer{background:#3a2a30;padding:5rem 0 3rem;color:#fff}
.ft-in{max-width:1200px;margin:0 auto;padding:0 5vw}
.ft-top{display:grid;grid-template-columns:1fr 2fr;gap:6vw;margin-bottom:4rem;padding-bottom:4rem;border-bottom:1px solid rgba(255,255,255,.08)}
.ft-logo .f-en{font-family:'Cormorant Garamond','Ovo',serif;font-style:italic;font-weight:500;font-size:2rem;color:var(--gold-lt,#e0c48a);letter-spacing:.08em;line-height:1;margin-bottom:.5rem}
.ft-logo .f-sub{font-family:var(--ff-ui);font-weight:200;font-size:.55rem;letter-spacing:.28em;text-transform:uppercase;color:rgba(255,255,255,.3)}
.ft-nav{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.ft-col .fc-ttl{font-family:var(--ff-ui);font-weight:200;font-size:.58rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold,#c9a961);margin-bottom:1.2rem}
.ft-col ul{list-style:none;margin:0;padding:0}
.ft-col ul li{margin-bottom:.7rem}
.ft-col ul li a{font-size:.85rem;color:rgba(255,255,255,.5);transition:color .3s;text-decoration:none}
.ft-col ul li a:hover{color:rgba(255,255,255,.9)}
.ft-bot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}
.ft-contact{font-size:.78rem;color:rgba(255,255,255,.4)}
.ft-contact a{color:var(--gold-lt,#e0c48a);opacity:.75;transition:opacity .3s;text-decoration:none}
.ft-contact a:hover{opacity:1}
.ft-copy{font-family:var(--ff-ui);font-weight:200;font-size:.6rem;letter-spacing:.15em;color:rgba(255,255,255,.25)}

/* NAV/FOOTER レスポンシブ — 統一 */
@media (max-width: 840px){
  nav{padding:1.2rem 5vw}
  .n-links,.n-cta{display:none}
  .n-ham{display:flex}
  .ft-top{grid-template-columns:1fr;gap:2.5rem}
  .ft-nav{grid-template-columns:1fr 1fr}
  .ft-bot{flex-direction:column;gap:1rem;text-align:center}
}
@media (max-width: 540px){
  .ft-nav{grid-template-columns:1fr}
}


/* ============================================================
   HAMBURGER MENU — 開閉時のオーバーレイ
   ============================================================ */
.n-ham{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:8px;z-index:210;position:relative}
.n-ham span{display:block;width:22px;height:1px;background:var(--ivory,#fff);transition:background .5s,transform .35s ease,opacity .35s ease}
nav.sc .n-ham span{background:var(--charcoal,#4a3638)}
nav.is-open .n-ham span{background:var(--charcoal,#4a3638)}
nav.is-open .n-ham span:nth-child(1){transform:translateY(6px) rotate(45deg)}
nav.is-open .n-ham span:nth-child(2){opacity:0}
nav.is-open .n-ham span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
body.menu-open{overflow:hidden}

@media (max-width: 840px){
  .n-ham{display:flex}
  /* HAMBURGER MENU — index基準で統一 */
  nav.is-open{
    height:100vh;
    flex-direction:column;
    justify-content:flex-start;
    align-items:center;
    padding:4.5rem 2rem 3rem;
    background:rgba(250,247,242,.98);
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    gap:1.5rem;
    overflow-y:auto;
  }
  nav.is-open .n-logo{position:absolute;top:1.2rem;left:5vw}
  nav.is-open .n-ham{position:absolute;top:1.2rem;right:5vw}
  nav.is-open .n-links{
    display:flex;
    position:static;
    flex-direction:column;align-items:center;justify-content:flex-start;
    gap:1.4rem;
    padding:0;margin:0;
    list-style:none;
    width:auto;height:auto;
    background:transparent;
    backdrop-filter:none;-webkit-backdrop-filter:none;
  }
  nav.is-open .n-links a{
    color:var(--charcoal,#4a3638);opacity:.85;
    font-size:1.05rem;letter-spacing:.2em;
  }
  nav.is-open .n-cta{
    display:inline-flex;
    position:static;left:auto;bottom:auto;transform:none;
    margin-top:1.5rem;
    padding:.95rem 2.4rem;
    font-size:.78rem;letter-spacing:.2em;
  }
}


/* ============================================================
   折り返し最適化 — 日本語の中途半端な改行防止
   ============================================================ */
@media (max-width: 540px){
  /* 日本語の見出し・本文を文節区切りで折り返し（中途半端な改行を防ぐ） */
  h1, h2, h3, .feat-card-name, .sub-card-name, .c-title,
  .hero-h1, .hero-h2, .hero-catch, .hero-h, .hero-sub,
  .feat-card-desc, .sub-card-desc, .c-desc,
  .faq-q-text, .faq-a, .faq-step-title,
  .news-card-title, .rv-card-quote,
  .ms-row-body h3, .bd-h3, .bl-text h3,
  .br-kana, .br-body, .pre-item-text, .notes-item-text,
  .ship-body, .box-body, .om-body, .om-h2,
  .band-h2, .pre-h2{
    word-break: auto-phrase;
    overflow-wrap: anywhere;
    line-break: strict;
  }
}