/* ==========================================================================
   FIND CAKE — style.css
   Palette: salmon pink x kinari (off-white). Two-tone brand system.
   ========================================================================== */

:root{
  --kinari:        #F7EFE1;   /* base off-white */
  --kinari-deep:   #EFE3CD;   /* deeper ivory for section alternation */
  --paper:         #FFFBF3;   /* near-white paper */
  --salmon:        #EDB5B0;   /* primary salmon pink — soft fills (FV, tints) */
  --salmon-light:  #F3C6B7;   /* soft blush tint */
  --salmon-pale:   #F8DCD2;   /* pale blush background */
  --salmon-deep:   #E58975;   /* accent salmon — buttons, CTAs, emphasis text */
  --ink:           #2C221C;   /* warm near-black for text */
  --ink-soft:      #6E5D53;   /* muted secondary text */
  --line:          rgba(44,34,28,0.12);
  --navy:          #2A3A54;   /* secondary accent — used sparingly alongside salmon */

  --font-serif-jp: "Zen Old Mincho", serif;
  --font-serif-en: "Cormorant Garamond", serif;
  --font-sans:     "Zen Kaku Gothic New", sans-serif;

  --container: 1180px;
  --header-h: 84px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-sans);
  font-weight: 500;
  background: var(--kinari);
  color: var(--ink);
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
a:visited{ color: inherit; }
ul, ol{ list-style: none; margin:0; padding:0; }
h1,h2,h3,h4,p{ margin:0; }
button{ font-family: inherit; cursor:pointer; }

::selection{ background: var(--salmon-deep); color: var(--paper); }

/* ---------- Loader ---------- */
.site-loader{
  position: fixed; inset:0; z-index:9999;
  background: var(--salmon);
  display:flex; align-items:center; justify-content:center;
  transition: transform .9s cubic-bezier(.76,0,.24,1);
}
.site-loader img{ width:70px; height:70px; animation: pulse-heart 2.4s ease-in-out infinite; object-fit: contain;}
.site-loader.is-hidden{ transform: translateY(-100%); pointer-events:none; }
@keyframes pulse-heart{
  0%, 100% { transform: scale(1); opacity:.75; }
  20%      { transform: scale(1.22); opacity:1; }
  40%      { transform: scale(1); opacity:.85; }
  60%      { transform: scale(1.28); opacity:1; }
  75%      { transform: scale(1); opacity:.75; }
}

/* ---------- Scroll progress ---------- */
.scroll-progress{
  position: fixed; top:0; left:0; height:3px; width:0%;
  background: linear-gradient(90deg, var(--salmon), var(--salmon-deep));
  z-index: 2000; transition: width .1s linear;
}

/* ---------- Layout helpers ---------- */
.section{ position:relative; padding: 130px 0; overflow:hidden; }
.section-inner{ max-width: var(--container); margin:0 auto; padding:0 32px; position:relative; z-index:2; }
.tint-blush{ background: var(--salmon-pale); }
.tint-paper{ background: var(--paper); }
.tint-salmon{ background: var(--salmon); }
.tint-navy{ background: var(--navy); }
.only-mobile{ display:none; }
@media (max-width:640px){ .only-mobile{ display:inline; } }

/* SP-only line break: hidden by default, shown as a real <br> only on mobile */
br.spbr{ display:none; }
@media (max-width:880px){ br.spbr{ display:inline; } }

.eyebrow{
  font-family: var(--font-serif-en); font-weight:400; font-style:normal; letter-spacing:.2em;
  font-size: clamp(30px, 4vw, 44px); color: var(--salmon-deep); margin:0 0 8px; text-transform:uppercase;
}
.ja-heading{
  font-family: "Zen Kaku Gothic New", sans-serif; font-weight:400;
  font-size: clamp(15px, 1.5vw, 18px); letter-spacing:.08em; color:var(--ink);
  margin-bottom: 64px;
}
.heading-sub{ display:inline; letter-spacing:.08em; color:inherit; margin-left:.2em; }
#support .eyebrow, #foryou .eyebrow, #plans .eyebrow{ color: var(--navy); }
.section-heading{ text-align:center; }

.body-text p{ margin:0 0 1.4em; color: var(--ink); font-size:14px; letter-spacing:.02em; }
.body-text p:last-child{ margin-bottom:0; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding: 17px 40px; border-radius: 999px; font-size:14px; letter-spacing:.14em;
  border: 1px solid var(--ink); transition: all .45s cubic-bezier(.16,.84,.44,1);
  white-space: nowrap;
}
.btn-primary{ background: var(--salmon-deep); border-color: var(--salmon-deep); color: var(--paper); }
.btn-primary:hover{ filter: brightness(0.94); transform: translateY(-2px); }
.btn-outline{ background:transparent; color:var(--ink); }
.btn-outline:hover{ background: var(--ink); color: var(--paper); transform: translateY(-2px); }

