@charset "UTF-8";
/* ============================================================
   snekke.co.jp コーポレートサイト｜全ページ共通CSS
   デザイン方針＝墨ベースの明るい地／差し色は鮮やかなブルー／角を立てる
   ※LPの紺×青とは別系統。詳細は vault の
     03_Web制作/コーポレートリニューアル/00_正本_コーポレートリニューアル.md
   ============================================================ */

/* ── 欧文書体（Outfit 可変フォント・self-host）─────────────
   1ファイルで 100〜900 を賄う。900をFVの巨大ワードマークに使う。 */
@font-face{
  font-family:"Outfit";
  font-style:normal;
  font-weight:100 900;          /* 可変フォントのウェイト範囲 */
  font-display:swap;
  src:url("../fonts/outfit-latin-var.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
                U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ============ デザイントークン ============ */
:root{
  --ink:#00153b;          /* ★ロゴの紺（2026-08-08 ボス決定）。純黒にしない */
  --ink-2:#6b6b6b;        /* 補助テキスト */
  --bg:#fff;
  --bg-2:#f5f5f5;         /* FV・偶数セクション・カード地 */
  --blue:#0044fe;         /* ★ロゴの青。差し色。使う場所を絞る */
  --blue-d:#0038d6;       /* 白地の小さい文字・本文リンク用の濃い版 */
  /* ★ブルーの面はベタ塗りではなくグラデーションで使う（カンプ準拠・ボス指示） */
  --grad:linear-gradient(118deg,#3d7dff,#0044fe 55%,#0032c8);
  --grad-v:linear-gradient(180deg,#3d7dff,#0032c8);
  --line:#e3e3e3;
  --line-dark:rgba(255,255,255,.18);

  --wrap:1340px;   /* 全セクション共通。サービス面に合わせて統一（2026-08-07 ボス指示） */
  --pad:clamp(20px,5vw,40px);
  --sec-y:clamp(88px,12vw,170px);
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);   /* 登場アニメ用（expo系の余韻） */
}

/* ============ リセット ============ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic Medium","Yu Gothic",
              "Noto Sans JP",system-ui,sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.85;
  font-size:15px;
  -webkit-font-smoothing:antialiased;
  line-break:strict;
}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,figure,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}

/* 読み上げ専用（見た目から隠すが、SEO・支援技術には残す） */
.u-sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
/* 語のまとまりで折り返す（狭い幅で1〜2文字だけ残るのを防ぐ） */
.nw{display:inline-block}

/* ============ 共通レイアウト ============ */
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.sec{padding-block:var(--sec-y)}
.sec--gray{background:var(--bg-2)}

/* 英字ラベル（SERVICE / ABOUT / NEWS …）＋ 日本語大見出し の組 */
.en{font-family:"Outfit","Helvetica Neue",Arial,sans-serif;font-weight:900;letter-spacing:-.02em}
.label{
  font-family:"Outfit",sans-serif;font-size:12px;font-weight:800;
  letter-spacing:.22em;color:var(--blue);display:block;
}
.h-sec{
  margin-top:18px;
  font-size:clamp(26px,3.6vw,40px);font-weight:800;line-height:1.45;letter-spacing:.01em;
}
/* 大見出し（SERVICE導入とABOUTで共用＝同サイズに揃える。ボス指示） */
.h-lg{font-size:clamp(28px,4.4vw,52px);font-weight:800;line-height:1.35;letter-spacing:.01em}
.lead{margin-top:18px;color:var(--ink-2);font-size:clamp(13.5px,1.1vw,15px)}

/* テキストリンク（→つき） */
.tlink{
  display:inline-flex;align-items:center;gap:10px;margin-top:28px;
  color:var(--blue);font-weight:700;font-size:14.5px;
}
.tlink svg{width:26px;height:8px;transition:transform .4s var(--ease)}
.tlink:hover svg{transform:translateX(7px)}

/* ボタン（楕円＝ピル型。QANDO準拠・2026-08-06 ボス指示） */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:14px;
  padding:17px 36px;font-weight:700;font-size:14.5px;border-radius:999px;
  transition:background .3s,color .3s;
}
.btn svg{width:26px;height:8px;flex:none;transition:transform .4s var(--ease)}
.btn:hover svg{transform:translateX(7px)}
.btn--ink{background:var(--ink);color:#fff}
.btn--ink:hover{background:var(--blue)}
/* 青いボタン＝素直なグラデーション（ガラス風は「ダサい」とのボス判断で撤回・2026-08-07）。
   hoverで塗りが左から右へ流れる */
.btn--blue{
  color:#fff;
  background-image:var(--grad);background-size:180% 100%;background-position:0 0;
  box-shadow:0 14px 32px rgba(20,90,255,.28);
  transition:background-position .5s var(--ease),box-shadow .4s var(--ease),transform .3s var(--ease);
}
.btn--blue:hover{background-position:100% 0;box-shadow:0 18px 40px rgba(20,90,255,.38);transform:translateY(-2px)}

/* ★テキストの下に置くボタンの余白は、セクションを問わずこの1本で決める。
   （旧＝.svs__side .svs__act と .news__act に分裂。スコープ付きの方をABOUTで流用したため
     余白がゼロになる事故が出た＝2026-08-07 ボス指摘。例外を作らず正本を1箇所に戻す） */
.act{margin-top:clamp(26px,3vw,38px)}

/* ============ ヘッダー ============ */
/* ★ヘッダーはガラス（2026-08-07 ボス指示）。下の内容が透けて流れる */
.hd{
  position:sticky;top:0;z-index:50;
  background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.52));
  backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);
  border-bottom:1px solid rgba(255,255,255,.7);
  box-shadow:0 1px 0 rgba(30,60,130,.06);
  transition:background .35s var(--ease),box-shadow .35s var(--ease),transform .45s var(--ease);
}
.hd.stuck{
  background:linear-gradient(180deg,rgba(255,255,255,.86),rgba(255,255,255,.68));
  box-shadow:0 10px 34px rgba(30,60,130,.10);
}
/* 下スクロールで隠し、上スクロールで戻す（LPと同じ挙動・2026-08-07 ボス指示）。
   出し入れの判定は site.js 側。ここは見た目だけ持つ */
.hd--hide{transform:translateY(-100%)}
/* ★ドロワーを開いている間は絶対に隠さない。閉じるボタン（バーガー）がヘッダーに載っており、
   隠すと閉じる手段が消える。JS側にも同じガードがあるが、CSSでも二重に止める。
   特異度 0,2,1 ＞ .hd--hide の 0,1,0 なので順序に関係なく勝つ */
body.nav-open .hd{transform:none}
.hd__in{
  max-width:var(--wrap);margin-inline:auto;padding:19px var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.hd__nav{display:flex;align-items:center;gap:clamp(16px,2.2vw,32px)}
.hd__nav a{font-size:14px;font-weight:700;position:relative;white-space:nowrap}
.hd__nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:-5px;height:1.5px;
  background:var(--blue);transform:scaleX(0);transform-origin:right;
  transition:transform .4s var(--ease);
}
.hd__nav a:hover::after{transform:scaleX(1);transform-origin:left}
/* ヘッダーCTAも他のボタンと同じ青グラデに統一（ボス指示） */
.hd__cta{
  color:#fff;font-size:13.5px;font-weight:700;
  background-image:var(--grad);background-size:180% 100%;background-position:0 0;
  padding:14px 32px;border-radius:999px;white-space:nowrap;
  box-shadow:0 10px 24px rgba(20,90,255,.26);
  transition:background-position .5s var(--ease),box-shadow .4s var(--ease);
}
.hd__cta:hover{background-position:100% 0;box-shadow:0 14px 30px rgba(20,90,255,.36)}

/* ロゴ（★差し替え点は parts/logo.php。ここは文字組みの見た目だけ） */
.logo{
  /* ★2026-08-08 以降ロゴは画像（SVG）。この文字指定は使われていないが、
     ロゴを一時的に文字へ戻す時のために残している */
  font-family:"Outfit",sans-serif;font-weight:900;
  font-size:clamp(20px,1.8vw,24px);letter-spacing:.02em;line-height:1;
}
/* ★画像ロゴ（ヘッダー）。高さで決めて幅は自動＝縦横比が崩れない。
   文字版(30px)より大きめにする（2026-08-08 ボス指示）。
   ヘッダーの高さは92pxなので44pxでも余裕がある */
/* ★ロゴはSVG。高さで決めて幅は自動＝縦横比が崩れない。
   幅を指定してはいけない（宣言のwidth/heightは比率を伝えるためだけのもの） */
.logo--img{display:block;height:clamp(30px,2.8vw,38px);width:auto}
/* フッターは墨のガラス地なので白抜き版。ヘッダーより少し小さく置く */
.logo--ft{height:clamp(26px,2.3vw,32px)}

