/* =========================================================
   つきじ治作 — omotenashi ページ固有スタイル（抽出元: omotenashi/index.html の <style>）
   body名前空間: page-omotenashi / url(): css/pages/基準 ../../images/
   ========================================================= */

/* =========================================================
   Occasions / Business — page-scoped styles
   Inherits tokens and global components from ../css/style.css
   ========================================================= */

/* page breathing-room under fixed header */
.op-main{padding-top:120px;}

/* ---------- Page hero (category banner) ---------- */
.op-hero{
  position:relative;
  min-height:clamp(420px, 72vh, 720px);
  display:flex;align-items:flex-end;
  overflow:hidden;
  isolation:isolate;
}
.op-hero__media{
  position:absolute;inset:0;z-index:-2;
  background:
    linear-gradient(180deg, rgba(11,22,32,.45) 0%, rgba(11,22,32,.82) 100%),
    url('../../images/Img26090.jpg') center/cover no-repeat;
  transform:scale(1.04);
  animation:opHeroBreath 14s ease-in-out infinite alternate;
}
@keyframes opHeroBreath{to{transform:scale(1.0)}}
.op-hero__vignette{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(120% 80% at 50% 40%, rgba(0,0,0,0) 40%, rgba(0,0,0,.55) 100%);
}
.op-hero__inner{
  width:100%;
  padding:0 clamp(24px,8vw,120px) clamp(48px,8vh,96px);
  display:flex;align-items:flex-end;justify-content:space-between;gap:40px;
}
.op-hero__crumb{
  font-family:var(--en-serif);
  letter-spacing:.32em;text-transform:uppercase;
  font-size:11px;color:var(--mute);
  display:flex;align-items:center;gap:14px;
  margin-bottom:22px;
}
.op-hero__crumb a{color:var(--mute);opacity:.85;transition:opacity .3s;}
.op-hero__crumb a:hover{opacity:1;color:var(--gold-hi);}
.op-hero__crumb .sep{width:22px;height:.5px;background:var(--mute);opacity:.5;}
.op-hero__title{
  font-family:var(--serif-display);
  font-weight:500;
  font-size:clamp(24px,3vw,40px);
  letter-spacing:.22em;
  line-height:1.5;
  color:var(--mute);
  margin-bottom:10px;
}
.op-hero__sub{
  font-family:var(--en-serif);
  letter-spacing:.36em;text-transform:uppercase;
  font-size:12px;color:var(--gold);
  margin:0 0 22px;
}
.op-hero__lead{
  max-width:32em;
  font-size:14px;line-height:2;letter-spacing:.14em;
  color:rgba(232,226,212,.88);
}

.op-hero__kanji{
  flex-shrink:0;
  writing-mode:vertical-rl;
  font-family:var(--serif-display);
  font-weight:700;
  font-size:clamp(72px,9vw,140px);
  letter-spacing:.1em;
  line-height:1;
  color:var(--mute);
  text-shadow:0 6px 30px rgba(0,0,0,.55);
  position:relative;
  padding-left:28px;
}
.op-hero__kanji::before{
  content:"";position:absolute;left:0;top:6px;bottom:6px;width:.5px;background:var(--gold);opacity:.5;
}
.op-hero__kanji .tag{
  display:block;
  font-family:var(--serif);
  font-weight:400;
  font-size:14px;letter-spacing:.3em;
  color:var(--gold);
  margin-top:20px;
}

/* ---------- Intro block ---------- */
.op-intro{padding:clamp(80px,10vh,140px) 0 0;}
.op-intro__inner{max-width:980px;margin:0 auto;text-align:center;}
.op-intro__en{font-family:var(--en-serif);letter-spacing:.32em;font-size:11px;color:var(--gold);text-transform:uppercase;}
.op-intro__h{
  font-family:var(--serif-display);
  font-weight:500;
  font-size:clamp(22px,2.4vw,30px);
  letter-spacing:.22em;
  line-height:1.7;
  margin-top:18px;
}
.op-intro__body{
  margin-top:28px;
  font-size:14px;line-height:2;letter-spacing:.12em;
  color:rgba(232,226,212,.85);
  max-width:40em;margin-left:auto;margin-right:auto;
}
.op-intro__rule{
  width:1px;height:56px;background:var(--gold);opacity:.6;margin:40px auto 0;
}

/* ---------- Concerns strip (安心材料) ---------- */







/* ---------- Scene index / anchor nav ---------- */






/* 3-col layout borders */














/* ---------- Scene section (full-bleed image + overlaid heading) ---------- */
.scenes{padding:clamp(48px,6vh,80px) 0 0;}




/* Full-bleed media wrapper: overflow visible so the heading can bleed below */

/* Inner clip — keeps the img rectangle cropped and scrimmed */


.scene.is-in .scene__media-clip img{transform:scale(1);}
/* Subtle scrim fading in at the bottom so the half-overlapped title reads */


/* Main JP heading — straddles the image bottom edge, ~50% overlap.
   Horizontal position is aligned to the content column (same max-width
   + padding as .scene__header / .scene__body), not the viewport edge. */



/* Header block below the image — EN gold + sub copy */







/* Running number, now a quiet caption above the EN kicker */


/* Body content sits under the image in a contained column */












/* ---------- Scene plans (3-col plan cards + 2-col options/consult) ---------- */