/* ---------- Oval buttons: hand-drawn stadium outline (matches the OUR NAME circles) ---------- */
.oval-btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  transition: filter .3s ease, transform .3s ease, opacity .3s ease;
}
.oval-btn:hover{ opacity:.7; }
.oval-btn > svg{ position:absolute; inset:0; width:100%; height:100%; z-index:0; overflow:visible; }
.oval-btn-label{ position:relative; z-index:1; }
.oval-btn-outline path{ fill:none; stroke: currentColor; stroke-width:.8; vector-effect: non-scaling-stroke; }
.oval-btn-filled path{ fill: var(--salmon-deep); stroke: rgba(255,255,255,.6); stroke-width:1.3; vector-effect: non-scaling-stroke; }
.oval-btn-line{ color:#fff; opacity:.88; }
.oval-btn-line path{ fill: #2ba25c; stroke:none; }
.oval-btn-line .oval-btn-label{ display:inline-flex; align-items:center; gap:9px; }
.oval-btn-line .oval-btn-label img{ width:24px; height:auto; }

/* ---------- Reveal on scroll ---------- */
.reveal{ opacity:0; transform: translateY(46px); transition: opacity 1s cubic-bezier(.16,.84,.44,1), transform 1s cubic-bezier(.16,.84,.44,1); transition-delay: calc(var(--i,0) * 90ms); }
.reveal.is-visible{ opacity:1; transform:none; }
.reveal-pop{ transform: translateY(30px) scale(.94); }
.reveal-pop.is-visible{ transform:none; }
.reveal-right{ opacity:0; transform: translateX(70px); transition: opacity 1s cubic-bezier(.16,.84,.44,1), transform 1s cubic-bezier(.16,.84,.44,1); transition-delay: calc(var(--i,0) * 90ms); }
.reveal-right.is-visible{ opacity:1; transform:none; }
.img-reveal{ overflow:hidden; }
.img-reveal img{ transform: scale(1.16); transition: transform 1.4s cubic-bezier(.16,.84,.44,1); }
.img-reveal.is-visible img{ transform: scale(1); }

/* ---------- Illustration accents (small, never used as backgrounds) ---------- */
.illust{
  position:absolute; z-index:1; pointer-events:none;
  opacity:0; transform: translateY(18px) rotate(var(--r,0deg));
  transition: opacity 1.1s ease, transform 1.1s cubic-bezier(.16,.84,.44,1);
}
.illust.is-visible{ opacity:.92; transform: translateY(0) rotate(var(--r,0deg)); }
.illust-sm{ width:56px; height:auto; }
.illust-md{ width:84px; height:auto; }
.illust-lg{ width:120px; height:auto; }
.illust-float{ animation: illust-float 6s ease-in-out infinite; }
@media (max-width: 880px){
  .support-illust-tl{ top:1% !important; }
}
@keyframes illust-float{ 0%,100%{ transform: translateY(0) rotate(var(--r,0deg)); } 50%{ transform: translateY(-12px) rotate(var(--r,0deg)); } }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{
  position: fixed; top:0; left:0; width:100%; z-index:1200;
  height: var(--header-h);
  display:flex; align-items:center;
  background: var(--kinari);
  transition: background .5s ease;
  font-family: var(--font-serif-en);
  color: var(--ink);
}
.header-inner{
  max-width: var(--container); width:100%; margin:0 auto; padding:0 32px;
  display:grid; grid-template-columns: 1fr auto 1fr; align-items:center;
}

/* left: small cake icon, doubles as home link */
.header-icon{ justify-self:start; display:flex; }
.header-icon img{ height:58px; width:auto; }
.header-icon .icon-black{ display:block; }
.header-icon .icon-white{ display:none; }

/* center: logo (default) or the compact inline nav (hero only) */
.header-center{ position:relative; display:flex; align-items:center; justify-content:center; }
.header-logo img{ height:52px; width:auto; }
.header-logo .logo-black{ display:block; }
.header-logo .logo-white{ display:none; }

.header-inline-nav{ display:none; }
.header-inline-nav ul{ display:flex; align-items:center; gap:16px; white-space:nowrap; }
.header-inline-nav a{ font-size:10.5px; letter-spacing:.1em; color:inherit; opacity:.9; }
.header-inline-nav a:hover{ opacity:1; }

.site-header.show-inline-nav .header-logo{ display:none; }
.site-header.show-inline-nav .header-inline-nav{ display:flex; }

/* right: hamburger — two asymmetric lines, opens the full-screen nav at any size */
.menu-toggle{
  justify-self:end; background:none; border:none; width:30px; height:16px; position:relative; z-index:1100;
}
.menu-toggle span{ position:absolute; left:0; height:1.5px; background:var(--navy); transition: all .35s ease; }
.menu-toggle span:nth-child(1){ top:0; width:100%; }
.menu-toggle span:nth-child(2){ bottom:0; width:62%; }

.nav-insta{ display:flex; align-items:center; color: inherit; transition: color .3s ease, opacity .3s ease; opacity:.92; }
.nav-insta:hover{ opacity:1; }
.nav-insta svg{ width:18px; height:18px; }
.nav-insta img{ width:22px; height:auto; display:block; }

/* header: dark state — shown while the fixed header overlaps a dark photo section
   (story section, contact section, or the fully-expanded concept photo) */
.site-header.is-dark{ background: transparent; color: var(--paper); }
.site-header.is-dark .header-icon .icon-black{ display:none; }
.site-header.is-dark .header-icon .icon-white{ display:block; }
.site-header.is-dark .header-logo .logo-black{ display:none; }
.site-header.is-dark .header-logo .logo-white{ display:block; }
.site-header.is-dark .menu-toggle span{ background: var(--navy); }

/* full-screen nav overlay — triggered by the hamburger at every screen size */
.main-nav{
  position:fixed; inset:0; width:100%; height:100vh;
  background: var(--navy);
  display:flex; align-items:center; justify-content:center;
  transform: translateX(100%); transition: transform .55s cubic-bezier(.16,.84,.44,1);
  z-index:1050;
  font-family: var(--font-serif-en);
}
.main-nav ul{ display:flex; flex-direction:column; align-items:center; gap:16px; }
.main-nav a{ color: var(--salmon-deep); font-size:16px; letter-spacing:.16em; transition: opacity .3s; opacity:.92; }
.main-nav a:hover{ opacity:1; }
.main-nav .nav-insta{ color: var(--salmon-deep); }
.main-nav-footer{ position:absolute; left:50%; bottom:24px; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:14px; }
.main-nav-social{ display:flex; gap:22px; }
.main-nav-legal{ display:flex; flex-wrap:wrap; justify-content:center; gap:16px; max-width:80vw; }
.main-nav-legal a{ font-size:10px; letter-spacing:.06em; color: rgba(243,198,183,.75); transition:opacity .3s; }
.main-nav-legal a:hover{ opacity:1; }
.main-nav-ibj-logo{ width:179px; max-width:70vw; height:auto; }
body.nav-open .main-nav{ transform: translateX(0); }
body.nav-open .menu-toggle span{ background: var(--navy) !important; }
body.nav-open .menu-toggle span:nth-child(1){ transform: translateY(6.7px) rotate(45deg); width:100%; }
body.nav-open .menu-toggle span:nth-child(2){ transform: translateY(-6.7px) rotate(-45deg); width:100%; }
body.nav-open{ overflow:hidden; }

@media (max-width: 880px){
  /* Mobile always keeps icon / logo / hamburger — the compact inline text
     nav that swaps in for the logo during the hero on desktop is too
     cramped to read at this width, so it stays off and the logo stays put. */
  .site-header.show-inline-nav .header-logo{ display:flex; }
  .site-header.show-inline-nav .header-inline-nav{ display:none; }
}

@media (max-width: 480px){
  .header-icon img{ height:34px; }
  .header-logo img{ height:40px; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position:relative; height:100vh; min-height:560px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  overflow:hidden; background: var(--kinari); color: var(--ink); text-align:center;
}
.hero-logo-center{ width:min(42vw, 320px); height:auto; margin-bottom:32px; }
.hero-catch{ font-family:var(--font-serif-jp); font-weight:400; letter-spacing:.05em; font-size:12.5px; color: var(--ink-soft); }

.hero-illust{ position:absolute; z-index:1; bottom:12%; right:8%; width:76px; height:auto; opacity:.85; }

.scroll-cue{ position:absolute; bottom:32px; left:50%; transform:translateX(-50%); width:1px; height:76px; background: rgba(44,34,28,.28); z-index:3; }
.scroll-cue span{ position:absolute; left:50%; top:0; width:7px; height:7px; margin-left:-3.5px; background:var(--ink); border-radius:50%; animation: cue-fall 2.2s ease-in infinite; }
@keyframes cue-fall{
  0%   { transform: translateY(0); opacity:1; }
  65%  { transform: translateY(69px); opacity:1; }
  100% { transform: translateY(69px); opacity:0; }
}

@media (max-width: 640px){
  .hero-illust{ display:none; }
}

/* ==========================================================================
   Concept — one continuous scroll-scrubbed sequence:
   photo expands from a small margined frame to full-bleed, the intro copy
   fades up in stages (title → catchphrase → body), then the same photo
   frame crossfades through four more images while the manuscript continues
   paragraph by paragraph, and finally the whole frame shrinks back down
   (scrim included, so the darkening never separates from the photo) before
   handing off to OUR NAME.
   ========================================================================== */
.concept-section{ position:relative; background: var(--kinari); }
.concept-track{ position:relative; height: 1840vh; }
.concept-pin{ position:sticky; top:0; height:100vh; overflow:hidden; }

.concept-photo{
  position:absolute; overflow:hidden; border-radius:0;
  box-shadow: 0 30px 70px rgba(44,34,28,.2); will-change: width, height, top, left;
}
.concept-bg{ position:absolute; inset:0; opacity:0; }
.concept-bg img{ width:100%; height:100%; object-fit:cover; display:block; }
.concept-scrim{
  position:absolute; inset:0; z-index:1; opacity:0; pointer-events:none;
  background: rgba(20,26,38,.76);
}

.concept-text-layer{
  position:relative; z-index:2; height:100%; display:flex; align-items:center;
  max-width: var(--container); margin:0 auto; padding:0 32px;
}
.concept-text-block{
  position:absolute; max-width:600px; opacity:0; transform: translateY(28px); pointer-events:none;
}
.concept-title .eyebrow{ color: var(--salmon-light); }
.concept-title .ja-heading{ color: var(--paper); margin-bottom:0; }
.concept-title .heading-sub{ color: var(--paper); }
#conceptCatch{
  margin: 34px 0 30px; text-align:left;
  font-family: var(--font-serif-jp); font-weight:400; color: var(--salmon-light);
  font-size: clamp(20px,2.4vw,25px); line-height:1.7;
}
#conceptBody{ text-align:left; }
#conceptBody p{ color: rgba(247,239,225,.92); font-size:13.5px; margin:0 0 1.1em; line-height:1.85; }

.story-body p{ color: rgba(247,239,225,.86); font-size:13.5px; margin:0 0 1.3em; line-height:1.95; }
.story-quote, .story-cta-text{ color: var(--salmon-light) !important; font-weight:500; }
.story-signoff{ font-family: var(--font-serif-jp); font-size:16px; color:var(--paper) !important; margin-top:20px !important; }

.story-progress{ position:absolute; right:40px; top:50%; transform:translateY(-50%); z-index:3; display:flex; flex-direction:column; gap:14px; }
.story-progress span{ width:8px; height:8px; border-radius:50%; background: rgba(247,239,225,.3); transition: background .4s ease, transform .4s ease; }
.story-progress span.is-active{ background: var(--salmon); transform:scale(1.3); }

@media (max-width: 880px){
  .concept-track{ height: 1490vh; }
  .concept-text-layer{ padding: 0 56px 0 16px; }
  /* An absolutely-positioned child resolves percentage widths against the
     containing block's padding box, not its content box — so max-width:100%
     ignored the layer's own padding and let text run past it. Setting
     explicit left/right insets (leaving top/bottom auto) constrains the
     box correctly while still leaving align-items:center in charge of the
     vertical position. */
  .concept-text-block{ left:16px; right:56px; max-width:none; }
  .story-progress{ right:18px; }
}

/* ==========================================================================
   Our Name (由来)
   ========================================================================== */
.name-section{ text-align:center; }
.name-section .ja-heading{ color: var(--paper); }
.name-mark{ width:200px; height:auto; margin: 0 auto 15px; opacity:.9; }
.name-lead{ font-family: var(--font-serif-jp); font-size: clamp(20px,2.4vw,26px); font-weight:600; color:var(--ink); max-width:760px; margin:0 auto 46px; line-height:1.9; }

.name-grid{
  display:flex; align-items:center; justify-content:center;
  margin: 60px auto 50px;
}
.name-card{
  position:relative; background: transparent; border-radius:50%;
  border: 1.5px solid var(--paper);
  width: 460px; max-width:62vw; aspect-ratio: 15 / 8.5;
  display:flex; align-items:center; text-align:center;
}
.name-card:first-child{ margin-right:-45px; z-index:1; justify-content:flex-start; padding-left:10%; }
.name-card:last-child{ margin-left:-45px; z-index:2; justify-content:center; }
.name-card-inner{ max-width:70%; }
.name-card:last-child .name-card-inner{ max-width:46%; }
.name-card .name-word{ font-family: var(--font-serif-en); font-style:italic; font-size:26px; color:var(--paper); margin-bottom:14px; display:block; }
.name-card p{ font-size:11px; color:var(--paper); }
.name-closing{ max-width:640px; margin:0 auto; font-size:13px; color:rgba(255,251,243,.82); }

@media (max-width: 760px){
  .name-grid{ flex-direction:column; margin-top:40px; }
  .name-card{ width:min(88vw, 420px); max-width:none; aspect-ratio: 15 / 8.5; justify-content:center; align-items:center; padding-left:0; padding-right:0; }
  .name-card:first-child{ margin-right:0; margin-bottom:-8px; align-items:center; justify-content:center; padding-top:0; padding-left:0; }
  .name-card:last-child{ margin-left:0; margin-top:-8px; align-items:center; justify-content:center; padding-bottom:0; }
  .name-card-inner{ max-width:70%; margin:0 auto; }
  .name-card:last-child .name-card-inner{ max-width:60%; }
}

/* ==========================================================================
   Support
   ========================================================================== */
.support-tagline{ text-align:center; font-family:var(--font-serif-jp); font-weight:400; font-size: clamp(17px,1.9vw,21px); color:var(--ink); margin-bottom:34px; }
.support-intro{ max-width:760px; margin: 0 auto 70px; text-align:center; font-size:14px; color:var(--ink-soft); }
.support-block{ display:grid; grid-template-columns: .9fr 1.1fr; gap:60px; align-items:center; margin-bottom:100px; }
.support-block:last-of-type{ margin-bottom:60px; }
.support-block-reverse{ grid-template-columns: 1.1fr .9fr; }
.support-block-reverse .support-media{ order:2; }
.support-media{ aspect-ratio: 4/5; border-radius:0; }
.support-media img{ width:100%; height:100%; object-fit:cover; }
.support-num{ font-family: var(--font-serif-en); font-style:italic; font-size:15px; color:var(--navy); letter-spacing:.2em; margin-bottom:16px; }
.support-text h3{ font-family: var(--font-serif-jp); font-weight:400; font-size: clamp(20px,2.2vw,26px); line-height:1.6; margin-bottom:22px; }
.support-text p{ font-size:13.5px; color:var(--ink-soft); margin:0 0 1.3em; }
.support-sub{ font-family: var(--font-serif-jp); font-weight:600; font-size:16px; margin: 0 0 12px; color:var(--salmon-deep); }
.support-callout{ background: var(--navy); padding: 26px 30px; margin-top: 26px; }
.support-callout .support-sub{ color: var(--salmon-deep); }
.support-callout p:not(.support-sub){ color: var(--paper); }

.stat-card{
  max-width: 640px; margin: 0 auto; text-align:center; background: var(--paper);
  border-radius: 0; padding: 54px 40px; box-shadow: 0 20px 50px rgba(44,34,28,.06);
}
.stat-num{ font-family: var(--font-serif-en); font-size: clamp(44px,6vw,64px); color:var(--salmon-deep); font-weight:600; line-height:1; }
.stat-num span{ font-size:.6em; margin-left:6px; }
.stat-label{ font-size:13px; letter-spacing:.1em; color:var(--ink-soft); margin-top:14px; }
.stat-note{ font-size:12px; color:var(--ink-soft); opacity:.75; margin-top:6px; }
.stat-card-ibj-logo{ margin: 28px auto 0; width:179px; height:auto; }

@media (max-width: 900px){
  .support-block, .support-block-reverse{ grid-template-columns:1fr; gap:34px; }
  .support-block-reverse .support-media{ order:0; }
}

/* ==========================================================================
   Counselor — split reference composition
   ========================================================================== */
.counselor-split{ display:grid; grid-template-columns: 1fr 1fr; align-items:stretch; gap:0; margin: -130px -32px 0; }
#counselor{ padding-bottom:0; }
.counselor-text-col{ padding: 130px 60px; display:flex; flex-direction:column; justify-content:center; }
.counselor-photo-col{ position:relative; min-height:520px; }
.counselor-photo-col img{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.counselor-body p{ font-size:13px; color:var(--ink-soft); margin:0 0 1.3em; }

.info-box{ background: var(--navy); border-radius:0; padding:26px 30px; margin-top:30px; }
.info-box .profile-label{ font-family:var(--font-serif-en); font-style:italic; letter-spacing:.16em; font-size:14px; color:var(--salmon-deep); margin-bottom:12px; }
.info-box p{ font-size:12px; font-weight: 400;color:var(--paper); margin:0; }

.message-box{ margin-top:30px; }
.message-box .profile-label{ font-family:var(--font-serif-en); font-style:italic; letter-spacing:.16em; font-size:14px; color:var(--salmon-deep); margin-bottom:10px; }
.message-box p{ font-family: var(--font-serif-jp); font-weight:400; font-size:16px; color:var(--ink); }

@media (max-width: 980px){
  .counselor-split{ grid-template-columns:1fr; margin: -130px 0 0; }
  .counselor-text-col{ padding: 90px 24px 0; order:2; }
  .counselor-photo-col{ min-height:70vh; order:1; }
}

/* ==========================================================================
   For You
   ========================================================================== */

/* Shared continuous marquee system (used by the brand ticker and the
   For You checklist). `.marquee-track` (or any flex row inside `.marquee`)
   is duplicated content so the -50% loop is seamless; `.marquee-rtl` flows
   right-to-left, `.marquee-ltr` reuses the same keyframes in reverse. */
.marquee{ overflow:hidden; width:100%; }
.marquee-track{ display:flex; width:max-content; will-change: transform; }
.marquee-rtl .marquee-track{ animation: marquee-move 50s linear infinite; }
.marquee-ltr .marquee-track{ animation: marquee-move 50s linear infinite reverse; }
@keyframes marquee-move{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

.foryou-ticker{ margin: 0; padding: 46px 0; background: var(--salmon-pale); }
.marquee-phrase{
  flex:0 0 auto; padding: 0 28px; white-space:nowrap;
  font-family: var(--font-serif-en); font-style:italic; font-weight:400;
  font-size: clamp(30px, 4vw, 44px); color: var(--navy);
}

.foryou-closing{ text-align:center; font-size:15px; color:var(--ink-soft); max-width:640px; margin:36px auto 0; }

.foryou-columns{ display:grid; grid-template-columns: .9fr 1.1fr; gap:70px; align-items:center; margin: 70px 0 20px; }
.foryou-media{ aspect-ratio: 3/4; border-radius:0; }
.foryou-media img{ width:100%; height:100%; object-fit:cover; object-position:center; }
.foryou-list{ display:flex; flex-direction:column; }
.foryou-list li{
  position:relative; white-space:normal;
  padding: 20px 0 20px 40px; font-size:14.5px; color:var(--ink);
  border-bottom: 1px solid var(--line);
}
.foryou-list li:first-child{ border-top: 1px solid var(--line); }
.foryou-list li::before{
  content:"✓"; position:absolute; left:2px; top:22px;
  color: var(--navy); font-size:15px; line-height:1; font-weight:700;
}
@media (max-width: 880px){
  .foryou-columns{ grid-template-columns:1fr; gap:34px; }
}

/* ==========================================================================
   Water transition — full-bleed photo shrinks on scroll, then a kinari
   panel slides in from the right to hand off to Flow.
   ========================================================================== */
.water-transition{ position:relative; background: var(--kinari); }
.water-track{ position:relative; height: 220vh; }
.water-pin{
  position:sticky; top:0; height:100vh; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.water-photo{
  position:absolute; overflow:hidden;
  box-shadow: 0 30px 70px rgba(44,34,28,.2); will-change: width, height, top, left;
}
.water-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.water-panel{ position:absolute; inset:0; background: var(--kinari); z-index:2; transform: translateX(100%); pointer-events:none; }

/* ==========================================================================
   Flow
   ========================================================================== */
.flow-list{ max-width: 820px; margin:0 auto; position:relative; }
.flow-list::before{ content:""; position:absolute; left:29px; top:10px; bottom:10px; width:1px; background: var(--line); }
.flow-item{ position:relative; display:flex; gap:28px; padding: 0 0 56px 0; }
.flow-item:last-child{ padding-bottom:0; }
.flow-num{
  position:relative; flex-shrink:0; width:60px; height:40px;
  color:var(--navy); font-family: var(--font-serif-en);
  font-style:italic; font-size:15px; display:flex; align-items:center; justify-content:center; z-index:2;
}
.flow-num svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.flow-num svg path{ fill:var(--paper); stroke:var(--navy); stroke-width:.7; vector-effect:non-scaling-stroke; }
.flow-num em{ position:relative; z-index:1; font-style:italic; }
.flow-body h3{ font-family: var(--font-serif-jp); font-weight:400; font-size:18px; margin-bottom:10px; }
.flow-body p{ font-size:14px; color:var(--ink-soft); }
.flow-icon{ position:absolute; width:52px; height:auto; opacity:.85; }

/* ==========================================================================
   Plans
   ========================================================================== */
.plan-lead{ text-align:center; max-width:700px; margin:0 auto 60px; font-size:13.5px; color:var(--ink-soft); }
.plans-cards{ display:grid; grid-template-columns: .85fr 1.15fr; gap:30px; margin-bottom:50px; }
.plan-card{ border-radius:0; padding: 42px 38px; }
.plan-card-featured{ background: var(--navy); color: var(--paper); }
.plan-name{ font-family: var(--font-serif-jp); font-weight:400; font-size:22px; color: var(--salmon-deep); margin-bottom:26px; }
.plan-price{ margin-bottom:26px; }
.plan-price li{ display:flex; justify-content:space-between; padding:12px 0; border-bottom:1px solid rgba(255,255,255,.3); font-family:var(--font-serif-en); font-size:19px; color: var(--paper); }
.plan-price li span{ font-family:var(--font-sans); font-size:13px; color: rgba(255,255,255,.85); }
.plan-stat{ display:flex; justify-content:space-between; align-items:baseline; font-size:13px; color:rgba(255,255,255,.85); }
.plan-stat strong{ font-family:var(--font-serif-en); font-size:40px; line-height:1; color:var(--paper); }
.plan-stat span{font-size: 13px;}

.plan-include-card{ background: var(--paper); box-shadow: 0 18px 44px rgba(44,34,28,.05); }
.plan-include-title{ font-family:var(--font-serif-jp); font-weight:400; font-size:17px; margin-bottom:22px; }
.plan-features li{ position:relative; padding: 12px 0 12px 26px; border-bottom:1px solid rgba(42,58,84,.25); font-size:14px; }
.plan-features li::before{ content:"—"; position:absolute; left:0; color:var(--navy); }
.plan-features-note{ display:block; font-size:12px; color:var(--ink-soft); opacity:.75; margin-top:2px; }

.plans-notes{ width: 90%; border-radius:0; margin-inline: auto; }
.plans-notes-title{ font-family:var(--font-serif-jp); font-weight:400; font-size:15px; margin-bottom:18px; }
.plans-notes-item{ padding: 14px 0; border-bottom:1px solid var(--line); display:grid; grid-template-columns: 110px 1fr; gap:20px; }
.plans-notes-item:last-child{ border-bottom:none; }
.plans-notes dt{ font-size:12px; color:var(--navy); font-weight:700; }
.plans-notes dd{ margin:0; font-size:12px; color:var(--ink-soft); line-height:1.8; }
@media (max-width: 900px){
  .plans-cards{ grid-template-columns:1fr; }
  .plans-notes-item{ grid-template-columns:1fr; gap:6px; }
}

/* ==========================================================================
   Voice
   ========================================================================== */
.voice-coming{ text-align:center; }
.voice-cards-row{ display:flex; justify-content:center; gap:24px; margin-bottom:30px; flex-wrap:wrap; }
.voice-card{ width:260px; height:170px; border-radius:0; background: var(--paper); display:flex; align-items:center; justify-content:center; box-shadow: 0 14px 34px rgba(44,34,28,.05); }
.voice-badge{ font-family: var(--font-serif-en); font-style:italic; letter-spacing:.1em; color: var(--salmon-deep); font-size:15px; }
.voice-note{ font-size:13.5px; color:var(--ink-soft); }

/* ==========================================================================
   Contact
   ========================================================================== */
.section-contact{ padding:0; min-height:100vh; display:flex; align-items:center; }
.contact-media{ position:absolute; inset:0; }
.contact-media img{ width:100%; height:100%; object-fit:cover; }
.contact-overlay{ position:absolute; inset:0; background: linear-gradient(180deg, rgba(28,20,16,.38), rgba(28,20,16,.68)); }
.contact-inner{ max-width:640px; margin: 130px auto; text-align:center; }
.contact-inner .eyebrow{ color: var(--salmon-light); }
.contact-inner .ja-heading{ color: var(--paper); margin-bottom:30px; }
.contact-lead{ color: rgba(247,239,225,.85); font-size:14px; margin-bottom:46px; }

.contact-line-cta{ text-align:center; margin: 0 0 46px; }
.contact-line-cta .oval-btn{ width:100%; max-width:320px; height:54px; margin:0 auto; }
.contact-line-note{ margin-top:12px; font-size:12px; color: rgba(255,255,255,.65); }

.contact-divider{ display:flex; align-items:center; gap:14px; margin: 0 0 30px; color: rgba(255,255,255,.5); font-size:12px; letter-spacing:.06em; }
.contact-divider::before, .contact-divider::after{ content:""; flex:1; height:1px; background: rgba(255,255,255,.25); }

/* Experimental variant: no white card, everything floats directly over the
   photo with white text/lines instead. */
.contact-form{ background: transparent; border-radius:0; padding:0; text-align:left; }
.form-row{ margin-bottom:22px; }
.form-row label{ display:block; font-size:13px; margin-bottom:10px; color: var(--paper); letter-spacing:.04em; }
.form-row .req{ color: var(--salmon-light); font-size:11px; margin-left:8px; border:1px solid var(--salmon-light); padding:2px 8px; border-radius:999px; }
.form-row .opt{ color: rgba(255,255,255,.7); font-size:11px; margin-left:8px; border:1px solid rgba(255,255,255,.4); padding:2px 8px; border-radius:999px; }
.form-row input, .form-row textarea{
  width:100%; border:1px solid rgba(255,255,255,.4); background: rgba(255,255,255,.08); border-radius:4px;
  padding:14px 16px; font-family: var(--font-sans); font-size:14px; color: var(--paper); resize:vertical;
  transition: border-color .3s ease;
}
.form-row input::placeholder, .form-row textarea::placeholder{ color: rgba(255,255,255,.5); }
.form-row input:focus, .form-row textarea:focus{ outline:none; border-color: var(--paper); }
.btn-submit{ width:100%; border:none; margin-top:6px; }
.form-note{ font-size:11.5px; color: rgba(255,255,255,.75); text-align:center; margin-top:18px; line-height:1.8; }

/* Honeypot: kept in the accessibility tree removed and visually gone —
   not display:none, since some spam bots skip fields hidden that way. */
.form-trap{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }

.form-status{ font-size:12.5px; text-align:center; margin-top:16px; min-height:1.4em; color: rgba(255,255,255,.75); }
.form-status.is-success{ color: var(--salmon-light); }
.form-status.is-error{ color: #ffb4a8; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{
  background: var(--kinari); color: var(--navy);
  padding: 80px 32px 34px; text-align:center; position:relative; overflow:hidden;
  font-family: var(--font-serif-en);
}
.footer-logo{ height:72px; width:auto; margin:0 auto 20px; }
.footer-tagline{ font-family: var(--font-serif-en); font-style:normal; letter-spacing:.16em; font-size:14px; color: var(--navy); margin-bottom:34px; }
.footer-ibj-logo{ margin: 0 auto 30px; width:179px; max-width:70vw; height:auto; }
.footer-nav{ display:flex; flex-wrap:wrap; justify-content:center; gap: 26px; margin-bottom:34px; }
.footer-nav a{ font-size:12px; letter-spacing:.12em; color: var(--navy); opacity:.8; transition: opacity .3s; }
.footer-nav a:hover{ opacity:1; }
.footer-social{ display:flex; justify-content:center; align-items:center; gap:6px; margin-bottom:30px; }
.footer-social a{
  width:60px; height:38px; color: var(--navy);
  display:flex; align-items:center; justify-content:center; transition: opacity .3s;
  opacity:.85;
}
.footer-social a:hover{ opacity:1; }
.footer-social svg{ width:19px; height:19px; }
.footer-social img{ width:28px; height:auto; display:block; }
.footer-copy{ font-size:11px; color: var(--navy); opacity:.75; letter-spacing:.06em; }

/* ---------- To top ---------- */
.to-top{
  position: fixed; right:26px; bottom:26px; z-index: 800;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  opacity:0; transform: translateY(16px) scale(.8); pointer-events:none;
  transition: opacity .4s ease, transform .4s ease;
}
.to-top.is-visible{ opacity:1; transform:none; pointer-events:auto; }
.to-top-float{ display:flex; flex-direction:column; align-items:center; gap:4px; animation: totop-bob 4s ease-in-out infinite; }
.to-top img{ width:60px; height:60px; object-fit: contain; transform: rotate(-90deg); transition: filter .3s ease; }
.to-top span{ font-family: var(--font-serif-en); font-size:11px; letter-spacing:.08em; color: var(--ink); transition: color .3s ease; }
.to-top.is-dark img{ filter: brightness(0) invert(1); }
.to-top.is-dark span{ color: var(--paper); }
@keyframes totop-bob{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-8px); } }


.btn-submit-oval{
  width:100%; height:56px; border:none; background:none; cursor:pointer; margin-top:6px;
  color: var(--paper); font-family: inherit; font-size:14px; letter-spacing:.14em;
}

/* ---------- Responsive base ---------- */
@media (max-width: 640px){
  .section{ padding: 90px 0; }
  .section-inner{ padding: 0 22px; }
  .counselor-text-col{ padding: 70px 22px 50px; }
}

/* ==========================================================================
   Sub-pages (会社概要 / プライバシーポリシー・特定商取引法) — kinari base,
   reusing the top page's type system (eyebrow / ja-heading / body-text).
   ========================================================================== */
.subpage-hero{ background: var(--salmon-pale); padding-top: calc(var(--header-h) + 70px); padding-bottom: 0; text-align:center; }
.subpage-content{ background: var(--salmon-pale); padding-top:0; }
.subpage-content + .subpage-content{ padding-top:0; }

.company-table{ width:100%; max-width:760px; margin:0 auto; border-collapse:collapse; }
.company-table th, .company-table td{
  text-align:left; padding:22px 20px; border-bottom:1px solid var(--line);
  font-size:14px; line-height:1.8; vertical-align:top;
}
.company-table th{
  width:34%; font-family:var(--font-serif-en); font-style:italic; font-weight:400;
  letter-spacing:.06em; color:var(--navy); font-size:13px;
}
.company-table td{ color:var(--ink); }
@media (max-width:640px){
  .company-table{ font-size:13px; }
  .company-table th, .company-table td{ display:block; width:100%; padding:8px 0; }
  .company-table th{ border-bottom:none; padding-bottom:2px; }
  .company-table tr{ display:block; padding:16px 0; border-bottom:1px solid var(--line); }
  .company-table th, .company-table td{ border-bottom:none; }
}

.legal-block{ max-width:760px; margin:0 auto 90px; }
.legal-block:last-child{ margin-bottom:0; }
.legal-block-title{ font-family:var(--font-serif-jp); font-weight:400; font-size:20px; color:var(--ink); margin-bottom:34px; text-align:center; }
.legal-section{ margin-bottom:40px; }
.legal-section:last-child{ margin-bottom:0; }
.legal-section h3{ font-family:var(--font-serif-jp); font-weight:400; font-size:15px; color:var(--navy); margin-bottom:14px; }
.legal-section p{ font-size:13.5px; color:var(--ink-soft); line-height:1.9; margin:0 0 1em; }
.legal-section p:last-child{ margin-bottom:0; }
.legal-section ul{ margin:0 0 1em; padding-left:1.4em; list-style:disc; }
.legal-section ul li{ font-size:13.5px; color:var(--ink-soft); line-height:1.9; margin-bottom:.4em; }
.legal-note{ font-size:12px; color:var(--ink-soft); opacity:.75; text-align:right; max-width:760px; margin:40px auto 0; }

.footer-legal-nav{ display:flex; flex-wrap:wrap; justify-content:center; gap:20px; margin-top:18px; }
.footer-legal-nav a{ font-size:11px; letter-spacing:.06em; color:var(--navy); opacity:.7; transition:opacity .3s; }
.footer-legal-nav a:hover{ opacity:1; }