/* 右クラスタ（ナビ＋ボタン＋バーガー。ナビはボタン側に寄せる） */
.hd__r{display:flex;align-items:center;gap:clamp(18px,2.6vw,38px)}
.burger{display:none;position:relative;z-index:2;width:44px;height:44px;flex:none}
.burger i{
  position:absolute;left:11px;width:22px;height:2px;background:var(--ink);
  transition:transform .45s var(--ease),opacity .25s,background .3s;
}
.burger i:nth-child(1){transform:translateY(-6px)}
.burger i:nth-child(3){transform:translateY(6px)}
body.nav-open .burger i{background:#fff}
body.nav-open .burger i:nth-child(1){transform:rotate(45deg)}
body.nav-open .burger i:nth-child(2){opacity:0}
body.nav-open .burger i:nth-child(3){transform:rotate(-45deg)}

.drawer{
  position:fixed;inset:0;z-index:80;visibility:hidden;opacity:0;
  background:var(--ink);overflow-y:auto;overscroll-behavior:contain;
  transition:opacity .4s var(--ease),visibility .4s;
}
.drawer.on{visibility:visible;opacity:1}
.drawer__in{
  min-height:100%;display:flex;flex-direction:column;justify-content:center;
  padding:104px var(--pad) 48px;max-width:620px;margin-inline:auto;
}
.drawer__nav a{
  display:block;padding:19px 0;border-bottom:1px solid var(--line-dark);
  color:#fff;font-size:17px;font-weight:800;
}
.drawer__nav a:hover{color:#7fa8ff}
.drawer__cta{margin-top:32px}
.drawer__cta .btn{width:100%}

@media(max-width:1000px){
  .hd__nav,.hd__cta{display:none}
  .burger{display:block}
  body.nav-open .hd{background:transparent;border-bottom-color:transparent;backdrop-filter:none;z-index:90}
  body.nav-open .logo{color:#fff}
}

/* ============ フッター（QANDO式レイアウト・地は墨のまま）============ */
/* ============================================================
   ダークガラスの板｜CTA帯とフッターを1枚で包む（2026-08-07 ボス支給カンプ）
   ------------------------------------------------------------
   ★スクショを敷くのではなく、グラデーション・疑似要素・box-shadow だけで作る。
   ★光は必ず「板」= .glass に当てる。CTAとフッターそれぞれに当てると、
     光がセクションの下端で断ち切られて横一直線の継ぎ目が出る（ボス指摘で発覚）。
     セクション側は余白とレイアウトだけを持ち、地は透明にする。
   ★装飾レイヤーは pointer-events:none ＋ z-index:-1。
     isolation:isolate で板の内側に閉じるので、上の白い面へ突き抜けない。
     （z-index:-1＝自分の背景より前・中身より後ろ。文字とボタンには一切かぶらない）
   ============================================================ */
.glass{
  position:relative;isolation:isolate;color:#fff;
  background-color:#0b1018;   /* 黒に近いチャコール */
  background-image:
    /* 左上から中央へ、非常に薄いブルーの光 */
    radial-gradient(112% 56% at 8% -10%,rgba(92,152,255,.20),transparent 62%),
    /* CTA まわり（右上）の控えめなブルーの光 */
    radial-gradient(40% 32% at 84% 14%,rgba(64,124,255,.16),transparent 70%),
    /* 板そのものの奥行き。上が僅かに明るく、下へ静かに沈む */
    linear-gradient(180deg,#111725 0%,#0c111a 34%,#0a0e16 64%,#080b11 100%);
  /* 内側の光沢＝板の厚み */
  box-shadow:inset 0 1px 0 rgba(190,218,255,.07);
}
/* 左上から中央右へ伸びる、薄い斜めのガラス反射。
   ★板の全面にかける。角度指定(deg)なので箱の高さが変わっても傾きは変わらない＝
     どこにも水平な切れ目ができない */
.glass::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(104deg,
    transparent 0 20%,
    rgba(196,220,255,.045) 33%,
    rgba(200,224,255,.075) 43%,
    rgba(196,220,255,.028) 53%,
    transparent 64%);
}
/* 上端の、ごく細い青みのハイライト＝ガラス板の縁 */
.glass::after{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,
    transparent,rgba(150,195,255,.34) 20%,rgba(160,200,255,.44) 50%,rgba(150,195,255,.24) 78%,transparent);
}

/* ★セクション側は地を持たない（＝継ぎ目が生まれない） */
.cta,.ft{background:transparent;color:#fff}
.ft{padding-block:clamp(56px,7vw,96px) clamp(28px,3vw,40px)}
.ft__in{
  max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad);
  display:flex;align-items:flex-start;justify-content:space-between;gap:44px 60px;flex-wrap:wrap;
}
.ft__lead{margin-top:20px;font-size:13px;line-height:2.1;color:rgba(255,255,255,.6)}
.ft__cols{display:grid;grid-template-columns:repeat(3,auto);gap:10px clamp(32px,4.5vw,72px)}
.ft__col li{padding:7px 0}
.ft__col a{font-size:13.5px;font-weight:700;color:rgba(255,255,255,.82);transition:color .25s}
.ft__col a:hover{color:#fff}
.ft__btm{
  max-width:var(--wrap);margin:clamp(44px,6vw,72px) auto 0;padding:22px var(--pad) 0;
  border-top:1px solid var(--line-dark);
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
}
.ft__policy{
  font-family:"Outfit",sans-serif;font-size:12px;font-weight:700;letter-spacing:.08em;
  color:rgba(255,255,255,.45);transition:color .25s;
}
.ft__policy:hover{color:#fff}
.ft__copy{font-family:"Outfit",sans-serif;font-size:11.5px;letter-spacing:.06em;color:rgba(255,255,255,.5)}

/* ============ CTAバンド（墨地・左端にブルーの縦線）============ */
.cta{padding-block:clamp(56px,7vw,92px)}
.cta__in{
  max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:36px;flex-wrap:wrap;
}
.cta__l{position:relative;padding-left:clamp(20px,2.6vw,34px)}
.cta__l::before{
  content:"";position:absolute;left:0;top:4px;bottom:4px;width:3px;
  background:var(--grad-v);   /* 縦線もグラデーション（カンプ準拠） */
}
/* 右カラム＝CONTACT の上下にボタン。横中央を揃え、間は48〜56pxを目安に空ける
   （近すぎると一体化して2つの要素に見えなくなる。カンプ準拠） */
.cta__r{display:flex;flex-direction:column;align-items:center;gap:clamp(34px,3.8vw,54px)}
.cta__en{
  /* ★サイズはカンプ実測から。1340pxのwrapでCONTACTの横幅が約335px＝ボタンの1.6倍 */
  font-size:clamp(42px,5.2vw,74px);line-height:.95;letter-spacing:-.02em;
  background:linear-gradient(100deg,#7fb2ff,#2f7bff 55%,#5aa0ff);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.cta__h{font-size:clamp(24px,3.2vw,38px);font-weight:800;line-height:1.45}
.cta__p{margin-top:16px;font-size:14px;line-height:2;color:rgba(255,255,255,.72)}

/* ============ 巨大ワードマーク（FVとフッター上で共用） ============ */
/* QANDO準拠＝画面の端から端まで。wrapの外・全幅で使う */
.bigword{
  display:block;margin:0;text-align:center;
  font-family:"Outfit",sans-serif;font-weight:900;
  font-size:min(23.5vw,460px);line-height:.86;letter-spacing:-.035em;
  color:var(--ink);white-space:nowrap;
}

/* ============ ファーストビュー ============ */
/* ★画面の高さいっぱいに取る（インパクト優先・カンプ準拠）。
   超ワイドモニタで間延びしないよう960pxで頭打ちにする */
.fv{
  background:var(--bg);   /* ★真っ白（2026-08-07 ボス指示） */
  display:flex;flex-direction:column;justify-content:center;
  min-height:min(calc(100vh - 74px),960px);
  min-height:min(calc(100svh - 74px),960px);
  /* ★シンボルマークが入って縦が伸びたので詰めた（2026-08-08）。
     ノートPC（1440x900・1280x800）でサブコピーが画面外に出ていた */
  padding-block:clamp(26px,3vw,46px);
  overflow:hidden;
}
/* ★flexの子で margin-inline:auto を使うと stretch が効かず内容幅に縮む。
   width:100% を明示して防ぐ（一度落として実際に縮んだ） */
.fv .wrap{width:100%}
/* ワードマークはwrapの外＝全幅。h1は本物のテキストで持つ
   （★現行サイトのh1欠落を繰り返さないため）。
   canvasが起動したら .is-fx が付き、文字は視覚的にのみ隠れる（DOMには残る）。 */
.fv__stage{position:relative;padding-inline:1.5vw}
.fv__stage.is-fx .fv__h1{visibility:hidden}
.fv__canvas{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;
}
/* ★FVのシンボルマーク（ワードマークの下・中央）。
   ステージの中に置いてあるので、マウス追従エフェクトのテクスチャに焼かれる。
   大きさはボス支給のカンプ実測から（1525px幅で約240px高 → 15.7vw） */
.fv__mark{display:flex;justify-content:center;margin-top:clamp(8px,1.1vw,18px)}
/* ★横幅だけで決めると、縦の狭い画面（1366x768等）でサブコピーが画面外に出る。
   画面の高さ(vh)でも頭打ちにして、短い画面では自動で小さくする */
.fv__mark img{display:block;height:clamp(56px,min(15.7vw,21vh),250px);width:auto}
/* ★登場アニメは opacity と blur だけ。transform は使わない。
   位置が動くとエフェクトが実測した座標とズレて、引き継ぎの瞬間に飛ぶ
   （h1で同じ理由から transform を外している） */
.fv__mark{animation:fv-focus 1.2s var(--ease-out) .45s both}
/* canvasが起動したら実体は視覚的に隠す（h1と同じ扱い） */
.fv__stage.is-fx .fv__mark{visibility:hidden}

.fv__copy{margin-top:clamp(22px,2.6vw,38px);text-align:center}
.fv__main{font-size:clamp(30px,4.4vw,60px);font-weight:800;line-height:1.4;letter-spacing:.01em}
.fv__sub{margin-top:clamp(14px,1.6vw,22px);font-size:clamp(14px,1.5vw,19px);color:var(--ink-2)}

/* ============ 登場アニメ（FV専用）============
   ★1文字ずつのせり上がりは撤回（ボス指示・2026-08-07）。
   強めのブラーから像を結ぶようにフェードインする。
   CSSアニメのみ＝JSが無くても動き、reduced-motionでは瞬時に最終形になる */
/* ★letter-spacing と transform はアニメーションさせない。
   どちらも文字の実測位置を動かすため、アニメ中にcanvasへ焼くと字間がズレて固まる
   （実測：アニメ中は letter-spacing が +13.5px＝最終値と符号すら逆になっていた）。
   ブラーと不透明度だけでも「像を結ぶ」印象は十分に出る。
   副次的に、毎フレームのレイアウト再計算も避けられる */
@keyframes fv-focus{
  from{opacity:0;filter:blur(30px)}
  60% {opacity:1}
  to  {opacity:1;filter:blur(0)}
}
.fv__h1{animation:fv-focus 1.5s var(--ease-out) .1s both}
/* コピーもブラーが晴れる（ワードマークに続く） */
@keyframes fv-copy{
  from{opacity:0;transform:translateY(24px);filter:blur(12px)}
  to  {opacity:1;transform:none;filter:blur(0)}
}
.fv__main{animation:fv-copy 1.1s var(--ease-out) .75s both}
.fv__sub{animation:fv-copy 1.1s var(--ease-out) .92s both}

/* ============================================================
   グラスモーフィズム（2026-08-06 ボス支給カンプ準拠）
   ダーク（SERVICE 01/03）とライト（導入/02/NEWS）の2系統。
   backdrop-filter非対応環境でも成立するよう、下地のrgbaだけで読める配色にする
   ============================================================ */


/* ============ SERVICE 導入（ライト・斜めの帯＋ミニカード群） ============ */
.sec--intro{
  position:relative;overflow:hidden;padding-bottom:clamp(48px,7vw,110px);
  /* 斜めの帯もスクロール固定（ガラスのミニカードが窓のように見える） */
  background-color:#fff;
  background-image:linear-gradient(118deg,
    transparent 0 62%,rgba(120,175,255,.5) 62% 80%,rgba(150,195,255,.22) 80% 90%,transparent 90%);
  background-attachment:fixed;background-repeat:no-repeat;
}
.sec--intro .lead{line-height:2.2}
.intro__in{position:relative;display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(28px,4vw,64px);align-items:center}
.intro__fig{width:100%;display:flex;justify-content:flex-end}

/* ミニカード3枚（★重ねて配置＝横幅を詰めつつ1枚を大きく見せる。2026-08-07カンプ） */
.clu{display:flex;align-items:flex-start;justify-content:flex-end}
.clu__card{
  position:relative;flex:none;border-radius:14px;padding:12px;
  background:linear-gradient(160deg,rgba(255,255,255,.86),rgba(255,255,255,.42));
  border:1px solid rgba(255,255,255,.92);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 26px 52px rgba(30,60,130,.16);
}
/* ★カードごとに浮遊（負のdelayで開始を待たずに位相だけずらす） */
@keyframes clu-float{
  0%,100%{transform:translateY(-11px)}
  50%    {transform:translateY(11px)}
}
.clu__card{animation:clu-float 5.6s ease-in-out infinite}
.clu__card--1{z-index:3;width:clamp(184px,17.5vw,296px);animation-delay:0s}
.clu__card--2{z-index:2;width:clamp(152px,14.4vw,244px);margin-left:clamp(-72px,-6.4vw,-44px);margin-top:clamp(26px,3vw,50px);animation-delay:-1.9s}
.clu__card--3{z-index:1;width:clamp(128px,12.2vw,206px);margin-left:clamp(-64px,-5.6vw,-38px);margin-top:clamp(50px,6vw,100px);animation-delay:-3.7s}

.mini-bar{display:flex;gap:5px;align-items:center;margin-bottom:9px}
.mini-bar i{flex:none;width:6px;height:6px;border-radius:50%;background:#c4d6f2}
.mini-bar em{flex:1;height:6px;border-radius:3px;background:#e2eaf8;margin-left:6px}
.mini-bar b{flex:none;width:30px;height:11px;border-radius:3px;background:var(--grad)}
.mini-hero{
  display:block;position:relative;height:clamp(72px,7.4vw,120px);border-radius:8px;overflow:hidden;
  background:linear-gradient(135deg,#9dc6ff,#3d7dff 60%,#2f6bff);
}
.mini-hero svg{position:absolute;right:5%;bottom:4%;width:64%}
.mini-hero__l{position:absolute;left:9%;top:22%;width:44%;height:4px;border-radius:2px;background:rgba(255,255,255,.9)}
.mini-hero__l--s{top:38%;width:32%}
.mini-hero__btn{position:absolute;left:9%;bottom:16%;width:30%;height:13px;border-radius:3px;border:1.4px solid rgba(255,255,255,.9)}
.mini-2col{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:8px}
.mini-2col i{
  display:block;border:1px solid #dbe6f8;border-radius:6px;background:rgba(255,255,255,.8);
  padding:7px;display:flex;flex-direction:column;gap:5px;
}
.mini-2col u{display:block;height:18px;border-radius:4px;background:#cfe0ff}
.mini-2col span{display:block;height:3px;border-radius:2px;background:#e0e9f8}
.mini-2col span:last-child{width:62%}

.mini-refresh{display:grid;place-items:center;height:clamp(40px,4.4vw,68px)}
.mini-refresh svg{width:clamp(22px,2.4vw,36px)}
.mini-poly{width:100%;margin-top:6px}
.mini-bars{display:flex;align-items:flex-end;gap:5px;height:clamp(30px,3.4vw,52px);margin-top:8px}
.mini-bars i{flex:1;height:var(--h,50%);background:var(--grad);border-radius:3px 3px 0 0}

.clu__card--3{padding-top:16px}
.mini-bm{position:absolute;top:11px;right:11px;width:11px}
.mini-thumb{display:block;height:clamp(44px,4.6vw,72px);border-radius:6px;background:linear-gradient(135deg,#a7cbff,#3d7dff)}
.mini-line{display:block;height:4px;border-radius:2px;background:#dde7f7;margin-top:8px}
.mini-line--s{width:64%}

/* ============ サービスセクション（1セクション1事業）============
   構造＝左:テキスト列（地に直置き）／右:1枚のガラスパネル（イラスト＋リスト同居）
   背景は ★固定（background-attachment:fixed）＝スクロールで模様が動かず、
   ガラスパネルが「窓」のように見えて質感が立つ（2026-08-07 ボス指示） */
/* ★背景の固定（background-attachment:fixed）は .svs ではなく
   模様を定義している .svs--dark / .svs--light 側に持たせる。
   理由：下層ページの帯は基底クラスが .svc / .apr で .svs を持たない。
   .svs に置くとTOPだけ固定され、下層が固定されない（2026-08-07 実測で発覚）。
   模様と固定は同じ場所に置く＝正本を1つにする。 */
.svs{position:relative;overflow:hidden}
.svs__in{
  position:relative;z-index:1;
  display:grid;grid-template-columns:minmax(280px,.76fr) minmax(0,1.44fr);
  gap:clamp(28px,3.6vw,64px);align-items:center;
}

/* 左：テキスト列 */
.svs__l{position:relative}
.svs__name{margin-top:0;font-size:clamp(30px,3.3vw,48px);font-weight:800;line-height:1.3;letter-spacing:.01em;position:relative;z-index:1}
.svs__en{margin-top:16px;font-size:12px;font-weight:800;letter-spacing:.3em;position:relative;z-index:1}
.price-xl{margin-top:clamp(20px,2.4vw,30px);font-size:clamp(36px,3.4vw,50px);line-height:1;letter-spacing:-.02em;position:relative;z-index:1}
.price-xl .yen{font-family:inherit;font-size:.42em;font-weight:800;margin-left:2px}
.price-xl .tax{font-size:.28em;font-weight:700;margin-left:8px;letter-spacing:0;display:inline-block}
.price-note{margin-top:10px;font-size:13px;position:relative;z-index:1}
.svs__prule{display:block;width:112px;height:2.5px;border-radius:2px;background:var(--grad);margin-top:22px;position:relative;z-index:1}
.svs__desc{margin-top:clamp(20px,2.4vw,30px);font-size:14.5px;line-height:2.15;position:relative;z-index:1}
.svs__ghost{
  position:absolute;left:-6px;bottom:calc(-1 * clamp(90px,9vw,150px));z-index:0;
  font-size:clamp(150px,15vw,230px);line-height:.8;letter-spacing:-.03em;
  pointer-events:none;user-select:none;
}

/* 右：1枚のガラスパネル */
/* ★パネルごと宙に浮くアニメーション（ボス指示：はっきり分かる振幅で）。
   影も連動させて「浮いている」ことを強調する。--fd でセクションごとに位相をずらす */
@keyframes svs-float{
  0%,100%{transform:translateY(-14px)}
  50%    {transform:translateY(14px)}
}
.svs__panel--float{animation:svs-float 6s ease-in-out infinite;animation-delay:var(--fd,0s)}
.svs__panel{
  position:relative;border-radius:20px;padding:clamp(20px,2.2vw,34px);
  display:grid;grid-template-columns:minmax(0,1.04fr) minmax(240px,.96fr);
  gap:clamp(18px,2.2vw,34px);align-items:center;
}
.svs__fig{display:flex;align-items:center;justify-content:center;min-width:0}
.svs__side{display:flex;flex-direction:column;min-width:0}
.svs__list li{display:flex;gap:13px;align-items:center;font-size:13px;font-weight:700;line-height:1.65}
.svs__tick{flex:none;width:13px;height:13px;border-radius:3px;background:var(--grad)}

/* ── ダーク面（SERVICE 01/03）──────────────────────────────
   カンプ準拠：ほぼ黒の地／細い光の弧／右上に薄いグリッド。
   すべて background で描き fixed 固定する（疑似要素だと固定できない） */
/* ★地は濃紺（藍）。3案（ほぼ黒／濃紺／淡いブルーグレー）を実物で比較してボスが選定
   （2026-08-07）。真っ黒だと"透けた先も黒"でガラスの存在が消える。
   淡色だと白地に白ガラスで輪郭が消える。濃紺が最もガラスが立つ */
.svs--dark{
  color:#fff;
  background-color:#00153b;
  background-image:
    /* 上部を横切る細い弧（カンプの主役）。
       ★円を巨大にして曲率を下げる＝画面を"ほぼ水平"に横切る優雅な弧になる。
         円が小さいと画面内で大きく湾曲して主張しすぎる（実測で確認） */
    radial-gradient(circle at 44% 430%,transparent 0 95.02%,rgba(165,210,255,.9) 95.02% 95.09%,transparent 95.16%),
    /* 右下をかすめる弧の断片 */
    radial-gradient(circle at 118% 330%,transparent 0 78.02%,rgba(130,185,255,.45) 78.02% 78.09%,transparent 78.16%),
    /* 弧まわりの淡い滲み */
    radial-gradient(52% 30% at 50% 16%,rgba(70,130,235,.22),transparent 74%),
    /* 右上だけの薄いグリッド（★repeating-…を使うと background-size で範囲を切れる。
       linear-gradient+repeat だと全面に出てしまい、fixed背景では mask も使えない） */
    repeating-linear-gradient(0deg,rgba(150,195,255,.06) 0 1px,transparent 1px 58px),
    repeating-linear-gradient(90deg,rgba(150,195,255,.06) 0 1px,transparent 1px 58px),
    /* 全体の淡い青み */
    radial-gradient(110% 80% at 84% -12%,#0b2350 0%,#04173a 52%,#00153b 100%);
  background-size:auto,auto,auto,42vw 34vh,42vw 34vh,auto;
  background-position:center,center,center,right top,right top,center;
  background-repeat:no-repeat;
  background-attachment:fixed;   /* ★模様はスクロールで動かさない（基底が .svs / .svc / .apr のどれでも効く）*/
}
.svs--dark .label{color:#5a9cff}   /* 濃紺地の最明部で5.57:1（地をロゴ紺にして改善） */
.svs--dark .svs__en{color:rgba(255,255,255,.56)}   /* 最明部でも5.0超を確保 */
.svs--dark .svs__desc{color:rgba(255,255,255,.72)}
.svs--dark .price-note{color:rgba(255,255,255,.55)}
.svs--dark .price-xl .tax{color:rgba(255,255,255,.62)}
.svs--dark .svs__ghost{color:rgba(120,175,255,.075)}
.svs--dark .svs__panel{
  background:linear-gradient(160deg,rgba(150,195,255,.055),rgba(150,195,255,.015));
  border:1px solid rgba(150,200,255,.16);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 30px 70px rgba(0,6,24,.55),inset 0 1px 0 rgba(190,220,255,.14);
}
.svs--dark .svs__list li{padding:17px 2px;border-bottom:1px solid rgba(160,200,255,.13)}
.svs--dark .svs__list li:first-child{border-top:1px solid rgba(160,200,255,.13)}
.svs--dark .tlink{color:#7fb2ff}

/* ── ライト面（SERVICE 02）：白地＋鮮やかな斜めの帯（こちらも固定）── */
.svs--light{
  background-color:#f4f6fa;
  background-image:linear-gradient(118deg,
    transparent 0 52%,rgba(96,150,250,.92) 52% 74%,rgba(120,170,255,.34) 74% 84%,transparent 84%);
  background-size:auto;background-position:center;background-repeat:no-repeat;
  background-attachment:fixed;   /* ★同上 */
}
.svs--light .svs__en{color:var(--ink-2)}
/* 白地・グレー地の小さい文字は濃い版で。ロゴ青は淡グレー地でも5.96:1でAA足りるが、
   ラベル・リンクは他13箇所と揃えて --blue-d（7.65:1）に統一する */
.svs--light .label,.svs--light .tlink,.sec--news .label,.sec--news .tlink{color:var(--blue-d)}
.svs--light .svs__desc{color:var(--ink-2)}
.svs--light .svs__ghost{color:rgba(0,21,59,.055)}
.svs--light .svs__panel{
  background:linear-gradient(160deg,rgba(255,255,255,.78),rgba(255,255,255,.5));
  border:1px solid rgba(255,255,255,.9);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 30px 66px rgba(30,60,130,.16);
}
/* 02はチップ型リスト（カンプ） */
.svs__list--box li{
  margin-bottom:13px;padding:16px 20px;border-radius:12px;
  background:linear-gradient(160deg,rgba(255,255,255,.92),rgba(255,255,255,.62));
  border:1px solid rgba(255,255,255,.95);
  box-shadow:0 10px 24px rgba(30,60,130,.08);
}
.svs__list--box li:last-child{margin-bottom:0}

/* ============================================================
   サービス一覧ページ（/service）｜2026-08-07カンプ準拠
   地の装飾（svs--light/svs--dark）とテキスト部品（svs__name等）はTOPの正本を流用。
   このページ固有なのはタイトル帯（ph）・交互2カラム（svc）・アプローチ（apr）だけ
   ============================================================ */

/* ── タイトル帯：縦積みSERVICE＋リード ── */
.ph{padding-block:clamp(56px,7vw,104px) clamp(40px,5vw,72px)}
/* 左カラムを広げた＝SERVICEを1行で大きく置くため（旧 .72fr / 1.28fr） */
.ph__in{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(36px,5vw,96px);align-items:center}
/* ★container-type:inline-size ＝ 子が cqw（カラム幅の%）で寸法を決められるようにする */
.ph__l{position:relative;padding-left:clamp(26px,3vw,46px);container-type:inline-size;min-width:0}
.ph__l::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:4px;border-radius:2px;background:var(--grad-v)}
/* ★英字は語を割らない（SER/VIC/E も SER/VICE も不自然＝ボス指摘）。
   文字サイズはカラム幅から算出する＝どの画面幅でも目一杯のまま収まる。
   ★係数の根拠：「SERVICE」(7字)1行の幅÷フォントサイズを実測すると
     Outfit 4.14 ／ Helvetica Neue 4.18 ／ Arial 4.23 ／ sans-serif 4.54。
     nowrapなので溢れると横スクロールになる。最悪の代替書体4.54で割った
     100÷4.54＝22.0% を既定にする＝webフォント読込前の代替表示でも必ず収まる。
   ★2語以上のページ（WEB MANAGEMENT 等）は語間で改行し、--ph-k を
     「一番長い語」に合わせて下げる。語の途中では割らない。
   132pxの上限は、1カラムに落ちる狭い画面で巨大化させないため */
.ph__big{
  font-size:min(calc(var(--ph-k,22) * 1cqw),132px);
  line-height:.94;letter-spacing:-.02em;white-space:nowrap;
}
/* 語間の<br>で折り返すページ用（nowrapのままだと<br>が効かないわけではないが、
   長い語がはみ出した時に横スクロールを作らないよう折り返しも許す） */
.ph__big--multi{white-space:normal}
.ph__jp{margin-top:clamp(16px,2vw,26px);font-size:15px;font-weight:800}
.ph__cat{font-size:clamp(26px,2.9vw,40px);font-weight:800;line-height:1.5}
/* ★リードは自然に流す（ボス指示「無理に改行入れなくていい」）。
   一度 text-wrap:balance で行末を揃えたが、行が縮む副作用で「Web / サービス」のように
   語の途中で折れた。幅いっぱいに素直に流す方が読みやすい */
.ph__lead{margin-top:clamp(20px,2.4vw,32px)}
.ph__lead p{font-size:14.5px;line-height:2.15;color:var(--ink-2)}
.ph__lead p + p{margin-top:1.1em}

/* ── サービスを選ぶ（インデックス｜カンプ準拠）──────────────
   ★ページ内リンクの飛び先。追従ヘッダー（約92px）の下に見出しが潜らないよう
     scroll-margin-top を効かせる。smooth スクロールでも同じく効く */
/* 下限90px＝SPのヘッダー実測83pxより上（70pxだと節の上端がヘッダーの裏に入る） */
.sidx,.svc{scroll-margin-top:clamp(90px,8vw,104px)}
.sidx{
  padding-block:clamp(52px,6.5vw,96px);
  /* 白と淡地の中間。斜めの筋＋右側の薄いグリッドで「選ぶ場所」として面を立てる */
  background-color:#f7f9fd;
  background-image:
    linear-gradient(118deg,transparent 0 58%,rgba(120,175,255,.14) 58% 76%,rgba(150,195,255,.07) 76% 88%,transparent 88%),
    repeating-linear-gradient(0deg,rgba(90,140,220,.05) 0 1px,transparent 1px 54px),
    repeating-linear-gradient(90deg,rgba(90,140,220,.05) 0 1px,transparent 1px 54px);
  background-size:auto,46vw 40vh,46vw 40vh;
  background-position:center,right top,right top;
  background-repeat:no-repeat;
  background-attachment:fixed;
}
/* ★索引の地を完全に白にする修飾子（2026-08-07 ボス指示・/service で使用）。
   background ショートハンドなので、.sidx の3層の模様も fixed も一括で消える。
   .sidx と同じ特異度（0,1,0）なので、必ず .sidx より後ろに置くこと。 */
.sidx--plain{background:#fff}

.sidx__lead{margin-top:clamp(18px,2vw,26px);font-size:14.5px;line-height:2.1;color:var(--ink-2)}
/* 外枠のガラス。カード間は細い縦罫だけで区切る（枠で囲わない） */
.sidx__panel{
  margin-top:clamp(32px,4vw,54px);
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border-radius:20px;padding:clamp(8px,1vw,14px);
  background:linear-gradient(160deg,rgba(255,255,255,.9),rgba(255,255,255,.6));
  border:1px solid rgba(255,255,255,.95);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 30px 66px rgba(30,60,130,.16),inset 0 1px 0 #fff;
}
.sidx__card{
  position:relative;display:flex;flex-direction:column;
  padding:clamp(26px,2.6vw,38px) clamp(18px,1.8vw,28px);
  border-radius:14px;transition:background .35s var(--ease),transform .35s var(--ease);
}
.sidx__card:hover{background:rgba(255,255,255,.85);transform:translateY(-3px)}
/* ★仕切りは疑似要素の直線で引く。inset box-shadow だと border-radius に沿って
   弧を描き、カードが個別に囲われて見える（カンプは直線1本） */
.sidx__card::before,.sidx__card::after{content:"";position:absolute;background:rgba(120,150,200,.22)}
.sidx__card::before{left:0;top:clamp(10px,1.2vw,20px);bottom:clamp(10px,1.2vw,20px);width:1px}
.sidx__card::after{left:clamp(10px,1.2vw,20px);right:clamp(10px,1.2vw,20px);top:0;height:1px}
.sidx__card:first-child::before,.sidx__card::after{display:none}   /* 既定＝縦罫のみ */
.sidx__no{
  font-size:clamp(38px,3.6vw,54px);line-height:1;letter-spacing:-.02em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.sidx__nm{margin-top:clamp(20px,2.2vw,32px);font-size:clamp(15px,1.25vw,17.5px);font-weight:800;line-height:1.55}
/* ★下マージンは矢印との最小間隔。残りは矢印の margin-top:auto が吸って下端で揃う
   （固定マージンだと02のように名前が2行のカードだけ矢印が下がる） */
.sidx__en{margin:12px 0 clamp(20px,2.2vw,30px);font-size:11.5px;font-weight:700;letter-spacing:.16em;color:var(--ink-2)}
.sidx__ar{width:8px;height:24px;margin:auto 0 0 auto;color:var(--ink);transition:transform .4s var(--ease)}
.sidx__card:hover .sidx__ar{transform:translateY(5px)}

/* ── サービス4セクション：左右交互の2カラム ── */
.svc__in{
  position:relative;z-index:1;
  display:grid;grid-template-columns:minmax(300px,1.02fr) minmax(0,.98fr);
  gap:clamp(32px,4.5vw,80px);align-items:center;
}
/* ★grid/flexの子は既定で「中身の min-content より縮まない」。イラストの min-content が
   290pxあるため、320px幅では列が336pxに膨らんでページが横スクロールしていた。
   min-width:0 で下限を外す（TOPの .svs__fig と同じ手当て。入れ忘れていた） */
.svc__l,.svc__panel{min-width:0}
.svc__panel .il{min-width:0}
.svc__in--rev > .svc__l{order:2}
.svc__in--rev > .svc__panel{order:1}
.svc__no{
  font-size:clamp(60px,6.6vw,104px);line-height:.9;letter-spacing:-.02em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  opacity:.8;margin-bottom:clamp(10px,1.2vw,18px);
}
.svc__sub{margin-top:14px;font-size:clamp(17px,1.5vw,21px);font-weight:800}
/* 価格はブルーのグラデ文字（カンプ準拠。TOPのダーク面と違い地が明るいため色で立てる） */
.svc .price-xl{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.svc .price-note{color:var(--ink-2)}
/* 機能チップ：横並びで折り返す小さな箱 */
.svc__tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(22px,2.6vw,32px)}
.svc__tags li{
  display:inline-flex;align-items:center;gap:9px;padding:11px 16px;border-radius:10px;
  font-size:12.5px;font-weight:700;
  background:linear-gradient(160deg,rgba(255,255,255,.94),rgba(255,255,255,.66));
  border:1px solid #e6ecf7;box-shadow:0 8px 20px rgba(30,60,130,.07);
}
.svc__tick{flex:none;width:11px;height:11px;border-radius:3px;background:var(--grad)}
/* ビジュアル枠：ライトのガラス1枚。★中身は将来バナー画像に差し替え（$s['banner']） */
.svc__panel{
  position:relative;border-radius:20px;padding:clamp(22px,2.6vw,40px);
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,rgba(255,255,255,.8),rgba(255,255,255,.5));
  border:1px solid rgba(255,255,255,.95);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 30px 66px rgba(30,60,130,.16),inset 0 1px 0 #fff;
}
.svc__banner{width:100%;height:auto;border-radius:12px}
/* ★濃紺の面では白いガラスだと「薄いグレーの箱に白文字」になって読めない。
   ダーク用に差し替える（TOPの .svs--dark .svs__panel と同じ処方）。
   /service のサービス面は svs--light と白地だけなので影響しない */
.svs--dark .svc__panel{
  background:linear-gradient(160deg,rgba(150,195,255,.085),rgba(150,195,255,.025));
  border:1px solid rgba(150,200,255,.18);
  box-shadow:0 30px 70px rgba(0,6,24,.55),inset 0 1px 0 rgba(190,220,255,.14);
}

/* ── 軽貨物イラスト（白カード） ── */
.il--cargo{
  max-width:430px;border-radius:16px;padding:20px 24px 22px;
  background:linear-gradient(160deg,#fff,#f3f7ff);
  border:1px solid #e6ecf7;box-shadow:0 18px 44px rgba(30,60,130,.14);
}
.ilc__bar{display:flex;gap:6px;margin-bottom:16px}
.ilc__bar i{width:8px;height:8px;border-radius:50%;border:1.5px solid #c4d4ef}
.ilc__top{display:flex;align-items:center;gap:20px}
.ilc__truck{width:44%;flex:none}
.ilc__lines{flex:1;display:flex;flex-direction:column;gap:9px}
.ilc__lines u{display:block;height:5px;border-radius:2px;background:#dbe4f2}
.ilc__lines u:last-child{width:62%}
.ilc__btns{display:flex;gap:12px;margin-top:18px}
.ilc__btn{
  flex:1;text-align:center;padding:11px 0;border-radius:8px;
  color:#fff;font-size:12.5px;font-weight:700;letter-spacing:.06em;
}
.ilc__btn--b{background:var(--grad)}
.ilc__btn--g{background:linear-gradient(118deg,#3ec97a,#149a4e)}
.ilc__route{width:100%;margin-top:16px}

/* ── メディアイラストのライト反転（04用。元はダーク面仕立て） ── */
.il--lite .ilm__page{
  background:linear-gradient(160deg,#fff,#f4f8ff);border-color:#e2eaf7;
  box-shadow:0 22px 50px rgba(30,60,130,.15);
}
.il--lite .ilm__back{background:linear-gradient(160deg,#fff,#f1f6ff);border-color:#e6edf8}
.il--lite .ilm__back i{background:#e2eaf6}
.il--lite .ilm__back i:first-child{background:#d9e6fb}
.il--lite .ilm__av{background:#bcd4f7}
.il--lite .ilm__hd u,.il--lite .ilm__ln{background:#dbe4f2}
.il--lite .ilm__img{background:linear-gradient(140deg,#4d9bff,#0f5eea)}
.il--lite .ilm__item i{background:#d9e6fb}
.il--lite .ilm__item u{background:#dbe4f2}

/* ============================================================
   会社紹介ページ（/company）｜2026-08-07カンプ準拠
   タイトル帯(ph)・2カラム(svc)・地(svs--dark/sidx)・ガラス(svc__panel)は流用。
   このページ固有は cmp（本文・Sマーク・表）／flow（制作工程）／msg（代表挨拶）だけ
   ============================================================ */
.cmp__body{margin-top:clamp(20px,2.4vw,30px)}
.cmp__body p{font-size:14.5px;line-height:2.15}
.cmp__body p + p{margin-top:1.1em}
.svs--dark .cmp__body p{color:rgba(255,255,255,.72)}
/* シンボルマーク。TOPの .about__mark と同じ扱いだが、濃紺地なので配色違いを使う */
.cmp__mark{justify-self:end;width:clamp(240px,30vw,430px);pointer-events:none;user-select:none}
.cmp__mark img{display:block;width:100%;height:auto}

/* ── 制作工程（ガラスパネルの中身） ── */
/* ★4列に「最小チーム編成」(7文字)を1行で収めるため、共通パネルより内側の余白を詰める。
   実測：既定だと1列91pxに対し必要98pxで折り返していた */
.flow{flex-direction:column;align-items:stretch;gap:clamp(20px,2.4vw,30px);padding:clamp(20px,2.2vw,30px)}
.flow__t{font-size:15.5px;font-weight:800}
.flow__row{display:flex;align-items:flex-start;gap:clamp(5px,.7vw,10px)}
.flow__step{flex:1;min-width:0;text-align:center}
.flow__ic{
  display:grid;place-items:center;margin-inline:auto;
  width:clamp(46px,4.4vw,62px);aspect-ratio:1;border-radius:50%;
  background:#fff;border:1px solid #e2eaf7;box-shadow:0 8px 20px rgba(30,60,130,.10);
  color:var(--blue);
}
.flow__ic svg{width:52%;height:52%}
.flow__nm{margin-top:12px;font-size:12.5px;font-weight:800}
/* 進捗バー。--w で塗り幅を渡す（装飾なので数値の意味は持たせない） */
.flow__bar{display:block;margin-top:10px;height:5px;border-radius:3px;background:#e4ebf7;overflow:hidden}
.flow__bar i{display:block;width:var(--w,50%);height:100%;border-radius:3px;background:var(--grad)}
.flow__li{margin-top:12px;display:flex;flex-direction:column;gap:7px}
.flow__li li{display:flex;align-items:center;gap:6px;font-size:10.5px;font-weight:700;color:var(--ink-2);text-align:left}
.flow__ck{
  flex:none;display:grid;place-items:center;width:13px;height:13px;border-radius:4px;
  border:1px solid #cddcf5;color:var(--blue);background:#fff;
}
.flow__ck svg{width:10px;height:10px}
.flow__arr{flex:none;margin-top:clamp(20px,2vw,28px);color:#b9cdf0}
.flow__arr svg{width:16px;height:8px}

/* ── 代表挨拶 ── */
.msg__cat{margin-top:clamp(22px,2.6vw,32px);font-size:clamp(19px,1.9vw,27px);font-weight:800;line-height:1.6}
.msg .svs__prule{margin-top:20px}
/* ★装飾の引用符は削除（2026-08-08 ボス指示）。
   重ね順の指定だけは残す（テキストが背景の模様より前に来るため） */
.msg .svc__l > *{position:relative;z-index:1}
.msg__panel{display:block;padding:clamp(26px,3vw,44px)}
.msg__panel p{font-size:14px;line-height:2.15;color:rgba(255,255,255,.8)}
.msg__panel p + p{margin-top:1.2em}
.msg__sign{margin-top:clamp(20px,2.4vw,30px);text-align:right;font-size:13px;font-weight:800;color:#fff}

/* ── 会社概要の表 ── */
.cmp__tbl{
  margin-top:clamp(30px,3.6vw,48px);border-radius:20px;overflow:hidden;
  background:linear-gradient(160deg,rgba(255,255,255,.9),rgba(255,255,255,.6));
  border:1px solid rgba(255,255,255,.95);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 30px 66px rgba(30,60,130,.16),inset 0 1px 0 #fff;
}
.cmp__row{
  display:grid;grid-template-columns:minmax(140px,.24fr) minmax(0,1fr);
  gap:clamp(14px,2vw,32px);
  padding:clamp(16px,1.8vw,22px) clamp(20px,2.4vw,36px);
}
.cmp__row + .cmp__row{border-top:1px solid rgba(120,150,200,.18)}
.cmp__row dt{font-size:13px;font-weight:700;color:var(--ink-2)}
.cmp__row dd{margin:0;font-size:14.5px;font-weight:700;line-height:1.9}

@media(max-width:900px){
  /* ★SPは本文の下に中央で置く（2026-08-08 ボス指摘）。
     旧＝左寄せで大きく、本文から切り離されて見えていた */
  /* ★見出しの直下に中央で置く（2026-08-08 ボス指示）。
     マークは .svc__l の兄弟なので、そのままでは見出しと本文の間に割り込めない。
     .svc__l を display:contents にして中身をグリッドの直接の子に昇格させ、
     order で「見出し → ORIGIN → マーク → 本文」に並べ替える。

     ★必ず .origin で絞ること。.svs--dark で書いたら代表挨拶と
       Web運用代行の暗い節まで display:contents になってレイアウトが壊れた（2026-08-08 実際に発生）。
     ★row-gap を殺すこと。殺さないと .svc__in の gap（最大80px）が
       見出しとORIGINの間にも効いて、本来の16pxが80pxに広がる（同上）。 */
  .origin .svc__in{row-gap:0}
  .origin .svc__in > .svc__l{display:contents}
  .origin .svc__in > .svc__l > .svs__name{order:1}
  .origin .svc__in > .svc__l > .svs__en{order:2}
  .origin .svc__in > .cmp__mark{order:3}
  .origin .svc__in > .svc__l > .cmp__body{order:4}
  .origin .cmp__mark{justify-self:center;width:min(50vw,260px);margin:clamp(20px,5vw,34px) 0 clamp(16px,4vw,26px)}
  .cmp__mark{justify-self:center;width:min(50vw,260px)}
  .flow__row{flex-wrap:wrap;row-gap:26px}
  .flow__step{flex:1 1 42%}
  .flow__arr{display:none}
}
@media(max-width:600px){
  .cmp__row{grid-template-columns:1fr;gap:6px}
}

/* ============================================================
   お問い合わせ（/contact）＋ 送信完了（/contact/thanks）
   タイトル帯(ph)・地(sidx)は流用。ここはフォーム固有だけ
   ============================================================ */
.cf__in{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:clamp(32px,4.5vw,72px);align-items:start}
.cf__side{position:sticky;top:clamp(100px,10vw,130px)}
.cf__note{margin-top:clamp(18px,2vw,26px);font-size:13.5px;line-height:2;color:var(--ink-2)}
.cf__req,.cf__opt{
  display:inline-block;margin-left:8px;padding:3px 8px;border-radius:5px;
  font-size:10.5px;font-weight:800;letter-spacing:.04em;vertical-align:2px;
}
.cf__req{background:var(--grad);color:#fff}
.cf__opt{background:#e8edf6;color:var(--ink-2)}

/* フォーム本体＝1枚のガラスパネル */
.cf__form{
  border-radius:20px;padding:clamp(24px,3vw,44px);
  background:linear-gradient(160deg,rgba(255,255,255,.92),rgba(255,255,255,.66));
  border:1px solid rgba(255,255,255,.95);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 30px 66px rgba(30,60,130,.16),inset 0 1px 0 #fff;
}
/* ★ハニーポット。display:none だと一部のボットに「隠し欄」と見抜かれるため、
   画面外へ飛ばす方式にする（人間には見えず、支援技術からも aria-hidden で外す） */
.f-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.f-row + .f-row{margin-top:clamp(16px,1.8vw,22px)}
.f-row label{display:block;margin-bottom:9px;font-size:13.5px;font-weight:800}
.f-row input,.f-row select,.f-row textarea{
  width:100%;padding:14px 16px;border-radius:11px;
  border:1px solid #dbe3f0;background:#fff;color:var(--ink);
  font:inherit;font-size:14.5px;line-height:1.7;
  transition:border-color .25s,box-shadow .25s;
}
.f-row textarea{resize:vertical;min-height:130px}
.f-row input::placeholder,.f-row textarea::placeholder{color:#a8b3c6}
.f-row input:focus,.f-row select:focus,.f-row textarea:focus{
  outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,102,255,.14);
}
/* selectの矢印（OS標準の見た目を消して揃える） */
.f-row select{
  appearance:none;-webkit-appearance:none;padding-right:42px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236b6b6b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;background-size:12px 8px;
}
/* エラー時。色だけに頼らず枠線も変える */
.f-row .is-err{border-color:#c33a52;box-shadow:0 0 0 3px rgba(195,58,82,.12)}
.f-err{display:none;margin-top:7px;font-size:12.5px;font-weight:700;color:#c33a52}
.f-err.on{display:block}
.f-alert{
  display:none;margin-bottom:22px;padding:14px 18px;border-radius:11px;
  background:#fdeaee;border:1px solid #f3c4ce;color:#8e2338;
  font-size:13.5px;font-weight:700;line-height:1.8;
}
.f-alert.on{display:block}
.f-agree{display:flex;align-items:flex-start;gap:11px;margin-top:clamp(22px,2.6vw,30px)}
.f-agree input[type=checkbox]{flex:none;width:19px;height:19px;margin:2px 0 0;accent-color:var(--blue);cursor:pointer}
.f-agree label{margin:0;font-size:13.5px;font-weight:700;line-height:1.7;cursor:pointer}
.f-agree a{color:var(--blue-d);text-decoration:underline;text-underline-offset:3px}
.cf__form .act .btn{width:100%}
/* 送信中は触れなくする（二重送信を防ぐ） */
.cf__form.is-sending{opacity:.75;pointer-events:none}

/* 返信が届かない場合 */
.cf__helph{font-size:clamp(22px,2.4vw,32px)}
.cf__tbl{margin-top:clamp(26px,3vw,40px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.8vw,22px)}
.cf__tbl li{padding:clamp(18px,2vw,26px);border-radius:14px;background:var(--bg-2);border:1px solid #e8ecf3}
.cf__tt{font-size:14px;font-weight:800}
.cf__td{margin-top:8px;font-size:13px;line-height:1.95;color:var(--ink-2)}

/* 送信完了 */
.thx__in{max-width:720px;text-align:center}
.thx__ic{display:inline-grid;place-items:center;width:76px;height:76px;border-radius:50%;background:var(--grad);color:#fff;box-shadow:0 18px 44px rgba(20,90,255,.32)}
.thx__ic svg{width:40px;height:40px}
.thx__en{margin-top:clamp(22px,2.6vw,32px);font-size:clamp(13px,1.2vw,15px);letter-spacing:.22em;color:var(--blue-d)}
.thx__h{margin-top:12px;font-size:clamp(26px,3.2vw,42px);font-weight:800;line-height:1.4}
.thx__lead{margin-top:clamp(20px,2.4vw,30px)}
.thx__lead p{font-size:14.5px;line-height:2.15;color:var(--ink-2)}
.thx__lead p + p{margin-top:1.2em}
.thx__lead a{color:var(--blue-d);text-decoration:underline;text-underline-offset:3px}
.thx__in .act{display:flex;justify-content:center}

@media(max-width:900px){
  .cf__in{grid-template-columns:1fr;gap:30px}
  .cf__side{position:static}
  .cf__tbl{grid-template-columns:1fr}
}
/* ★入力欄は16px。16px未満だとiOS Safariがタップした瞬間にページごと自動で拡大し、
   そのまま戻らない（フォーム離脱の典型的な原因）。
   ★幅だけで当てるとiPhoneの横向き（最大932px）を取りこぼすので、
     「タッチ端末か」（pointer:coarse）も条件に足す。マウスのPCは14.5pxのまま。
     LP（snekke-lp/index.html）にも同じ手当てを入れてある */
@media(max-width:767px),(pointer:coarse){
  .f-row input,.f-row select,.f-row textarea{font-size:16px}
}

/* ============================================================
   規約・ポリシー等の長文ページ（/privacy-policy ほか）
   条文が読めることが最優先。装飾は入れない
   ============================================================ */
.doc{padding-top:0}
/* ★1行の文字数を抑える。全幅で流すと目線の戻りが大きくて条文が読みづらい */
.doc__in{max-width:940px}
.doc__a + .doc__a{margin-top:clamp(38px,4.4vw,60px)}
.doc__a h2{
  font-size:clamp(17px,1.6vw,21px);font-weight:800;line-height:1.6;
  padding-left:16px;border-left:4px solid transparent;
  border-image:var(--grad-v) 1;
}
.doc__a p{margin-top:clamp(14px,1.6vw,20px);font-size:14.5px;line-height:2.15;color:var(--ink-2)}
.doc__a a{color:var(--blue-d);text-decoration:underline;text-underline-offset:3px}

/* 条文の番号付きリスト。入れ子は 1. → (1) → ① の順で階層を示す */
.doc__a ol{margin-top:clamp(14px,1.6vw,20px);counter-reset:d1;list-style:none}
.doc__a ol > li{
  position:relative;counter-increment:d1;padding-left:2.4em;
  font-size:14.5px;line-height:2.15;color:var(--ink-2);
}
.doc__a ol > li + li{margin-top:.7em}
.doc__a ol > li::before{
  content:counter(d1) ".";position:absolute;left:0;top:0;
  width:2em;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;
}
/* 2階層目 */
.doc__a ol ol{margin-top:.7em;counter-reset:d2}
.doc__a ol ol > li{counter-increment:d2;padding-left:2.8em}
.doc__a ol ol > li::before{content:"(" counter(d2) ")";width:2.4em}
/* 3階層目 */
.doc__a ol ol ol{counter-reset:d3}
.doc__a ol ol ol > li{counter-increment:d3;padding-left:2.2em}
.doc__a ol ol ol > li::before{content:counter(d3) "."; width:1.8em;font-weight:700}

/* お問い合わせ窓口 */
.doc__win{
  margin-top:clamp(18px,2vw,26px);border-radius:14px;overflow:hidden;
  background:var(--bg-2);border:1px solid #e8ecf3;
}
.doc__win > div{
  display:grid;grid-template-columns:minmax(90px,.18fr) minmax(0,1fr);
  gap:clamp(12px,1.6vw,24px);padding:14px clamp(16px,2vw,26px);
}
.doc__win > div + div{border-top:1px solid #e3e8f0}
.doc__win dt{font-size:13px;font-weight:700;color:var(--ink-2)}
.doc__win dd{margin:0;font-size:14.5px;font-weight:700;line-height:1.9}
.doc__end{margin-top:clamp(36px,4vw,56px);text-align:right;font-size:14px;font-weight:700}

@media(max-width:600px){
  .doc__win > div{grid-template-columns:1fr;gap:5px}
}

/* ============================================================
   お知らせ（/news 一覧 ＋ /news/{id} 記事）
   記事本文は .doc__a を流用（プライバシーポリシーと同じ長文組版）
   ============================================================ */

/* ── 一覧 ── */
.nl__list{display:flex;flex-direction:column;gap:clamp(14px,1.8vw,22px)}
.nl__list a{
  display:grid;grid-template-columns:clamp(140px,16vw,220px) minmax(0,1fr) auto;
  gap:clamp(18px,2.4vw,34px);align-items:center;
  padding:clamp(16px,1.8vw,24px);border-radius:18px;
  background:linear-gradient(160deg,rgba(255,255,255,.9),rgba(255,255,255,.62));
  border:1px solid rgba(255,255,255,.95);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 18px 44px rgba(30,60,130,.10);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.nl__list a:hover{transform:translateY(-3px);box-shadow:0 26px 58px rgba(30,60,130,.16)}
.nl__thumb{display:block;border-radius:12px;overflow:hidden;aspect-ratio:16/9;background:#fff;border:1px solid #e8ecf3}
/* ★cover ではなく contain。アイキャッチは文言入りのバナー画像で、
   切り抜くと肝心の文字が落ちる（2025.07.13の記事で実際に切れた） */
.nl__thumb img{width:100%;height:100%;object-fit:contain}
/* アイキャッチが無い記事の受け皿 */
.nl__thumb--none{display:grid;place-items:center;background:var(--grad)}
.nl__thumb--none i{font-style:normal;font-size:clamp(15px,1.6vw,21px);letter-spacing:.14em;color:rgba(255,255,255,.9)}
.nl__body{min-width:0}
.nl__date{display:block;font-size:13px;letter-spacing:.04em;color:var(--blue-d)}
.nl__ttl{display:block;margin-top:8px;font-size:clamp(15px,1.35vw,18px);font-weight:800;line-height:1.6}
.nl__desc{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
  margin-top:9px;font-size:13px;line-height:1.9;color:var(--ink-2);
}
.nl__arrow{color:var(--ink)}
.nl__arrow svg{width:26px;height:8px;transition:transform .4s var(--ease)}
.nl__list a:hover .nl__arrow svg{transform:translateX(7px)}

/* ── 記事 ── */
.na__in{max-width:880px}
.na__bc{display:flex;flex-wrap:wrap;gap:10px;font-size:12.5px;color:var(--ink-2)}
.na__bc a{color:var(--ink-2)}
.na__bc a:hover{color:var(--blue-d);text-decoration:underline;text-underline-offset:3px}
.na__hd{margin-top:clamp(22px,2.6vw,34px)}
.na__meta{display:flex;align-items:center;gap:14px}
.na__cat{
  padding:5px 12px;border-radius:999px;background:var(--grad);color:#fff;
  font-size:11px;letter-spacing:.14em;
}
.na__meta time{font-size:13.5px;font-weight:700;color:var(--ink-2)}
.na__h1{margin-top:clamp(14px,1.8vw,22px);font-size:clamp(22px,2.7vw,36px);font-weight:800;line-height:1.55}
.na__eye{margin-top:clamp(26px,3vw,40px);border-radius:16px;overflow:hidden;box-shadow:0 22px 50px rgba(30,60,130,.14)}
.na__eye img{width:100%;height:auto}
.na__body{margin-top:clamp(30px,3.4vw,46px)}
/* 記事本文は .doc__a の組版を使うが、見出しは条文より少し大きくする */
.na__body h2{font-size:clamp(18px,1.8vw,23px);margin-top:clamp(32px,3.6vw,48px)}
.na__body > p:first-child{margin-top:0}
.na__body a{color:var(--blue-d);text-decoration:underline;text-underline-offset:3px;word-break:break-all}

/* 記事中の定義リスト（媒体概要・リンク集） */
.na__spec,.na__links{
  margin-top:clamp(18px,2vw,26px);border-radius:14px;overflow:hidden;
  background:var(--bg-2);border:1px solid #e8ecf3;
}
.na__spec > div,.na__links > div{
  display:grid;grid-template-columns:minmax(110px,.22fr) minmax(0,1fr);
  gap:clamp(12px,1.6vw,24px);padding:14px clamp(16px,2vw,24px);
}
.na__spec > div + div,.na__links > div + div{border-top:1px solid #e3e8f0}
.na__spec dt,.na__links dt{font-size:13px;font-weight:700;color:var(--ink-2)}
.na__spec dd,.na__links dd{margin:0;font-size:14px;line-height:1.95}

/* 前後の記事 */
.na__nav{
  margin-top:clamp(40px,4.6vw,64px);display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(12px,1.6vw,20px);
}
.na__pn{
  display:block;padding:clamp(16px,1.8vw,22px);border-radius:14px;
  background:var(--bg-2);border:1px solid #e8ecf3;
  transition:transform .3s var(--ease),border-color .3s;
}
.na__pn:hover{transform:translateY(-2px);border-color:#cddcf5}
.na__pn--next{text-align:right}
.na__pnl{display:block;font-size:11px;letter-spacing:.16em;color:var(--blue-d)}
.na__pnt{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
  margin-top:8px;font-size:13.5px;font-weight:700;line-height:1.7;
}
.na__back{display:flex;justify-content:center}

@media(max-width:700px){
  .nl__list a{grid-template-columns:1fr;gap:14px}
  .nl__thumb{max-height:200px}
  .nl__arrow{display:none}
  .na__nav{grid-template-columns:1fr}
  .na__pn--next{text-align:left}
}
@media(max-width:600px){
  .na__spec > div,.na__links > div{grid-template-columns:1fr;gap:5px}
}

/* ============================================================
   Web運用代行サービス（/service/web-management）
   地・タイトル帯・ガラスは流用。ここは料金プラン／流れ／FAQ だけ
   ============================================================ */
.wm__eyebrow{
  display:inline-block;padding:6px 14px;border-radius:999px;
  background:var(--grad);color:#fff;font-size:12px;font-weight:800;letter-spacing:.04em;
}
.ph__r .wm__eyebrow + .ph__cat{margin-top:16px}
.wm__catch{margin-top:14px;font-size:clamp(16px,1.5vw,20px);font-weight:800;line-height:1.7}
.wm__hd{margin-bottom:clamp(28px,3.4vw,44px)}

/* ── 6つの特徴 ── */
.wm__flist{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(10px,1.4vw,18px)}
.wm__flist li{
  display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;
  padding:clamp(18px,2vw,26px) clamp(8px,1vw,14px);border-radius:16px;
  background:linear-gradient(160deg,rgba(255,255,255,.92),rgba(255,255,255,.66));
  border:1px solid rgba(255,255,255,.95);
  box-shadow:0 14px 34px rgba(30,60,130,.10);
}
.wm__fic{display:grid;place-items:center;width:clamp(38px,3.6vw,50px);aspect-ratio:1;border-radius:50%;background:var(--grad);color:#fff}
.wm__fic svg{width:52%;height:52%}
.wm__ft{font-size:clamp(11.5px,1.05vw,13px);font-weight:800;line-height:1.5}

/* ── 課題（濃紺のガラス） ── */
.wm__why{display:block;padding:clamp(26px,3vw,44px)}
.wm__why p{font-size:14.5px;line-height:2.15;color:rgba(255,255,255,.8)}
.wm__why p + p{margin-top:1.2em}

/* ── 料金プラン ── */
.wm__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.4vw,32px);align-items:start}
.wm__plan{
  position:relative;padding:clamp(24px,2.8vw,40px);border-radius:20px;
  background:#fff;border:1px solid #e6ecf7;box-shadow:0 22px 52px rgba(30,60,130,.10);
}
/* 主役のプランだけ枠をブルーにして立てる */
.wm__plan--main{border-color:transparent;box-shadow:0 26px 60px rgba(20,90,255,.18)}
.wm__plan--main::before{
  content:"";position:absolute;inset:0;border-radius:20px;padding:2px;
  background:var(--grad);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
}
.wm__pname{font-size:clamp(17px,1.6vw,21px);font-weight:800}
.wm__price{margin-top:14px;font-size:clamp(40px,4vw,58px);line-height:1;letter-spacing:-.02em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.wm__pu{font-family:inherit;font-size:.4em;font-weight:800;margin-left:3px}
.wm__pm{font-size:.28em;font-weight:700;margin-left:6px;letter-spacing:0}
.wm__hours{margin-top:10px;font-size:13px;color:var(--ink-2)}
.wm__plan .svs__prule{margin-top:20px}
.wm__items{margin-top:clamp(20px,2.2vw,28px);display:flex;flex-direction:column;gap:12px}
.wm__items li{display:flex;gap:11px;font-size:14px;font-weight:700;line-height:1.7}
.wm__items .svc__tick{margin-top:5px}
.wm__note{display:block;margin-top:5px;font-style:normal;font-size:12px;font-weight:500;line-height:1.85;color:var(--ink-2)}
.wm__reco{margin-top:clamp(22px,2.4vw,32px);padding:clamp(16px,1.8vw,22px);border-radius:14px;background:var(--bg-2)}
.wm__recoh{font-size:13px;font-weight:800}
.wm__reco ul{margin-top:10px;display:flex;flex-direction:column;gap:7px}
.wm__reco li{position:relative;padding-left:16px;font-size:12.5px;line-height:1.8;color:var(--ink-2)}
.wm__reco li::before{content:"";position:absolute;left:0;top:.72em;width:6px;height:6px;border-radius:50%;background:var(--blue)}
.wm__notes{margin-top:clamp(28px,3.2vw,44px);display:flex;flex-direction:column;gap:9px}
.wm__notes li{position:relative;padding-left:18px;font-size:12.5px;line-height:1.9;color:var(--ink-2)}
.wm__notes li::before{content:"※";position:absolute;left:0;top:0}

/* ── 流れ ── */
.wm__fbox + .wm__fbox{margin-top:clamp(34px,4vw,54px)}
.wm__fh{font-size:clamp(16px,1.5vw,19px);font-weight:800;padding-left:14px;border-left:4px solid transparent;border-image:var(--grad-v) 1}
.wm__steps{margin-top:clamp(18px,2vw,26px);display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:clamp(12px,1.6vw,20px)}
.wm__steps li{
  display:flex;gap:14px;padding:clamp(18px,2vw,24px);border-radius:16px;
  background:linear-gradient(160deg,rgba(255,255,255,.94),rgba(255,255,255,.7));
  border:1px solid rgba(255,255,255,.95);box-shadow:0 14px 34px rgba(30,60,130,.09);
}
.wm__sno{flex:none;font-size:clamp(20px,2vw,26px);line-height:1;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.wm__st{display:block;font-size:14px;font-weight:800;line-height:1.6}
.wm__sd{display:block;margin-top:8px;font-size:12.5px;line-height:1.95;color:var(--ink-2)}

/* ── FAQ（JSなしの開閉） ── */
.wm__faqin{max-width:940px}
.wm__qs{display:flex;flex-direction:column;gap:12px}
.wm__q{border-radius:14px;background:var(--bg-2);border:1px solid #e8ecf3;overflow:hidden}
.wm__q summary{
  display:flex;align-items:center;gap:14px;padding:clamp(16px,1.8vw,22px);
  cursor:pointer;list-style:none;
}
.wm__q summary::-webkit-details-marker{display:none}
.wm__qm,.wm__am{
  flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:8px;
  font-size:13px;color:#fff;background:var(--grad);
}
.wm__am{background:#dfe6f2;color:var(--ink)}
.wm__qt{flex:1;font-size:14px;font-weight:800;line-height:1.65}
/* 開閉アイコン。＋→− をCSSだけで切り替える */
.wm__qi{flex:none;position:relative;width:16px;height:16px}
.wm__qi::before,.wm__qi::after{
  content:"";position:absolute;left:50%;top:50%;background:var(--ink-2);
  transform:translate(-50%,-50%);transition:transform .3s var(--ease),opacity .3s;
}
.wm__qi::before{width:14px;height:2px}
.wm__qi::after{width:2px;height:14px}
.wm__q[open] .wm__qi::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
.wm__a{display:flex;gap:14px;padding:0 clamp(16px,1.8vw,22px) clamp(18px,2vw,24px)}
.wm__a p{font-size:13.5px;line-height:2;color:var(--ink-2)}
.wm__q summary:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}

@media(max-width:900px){
  .wm__flist{grid-template-columns:repeat(3,minmax(0,1fr))}
  .wm__grid{grid-template-columns:1fr}
}
@media(max-width:600px){
  .wm__flist{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ============================================================
   注意事項・概要・サンプル事例（非公開ページ）
   /service/web-design/webdesign-sample
   ============================================================ */
/* ★幅はタイトル帯と同じ（.wrap の --wrap＝1340px）に揃える。
   ・1040pxに絞っていた → 上下のセクションと幅が食い違って見えた
   ・max-width:none にした → .wrap の1340px上限まで外れて画面いっぱいになった（広すぎ）
   どちらもボス指摘。ここでは上書きせず .wrap に任せるのが正解 */
.ws__lead,.ws__slead p{font-size:14.5px;line-height:2.15;color:var(--ink-2)}
.ws__slead p + p{margin-top:1.1em}
.ws__slead .wm__notes{margin-top:clamp(18px,2vw,26px)}
.ws__small{margin-top:8px;font-size:12.5px;color:var(--ink-2)}
/* ★カンプは全体に余白が詰まっていた（ボス指摘）。節と節の間をここで広く取る */
.ws__in > * + *{margin-top:clamp(34px,4vw,60px)}

/* ── 料金と制作例（上段） ── */
.ws__top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(26px,4vw,64px);align-items:center}
/* ★このページの主役なので他ページの価格より一段大きくする（ボス指摘） */
.ws__pl .wm__price{font-size:clamp(48px,5.4vw,80px)}
.ws__pl .wm__pu{font-size:.36em}
.ws__pl .wm__pm{font-size:.24em}
.ws__badge{
  display:inline-block;margin-top:clamp(16px,1.8vw,22px);
  padding:12px 26px;border-radius:999px;
  background:var(--grad);color:#fff;font-size:clamp(14px,1.25vw,16.5px);
  font-weight:800;letter-spacing:.03em;
  box-shadow:0 14px 30px rgba(20,90,255,.28);
}
.ws__points{margin-top:clamp(22px,2.6vw,34px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.4vw,16px)}
.ws__points li{
  display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;
  padding:clamp(20px,2.2vw,28px) clamp(10px,1.2vw,16px);border-radius:16px;
  background:#fff;border:1px solid #e6ecf7;box-shadow:0 10px 26px rgba(30,60,130,.07);
}
.ws__pic{display:grid;place-items:center;width:clamp(46px,4.2vw,58px);aspect-ratio:1;border-radius:14px;background:#eef4ff;color:var(--blue)}
.ws__pic svg{width:52%;height:52%}
.ws__pt{font-size:clamp(12px,1.05vw,13.5px);font-weight:800;line-height:1.5}

/* ブラウザ風の枠（サービス画像の飾り） */
.ws__shotframe{
  border-radius:16px;overflow:hidden;background:#fff;
  border:1px solid #e6ecf7;box-shadow:0 22px 52px rgba(30,60,130,.14);
}
.ws__shotframe img{width:100%;height:auto;display:block}
.ws__bar{display:flex;gap:6px;padding:11px 14px;background:#f2f5fa;border-bottom:1px solid #e6ecf7}
.ws__bar i{width:9px;height:9px;border-radius:50%;background:#d3dbe8}
.ws__bar i:first-child{background:#f6a09a}
.ws__bar i:nth-child(2){background:#f7cf8a}
.ws__bar i:nth-child(3){background:#9ed6a4}

/* 2カラムの仕様カード */
.ws__cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.4vw,32px);align-items:start}
.ws__col{padding:clamp(22px,2.6vw,34px);border-radius:18px;background:#fff;border:1px solid #e6ecf7;box-shadow:0 14px 34px rgba(30,60,130,.08)}
.ws__colh{display:flex;align-items:center;gap:14px;font-size:clamp(16px,1.65vw,21px);font-weight:800;line-height:1.5}
.ws__cic{flex:none;display:grid;place-items:center;width:clamp(42px,3.8vw,52px);aspect-ratio:1;border-radius:14px;background:#eef4ff;color:var(--blue)}
.ws__cic svg{width:52%;height:52%}
.ws__list{margin-top:clamp(16px,1.8vw,22px);display:flex;flex-direction:column;gap:10px}
.ws__list li{position:relative;padding-left:18px;font-size:13.5px;line-height:1.9}
.ws__list li::before{content:"";position:absolute;left:0;top:.72em;width:7px;height:7px;border-radius:2px;background:var(--grad)}
.ws__list--wide li{font-size:14px}
.ws__notes{margin-top:clamp(16px,1.8vw,22px)}
/* ★注釈は枠に入れて本文と切り分ける（カンプ準拠） */
.ws__notebox{
  margin-top:clamp(20px,2.4vw,30px);padding:clamp(18px,2vw,26px) clamp(20px,2.2vw,30px);
  border-radius:14px;background:var(--bg-2);border:1px solid #e6ecf3;
}
.ws__notebox li{color:var(--ink-2)}

/* レゾナンス連携 */
.ws__reso{
  display:flex;gap:clamp(20px,2.6vw,36px);align-items:center;
  padding:clamp(22px,2.6vw,34px);border-radius:18px;background:#fff;border:1px solid #e6ecf7;
  box-shadow:0 14px 34px rgba(30,60,130,.08);flex-wrap:wrap;
}
.ws__reso img{flex:none}
.ws__reso p{font-size:13.5px;line-height:2}
.ws__reso a{color:var(--blue-d);text-decoration:underline;text-underline-offset:3px;font-weight:700}

/* ── サーバー＆ドメイン ── */
.ws__hosthd{display:flex;justify-content:space-between;align-items:flex-start;gap:clamp(18px,2.4vw,34px);flex-wrap:wrap}
.ws__hosthd .wm__hd{margin-bottom:0}
.ws__free{
  display:flex;align-items:center;gap:clamp(14px,1.6vw,20px);flex:none;
  padding:clamp(18px,2vw,26px) clamp(24px,2.6vw,36px);border-radius:18px;
  background:#fff;border:2px solid #bcd6ff;
  box-shadow:0 18px 40px rgba(30,60,130,.12);
  font-size:clamp(13px,1.15vw,15px);font-weight:700;line-height:1.5;
}
.ws__free b{display:block;margin-top:3px;font-size:clamp(19px,1.9vw,25px);color:var(--blue-d);letter-spacing:.01em}
.ws__freeic{flex:none;display:grid;place-items:center;width:clamp(44px,4vw,56px);aspect-ratio:1;border-radius:14px;background:#eef4ff;color:var(--blue)}
.ws__freeic svg{width:56%;height:56%}
/* ★2社は「どちらか」の関係。ロゴをORで並べる */
.ws__hosts{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(14px,2vw,26px);align-items:center}
.ws__hostcard{
  display:grid;place-items:center;padding:clamp(22px,2.8vw,38px);border-radius:18px;
  background:#fff;border:1px solid #e6ecf7;box-shadow:0 14px 34px rgba(30,60,130,.08);
}
.ws__hostcard img{max-width:min(100%,240px);height:auto}
.ws__or{
  display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  background:var(--grad);color:#fff;font-size:13px;box-shadow:0 10px 24px rgba(20,90,255,.28);
}
.ws__check{display:flex;flex-direction:column;gap:12px}
.ws__check li{display:flex;gap:12px;font-size:13.5px;line-height:1.9}
.ws__check b{font-weight:800}
.ws__check em{font-style:normal;color:var(--ink-2)}
.ws__ck{
  flex:none;display:grid;place-items:center;width:20px;height:20px;margin-top:4px;border-radius:6px;
  background:var(--grad);color:#fff;
}
.ws__ck svg{width:13px;height:13px}

/* サンプル一覧 */
.ws__cat{
  margin-top:clamp(32px,3.8vw,50px);font-size:clamp(16px,1.5vw,20px);font-weight:800;
  padding-left:14px;border-left:4px solid transparent;border-image:var(--grad-v) 1;
}
.ws__grid{margin-top:clamp(18px,2.2vw,28px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.8vw,24px)}
.ws__card{
  display:block;height:100%;border-radius:16px;overflow:hidden;background:#fff;
  border:1px solid #e6ecf7;box-shadow:0 14px 34px rgba(30,60,130,.09);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.ws__card:hover{transform:translateY(-4px);box-shadow:0 24px 52px rgba(30,60,130,.16)}
/* ★リンク先が生きていないカードは押せる見た目にしない */
.ws__card--nolink{cursor:default}
.ws__card--nolink:hover{transform:none;box-shadow:0 14px 34px rgba(30,60,130,.09)}
.ws__shot{display:block;aspect-ratio:10/7;background:#eef3fb}
.ws__shot img{width:100%;height:100%;object-fit:cover}
.ws__meta{display:block;padding:clamp(12px,1.4vw,18px)}
.ws__no{display:block;font-size:13px;letter-spacing:.04em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.ws__name{display:block;margin-top:5px;font-size:14px;font-weight:800;line-height:1.5}
.ws__desc{display:block;margin-top:7px;font-size:12px;line-height:1.85;color:var(--ink-2)}

/* ── 制作の流れ（縦のタイムライン。カンプ準拠） ── */
.ws__flowhd{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(20px,3vw,50px);align-items:start}
.ws__flowhd .wm__hd{margin-bottom:0}
.ws__steps{position:relative;display:flex;flex-direction:column;gap:clamp(10px,1.2vw,14px)}
/* 番号を縦につなぐ線 */
.ws__steps::before{
  content:"";position:absolute;left:clamp(31px,3vw,39px);top:28px;bottom:28px;width:2px;
  background:linear-gradient(180deg,rgba(120,175,255,.55),rgba(120,175,255,.12));
}
.ws__steps li{
  position:relative;display:grid;
  grid-template-columns:auto auto minmax(0,1fr) auto;
  gap:clamp(12px,1.6vw,20px);align-items:center;
  padding:clamp(16px,1.8vw,22px) clamp(18px,2vw,26px);border-radius:14px;
  background:#fff;border:1px solid #e8ecf3;box-shadow:0 10px 26px rgba(30,60,130,.06);
}
.ws__sno{
  flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:var(--grad);color:#fff;font-size:13px;box-shadow:0 8px 18px rgba(20,90,255,.26);
}
/* 担当のラベル。幅を揃えて視線が縦に流れるようにする */
/* ★誰の作業かを色で見分けられるようにする（全部同じ青だと分からない＝ボス指摘）。
     お客様＝白地に青枠／ウェブプロ＝青の塗り／両方・最終＝墨の塗り */
.ws__who{
  flex:none;display:inline-grid;place-items:center;min-width:clamp(86px,8vw,112px);
  padding:8px 14px;border-radius:999px;
  font-size:12.5px;font-weight:800;white-space:nowrap;letter-spacing:.02em;
}
.ws__who--client{background:#fff;color:var(--blue-d);box-shadow:inset 0 0 0 2px #9fc3ff}
.ws__who--us{background:var(--grad);color:#fff;box-shadow:0 8px 18px rgba(20,90,255,.24)}
.ws__who--both{background:var(--ink);color:#fff}
.ws__stext{font-size:13.5px;line-height:1.9}
.ws__snote{display:block;margin-top:5px;font-size:12px;color:var(--ink-2)}
/* ★薄すぎて見えなかった（ボス指摘）。色を効かせて枠に載せる */
.ws__sic{
  flex:none;display:grid;place-items:center;width:clamp(40px,3.4vw,48px);aspect-ratio:1;
  border-radius:12px;background:#eef4ff;color:var(--blue);
  transition:transform .4s var(--ease),background .4s var(--ease);
}
.ws__sic svg{width:54%;height:54%}
.ws__steps li:hover .ws__sic{transform:scale(1.08) rotate(-4deg);background:#e2edff}

/* お客様への「2週間で伴走してほしい」というお願い。本文に埋もれさせない */
.ws__ask{
  display:flex;gap:clamp(14px,1.6vw,20px);align-items:flex-start;
  margin-top:clamp(18px,2vw,26px);padding:clamp(18px,2vw,26px) clamp(20px,2.2vw,30px);
  border-radius:14px;background:#fff;border:2px solid #bcd6ff;
  box-shadow:0 14px 32px rgba(30,60,130,.10);
}
.ws__askic{flex:none;display:grid;place-items:center;width:clamp(38px,3.4vw,46px);aspect-ratio:1;border-radius:12px;background:#eef4ff;color:var(--blue)}
.ws__askic svg{width:58%;height:58%}
.ws__ask p{font-size:13.5px;line-height:2;color:var(--ink-2)}
.ws__ask b{color:var(--ink);font-weight:800}

/* ★ステップのアイコンが順に立ち上がる。
   .ws__steps が画面に入って data-rev の .on が付いたときだけ走らせる。
   --i は :nth-child で与える（PHP側に遅延を書かないで済む） */
@keyframes ws-pop{
  0%  {opacity:0;transform:translateY(10px) scale(.7)}
  60% {opacity:1;transform:translateY(0) scale(1.12)}
  100%{opacity:1;transform:none}
}
.ws__steps.on .ws__sic{animation:ws-pop .55s var(--ease-out) both;animation-delay:calc(var(--i,0) * .07s)}
.ws__steps li:nth-child(1){--i:1}  .ws__steps li:nth-child(2){--i:2}
.ws__steps li:nth-child(3){--i:3}  .ws__steps li:nth-child(4){--i:4}
.ws__steps li:nth-child(5){--i:5}  .ws__steps li:nth-child(6){--i:6}
.ws__steps li:nth-child(7){--i:7}  .ws__steps li:nth-child(8){--i:8}
.ws__steps li:nth-child(9){--i:9}  .ws__steps li:nth-child(10){--i:10}

/* 締めのバンド */
.ws__done{
  display:flex;align-items:center;justify-content:center;gap:clamp(16px,2vw,26px);
  padding:clamp(24px,3vw,40px);border-radius:18px;text-align:left;
  background:linear-gradient(118deg,rgba(120,175,255,.16),rgba(120,175,255,.06));
  border:1px solid #d7e5ff;flex-wrap:wrap;
}
.ws__doneic{position:relative;flex:none;color:var(--blue)}
.ws__doneic svg{width:clamp(46px,4.4vw,58px);height:auto}
.ws__doneh{font-size:clamp(17px,1.7vw,22px);font-weight:800}
.ws__donet{margin-top:8px;font-size:13.5px;color:var(--ink-2)}

/* ★「完了した」感を出す：丸→チェックの順に線が描かれ、最後に輪が一度広がる */
@keyframes ws-ring{to{stroke-dashoffset:0}}
@keyframes ws-tick{to{stroke-dashoffset:0}}
@keyframes ws-wave{
  0%  {opacity:.45;transform:scale(.72)}
  70% {opacity:0;  transform:scale(1.5)}
  100%{opacity:0;  transform:scale(1.5)}
}
.ws__done--anim .ws__ring{stroke-dasharray:126;stroke-dashoffset:126}
.ws__done--anim .ws__tick{stroke-dasharray:32;stroke-dashoffset:32}
.ws__done--anim.on .ws__ring{animation:ws-ring .7s var(--ease-out) .05s forwards}
.ws__done--anim.on .ws__tick{animation:ws-tick .35s var(--ease-out) .6s forwards}
.ws__done--anim .ws__doneic::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:2px solid var(--blue);opacity:0;pointer-events:none;
}
.ws__done--anim.on .ws__doneic::after{animation:ws-wave 1s var(--ease-out) .85s}

/* ★線を消して待つ作りなので、.on が付かない経路では消えたままになる。
   JS無効（.jsが付かない）と、JS死亡時の保険（.rev-safe＝.onを付けずに表示する）の
   両方で、最初から描かれた状態に戻す */
html:not(.js) .ws__done--anim .ws__ring,
html:not(.js) .ws__done--anim .ws__tick,
html.rev-safe .ws__done--anim .ws__ring,
html.rev-safe .ws__done--anim .ws__tick{stroke-dashoffset:0}

/* 注意事項 */
.ws__rules{margin-top:clamp(24px,3vw,40px);display:flex;flex-direction:column;gap:clamp(14px,1.8vw,22px)}
.ws__rule{padding:clamp(20px,2.2vw,30px);border-radius:16px;background:#fff;border:1px solid #e6ecf7;box-shadow:0 12px 30px rgba(30,60,130,.07)}
.ws__rule h3{display:flex;align-items:center;gap:12px;font-size:clamp(15px,1.4vw,18px);font-weight:800;line-height:1.5}
.ws__rno{
  flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:9px;
  background:var(--grad);color:#fff;font-size:13px;
}
.ws__rule ul{margin-top:clamp(14px,1.6vw,20px);display:flex;flex-direction:column;gap:9px}
.ws__rule li{position:relative;padding-left:18px;font-size:13.5px;line-height:1.95;color:var(--ink-2)}
.ws__rule li::before{content:"";position:absolute;left:0;top:.78em;width:6px;height:6px;border-radius:50%;background:#9fc0f5}

/* チャットワーク */
.ws__cwin{text-align:center}
.ws__cwin h2{font-size:clamp(18px,1.8vw,24px);font-weight:800}
.ws__cwin p{margin-top:10px;font-size:13.5px;color:var(--ink-2)}
/* ★2枚並び。中身の高さが違う（ロゴの縦横比が別）ので、
   ロゴ枠の高さを固定して2枚の見た目を揃える */
.ws__chats{
  margin-top:clamp(20px,2.4vw,30px);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(14px,1.8vw,24px);max-width:720px;margin-inline:auto;
}
.ws__cwbtn{
  display:flex;flex-direction:column;align-items:center;gap:14px;height:100%;
  padding:clamp(20px,2.2vw,28px) clamp(16px,1.8vw,24px);border-radius:16px;
  background:#fff;border:1px solid #e6ecf7;box-shadow:0 14px 34px rgba(30,60,130,.10);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.ws__cwbtn:hover{transform:translateY(-3px);box-shadow:0 22px 48px rgba(30,60,130,.16)}
.ws__cwlogo{display:grid;place-items:center;height:clamp(44px,4.4vw,58px)}
.ws__cwlogo img{max-width:100%;max-height:100%;width:auto;height:auto}
.ws__cwt{font-size:12.5px;font-weight:700;line-height:1.7;color:var(--ink-2)}

@media(max-width:600px){
  .ws__chats{grid-template-columns:1fr;max-width:340px}
}

@media(max-width:1000px){
  .ws__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ws__top{grid-template-columns:1fr;gap:30px}
  .ws__flowhd{grid-template-columns:1fr;gap:22px}
}
@media(max-width:760px){
  .ws__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ws__cols{grid-template-columns:1fr}
  /* ORの丸は縦並びに切り替える */
  .ws__hosts{grid-template-columns:1fr;justify-items:center}
  .ws__or{width:40px;height:40px}
  /* 縦線は番号の位置がずれるので消す */
  .ws__steps::before{display:none}
  .ws__steps li{grid-template-columns:auto minmax(0,1fr);row-gap:10px}
  /* ★グリッドの子は既定で引き伸ばされる。文字幅に合わせないと
     「お客様」の丸が画面幅いっぱいに伸びる（実測251px） */
  .ws__who{grid-column:2;justify-self:start}
  .ws__steps li > .ws__sbody{grid-column:1 / -1}
  .ws__sic{display:none}
}
@media(max-width:480px){
  .ws__grid{grid-template-columns:1fr}
  .ws__points{grid-template-columns:1fr}
}

/* ── アプローチ（濃紺・4ステップ） ── */
.apr__in{
  position:relative;z-index:1;
  display:grid;grid-template-columns:minmax(260px,.82fr) minmax(0,1.18fr);
  gap:clamp(32px,4vw,72px);align-items:center;
}
.apr .svs__en{color:#5a9cff}
.apr__lead{margin-top:clamp(20px,2.4vw,30px);font-size:14.5px;line-height:2.15;color:rgba(255,255,255,.72)}
.apr__panel{display:flex;align-items:stretch;gap:clamp(8px,1.2vw,16px);padding:clamp(26px,3vw,46px) clamp(20px,2.4vw,36px)}
.apr__step{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;text-align:center;gap:13px}
.apr__ic{color:rgba(255,255,255,.92)}
.apr__ic svg{width:46px;height:46px}
.apr__nm{font-size:15px;font-weight:800}
.apr__tx{font-size:12px;line-height:1.95;color:rgba(255,255,255,.62)}
.apr__arr{flex:none;align-self:center;color:rgba(160,200,255,.75)}
.apr__arr svg{width:24px;height:8px}

@media(max-width:1080px){
  .ph__in{grid-template-columns:1fr;gap:40px}
  /* 2列：縦罫は右列だけ、横罫は下段（3枚目以降）だけ */
  .sidx__panel{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sidx__card::before{display:none}
  .sidx__card:nth-child(even)::before{display:block}
  .sidx__card:nth-child(n+3)::after{display:block}
}
@media(max-width:900px){
  .svc__in{grid-template-columns:1fr;gap:34px}
  .svc__in--rev > .svc__l{order:0}
  .svc__in--rev > .svc__panel{order:0}
  .apr__in{grid-template-columns:1fr;gap:36px}
  .apr__panel{flex-wrap:wrap;row-gap:30px}
  .apr__step{flex:1 1 42%}
  .apr__arr{display:none}
}
@media(max-width:600px){
  /* 1列：横罫だけ */
  .sidx__panel{grid-template-columns:1fr}
  .sidx__card::before,.sidx__card:nth-child(even)::before{display:none}
  .sidx__card + .sidx__card::after{display:block}
  .sidx__nm{margin-top:16px}
  .sidx__en{margin-bottom:16px}
}

/* ============================================================
   イラスト（カンプの中央モックをCSS+SVGで再現）
   ============================================================ */
.il{position:relative;width:100%;max-width:470px}

/* ── ブラウザ編集画面（ダーク） ── */
.il--browser{
  border-radius:16px;padding:16px;
  background:linear-gradient(160deg,rgba(120,170,255,.14),rgba(120,170,255,.04));
  border:1px solid rgba(140,190,255,.38);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 30px 60px rgba(0,15,50,.5),0 0 50px rgba(50,120,255,.14);
}
.ilb__bar{display:flex;gap:6px;align-items:center;margin-bottom:12px}
.ilb__bar i{width:8px;height:8px;border-radius:50%;border:1.5px solid rgba(160,200,255,.8)}
.ilb__tabs{display:flex;gap:10px;margin-left:16px}
.ilb__tabs u{width:26px;height:3px;border-radius:2px;background:rgba(170,205,255,.5)}
.ilb__cta{margin-left:auto;width:58px;height:14px;border-radius:4px;background:var(--grad)}
.ilb__hero{position:relative;height:148px;border-radius:10px;overflow:hidden;
  background:linear-gradient(130deg,#3d7dff 0%,#1c49b8 55%,#122a63 100%);
  border:1px solid rgba(160,200,255,.4)}
.ilb__dot{position:absolute;left:12px;top:12px;width:14px;height:14px;border-radius:50%;background:#8db9ff}
.ilb__l{position:absolute;left:14px;height:4px;border-radius:2px;background:rgba(255,255,255,.85)}
.ilb__l1{top:44px;width:34%}
.ilb__l2{top:58px;width:26%}
.ilb__l3{top:72px;width:30%}
.ilb__btn{position:absolute;left:14px;top:92px;width:58px;height:16px;border-radius:4px;border:1.5px solid rgba(255,255,255,.85)}
.ilb__mt{position:absolute;right:6px;bottom:0;width:56%}
.ilb__row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.ilb__card{display:flex;gap:10px;padding:10px;border-radius:8px;height:70px;
  border:1px solid rgba(150,190,255,.3);background:rgba(20,40,85,.4)}
.ilb__card i{flex:none;width:32%;border-radius:4px;background:rgba(120,160,230,.35)}
.ilb__card em{flex:1;display:flex;flex-direction:column;gap:7px;justify-content:center}
.ilb__card u{display:block;height:3.5px;border-radius:2px;background:rgba(170,205,255,.5)}
.ilb__card u:last-child{width:60%}
.ilb__sel{position:relative;margin:16px 4px 4px;height:52px;border:1.5px dashed rgba(120,170,255,.75);border-radius:4px;display:grid;place-items:center}
.ilb__h{position:absolute;width:7px;height:7px;background:#0d1830;border:1.5px solid rgba(140,185,255,.9)}
.ilb__h--tl{left:-4px;top:-4px}.ilb__h--tc{left:calc(50% - 4px);top:-4px}.ilb__h--tr{right:-4px;top:-4px}
.ilb__h--bl{left:-4px;bottom:-4px}.ilb__h--bc{left:calc(50% - 4px);bottom:-4px}.ilb__h--br{right:-4px;bottom:-4px}
.ilb__plus{width:26px;height:26px;border-radius:50%;border:1.5px solid #5aa0ff;color:#5aa0ff;
  display:grid;place-items:center;font:700 14px/1 "Outfit",sans-serif}
.il__cursor{position:absolute;width:26px;right:12%;top:37%;filter:drop-shadow(0 2px 6px rgba(0,0,0,.4))}

/* ── 運用ダッシュボード（ライト） ── */
.il--dash{
  border-radius:18px;padding:18px;max-width:480px;
  display:grid;grid-template-columns:1.5fr 1fr;gap:14px;
  background:linear-gradient(165deg,rgba(255,255,255,.8),rgba(255,255,255,.45));
  border:1px solid rgba(255,255,255,.95);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 30px 60px rgba(30,60,130,.16);
}
.ild__main{border-radius:12px;padding:14px;background:rgba(255,255,255,.75);border:1px solid rgba(255,255,255,.95);box-shadow:0 10px 24px rgba(30,60,130,.08)}
.ild__t{display:block;width:46%;height:5px;border-radius:2px;background:#c9d7ef;margin-bottom:10px}
.ild__line{width:100%}
.ild__bars{display:flex;align-items:flex-end;gap:7px;height:74px;margin-top:14px;padding-top:10px;border-top:1px solid #e4ebf7}
.ild__bars i{flex:1;height:var(--h,50%);background:var(--grad);border-radius:3px 3px 0 0}
.ild__side{display:flex;flex-direction:column;gap:10px}
.ild__ref{display:grid;place-items:center;height:74px;border-radius:12px;background:rgba(255,255,255,.8);border:1px solid rgba(255,255,255,.95);box-shadow:0 10px 24px rgba(30,60,130,.08)}
.ild__ref svg{width:34px}
.ild__row{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:10px;
  background:rgba(255,255,255,.8);border:1px solid rgba(255,255,255,.95);box-shadow:0 8px 18px rgba(30,60,130,.07)}
.ild__row .ild__d{flex:none;width:12px;height:12px;border-radius:50%;background:var(--c,#2f7bff)}
.ild__row u{flex:1;display:block;height:4px;border-radius:2px;background:#d5e0f2}
.ild__row b{flex:none;width:8px;height:8px;border-radius:50%;background:var(--c,#2f7bff)}
.ild__pie{
  position:absolute;left:8%;bottom:-26px;display:flex;gap:12px;align-items:center;
  padding:14px 16px;border-radius:12px;
  background:rgba(255,255,255,.92);border:1px solid rgba(255,255,255,1);
  box-shadow:0 18px 40px rgba(30,60,130,.16);
}
.ild__pchart{width:44px;height:44px;border-radius:50%;
  background:conic-gradient(#2f7bff 0 55%,#7fb0ff 55% 80%,#dbe6f7 80% 100%)}
.ild__pie em{display:flex;flex-direction:column;gap:7px}
.ild__pie u{display:block;width:74px;height:4px;border-radius:2px;background:#d5e0f2}
.ild__pie u:last-child{width:52px}
.il__cursor--dash{right:6%;top:auto;bottom:-6px;filter:drop-shadow(0 3px 8px rgba(40,70,140,.35))}

/* ── メディア記事（ダーク・重なるページ） ── */
.il--media{max-width:430px;padding:26px 10px 30px}
.ilm__back{position:absolute;border-radius:12px;border:1px solid rgba(140,190,255,.28);
  background:linear-gradient(160deg,rgba(120,170,255,.10),rgba(120,170,255,.02));
  padding:14px;display:flex;flex-direction:column;gap:10px}
.ilm__back i{display:block;height:4px;border-radius:2px;background:rgba(170,205,255,.35)}
.ilm__back i:first-child{height:34px;border-radius:6px;background:rgba(120,160,230,.22)}
.ilm__back--1{left:-4%;top:10%;width:52%;height:74%;transform:rotate(-7deg)}
.ilm__back--2{left:4%;top:4%;width:56%;height:82%;transform:rotate(-3.5deg)}
.ilm__page{
  position:relative;margin-left:22%;border-radius:14px;padding:16px;
  background:linear-gradient(160deg,rgba(130,180,255,.13),rgba(130,180,255,.04));
  border:1px solid rgba(150,195,255,.4);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 30px 60px rgba(0,15,50,.5),0 0 46px rgba(50,120,255,.13);
}
.ilm__hd{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.ilm__av{flex:none;width:22px;height:22px;border-radius:50%;background:rgba(140,185,255,.45)}
.ilm__hd em{flex:1;display:flex;flex-direction:column;gap:6px}
.ilm__hd u{display:block;height:3.5px;border-radius:2px;background:rgba(170,205,255,.5)}
.ilm__hd u:last-child{width:55%}
.ilm__bm{flex:none;width:13px}
.ilm__img{position:relative;height:110px;border-radius:8px;overflow:hidden;
  background:linear-gradient(130deg,rgba(60,120,255,.55),rgba(20,50,130,.65));
  border:1px solid rgba(150,195,255,.4)}
.ilm__img svg{position:absolute;inset:auto 0 0 0;width:100%}
.ilm__tags{display:flex;gap:8px;margin-top:12px}
.ilm__tags i{width:44px;height:11px;border-radius:5px;border:1.2px solid rgba(140,190,255,.6)}
.ilm__tags i.on{background:var(--grad);border:0}
.ilm__ln{display:block;height:3.5px;border-radius:2px;background:rgba(170,205,255,.45);margin-top:10px}
.ilm__ln--s{width:70%}
.ilm__item{display:flex;gap:10px;margin-top:12px}
.ilm__item i{flex:none;width:30px;height:30px;border-radius:6px;background:linear-gradient(135deg,rgba(90,150,255,.7),rgba(40,90,220,.7))}
.ilm__item em{flex:1;display:flex;flex-direction:column;gap:6px;justify-content:center}
.ilm__item u{display:block;height:3.5px;border-radius:2px;background:rgba(170,205,255,.45)}
.ilm__item u:last-child{width:62%}
.ilm__pen{position:absolute;right:-2%;bottom:2%;width:58px;filter:drop-shadow(0 0 14px rgba(70,140,255,.5))}

/* ============ フッター上の巨大ワードマーク（QANDO準拠） ============ */
.ftword{
  background:var(--bg);border-top:1px solid var(--line);
  /* ★上下を同じにする（2026-08-08 ボス指摘）。
     旧＝上 clamp(70,10vw,150) / 下 clamp(50,7vw,110) の非対称。
     巨大な文字組みは行の高さで実際の字より箱が下に余るため、上を厚くして
     見た目の中央を取っていた。ロゴ画像は箱＝絵そのものなので、
     そのままだと44px下寄りになっていた（実測）。 */
  padding:clamp(60px,8.5vw,130px) 1.5vw;
  overflow:hidden;
}
/* ★巨大な文字組みからロゴ画像へ（2026-08-08 ボス指示）。
   文字より少し小さくする。.bigword の font-size は img には効かないので幅で決める */
.ftword__t{
  display:block;width:min(78vw,1080px);height:auto;margin-inline:auto;
}

/* ============ ABOUT（右に巨大な「S」の線画）============ */
/* ★右カラムを等幅にして、その中央にマークを置く（2026-08-08 ボス指摘）。
   旧＝1fr auto で、マークがwrapの右端に張り付いて右に寄りすぎていた */
.about__in{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}

/* 社名の頭文字。ワードマークと同じ書体（SVGの<text>）を輪郭線だけで見せる。
   輪郭はブルーのグラデーション（CSSのtext-strokeではグラデにできないためSVG） */
/* ★シンボルマーク。旧＝巨大な「S」の輪郭線（2026-08-08 差し替え）。
   Sは縦長・シンボルは横長なので、同じ幅だと小さく見える。
   見た目の存在感を合わせるため幅を広げてある */
.about__mark{
  justify-self:center;                     /* ★右端ではなく右半分の中央へ */
  width:clamp(260px,34vw,480px);           /* ★もう少し大きく（410→480） */
  pointer-events:none;user-select:none;
}
.about__mark img{display:block;width:100%;height:auto}

/* ============ NEWS（ライトグラスのカードリスト）============ */
.sec--news{
  position:relative;overflow:hidden;
  /* 細い斜めの光線（固定） */
  background-image:linear-gradient(118deg,
    transparent 0 63.4%,rgba(90,150,255,.55) 63.4% 63.65%,transparent 63.8%);
  background-attachment:fixed;background-repeat:no-repeat;
}
.news__in{position:relative;z-index:1;display:grid;grid-template-columns:auto 1fr;gap:clamp(32px,6vw,90px);align-items:start}
.news__l{position:relative}
.news__l::before{  /* 背景のゴーストN（薄い塗り。strokeは可変フォントで崩れる） */
  content:"N";position:absolute;left:40px;top:-40px;z-index:-1;
  font-family:"Outfit",sans-serif;font-weight:900;
  font-size:clamp(260px,26vw,420px);line-height:1;
  color:rgba(0,21,59,.05);
  pointer-events:none;user-select:none;
}
.news__big{font-size:clamp(46px,7.4vw,104px);line-height:.9;margin-top:0}
.news__list li{margin-bottom:16px}
.news__list li:last-child{margin-bottom:0}
.news__list a{
  display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;gap:14px 22px;
  padding:22px 26px;border-radius:14px;
  background:linear-gradient(165deg,rgba(255,255,255,.92),rgba(255,255,255,.6));
  border:1px solid rgba(255,255,255,.95);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:0 16px 34px rgba(30,60,130,.10);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),color .25s;
}
.news__list a:hover{transform:translateY(-3px);box-shadow:0 24px 46px rgba(30,60,130,.16);color:var(--blue)}
.news__tick{width:5px;height:20px;border-radius:3px;background:var(--grad)}
.news__date{font-family:"Outfit",sans-serif;font-weight:800;font-size:15px;color:var(--ink)}
.news__arrow{width:26px;height:8px;flex:none;transition:transform .4s var(--ease)}
.news__list a:hover .news__arrow{transform:translateX(7px)}

/* ============ レスポンシブ ============ */
@media(max-width:1100px){
  /* サービス2カラム → 縦積み（テキスト列 → ガラスパネル） */
  .svs__in{grid-template-columns:1fr;gap:34px}
  .svs__ghost{bottom:auto;top:-14px;font-size:clamp(120px,20vw,190px)}
  .il{margin-inline:auto}
}
@media(max-width:820px){
  /* パネル内も縦積み（イラスト → リスト） */
  .svs__panel{grid-template-columns:1fr;gap:24px}
}
@media(max-width:900px){
  .intro__in{grid-template-columns:1fr;align-items:start}
  .intro__fig{justify-content:flex-start}
  .about__in{grid-template-columns:1fr}
  /* ★見出しの直下に中央で置く（2026-08-08 ボス指示）。
     旧＝16%の透過で背景に重ねる作りで、塗りのシンボルだと本文に被って読めなかった。
     会社概要と同じく display:contents ＋ order で並べ替える */
  /* ★row-gap を殺す。殺さないと .about__in の gap(40px) が全項目の間に効き、
     各要素が持っている margin と二重になって間延びする */
  .about__in{row-gap:0}
  .about__l{display:contents}
  .about__h{order:1}
  .about__mark{
    order:2;justify-self:center;width:min(56vw,240px);
    margin:clamp(14px,4vw,26px) 0 clamp(10px,3vw,20px);
  }
  /* ★display:contents はレイアウトの箱を消すだけで、セレクタの親子関係は変わらない。
     .about__in > .lead では一致しない（実際に並び順が崩れた）。親は .about__l のまま */
  .about__l > .lead{order:3}
  .about__l > .act{order:4}
  .about__l{position:relative;z-index:1}
  .news__in{grid-template-columns:1fr;gap:26px}
  .news__l::before{left:30%;top:-40px}
  .pc-br{display:none}
}
@media(max-width:600px){
  .cta__in{flex-direction:column;align-items:stretch}
  .cta__in .btn{width:100%}
  .news__list a{grid-template-columns:auto auto 1fr auto;gap:10px 14px;padding:18px 18px}
  .ft__in{flex-direction:column}
  .ft__cols{grid-template-columns:1fr 1fr;width:100%}
  .clu__card:nth-child(3){display:none}  /* 幅が足りない端末は2枚で成立させる */
  .ild__pie{position:static;margin-top:12px;grid-column:1/-1}
  .il--dash{grid-template-columns:1fr 1fr}
}

/* ============ スクロール出現アニメーション ============ */
/* html.js が付いている時だけ隠す（JS無効なら全部最初から見える＝壊れない） */
html.js [data-rev]{
  opacity:0;transform:translateY(28px);filter:blur(8px);
  transition:opacity .95s var(--ease-out),transform 1.05s var(--ease-out),filter .95s var(--ease-out);
  transition-delay:var(--d,0s);
}
html.js [data-rev].on{opacity:1;transform:none;filter:none}
/* ★浮遊する要素は「出現側の transform が効かない」ことを前提に設計している。
   CSSアニメーション(keyframes)の値は通常宣言より強く、上書きできないため。
   結果、浮遊パネルは opacity と blur だけでフェードインし、位置は最初から浮遊する
   （これは意図した挙動。打ち消しの宣言を書いても無効なので置かない） */
/* フッター上の巨大ワードマーク専用＝左→右のワイプ（描かれるように現れる）。
   ★clip-pathで面積ゼロにした要素はIntersectionObserverが「非交差」と判定して
   永久に発火しない（実測）。observe対象の親[data-rev]は隠さず、子だけを切る */
html.js [data-rev].rev-wipe{opacity:1;transform:none;filter:none}
html.js .rev-wipe .bigword{
  clip-path:inset(-4% 100% -4% 0);
  transition:clip-path 1.35s var(--ease-out) var(--d,0s);
}
html.js .rev-wipe.on .bigword{clip-path:inset(-4% -1% -4% 0)}
/* ★保険：site.jsが死んでいても4秒後に必ず見える（header.phpのインラインJSが付与）。
   ワイプの子の解除は同特異度のため、必ずこの位置（後ろ）に置く */
html.rev-safe [data-rev]{opacity:1;transform:none;filter:none}
html.rev-safe .rev-wipe .bigword{clip-path:none}

/* キーボード操作の可視化 */
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

/* ============ 動きを減らす設定を尊重 ============ */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  /* FVエフェクトはJS側でも停止するが、CSSでも保険をかける */
  .fv__stage.is-fx .fv__h1{visibility:visible}
  .fv__canvas{display:none}
  /* 出現アニメも無効化（隠したまま取り残さない） */
  html.js [data-rev]{opacity:1;transform:none;filter:none;clip-path:none}
  html.js .rev-wipe .bigword{clip-path:none}
  .svs__panel--float,.clu__card{animation:none}
}