/* 3-col plan cards */











.plan-card__price .num{
  font-family:var(--serif);font-weight:500;font-size:19px;letter-spacing:.04em;color:var(--gold-hi);
}
.plan-card__price .unit{
  font-family:var(--serif);font-weight:400;
  font-size:11px;letter-spacing:.08em;color:rgba(232,226,212,.65);
}

/* 2-col: options + consult */












.scene__plans-consult-btn .ico{
  display:inline-flex;color:var(--gold);
  transition:color .4s var(--ease);
}


.scene__plans-consult-btn:hover .ico{color:var(--gold-hi);}


/* ---------- Scene pricing simulation (inline ledger above CTA) ---------- */







.scene__sim-ledger .it{
  font-size:13px;letter-spacing:.1em;color:var(--mute);
}
.scene__sim-ledger .it .note{
  display:block;
  font-family:var(--en-body);font-style:italic;
  font-size:11px;letter-spacing:.04em;color:rgba(232,226,212,.5);
  margin-top:2px;
}
.scene__sim-ledger .pr{
  font-family:var(--serif);
  font-size:13px;letter-spacing:.04em;color:var(--gold-hi);
  white-space:nowrap;
}

.scene__sim-total .lab{
  font-family:var(--serif-display);font-weight:500;
  font-size:14px;letter-spacing:.22em;color:var(--mute);
}
.scene__sim-total .amt{
  font-family:var(--serif);font-weight:500;
  font-size:19px;letter-spacing:.04em;color:var(--gold-hi);
}
.scene__sim-total .amt .unit{
  font-size:11px;color:rgba(216,184,122,.75);margin-left:6px;letter-spacing:.08em;
}




.scene__sim-opt-list .pr{color:var(--gold-hi);font-size:12.5px;white-space:nowrap;}


/* 3-CTA bar per scene — unified stage-style link button.
   Standalone 1-column section sitting centered under scene__sim. */



.scene__cta a .ico{
  display:inline-flex;color:var(--gold);
  transition:color .4s var(--ease);
}
.scene__cta a:hover .ico{color:var(--gold-hi);}
.scene__cta a .lab{display:inline-flex;flex-direction:column;align-items:flex-start;line-height:1.35;}
.scene__cta a .lab .sub{
  font-family:var(--en-body);font-style:italic;
  font-size:10px;letter-spacing:.12em;color:rgba(216,184,122,.7);
  margin-top:2px;
  transition:color .4s var(--ease);
}
.scene__cta a:hover .lab .sub{color:var(--gold-hi);}
/* Leftmost scene-guide CTA: gold-tinted, acts as the topic gateway */

.scene__cta a.scene__cta--primary .ico{color:var(--gold-hi);}

/* trailing arrow element, drawn in CSS so HTML stays untouched */


/* neutralize the previously-filled primary variant */


/* ---------- Bottom CTA band ---------- */







.op-foot-cta__bar .ico{
  color:var(--gold);
  display:inline-flex;align-items:center;justify-content:center;
  line-height:0;
}
.op-foot-cta__bar .ico svg{display:block;}
.op-foot-cta__bar a:hover .ico{color:var(--ink);}

/* ---------- Back to category ---------- */





/* ---------- Reveal per scene ---------- */

.scene.is-in{opacity:1;transform:translateY(0);}

/* ---------- Business plans collection ---------- */






















.op-plan__price .num{
  font-size:15px;letter-spacing:.04em;
}
.op-plan__price .unit{
  font-size:11px;color:rgba(216,184,122,.75);
  margin-left:6px;letter-spacing:.06em;
}





/* ---------- Responsive ---------- */
@media (max-width:1080px){
  
  /* 2-col: reset 3-col rules, then apply 2-col */
  
  
  
  
  
  
  
  
}
@media (max-width:900px){
  
  
  
  
  
  .op-hero__inner{flex-direction:column;align-items:flex-start;gap:28px;}
  .op-hero__kanji{padding-left:0;padding-top:24px;writing-mode:horizontal-tb;font-size:clamp(56px,10vw,96px);}
  .op-hero__kanji::before{left:0;top:0;right:0;bottom:auto;height:.5px;width:60px;}
  .op-hero__kanji .tag{margin-top:14px;font-size:12px;}
}
@media (max-width:767px){
  .op-main{padding-top:88px;}
  .op-hero{min-height:clamp(360px,60vh,520px);}
  .op-hero__inner{padding:0 24px clamp(40px,6vh,64px);}
  .op-hero__title{font-size:clamp(20px,5vw,26px);letter-spacing:.2em;}
  .op-hero__lead{font-size:13px;line-height:1.95;letter-spacing:.1em;}
  
  
  /* 1-col: all vertical dividers removed, every item beyond the first gets a top rule */
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  /* mobile: all scenes anchor left for a consistent rhythm */
  
  
  
  
  
  
  
  
  
  
  
  /* very narrow screens: allow wrap so nowrap never causes horizontal overflow */
  
  
  
  
  
  
  
  
  
  
}
@media (max-width:480px){
  .op-hero__title{font-size:22px;line-height:1.6;}
  .op-intro__h{font-size:18px;letter-spacing:.18em;}
  
  
}



/* =========================================================
   OMOTENASHI PLANNER — Asymmetric layout
   inspired by nakamura-inc.jp — off-grid composition,
   vertical offset, floating text in negative space
   ========================================================= */

