@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;
  --maru:"Zen Maru Gothic","ヒラギノ丸ゴ ProN","Hiragino Maru Gothic ProN",var(--jp);  /* OUR SERVICE の丸ゴシック見出し */
  --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;}
/* flex:none＝狭い幅で縮まないようにする（縮むと MENU の字が丸アイコンからはみ出す） */
.hd__menu{display:none;flex:none;flex-direction:column;align-items:center;gap:.15em;color:#fff;pointer-events:auto;}
/* ふつうの三本線（2026-07-30 ユーザー指示。旧＝回転する円＋放射線のSVG）。
   バー2px×3本＋gap6px＝高さ18px。中心からの距離が8pxなので、
   開いたときは上下を translateY(±8px) して×にする。
   ★色は必ず currentColor。.hd は mix-blend-mode:difference なので固定色だと破綻する。 */
.hd__menuicon{display:flex;flex-direction:column;justify-content:center;gap:6px;
  width:28px;height:18px;}
.hd__menuicon i{display:block;width:100%;height:2px;background:currentColor;border-radius:2px;
  transition:transform .32s var(--ease),opacity .18s linear;}
.hd__menu[aria-expanded="true"] .hd__menuicon i:nth-child(1){transform:translateY(8px) rotate(45deg);}
.hd__menu[aria-expanded="true"] .hd__menuicon i:nth-child(2){opacity:0;}
.hd__menu[aria-expanded="true"] .hd__menuicon i:nth-child(3){transform:translateY(-8px) rotate(-45deg);}
.hd__menutxt{font-family:var(--en);font-weight:600;font-size:.72rem;letter-spacing:.16em;margin-top:.42em;}
@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:.75em;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);}
/* 英字ラベルは固定幅にして、後続の日本語ラベルの文頭を全行で揃える（幅は自身のfont-size基準・最長"Services"=4.35em） */
.ov__en{font-family:var(--en);font-weight:500;font-size:.42em;letter-spacing:.14em;color:var(--gray);flex:0 0 4.6em;}
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;}
/* 成長する円マスク（全面）— 中は画面全体を覆う1枚写真 */
.hero__circle{position:absolute;inset:0;background:var(--dark);
  clip-path:circle(var(--cs,15%) at 50% 50%);will-change:clip-path;}
/* 写真は全部重ねて置き、可視の1枚（.is-on）だけを差し替える。
   ★transitionを一切付けない＝フェードせず瞬間で切り替わる（短いカットの連続）。
   inset:-8% は、下のドリフト（yPercent±10・scale1.04→1.12）で端に隙間が出ないための余白。 */
.hero__cuts{position:absolute;inset:-8%;will-change:transform;}
.hcut{position:absolute;inset:0;opacity:0;}
.hcut.is-on{opacity:1;}
.hcut 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;}
/* 1文字ずつ現れさせるための箱。inline-block にしないと transform が効かない。
   縦組みの送り（1em＋字間.05em）は inline でも inline-block でも同じなので、
   上の「7.4で頭打ち＝必ず2列」の計算は変わらない。<i> の既定の斜体は消す。 */
.hero__vtitle span i{display:inline-block;font-style:normal;}
/* 背景写真の上に出るリード文（左）＝縦書き3列。
   row-reverse なので DOM順のまま「右の列から左へ」読む並びになる。
   ★列の長さは文字数で決まる（1文字＝1em＋字間.03em）。最長列は26文字＝約26.8em なので、
     縦タイトルと同じ考え方で font-size を「高さ」でも頭打ちにし、画面からはみ出させない。
   ★下端は「せり上がる白シート .stage の被り量」より上に置くこと。
     .stage は margin-top で clamp(80px,16vh,190px) ぶんヒーローに食い込むので、
     中央揃え（top:50%）のままだと軌道の終わりで最終列の下が飲み込まれる（＝見切れ）。
     そこで top/bottom で「ヘッダー下〜白シートの上」の帯を枠として決め、その中で中央に置く。
     5.5rem＝ヘッダーのナビ下端72px＋余白。 */
.hero__lead{position:absolute;left:clamp(1.2rem,5vw,5rem);top:5.5rem;
  bottom:calc(clamp(80px,16vh,190px) + 1.2rem);transform:none;z-index:6;opacity:0;
  width:auto;color:#fff;display:flex;flex-direction:row-reverse;align-items:center;
  gap:clamp(.1rem,.6vw,.5rem);
  --ld-fs:min(clamp(.98rem,1.65vw,1.42rem),
             calc((100svh - 5.5rem - 1.2rem - clamp(80px,16vh,190px)) / 27));}
.hero__lead p{writing-mode:vertical-rl;white-space:nowrap;
  font-weight:700;font-size:var(--ld-fs);line-height:1.85;letter-spacing:.03em;
  text-shadow:0 2px 26px rgba(0,0,0,.55);}
/* 縦中横（2文字の英字を1マスに正立させる） */
.hero__lead .tcy{text-combine-upright:all;}
/* 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.webp") 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);}

/* ============ OUR SERVICE（cra-pro.jp の同名セクションを実測して忠実再現／配色のみ青） ============
   ▼ 実測値（1280px幅・参考サイト）
     見出し 46px/700 丸ゴシック lh78.2 ／ サブ 15px/700 lh25.5 ／ 注釈 10px/700 lh14
     吹き出しブロック 951x652（中の人物枠 422x514・背景画像は bottom center）
     「昨今では〜」29px/700 lh49.3 ／ 強調箱 padding 8px 8px 8px 20px・右マージン15px
     「そこで！〜」44px/700 lh74.8
     カード 360x441・角丸15px・padding 27px 0 50px・間隔27px（3枚で1160px）
       タイトル 23px/700 lh32.2 ／ 円 176x176・枠3px・角丸100px ／ 説明 15px/700 lh21
     矢印線 1160x98 ／ 「手間と費用を」29px/700 ／ 下段 26px/700 lh44.2・強調箱 35px/700 lh59.5
   ▼ 置き換えた配色（参考→S-passo）
     赤 #e82114 → var(--blue) ／ 吹き出し黄 #ffdc7c → #cfe0fb（文字 var(--navy)）
     円の黒枠 → var(--navy) ／ カード #f5f5f5 → #f2f4f9（青みの淡グレー）           */
.ours{background:var(--bg-2);
  padding:clamp(3.5rem,8vw,6.5rem) clamp(1.2rem,4vw,3rem) clamp(3rem,7vw,5.5rem);}
/* 見出しは CASE（.intv__head）と同じ組み方・サイズに揃える＝英字を大きく青で、下に日本語。 */
.ours__head{text-align:center;margin-bottom:clamp(.6rem,1.4vw,1.2rem);}
.ours__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);}
.ours__sub{font-weight:900;color:var(--ink);font-size:clamp(1.2rem,2.6vw,1.7rem);
  margin-top:.1em;letter-spacing:.03em;}

/* --- 悩みの吹き出し＋人物：951x652 の比率を保ったまま拡縮し、位置は%で持つ --- */
/* 参考の内枠 .f_point は 951幅の中で 422x514。吹き出しの位置はこの 951x514 に対する比率で持つ。 */
.ours__stage{position:relative;width:min(951px,100%);margin:clamp(1rem,2.4vw,1.8rem) auto 0;
  aspect-ratio:951/514;}
/* イラストは横長で絵が端まで入っているため、吹き出しと必ず一部が重なる。
   吹き出しを前面に置いて（z-index）文字が線画に潰されないようにする。 */
.ours__person{position:absolute;left:28%;bottom:2%;width:44%;z-index:0;}
.ours__person img{width:100%;height:auto;}
.ours__balloons{list-style:none;margin:0;padding:0;}
.bl{position:absolute;z-index:2;}
/* 各吹き出しは必ず1行。幅は文字数まかせにするので .bl 側は left か right のどちらかだけ指定する。 */
.bl span{display:block;background:#cfe0fb;color:var(--navy);font-weight:700;white-space:nowrap;
  font-size:clamp(10px,1.42vw,18px);line-height:1.6;letter-spacing:.02em;
  padding:clamp(.5rem,1.45vw,1.15rem) clamp(.6rem,1.55vw,1.25rem);}
