@charset "UTF-8";
/* =========================================================
   S-passo トップ — KUROKITEC の構成/デザイン/モーションを
   S-passo の内容で忠実再現（素材・ロゴ・コピーは全てS-passo独自）。
   参考実測トークン: Oswald / Zen Kaku Gothic New /
   grad #f7797d→#fbd786→#b0f0c8 / ink #252525 / dark #1f1f1f
   ========================================================= */
:root{
  /* S-passo ブランド：青（ロゴのビビッドブルー）＋黒 */
  --bg:#f4f6fb;
  --bg-2:#fff;
  --ink:#141821;              /* 黒に近い */
  --ink-2:#3b4557;
  --gray:#8b93a5;
  --line:#e1e6f0;
  --blue:#2563eb;            /* アクセントの青（ロゴ／Philosophy／お問い合わせ） */
  --navy:#14305f;            /* セリフ見出しの濃紺 */
  --gold:#2563eb;            /* 旧アクセント→青に統一（後方互換） */
  --dark:#0e1626;           /* 黒に近い濃紺：ダークセクション/フッター/円 */
  --grad:linear-gradient(90deg,#1d4ed8 0%,#3b82f6 52%,#8ab4f8 100%);
  --grad-d:linear-gradient(265deg,#1d4ed8 0%,#3b82f6 52%,#8ab4f8 100%);
  --jp:"Zen Kaku Gothic New",system-ui,-apple-system,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  --en:"Oswald",sans-serif;
  --serif-en:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --serif-jp:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --maxw:1252px;
  --ease:cubic-bezier(0.165,0.840,0.440,1.000);      /* out-quart */
  --ease-io:cubic-bezier(0.770,0.000,0.175,1.000);   /* inout-quart */
}
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;overflow-x:clip;}
/* overflow-x:clip（hiddenではなく）— 横スクロールは殺すが scroll container を作らないので
   position:fixed / ScrollTrigger の pin が正しく効く */
body{margin:0;font-family:var(--jp);color:var(--ink);background:var(--bg);line-height:1.85;font-weight:500;letter-spacing:.02em;-webkit-font-smoothing:antialiased;overflow-x:clip;}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4,p{margin:0;}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0;}
::selection{background:#39f6;}

.arw{display:inline-block;transition:transform .35s var(--ease);}
a:hover .arw{transform:translateX(5px);}
.textlink{display:inline-flex;align-items:center;gap:.6em;font-family:var(--en);font-weight:600;letter-spacing:.05em;font-size:.94rem;}

/* ============ HEADER ============ */
/* 従来のロゴと同じ仕様に統一：常に透過＋mix-blend-mode:difference（背景に応じて自動反転）。
   濃紺バー(.is-solid)・ダークスクリム(::before)・CTAピルは廃止。 */
.hd{position:fixed;inset:0 0 auto 0;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:clamp(1.1rem,2.6vw,2rem) clamp(1.2rem,3.4vw,3rem);
  color:#fff;mix-blend-mode:difference;pointer-events:none;}
.hd__logo{font-family:var(--en);font-weight:700;font-size:clamp(1.15rem,1.9vw,1.5rem);letter-spacing:.02em;
  color:#fff;text-transform:none;white-space:nowrap;pointer-events:auto;}
.hd__nav{display:flex;align-items:center;gap:clamp(1rem,2.2vw,2rem);pointer-events:auto;}
.hd__nav a{position:relative;font-family:var(--jp);font-weight:700;font-size:clamp(.85rem,1vw,.96rem);
  letter-spacing:.03em;color:#fff;white-space:nowrap;padding:.4em 0;}
/* difference合成下では別色を足すと不自然になるので、下線は currentColor のみで反応させる */
.hd__nav a::after{content:"";position:absolute;left:0;right:100%;bottom:.02em;height:2px;
  background:currentColor;transition:right .32s var(--ease);}
.hd__nav a:hover::after{right:0;}
.hd__menu{display:none;flex-direction:column;align-items:center;gap:.15em;color:#fff;pointer-events:auto;}
.hd__menuicon{width:clamp(38px,3.4vw,46px);height:clamp(38px,3.4vw,46px);display:block;animation:spin 22s linear infinite;}
.hd__menuicon svg{width:100%;height:100%;}
.hd__menutxt{font-family:var(--en);font-weight:600;font-size:.72rem;letter-spacing:.16em;}
@keyframes spin{to{transform:rotate(360deg);}}
/* ≤1000px：インラインナビ→ハンバーガー（既存オーバーレイ） */
@media (max-width:1000px){
  .hd__nav{display:none;}
  .hd__menu{display:flex;}
}

/* ============ OVERLAY NAV ============ */
.ov{position:fixed;inset:0;z-index:55;background:var(--dark);color:#fff;
  display:flex;align-items:center;justify-content:center;
  clip-path:circle(0% at calc(100% - 60px) 52px);transition:clip-path .7s var(--ease-io);visibility:hidden;}
.ov.is-open{clip-path:circle(150% at calc(100% - 60px) 52px);visibility:visible;}
.ov__nav{display:flex;flex-direction:column;gap:clamp(.4rem,1.4vw,1rem);}
.ov__nav a{font-family:var(--jp);font-weight:900;font-size:clamp(1.6rem,4.6vw,3rem);line-height:1.2;display:flex;align-items:baseline;gap:1em;opacity:0;transform:translateY(24px);transition:color .3s;}
.ov.is-open .ov__nav a{opacity:1;transform:none;transition:opacity .6s var(--ease),transform .6s var(--ease);}
.ov.is-open .ov__nav a:nth-child(1){transition-delay:.18s}.ov.is-open .ov__nav a:nth-child(2){transition-delay:.24s}
.ov.is-open .ov__nav a:nth-child(3){transition-delay:.30s}.ov.is-open .ov__nav a:nth-child(4){transition-delay:.36s}
.ov.is-open .ov__nav a:nth-child(5){transition-delay:.42s}.ov.is-open .ov__nav a:nth-child(6){transition-delay:.48s}
.ov__nav a:hover{color:var(--gold);}
.ov__en{font-family:var(--en);font-weight:500;font-size:.42em;letter-spacing:.14em;color:var(--gray);}
body.nav-open{overflow:hidden;}

/* ============ HERO (sticky scroll scene) ============
   .hero = 縦に長いスクロール軌道 / .hero__sticky = 画面に貼り付く1画面ぶん。
   スクロールに連れて中の円が成長し、リード文が出る（pinを使わずstickyで実現＝Lenisと干渉しない） */
.hero{position:relative;height:330svh;background:var(--bg);}
.hero__sticky{position:sticky;top:0;height:100svh;min-height:620px;overflow:hidden;background:var(--bg);}
.hero__view{position:absolute;inset:0;overflow:hidden;}
/* 成長する円マスク（全面）— 中に傾いた写真グリッド */
.hero__circle{position:absolute;inset:0;background:var(--dark);
  clip-path:circle(var(--cs,15%) at 50% 50%);will-change:clip-path;}
.hero__plane{position:absolute;top:50%;left:50%;width:160%;height:176%;
  transform:translate(-50%,-50%) perspective(1700px) rotateX(6deg) rotateZ(-6.5deg);
  transform-origin:center center;overflow:hidden;}
.hero__grid{position:absolute;inset:-8%;display:grid;grid-template-columns:repeat(5,1fr);grid-auto-rows:1fr;gap:8px;will-change:transform;}
.hg{overflow:hidden;background:#111;border-radius:2px;}
.hg img{width:100%;height:100%;object-fit:cover;filter:saturate(1.02) brightness(.94);}
/* リード文の可読性を上げる暗幕（左から） */
.hero__veil{position:absolute;inset:0;z-index:4;opacity:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(9,15,28,.88) 0%,rgba(9,15,28,.68) 34%,rgba(9,15,28,.2) 62%,rgba(9,15,28,0) 82%);}
/* 縦組みタイトル（右・mix-blendで写真上に浮く）
   ★必ず2列（地域の事業に、／次の一歩を。）で表示する。
     縦組みでは1列の長さ＝文字数×(1em＋字間.05em)。長い方は7文字なので 7.35em。
     これが画面の高さを超えると勝手に折り返して3列になり崩れるため、
     フォントサイズを「幅」だけでなく「高さ」でも頭打ちにする（→ --vt-fs）。
     10rem は上下の逃げ（ヘッダーのナビ下端72px＋下の余白）。
     white-space:nowrap は保険（フォント差で計算がわずかにずれても折り返させない）。
   ※min-height:620px の .hero__sticky を基準にすると、ビューポートが620px未満の
     ときに中央揃えが画面外にずれるので、高さは min(100%,100svh) で受ける。 */
.hero__vtitle{position:absolute;top:0;right:clamp(.8rem,3vw,3rem);height:min(100%,100svh);z-index:6;
  display:flex;flex-direction:row-reverse;align-items:center;gap:.02em;
  color:#fff;mix-blend-mode:difference;pointer-events:none;
  --vt-fs:min(clamp(2.2rem,7vw,6.4rem), calc((100svh - 10rem) / 7.4));}
.hero__vtitle span{writing-mode:vertical-rl;font-weight:900;white-space:nowrap;
  font-size:var(--vt-fs);line-height:1.04;letter-spacing:.05em;}
/* 写真グリッドの上に出るリード文（左） */
.hero__lead{position:absolute;left:clamp(1.2rem,5vw,5rem);top:50%;transform:translateY(-50%);z-index:6;opacity:0;
  width:min(52vw,540px);color:#fff;display:flex;flex-direction:column;gap:clamp(.9rem,2.3vw,1.7rem);}
.hero__lead p{font-weight:700;font-size:clamp(.98rem,1.65vw,1.42rem);line-height:1.85;letter-spacing:.03em;
  text-shadow:0 2px 26px rgba(0,0,0,.55);}
.hero__lead p span{display:block;}
/* PC：リード文（左）と縦タイトル（右）が画面の端に寄りすぎるので、中央側へ引き込む。
   1180pxの中央寄せ枠を基準にし、画面が広いほど内側へ寄る（＝広い画面での間延びを防ぐ）。
   ※1100px以下は元のまま。狭い幅で内側に寄せると左右が衝突するため。 */
@media (min-width:1101px){
  /* 追い込み量は1100pxから徐々に増やす（境界で位置が飛ばないように） */
  .hero__lead{left:calc(max(3rem, (100% - 1180px) / 2) + clamp(0px, (100% - 1100px) * 0.4, 7rem));}
  .hero__vtitle{right:calc(max(3rem, (100% - 1180px) / 2) + clamp(0px, (100% - 1100px) * 0.34, 6rem));}
}
.hero__scroll{position:absolute;left:clamp(1.4rem,4vw,4.4rem);bottom:1.2rem;z-index:7;
  font-family:var(--en);font-weight:500;font-size:.72rem;letter-spacing:.2em;color:var(--ink);
  display:flex;align-items:center;gap:.7em;mix-blend-mode:difference;}
.hero__scroll i{width:1px;height:34px;background:currentColor;position:relative;overflow:hidden;display:inline-block;}
.hero__scroll i::after{content:"";position:absolute;inset:0;background:#fff;animation:scrolline 1.8s var(--ease) infinite;}
@keyframes scrolline{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

/* ============ STAGE（曲線トップの白シート＝次セクション群が下からせり上がる） ============ */
.stage{position:relative;z-index:2;background:var(--bg);
  margin-top:calc(-1 * clamp(80px,16vh,190px));
  border-radius:50% 50% 0 0 / clamp(70px,15vh,180px) clamp(70px,15vh,180px) 0 0;
  box-shadow:0 -40px 60px -20px rgba(20,20,20,.28);}

/* ============ PHILOSOPHY（理念）— ヒーローと同じ sticky ピン留めシーン ============ */
.philo{position:relative;height:260svh;background:var(--bg);}
.philo__sticky{position:sticky;top:0;height:100svh;min-height:620px;overflow:hidden;
  display:grid;place-items:center;text-align:center;padding:clamp(6rem,12vh,8rem) clamp(1.2rem,4vw,3rem) clamp(3rem,7vh,5rem);}
.philo__bg{position:absolute;inset:0;z-index:0;opacity:0;
  background:url("images/ai.jpg") center/cover no-repeat;}
.philo__bg::after{content:"";position:absolute;inset:0;background:rgba(244,246,251,.80);}
.philo__label{position:absolute;top:clamp(5rem,11vh,7rem);left:clamp(1.2rem,4vw,3.4rem);z-index:3;text-align:left;line-height:1.15;}
.philo__mark{display:block;font-weight:700;font-size:clamp(.72rem,1vw,.85rem);letter-spacing:.14em;color:var(--blue);margin-bottom:.3em;}
.philo__label b{font-family:var(--en);font-weight:700;font-size:clamp(1.5rem,2.8vw,2.2rem);letter-spacing:.01em;color:var(--blue);}
/* head と body は同じ中央位置に重ね、スクロールで入れ替える（＝2画面） */
.philo__head,.philo__body{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  z-index:2;width:min(94vw,var(--maxw));padding-inline:clamp(1rem,3vw,2rem);}
.philo__big{font-family:var(--serif-en);font-weight:600;text-transform:uppercase;color:var(--navy);
  font-size:clamp(3rem,10.4vw,9.6rem);line-height:1.02;letter-spacing:.005em;}
.philo__big span{display:block;}
.philo__sub{margin-top:clamp(2.2rem,4.6vw,3.4rem);font-weight:700;letter-spacing:.05em;color:var(--ink);
  font-size:clamp(1rem,2vw,1.55rem);}
.philo__body p{font-family:var(--serif-jp);font-weight:600;color:var(--navy);
  font-size:clamp(1.05rem,2vw,1.75rem);line-height:2.05;letter-spacing:.03em;}
.philo__body p + p{margin-top:1.7em;}
/* STATIC / reduced：ピンを解いて縦積みで全文表示 */
.philo.is-static{height:auto;}
.philo.is-static .philo__sticky{position:static;height:auto;min-height:0;display:block;
  padding:clamp(5rem,11vw,9rem) clamp(1.2rem,4vw,3rem);}
.philo.is-static .philo__head,.philo.is-static .philo__body{position:relative;left:auto;top:auto;transform:none;
  margin-inline:auto;opacity:1;}
.philo.is-static .philo__body{margin-top:clamp(3rem,7vw,5rem);}

/* ============ SERVICES 一覧（①横幅大 / ②〜⑤左右交互｜02スライドの構成を踏襲） ============ */
.svc2{max-width:var(--maxw);margin-inline:auto;padding:clamp(3.5rem,8vw,7rem) clamp(1.2rem,3vw,2rem) clamp(4rem,9vw,7rem);
  display:flex;flex-direction:column;gap:clamp(2.8rem,6.5vw,5.4rem);}
.svc2__head{text-align:center;margin-bottom:clamp(.4rem,1.6vw,1.2rem);}
.svc2__label{display:flex;flex-direction:column;align-items:center;gap:.4em;line-height:1.05;}
.svc2__mark{font-weight:700;font-size:clamp(.72rem,1vw,.85rem);letter-spacing:.14em;color:var(--blue);}
.svc2__label b{font-family:var(--serif-en);font-weight:600;text-transform:uppercase;color:var(--navy);
  font-size:clamp(2.4rem,6vw,4.6rem);letter-spacing:.02em;line-height:1.04;}
.svc2__lead{margin-top:clamp(.8rem,2vw,1.2rem);color:var(--ink-2);font-size:clamp(.94rem,1.2vw,1.08rem);line-height:1.9;}
/* 共通アイテム：番号＋ラベル＋大見出し＋サブ＋説明＋画像 */
.sv{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,4.5vw,4rem);align-items:center;}
.sv--rev .sv__media{order:2;}
.sv__media{position:relative;aspect-ratio:4/3;border-radius:20px;overflow:hidden;background:#111;
  box-shadow:0 30px 60px -34px rgba(20,30,60,.4);}
.sv__media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease);}
.sv:hover .sv__media img{transform:scale(1.045);}
.sv__no{font-family:var(--en);font-weight:400;letter-spacing:.08em;color:var(--gray);font-size:clamp(.85rem,1.1vw,1rem);}
.sv__no b{font-weight:700;color:var(--blue);margin-right:.5em;font-size:1.25em;}
.sv__ttl{font-weight:900;color:var(--navy);font-size:clamp(1.6rem,3.4vw,2.7rem);line-height:1.28;margin:.45em 0 .5em;}
.sv__cap{font-weight:700;color:var(--ink);font-size:clamp(1rem,1.5vw,1.28rem);line-height:1.6;margin-bottom:.7em;}
.sv__desc{color:var(--ink-2);max-width:30em;font-size:clamp(.92rem,1.1vw,1.02rem);line-height:2.05;}
/* ① 横幅大フィーチャー：ワイドバナー＋重なりカード */
.sv--wide{display:block;position:relative;}
.sv--wide .sv__media{aspect-ratio:16/6.6;border-radius:26px;}
.sv--wide .sv__body{position:relative;z-index:2;width:min(94%,760px);margin:clamp(-5rem,-8vw,-3.4rem) auto 0;
  background:var(--bg-2);border-radius:20px;box-shadow:0 40px 80px -46px rgba(20,30,60,.5);
  padding:clamp(1.8rem,4vw,3rem) clamp(1.6rem,4vw,3.4rem);}
.sv--wide .sv__ttl{font-size:clamp(2rem,4.6vw,3.4rem);}
.sv--wide .sv__desc{max-width:44em;}
.svc2__more{text-align:center;margin-top:clamp(.4rem,1.6vw,1rem);}

/* ============ FEATURE（選ばれる理由｜officecom MAXHUB FEATUREを忠実再現／配色は青：グレーパネルと写真を隙間なく連結・アウトライン番号・斜め帯） ============ */
.feat{max-width:var(--maxw);margin-inline:auto;padding:clamp(3.5rem,8vw,7rem) clamp(1.2rem,3vw,2rem) clamp(3rem,7vw,5rem);
  display:flex;flex-direction:column;gap:clamp(3rem,7vw,5.5rem);
  --fg:var(--blue);--fl:#9db8f0;}
.feat__head{text-align:center;margin-bottom:clamp(.4rem,2vw,1.4rem);}
.feat__en{font-family:"Arial Black",Arial,var(--jp),sans-serif;font-weight:900;text-transform:uppercase;
  letter-spacing:.005em;font-size:clamp(3rem,9.5vw,7.2rem);line-height:1;color:var(--fg);}
.feat__ttl{font-weight:900;color:#161616;font-size:clamp(1.35rem,3.3vw,2.05rem);margin-top:.02em;letter-spacing:.04em;}
/* 参考どおり：パネルと写真は gap0 で連結。stretchでパネル下端＝写真下の青帯下端まで伸ばして連結 */
.feat__row{display:grid;grid-template-columns:46% 54%;align-items:stretch;gap:0;}
.feat__row--rev{grid-template-columns:54% 46%;}
.feat__row--rev .feat__media{order:-1;}
.feat__card{position:relative;z-index:1;background:#f2f2f2;align-self:stretch;
  padding:clamp(2.8rem,4.6vw,3.6rem) clamp(1.6rem,3vw,2.6rem) clamp(1.8rem,3vw,2.4rem);}
.feat__no{position:absolute;top:clamp(-1rem,-2vw,-1.6rem);left:clamp(1.4rem,3vw,2.4rem);z-index:5;
  display:flex;align-items:flex-end;gap:.4em;line-height:1;}
.feat__slash{font-family:Arial,sans-serif;font-style:italic;font-weight:900;font-size:clamp(2rem,4.4vw,3rem);
  color:#111;transform:skewX(-4deg);margin-right:.15em;}
.feat__no b{font-family:Arial,"Helvetica Neue",sans-serif;font-weight:700;letter-spacing:.12em;
  font-size:clamp(.72rem,1vw,.9rem);color:var(--fg);margin-bottom:.75em;}
.feat__no i{font-family:Arial,"Helvetica Neue",sans-serif;font-style:normal;font-weight:700;
  font-size:clamp(3rem,7vw,5.2rem);line-height:.9;color:transparent;-webkit-text-stroke:1.5px var(--fl);}
.feat__h{font-weight:900;color:#1b1b1b;font-size:clamp(1.3rem,2.6vw,1.9rem);line-height:1.5;margin:.2em 0 .9em;}
.feat__desc{color:#565656;font-size:clamp(.92rem,1.1vw,1.02rem);line-height:2;}
/* 青い斜め帯は廃止（帯とパネルの間に隙間が出るため）。写真下端＝行下端で、パネルとぴったり揃える */
.feat__media{position:relative;z-index:2;display:flex;}
.feat__media img{position:relative;z-index:1;display:block;width:100%;height:100%;
  aspect-ratio:16/10.4;object-fit:cover;}

/* ============ INTERVIEW（お客様の声｜officecom INTERVIEWを忠実再現：白カード＋写真フラッシュ左＋会社名/肩書/青サマリー/本文/丸矢印CTA・配色は青） ============ */
.intv{position:relative;background:var(--bg);padding:clamp(3.5rem,8vw,6.5rem) clamp(1.2rem,4vw,3rem) clamp(4rem,9vw,7rem);}
.intv__head{max-width:var(--maxw);margin:0 auto clamp(2rem,4vw,3rem);text-align:center;}
.intv__en{font-family:"Arial Black",Arial,var(--jp),sans-serif;font-weight:900;text-transform:uppercase;letter-spacing:.005em;
  font-size:clamp(2.6rem,7.5vw,5.6rem);line-height:1;color:var(--blue);}
.intv__ttl{font-weight:900;color:var(--ink);font-size:clamp(1.2rem,2.6vw,1.7rem);margin-top:.1em;letter-spacing:.03em;}
.intv__card{max-width:var(--maxw);margin-inline:auto;display:grid;grid-template-columns:.82fr 1.18fr;gap:0;
  align-items:stretch;background:var(--bg-2);border-radius:4px;box-shadow:0 40px 80px -50px rgba(20,30,60,.35);overflow:hidden;}
.intv__media{background:#111;}
.intv__media img{width:100%;height:100%;object-fit:cover;min-height:clamp(240px,28vw,380px);display:block;}
.intv__body{padding:clamp(1.9rem,3.6vw,3.2rem) clamp(1.8rem,3.6vw,3.4rem);}
.intv__name{font-weight:900;color:var(--ink);font-size:clamp(1.45rem,2.9vw,2.15rem);line-height:1.35;}
.intv__role{font-weight:700;color:var(--ink-2);font-size:clamp(.95rem,1.5vw,1.15rem);margin-top:.5em;}
.intv__sum{font-weight:800;color:var(--blue);margin:1.1em 0 .9em;font-size:clamp(1.02rem,1.5vw,1.28rem);line-height:1.7;}
.intv__txt{color:var(--ink-2);font-size:clamp(.92rem,1.1vw,1.02rem);line-height:2;}
.intv__txt + .intv__txt{margin-top:1em;}
.intv__cta{display:flex;align-items:center;gap:.8em;width:fit-content;margin:1.7em 0 0 auto;
  font-family:var(--jp);font-weight:700;letter-spacing:.02em;color:var(--blue);}
.intv__cta .arw{display:grid;place-items:center;width:2.5em;height:2.5em;border-radius:999px;
  background:var(--blue);color:#fff;font-family:var(--en);font-size:1.05em;line-height:1;transition:transform .3s;}
.intv__cta:hover .arw{transform:translateX(3px);}

/* ============ CAMPAIGN バナー（100社限定 無料HP｜officecom ShowRoomバナーを踏襲） ============ */
.camp{padding:clamp(2rem,5vw,4.5rem) clamp(0px,2vw,2rem);}
.camp__inner{position:relative;max-width:1520px;margin-inline:auto;overflow:hidden;border-radius:6px;
  display:grid;grid-template-columns:42% 58%;min-height:clamp(320px,32vw,460px);}
.camp__photo{position:relative;}
.camp__photo img{width:100%;height:100%;object-fit:cover;}
.camp__panel{position:relative;z-index:2;background:var(--dark);color:#fff;
  margin-left:clamp(-90px,-7vw,-40px);clip-path:polygon(14% 0,100% 0,100% 100%,0 100%);
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(2rem,5vw,3.6rem) clamp(1.6rem,5vw,4.5rem) clamp(2rem,5vw,3.6rem) clamp(4.5rem,10vw,9rem);}
.camp__ghost{position:absolute;top:clamp(.3rem,2vw,1.2rem);right:clamp(1rem,3vw,2.4rem);z-index:0;
  font-family:var(--en);font-weight:700;font-size:clamp(3rem,8vw,7rem);line-height:1;
  color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.16);pointer-events:none;}
.camp__tag{position:relative;z-index:2;align-self:flex-start;background:var(--ink);color:#fff;
  font-weight:800;letter-spacing:.08em;font-size:clamp(.8rem,1.4vw,1rem);padding:.5em 1.5em;margin-bottom:1.1em;
  clip-path:polygon(0 0,100% 0,92% 100%,0% 100%);}
.camp__ttl{position:relative;z-index:2;font-weight:900;font-size:clamp(1.15rem,2.3vw,1.95rem);
  line-height:1.6;letter-spacing:.01em;max-width:22em;}
.camp__ttl em{font-style:normal;color:#8ab4f8;}
.camp__pill{position:relative;z-index:2;display:inline-flex;align-items:center;gap:.7em;
  margin-top:clamp(1.4rem,3vw,2.2rem);align-self:flex-start;background:var(--grad-d);color:#fff;font-weight:700;
  border-radius:999px;padding:.9em 1.7em;font-size:clamp(.88rem,1.3vw,1.06rem);line-height:1.5;
  box-shadow:0 20px 40px -20px rgba(37,99,235,.6);transition:transform .4s var(--ease);}
.camp__pill:hover{transform:translateY(-3px);}

/* ============ MARQUEE ============ */
.marq{overflow:hidden;padding:clamp(1.4rem,3vw,2.6rem) 0;border-block:1px solid var(--line);}
.marq__track{display:flex;width:max-content;will-change:transform;}
.marq__track span{font-family:var(--en);font-weight:700;font-size:clamp(3rem,9vw,8rem);letter-spacing:.02em;line-height:1;
  color:transparent;-webkit-text-stroke:1.4px #b9c4da;display:inline-flex;align-items:center;white-space:nowrap;padding-right:0;}
.marq__dot{width:.5em;height:.5em;border-radius:50%;background:var(--grad-d);-webkit-text-stroke:0;margin:0 .55em;}

/* ============ COLUMN / 日誌 ============ */
.col{position:relative;max-width:var(--maxw);margin-inline:auto;padding:clamp(4rem,9vw,8rem) clamp(1.2rem,3vw,2rem);
  display:grid;grid-template-columns:auto 1fr;gap:clamp(2rem,6vw,6rem);align-items:start;}
.col__head{position:sticky;top:14vh;text-align:center;}
.col__badge{display:inline-block;writing-mode:vertical-rl;font-weight:700;font-size:.82rem;letter-spacing:.14em;
  border:1px solid var(--ink);border-radius:999px;padding:1.1em .3em;margin-bottom:1.4em;}
.col__title{writing-mode:vertical-rl;font-weight:900;font-size:clamp(2.4rem,5vw,4rem);letter-spacing:.14em;line-height:1.1;margin-inline:auto;}
.col__list{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.8rem,3.4vw,2.8rem) clamp(1.6rem,3vw,2.6rem);align-items:start;}
.post{position:relative;display:grid;grid-template-columns:1fr;gap:.9rem;width:100%;}
.post__no{position:absolute;top:-.7em;left:-.4em;z-index:2;width:clamp(46px,4.6vw,58px);height:clamp(46px,4.6vw,58px);
  border-radius:50%;background:var(--dark);color:#fff;display:grid;place-items:center;font-family:var(--en);font-weight:400;font-size:.72rem;letter-spacing:.05em;line-height:1;}
.post__no b{font-weight:700;font-size:1.5em;}
.post__thumb{border-radius:16px;overflow:hidden;aspect-ratio:16/11;background:#111;}
.post__thumb img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease);}
.post:hover .post__thumb img{transform:scale(1.05);}
.post__ttl{font-weight:700;font-size:clamp(1rem,1.4vw,1.18rem);line-height:1.7;padding-right:1em;}
.post__ex{color:var(--gray);font-size:.9rem;line-height:1.8;}
.col__more{grid-column:1/-1;text-align:center;margin-top:clamp(1rem,3vw,2rem);}

/* ============ CONTACT ============ */
.contact{position:relative;margin-top:clamp(3rem,7vw,6rem);padding:clamp(6rem,14vw,12rem) clamp(1.2rem,4vw,3rem) clamp(4rem,8vw,6rem);
  background:var(--dark);border-radius:clamp(60px,12vw,180px) 0 0 0;overflow:hidden;}
.contact__photo{position:absolute;inset:0;z-index:0;}
.contact__photo img{width:100%;height:100%;object-fit:cover;opacity:.32;filter:grayscale(.2);}
.contact::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(31,31,31,.7),rgba(31,31,31,.9));}
.contact__card{position:relative;z-index:2;display:block;max-width:1040px;margin-inline:auto;
  background:var(--grad-d);border-radius:22px;padding:clamp(2.4rem,5vw,4rem) clamp(1.8rem,5vw,4.5rem);
  color:#fff;transition:transform .5s var(--ease),box-shadow .5s var(--ease);box-shadow:0 40px 80px -40px rgba(0,0,0,.5);}
.contact__card:hover{transform:translateY(-4px);}
.contact__big{font-family:var(--en);font-weight:600;font-size:clamp(2.8rem,8vw,7rem);line-height:1;letter-spacing:.01em;color:#fff;display:block;}
.contact__arrow{position:absolute;top:clamp(2.4rem,5vw,4rem);right:clamp(1.8rem,5vw,4.5rem);
  width:clamp(56px,6vw,80px);height:clamp(56px,6vw,80px);border:1.5px solid #fff;border-radius:50%;display:grid;place-items:center;transition:background .3s,color .3s;}
.contact__arrow svg{width:42%;height:42%;}
.contact__card:hover .contact__arrow{background:#fff;color:var(--ink);}
.contact__sub{display:block;margin-top:clamp(1rem,2vw,1.4rem);font-weight:500;font-size:clamp(.9rem,1.1vw,1.02rem);line-height:1.9;}

/* ============ FOOTER ============ */
.ft{background:var(--dark);color:#fff;padding:clamp(3rem,6vw,5rem) clamp(1.2rem,4vw,3rem) clamp(1.6rem,3vw,2.4rem);}
.ft__top{max-width:var(--maxw);margin-inline:auto;display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(2rem,5vw,4rem);
  padding-bottom:clamp(2.4rem,5vw,3.6rem);border-bottom:1px solid #3a3a3a;}
.ft__logo{font-family:var(--en);font-weight:700;font-size:1.6rem;}
.ft__brand p{color:#a9a9a9;font-size:.9rem;line-height:1.9;margin-top:1em;max-width:26em;}
.ft__cols{display:grid;grid-template-columns:repeat(3,auto);gap:clamp(1.4rem,3vw,3rem);justify-content:end;}
.ft__col{display:flex;flex-direction:column;gap:.9em;}
.ft__col a{color:#cfcfcf;font-size:.9rem;transition:color .25s;}
.ft__col a:hover{color:var(--gold);}
.ft__col--sns a{font-family:var(--en);letter-spacing:.05em;}
.ft__bottom{max-width:var(--maxw);margin:clamp(1.4rem,3vw,2rem) auto 0;display:flex;align-items:center;justify-content:space-between;gap:1rem;}
.ft__mark{font-family:var(--en);font-weight:700;font-size:clamp(1.4rem,4vw,2.4rem);color:#3a3a3a;}
.ft__copy{color:#8a8a8a;font-size:.76rem;letter-spacing:.04em;}

/* ============ TO-TOP ============ */
.totop{position:fixed;right:20px;bottom:20px;z-index:50;width:46px;height:46px;border-radius:50%;background:var(--ink);color:#fff;
  display:grid;place-items:center;opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .4s,transform .4s,background .3s;}
.totop.is-on{opacity:1;transform:none;pointer-events:auto;}
.totop:hover{background:var(--gold);}

/* ============ REVEAL ============ */
[data-reveal]{opacity:0;transform:translateY(34px);}

/* ============ RESPONSIVE ============ */
@media (max-width:900px){
  .sv{grid-template-columns:1fr;gap:clamp(1.2rem,5vw,2rem);}
  .sv--rev .sv__media{order:0;}
  .sv__media{aspect-ratio:16/10;}
  .sv--wide .sv__media{aspect-ratio:16/9;}
  .sv--wide .sv__body{width:92%;margin-top:clamp(-3.4rem,-11vw,-2rem);}
  .feat__row,.feat__row--rev{grid-template-columns:1fr;gap:clamp(1.4rem,5vw,2rem);}
  .feat__row--rev .feat__media{order:0;}
  .intv__card{grid-template-columns:1fr;}
  .intv__media img{min-height:clamp(200px,52vw,320px);}
  .intv__body{padding:clamp(1.4rem,5vw,2rem) clamp(1.4rem,5vw,2rem) clamp(1.8rem,5vw,2.4rem);}
  .camp__inner{grid-template-columns:1fr;}
  .camp__panel{margin-left:0;clip-path:none;padding:clamp(1.8rem,6vw,2.6rem) clamp(1.4rem,6vw,2.4rem);}
  .col{grid-template-columns:1fr;gap:clamp(1.6rem,5vw,2.4rem);}
  .col__head{position:static;display:flex;align-items:center;gap:1.2em;justify-content:center;}
  .col__badge{margin-bottom:0;}
  .col__title{writing-mode:horizontal-tb;}
  .post{width:100%;}
  .ft__top{grid-template-columns:1fr;}
  .ft__cols{justify-content:start;grid-template-columns:repeat(3,1fr);}
}
@media (max-width:900px){
  .hero__plane{width:184%;height:184%;transform:translate(-50%,-50%) perspective(1500px) rotateX(5deg) rotateZ(-5deg);}
  .hero__lead{width:min(72vw,460px);}
  /* 幅の上限だけ差し替える。高さでの頭打ち（7.4em＝2列に収める条件）は共通のまま */
  .hero__vtitle{--vt-fs:min(clamp(2rem,9vw,4rem), calc((100svh - 10rem) / 7.4));}
}
@media (max-width:600px){
  /* ===== スマホ版ヒーロー：KUROKITECスマホ版(390x844)の実測値に合わせる =====
       縦組みタイトル … 画面中央 / 41.6px / line-height 1.0 / weight 700 / 字間0
       リード文       … 左右30px / 15px / line-height 33.75px(=2.25) / 700 / 影なし
       段落間         … 38px
     いずれも 844px高を基準にした比率(41.6/844=4.93svh, 15/844=1.78svh, 38/844=4.5svh)で
     svhに連動させ、背の低い端末でも同じ見え方のまま1画面に収める。
     ★min-height:620px はスマホだと「箱がビューポートより高くなり下が見切れる」原因に
       なるので解除する（リード文4段目が読めなくなっていた直接原因のひとつ）。 */
  .hero__sticky{min-height:0;}
  .hero__vtitle{left:0;right:0;top:clamp(4.2rem,9.5svh,5.8rem);height:auto;
    flex-direction:row-reverse;align-items:flex-start;justify-content:center;gap:0;}
  .hero__vtitle span{font-size:clamp(22px,4.93svh,41.6px);line-height:1;letter-spacing:0;font-weight:700;}
  /* 下端は SCROLL インジケータ（bottom 1.2rem＋高さ34px＝53.2px）と、
     せり上がる白シート .stage の両方を必ず避ける高さに置く */
  .hero__lead{left:min(30px,7.7vw);right:min(30px,7.7vw);top:auto;
    bottom:clamp(62px,10svh,96px);transform:none;width:auto;
    gap:clamp(13px,4.5svh,38px);}
  /* スマホでは白シートのかぶり量を浅くする。
     デスクトップ用の16vh(=最大190px)のままだと、軌道の終端でリード文の
     最終段を飲み込んでしまう（＝4段目が読めなくなる原因） */
  .stage{margin-top:calc(-1 * clamp(56px,8vh,90px));
    border-radius:50% 50% 0 0 / clamp(48px,7vh,80px) clamp(48px,7vh,80px) 0 0;}
  .hero__lead p{font-size:clamp(12.5px,1.78svh,15px);line-height:2.25;font-weight:700;
    letter-spacing:0;text-shadow:none;}
  /* 参考同様、影ではなく背景を暗くして可読性を確保する */
  .hero__veil{background:linear-gradient(180deg,rgba(9,15,28,.50) 0%,rgba(9,15,28,.70) 42%,rgba(9,15,28,.88) 100%);}
  .col__list{grid-template-columns:1fr;}
  .ft__cols{grid-template-columns:1fr 1fr;}
  .contact__arrow{position:static;margin-top:1.2rem;}
}

/* 背の低い端末（iPhone SE等、ブラウザUI込みで実効640px以下）だけ、
   縦組みタイトルと行間を追加で詰める。リード文4段が縦タイトルとも
   SCROLLとも重ならないようにするための保険。 */
@media (max-width:600px) and (max-height:640px){
  .hero__vtitle{top:clamp(3.2rem,7svh,4.4rem);}
  .hero__vtitle span{font-size:clamp(18px,3.6svh,26px);}
  .hero__lead{gap:clamp(12px,3.4svh,24px);}
  .hero__lead p{line-height:2.0;}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important;}
  [data-reveal]{opacity:1!important;transform:none!important;}
  .hero{height:100svh!important;}
  .hero__circle{clip-path:circle(90% at 50% 50%)!important;}
  .hero__veil{opacity:1!important;}
  .hero__lead{opacity:1!important;}
}