/* Canvas base (ink-light variant mixed with dark) */
.pla-body{background:var(--ink);color:var(--mute);}

/* Ambient outer grid: 24 columns for fine-grained offset control */
.pla-section{
  position:relative;
  padding:clamp(140px,18vh,260px) 0;
  overflow:hidden;
}
.pla-grid{
  display:grid;
  grid-template-columns:repeat(24, 1fr);
  column-gap:clamp(8px,1vw,16px);
  max-width:1600px;
  margin:0 auto;
  padding:0 clamp(24px,5vw,72px);
  position:relative;
}

/* ============ HERO — vertical-writing over image ============ */
/* Image bleeds 62% left. On the right, a large 仕立 backdrop sits flush
   to the edge; the Japanese title is in vertical writing just beside it,
   and the lead text runs vertically to the left of the title.
   Breadcrumb floats at the top-right. All English copy removed. */
.pla-hero{
  position:relative;
  min-height:min(100vh,900px);
  padding:0;
  overflow:hidden;
  isolation:isolate;
  background:transparent;
}
.pla-hero__media{
  position:absolute;
  top:0;left:0;
  width:62%;height:100%;
  background:url('../../images/omotenashi/omotenashi_hero.jpg') center/cover no-repeat;
  filter:saturate(.85) brightness(.78);
  z-index:0;
}
.pla-hero__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(120deg, rgba(11,22,32,.45) 0%, rgba(11,22,32,0) 45%, rgba(11,22,32,.7) 100%);
}

/* breadcrumb — top-right */
.pla-hero__crumb{
  position:absolute;
  top:clamp(24px,3.6vh,48px);
  right:clamp(24px,4vw,64px);
  z-index:4;
  display:flex;align-items:center;gap:12px;
  font-family:var(--serif);
  font-size:11px;letter-spacing:.24em;
  color:rgba(232,226,212,.72);
  margin:0;
}
.pla-hero__crumb a{color:rgba(232,226,212,.72);transition:color .3s ease;}
.pla-hero__crumb a:hover{color:var(--gold-hi);}
.pla-hero__crumb .sep{width:16px;height:.5px;background:rgba(232,226,212,.35);}
.pla-hero__crumb .cur{color:var(--gold-hi);}

/* giant 仕立 backdrop character — still pinned to the right edge */
.pla-hero__stamp{
  position:absolute;
  top:clamp(140px,22vh,240px);
  right:clamp(40px,5vw,88px);
  z-index:1;
  writing-mode:vertical-rl;
  font-family:var(--serif-display);
  font-weight:600;
  font-size:clamp(80px,12vw,180px);
  letter-spacing:.1em;
  line-height:.95;
  color:rgba(184,147,90,.22);
  pointer-events:none;
  user-select:none;
}

/* type column container — holds lead (left) + title (right),
   sits just to the left of the 仕立 stamp */
.pla-hero__type{
  position:absolute;
  top:clamp(120px,18vh,220px);
  bottom:clamp(80px,12vh,160px);
  right:clamp(200px, 20vw, 320px);
  z-index:3;
  display:flex;flex-direction:row;
  align-items:flex-start;
  gap:clamp(28px,3.2vw,56px);
  pointer-events:none;
}

/* vertical title — 治作の『おもてなし』 — visually to the right */
.pla-hero__title{
  order:2;
  writing-mode:vertical-rl;
  font-family:var(--serif-display);
  font-weight:500;
  font-size:clamp(24px,3vw,38px);
  line-height:1.9;
  letter-spacing:.22em;
  color:var(--mute);
  margin:0;
}

/* vertical lead — flows as one-or-two columns to the left of title */
.pla-hero__lead{
  order:1;
  writing-mode:vertical-rl;
  font-family:var(--serif);
  font-size:clamp(14px, 1.1vw, 16px);
  line-height:2.2;
  letter-spacing:.14em;
  color:rgba(232,226,212,.82);
  max-height:100%;
  margin:0;padding:0;border:0;
}

@media (max-width:900px){
  .pla-hero{min-height:auto;}
  .pla-hero__media{position:relative;width:100%;height:56vh;}
  .pla-hero__stamp{display:none;}
  .pla-hero__crumb{
    position:relative;top:auto;right:auto;
    padding:20px 20px 0;justify-content:flex-end;
  }
  .pla-hero__type{
    position:relative;top:auto;bottom:auto;right:auto;
    flex-direction:column-reverse;
    padding:clamp(28px,5vh,56px) 20px clamp(48px,8vh,88px);
    gap:clamp(20px,3vh,32px);
  }
  .pla-hero__title{
    writing-mode:horizontal-tb;
    font-size:clamp(22px,5vw,30px);letter-spacing:.16em;line-height:1.7;
  }
  .pla-hero__lead{
    writing-mode:horizontal-tb;
    font-size:14.5px;letter-spacing:.08em;line-height:2.0;
    max-height:none;
  }
}

