/* =========================================================
   ai common — style.css
   Design: Figma "Website 24"（calc(1280*var(--u)) 基準）
   ========================================================= */

:root{
  /* 1280px基準の単位。1280以上では画面幅に比例して拡大（3840（4K）で3倍・上限） */
  --u:clamp(1px,calc(100vw / 1280),3px);
  --bg:#0a0a09;
  --ink:#e9e5da;          /* アイボリー */
  --muted:#9c978b;
  --soft:#cfc9bb;
  --note:#7a766c;
  --line:#2a2825;
  --line-2:#24231f;
  --card:#121210;
  --card-2:#141412;

  /* creamu.co.jp と同じ指定：Adobe Fonts の helvetica-neue-lt-pro → Noto Sans JP → ヒラギノ…
     （"Helvetica Neue LT Pro" はMacにインストール済みの書体。Adobe Fonts が読めないプレビューでもMacでは正しく表示するため） */
  --font:helvetica-neue-lt-pro,"Helvetica Neue LT Pro","Noto Sans JP","ヒラギノ角ゴ Pro W3",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
  --en:var(--font);
  --jp:var(--font);

  --gut:clamp(16px,3.125vw,calc(40*var(--u)));   /* 左右余白：1280で40px（スマホ16px） */
  --label-col:calc(476*var(--u));               /* ラベル列：FAQと同じ2カラムのグリッド */
  --sec-top:clamp(calc(88*var(--u)),11.7vw,calc(150*var(--u)));
  --sec-bottom:clamp(calc(96*var(--u)),14vw,calc(180*var(--u)));
  --ease:cubic-bezier(.2,.7,.1,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(88*var(--u))}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--jp);font-weight:400;font-size:calc(16*var(--u));line-height:1.8;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;line-break:strict;word-break:auto-phrase}   /* 日本語は文節で折り返す（単語の途中で切れない） */
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,dl,dd,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:1px solid var(--ink);outline-offset:calc(4*var(--u))}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:calc(-9999*var(--u));top:calc(8*var(--u));z-index:100;background:var(--ink);color:var(--bg);padding:calc(8*var(--u)) calc(14*var(--u));font-size:calc(13*var(--u))}
.skip:focus{left:calc(8*var(--u))}
::selection{background:var(--ink);color:var(--bg)}

.wrap{width:100%;max-width:calc(1280*var(--u));margin-inline:auto;padding-inline:var(--gut)}