/* しっぽ（参考どおり：上段2つは下向き、中・下段は人物側へ横向き） */
.bl::after{content:"";position:absolute;width:0;height:0;border:clamp(7px,1vw,13px) solid transparent;}
.bl--1{left:9.9%;top:21.4%;}
.bl--1::after{left:62%;top:100%;border-top-color:#cfe0fb;border-bottom-width:0;}
.bl--2{right:10.5%;top:19.1%;}
.bl--2::after{left:14%;top:100%;border-top-color:#cfe0fb;border-bottom-width:0;}
.bl--3{left:8.2%;top:42.2%;}
.bl--3::after{left:100%;top:58%;border-left-color:#cfe0fb;border-right-width:0;}
.bl--4{right:2.7%;top:42.8%;}
.bl--4::after{right:100%;top:52%;border-right-color:#cfe0fb;border-left-width:0;}
.bl--5{left:.7%;top:67.5%;}
.bl--5::after{left:100%;top:34%;border-left-color:#cfe0fb;border-right-width:0;}

.ours__note{max-width:951px;margin:clamp(.6rem,1.6vw,1.2rem) auto 0;text-align:right;
  font-size:10px;line-height:1.4;font-weight:700;color:var(--ink);}

/* --- 「昨今では〜」「そこで！〜」 --- */
/* 参考では注釈の下に110pxの余白を取ってから「昨今では〜」が来る */
.ours__lead{text-align:center;margin-top:clamp(2rem,8.6vw,110px);}
/* 参考の1行目は上に25pxのパディングを持つ（.padding25） */
.ours__l1{font-size:clamp(1.05rem,2.27vw,29px);line-height:1.7;font-weight:700;color:var(--ink);
  padding-top:clamp(10px,1.9vw,24px);}
/* 締めの1行は前置き（.ours__l1）から一拍おいて大きく置く */
.ours__l2{font-size:clamp(1.35rem,3.44vw,44px);line-height:1.7;font-weight:700;color:var(--ink);
  margin-top:clamp(1.6rem,4.7vw,60px);}
.ours__mark{display:inline-block;position:relative;background:var(--blue);color:#fff;
  padding:.15em .28em .15em .5em;margin-right:.4em;}
.ours__f2 .ours__mark{margin:0 .35em;}

/* --- 4カード：teamspirit.com の Products カードを実測して再現 ---
   実測（カード幅588px時）：角丸8px／上→下の2色グラデ／内側余白 62-0-46-40／
   左=文字263px・右=ビジュアル306px の2カラム（間隔48px）／
   見出し32px・700・行高41.6px(1.3)・字間-0.96px(-.03em)・濃色／
   チェック項目 15px・700・行高25.5px(1.7)、アイコン14px＋文字との間隔4px。
   スマホ(390px・カード350px)でも2カラムのまま、見出し24px／項目13px に落ちる。
   → 余白はカード幅に対する％で持たせ、幅が変わっても同じ比率で縮むようにする。
   配色のみ S-passo の青系4トーンに置き換える（参考は水色・緑・黄・黄緑）。 */
.ours__cards{list-style:none;margin:clamp(1.8rem,4vw,3rem) auto 0;padding:0;
  max-width:1200px;display:grid;grid-template-columns:repeat(2,1fr);gap:24px;
  --chk:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5A10.5 10.5 0 1 0 22.5 12 10.5 10.5 0 0 0 12 1.5Zm5.28 8.09-6.3 6.3a1.2 1.2 0 0 1-1.7 0L6.72 13.3a1.2 1.2 0 1 1 1.7-1.7l1.71 1.71 5.45-5.45a1.2 1.2 0 0 1 1.7 1.73Z'/%3E%3C/svg%3E");}
.ours__cards > li{border-radius:8px;text-align:left;overflow:hidden;
  padding:10.5% 0 7.9% 6.8%;
  background-image:linear-gradient(var(--oc1) 0%,var(--oc2) 100%);
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  column-gap:5.5%;align-content:start;}
.ours__cards > li:nth-child(1){--oc1:#d6e6f5;--oc2:#a4cdec;}
.ours__cards > li:nth-child(2){--oc1:#dce4fa;--oc2:#b6c7f5;}
.ours__cards > li:nth-child(3){--oc1:#d8effa;--oc2:#a9dcf0;}
.ours__cards > li:nth-child(4){--oc1:#dfe0f7;--oc2:#c0c2ee;}
/* 文字は左カラムに縦積み、ビジュアルは右カラムで全行にまたがる（DOM順は変えない） */
.oc__no{grid-area:1/1;} .oc__t{grid-area:2/1;} .oc__d{grid-area:3/1;} .oc__spec{grid-area:4/1;}
.oc__ic{grid-area:1/2/5/3;align-self:center;}
.oc__no{justify-self:start;font-family:var(--en);font-weight:600;font-size:13px;
  line-height:1.6;letter-spacing:.12em;color:#fff;background:var(--navy);
  border-radius:3px;padding:.1em .9em;}
.oc__t{font-size:clamp(1.15rem,2.45vw,32px);line-height:1.3;font-weight:700;
  letter-spacing:-.03em;color:var(--navy);margin-top:clamp(.5rem,1.1vw,14px);}
.oc__d{font-size:15px;line-height:1.7;font-weight:700;letter-spacing:-.02em;color:var(--navy);
  margin-top:clamp(.55rem,1.25vw,16px);}
/* 「主な内容」＝参考のチェック項目リストに合わせる（丸チェック14px＋間隔4px） */
.oc__spec{margin-top:clamp(.9rem,1.9vw,24px);}
.oc__sh{font-size:13px;font-weight:700;color:var(--blue);letter-spacing:.1em;line-height:1.4;}
.oc__sl{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:2px;}
.oc__sl li{display:flex;align-items:flex-start;gap:4px;
  font-size:15px;line-height:1.7;font-weight:700;letter-spacing:-.03em;color:var(--navy);}
.oc__sl li::before{content:"";flex:0 0 auto;width:14px;height:14px;margin-top:.42em;
  background:var(--blue);
  -webkit-mask:var(--chk) center/contain no-repeat;mask:var(--chk) center/contain no-repeat;}
/* 右カラムのビジュアル。参考と同じく「製品画面の画像」を背景なしで置く
   （画像は tools 側で作った透過PNG。カード右端まで寄せるため右余白は0）。 */
.oc__ic{display:block;}
.oc__ic img{display:block;width:100%;height:auto;}

/* --- カード下の集約矢印（参考 border.png = 1160x98 を CSS で再現） --- */
.ours__arrow{position:relative;max-width:1200px;height:98px;margin:0 auto 13px;
  --oa:2px;--oaC:var(--blue);}
.ours__arrow span{position:absolute;background:var(--oaC);}
/* 縦線は各カラムの中心に落とす。2列なのでカード幅=(100% - gap24px)/2、中心はその半分。 */
.ours__arrow{--oaC-half:calc((100% - 24px) / 4);}
.oa__v{top:0;height:32px;width:var(--oa);}
.oa__v--1{left:var(--oaC-half);}
.oa__v--2{display:none;}          /* 2列なので中央の縦線は不要 */
.oa__v--3{left:auto;right:var(--oaC-half);}
.oa__h{top:32px;left:var(--oaC-half);right:var(--oaC-half);height:var(--oa);}
.oa__down{top:32px;left:50%;transform:translateX(-50%);width:var(--oa);height:52px;}
.ours__arrow::after{content:"";position:absolute;top:80px;left:50%;transform:translateX(-50%);
  width:0;height:0;border:11px solid transparent;border-top-color:var(--oaC);border-bottom-width:0;}

/* --- 「足で売る時代から Web・SNSで売る時代へ！」 --- */
.ours__foot{text-align:center;}
/* 3行の行間は同じリズムにする（強調行→小さい中間行→強調行の順） */
.ours__foot p + p{margin-top:clamp(.2rem,.8vw,.5rem);}
.ours__f1{font-size:clamp(1.05rem,2.27vw,29px);line-height:1.7;font-weight:700;color:var(--ink);}
.ours__f2{font-size:clamp(1.02rem,2.03vw,26px);line-height:1.7;font-weight:700;color:var(--ink);}
.ours__f2 .ours__mark{font-size:clamp(1.15rem,2.73vw,35px);}

/* ============ 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);}

/* ============ 汎用スライダー（導入実例などを横スワイプ：本体はCSSのscroll-snap／JSは矢印・ドットの補助のみ） ============ */
.sld{position:relative;}
.sld__track{display:flex;gap:clamp(1rem,2.4vw,1.8rem);overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;}
.sld__track::-webkit-scrollbar{display:none;}
.sld__slide{flex:0 0 100%;min-width:0;scroll-snap-align:center;}
.sld__nav{display:flex;align-items:center;justify-content:center;gap:1.2rem;margin-top:clamp(1.4rem,3vw,2.2rem);}
.sld__arrow{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  border:1.5px solid var(--line);background:var(--bg-2);color:var(--ink);
  transition:background .3s,color .3s,border-color .3s,opacity .3s;}
.sld__arrow:hover:not(:disabled){background:var(--blue);color:#fff;border-color:var(--blue);}
.sld__arrow:disabled{opacity:.35;cursor:default;}
.sld__dots{display:flex;gap:.55rem;}
.sld__dot{width:9px;height:9px;border-radius:50%;background:#c3cbdc;transition:background .3s,transform .3s;}
.sld__dot.on{background:var(--blue);transform:scale(1.25);}

/* 導入実例カードのスライダー：カードの落ち影がトラックで切れないよう下に逃がす */
.intv__sld{max-width:var(--maxw);margin-inline:auto;}
.intv__sld .sld__track{padding:6px 0 36px;}
.intv__sld .sld__nav{margin-top:0;}
.intv__sld .intv__card{height:100%;}

/* ============ CAMPAIGN バナー（100社限定 無料HP）
   キャンペーンLP `/campaign/`（campaign-lp-intloop）のデザインに合わせてある。
   数値はLPの実CSSと同値：カード = linear-gradient(135deg,#1e56d6,#2f7be8 58%,#00adff)／
   radius 22px／shadow 0 18px 44px rgba(30,86,214,.16)／ボタン min-height 60px・radius 45px。
   英数字は LP と同じ Albert Sans（index.htmlで読み込み。無い場合はOswaldにフォールバック）。 ============ */
.camp{--lp-blue:#1e56d6;--lp-sky:#00adff;--lp-pale:#a7cdf5;--lp-accent:#ff8245;
  --en-lp:"Albert Sans",var(--en);
  padding:clamp(2rem,5vw,4.5rem) clamp(1rem,3vw,2rem);}
.camp__inner{position:relative;max-width:var(--maxw);margin-inline:auto;overflow:hidden;
  border-radius:clamp(18px,2.4vw,30px);padding:clamp(2.2rem,6vw,5rem) clamp(1rem,4vw,3.4rem);
  background:linear-gradient(180deg,#f5f9fd 0%,#e9f1fb 100%);}

/* --- 浮遊チップ（LPメインビジュアルの角丸スクエア/円のモチーフ） --- */
.camp__deco{position:absolute;inset:0;z-index:0;pointer-events:none;}
.cchip{position:absolute;display:block;border-radius:24%;}
.cchip--1{width:clamp(56px,6.6vw,96px);aspect-ratio:1;left:3%;top:11%;transform:rotate(-8deg);
  border-radius:26%;background:linear-gradient(150deg,var(--lp-sky),var(--lp-blue));opacity:.9;}
.cchip--2{width:clamp(18px,2vw,30px);aspect-ratio:1;left:7%;top:14%;transform:rotate(45deg);
  border-radius:6px;background:#ffe14d;}
.cchip--3{width:clamp(10px,1.2vw,16px);aspect-ratio:1;left:9%;bottom:22%;border-radius:4px;background:var(--lp-blue);}
.cchip--4{width:clamp(30px,3.4vw,46px);aspect-ratio:1;left:4.5%;bottom:12%;border-radius:50%;
  border:1px solid var(--lp-pale);background:transparent;}
.cchip--5{width:clamp(16px,2vw,26px);aspect-ratio:1;right:6%;top:16%;transform:rotate(18deg);
  border-radius:6px;background:var(--lp-pale);}
.cchip--6{width:clamp(34px,4.4vw,60px);aspect-ratio:1;right:3%;bottom:15%;border-radius:50%;
  background:linear-gradient(150deg,#ffb07a,var(--lp-accent));opacity:.85;}
.cchip--7{width:clamp(22px,2.4vw,32px);aspect-ratio:1;right:6.5%;bottom:30%;transform:rotate(-14deg);
  border-radius:8px;background:linear-gradient(150deg,#cdea9a,#00cecc);opacity:.7;}
.cchip--8{width:clamp(12px,1.4vw,18px);aspect-ratio:1;right:3%;top:38%;border-radius:50%;background:var(--lp-sky);opacity:.6;}
/* LP MVの細い円モチーフ。カードとぶつからない広い幅でだけ出す。 */
/* 幅は「カード左端までの余白（=(100% - 880px)/2）」から逃げを引いた値で頭打ちにする。
   これを入れないと1200〜1300pxでカードに潜り込む（実測：1280pxで31px重なる）。 */
.camp__ring{display:none;position:absolute;left:clamp(.5rem,2vw,1.6rem);top:50%;transform:translateY(-50%);
  width:min(clamp(130px,12vw,180px),calc((100% - 880px)/2 - 2.6rem));aspect-ratio:1;border:1px solid var(--lp-pale);border-radius:50%;
  flex-direction:column;align-items:center;justify-content:center;gap:.15em;text-align:center;color:var(--lp-blue);}
.camp__ring b{font-family:var(--en-lp);font-weight:500;font-size:clamp(.72rem,.9vw,.86rem);letter-spacing:.16em;margin-bottom:.5em;}
.camp__ring em{font-style:normal;font-family:var(--en-lp);font-weight:600;font-size:clamp(.9rem,1.15vw,1.12rem);
  letter-spacing:.04em;line-height:1.3;}
@media (min-width:1200px){.camp__ring{display:flex;}}

/* --- オファーカード（LP .offerArea .lead と同値） --- */
.camp__card{position:relative;z-index:2;max-width:880px;margin-inline:auto;text-align:center;color:#fff;
  padding:clamp(1.9rem,4vw,2.75rem) clamp(1.1rem,3vw,1.9rem) clamp(1.7rem,3.6vw,2.5rem);
  border-radius:clamp(16px,1.8vw,22px);overflow:hidden;isolation:isolate;
  background:linear-gradient(135deg,var(--lp-blue) 0%,#2f7be8 58%,var(--lp-sky) 100%);
  box-shadow:0 18px 44px rgba(30,86,214,.16);}
/* --- 背景写真の透かし（青グラデの上に薄く重ねる） ---
   soft-light + 低彩度で「青に溶けた透かし」にする。白文字のコントラストを落とさないため
   opacity は .3 以下、さらに .camp__card::after の青ベールで写真の明部を締める。 */
.camp__card::before{content:"";position:absolute;inset:0;z-index:0;
  background:url("images/hero-city.webp") center 62%/cover no-repeat;
  filter:saturate(.35) contrast(1.05);mix-blend-mode:soft-light;opacity:.5;}
.camp__card::after{content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(135deg,rgba(30,86,214,.42) 0%,rgba(47,123,232,.3) 58%,rgba(0,173,255,.34) 100%);}
.camp__card>*{position:relative;z-index:1;}
.camp__limit{display:inline-block;margin-bottom:.9em;padding:.34em 1.35em;border-radius:40px;
  background:hsla(0,0%,100%,.2);font-weight:700;font-size:clamp(.8rem,1.1vw,.94rem);letter-spacing:.14em;}
.camp__limit b{font-family:var(--en-lp);font-weight:600;font-size:1.4em;margin:0 .16em;letter-spacing:.02em;}
.camp__price{display:flex;align-items:baseline;justify-content:center;flex-wrap:wrap;gap:0 10px;
  font-weight:700;font-size:clamp(1.35rem,2.6vw,2.35rem);letter-spacing:.1em;line-height:1.35;}
.camp__zero{font-family:var(--en-lp);font-weight:600;font-size:2.1em;line-height:1;letter-spacing:-.02em;}
.camp__yen{font-family:var(--jp);font-weight:700;font-size:.38em;margin-left:2px;letter-spacing:0;}
.camp__note{margin-top:1.1em;font-size:clamp(.8rem,1.1vw,.94rem);line-height:2;letter-spacing:.08em;opacity:.92;}
.camp__btns{display:flex;gap:0 16px;margin-top:clamp(1.5rem,3vw,1.9rem);}
.camp__btn{position:relative;display:flex;align-items:center;justify-content:center;
  width:100%;min-height:60px;padding:0 34px;border-radius:45px;font-weight:700;
  font-size:clamp(.86rem,1.15vw,1rem);letter-spacing:.05em;line-height:1.4;transition:.3s ease-in-out;}
.camp__btn .arw{position:absolute;right:20px;font-size:1.2em;line-height:1;}
.camp__btn--solid{background:#fff;color:var(--lp-blue);box-shadow:0 6px 18px rgba(4,20,70,.18);}
.camp__btn--line{border:2px solid hsla(0,0%,100%,.85);color:#fff;}
@media (min-width:769px){
  .camp__btn--solid:hover{background:#eaf1ff;}
  .camp__btn--line:hover{background:hsla(0,0%,100%,.14);}
}
/* ★1200px未満はカード(max 880px)が幅いっぱいに近づき、左右の余白がチップより狭くなる。
   横に置いたままだとカード端で切れて汚いので、チップを「上下の帯」へ移す。
   実測: 1200px=カード左端160px/余白128px（横置きOK）、1150px=余白103pxでチップ1(80px)が潜る。 */
@media (max-width:1199px){
  /* 帯の高さは「チップの回転後の外接矩形(40px→約45px)＋逃げ」が入る量。 */
  .camp__inner{padding:3.6rem clamp(1rem,4vw,3.4rem) 3.4rem;}
  .cchip--4,.cchip--6,.cchip--7,.cchip--8{display:none;}
  .cchip--1{width:40px;left:14px;top:6px;opacity:.85;}
  .cchip--2{width:16px;left:80px;top:16px;}
  .cchip--3{width:12px;left:22px;bottom:20px;}
  .cchip--5{width:22px;right:18px;bottom:16px;top:auto;}
}
@media (max-width:768px){
  /* LPと同じく、狭い幅ではボタンを縦積み。 */
  .camp__inner{padding:3.6rem 1rem 3.4rem;}
  .camp__btns{display:block;}
  .camp__btn+.camp__btn{margin-top:12px;}
}

/* ============ 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);}
  .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__note br{display:none;}
  .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){
  /* OUR SERVICE：絶対配置の吹き出しは狭い幅だと重なるので、2列グリッド＋人物の縦積みに切り替える。
     しっぽは向きが合わなくなるので全て下向きへ統一（詳細度で .bl--n::after に勝たせる）。 */
  .ours__stage{aspect-ratio:auto;width:100%;display:flex;flex-direction:column-reverse;
    align-items:center;gap:clamp(1rem,3vw,1.6rem);}
  .ours__person{position:static;width:min(320px,78%);}
  .ours__balloons{display:grid;grid-template-columns:1fr 1fr;gap:clamp(.7rem,2.4vw,1.1rem);width:100%;}
  /* position は relative のまま（static にすると ::after のしっぽが .bl を基準にできない）。
     left/top を無効化して通常フローに戻す。 */
  .ours__balloons .bl{position:relative;left:auto;right:auto;top:auto;width:auto;}
  .ours__balloons .bl span{font-size:clamp(12px,3vw,15px);padding:.85rem 1rem;height:100%;}
  /* 人物が上に来る並びなので、しっぽは全て上向き（人物側）に統一する */
  .ours__balloons .bl::after{left:50%;right:auto;top:auto;bottom:100%;transform:translateX(-50%);
    border-width:9px;border-top-width:0;border-bottom-color:#cfe0fb;
    border-left-color:transparent;border-right-color:transparent;}
  .ours__note{text-align:center;}
  /* カードは1列。中身は参考と同じく「左に文字・右にビジュアル」の2カラムのまま */
  .ours__cards{grid-template-columns:1fr;max-width:560px;gap:clamp(1rem,3vw,1.4rem);}
  /* 1列になると横幅に余裕が出るので、左カラムの取り分を増やして
     見出しの末尾1文字だけが次行に落ちるのを防ぐ */
  .ours__cards > li{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);}
  .oc__t{font-size:clamp(1.3rem,3.2vw,28px);}
  .oc__d,.oc__sl li{font-size:14px;}
  /* カードが1列になると左右の縦線は意味がないので、中央の下向き矢印だけ残す */
  .ours__arrow{height:56px;}
  .oa__v--1,.oa__v--3,.oa__h,.oa__v--2{display:none;}
  .oa__down{top:0;height:40px;}
  .ours__arrow::after{top:36px;}
  /* 幅の上限だけ差し替える。高さでの頭打ち（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(3.6rem,8.3svh,5rem);height:auto;
    flex-direction:row-reverse;align-items:flex-start;justify-content:center;gap:0;}
  /* 縦書き3列のリード文を下に置くため、縦タイトルは 41.6px→34px に抑える
     （その分をリード文の高さに回して、リード文を大きく読みやすくする） */
  .hero__vtitle span{font-size:clamp(20px,4.03svh,34px);line-height:1;letter-spacing:0;font-weight:700;}
  /* 縦書き3列のまま、縦タイトルの下に中央寄せで置く。
     ★下端は、せり上がる白シート .stage の被り量 clamp(56px,8vh,90px) より必ず上に置く。
       ここを詰めると軌道の終わりで最終列の下が飲み込まれる（＝見切れ）。
     ★50svh/27 ＝「画面のちょうど半分の高さに26文字を収める」上限。
       縦タイトル（上部）とこの下端の間に必ず収まる値。 */
  .hero__lead{left:0;right:0;top:auto;
    bottom:calc(clamp(56px,8vh,90px) + 1.2rem);transform:none;width:auto;
    justify-content:center;align-items:center;gap:clamp(2px,.6svh,6px);
    --ld-fs:min(clamp(11px,1.85svh,15.6px), calc(50svh / 27));}
  /* スマホでは白シートのかぶり量を浅くする。
     デスクトップ用の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{line-height:2.0;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;}
  /* OUR SERVICE：スマホは吹き出しを1列に */
  .ours__balloons{grid-template-columns:1fr;}
  /* 強調箱の途中で行が折り返すと読みにくいので、箱を独立した行にして中央へ置く */
  .ours__f2 .ours__mark{display:inline-block;margin:.15em .3em;}
  /* カード：参考のスマホ実測（カード350px／見出し24px／項目13px）に合わせる。
     文字量がこちらの方が多いので、左カラムの取り分だけ広げる。 */
  .ours__cards > li{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);}
  .oc__t{font-size:clamp(1.15rem,6.15vw,24px);}
  .oc__d,.oc__sl li{font-size:13px;}
}

/* 背の低い端末（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(16px,3.1svh,22px);}
  .hero__lead{gap:2px;}
  .hero__lead p{line-height:1.85;}
}

/* =========================================================
   スマホ表示の共通調整（全ページ共通。pages.css より前に読まれるので、
   下層ページ固有の打ち消しは pages.css の同名メディアクエリ側で行う）

   ねらいは2つ。
   ① 折り返しの品質 … 日本語は文字単位でどこでも折り返せてしまうため、
      狭い幅だと「ホーム／ページ」「仕組／み」のように語の途中で切れたり、
      最終行が1文字だけ残ったりする。既定を文節折り返し（auto-phrase）にし、
      文節の切れ目が無い短い見出しだけ balance（行の長さを均す）に倒す。
      どちらも未対応ブラウザでは無視されるだけで、実害はない。
   ② 補足文の非表示 … PCでは読ませたい補足（主な内容のチェックリスト、
      導入実例の本文、注釈）は、スマホだと縦に伸びて主役の情報が埋もれる。
      スマホでは出さず、見出し・写真・要点・導線だけを残す。
   ========================================================= */
@media (max-width:600px){
  /* --- ① 折り返しの品質 --- */
  /* 既定＝文節で折り返す。あわせて長い英数字・URLの行あふれも防ぐ。
     実測：「事業運営を支える仕組／みをご提供します。」→
           「事業運営を支える仕組みを／ご提供します。」 */
  body{word-break:auto-phrase;overflow-wrap:break-word;}
  /* ★Chromium では auto-phrase を付けると text-wrap:balance / pretty が
     効かなくなる。balance に倒したい短い見出しだけ word-break を戻す。 */
  .intv__ttl,.intv__name,.ours__sub,.philo__sub,.camp__price,.shd__ttl,.bz__h{
    word-break:normal;text-wrap:balance;}
  /* 完了見出しは balance だと「お申し込みありが／とうございます！」と割れる。
     既定の auto-phrase（文節で折る）に任せる。 */

  /* --- ② スマホでは出さない補足文 --- */
  /* OUR SERVICE カードの「主な内容」＝カード本文の補足 */
  .oc__spec{display:none;}
  /* 導入実例カードの本文＝写真と青サマリーの補足（要点と取材ページ導線は残す） */
  .intv__txt{display:none;}
  /* 「※業務のデジタル化とは…」の注釈 */
  .ours__note{display:none;}

  /* --- ③ OUR SERVICE カードは1列に組み替える ---
     PCと同じ「左に文字・右にビジュアル」の2カラムのままだと、文字カラムが
     200px弱しか取れず、見出しが「ホームページ制作アプ／リ」のように割れる。
     スマホでは文字を全幅にして、ビジュアルはその下（右寄せ）に置く。
     DOM順は「番号→見出し→ビジュアル→説明」なので、order でビジュアルを
     最後に回し、見出しと説明が分断されないようにする。 */
  .ours__cards > li{grid-template-columns:1fr;padding:8.5% 6.8% 7.5%;}
  .oc__no,.oc__t,.oc__d,.oc__spec{grid-area:auto;}
  .oc__no{order:1;} .oc__t{order:2;} .oc__d{order:3;}
  .oc__ic{grid-area:auto;order:4;justify-self:end;width:min(74%,220px);margin-top:1rem;}

  /* PC用に入れた <br> は、狭い幅だと「…業務効率／化まで」のような
     半端な折り返しを生む。スマホでは解除して素直に流す。 */
  .ours__l1 br{display:none;}

  /* --- ④ Philosophy の英字見出し ---
     clamp の下限 3rem が効いて 320px 幅では "AI for Every" が枠から出る。
     下限を下げ、幅に連動する係数を上げて必ず収める。 */
  .philo__big{font-size:clamp(2.1rem,11.5vw,9.6rem);}

  /* --- ④' Philosophy の本文 ---
     下限 1.05rem のままだと「S-passoは、AIを事業の規模や知識に関係なく、」が
     スマホ幅で2行に割れる。幅連動に下げて <br> どおり1行ずつ収める。 */
  .philo__body p{font-size:clamp(.7rem,3.6vw,1.05rem);}

  /* --- ④''' OUR SERVICE 締めの2行 ---
     「S-passoがAIで効率化し、事業の成長を支えます。」（約23em）が
     下限 1.02rem のままだと430px未満で折れる。幅連動で必ず1行×2行に保つ。 */
  .ours__f2{font-size:min(1.02rem,3.7vw);}

  /* --- ④'' 導入実例の社名 ---
     下限 1.45rem のままだと「合同会社フットボールクラブ相模原」（16文字）が
     「合同会社フットボ／ールクラブ相模原」と2行に割れる。幅連動で
     320px 幅でも必ず1行に収まるサイズまで下げる（390px実測 box=307px）。 */
  .intv__name{font-size:min(1.45rem,4.5vw);}

  /* --- ⑤ フッター最下段 ---
     左右振り分けのままだと、右のコピーライトが「上へ戻る」ボタンに隠れる。 */
  .ft__bottom{flex-direction:column;align-items:flex-start;gap:.5rem;}
}

@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;}
}


/* ============================================================================
   LEAPY 型 CONTACT セクション（.lcontact）— 全ページ共通・フッター直上
   ----------------------------------------------------------------------------
   参考: https://leapy.jp/ のページ最下部 Contact ブロックを実測して再現。
   実測元 = スクリーンショット 1875x1599（DPR 1.5 ＝ CSS 幅 1250px 相当）。
   以下の数値はすべて「実測値 ÷ 1.5」＝ CSS px（[[reference-site-measure-first]]）。

     パネル背景            #1E3442（実測 98.7% の最頻色）
     左上の角丸            ellipse 260x168(実測) → 173px / 112px
     "Contact"            #88CCCB / 幾何サンス（Poppins 300）/ ink高 87px→58px ≒ 80px
     "お問い合わせ"        同色 / 18px / letter-spacing .06em
     見出し                #FFFFFF / ink高 41px→27px ≒ 30px / 行送り 65px→43px
     本文                  #C6CFD8 / ink高 23px→15px ≒ 16px / 行送り 42px→28px
     電話(→メール)CTA      数字 ink高 46px→31px ≒ 42px
     赤ボタン              #F83738 / 601x98 → 400x65 / 完全ピル
     コラージュの傾き       左端の傾き dx/dy=-0.578 を2区間で実測 → rotate(30deg)
     アクセント円           #4FC0EC

   ★変更点（ユーザー指示）
     - 「資料請求する」CTA は削除
     - 電話番号 CTA → info@s-passo.com（メール）
     - 「無料で課題整理を依頼する」→「無料で相談をする」／リンク先 = お問い合わせ
   ========================================================================== */
.lcontact{
  /* ★背景は実測の #1E3442 ではなく **フッターと同色**（--dark:#0e1626）。ユーザー指示。
     フッターと地続きに見せるため。他の色は実測どおり。 */
  --lc-bg:var(--dark); --lc-teal:#88cccb; --lc-body:#c6cfd8; --lc-red:#f83738; --lc-cyan:#4fc0ec;
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--lc-bg); color:#fff;
  border-top-left-radius:173px 112px;
  padding:clamp(3.6rem,8vw,7.5rem) clamp(1.4rem,4.5vw,4.5rem) clamp(3.6rem,10vw,9.5rem);
}
/* 左のテキスト塊。実測の左端 56px は clamp の下限側に一致させてある。
   見出しが1行21文字（30px）＝約655px あるので枠は 700px。
   コラージュ左端は見出しの高さ(y≒300px)で x≒779px なので衝突しない。 */
.lcontact__body{position:relative; z-index:3; max-width:700px;}

.lcontact__en{
  font-family:"Poppins",var(--en),sans-serif; font-weight:300; line-height:1;
  font-size:clamp(2.6rem,6.4vw,5rem);           /* 1250px 時 = 80px */
  letter-spacing:.005em; color:var(--lc-teal);
}
.lcontact__ja{
  margin-top:21px;                               /* 実測 31px ÷1.5 */
  font-size:clamp(.94rem,1.44vw,1.125rem);       /* 1250px 時 = 18px */
  font-weight:500; letter-spacing:.06em; line-height:1; color:var(--lc-teal);
}
.lcontact__ttl{
  margin-top:clamp(1.9rem,3.6vw,2.85rem);        /* 実測 45.7px */
  font-size:clamp(1.32rem,2.4vw,1.875rem);       /* 1250px 時 = 30px */
  font-weight:700; line-height:1.45; letter-spacing:.04em; color:#fff;
}
.lcontact__lead{
  margin-top:clamp(1.4rem,2.6vw,1.9rem);         /* 実測 38.7px */
  max-width:600px;                               /* 実測の本文幅は505pxだが、それだと1文目が
                                                    「ん。」だけ、2文目が「す。」だけ溢れる。
                                                    600pxで 1行＋2行にきれいに収まる（実測）。
                                                    コラージュ左端は本文の高さで x≒692px なので当たらない。 */
  font-size:clamp(.86rem,1.28vw,1rem);           /* 1250px 時 = 16px */
  line-height:1.75;                              /* 実測 行送り28px */
  letter-spacing:.04em; color:var(--lc-body);
}
.lcontact__lead p{margin:0;}
.lcontact__lead p + p{margin-top:1.4em;}         /* 段落間の1行あき */

/* --- メール CTA（元は電話番号）--- */
.lcontact__mail{
  display:inline-flex; align-items:baseline; gap:0 13px; /* 実測 アイコン→数字 12.7px */
  margin-top:clamp(2.4rem,4.6vw,3.4rem);         /* 実測 67.7px */
  color:#fff; letter-spacing:.01em;
}
.lcontact__mail svg{flex:none; width:25px; height:25px; align-self:center; stroke:#fff;}
.lcontact__mail b{
  font-family:"Poppins",var(--en),sans-serif; font-weight:500;
  font-size:clamp(1.5rem,3.36vw,2.625rem);       /* 1250px 時 = 42px */
  line-height:1.05; letter-spacing:.005em;
}
.lcontact__mail span{
  font-size:clamp(.75rem,1.28vw,1rem); font-weight:500; letter-spacing:.04em; color:var(--lc-body);
}
@media (min-width:769px){.lcontact__mail:hover b{color:var(--lc-teal);} }

/* --- 赤の主 CTA（ピル）--- */
.lcontact__btns{margin-top:clamp(1.9rem,4vw,3.17rem);}  /* 実測 50.7px */
.lcbtn{
  position:relative; display:flex; align-items:center; justify-content:center;
  width:min(100%,400px); min-height:65px;        /* 実測 601x98 ÷1.5 */
  padding:0 56px; border-radius:999px;
  background:var(--lc-red); color:#fff;
  font-weight:700; font-size:clamp(.94rem,1.36vw,1.0625rem); /* 1250px 時 = 17px */
  letter-spacing:.06em; line-height:1.4;
  box-shadow:0 10px 26px rgba(248,55,56,.24);
  transition:transform .3s var(--ease), background .3s ease, box-shadow .3s ease;
}
.lcbtn__arw{position:absolute; right:26px; display:flex; align-items:center;}
.lcbtn__arw svg{width:22px; height:22px;}
@media (min-width:769px){
  .lcbtn:hover{background:#e02728; transform:translateY(-3px); box-shadow:0 16px 32px rgba(248,55,56,.3);}
}

/* --- 実績スクリーンショットの傾いたコラージュ ---
   ★配置は実測（[[reference-site-measure-first]]）:
     コラージュ左端は「y=0 で x=956px、傾き dx/dy=-0.578」の直線（＝rotate(30deg)）。
     そこで格子の左上角を transform-origin:0 0 で (83.5%, -160px) に置くと
       y=0   → x = 1044 - 0.5*(160/0.866) = 952px（実測 956px）
       y=823 → x = 1044 - 0.5*(983/0.866) = 477px
     となり、実測線とほぼ一致する。この置き方だと格子は右下方向にだけ伸びるので、
     4列×9段（タイル180x135・gap12）でセクション右側を隙間なく覆える。 */
.lcontact__works{
  position:absolute; z-index:1; inset:0;
  overflow:hidden; pointer-events:none;
}
.lworks{
  position:absolute; left:83.5%; top:-160px;
  transform-origin:0 0; transform:rotate(30deg);
  display:flex; gap:12px; width:max-content;
}
/* ★列は「9枚1セット × 2」を積んで translateY(-50%) で無限ループさせる。
   gap を使うと 50% がセット1つ分と gap/2 だけズレて継ぎ目が出るので、
   間隔は gap ではなく各セルの margin-bottom で取る（1セット = 9×(135+12) = 1323px＝ちょうど50%）。 */
.lworks__col{
  display:flex; flex-direction:column; width:180px;
  will-change:transform;
  animation:lworks-up 56s linear infinite;
}
.lworks__col:nth-child(2){animation:lworks-down 68s linear infinite;}
.lworks__col:nth-child(3){animation-duration:64s;}
.lworks__col:nth-child(4){animation:lworks-down 76s linear infinite;}
.lworks img,.lworks i{
  display:block; width:180px; height:135px; margin-bottom:12px; border-radius:3px;
}
.lworks img{
  object-fit:cover; object-position:top center;
  background:#fff; box-shadow:0 8px 22px rgba(0,0,0,.22);
}
.lworks i{background:transparent;}   /* 参考サイト同様、ところどころ空きセルを作る */

@keyframes lworks-up  {from{transform:translateY(0)}      to{transform:translateY(-50%)}}
@keyframes lworks-down{from{transform:translateY(-50%)}   to{transform:translateY(0)}}

/* アクセント円（実測 #4FC0EC）。左下と、コラージュの裏に半分隠れる形で1つ。 */
.lcontact__dot{position:absolute; z-index:2; border-radius:50%; background:var(--lc-cyan); pointer-events:none;}
.lcontact__dot--a{width:160px; height:160px; left:-62px; bottom:-38px;}
/* 上の円は見出し(y≒255〜345)の帯を避けて本文の高さに置く。
   ここならテキスト右端(616px)とも当たらず、コラージュの裏に半分隠れる＝参考サイトと同じ見え方。 */
.lcontact__dot--b{width:128px; height:128px; left:59%; top:38%; z-index:0;}

@media (max-width:1100px){
  .lworks{left:88%;}
  .lcontact__body{max-width:54%;}
  .lcontact__dot--b{left:60%;}
}
@media (max-width:900px){
  .lcontact{border-top-left-radius:96px 62px; padding-bottom:0;}
  .lcontact__body{max-width:none;}
  .lcontact__lead{max-width:none;}
  .lcontact__works{position:relative; inset:auto;
    height:280px; margin:clamp(2.4rem,7vw,3.4rem) calc(-1*clamp(1.4rem,4.5vw,4.5rem)) 0;}
  .lworks{left:74%; top:-150px;}
  /* 1段組みではアクセント円が本文に重なるだけなので出さない */
  .lcontact__dot--a,.lcontact__dot--b{display:none;}
  .lcbtn{width:100%; max-width:none;}
}
@media (max-width:600px){
  .lworks{gap:9px; left:78%; top:-120px;}
  .lworks__col{width:132px;}
  .lworks img,.lworks i{width:132px; height:99px; margin-bottom:9px;}
  /* メールは1行に収まらないので「24時間受付」を次の行へ落とす */
  .lcontact__mail{flex-wrap:wrap; align-items:center;}
  .lcontact__mail b{font-size:clamp(1.3rem,6.6vw,2.625rem);}
  .lcontact__mail span{flex-basis:100%; margin:5px 0 0 38px;}
  .lcbtn{padding:0 44px; min-height:60px;}
  .lcbtn__arw{right:18px;}
}

/* ============================================================================
   キャンペーン固定ボタン（.cfab）— 全ページ共通
   キャンペーンLP（campaign-lp-intloop）の配色・角丸に合わせる。
   gradient 135deg #1e56d6 → #2f7be8 58% → #00adff／radius 45px。
   「上へ戻る」(.totop: right20/bottom20/46px) の上に重ならないよう積む。
   ========================================================================== */
.cfab{
  position:fixed; right:20px; bottom:78px; z-index:49;
  display:flex; align-items:center;
  min-height:52px; padding:0 22px; border-radius:45px;
  background:linear-gradient(135deg,#1e56d6 0%,#2f7be8 58%,#00adff 100%);
  color:#fff; font-weight:700; font-size:.86rem; letter-spacing:.06em; line-height:1.25;
  box-shadow:0 12px 30px rgba(30,86,214,.34);
  transition:transform .3s var(--ease), box-shadow .3s ease;
}
.cfab__tx{display:flex; flex-direction:column;}
.cfab__tx b{font-size:.72rem; letter-spacing:.12em; font-weight:600; opacity:.92;}
@media (min-width:769px){.cfab:hover{transform:translateY(-3px); box-shadow:0 18px 38px rgba(30,86,214,.42);} }
@media (max-width:768px){
  .cfab{right:14px; bottom:72px; min-height:46px; padding:0 16px; font-size:.78rem;}
  .cfab__tx b{font-size:.64rem;}
}


/* ============================================================================
   無料相談の3ステップウィザード（.cwz）— contact.html
   アプリ /consult（src/components/consult/consult-form.tsx）と同じ
   ① 日時選択 → ② ヒアリングシート → ③ 送信完了 を、このページ内で完結させる。
   見た目は下層ページの .bz 系（2px #f0f0f0 の枠／--blue／左上・右下だけ角丸）に合わせ、
   フォーム行は既存の .bz__frow / .bz__flabel / .bz__req をそのまま流用している。
   （旧 .hsheet ＝Q1〜Q9のヒアリングシート、旧 .rsv ＝/consult への導線、
   　旧 .bz__form のお問い合わせフォームは、このブロックに統合して撤去した）
   ========================================================================== */
.cwz__d{margin:-26px 0 30px; font-size:15px; line-height:1.9; letter-spacing:.04em; color:#6b7280;}

/* --- ステッパー（①②③） --- */
.cwz__steps{list-style:none; display:grid; grid-template-columns:repeat(3,1fr);
  gap:0; margin:0 auto 30px; padding:0; max-width:520px;}
.cwz__steps li{position:relative; display:flex; flex-direction:column; align-items:center; gap:9px;}
.cwz__steps li::before{content:""; position:absolute; top:19px; right:calc(50% + 26px); left:calc(-50% + 26px);
  height:2px; background:#e7ebf2;}
.cwz__steps li:first-child::before{display:none;}
.cwz__steps li.is-on::before,.cwz__steps li.is-done::before{background:var(--blue);}
.cwz__sno{display:grid; place-items:center; width:38px; height:38px; border-radius:50%;
  border:2px solid #e7ebf2; background:#fff; color:#a8b0bf;
  font-family:var(--en); font-size:15px; font-weight:700; letter-spacing:.04em;}
.cwz__slb{font-size:13px; font-weight:700; letter-spacing:.04em; color:#a8b0bf; white-space:nowrap;}
.cwz__steps li.is-on .cwz__sno,.cwz__steps li.is-done .cwz__sno{border-color:var(--blue); background:var(--blue); color:#fff;}
.cwz__steps li.is-on .cwz__slb,.cwz__steps li.is-done .cwz__slb{color:var(--blue);}
.cwz__steps li.is-done .cwz__sno{font-size:0;}
.cwz__steps li.is-done .cwz__sno::before{content:"✓"; font-size:17px; line-height:1;}

/* --- カード（全ステップ共通の枠） --- */
.cwz__card{border:2px solid #f0f0f0; border-radius:34px 0; background:var(--bg-2);
  padding:40px 50px 46px;}
.cwz__step[hidden]{display:none;}

/* --- ① カレンダー --- */
/* カードは880px幅の .bz いっぱいなので、日時選択のUIだけ560pxの中央カラムに収める
   （そうしないとカレンダーの1マスが100px以上に間延びする）。 */
.cwz__cal > *{width:min(560px,100%); margin-inline:auto;}
.cwz__calhead{display:flex; align-items:center; justify-content:center; gap:26px;}
.cwz__month{margin:0; font-size:19px; font-weight:700; letter-spacing:.04em; color:var(--ink);
  min-width:7.2em; text-align:center;}
.cwz__mo{display:grid; place-items:center; width:36px; height:36px; padding:0;
  border:2px solid #e7ebf2; border-radius:50%; background:#fff; color:var(--blue);
  font-size:20px; line-height:1; cursor:pointer; transition:border-color .25s, background .25s, color .25s;}
.cwz__mo:hover{border-color:var(--blue); background:var(--blue); color:#fff;}
.cwz__week,.cwz__days{display:grid; grid-template-columns:repeat(7,1fr); text-align:center;}
.cwz__week{margin-top:22px; gap:0 4px;}
.cwz__week span{font-size:12px; font-weight:700; letter-spacing:.06em; color:#8a91a0;}
.cwz__week .is-sun{color:#e0788a;}
.cwz__week .is-sat{color:#5b8fe0;}
.cwz__days{margin-top:10px; gap:8px 4px; justify-items:center;}
.cwz__day{display:grid; place-items:center; width:40px; height:40px; padding:0;
  border:2px solid #cfe0fb; border-radius:50%; background:#fff; color:var(--ink);
  font:inherit; font-size:14px; font-weight:700; letter-spacing:.02em; cursor:pointer;
  transition:border-color .2s, background .2s, color .2s;}
.cwz__day:hover{border-color:var(--blue); background:#eef3fd;}
.cwz__day.is-sel{border-color:var(--blue); background:var(--blue); color:#fff;}
.cwz__day.is-off{border-color:transparent; background:none; color:#cfd4dd; cursor:default;}

/* --- ① 時間枠 --- */
.cwz__lbl{margin:34px 0 12px; font-size:15px; font-weight:700; letter-spacing:.04em; color:var(--ink);}
.cwz__times{display:grid; grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:10px;}
.cwz__time{padding:13px 6px; border:2px solid #e7ebf2; border-radius:8px 0; background:#fff;
  font:inherit; font-size:14px; font-weight:700; letter-spacing:.04em; color:var(--blue);
  cursor:pointer; transition:border-color .2s, background .2s, color .2s;}
.cwz__time:hover{border-color:var(--blue); background:#eef3fd;}
.cwz__time.is-sel{border-color:var(--blue); background:var(--blue); color:#fff;}
.cwz__note{margin:0; padding:14px 18px; border-radius:8px 0; background:#f7f8fa;
  font-size:13.5px; line-height:1.8; color:#8a91a0;}
.cwz__note--c{margin-top:18px; padding:0; background:none; text-align:center; font-size:12.5px;}
.cwz__note--c a{color:var(--blue); text-decoration:underline; text-underline-offset:3px;}

/* --- ① 所要時間・相談方法 --- */
/* 「オンライン相談（Google Meet）」が2行に割れないよう、ここだけ560pxより広く取る */
.cwz__info{list-style:none; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px;
  width:min(660px,100%); margin:26px auto 0; padding:22px 24px; border-radius:20px 0; background:#f7f9fd;}
.cwz__info li{display:flex; align-items:center; gap:12px; min-width:0;}
.cwz__iic{display:grid; place-items:center; flex:0 0 auto; width:40px; height:40px;
  border-radius:50%; background:#eef3fd; color:var(--blue);}
.cwz__iic svg{width:20px; height:20px;}
.cwz__info b{display:block; font-size:11.5px; font-weight:700; letter-spacing:.08em; color:#8a91a0;}
.cwz__info span span,.cwz__info li > span:last-child{font-size:14px; font-weight:700; letter-spacing:.03em; color:var(--ink);}

/* --- ボタン --- */
.cwz__btns{display:flex; justify-content:center; gap:14px; margin-top:34px;}
.cwz__btns--pair{margin-top:28px;}
.cwz__btn{position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  min-width:280px; max-width:100%; height:64px; padding:0 26px; border:2px solid var(--blue);
  border-radius:999px; background:var(--blue); color:#fff; font:inherit; font-size:16px; font-weight:700;
  letter-spacing:.04em; text-decoration:none; cursor:pointer;
  transition:background .25s, color .25s, border-color .25s, opacity .25s;}
.cwz__btn .arw{font-family:var(--en); font-size:1.1em; line-height:1;}
.cwz__btn--fill:hover{background:#1d4ed8; border-color:#1d4ed8;}
.cwz__btn--out{min-width:180px; background:#fff; color:var(--blue); border-color:#cfe0fb;}
.cwz__btn--out:hover{border-color:var(--blue); background:#eef3fd;}
.cwz__btn:disabled{background:#c8cdd7; border-color:#c8cdd7; color:#fff; cursor:not-allowed;}

/* --- ② ヒアリングシート --- */
.cwz__pick{margin:0 0 28px; padding:14px 20px; border-radius:10px 0; background:#eef3fd;
  font-size:15px; font-weight:700; letter-spacing:.04em; color:var(--blue);}
/* pages.css の .bz__form（2px枠＋大きな余白）を打ち消す。カード内に二重枠を出さない。
   pages.css は style.css より後に読まれるので、詳細度を上げて上書きする。 */
.cwz .cwz__form{border:0; padding:0;}
.cwz__sec{display:flex; align-items:center; gap:10px; margin:0 0 6px;
  font-size:16px; font-weight:700; letter-spacing:.04em; color:var(--ink);}
.cwz__sec::before{content:""; width:4px; height:17px; border-radius:2px; background:var(--blue);}
.cwz__sec + .bz__frow{border-top:0;}
.cwz__form .bz__frow:first-of-type{padding-top:0;}
.cwz__opts{display:flex; flex-wrap:wrap; gap:10px 12px;}
.cwz__opts label{display:flex; align-items:center; gap:9px;
  padding:11px 18px 11px 14px; border:2px solid #e7ebf2; border-radius:999px;
  font-size:14px; letter-spacing:.03em; color:var(--ink); cursor:pointer;
  transition:border-color .25s, background .25s;}
.cwz__opts input{width:17px; height:17px; accent-color:var(--blue); cursor:pointer;}
.cwz__opts label:has(input:checked){border-color:var(--blue); background:#eef3fd;}
.cwz__err{margin:22px 0 0; padding:13px 18px; border-radius:8px 0; background:#fdeceb;
  font-size:14px; font-weight:700; letter-spacing:.03em; color:#c0392b;}
.cwz__err[hidden]{display:none;}

/* --- ③ 送信完了 --- */
.cwz__done{text-align:center;}
.cwz__check{display:grid; place-items:center; width:74px; height:74px; margin:6px auto 0;
  border-radius:50%; background:#eef3fd; color:var(--blue);}
.cwz__check svg{width:34px; height:34px;}
.cwz__donet{margin:22px 0 0; font-size:22px; font-weight:700; letter-spacing:.04em; color:var(--ink);}
.cwz__doned{margin:14px 0 0; font-size:14.5px; line-height:1.95; letter-spacing:.03em; color:#6b7280;}
.cwz__sum{width:min(520px,100%); margin:26px auto 0; border-collapse:collapse;
  border:2px solid #f0f0f0; text-align:left;}
.cwz__sum th,.cwz__sum td{padding:14px 18px; font-size:14px; letter-spacing:.03em;
  border-top:1px solid #f0f0f0;}
.cwz__sum tr:first-child th,.cwz__sum tr:first-child td{border-top:0;}
.cwz__sum th{width:9.5em; background:#f7f8fa; font-weight:700; color:#8a91a0;}
.cwz__sum td{font-weight:700; color:var(--ink);}
.cwz__sum tr[hidden]{display:none;}

@media (min-width:769px){
  .cwz__opts label:hover{border-color:var(--blue);}
}
@media (max-width:900px){
  .cwz__d{margin:-18px 0 24px; font-size:14px;}
  .cwz__card{border-radius:26px 0;
    padding:clamp(1.4rem,4vw,2.2rem) clamp(1.1rem,4vw,1.8rem) clamp(1.8rem,5vw,2.4rem);}
  .cwz__steps{margin-bottom:24px;}
  .cwz__slb{font-size:12px;}
  .cwz__month{font-size:17px;}
  .cwz__day{width:36px; height:36px; font-size:13px;}
  .cwz__times{grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); gap:8px;}
  .cwz__opts{gap:8px;}
  .cwz__opts label{padding:9px 14px 9px 11px; font-size:13px;}
  .cwz__btn{min-width:0; width:100%; height:58px; font-size:15px;}
  .cwz__btns{gap:10px;}
  .cwz__donet{font-size:19px;}
}
@media (max-width:600px){
  .cwz__day{width:32px; height:32px; border-width:1.6px;}
  .cwz__days{gap:7px 2px;}
  .cwz__info{grid-template-columns:1fr; gap:12px; padding:16px 16px; border-radius:14px 0;}
  .cwz__btns--pair{flex-direction:column-reverse;}
  .cwz__sum th{width:7.4em; padding:12px 12px;}
  .cwz__sum td{padding:12px 12px;}
}

/* ============================================================================
   .wl — ホームページ制作ページ（service-hp.html）
   アプリの起動画面 app.s-passo.com/welcome（src/app/welcome/page.tsx）の
   PCデザインをそのまま静的HTMLへ移植したもの。Tailwind の実値を書き写している：
     コンテナ max-w-6xl(1152px)+px-12(48px) / 余白 py-20(80px)
     blue-700 #1d4ed8 / stone-900 #1c1917 / stone-800 #292524
     stone-600 #57534e / stone-500 #78716c / stone-100 #f5f5f4 / blue-50 #eff6ff
   画像はアプリの public/welcome/ を同一オリジンの絶対パスで参照している
   （s-passo.com はアプリ本体なのでコピー不要）。
   ============================================================================ */
.wl{--wl-blue:#1d4ed8; --wl-ink:#1c1917; --wl-ink2:#292524;
  --wl-gray:#57534e; --wl-gray2:#78716c; --wl-line:#f5f5f4;
  background:#fff; color:var(--wl-ink);
  font-family:"Noto Sans JP",-apple-system,"Hiragino Kaku Gothic ProN",sans-serif;}
.wl__in{max-width:1152px; margin:0 auto; padding:0 48px;}

/* ── ヒーロー：横長写真を全幅に敷き、白く透かして中央に文字 ── */
.wl__hero{position:relative; overflow:hidden;}
.wl__heroimg{display:block; width:100%; height:auto;}
.wl__mockup{display:none;} /* アプリ画面のモックアップ＝スマホ版だけ出す */
.wl__veil{position:absolute; inset:0; background:rgba(255,255,255,.7);}
.wl__herolay{position:absolute; inset:0; display:flex; flex-direction:column;}
.wl__herospace{flex:0 0 auto; height:68px;}
.wl__herobody{max-width:896px; width:100%; margin:0 auto; flex:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:0 48px 40px; text-align:center;}
.wl__h1{margin:0; line-height:1.25; letter-spacing:-.02em;}
.wl__h1 .en{font-family:"Bricolage Grotesque","Albert Sans",sans-serif;
  font-size:72px; font-weight:800; color:var(--wl-blue);}
.wl__h1 .ja{font-size:60px; font-weight:800; color:var(--wl-ink);}
.wl__h1 .l2{display:block; margin-top:16px; font-size:60px; font-weight:800;
  letter-spacing:-.02em; color:var(--wl-ink);}
.wl__h1 .sm{font-size:.8em;}
.wl__lead{margin:32px 0 0; font-size:24px; font-weight:500; line-height:1.65;
  letter-spacing:.08em; color:var(--wl-ink2);}
.wl__sub{margin:20px 0 0; display:flex; align-items:center; justify-content:center;
  gap:8px; font-size:20px; font-weight:700; color:var(--wl-ink);}
.wl__sub i{font-style:normal; color:var(--wl-gray2);}
.wl__sub b{color:var(--wl-blue); font-weight:700;}

/* ── CTA（丸ボタン2種）── */
.wl__ctas{width:100%; max-width:448px; margin:36px auto 0;
  display:flex; flex-direction:column; gap:16px;}
.wl__cta{position:relative; display:flex; align-items:center; justify-content:center;
  min-height:64px; padding:0 32px; border-radius:999px; background:var(--wl-blue);
  color:#fff; font-size:18px; font-weight:700; letter-spacing:.1em; text-decoration:none;
  box-shadow:0 10px 15px -3px rgba(29,78,216,.2); transition:background .2s;}
.wl__cta:hover{background:#1e40af;}
.wl__cta--sub{min-height:56px; background:rgba(255,255,255,.8); color:var(--wl-blue);
  border:2px solid var(--wl-blue); font-size:15px; letter-spacing:.08em; box-shadow:none;}
.wl__cta--sub:hover{background:#eff6ff;}
.wl__cta .chev{position:absolute; right:24px; width:20px; height:20px;}
.wl__cta--sub .chev{width:16px; height:16px;}

/* ── セクション ── */
.wl__sec{padding:80px 0; background:#fff;}
.wl__sec--tint{background:rgba(239,246,255,.6);}
.wl__h2{margin:0; text-align:center; font-size:30px; font-weight:800; color:var(--wl-ink);}
.wl__note{margin:12px 0 0; text-align:center; font-size:14px; color:var(--wl-gray2);}

/* ── カード（3ステップ／おすすめ）── */
.wl__grid{margin-top:48px; display:grid; gap:32px; grid-template-columns:repeat(3,1fr);}
.wl__grid--4{gap:24px; grid-template-columns:repeat(4,1fr);}
.wl__card{overflow:hidden; border-radius:16px; background:#fff;
  border:1px solid var(--wl-line); box-shadow:0 1px 2px rgba(0,0,0,.05);}
.wl__grid--4 .wl__card{border:0;}
.wl__card img{display:block; width:100%; height:auto;}
.wl__cbody{padding:24px;}
.wl__grid--4 .wl__cbody{padding:20px;}
.wl__step{margin:0; font-family:"Bricolage Grotesque","Albert Sans",sans-serif;
  font-size:12px; font-weight:700; letter-spacing:.1em; color:var(--wl-blue);}
.wl__ct{margin:6px 0 0; font-size:18px; font-weight:700; color:var(--wl-ink);}
.wl__grid--4 .wl__ct{margin:0; font-size:15px;}
.wl__cd{margin:8px 0 0; font-size:14px; line-height:1.75; color:var(--wl-gray);}
.wl__grid--4 .wl__cd{font-size:12px;}

/* ── キャンペーンバナー＋締めのCTA ── */
.wl__banner{display:block; max-width:768px; margin:0 auto;}
.wl__banner img{display:block; width:100%; height:auto; border-radius:16px;
  box-shadow:0 4px 6px -1px rgba(0,0,0,.1);}
.wl__close{max-width:448px; margin:48px auto 0;}

/* ── タブレット・スマホ ──
   アプリ側はSP専用の縦1カラム画面を別に持っているが、ここは1枚のHTMLなので
   同じ構成のまま段組みと文字サイズだけ落とす。 */
@media (max-width:1000px){
  .wl__grid{grid-template-columns:repeat(2,1fr); gap:24px;}
  .wl__grid--4{grid-template-columns:repeat(2,1fr);}
  .wl__h1 .en{font-size:52px;} .wl__h1 .ja,.wl__h1 .l2{font-size:42px;}
  .wl__lead{font-size:19px;} .wl__sub{font-size:16px;}
  .wl__in,.wl__herobody{padding-left:24px; padding-right:24px;}
}
@media (max-width:700px){
  .wl__herospace{height:44px;}
  /* スマホ版はアプリの起動画面(welcome SP版)と同じ構成にする：
     横長写真は薄めても縦画面では何が写っているか分からない(白っぽい紙面に見えてバグと報告された)ので
     出さず、グラデ背景＋CTA下にアプリ画面のモックアップ画像を積む。 */
  .wl__hero{background:linear-gradient(180deg,#f5f9ff,#fff);}
  .wl__heroimg{display:none;}
  .wl__veil{display:none;}
  .wl__herolay{position:relative;}
    .wl__herobody{padding-bottom:48px;}
  .wl__mockup{display:block; width:100%; max-width:512px; height:auto; margin:24px auto 0;}
  .wl__h1{margin-top:40px;}
  .wl__h1 .en{font-size:44px;} .wl__h1 .ja,.wl__h1 .l2{font-size:34px;}
  .wl__h1 .l2{margin-top:8px;}
  .wl__lead{margin-top:24px; font-size:16px; letter-spacing:.04em;}
  .wl__sub{font-size:14px; gap:4px;}
  .wl__ctas{margin-top:28px;}
  .wl__cta{min-height:58px; font-size:16px; letter-spacing:.06em;}
  .wl__cta--sub{min-height:52px; font-size:13px;}
  .wl__sec{padding:56px 0;}
  .wl__h2{font-size:22px;}
  .wl__grid{margin-top:28px; grid-template-columns:1fr;}
  .wl__grid--4{grid-template-columns:1fr;}
  .wl__close{margin-top:32px;}
}