/* ============ INTRO — off-centered vertical label + wide body ============ */
.pla-intro{background:transparent;}
.pla-intro .pla-intro__label{
  grid-column:2 / span 4;
  writing-mode:vertical-rl;
  font-family:var(--serif-display);
  font-weight:500;
  font-size:clamp(20px,2.2vw,28px);
  letter-spacing:.28em;
  line-height:1.8;
  color:var(--mute);
  padding-top:20px;
  border-top:.5px solid var(--gold);
  height:fit-content;
  justify-self:start;
}
.pla-intro .pla-intro__label em{
  font-style:normal;
  color:var(--gold-hi);
}
.pla-intro .pla-intro__body{
  grid-column:10 / span 12;
  max-width:44em;
  padding-top:80px;
}
.pla-intro .pla-intro__eyebrow{
  font-family:var(--en-serif);
  font-size:11px;letter-spacing:.42em;text-transform:uppercase;
  color:var(--gold);
  margin-bottom:28px;
}
.pla-intro .pla-intro__lead{
  font-family:var(--serif-display);
  font-weight:500;
  font-size:clamp(20px,2vw,26px);
  letter-spacing:.16em;
  line-height:2;
  color:var(--mute);
  margin-bottom:40px;
}
.pla-intro .pla-intro__text{
  font-size:14px;line-height:2.1;letter-spacing:.1em;
  color:rgba(232,226,212,.82);
}
.pla-intro .pla-intro__text p + p{margin-top:24px;}
@media (max-width:900px){
  .pla-intro .pla-intro__label{writing-mode:horizontal-tb;grid-column:1 / -1;border:none;padding:0;margin:0 0 24px 0;}
  .pla-intro .pla-intro__body{grid-column:1 / -1;padding-top:16px;}
}

/* ============ PILLARS — three rows, alternating L/R with vertical offset ============ */
.pla-pillars{background:transparent;}
.pla-pillars__head{
  grid-column:3 / span 10;
  margin-bottom:clamp(96px,12vh,160px);
}
.pla-pillars__head .eyebrow{
  font-family:var(--en-serif);
  font-size:11px;letter-spacing:.4em;text-transform:uppercase;
  color:var(--gold);
  margin-bottom:24px;
}
.pla-pillars__head h2{
  font-family:var(--serif-display);
  font-weight:500;
  font-size:clamp(26px,3.4vw,46px);
  letter-spacing:.18em;
  line-height:1.55;
  color:var(--mute);
}
.pla-pillars__head h2 em{
  font-style:normal;
  display:block;
  font-family:var(--en-serif);
  font-size:12px;letter-spacing:.44em;text-transform:uppercase;
  color:var(--gold);
  margin-top:14px;
  font-weight:400;
}

/* Each pillar row is its own grid layout that overrides positions */
.pla-pillar-row{
  display:grid;
  grid-template-columns:repeat(24, 1fr);
  column-gap:clamp(8px,1vw,16px);
  align-items:start;
  position:relative;
  padding:clamp(60px,10vh,140px) 0;
}
.pla-pillar-row:not(:last-child){
  border-bottom:.5px dotted rgba(184,147,90,.22);
}

/* ROW 01 — image LEFT (cols 1-12), text RIGHT (cols 15-22), text pushed DOWN */
.pla-pillar-row--01 .pla-pillar__visual{
  grid-column:1 / span 13;
  position:relative;
  aspect-ratio:4/3;
  overflow:hidden;
}
.pla-pillar-row--01 .pla-pillar__txt{
  grid-column:15 / span 9;
  padding-top:clamp(80px,14vh,180px);
}
/* ROW 02 — image RIGHT (cols 13-24), text LEFT (cols 3-11), text UP, image bleeds right */
.pla-pillar-row--02 .pla-pillar__visual{
  grid-column:13 / span 12;
  grid-row:1;
  position:relative;
  aspect-ratio:3/4;
  overflow:hidden;
  margin-top:clamp(40px,8vh,120px);
}
.pla-pillar-row--02 .pla-pillar__txt{
  grid-column:3 / span 9;
  grid-row:1;
  padding-top:0;
}
/* ROW 03 — image LEFT, text RIGHT with different offset */
.pla-pillar-row--03 .pla-pillar__visual{
  grid-column:2 / span 11;
  position:relative;
  aspect-ratio:5/4;
  overflow:hidden;
}
.pla-pillar-row--03 .pla-pillar__txt{
  grid-column:14 / span 9;
  padding-top:clamp(40px,8vh,100px);
}

.pla-pillar__visual{
  background:#0b1620;
  border:1px solid rgba(184,147,90,.15);
}
.pla-pillar__visual img{
  width:100%;height:100%;
  object-fit:cover;
  filter:saturate(.85) brightness(.84);
  transition:transform 2.4s var(--bezier-quart);
}
.pla-pillar__visual:hover img{transform:scale(1.04);}
.pla-pillar__no{
  font-family:var(--en-serif);
  font-size:11px;letter-spacing:.42em;text-transform:uppercase;
  color:var(--gold);
  margin-bottom:28px;
  display:flex;align-items:center;gap:16px;
}
.pla-pillar__no::after{
  content:"";flex:1;
  height:.5px;background:var(--gold);opacity:.4;
}
.pla-pillar__title-jp{
  font-family:var(--serif-display);
  font-weight:500;
  font-size:clamp(24px,2.6vw,34px);
  letter-spacing:.18em;
  line-height:1.55;
  color:var(--mute);
  margin-bottom:14px;
}
.pla-pillar__title-en{
  font-family:var(--en-serif);
  font-size:12px;letter-spacing:.38em;text-transform:uppercase;
  color:var(--gold);
  margin-bottom:36px;
}
.pla-pillar__body{
  font-size:14px;line-height:2.1;letter-spacing:.1em;
  color:rgba(232,226,212,.85);
  margin-bottom:32px;
  max-width:32em;
}
.pla-pillar__tags{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:8px;
}
.pla-pillar__tags li{
  font-family:var(--en-body);
  font-size:12px;letter-spacing:.12em;
  color:rgba(216,184,122,.82);
  padding:4px 12px;
  border:.5px solid rgba(184,147,90,.3);
}