/* ---------- type ---------- */
.label{font-family:var(--en);font-weight:400;font-size:calc(13*var(--u));line-height:1.2;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.label.is-muted{color:var(--muted)}
.h-xxl,.h-xl,.h-l,.h-m{font-family:var(--jp);font-weight:300;line-height:1.35;letter-spacing:0;text-wrap:balance;line-break:strict;word-break:auto-phrase}   /* 日本語は文節で折り返す */
.h-xxl{font-size:clamp(calc(28*var(--u)),3.75vw,calc(48*var(--u)))}
.h-xl{font-size:clamp(calc(26*var(--u)),3.44vw,calc(44*var(--u)))}
.h-l{font-size:clamp(calc(24*var(--u)),3.17vw,calc(40.6*var(--u)))}
.h-m{font-size:clamp(calc(20*var(--u)),1.9vw,calc(24*var(--u)))}
#philosophy .h-xl{font-size:clamp(calc(28*var(--u)),4.06vw,calc(52*var(--u)))}
#profile .h-l{font-size:clamp(calc(24*var(--u)),2.97vw,calc(38*var(--u)))}
@media (min-width:901px){#profile .h-l{white-space:nowrap}}
.lead{margin-top:calc(28*var(--u));font-size:calc(15*var(--u));line-height:2;color:var(--muted)}
.prose{margin-top:clamp(calc(32*var(--u)),4.4vw,calc(56*var(--u)));font-size:calc(16*var(--u));line-height:2.1;color:var(--muted)}
.prose p+p{margin-top:2.1em}
.note{grid-column:1/-1;margin-top:calc(46*var(--u));font-size:calc(12*var(--u));line-height:1.8;color:var(--note)}

.link-arrow{display:inline-flex;gap:calc(14*var(--u));align-items:baseline;font-size:calc(14*var(--u));line-height:1.2;padding-bottom:calc(10*var(--u));border-bottom:1px solid currentColor;transition:gap .35s var(--ease),opacity .3s}
.link-arrow:hover{gap:calc(22*var(--u))}
.link-arrow--dark{color:var(--bg);border-color:rgba(10,10,9,.35)}

/* ---------- header ---------- */
.site-header{position:fixed;inset:0 0 auto;z-index:50;padding-top:env(safe-area-inset-top,0px);color:var(--ink);mix-blend-mode:difference}   /* 背景色なし：下の色で反転 */
.site-header.is-menu{mix-blend-mode:normal}  /* スマホメニュー展開中は反転を止める */
/* ロード時：上に隠れた状態から下へスッと出てくる */
.js-rv .site-header__inner{transform:translate3d(0,-120%,0)}
.hero-go .site-header__inner{transform:none;animation:headerIn 1.25s cubic-bezier(.2,.75,.1,1) var(--hero-d) backwards}  /* 終了後はtransformを残さない（メニューのfixedを全画面にするため） */
@keyframes headerIn{from{transform:translate3d(0,-120%,0)}to{transform:none}}
.site-header__inner{max-width:calc(1280*var(--u));margin-inline:auto;padding:calc(20*var(--u)) var(--gut);display:flex;align-items:center;justify-content:space-between}  /* 位置は固定（スクロールで動かさない） */
.site-logo{display:block;position:relative;top:calc(10.3*var(--u));color:var(--ink)}  /* 左端はグリッドに合わせる */
.site-logo svg{display:block;width:calc(152*var(--u));height:calc(17*var(--u));fill:currentColor}
.gnav{display:flex;gap:calc(28*var(--u))}
.gnav a{font-family:var(--en);font-size:calc(13*var(--u));letter-spacing:.1em;text-transform:uppercase;color:inherit;transition:opacity .3s}
.gnav a:hover{opacity:.6}
.menu-btn{display:none;position:relative;width:64px;height:40px;margin-right:-4px;background:none;border:0;cursor:pointer;color:var(--ink)}
.menu-btn span:not(.sr){position:absolute;right:4px;height:1px;background:currentColor;transform-origin:50% 50%;transition:transform .5s var(--ease),top .5s var(--ease),width .5s var(--ease)}
.menu-btn span:nth-child(1){top:16px;width:56px}
.menu-btn span:nth-child(2){top:24px;width:32px}
.menu-btn[aria-expanded="true"] span:nth-child(1){top:20px;width:44px;transform:rotate(18deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){top:20px;width:44px;transform:rotate(-18deg)}

/* ---------- hero ---------- */
.hero{position:relative;height:100vh;height:100svh;min-height:calc(620*var(--u));max-height:calc(1100*var(--u));overflow:hidden;isolation:isolate;background:#050504}
/* 球体キャンバス：ファーストビューの背景。スクロールでパララックス（sphere.js） */
.bg-sphere{position:absolute;left:0;top:0;z-index:-1;display:block;width:100%;height:100%;pointer-events:none;will-change:transform}
.hero__inner{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;padding-inline:var(--gut)}
.hero__mark{display:block;margin:0 auto;width:clamp(calc(40*var(--u)),4.45vw,calc(57*var(--u)));aspect-ratio:57.12/70.22;height:auto;fill:var(--ink)}
.hero__kicker{margin-top:clamp(calc(20*var(--u)),2.6vw,calc(34*var(--u)));font-family:var(--en);font-size:clamp(calc(11*var(--u)),1.1vw,calc(14*var(--u)));letter-spacing:.1em;color:rgba(233,229,218,.8)}
.hero__title{margin-top:clamp(calc(12*var(--u)),1.6vw,calc(20*var(--u)));font-family:var(--en);font-weight:300;font-size:clamp(calc(44*var(--u)),7.8125vw,calc(100*var(--u)));line-height:.96;letter-spacing:-.01em;color:var(--ink)}
.hero__sub{margin-top:clamp(calc(16*var(--u)),1.6vw,calc(20*var(--u)));font-weight:300;font-size:clamp(calc(14*var(--u)),1.33vw,calc(17*var(--u)));letter-spacing:.08em;color:rgba(233,229,218,.9)}
.hero__foot{position:absolute;left:0;right:0;bottom:calc(calc(46*var(--u)) + env(safe-area-inset-bottom,0px));max-width:calc(1280*var(--u));margin-inline:auto;padding-inline:var(--gut);display:flex;justify-content:space-between;align-items:flex-end;gap:calc(20*var(--u))}
.hero__place{font-family:var(--en);font-size:calc(12*var(--u));letter-spacing:.1em;text-transform:uppercase;color:rgba(233,229,218,.6)}

/* ---------- section scaffold ---------- */
.sec{position:relative;display:grid;grid-template-columns:var(--label-col) minmax(0,1fr);align-items:start;padding-top:var(--sec-top);padding-bottom:var(--sec-bottom)}
.sec::before{content:"";position:absolute;top:0;left:var(--gut);right:var(--gut);height:1px;background:var(--line)}
.sec>.label{padding-top:calc(10*var(--u))}
.sec__body{min-width:0}

/* ---------- facts ---------- */
.facts{position:relative}
.facts__list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:calc(50*var(--u)) 0 calc(84*var(--u))}
.facts__list dt{display:flex;align-items:baseline;gap:calc(10*var(--u));font-size:calc(14*var(--u))}
.facts__list b{font-family:var(--en);font-weight:300;font-size:clamp(calc(38*var(--u)),3.75vw,calc(48*var(--u)));letter-spacing:-.01em;line-height:1}
.facts__list dd{margin-top:calc(30*var(--u));font-size:calc(13*var(--u));color:var(--muted);line-height:1.4}

/* ---------- photo ---------- */
.photo{position:relative;overflow:hidden;background:#111}
.photo img{width:100%;object-fit:cover;will-change:transform}
.profile__photo{overflow:hidden;flex:0 0 auto;width:clamp(72px,7.5vw,calc(96*var(--u)))}
.profile__photo img{will-change:transform}
.photo--philosophy img{height:clamp(calc(300*var(--u)),50vw,calc(640*var(--u)))}
.photo--contact img{height:clamp(calc(260*var(--u)),43.75vw,calc(560*var(--u)))}

/* ---------- profile ---------- */
.profile__person{display:flex;align-items:center;gap:calc(20*var(--u));margin-top:clamp(calc(56*var(--u)),8.6vw,calc(110*var(--u)))}
.profile__bio{margin-top:calc(26*var(--u))}
.profile__photo img{width:100%;aspect-ratio:1;object-fit:cover}
.profile__body{padding-top:0}
.profile__tag{margin-bottom:calc(20*var(--u));font-family:var(--en);font-size:calc(13*var(--u));line-height:1.2;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.profile__name{margin-top:0;font-weight:300;font-size:calc(26*var(--u));line-height:1.2}
.profile__role{margin-top:calc(8*var(--u));font-family:var(--en);font-size:calc(13*var(--u));letter-spacing:.1em;color:var(--muted)}
.profile__stats{margin-top:calc(50*var(--u));padding-top:calc(24*var(--u));border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(20*var(--u))}
.profile__stats dt{font-family:var(--en);font-weight:300;font-size:clamp(calc(30*var(--u)),3.1vw,calc(40*var(--u)));line-height:1.2}
.profile__stats dd{margin-top:calc(14*var(--u));font-size:calc(12*var(--u));color:var(--muted);line-height:1.5}

/* ---------- topics ---------- */
.topics{grid-column:1/-1;margin-top:clamp(calc(56*var(--u)),7vw,calc(90*var(--u)));border-bottom:1px solid var(--line)}
.topics li{display:grid;grid-template-columns:calc(95*var(--u)) minmax(0,calc(571*var(--u))) minmax(0,1fr);align-items:center;padding:calc(36*var(--u)) 0;border-top:1px solid var(--line)}
.topics__no{font-family:var(--en);font-size:calc(18*var(--u));color:var(--muted)}
.topics__q{font-weight:300;font-size:clamp(calc(18*var(--u)),1.9vw,calc(24*var(--u)));line-height:1.5}
.topics__a{font-size:calc(14*var(--u));line-height:1.9;color:var(--muted)}

/* ---------- what you can do ---------- */
.day{grid-column:1/-1;margin-top:clamp(calc(56*var(--u)),5.6vw,calc(72*var(--u)));display:grid;grid-template-columns:repeat(4,minmax(0,1fr));position:relative}
.day::before{content:"";position:absolute;left:0;right:0;top:calc(32*var(--u));height:1px;background:var(--line-2)}
.day time{display:block;font-family:var(--en);font-size:calc(13*var(--u));letter-spacing:.1em}
.day li{position:relative;padding-right:calc(24*var(--u))}
.day li::before{content:"";display:block;width:calc(9*var(--u));height:calc(9*var(--u));border-radius:50%;background:var(--ink);margin:calc(12*var(--u)) 0 calc(15*var(--u));position:relative}
.day p{font-size:calc(14*var(--u));line-height:1.7}
.cards{grid-column:1/-1;margin-top:clamp(calc(56*var(--u)),6vw,calc(76*var(--u)));display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(24*var(--u)) calc(21*var(--u))}
.card{display:flex;flex-direction:column;min-height:calc(325*var(--u));padding:calc(28*var(--u)) calc(25*var(--u)) calc(30*var(--u));background:var(--card);border:1px solid var(--line)}
.card__tag{font-family:var(--en);font-size:calc(12*var(--u));letter-spacing:.1em;text-transform:uppercase}
.card h3{margin-top:calc(26*var(--u));font-weight:300;font-size:clamp(calc(18*var(--u)),1.64vw,calc(21*var(--u)));line-height:1.5}
.card p:not(.card__tag){margin-top:calc(28*var(--u));font-size:calc(13*var(--u));line-height:1.9;color:var(--muted)}
.card--invert{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.card--invert p:not(.card__tag){color:#1c1b18}
.card--invert .link-arrow{margin-top:auto;align-self:flex-start;font-size:calc(13*var(--u))}

/* ---------- way we work ---------- */
.sec--grad{display:block;padding:0;background:linear-gradient(180deg,#0a0a09 0%,#171614 100%)}
.sec--grad::before{display:none}
.sec--grad>.wrap{display:grid;grid-template-columns:var(--label-col) minmax(0,1fr);padding-top:var(--sec-top);padding-bottom:var(--sec-bottom)}
.sec--grad .label{padding-top:calc(10*var(--u))}
.way{margin-top:clamp(calc(64*var(--u)),11.7vw,calc(150*var(--u)));display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(23*var(--u))}
.way__col{border-top:1px solid #26241f;padding-top:calc(28*var(--u))}
.label--inline{padding-top:0!important}
.way h3{margin-top:calc(20*var(--u))}
.way p:last-child{margin-top:calc(20*var(--u));font-size:calc(14*var(--u));line-height:2;color:var(--soft);max-width:30em}

/* ---------- process ---------- */
.months{grid-column:1/-1;margin-top:clamp(calc(56*var(--u)),10.3vw,calc(130*var(--u)));display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(24*var(--u))}
.month{border-top:1px solid var(--ink);padding-top:calc(28*var(--u))}
.month h3{margin-top:calc(20*var(--u));font-weight:300;font-size:clamp(calc(24*var(--u)),2.34vw,calc(30*var(--u)));line-height:1.2}
.month ul{margin-top:calc(50*var(--u))}
.month li{border-top:1px solid var(--line);padding:calc(17*var(--u)) 0 calc(18*var(--u));font-size:calc(14*var(--u));line-height:1.4}

/* ---------- flow ---------- */
.flow{grid-column:1/-1;margin-top:clamp(calc(56*var(--u)),6.2vw,calc(80*var(--u)));display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(21*var(--u))}
.flow li{border-top:1px solid var(--ink);padding-top:calc(24*var(--u))}
.flow__no{font-family:var(--en);font-size:calc(16*var(--u));color:var(--muted)}
.flow h3{margin-top:calc(12*var(--u));font-weight:300;font-size:calc(24*var(--u));line-height:1.2}
.flow p{margin-top:calc(18*var(--u));font-size:calc(13*var(--u));line-height:1.9;color:var(--muted);max-width:19em}

/* ---------- pricing ---------- */
.plans{grid-column:1/-1;margin-top:clamp(calc(56*var(--u)),6.2vw,calc(80*var(--u)));display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(24*var(--u));align-items:stretch}
.plan{display:flex;flex-direction:column;padding:calc(36*var(--u)) calc(29*var(--u)) calc(40*var(--u));background:var(--card-2)}
.plan__tag{font-family:var(--en);font-size:calc(12*var(--u));letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.plan h3{margin-top:calc(14*var(--u));font-weight:300;font-size:calc(26*var(--u));line-height:1.2}
.plan__price{margin-top:calc(22*var(--u));font-weight:300;font-size:clamp(calc(30*var(--u)),2.87vw,calc(36.8*var(--u)));line-height:1.2;letter-spacing:.01em}
.plan__price small{margin-left:calc(16*var(--u));font-size:calc(14*var(--u));font-weight:400;letter-spacing:0}
.plan__term{margin-top:calc(20*var(--u));font-size:calc(12*var(--u));color:var(--muted)}
.plan ul{margin-top:calc(26*var(--u))}
.plan li{border-top:1px solid var(--line);padding:calc(13*var(--u)) 0 calc(14*var(--u));font-size:calc(13*var(--u));line-height:1.3}
.plan__note{margin-top:auto;padding-top:calc(40*var(--u));font-size:calc(12*var(--u));line-height:1.8;color:var(--muted)}
.plan .link-arrow{margin-top:calc(26*var(--u));align-self:flex-start;font-size:calc(13*var(--u))}
.plan--main{background:var(--ink);color:var(--bg)}
.plan--main .plan__tag,.plan--main .plan__term,.plan--main .plan__note{color:var(--bg)}
.plan--main li{border-color:rgba(10,10,9,.25)}

/* ---------- faq ---------- */
.faq{grid-template-columns:var(--label-col) minmax(0,1fr)}
.faq__head .h-xl{margin-top:calc(24*var(--u))}
.faq__head .label{padding-top:calc(10*var(--u))}
.faq__list{border-bottom:1px solid var(--line)}
.faq__item{border-top:1px solid var(--line)}
.faq__q{display:flex;align-items:flex-start;justify-content:space-between;gap:calc(24*var(--u));width:100%;padding:calc(28*var(--u)) 0;background:none;border:0;cursor:pointer;text-align:left;color:var(--ink);font-family:inherit;font-weight:300;font-size:clamp(calc(18*var(--u)),1.72vw,calc(22*var(--u)));line-height:1.4;transition:opacity .3s}
.faq__q:hover{opacity:.6}
.faq__icon{position:relative;flex:0 0 auto;width:calc(11*var(--u));height:calc(11*var(--u));margin-top:.52em}
.faq__icon::before,.faq__icon::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:currentColor;transition:transform .5s var(--ease),opacity .5s var(--ease)}
.faq__icon::after{transform:rotate(90deg)}
.faq__q[aria-expanded="true"] .faq__icon::after{transform:rotate(0deg);opacity:0}
.faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease)}
.faq__a>div{overflow:hidden}
.faq__item.is-open .faq__a{grid-template-rows:1fr}
.faq__a p{margin:0;padding:0 0 calc(28*var(--u));font-size:calc(14*var(--u));line-height:1.9;color:var(--muted);max-width:calc(660*var(--u))}

/* ---------- contact ---------- */
.contact .lead{margin-top:calc(56*var(--u))}
.contact__actions{margin-top:calc(60*var(--u));display:flex;flex-wrap:wrap;align-items:center;gap:calc(22*var(--u)) calc(36*var(--u))}
.btn{display:inline-flex;gap:calc(14*var(--u));align-items:center;padding:calc(20*var(--u)) calc(36*var(--u));background:var(--ink);color:var(--bg);font-size:calc(15*var(--u));line-height:1.2;transition:gap .35s var(--ease),background .3s}
.btn:hover{gap:calc(22*var(--u));background:#fff}
.contact__status{margin-top:calc(34*var(--u));font-size:calc(12*var(--u))}
.contact__seminar{margin-top:calc(74*var(--u));font-size:calc(13*var(--u));color:var(--muted)}
.contact__seminar a{border-bottom:1px solid currentColor;white-space:nowrap}

/* ---------- footer ---------- */
.site-footer{padding-top:calc(124*var(--u));padding-bottom:calc(calc(56*var(--u)) + env(safe-area-inset-bottom,0px))}
.site-footer__brand{display:flex;flex-direction:column;align-items:center;text-align:center}
.site-footer__mark{width:calc(44*var(--u));aspect-ratio:57.12/70.22;height:auto;fill:var(--ink)}
.site-footer__logo{margin-top:calc(26*var(--u));width:clamp(calc(200*var(--u)),22.2vw,calc(284*var(--u)));aspect-ratio:152/17;height:auto;fill:var(--ink)}
.site-footer__tag{margin-top:calc(24*var(--u));font-family:var(--en);font-size:calc(13*var(--u));letter-spacing:.1em;text-transform:uppercase;color:rgba(233,229,218,.75)}
.lc{text-transform:none}   /* 社名は小文字のまま */
.site-footer__bottom{margin-top:calc(220*var(--u));padding-top:calc(28*var(--u));border-top:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:space-between;gap:calc(10*var(--u)) calc(24*var(--u));font-family:var(--en);font-size:calc(12*var(--u));letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* ---------- reveal ---------- */
/* ファーストビューの見出しだけ：行ごとにマスクされた状態から下→上へ（main.js で行を分割） */
.js-rv .hero :is(.hero__kicker,.hero__title,.hero__sub):not(.tx){visibility:hidden}
.tx .ln{display:block;overflow:hidden;padding:.18em 0 .2em;margin:-.18em 0 -.2em}   /* 上下に余裕を持たせて文字が切れないように */
.tx .ln__in{display:block;transform:translate3d(0,calc(100% + .3em),0);transition:transform 1.25s cubic-bezier(.2,.75,.1,1);transition-delay:calc(var(--d,0ms) + var(--li,0) * 110ms);will-change:transform}
.tx.is-in .ln__in{transform:none}
/* ファーストビュー以外：スクロールでふわっとフェードインするだけ */
.js-rv [data-rv]{opacity:0;transition:opacity 1.1s cubic-bezier(.33,0,.2,1);transition-delay:var(--d,0ms)}
.js-rv [data-rv].is-in{opacity:1}
/* ファーストビュー：ヘッダー・マーク・見出し・下の行を同じタイミングで表示し、最後に球体 */
:root{--hero-d:.6s;--sphere-d:.5s}   /* まずテキストなど（--hero-d）→ 出そろうころに球体（--sphere-d） */
.js-rv .hero__mark{opacity:0}
.hero-go .hero__mark{animation:heroIn 1.25s var(--ease) var(--hero-d) both,markSpin 12s cubic-bezier(.45,0,.55,1) calc(var(--hero-d) + 2.5s) infinite}   /* 一定時間ごとに1回転 */
@keyframes markSpin{0%,75%{transform:perspective(420px) rotateY(0deg)}100%{transform:perspective(420px) rotateY(360deg)}}   /* 右奥へ1回転 */
/* ファーストビュー下部：マスクの中で下から上へリビール */
.mk{display:inline-block;overflow:hidden;vertical-align:bottom;padding:.3em 0 .1em;margin:-.3em 0 -.1em}
.mk__in{display:block}
.js-rv .mk__in{transform:translate3d(0,calc(100% + .4em),0)}
.hero-go .mk__in{transform:none;transition:transform 1.25s cubic-bezier(.2,.75,.1,1) var(--hero-d)}
.hero .tx .ln__in{transition-delay:var(--hero-d)}
.hero .hero__title .ln__in{transition-delay:calc(var(--hero-d) + var(--li,0) * 90ms)}  /* 見出しは2行目を遅らせる */
/* 球体：最後にふわっとフェードイン */
.js-rv .bg-sphere{opacity:0}
.hero-go .bg-sphere{animation:sphereIn 2s cubic-bezier(.33,0,.2,1) var(--sphere-d) both}
@keyframes sphereIn{from{opacity:0}to{opacity:1}}
@keyframes heroIn{from{opacity:0;transform:translateY(calc(14*var(--u)))}to{opacity:1;transform:none}}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:1100px){
  :root{--label-col:37%}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .card{min-height:calc(260*var(--u))}
  .flow{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:calc(48*var(--u))}
  .topics li{grid-template-columns:calc(72*var(--u)) minmax(0,1fr);row-gap:calc(12*var(--u))}
  .topics__a{grid-column:2}
}
@media (max-width:900px){
  .gnav{position:fixed;inset:0;z-index:-1;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:6px;padding:0 var(--gut) calc(64px + env(safe-area-inset-bottom,0px));background:#000;opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility .5s}
  .gnav a{display:block;overflow:hidden;padding:.08em 0;font-size:clamp(32px,9.5vw,50px);line-height:1;letter-spacing:-.01em;font-weight:400;color:var(--ink)}
  .gnav a > span{display:block;transform:translate3d(0,110%,0);transition:transform .7s var(--ease)}
  .gnav.is-open{opacity:1;visibility:visible}
  .gnav.is-open a > span{transform:none}
  .gnav.is-open a:nth-child(2) > span{transition-delay:.05s}
  .gnav.is-open a:nth-child(3) > span{transition-delay:.1s}
  .gnav.is-open a:nth-child(4) > span{transition-delay:.15s}
  .gnav.is-open a:nth-child(5) > span{transition-delay:.2s}
  .menu-btn{display:block}
  .sec,.sec--grad>.wrap{grid-template-columns:calc(44*var(--u)) minmax(0,1fr);column-gap:calc(14*var(--u))}   /* スマホ：縦ラベル＋右寄せ本文 */
  .faq{grid-template-columns:1fr}
  .sec>.label,.sec--grad>.wrap>.label{writing-mode:vertical-rl;transform:none;justify-self:start;padding-top:calc(4*var(--u));margin:0;white-space:nowrap;font-size:calc(10*var(--u));letter-spacing:.12em}
  .h-xxl,.h-xl{font-size:clamp(19px,5.2vw,28px)}   /* スマホ：意図した改行が1行に収まるサイズ */
  .h-l,#profile .h-l{font-size:clamp(18px,4.9vw,26px)}
  #philosophy .h-xl{font-size:clamp(20px,5.6vw,30px)}
  .faq__head .label{padding-top:0;margin-bottom:calc(24*var(--u))}
  .label--inline{writing-mode:horizontal-tb;transform:none}
  .js-rv :is(.sec>.label,.sec--grad>.wrap>.label)[data-rv]{opacity:1;transition:none}   /* スマホの縦ラベルはモーションなし */
  .facts__list{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:calc(40*var(--u));padding:calc(40*var(--u)) 0 calc(48*var(--u))}
  .way,.months,.plans{grid-template-columns:1fr;gap:calc(48*var(--u))}
  .plans{gap:calc(20*var(--u))}
  .day{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:calc(32*var(--u))}
  .day::before{display:none}
  .faq__list{margin-top:calc(40*var(--u))}
  .faq__q{font-size:calc(15*var(--u));padding:calc(22*var(--u)) 0;gap:calc(16*var(--u))}   /* スマホは少し小さく */
  .faq__a p{font-size:calc(13*var(--u));padding-bottom:calc(22*var(--u))}
  .site-footer__bottom{margin-top:calc(120*var(--u))}
  .hero__place{display:none}
  .hero__foot{justify-content:center}
  .hero__foot .mk:has(.hero__place){display:none}
}
@media (max-width:560px){
  .cards,.flow{grid-template-columns:1fr}
  .flow li{display:grid;grid-template-columns:calc(44*var(--u)) minmax(0,1fr);column-gap:calc(14*var(--u));align-items:start}   /* スマホ：番号＋本文の2カラム */
  .flow__no{grid-row:1/3;padding-top:calc(3*var(--u))}
  .flow h3{grid-column:2;margin-top:0}
  .flow p{grid-column:2;max-width:none}
  .card{min-height:0}
  .topics li{grid-template-columns:calc(48*var(--u)) minmax(0,1fr)}
  .prose br,.lead br,.topics__a br{display:none}
  .profile__stats{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js-rv [data-rv]{opacity:1}
  .js-rv :is(h2,h3,p,dt,dd,li,time){visibility:visible!important}
}

/* WebGL が使えない環境のフォールバック */
.no-webgl .hero,.hero.no-webgl{background:radial-gradient(circle at 50% 52%,#8e5a36 0,#3b2416 22%,#120c08 42%,#050504 70%)}

/* ---------- Lenis（スムーススクロール） ---------- */
html.lenis,html.lenis body{height:auto}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
.lenis [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-smooth iframe{pointer-events:none}

/* ---------- loader ---------- */
.loader{display:none}
.is-loading .loader,.loader.is-done{display:grid;position:fixed;inset:0;z-index:100;place-items:center;background:#050504;transition:opacity 1.6s cubic-bezier(.33,0,.2,1)}
.is-loading,.is-loading body{overflow:hidden}
.loader__ring{width:clamp(16px,1.4vw,calc(20*var(--u)));aspect-ratio:1;border-radius:50%;border:1px solid rgba(233,229,218,.18);border-top-color:var(--ink);opacity:0;animation:loaderFade .8s var(--ease) .15s forwards,loaderSpin 1.4s cubic-bezier(.5,0,.5,1) infinite}
.loader.is-done{opacity:0;pointer-events:none}
.loader.is-done .loader__ring{opacity:0;transform:scale(.8);transition:opacity .9s var(--ease),transform 1.2s var(--ease);animation:none}
@keyframes loaderFade{to{opacity:1}}
@keyframes loaderSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.loader{display:none!important}}

:root.from-loader{--hero-d:.15s;--sphere-d:.05s}  /* ローダーのフェードと重ねて出す */

/* ---------- AI - ME - HM band ---------- */
.band{padding:clamp(calc(80*var(--u)),10vw,calc(170*var(--u))) 0;overflow:hidden}
.band__row{display:flex;align-items:center;justify-content:space-between;padding:0 clamp(10px,1.1vw,calc(16*var(--u)));font-family:var(--en);font-weight:300;font-size:13.4vw;line-height:.86;letter-spacing:-.025em;color:var(--ink);white-space:nowrap}
.band__d{font-size:.5em;opacity:.4}
@media (max-width:900px){.band{padding:clamp(56px,14vw,110px) 0}.band__row{font-size:15vw}}