@media (max-width:900px){
  .pla-pillar-row > *{grid-column:1 / -1 !important;grid-row:auto !important;padding-top:0 !important;margin-top:0 !important;}
  .pla-pillar-row .pla-pillar__txt{margin-top:36px;}
  .pla-pillars__head{grid-column:1 / -1;}
}

/* ============ PERSONA — diagonal split, image offset ============ */
.pla-persona{background:transparent;}
.pla-persona .pla-persona__media{
  grid-column:14 / span 10;
  position:relative;
  aspect-ratio:3/4;
  overflow:hidden;
}
.pla-persona .pla-persona__media img{
  width:100%;height:100%;object-fit:cover;
  filter:saturate(.88) brightness(.86);
  transition:transform 2.4s var(--bezier-quart);
}
.pla-persona .pla-persona__text{
  grid-column:2 / span 10;
  grid-row:1;
  padding-top:clamp(48px,8vh,120px);
}
.pla-persona__eyebrow{
  font-family:var(--en-serif);
  font-size:11px;letter-spacing:.42em;text-transform:uppercase;
  color:var(--gold);
  margin-bottom:24px;
}
.pla-persona__title{
  font-family:var(--serif-display);
  font-weight:500;
  font-size:clamp(26px,3vw,40px);
  letter-spacing:.18em;
  line-height:1.55;
  color:var(--mute);
  margin-bottom:40px;
}
.pla-persona__title em{
  font-style:normal;display:block;
  font-family:var(--en-serif);
  font-size:11px;letter-spacing:.4em;text-transform:uppercase;
  color:var(--gold);
  margin-bottom:14px;
  font-weight:400;
}
.pla-persona__body{
  font-size:14px;line-height:2.1;letter-spacing:.1em;
  color:rgba(232,226,212,.82);
  margin-bottom:14px;
  max-width:32em;
}
.pla-persona__meta{
  margin-top:48px;
  padding-top:32px;
  border-top:.5px dotted rgba(184,147,90,.32);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px 40px;
  max-width:32em;
}
.pla-persona__meta dt{
  font-family:var(--en-serif);
  font-size:11px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--gold);
  margin-bottom:8px;
}
.pla-persona__meta dd{
  font-family:var(--serif);
  font-size:13px;line-height:1.85;letter-spacing:.08em;
  color:var(--mute);
  margin:0;
}
@media (max-width:900px){
  .pla-persona .pla-persona__media,
  .pla-persona .pla-persona__text{grid-column:1 / -1;grid-row:auto;padding-top:0;}
  .pla-persona .pla-persona__text{margin-top:40px;}
}

/* ============ FLOW — vertical timeline on far-left column, content offset right ============ */
.pla-flow{background:transparent;}
.pla-flow__head{
  grid-column:3 / span 10;
  margin-bottom:clamp(64px,8vh,120px);
}
.pla-flow__head .eyebrow{
  font-family:var(--en-serif);
  font-size:11px;letter-spacing:.4em;text-transform:uppercase;
  color:var(--gold);
  margin-bottom:24px;
}
.pla-flow__head h2{
  font-family:var(--serif-display);
  font-weight:500;
  font-size:clamp(24px,2.8vw,38px);
  letter-spacing:.18em;
  line-height:1.6;
  color:var(--mute);
}

.pla-flow__timeline{
  grid-column:1 / span 24;
  display:grid;
  grid-template-columns:repeat(24, 1fr);
  column-gap:clamp(8px,1vw,16px);
  position:relative;
}
/* vertical rule spanning all items */
.pla-flow__timeline::before{
  content:"";
  position:absolute;
  left:calc((100% / 24) * 4.2);
  top:0;bottom:0;
  width:.5px;
  background:linear-gradient(180deg, var(--gold) 0%, rgba(184,147,90,.08) 100%);
}
.pla-flow__step{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:repeat(24, 1fr);
  column-gap:clamp(8px,1vw,16px);
  padding:clamp(40px,5vh,64px) 0;
  position:relative;
}
.pla-flow__step-no{
  grid-column:2 / span 3;
  font-family:var(--en-serif);
  color:var(--gold);
}
.pla-flow__step-no .no-big{
  display:block;
  font-family:var(--serif-display);
  font-weight:500;
  font-size:clamp(38px,4.4vw,64px);
  letter-spacing:.06em;
  color:var(--gold-hi);
  line-height:1;
  margin-bottom:10px;
}
.pla-flow__step-no .no-en{
  font-size:11px;letter-spacing:.4em;text-transform:uppercase;
}
.pla-flow__step-dot{
  position:absolute;
  left:calc((100% / 24) * 4.2);
  top:calc(clamp(40px,5vh,64px) + 6px);
  transform:translateX(-50%);
  width:11px;height:11px;
  background:#0a131c;
  border:1px solid var(--gold);
  border-radius:50%;
  z-index:2;
}
.pla-flow__step-content{
  grid-column:7 / span 14;
  padding-left:24px;
}
.pla-flow__step-content h3{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(17px,1.6vw,21px);
  letter-spacing:.14em;line-height:1.65;
  color:var(--mute);
  margin-bottom:18px;
}
.pla-flow__step-content p{
  font-size:13.5px;line-height:2.05;letter-spacing:.08em;
  color:rgba(232,226,212,.82);
  max-width:36em;
  margin-bottom:14px;
}
.pla-flow__role{
  display:inline-block;
  margin-top:10px;
  font-family:var(--en-serif);
  font-size:11px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--gold);
  padding:3px 10px;
  border:.5px solid rgba(184,147,90,.3);
}
/* alternate offset — every even step gets slight right-shift */
.pla-flow__step:nth-child(even) .pla-flow__step-content{grid-column:8 / span 14;}
@media (max-width:900px){
  .pla-flow__timeline::before{left:18px;}
  .pla-flow__step-dot{left:18px;top:48px;}
  .pla-flow__step-no{grid-column:1 / -1;padding-left:44px;margin-bottom:14px;}
  .pla-flow__step-content{grid-column:1 / -1 !important;padding-left:44px;}
}

/* ============ SCENARIOS — masonry-ish asymmetric grid ============ */
.pla-scen{background:transparent;}
.pla-scen__head{
  grid-column:3 / span 10;
  margin-bottom:clamp(80px,10vh,140px);
}
.pla-scen__head .eyebrow{
  font-family:var(--en-serif);
  font-size:11px;letter-spacing:.4em;text-transform:uppercase;
  color:var(--gold);
  margin-bottom:24px;
}
.pla-scen__head h2{
  font-family:var(--serif-display);
  font-weight:500;
  font-size:clamp(24px,2.8vw,38px);
  letter-spacing:.18em;
  line-height:1.6;
  color:var(--mute);
}

/* 6 scenarios in deliberately non-uniform grid */
.pla-scen__items{
  grid-column:1 / span 24;
  display:grid;
  grid-template-columns:repeat(24, 1fr);
  grid-auto-rows:auto;
  column-gap:clamp(8px,1vw,16px);
  row-gap:clamp(40px,5vh,72px);
}
.pla-scen__card{
  padding:clamp(36px,3vw,48px) clamp(28px,2.5vw,40px);
  background:rgba(255,255,255,.018);
  border:1px solid rgba(184,147,90,.18);
  transition:border-color .6s var(--ease), transform .8s var(--bezier-quart);
  position:relative;
}
.pla-scen__card:hover{border-color:rgba(184,147,90,.42);transform:translateY(-4px);}
.pla-scen__card .cat{
  font-family:var(--en-serif);
  font-size:11px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--gold);
  margin-bottom:16px;
}
.pla-scen__card .title{
  font-family:var(--serif);
  font-weight:500;
  font-size:17px;letter-spacing:.14em;line-height:1.7;
  color:var(--mute);
  margin-bottom:18px;
  padding-bottom:18px;
  border-bottom:.5px solid rgba(184,147,90,.25);
}
.pla-scen__card .req{
  font-size:12.5px;line-height:1.9;letter-spacing:.06em;
  color:rgba(232,226,212,.72);
  margin-bottom:14px;
  font-style:italic;
}
.pla-scen__card .req::before{content:"— ご要望: ";color:var(--gold);font-style:normal;}
.pla-scen__card .body{
  font-size:13.5px;line-height:2;letter-spacing:.08em;
  color:rgba(232,226,212,.86);
}
.pla-scen__card .tags{
  list-style:none;margin:18px 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:6px;
}
.pla-scen__card .tags li{
  font-family:var(--en-body);
  font-size:11px;letter-spacing:.12em;
  color:rgba(216,184,122,.82);
  padding:3px 9px;
  border:.5px solid rgba(184,147,90,.25);
}
/* Asymmetric grid placement — six cards, varied widths and positions */
.pla-scen__card:nth-child(1){grid-column:2 / span 9;}
.pla-scen__card:nth-child(2){grid-column:13 / span 10;margin-top:clamp(40px,6vh,80px);}
.pla-scen__card:nth-child(3){grid-column:4 / span 8;}
.pla-scen__card:nth-child(4){grid-column:14 / span 9;margin-top:-24px;}
.pla-scen__card:nth-child(5){grid-column:3 / span 10;margin-top:24px;}
.pla-scen__card:nth-child(6){grid-column:15 / span 8;margin-top:clamp(40px,6vh,80px);}
@media (max-width:900px){
  .pla-scen__card:nth-child(n){grid-column:1 / -1;margin-top:0;}
  .pla-scen__head{grid-column:1 / -1;}
}

/* ============ PROMISE — number column narrow left, content wide right ============ */
.pla-promise{background:transparent;}
.pla-promise__head{
  grid-column:3 / span 10;
  margin-bottom:clamp(72px,9vh,130px);
}
.pla-promise__head .eyebrow{
  font-family:var(--en-serif);
  font-size:11px;letter-spacing:.4em;text-transform:uppercase;
  color:var(--gold);
  margin-bottom:24px;
}
.pla-promise__head h2{
  font-family:var(--serif-display);
  font-weight:500;
  font-size:clamp(24px,2.8vw,38px);
  letter-spacing:.18em;
  line-height:1.6;
  color:var(--mute);
}
.pla-promise__list{
  grid-column:1 / span 24;
  list-style:none;margin:0;padding:0;
  display:grid;
  grid-template-columns:repeat(24, 1fr);
  column-gap:clamp(8px,1vw,16px);
  row-gap:0;
}
.pla-promise__item{
  grid-column:3 / span 20;
  display:grid;
  grid-template-columns:100px 1fr;
  gap:clamp(24px,4vw,56px);
  align-items:baseline;
  padding:28px 0;
  border-top:.5px dotted rgba(184,147,90,.25);
}
.pla-promise__item:last-child{border-bottom:.5px dotted rgba(184,147,90,.25);}
/* alternate items shift right for asymmetry */
.pla-promise__item:nth-child(even){grid-column:5 / span 19;}
.pla-promise__no{
  font-family:var(--en-serif);
  font-size:clamp(22px,2.4vw,30px);letter-spacing:.06em;
  color:var(--gold-hi);
  font-weight:500;
  line-height:1;
}
.pla-promise__body h3{
  font-family:var(--serif);
  font-weight:500;
  font-size:16px;letter-spacing:.14em;line-height:1.7;
  color:var(--mute);
  margin-bottom:10px;
}
.pla-promise__body p{
  font-size:13px;line-height:2;letter-spacing:.08em;
  color:rgba(232,226,212,.8);
  max-width:42em;
}
@media (max-width:900px){
  .pla-promise__head,
  .pla-promise__item,
  .pla-promise__item:nth-child(even){grid-column:1 / -1;}
  .pla-promise__item{grid-template-columns:60px 1fr;gap:20px;padding:24px 0;}
}

/* ============ FOR-WHO — three tall narrow columns with large negative space between ============ */
.pla-who{background:transparent;}
.pla-who__head{
  grid-column:3 / span 10;
  margin-bottom:clamp(64px,8vh,110px);
}
.pla-who__head h2{
  font-family:var(--serif-display);
  font-weight:500;
  font-size:clamp(22px,2.6vw,32px);
  letter-spacing:.18em;line-height:1.65;color:var(--mute);
}
.pla-who__items{
  grid-column:1 / span 24;
  display:grid;
  grid-template-columns:repeat(24, 1fr);
  column-gap:clamp(8px,1vw,16px);
  row-gap:24px;
  border-top:.5px dotted rgba(184,147,90,.28);
  border-bottom:.5px dotted rgba(184,147,90,.28);
}
.pla-who__item{
  padding:clamp(48px,6vh,80px) clamp(20px,2.5vw,40px);
  text-align:left;
  position:relative;
}
.pla-who__item:nth-child(1){grid-column:2 / span 7;}
.pla-who__item:nth-child(2){grid-column:10 / span 7;border-left:.5px dotted rgba(184,147,90,.28);border-right:.5px dotted rgba(184,147,90,.28);padding-left:clamp(36px,4vw,60px);padding-right:clamp(36px,4vw,60px);}
.pla-who__item:nth-child(3){grid-column:18 / span 6;}
.pla-who__item .en{
  font-family:var(--en-serif);
  font-size:11px;letter-spacing:.4em;text-transform:uppercase;
  color:var(--gold);margin-bottom:18px;
}
.pla-who__item .ja{
  font-family:var(--serif);
  font-weight:400;
  font-size:16px;letter-spacing:.14em;line-height:1.9;
  color:var(--mute);
  margin-bottom:28px;
}
.pla-who__item a{
  font-family:var(--en-serif);
  font-size:11px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--gold-hi);
  display:inline-flex;align-items:center;gap:12px;
  padding-bottom:4px;
  border-bottom:.5px solid var(--gold);
  transition:gap .4s var(--ease);
}
.pla-who__item a:hover{gap:20px;}
@media (max-width:900px){
  .pla-who__head,
  .pla-who__item:nth-child(n){grid-column:1 / -1;border:none !important;padding:32px 0;}
}

/* ============ FAQ — horizontal heading on top, centered accordion list ============ */
.pla-faq{background:transparent;}
.pla-faq__head{
  grid-column:2 / span 22;
  writing-mode:horizontal-tb;
  text-align:center;
  font-family:var(--serif-display);
  font-weight:500;
  font-size:clamp(22px,2.6vw,32px);
  letter-spacing:.22em;line-height:1.6;
  color:var(--mute);
  margin-bottom:clamp(48px,7vh,96px);
  padding:0;border:0;
}
.pla-faq__head em{
  font-style:normal;display:block;
  font-family:var(--en-serif);
  font-size:11px;letter-spacing:.42em;text-transform:uppercase;
  color:var(--gold);margin-bottom:18px;font-weight:400;
}
.pla-faq__list{
  grid-column:4 / span 18;
  max-width:900px;margin:0 auto;width:100%;
}
.pla-faq__item{
  border-bottom:.5px dotted rgba(184,147,90,.28);
}
.pla-faq__item:first-child{border-top:.5px dotted rgba(184,147,90,.28);}
.pla-faq__item summary{
  list-style:none;cursor:pointer;
  padding:26px 56px 26px 36px;
  position:relative;
  font-family:var(--serif);
  font-size:15px;line-height:1.7;letter-spacing:.1em;
  color:var(--mute);
  transition:color .4s var(--ease);
}
.pla-faq__item summary::-webkit-details-marker{display:none;}
.pla-faq__item summary::before{
  content:"Q.";
  position:absolute;left:0;top:26px;
  font-family:var(--en-serif);
  font-size:13px;letter-spacing:.2em;color:var(--gold);
}
.pla-faq__item summary::after{
  content:"";position:absolute;right:8px;top:50%;
  width:14px;height:.5px;background:var(--gold);
  transform:translateY(-50%);transition:transform .4s var(--ease),opacity .3s var(--ease);
}
.pla-faq__item summary:hover{color:var(--gold-hi);}
.pla-faq__item[open] summary::after{transform:translateY(-50%) rotate(90deg);opacity:0;}
.pla-faq__item[open] summary{color:var(--gold-hi);}
.pla-faq__ans{
  padding:0 36px 28px 36px;
  font-size:13.5px;line-height:2;letter-spacing:.08em;
  color:rgba(232,226,212,.82);
  position:relative;
}
.pla-faq__ans::before{
  content:"A.";position:absolute;left:0;top:0;
  font-family:var(--en-serif);font-size:13px;letter-spacing:.2em;color:var(--gold-hi);
}
@media (max-width:900px){
  .pla-faq__head{grid-column:1 / -1;font-size:clamp(20px,5.4vw,26px);margin-bottom:32px;}
  .pla-faq__list{grid-column:1 / -1;max-width:none;}
  .pla-faq__item summary{padding-right:36px;font-size:14px;}
  .pla-faq__ans{padding-right:12px;}
}

/* ============ FINAL CTA — full-bleed image left, text right ============ */
.pla-final{
  padding:0;
  background:transparent;
  position:relative;
  overflow:hidden;
  min-height:min(100vh,720px);
}
.pla-final__media{
  position:absolute;top:0;left:0;
  width:55%;height:100%;
  background:url('../../images/omotenashi/contact.jpg') center/cover no-repeat;
  filter:saturate(.85) brightness(.7);
}
.pla-final__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg, rgba(11,22,32,.2) 0%, rgba(11,22,32,.85) 100%);
}
.pla-final__inner{
  position:relative;z-index:2;
  display:grid;
  grid-template-columns:repeat(24, 1fr);
  column-gap:clamp(8px,1vw,16px);
  max-width:1600px;margin:0 auto;
  padding:clamp(120px,16vh,200px) clamp(24px,5vw,72px);
  min-height:inherit;
}
.pla-final__content{
  grid-column:13 / span 11;
  align-self:center;
}
.pla-final__eyebrow{
  font-family:var(--en-serif);
  font-size:11px;letter-spacing:.42em;text-transform:uppercase;
  color:var(--gold);margin-bottom:28px;
}
.pla-final__title{
  font-family:var(--serif-display);
  font-weight:500;
  font-size:clamp(18px,2.2vw,28px);
  letter-spacing:.18em;line-height:1.7;
  color:var(--mute);
  margin-bottom:32px;
}
.pla-final__lead{
  font-size:14px;line-height:2;letter-spacing:.12em;
  color:rgba(232,226,212,.85);
  margin-bottom:48px;max-width:34em;
}
.pla-final__cta{display:flex;flex-wrap:wrap;gap:16px;}
/* CTA button — matches the top page's .o-card__btn / .btn-reserve treatment:
   underline-only, serif, arrow-line suffix, widens on hover. */
.pla-btn{
  align-self:flex-start;
  display:inline-flex;align-items:center;gap:18px;
  font-family:var(--serif);font-weight:400;
  font-size:13px;letter-spacing:.3em;
  color:var(--mute);background:none;
  padding:0 0 8px;
  border:none;border-bottom:.5px solid rgba(232,226,212,.7);
  text-decoration:none;cursor:pointer;
  transition:letter-spacing .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease);
}
.pla-btn:hover{letter-spacing:.34em;color:var(--gold-hi);border-color:var(--gold-hi);}
.pla-btn:focus-visible{outline:none;color:var(--gold-hi);border-color:var(--gold-hi);}
.pla-btn .arrow{
  display:inline-block;width:22px;height:.5px;background:currentColor;
  transition:width .4s var(--ease);
}
.pla-btn:hover .arrow{width:32px;}
@media (max-width:900px){
  .pla-final__media{width:100%;height:50vh;position:relative;}
  .pla-final__content{grid-column:1 / -1;padding-top:48px;}
}

/* Asymmetric chapter markers between sections */
.pla-chapter-mark{
  position:relative;
  height:0;
}
.pla-chapter-mark::before{
  content:"";
  position:absolute;
  left:clamp(24px,5vw,72px);
  top:0;
  width:1px;height:clamp(64px,8vh,120px);
  background:var(--gold);
  opacity:.45;
}
.pla-chapter-mark::after{
  content:attr(data-mark);
  position:absolute;
  left:clamp(36px,6vw,84px);
  top:clamp(24px,3vh,48px);
  writing-mode:vertical-rl;
  font-family:var(--en-serif);
  font-size:10px;letter-spacing:.5em;text-transform:uppercase;
  color:var(--gold);opacity:.7;
}