/* ============================================================
   MOSAIQ｜サイト共通CSS（デザインシステム＋TOP＋下層共通部品）
   ------------------------------------------------------------
   ★規律：ブランド色の直値をここに書かない。色は必ず var() を参照する
     （トークンは parts/theme.php が site.php の ink / brand / bg から生成する）。
     白の透過rgba・color-mix() で作る派生値だけ直値でよい。
   ★黒い罫線・濃いグレーの枠線を1本も使わない。罫は --line（inkの12%）か薄い水色（--tint-4）だけ
   ★brand（#7EC8E3）は「面・ボタン・タグ・濃色帯の上」専用。白地の文字・線画・細い罫線に生で使わない
     （白地 1.87:1 ＝見えない）。
     白地に置く英字ラベルは --accent-ink（4.97:1）、線画アイコン・細い罫線・下線・フォーカス枠は --ico-ink（3.57:1）
   ★アニメは opacity / transform に限定（CLSゼロ）。prefers-reduced-motion で全停止
   ============================================================ */

/* ── 派生トークン（theme.php の出力からだけ作る）──────────── */
:root {
  --ff-jp: 'Noto Sans JP', var(--font-jp);
  --ff-en: 'Figtree', 'Noto Sans JP', var(--font-jp);
  --pad-sec: clamp(64px, 8vw, 112px);
  --r-xl: 30px;                                 /* 大きいカード */
  --r-lg: 24px;                                 /* 小さいカード・写真 */
  --hd-h: 86px;                                 /* ヘッダーの高さ（14px＋カプセル58px＋14px）。≤1024 は 81px。FV・タイトル帯の上余白に使う */
  /* ★白地に置く「文字・線画・細い罫線」の色。brand を生で使うと 1.28:1 で消えるので ink と混ぜて起こす。
     配合率は brand を変えるたびに実測で決め直す（2026-09-29 #7EC8E3→#03FCFF で 45%→38% / 62%→54%、
     2026-10-03 #03FCFF→#7EC8E3 に戻したので 45% / 62% に戻す）。
       --accent-ink … 英字ラベル（ABOUT / BUSINESS 等）＝白地 4.5:1 以上が要る。brand 45% → 白地 4.97:1
       --ico-ink    … 線画アイコン・細い罫線・リンク下線・フォーカス枠＝白地 3:1 以上。brand 62% → 白地 3.57:1 */
  --accent-ink: color-mix(in srgb, var(--brand) 45%, var(--ink));
  --ico-ink:    color-mix(in srgb, var(--brand) 62%, var(--ink));
  /* 面のグラデーション（白→薄い水色） */
  --grad-soft: linear-gradient(180deg, var(--bg) 0%, var(--tint-2) 55%, var(--tint-3) 100%);
  --grad-line: linear-gradient(120deg, var(--brand-l) 0%, var(--brand) 100%);
  --blob: radial-gradient(circle, color-mix(in srgb, var(--brand) 55%, transparent) 0%, transparent 70%);
  /* 白カードの中の円形アイコン面。tint-4 だと白に溶けるので brand を少し強めに混ぜる（面専用） */
  --tint-ico: color-mix(in srgb, var(--brand) 24%, var(--bg));
  /* ★LINE を想起させる緑（2026-10-03 依頼）。使うのは「ヘッダーのLINEで相談」「右下の追従カード」の2箇所だけ。
     --brand とは無関係の固定色なので直値で持つ。
     LINE Green #06C755 そのまま＋文字は ink（5.88:1）。★白文字にしない（#06C755＋白＝2.26:1 で読めない）。
     白文字で 4.5:1 に届く緑は #04893B まで暗くなり LINE に見えなくなるので不採用（報告参照）。
     ホバー＝黒7%（#06B94F／ink 5.09:1）、押下＝黒10%（#05B34C／ink 4.78:1）。
     ★黒を重ねるほど ink との差が縮む＝公式の「押下30%」は使えない（ink 3:1 前後に落ちる） */
  /* LINE緑は 2026-10-03 に不採用（FVと同じ水色に統一）。変数だけ残す */
  --line-green:       #06C755;
  --line-green-hover: color-mix(in srgb, var(--line-green) 93%, #000);
  --line-green-press: color-mix(in srgb, var(--line-green) 90%, #000);
  --on-line-green:    var(--ink);
  /* ★トップの BUSINESS / TRUST&SAFETY・MESSAGE の面（2026-10-03 依頼・面専用）。
     この面の上では --accent-ink（2.90:1）・--ico-ink（2.08:1）が基準割れ。
     面の上に直接置く英字ラベルは brand 15% / ink 85%（#234861・面に対して 5.64:1） */
  --band-sky:     #8FCFE7;
  --on-sky-label: color-mix(in srgb, var(--brand) 15%, var(--ink));
}

/* ── リセット・ベース ─────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--ff-jp);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.9;
  font-size: 16px;
  line-break: strict;
  overflow-x: hidden;                 /* ★横スクロールの最終防波堤（各セクションも個別に overflow:hidden） */
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; }
.en { font-family: var(--ff-en); letter-spacing: .04em; }
.pc-br { display: none; }
@media (min-width: 768px) { .pc-br { display: inline; } }
.br-sp { display: inline; }
@media (min-width: 768px) { .br-sp { display: none; } }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: 24px; }
@media (max-width: 767px) { .wrap { padding-inline: 16px; } }

:focus-visible { outline: 3px solid var(--ico-ink); outline-offset: 3px; border-radius: 6px; }   /* ★白地で見えるフォーカス枠（3.20:1） */

/* ── スクロール出現（[data-rev]）──────────────────────────── */
html.js [data-rev] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.22,.65,.3,1);
  transition-delay: var(--d, 0s);
}
html.js [data-rev].on,
html.js.rev-safe [data-rev] { opacity: 1; transform: none; }

/* ── 装飾：薄い水色のぼんやりした丸 ───────────────────────── */
.blob {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: var(--blob); opacity: .75;
}

/* ============================================================
   共通部品：ラベル・見出し・ボタン・カード・アイコン
   ============================================================ */
.lbl {
  font-family: var(--ff-en); font-weight: 700; font-size: 12.5px; letter-spacing: .18em;
  color: var(--accent-ink); margin-bottom: 8px;
}
.lbl--sm { font-size: 11px; margin-bottom: 2px; }
.sec { position: relative; padding-block: var(--pad-sec); background: var(--bg); }
.sec--tint { background: var(--tint-3); }
/* トップの BUSINESS／TRUST & SAFETY・MESSAGE だけ #8FCFE7 のベタ（.biz / .pil はトップにしか無い＝/service 等は巻き込まない）。
   白の隣接セクションとの境目だけ 48px で馴染ませる（見出し・カードは padding-block 64px〜 の内側なのでベタの上に乗る） */
.sec--tint.biz, .sec--tint.pil {
  background: linear-gradient(180deg, var(--bg) 0, var(--band-sky) 48px, var(--band-sky) calc(100% - 48px), var(--bg) 100%);
}
.sec--tint.biz > .wrap > .sec__head .lbl { color: var(--on-sky-label); }
.sec__h { font-size: clamp(26px, 3.4vw, 36px); font-weight: 900; letter-spacing: .04em; line-height: 1.4; }
.sec__head { margin-bottom: clamp(28px, 3.6vw, 44px); }
.sec__note { font-size: 14px; color: var(--muted); }

/* ボタン（角は完全な丸） */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  padding: 15px 30px; border-radius: 999px;
  font-weight: 700; font-size: 15px; letter-spacing: .04em; line-height: 1.4;
  color: var(--ink); background: var(--bg);
  border: 1.5px solid var(--ico-ink); cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.btn svg { width: 18px; height: 18px; flex: none; transition: transform .25s ease; }
.btn:hover { transform: translateY(-2px); }
.btn:hover svg { transform: translateX(4px); }
.btn--line {
  background: var(--grad-line); color: var(--on-brand); border-color: transparent;
  box-shadow: 0 10px 26px var(--sh-2);
}
.btn--line:hover { box-shadow: 0 16px 34px var(--sh-3); }
.btn--ghost:hover { background: var(--tint-2); }
.btn--lg { padding: 22px 46px; font-size: 17px; gap: 18px; }
.btn--sm { padding: 12px 24px; font-size: 14px; }
.tlink { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; }
.tlink svg { width: 16px; height: 16px; transition: transform .25s ease; }
.tlink:hover svg { transform: translateX(4px); }

/* 白い角丸カード */
.card {
  display: block; background: var(--bg); border-radius: var(--r-xl);
  border: 1px solid var(--tint-4);
  box-shadow: 0 10px 36px var(--sh-1);
  transition: transform .3s ease, box-shadow .3s ease;
}
a.card:hover { transform: translateY(-4px); box-shadow: 0 18px 44px var(--sh-2); }

/* 円形アイコン（淡い水色の面＋線画） */
.ico {
  display: inline-grid; place-items: center; flex: none;
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--tint-4); color: var(--ico-ink);
}
.ico svg { width: 28px; height: 28px; }
.ico--soft { background: var(--tint-ico); }
.ico--lg { width: 80px; height: 80px; }
.ico--lg svg { width: 34px; height: 34px; }
.ico--ring { width: 80px; height: 80px; background: var(--bg); border: 1.5px solid var(--ico-ink); color: var(--ico-ink); }
.ico--ring svg { width: 32px; height: 32px; }

/* ============================================================
   ヘッダー（ロゴ左外＋白いカプセルのナビが浮く）
   ★2026-10-03 白帯→オーバーレイ（依頼者指定・カンプどおり）：
     ・帯の背景は透明。ページ最上端の面（TOPのFV／下層のタイトル帯 .ph）の上に直接載る
     ・sticky のまま margin-bottom を −ヘッダー高 にして、次の要素をヘッダーの裏（画面の最上端）から始めさせる。
       追従（sticky）・下スクロールで隠れる／上スクロールで出る（site.js の .hd--hide）挙動はそのまま
     ・最上端の面は上の padding に --hd-h を足して、見出し・パンくず・カードが潜らないようにする（.fv / .ph / .thx）
     ・スクロール後（.stuck・8px超）は従来どおり白の半透明＋すりガラスの帯を敷く＝写真・白地・#8FCFE7 の帯の上でも
       ロゴが読め、カプセルの輪郭（影＋tint-4の細い縁）が分かる
   ============================================================ */
.hd {
  position: sticky; top: 0; z-index: 100;
  height: var(--hd-h); margin-bottom: calc(var(--hd-h) * -1);
  padding-block: 14px;
  background: transparent;
  transition: transform .3s ease, background .3s ease, box-shadow .3s ease;
}
.hd.stuck { background: rgba(255,255,255,.78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.hd--hide { transform: translateY(-100%); }
.hd__in {
  max-width: var(--wrap); margin-inline: auto; padding-inline: 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.hd__r { display: flex; align-items: center; gap: 8px; }
.hd__pill {
  display: flex; align-items: center; gap: 2px;
  background: var(--bg); border-radius: 999px; padding: 6px;
  box-shadow: 0 8px 28px var(--sh-1), 0 0 0 1px var(--tint-4);
}
.hd__nav { display: flex; align-items: center; padding-left: 8px; }
.hd__nav a {
  padding: 9px 16px; border-radius: 999px;
  font-size: 14px; font-weight: 600; letter-spacing: .04em; white-space: nowrap;
  transition: background .2s ease;
}
.hd__nav a:hover { background: var(--tint-2); }
.hd__nav a[aria-current="page"], .hd__nav a.is-current { background: var(--tint-3); }
.hd__line {
  margin-left: 10px; padding: 9px 20px; border-radius: 999px;
  border: 1.5px solid transparent; background: var(--grad-line); color: var(--on-brand);   /* ★2026-10-03 決定＝FVのLINEボタンと同じ水色に戻す（LINE緑はやめた） */
  font-size: 13.5px; font-weight: 700; letter-spacing: .04em; white-space: nowrap;
  box-shadow: 0 6px 16px var(--sh-2); transition: box-shadow .2s ease, transform .2s ease;
}
.hd__line:hover { box-shadow: 0 10px 24px var(--sh-3); transform: translateY(-1px); }

/* テキストロゴ（最後の1文字＝Q を ink→brand のグラデーションに） */
.logo--text {
  display: inline-block; font-family: var(--ff-en); font-weight: 800;
  font-size: 27px; letter-spacing: .08em; color: var(--ink); line-height: 1;
}
.logo__acc {
  font-weight: inherit;
  /* ★終点を生 brand にすると白地 1.28:1 で最後の1文字が消える。--ico-ink（3.20:1）で止める */
  background: linear-gradient(135deg, var(--ink) 0%, var(--ico-ink) 80%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* バーガー（〜1024pxで表示） */
.burger { display: none; }
@media (max-width: 1024px) {
  :root { --hd-h: 81px; }
  .hd__nav { display: none; }
  .hd__pill { padding: 4px; }
  .hd__line { margin-left: 0; padding: 9px 16px; font-size: 13px; }
  .burger {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 10px;
    background: none; border: 0; cursor: pointer; border-radius: 50%;
  }
  .burger i { display: block; height: 2px; border-radius: 2px; background: var(--ink); transition: transform .3s ease, opacity .3s ease; }
  body.nav-open .burger i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.nav-open .burger i:nth-child(2) { opacity: 0; }
  body.nav-open .burger i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ドロワー */
.drawer {
  position: fixed; inset: 0; z-index: 90;
  background: var(--grad-soft);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .3s ease, transform .3s ease, visibility .3s;
  overflow-y: auto; padding-top: 96px;
}
.drawer.on { opacity: 1; visibility: visible; transform: none; }
.drawer__in { padding: 0 24px 48px; }
.drawer__nav { display: flex; flex-direction: column; }
.drawer__nav a {
  padding: 16px 18px; font-size: 17px; font-weight: 700; border-radius: 999px;
}
.drawer__nav a[aria-current="page"] { background: var(--tint-4); }
.drawer__cta { margin-top: 28px; padding-inline: 18px; }

/* ============================================================
   TOP：FV（白→薄い水色のグラデ地・左右非対称）
   ============================================================ */
/* ★FVの高さ（2026-10-03 ヘッダーをオーバーレイ化＝FVは画面の最上端から始まる）
   ・min-height は「ヘッダー込みで画面高の94%」。★100vh にはしない（スマホのアドレスバーの出入りで破綻する／
     下のセクションがわずかに覗く状態を残す）
   ・svh（= smallest viewport height）を後置き＝対応ブラウザではURLバーが動いても高さが揺れない。
     非対応ブラウザは前の 94vh がそのまま残る（同一プロパティの2段書きによるフォールバック）
   ・上の padding にヘッダーの高さ（--hd-h）を足す＝小見出し・キャッチがヘッダーに潜らない
   ・display:flex + align-items:center ＝伸ばしたぶんの余白を上下に均等配分 */
.fv {
  position: relative; overflow: hidden; background: var(--grad-soft);
  display: flex; align-items: center;
  padding-block: calc(var(--hd-h) + clamp(12px, 2vw, 28px)) clamp(40px, 5vw, 64px);
  min-height: 94vh;
  min-height: 94svh;
}
.blob--fv1 { width: 420px; height: 420px; left: -140px; top: 30%; }
.blob--fv2 { width: 260px; height: 260px; left: 38%; top: -60px; opacity: .55; }
.blob--fv3 { width: 360px; height: 360px; right: -120px; bottom: -120px; }
.fv__in {
  position: relative; z-index: 2;     /* ★文字はカード群より上（カードは文字に被せない配置だが、念のため重なり順でも守る） */
  width: 100%;                        /* ★.fv が flex なので明示が必要（max-width と margin-inline:auto で中央のまま） */
}
.fv__copy { max-width: 600px; }
/* ★サイズは「各行が折り返さない上限」で決める（9文字＋読点が左カラムに収まること）。
   変更したら 1025 / 1200 / 1440 / 390px で行数を実測すること */
.fv__catch { font-size: clamp(34px, 4.2vw, 56px); font-weight: 900; line-height: 1.35; letter-spacing: .03em; color: var(--ink); }
/* ★配色（カンプ）：1行目は ink のベタ、2行目だけ ink→brand 寄りのグラデーション。
   終点は --ico-ink（白地 3.57:1）で止める＝生 brand（1.87:1）まで行かない。
   ・グラデは行ごとの span に掛ける（親の h1 に background-clip:text を掛けると、アニメで合成レイヤーになる子の文字が
     Chromium で描画されない＝キャッチが消える不具合があった）
   ・width:fit-content ＝グラデの幅を「文字の幅」に合わせる（カラム幅だと終点まで届かず ink のままに見える） */
.fv__line { display: block; width: fit-content; }
.fv__line:nth-child(2) {
  background: linear-gradient(100deg, var(--ink) 0%, var(--ico-ink) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* キャッチの上の小見出し（ink の小さな太字。英字ラベルではないので accent-ink にしない） */
.fv__sub { margin-bottom: clamp(12px, 1.4vw, 20px); font-size: clamp(14px, 1.15vw, 16px); font-weight: 700; letter-spacing: .08em; color: var(--ink); }
/* 左下のスクロール誘導（縦の細線＋SCROLL）。線は --ico-ink（白地の細い罫線＝3:1以上）、文字は --accent-ink（英字ラベル＝4.5:1以上）。
   線の中を短い ink の線（縦線の40%）が上から下へ流れる。上端でフェードイン→下端でフェードアウト→見えない間に上へ戻る
   ＝途切れ・瞬間移動が見えないループ（2026-10-03「ぎこちない」対応・ease-in-out 2.6s）。
   transform / opacity だけ・reduced-motion で停止。スマホは出さない（下にカード群が続くため） */
.fv__scroll {
  display: inline-flex; align-items: flex-end; gap: 12px; margin-top: clamp(24px, 3vw, 44px);
  font-size: 11px; font-weight: 700; letter-spacing: .22em; line-height: 1; color: var(--accent-ink);
}
.fv__scroll-bar { position: relative; display: block; width: 1.5px; height: 64px; overflow: hidden; background: var(--ico-ink); }
.fv__scroll-bar::after {
  content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 40%; background: var(--ink);
  opacity: 0; animation: fv-scroll 2.6s ease-in-out infinite;
}
/* translateY の % は自分の高さ基準：-100%＝線の上に隠れた位置／250%＝線の下端の外（64px ÷ 25.6px） */
@keyframes fv-scroll {
  0%   { transform: translateY(-100%); opacity: 0; }
  25%  { opacity: 1; }
  70%  { opacity: 1; }
  100% { transform: translateY(250%);  opacity: 0; }
}
.fv__lead { margin-top: clamp(18px, 2.2vw, 28px); font-size: clamp(14.5px, 1.2vw, 16px); line-height: 2.05; color: var(--ink); }
.fv__act { margin-top: clamp(22px, 2.8vw, 36px); }

/* FVのLINEボタン（カンプの形）＝水色の塗りの角丸ボタン＋右端に ink の円、その中に白い矢印。
   ★FVの1つだけ（.btn--orb）。ヘッダー・追従カードのLINE緑には触らない。
   ・ホバーで円だけ少し右へ（中の矢印は円と一緒に動く＝.btn:hover svg の個別移動は打ち消す） */
.btn--orb { padding: 8px 8px 8px 30px; gap: 18px; }
.btn__orb {
  display: inline-grid; place-items: center; flex: none;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--ink); color: #fff;
  transition: transform .25s ease;
}
.btn--orb .btn__orb svg { width: 17px; height: 17px; }
.btn--orb:hover svg { transform: none; }
.btn--orb:hover .btn__orb { transform: translateX(4px); }

/* ============================================================
   FV：1枚写真（2026-10-17 修正最終で作り替え。下の「写真カード6枚」は v=25 までの構成＝今は使っていない）
   ------------------------------------------------------------
   ・PC＝写真（顧客のAI画像・横長）を FV の全面に敷き、左に白のグラデーションを重ねて文字を載せる。
     写真の左端はコメント欄の装飾なので、白に沈めて文字の邪魔をさせない。顔（写真の横62%あたり）は白を掛けない
   ・顧客の指摘「文字が薄い」＋「ストリップチャットを全面に」＝小見出しは ink の塗りに白文字、キャッチは ink のベタ（グラデなし）
   ・スマホ／タブレット縦＝縦長の別写真（picture の source）→ 文字の縦積み。写真に文字は重ねない
   ============================================================ */
.fv--photo { background: var(--bg); }
.fv__bg { position: absolute; inset: 0; z-index: 0; display: block; }
.fv__bg img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 85% 0%;   /* 右端のコメント欄を切らない・上はヘッダーに被せない */ }
.fv--photo::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0) 74%, rgba(255,255,255,.45) 84%, rgba(255,255,255,.88) 93%, var(--bg) 100%),   /* 下端を霧のように白へ溶かす（スマホと揃える・10/17） */
              linear-gradient(90deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.95) 36%, rgba(255,255,255,.72) 45%, rgba(255,255,255,0) 55%);
}
.fv--photo .fv__line:nth-child(2) { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--ink); }
.fv--photo .fv__sub {
  display: inline-block; padding: 7px 16px; border-radius: 999px;
  background: var(--ink); color: #fff; letter-spacing: .06em;
}
.fv--photo .fv__lead { font-weight: 700; }

/* ============================================================
   FVの写真カード6枚（2026-10-03 カンプ構成に作り替え）
   ------------------------------------------------------------
   ★経緯：「散りすぎ→密集しすぎ→中間」と密度を調整してきたが、問題は構成そのものだった。
     カンプ＝「特大の主役が右端まで届き、その後ろに大きなぼかしカードが覗き、左側に小カードが散る」構成に作り替え。
   ★基準の箱：.fv__stack は .fv の全面（ヘッダーの裏まで）に敷く＝カンプの「画面幅×FV高」と同じ箱。
     container-type:size で、箱の高さ（cqh）・幅（cqw）をカードの寸法に使う。
   ★単位 --u ＝ min(1cqh, .59cqw)：
     ・1440×900（FV 846px）で 1u ＝ FV高の1%。カード群は FV高に比例して拡縮＝縦に必ず収まる
     ・画面が縦長（タブレット縦など）になると幅側（.59cqw）で頭打ち＝横に広がりすぎない
       （.59 ＝ 1440×846 での cqh/cqw 比。それより横長なら cqh、縦長なら cqw が効く）
     ・--oy ＝ u が cqh より小さいとき、余った高さの半分だけ下げて縦中央に置く
   ★横位置は「主役の右端」からの距離 --d（u）で決める。主役の右端は画面右から --rg（3cqw）
     ＝主役は画面端の近くまで届く。はみ出し（傾き・浮遊）は .fv の overflow:hidden で受け止める＝横スクロールは出ない
   ★1440×900 で実測した配置（FV高に対する%・目安はカンプから拾った値）：
       A 主役       x 65–97%     y 21–94%  鮮明・z4         +2.4deg
       B 主役の後ろ x 60–95%     y 15–85%  強ぼかし・z1   −2.6deg
       C 左上       x 50–64%     y 20–37%  弱ぼかし・z2   −2deg
       D 中央の小   x 54–64%     y 43–57%  ぼかし・z3     +1.6deg
       E 手前       x 46–67%     y 63–91%  鮮明・最前面z5 −1.6deg（主役の左下に重なる）
       F 左下       x 34–48%     y 79–95%  強ぼかし・z1   +2deg（文字・ボタンには被せない）
   ============================================================ */
.fv__stack {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  container-type: size;
}
.fv__card {
  --u: min(1cqh, .59cqw);
  --oy: calc((100cqh - 100 * var(--u)) / 2);
  --rg: 3cqw;
  position: absolute; overflow: hidden; border-radius: var(--r-lg);
  right: calc(var(--rg) + var(--d) * var(--u));
  top: calc(var(--oy) + var(--t) * var(--u));
  width: calc(var(--w) * var(--u));
  height: calc(var(--h) * var(--u));
  background: var(--tint-3);
  box-shadow: 0 18px 40px var(--sh-2);
  transform: rotate(var(--tilt, 0deg));
}
.fv__card img { width: 100%; height: 100%; object-fit: cover; }
.fv__card::after { content: ''; position: absolute; inset: 0; background: rgba(255,255,255,var(--veil, 0)); }
/* A 主役。特大・鮮明。右端は画面端の近く */
.fv__card--1 { --d: 0;    --t: 21; --w: 54;  --h: 73; --tilt: 2.4deg;  z-index: 4; border-radius: var(--r-xl); box-shadow: 0 26px 60px var(--sh-2); }
.fv__card--1 img { object-position: 60% 50%; }
/* B 主役の後ろ。強ぼかし＋白ベール。主役より左上にずれて、後ろから覗く（逆向きに傾けて奥行き） */
.fv__card--2 { --d: 2.6;  --t: 15; --w: 61;  --h: 70; --tilt: -2.6deg; z-index: 1; border-radius: var(--r-xl); --veil: .5; box-shadow: none; }
.fv__card--2 img { filter: blur(7px); transform: scale(1.12); }
/* C 左上。弱ぼかし */
.fv__card--3 { --d: 56;   --t: 20; --w: 24;  --h: 17; --tilt: -2deg;   z-index: 2; --veil: .22; }
.fv__card--3 img { filter: blur(1.5px); transform: scale(1.06); }
/* D 中央の小。ぼかし */
.fv__card--4 { --d: 55;   --t: 43; --w: 17;  --h: 14; --tilt: 1.6deg;  z-index: 3; --veil: .3; box-shadow: 0 12px 28px var(--sh-1); }
.fv__card--4 img { filter: blur(2.5px); transform: scale(1.08); }
/* E 手前。鮮明・最前面。主役の左下に重なる */
.fv__card--5 { --d: 50;   --t: 63; --w: 35;  --h: 28; --tilt: -1.6deg; z-index: 5; }
/* F 左下。強ぼかし。文字・ボタンの近くまで来るが被せない */
.fv__card--6 { --d: 83;   --t: 79; --w: 23;  --h: 16; --tilt: 2deg;    z-index: 1; --veil: .5; box-shadow: none; }
.fv__card--6 img { filter: blur(5px); transform: scale(1.1); }

/* FV登場（ページロード時：行→リード→ボタン→写真の順に静かに立ち上がる） */
html.js .fv__sub  { opacity: 0; animation: fv-fade .8s ease forwards .05s; }
html.js .fv__scroll { opacity: 0; animation: fv-fade .8s ease forwards 1s; }
html.js .fv__line { opacity: 0; transform: translateY(18px); animation: fv-rise .8s cubic-bezier(.22,.65,.3,1) forwards; animation-delay: calc(.1s + var(--i, 0) * .12s); }
html.js .fv__lead { opacity: 0; animation: fv-fade .8s ease forwards .5s; }
html.js .fv__act  { opacity: 0; transform: translateY(12px); animation: fv-rise .7s cubic-bezier(.22,.65,.3,1) forwards .7s; }
/* ★写真カードの常時浮遊（2026-09-29 依頼「結構大きめに動かす」→ 2026-10-03 特大2枚は控えめに）
   ・transform だけで動かす（top/left/margin は触らない＝レイアウト再計算ゼロ）
   ・★傾きとの合成：@keyframes fv-float は rotate(--tilt ± --rot) ＝基準角 --tilt からの振れとして回す。
     傾きが消えたり跳ねたりしない（--tilt 未指定の他の浮遊要素は 0deg 基準＝従来と同じ動き）
   ・カードごとに振幅 --amp／周期 --fp／位相 --fd（マイナス delay）／振れ角 --rot／微拡縮 --sc を全部ずらす
   ・特大の2枚（A主役・B主役の後ろ）＝±15〜16px・12.5〜13.5秒（大きい面積が大きく動くと重く見える）
     小カード4枚＝±20〜26px・8〜10秒。スマホは半分（下のメディアクエリ）
   ・.fv が overflow:hidden なので、はみ出しは帯の中で受け止める＝横スクロールは出ない
   ・JS有効時はフェードイン（fv-fade）と重ねる。reduced-motion で浮遊は停止（傾きは残す） */
.fv__card { will-change: transform; animation: fv-float var(--fp, 10s) ease-in-out infinite var(--fd, 0s); }
.fv__card--1 { --amp: 16px; --rot: .35deg; --sc: 1.008; --fp: 12.5s; --fd: -3s; }
.fv__card--2 { --amp: 15px; --rot: .3deg;  --sc: 1.006; --fp: 13.5s; --fd: -9s; }
.fv__card--3 { --amp: 22px; --rot: .8deg;  --sc: 1.015; --fp: 9s;    --fd: -1.5s; }
.fv__card--4 { --amp: 20px; --rot: .9deg;  --sc: 1.015; --fp: 8s;    --fd: -5s; }
.fv__card--5 { --amp: 26px; --rot: .7deg;  --sc: 1.02;  --fp: 10s;   --fd: -6.5s; }
.fv__card--6 { --amp: 22px; --rot: 1deg;   --sc: 1.012; --fp: 9.5s;  --fd: -7.5s; }
html.js .fv__card { opacity: 0; animation: fv-fade .9s ease forwards var(--in, .25s), fv-float var(--fp, 10s) ease-in-out infinite var(--fd, 0s); }
html.js .fv__card--1 { --in: .25s; }
html.js .fv__card--2 { --in: .35s; }
html.js .fv__card--3 { --in: .55s; }
html.js .fv__card--4 { --in: .65s; }
html.js .fv__card--5 { --in: .45s; }
html.js .fv__card--6 { --in: .75s; }
/* 余白の薄い水色の丸も、もっとゆっくり浮遊させる（回転・拡縮なし） */
.fv .blob { animation: fv-float var(--fp, 16s) ease-in-out infinite var(--fd, 0s); --rot: 0deg; --sc: 1; }
.blob--fv1 { --amp: 18px; --fp: 17s; --fd: -5s; }
.blob--fv2 { --amp: 12px; --fp: 14s; --fd: -9s; }
.blob--fv3 { --amp: 20px; --fp: 19s; --fd: -2s; }
@keyframes fv-float {
  0%, 100% { transform: translate3d(0, calc(var(--amp, 0px) * -1), 0) rotate(calc(var(--tilt, 0deg) - var(--rot, 0deg))) scale(1); }
  50%      { transform: translate3d(0, var(--amp, 0px), 0) rotate(calc(var(--tilt, 0deg) + var(--rot, 0deg))) scale(var(--sc, 1)); }
}
@keyframes fv-rise { to { opacity: 1; transform: none; } }
@keyframes fv-fade { to { opacity: 1; } }

/* ============================================================
   写真の常時浮遊をサイト全体へ展開（2026-09-29 依頼「FVの浮遊を他の画像にも」）
   ★作りはFVと同じ。新方式は作らない＝上の @keyframes fv-float をそのまま使い、
     要素ごとに 振幅 --amp／周期 --fp／位相 --fd（マイナス delay）／微回転 --rot／微拡縮 --sc をずらす。
   ・transform だけで動かす（top/left/margin/width は触らない＝レイアウト再計算ゼロ）
   ・1枚で大きい画像は控えめ（±14〜20px・9〜13秒・回転 ±0.4〜0.8deg・拡縮 1.008〜1.015）。
     FVと同じ±28pxまで振ると隣の本文との位置関係が毎秒変わって読みにくくなる。
     面積が大きいほど同じ角度でも動きが大きく見えるので、回転・拡縮もFVより絞る。
   ・[data-rev] の出現アニメは親（.about__media / .bz__media / .msg__media）に付いているので、
     浮遊は中の img に当てる＝出現の translateY と喧嘩しない（親=出現／子=浮遊で入れ子）
   ・はみ出しの受け止め＝親セクション .ph / .about / .bz / .msg はすべて overflow:hidden。
     事業02（.bz--rev＝biz-sns.jpg）は写真が左端に寄るが、.bz の overflow:hidden が受け止めるので
     左へ振れても画面外へ出ない＝横スクロールは出ない
   ・スマホ（≤767px）は振幅を半分／reduced-motion で完全停止（下の各ブロック）
   ============================================================ */
.ph__card,
.about__media img,
.bz__media img,
.msg__media img,
.str__ph {
  will-change: transform;
  animation: fv-float var(--fp, 11s) ease-in-out infinite var(--fd, 0s);
}
/* /service タイトル帯の写真カード2枚＝FVと同等の振幅（±20〜28px）。2枚で周期・振幅・位相を別々に */
.ph__card--1 { --amp: 26px; --rot: -.9deg; --sc: 1.02;  --fp: 10.5s; --fd: -2.5s; }
.ph__card--2 { --amp: 21px; --rot: 1.1deg; --sc: 1.022; --fp: 8.5s;  --fd: -6s; }
/* 1枚で大きい画像（本文の隣に並ぶ）＝控えめに */
.about__media img                { --amp: 16px; --rot: -.5deg;  --sc: 1.01;  --fp: 10s;   --fd: -4s; }   /* TOP ABOUT（about.jpg） */
.bz:not(.bz--rev) .bz__media img { --amp: 18px; --rot: .55deg;  --sc: 1.012; --fp: 11.5s; --fd: -1.5s; } /* 事業01（biz-management.jpg） */
.bz--rev .bz__media img          { --amp: 15px; --rot: -.7deg;  --sc: 1.01;  --fp: 12.5s; --fd: -7s; }   /* 事業02（biz-sns.jpg・左端寄り） */
.msg__media img                  { --amp: 17px; --rot: .65deg;  --sc: 1.013; --fp: 13s;   --fd: -8.5s; } /* /company 代表挨拶（company-message-desk.jpg） */
.str__ph                         { --amp: 15px; --rot: .5deg;   --sc: 1.01;  --fp: 12s;   --fd: -3s; }   /* TOP STRENGTH（strength.jpg・未支給の間は淡い面） */

/* ============================================================
   TOP：ABOUT
   ============================================================ */
.about { overflow: hidden; }
.about__in { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: center; }   /* 左=写真／右=文字（DOMも写真→文字＝スマホでそのまま縦積み） */
.about__sub { margin-top: clamp(22px, 2.6vw, 34px); font-size: clamp(18px, 1.7vw, 22px); font-weight: 700; letter-spacing: .03em; line-height: 1.6; }
.about__body { margin-top: 18px; font-size: 15px; line-height: 2.05; }
.about__l .btn { margin-top: clamp(26px, 3vw, 38px); }
/* 写真の後ろに淡い水色の角丸面を左上へずらして敷く（カンプ：面が写真の左上からはみ出す） */
.about__media { position: relative; }
.about__media::before {
  content: ''; position: absolute; inset: -6% 12% 10% -6%;
  background: var(--tint-4); border-radius: 44px; z-index: 0;
}
.about__media img { position: relative; z-index: 1; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-xl); box-shadow: 0 18px 44px var(--sh-2); }

/* ============================================================
   TOP：BUSINESS（白カード2枚）
   ============================================================ */
.biz__cards { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 2.4vw, 30px); }
/* カード＝上に写真（内側に余白を取った角丸）／下に 番号の円＋タイトル、説明＋丸い枠線の矢印 */
.biz__card { display: flex; flex-direction: column; padding: 10px; color: var(--ink); border-radius: var(--r-lg); }
.biz__media { display: block; overflow: hidden; border-radius: calc(var(--r-lg) - 8px); background: var(--tint-3); }
.biz__media img { width: 100%; aspect-ratio: 16 / 7.5; object-fit: cover; transition: transform .6s ease; }
a.biz__card:hover .biz__media img { transform: scale(1.03); }
.biz__body { display: flex; flex-direction: column; flex: 1; gap: 14px; padding: clamp(16px, 2vw, 22px) clamp(14px, 1.8vw, 20px) clamp(14px, 1.8vw, 18px); }
.biz__top { display: flex; align-items: center; gap: 16px; }
.biz__name { font-size: clamp(17px, 1.6vw, 20px); font-weight: 700; line-height: 1.55; letter-spacing: .02em; }
/* 行の単位（「ライブ配信者・」「クリエイターマネジメント」）を途中で割らない。PCは1行ずつ改行 */
.biz__name .nb { display: inline-block; }
@media (min-width: 768px) { .biz__name .nb { display: block; } }
.biz__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-top: auto; }
.biz__desc { display: block; font-size: 14px; line-height: 1.95; color: var(--muted); }
/* 番号の淡い円（BUSINESS・STRENGTH共通）。面は tint-ico、数字は ink */
.num {
  display: inline-grid; place-items: center; flex: none;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--tint-ico); color: var(--ink); font-size: 15px; font-weight: 700; letter-spacing: .02em;
}
/* 右下の丸い枠線の矢印（枠＝--ico-ink の細線／矢印＝ink） */
.rarrow {
  display: inline-grid; place-items: center; flex: none;
  width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--ico-ink); color: var(--ink);
  transition: background .25s ease;
}
.rarrow svg { width: 18px; height: 18px; transition: transform .25s ease; }
a.biz__card:hover .rarrow { background: var(--tint-2); }
a.biz__card:hover .rarrow svg { transform: translateX(3px); }

/* ============================================================
   TOP：STRENGTH（帯＋矢印でつなぐ3項目）
   ============================================================ */
.str { overflow: hidden; }
.str__stmt { text-align: center; }
.str__stmt span {
  display: inline-block; max-width: 100%;
  padding: clamp(14px, 1.8vw, 22px) clamp(20px, 4vw, 64px);
  border-radius: 999px; background: var(--tint-3);
  box-shadow: 0 0 0 12px var(--tint-1), 0 24px 60px var(--sh-2);
  font-size: clamp(21px, 5.4vw, 44px); font-weight: 900; letter-spacing: .04em; line-height: 1.4;
  text-wrap: balance;
}
.str__seg { display: inline-block; font-weight: inherit; }  /* 宣言の区切り単位。行の途中では折らない */
.str__lines { margin-top: clamp(28px, 3.4vw, 40px); text-align: center; font-size: clamp(15px, 1.3vw, 17px); line-height: 2.05; text-wrap: pretty; }
/* TOP：左=特大の宣言（行ごとに折り返さない）／右=説明2行。入り切らない幅では自然に縦へ落ちる */
.str__row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px clamp(32px, 4vw, 64px); }
.str__big { font-size: clamp(30px, 5.1vw, 72px); font-weight: 900; letter-spacing: .03em; line-height: 1.3; }
.str__bl { display: block; white-space: nowrap; }
/* 2行目の下半分に薄い水色のマーカー面（面＝brand の淡色。文字は ink のまま） */
.str__bl--mark span {
  padding-inline: .04em 0;
  background: linear-gradient(transparent 56%, color-mix(in srgb, var(--brand) 38%, var(--bg)) 56%, color-mix(in srgb, var(--brand) 38%, var(--bg)) 94%, transparent 94%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.str__side { flex: 0 1 auto; min-width: 0; padding-bottom: .6em; font-size: clamp(15px, 1.3vw, 17px); font-weight: 500; line-height: 2.05; }
/* TOP：写真あり（site.php の strength.img が入っているとき）＝上段を2カラム。左=ラベル〜説明／右=角丸の写真（4:5）
   ・3項目の帯は .str__top の外＝全幅のまま
   ・左が狭くなる分、宣言は clamp を少し下げて1行目「伸びるアカウントを、」を折らない（.str__bl は nowrap のまま）
   ・写真の後ろの淡い面は ABOUT／代表メッセージと同じ作法（::before を左上へずらす）
   ・img が空なら .str__top--photo が付かず、従来どおり（宣言の右に説明）の1カラム */
.str__top--photo { display: grid; grid-template-columns: minmax(0, 1fr) clamp(240px, 21vw, 310px); gap: clamp(32px, 4.4vw, 72px); align-items: center; }
.str__top--photo .str__row { flex-direction: column; align-items: flex-start; flex-wrap: nowrap; gap: clamp(14px, 1.6vw, 22px); }
.str__top--photo .str__big { font-size: clamp(30px, 4.3vw, 62px); }
.str__top--photo .str__side { padding-bottom: 0; }
.str__media { position: relative; }
.str__media::before { content: ''; position: absolute; inset: -6% 12% 10% -6%; background: var(--tint-4); border-radius: 44px; z-index: 0; }
.str__ph { position: relative; z-index: 1; display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-xl); box-shadow: 0 18px 44px var(--sh-2); }
/* strength.jpg（縦長・2026-10-17 顧客のAI画像＝ノートに書く手元）の主役＝中央右の手とノート。cover で切れても残るよう中心を右寄りに */
img.str__ph { object-position: 60% 50%; }
/* ★写真が未支給の間の代替＝淡い水色の面（TRUSTカードの .pil__media--empty と同じ作り） */
.str__ph--empty { overflow: hidden; background: linear-gradient(150deg, var(--tint-2) 0%, var(--tint-ico) 100%); }
.str__ph--empty::before {
  content: ''; position: absolute; width: 70%; aspect-ratio: 1; right: -18%; bottom: -22%;
  border-radius: 50%; background: var(--blob); opacity: .8;
}
/* 3項目＝横長の淡い角丸面の中に「番号の円＋線画アイコン＋ラベル」を薄い山形でつなぐ */
.str__steps {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap);
  --gap: clamp(28px, 4vw, 64px);
  margin-top: clamp(36px, 4.4vw, 56px); padding: clamp(22px, 2.6vw, 32px) clamp(24px, 3.4vw, 48px);
  background: var(--tint-3); border-radius: var(--r-xl);
}
.str__step { position: relative; display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 16px; row-gap: 4px; }
.str__step .num { grid-row: 1 / 3; background: var(--bg); }
.str__ic { color: var(--ico-ink); line-height: 0; }
.str__ic svg { width: 30px; height: 30px; }
.str__label { font-size: clamp(14.5px, 1.25vw, 16px); font-weight: 700; letter-spacing: .02em; line-height: 1.5; }
/* 項目間の薄い山形（細線＝--ico-ink） */
.str__step:not(:last-child)::after {
  content: ''; position: absolute; top: 50%; left: calc(100% + var(--gap) / 2 - 5px);
  width: 9px; height: 9px; margin-top: -4.5px;
  border-top: 1.5px solid var(--ico-ink); border-right: 1.5px solid var(--ico-ink); transform: rotate(45deg);
}

/* ============================================================
   TOP：TRUST & SAFETY ／ MESSAGE（白カード2枚）
   ============================================================ */
.pil__cards { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 2.4vw, 30px); }
/* カード＝左に文字（アイコン＋英字ラベル＋見出し＋説明＋ボタン）／右に写真 */
.pil__card { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); align-items: stretch; padding: 10px; border-radius: var(--r-lg); }
.pil__card:not(:has(.pil__media)) { grid-template-columns: 1fr; }   /* img が空のカードは文字だけ全幅 */
.pil__txt { padding: clamp(18px, 2.2vw, 30px) clamp(8px, 1vw, 14px) clamp(18px, 2.2vw, 30px) clamp(14px, 1.8vw, 26px); }
.pil__card .ico { width: 54px; height: 54px; }
.pil__card .ico svg { width: 25px; height: 25px; }

.pil__media { position: relative; overflow: hidden; min-height: 220px; border-radius: calc(var(--r-lg) - 8px); background: var(--tint-3); }
.pil__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* TRUST の静物（trust-card.jpg 横長）は主役の植物＋筆立てが右寄り＝切り抜きの中心を右へ寄せる */
.pil__card:first-child .pil__media img { object-position: 66% 50%; }
/* ★写真が未支給の間の代替＝淡い水色の面（角に薄い丸を重ねて、空き枠に見えないようにする） */
.pil__media--empty { background: linear-gradient(150deg, var(--tint-2) 0%, var(--tint-ico) 100%); }
.pil__media--empty::before {
  content: ''; position: absolute; width: 70%; aspect-ratio: 1; right: -18%; bottom: -22%;
  border-radius: 50%; background: var(--blob); opacity: .8;
}
.pil__head { display: flex; align-items: center; gap: 14px; }
.pil__h { text-wrap: balance; font-size: clamp(19px, 1.7vw, 23px); font-weight: 900; letter-spacing: .03em; line-height: 1.4; }
.pil__body { margin: 18px 0 22px; font-size: 13.5px; line-height: 1.95; color: var(--muted); }

/* ============================================================
   TOP：FLOW（番号付きの円を細い線でつなぐ4ステップ）
   ============================================================ */
.flow__steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; --num: 64px; }
.flow__step { position: relative; text-align: center; }
.flow__num {
  display: inline-grid; place-items: center; width: var(--num); height: var(--num); border-radius: 50%;
  background: var(--tint-4); font-size: 19px; font-weight: 700; color: var(--ink);
}
.flow__step:not(:last-child)::after {
  content: ''; position: absolute; top: calc(var(--num) / 2); height: 1.5px; background: var(--ico-ink);
  left: calc(50% + var(--num) / 2 + 10px); right: calc(-50% + var(--num) / 2 + 10px);
}
.flow__name { margin-top: 16px; font-size: 16px; font-weight: 700; }
/* /service：STRENGTH（白）の直後に FLOW（白）が続く＝白どうしで上下の余白が二重になるので、FLOW の上余白だけ外す（背景色は変えない） */
.str + .flow { padding-top: 0; }   /* 事業内容：STRENGTH（白）の直後のFLOW（白）で余白が二重にならないように */
.flow__desc { margin-top: 4px; font-size: 13.5px; color: var(--muted); }
html.js [data-rev] .flow__step { opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .5s ease; transition-delay: calc(.1s + var(--i, 0) * .12s); }
html.js [data-rev].on .flow__step, html.js.rev-safe [data-rev] .flow__step { opacity: 1; transform: none; }

/* ============================================================
   NEWS（TOP＋一覧共通：日付＋タイトルの行。区切りは薄い罫線）
   ============================================================ */
.news__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: clamp(20px, 2.6vw, 30px); }
.news__list li { border-bottom: 1px solid var(--line); }
.news__list li:first-child { border-top: 1px solid var(--line); }
.news__list a { display: flex; align-items: baseline; gap: 32px; padding: 20px 12px; border-radius: 12px; transition: background .25s ease; }
.news__list a:hover { background: var(--tint-2); }
.news__list time { font-family: var(--ff-en); font-weight: 600; font-size: 14px; color: var(--muted); flex: none; letter-spacing: .04em; }
.news__list span { font-size: 15px; font-weight: 500; }
/* TOP：2カラム＝左に見出し＋一覧リンク／右にリスト。行の右端に矢印（線画＝--ico-ink） */
.news--top .news__grid { display: grid; grid-template-columns: minmax(200px, 300px) 1fr; gap: clamp(28px, 5vw, 80px); align-items: start; }
.news--top .news__head { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: clamp(16px, 2vw, 28px); margin-bottom: 0; }
.news--top .news__list a { align-items: center; }
.news--top .news__list span { flex: 1 1 auto; min-width: 0; }
.news--top .news__list a::after {
  content: ''; flex: none; width: 16px; height: 16px; background: var(--ico-ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 7l5 5-5 5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 7l5 5-5 5'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .25s ease;
}
.news--top .news__list a:hover::after { transform: translateX(4px); }

/* ============================================================
   CTA帯（白→薄い水色のグラデ。見出し＋LINE大ボタン＋QR枠）
   ============================================================ */
.cta { position: relative; background: var(--bg); padding-block: clamp(24px, 3vw, 40px) var(--pad-sec); text-align: center; }
/* ★白地の上に淡い水色の大きな角丸カード（2026-10-03 カンプ）。中に見出し＋サブ＋LINE大ボタン＋QR。
   面は tint-2→tint-4 の淡色に留める＝中の英字ラベル（--accent-ink）が 4.5:1 を割らない濃さ */
.cta__card {
  position: relative; overflow: hidden; border-radius: clamp(28px, 3.4vw, 44px);
  background: linear-gradient(135deg, var(--tint-2) 0%, var(--tint-4) 100%);
  padding: clamp(44px, 5.6vw, 72px) clamp(20px, 4vw, 56px);
}
.blob--cta1 { width: 380px; height: 380px; left: -150px; bottom: -190px; }
.blob--cta2 { width: 300px; height: 300px; right: -110px; top: -150px; opacity: .55; }
.cta__in { position: relative; }
.cta__h { font-size: clamp(22px, 3vw, 34px); font-weight: 900; letter-spacing: .03em; line-height: 1.5; text-wrap: balance; word-break: auto-phrase; }
.cta__sub { margin-top: 6px; font-size: clamp(14.5px, 1.3vw, 16px); font-weight: 500; }
.cta__row { display: flex; align-items: center; justify-content: center; gap: clamp(24px, 4vw, 48px); margin-top: clamp(24px, 3vw, 36px); flex-wrap: wrap; }
/* QR枠：正方形。角にトンボ状の飾り（細線＝--ico-ink）
   ★寸法は「実機のカメラで読み取れる大きさ」で決める。枠 190px − padding 14px×2 = 実表示 162px（目安160px以上）。
     150px のままだと実表示が 122px しかなく、スマホで読み取りづらい（2026-09-29 QR配線時に実測して拡大） */
.qr {
  position: relative; display: grid; place-items: center;
  width: 190px; height: 190px; padding: 14px; background: var(--bg); border-radius: 18px;
  border: 1px solid var(--tint-4);
}
.qr::before, .qr::after {
  content: ''; position: absolute; width: 22px; height: 22px; border-color: var(--ico-ink); border-style: solid;
}
.qr::before { left: 9px; top: 9px; border-width: 1.5px 0 0 1.5px; border-top-left-radius: 4px; }
.qr::after  { right: 9px; bottom: 9px; border-width: 0 1.5px 1.5px 0; border-bottom-right-radius: 4px; }
.qr img { width: 100%; height: 100%; object-fit: contain; }
.qr__note { font-size: 12px; font-weight: 600; letter-spacing: .1em; color: var(--muted); }

/* ============================================================
   フッター（★白地。左=ロゴ＋社名＋所在地／右=リンク3列／最下部中央に ©）
   ============================================================ */
.ft { background: var(--bg); border-top: 1px solid var(--line); padding-top: clamp(44px, 5vw, 64px); }
.ft__in { display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; padding-bottom: clamp(28px, 4vw, 44px); }
.ft__logo .logo--text { font-size: clamp(30px, 3vw, 40px); }
.ft__org { margin-top: 18px; font-size: 13.5px; font-weight: 500; }
.ft__addr { font-size: 13.5px; color: var(--muted); }
.ft__tag { margin-top: 10px; font-size: 13px; color: var(--muted); }
.ft__nav { display: flex; gap: clamp(28px, 5vw, 80px); padding-top: 6px; }
.ft__col { display: flex; flex-direction: column; gap: 10px; }
.ft__col a { font-size: 13.5px; font-weight: 500; transition: color .2s ease; }
.ft__col a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--ico-ink); }
.ft__sample { padding-block: 12px; }
.ft__sample p { font-size: 12.5px; line-height: 1.9; color: var(--muted); max-width: 76ch; }
.ft__btm { text-align: center; padding-block: 8px 28px; }
.ft__copy { font-family: var(--ff-en); font-size: 12.5px; letter-spacing: .06em; color: var(--muted); }

/* 右下の追従カード */
.fcta {
  position: fixed; right: 16px; bottom: 16px; z-index: 80;
  display: flex; align-items: center; gap: 4px;
  background: var(--bg); border-radius: 999px; padding: 6px 6px 6px 20px;
  box-shadow: 0 10px 30px var(--sh-2), 0 0 0 1px var(--tint-4);
  transition: opacity .3s ease, transform .3s ease;
}
.fcta.is-hidden { opacity: 0; transform: translateY(12px); pointer-events: none; }
.fcta__link { display: inline-flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 700; padding-block: 8px; }
.fcta__link svg { width: 16px; height: 16px; transition: transform .25s ease; }
.fcta__link:hover svg { transform: translateX(4px); }
.fcta__x {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: none; border: 0; cursor: pointer; color: var(--muted); transition: background .2s ease;
}
.fcta__x:hover { background: var(--tint-2); }
/* ★追従カード＝FVのLINEボタンと同じ水色（2026-10-03 決定・LINE緑から戻した）。文字・矢印・×は --on-brand（ink） */
.fcta { background: var(--grad-line); color: var(--on-brand); box-shadow: 0 10px 30px var(--sh-2); transition: opacity .3s ease, transform .3s ease, box-shadow .2s ease; }
.fcta:has(.fcta__link:hover) { box-shadow: 0 16px 34px var(--sh-3); }
.fcta__x { color: var(--on-brand); }
.fcta__x:hover { background: rgba(255,255,255,.28); }
.fcta :focus-visible { outline-color: var(--ink); }
.fcta__x svg { width: 16px; height: 16px; }

/* ============================================================
   下層共通：タイトル帯（白→薄い水色・英字ラベル＋大きな見出し）
   ============================================================ */
.ph { position: relative; overflow: hidden; background: var(--grad-soft); padding-block: calc(var(--hd-h) + clamp(28px, 4vw, 52px)) clamp(36px, 5vw, 64px); }   /* ★上はヘッダー（オーバーレイ）の高さぶん足す */
.ph::before { content: ''; position: absolute; width: 360px; height: 360px; right: -100px; top: -140px; border-radius: 50%; background: var(--blob); opacity: .7; pointer-events: none; }
.ph::after  { content: ''; position: absolute; width: 240px; height: 240px; left: -80px; bottom: -120px; border-radius: 50%; background: var(--blob); opacity: .5; pointer-events: none; }
.ph__in { position: relative; }
.ph__h { font-size: clamp(30px, 4.4vw, 48px); font-weight: 900; letter-spacing: .04em; line-height: 1.3; }
.ph__bc { margin-top: 14px; font-size: 12px; letter-spacing: .04em; color: var(--muted); }
.ph__bc a:hover { text-decoration: underline; }

/* ── タイトル帯＋右に写真カード2枚（事業内容。手前は鮮明、奥はぼかして白く沈める） ── */
.ph--cards .ph__in { display: grid; grid-template-columns: 1fr minmax(0, 440px); gap: clamp(24px, 4vw, 64px); align-items: center; }
.ph--cards { padding-block: calc(var(--hd-h) + clamp(24px, 3vw, 44px)) clamp(32px, 4vw, 56px); }
.ph__stack { position: relative; height: clamp(180px, 22vw, 250px); }
.ph__card { position: absolute; overflow: hidden; border-radius: var(--r-lg); background: var(--tint-3); box-shadow: 0 18px 40px var(--sh-2); }
.ph__card img { width: 100%; height: 100%; object-fit: cover; }
.ph__card::after { content: ''; position: absolute; inset: 0; background: rgba(255,255,255,var(--veil, 0)); }
.ph__card--1 { left: 0; bottom: 0; width: 64%; aspect-ratio: 4 / 3; z-index: 2; }
.ph__card--2 { right: 0; top: 0; width: 44%; aspect-ratio: 1; z-index: 1; --veil: .45; box-shadow: none; }
.ph__card--2 img { filter: blur(2.5px); transform: scale(1.08); }

/* ── 事業（左=見出し＋説明／右=写真。--rev で左右反転） ── */
.bz { overflow: hidden; }
.bz__in { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.bz--rev .bz__in { grid-template-columns: 1fr 1.05fr; }
.bz--rev .bz__media { order: -1; }
.bz__h { text-wrap: balance; }
.bz__lead { margin-top: clamp(20px, 2.4vw, 28px); font-size: 15px; line-height: 2.05; }
.bz__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-xl); box-shadow: 0 18px 44px var(--sh-2); }

/* ── できることの白カード（円形アイコン＋タイトル＋説明。3枚／5枚） ── */
.fc { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(14px, 1.8vw, 22px); margin-top: clamp(36px, 4.5vw, 56px); }
.fc--3 { grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 30px); }
.fc__card { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: clamp(24px, 2.4vw, 32px) 12px; text-align: center; border-radius: var(--r-lg); }
.fc--3 .fc__card { padding: clamp(28px, 3vw, 40px) 24px; }
.fc__name { font-size: 15.5px; font-weight: 700; line-height: 1.5; letter-spacing: .02em; }
.fc--3 .fc__name { font-size: 17px; }
.fc__desc { margin-top: -4px; font-size: 13.5px; line-height: 1.85; color: var(--muted); text-wrap: pretty; }

/* ── 事業内容：サポート内容（顧客原稿 01〜06・2026-10-12 カンプ準拠。STRENGTH の下）
   6列グリッド：01〜03＝2列ずつ（3枚並び）／04＝6列（横長）／04 より後＝3列ずつ（2枚並び）。
   アイコンは透過PNGを mask にして --ico-ink で塗る（ブランド色の直値を持たない） ── */
.sv { background: linear-gradient(180deg, var(--bg) 0, var(--tint-2) 80px, var(--tint-2) calc(100% - 80px), var(--bg) 100%); }
.sv__head-sec { text-align: center; }
.sv__sub { margin-top: 10px; font-size: 15px; color: var(--muted); }
.sv__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(16px, 1.8vw, 24px); }
.sv__item { grid-column: span 2; display: flex; flex-direction: column; padding: clamp(24px, 2.4vw, 32px); }
.sv__item--wide { grid-column: 1 / -1; padding: clamp(28px, 3.2vw, 44px); }
.sv__item--wide ~ .sv__item { grid-column: span 3; }
.sv__top { display: flex; align-items: center; gap: 16px; }
.sv__no {
  display: inline-grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 50%;
  background: var(--tint-ico); font-size: 18px; font-weight: 700; color: var(--accent-ink);
}
.sv__ico {
  display: inline-block; flex: none; width: 42px; height: 42px; background: var(--ico-ink);
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;
}
.sv__ico--sm { width: 34px; height: 34px; }
.sv__name { margin-top: 20px; font-size: clamp(18px, 1.6vw, 21px); font-weight: 900; line-height: 1.55; letter-spacing: .03em; }
.sv__name--inline { margin-top: 0; }
.sv__catch {
  margin-top: 12px; padding-bottom: 20px; border-bottom: 1px solid var(--line);
  font-size: 13.5px; line-height: 1.85; color: var(--muted); text-wrap: pretty;
}
.sv__pts { display: grid; gap: 12px; margin-top: 20px; list-style: none; }
.sv__pts li { position: relative; padding-left: 30px; font-size: 14px; line-height: 1.6; }
.sv__pts li::before {   /* 丸の中にチェック（線画） */
  content: ""; position: absolute; left: 0; top: .1em; width: 20px; height: 20px; border-radius: 50%;
  background: var(--tint-ico);
}
.sv__pts li::after {
  content: ""; position: absolute; left: 6px; top: calc(.1em + 6px); width: 8px; height: 5px;
  border-left: 1.5px solid var(--ico-ink); border-bottom: 1.5px solid var(--ico-ink); transform: rotate(-45deg);
}
.sv__end { margin-top: auto; padding-top: 24px; display: grid; gap: 12px; }
.sv__close { font-size: 14.5px; line-height: 1.95; color: var(--muted); text-wrap: pretty; }
.sv__close--sm { font-size: 13px; line-height: 1.9; }
/* 04（横長）：左=キャッチ＋説明／右=アイコン6つの白枠 → 区切り線 → 太字の一文＋締め */
.sv__wide { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(28px, 4vw, 56px); align-items: start; margin-top: 24px; }
.sv__big { font-size: clamp(22px, 2.4vw, 30px); font-weight: 900; line-height: 1.45; letter-spacing: .02em; margin-bottom: 18px; text-wrap: balance; }
.sv__txt { font-size: 14.5px; line-height: 2; text-wrap: pretty; }
.sv__txt + .sv__txt { margin-top: 12px; }
.sv__tiles {
  display: grid; grid-template-columns: 1fr 1fr; list-style: none;
  border: 1px solid var(--tint-4); border-radius: var(--r-lg); background: var(--bg);
  box-shadow: 0 8px 26px var(--sh-1); overflow: hidden;
}
.sv__tile { display: flex; align-items: center; gap: 12px; padding: 20px 18px; font-size: 14px; font-weight: 700; line-height: 1.55; border-bottom: 1px solid var(--line); }
.sv__tile:nth-child(odd) { border-right: 1px solid var(--line); }
.sv__tile:nth-last-child(-n + 2) { border-bottom: 0; }
.sv__foot { margin-top: clamp(28px, 3vw, 36px); padding-top: clamp(24px, 2.6vw, 30px); border-top: 1px solid var(--line); display: grid; gap: 10px; }
.sv__statement { font-size: clamp(16px, 1.6vw, 19px); font-weight: 900; line-height: 1.6; letter-spacing: .02em; text-wrap: pretty; }
@media (min-width: 1200px) { .sv__tile span { white-space: nowrap; } }   /* 改行位置はデータの配列で固定（カンプどおり） */
@media (max-width: 1024px) {
  .sv__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sv__item, .sv__item--wide ~ .sv__item { grid-column: span 1; }
  .sv__item--wide { grid-column: 1 / -1; }
  .sv__item:nth-child(3) { grid-column: 1 / -1; }   /* 2列だと03が1枚余る＝横いっぱいに */
  .sv__wide { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .sv__grid { grid-template-columns: 1fr; }
  .sv__item, .sv__item--wide, .sv__item--wide ~ .sv__item { grid-column: auto; padding: 26px 20px; border-radius: var(--r-lg); }
  .sv__top { gap: 12px; }
  .sv__no { width: 46px; height: 46px; font-size: 16px; }
  .sv__item--wide .sv__top { flex-wrap: wrap; }
  .sv__name--inline { flex-basis: 100%; }
  .sv__tile { padding: 16px 14px; gap: 10px; font-size: 13px; }
  .sv__ico--sm { width: 28px; height: 28px; }
}
@media (max-width: 420px) {
  .sv__tiles { grid-template-columns: 1fr; }
  .sv__tile:nth-child(odd) { border-right: 0; }
  .sv__tile:nth-last-child(2) { border-bottom: 1px solid var(--line); }
}

/* ── 代表挨拶（左=本文＋署名／右=角丸の写真。写真の後ろに淡い水色の面） ── */
.msg { overflow: hidden; }
.msg__in { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.msg__text { margin-top: clamp(22px, 2.6vw, 30px); }
.msg__text p { font-size: 15px; line-height: 2.05; }
.msg__text p + p { margin-top: 18px; }
.msg__sign { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-top: clamp(24px, 3vw, 34px); font-size: 14px; }
.msg__name { font-size: 20px; font-weight: 700; letter-spacing: .06em; }
.msg__media { position: relative; max-width: 440px; margin-left: auto; width: 100%; }
.msg__media::before { content: ''; position: absolute; inset: -6% 12% 10% -6%; background: var(--tint-4); border-radius: 44px; z-index: 0; }
.msg__media img { position: relative; z-index: 1; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-xl); box-shadow: 0 18px 44px var(--sh-2); }

/* ── 会社概要 → 安心・法令遵守への導線（白カード：盾＋2行＋ボタン） ── */
.tlead__card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(20px, 2.6vw, 36px); margin-top: clamp(24px, 3vw, 34px); padding: clamp(24px, 3vw, 36px) clamp(24px, 3.4vw, 44px); }
.tlead__body { font-size: 15px; line-height: 2; }

/* ── 安心・法令遵守ページ（リード文＋白カード2列×2行） ── */
.tr__lead { max-width: 780px; }
.tr__lead p { font-size: 15.5px; line-height: 2.1; }
.tr__lead p + p { margin-top: 16px; }
.tr__cards { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 2.4vw, 28px); margin-top: clamp(32px, 4vw, 48px); }
.tr__cards:first-child { margin-top: 0; }
.tr__card { display: flex; align-items: flex-start; gap: clamp(18px, 2.2vw, 26px); padding: clamp(24px, 2.8vw, 36px); }
.tr__h { font-size: clamp(17px, 1.5vw, 19px); font-weight: 900; line-height: 1.5; letter-spacing: .02em; }
.tr__desc { margin-top: 10px; font-size: 14.5px; line-height: 1.95; color: var(--muted); }

/* ── 会社概要表（白カードの中に薄い罫で行を仕切る） ── */
.profile__tbl { margin-top: 30px; background: var(--bg); border-radius: var(--r-xl); border: 1px solid var(--tint-4); box-shadow: 0 10px 36px var(--sh-1); padding: clamp(10px, 1.6vw, 20px) clamp(20px, 3vw, 40px); }
.profile__row { display: grid; grid-template-columns: 160px 1fr; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.profile__row:last-child { border-bottom: 0; }
.profile__row dt { font-weight: 700; font-size: 14.5px; }
.profile__row dd { font-size: 14.5px; }

/* ── 記事（お知らせ本文）── */
.article__in { max-width: 760px; }
.article__meta { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.article__date { font-family: var(--ff-en); font-weight: 600; font-size: 14px; color: var(--muted); }
.article__h { font-size: clamp(22px, 2.8vw, 30px); font-weight: 900; line-height: 1.55; margin: 8px 0 30px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.article__eye { margin: 0 0 30px; border-radius: var(--r-lg); overflow: hidden; }
.article__eye img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.article__body p { font-size: 15.5px; line-height: 2.1; }
.article__body p + p { margin-top: 18px; }
.article__body h2 { font-size: 20px; font-weight: 900; line-height: 1.6; margin: 44px 0 14px; padding-left: 14px; border-left: 3px solid var(--ico-ink); }
.article__body h3 { font-size: 18px; font-weight: 900; line-height: 1.6; margin: 36px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.article__body h4 { font-size: 16.5px; font-weight: 700; margin: 30px 0 10px; display: flex; align-items: baseline; gap: 9px; }
.article__body h4::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ico-ink); }
.article__body h2 + p, .article__body h3 + p, .article__body h4 + p { margin-top: 0; }
.article__body ul, .article__body ol { padding-left: 1.5em; margin-top: 18px; }
.article__body ul li { list-style: disc; }
.article__body ol li { list-style: decimal; }
.article__body ul li, .article__body ol li { font-size: 15.5px; line-height: 2.1; }
.article__body blockquote { margin: 30px 0; padding: 20px 22px; border-left: 3px solid var(--ico-ink); background: var(--tint-2); border-radius: var(--r-lg); }
.article__body blockquote p { margin: 0; font-size: 15px; color: var(--muted); }
.article__body a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--ico-ink); }
.article__back { margin-top: 44px; }
.blog__cat { display: inline-block; background: var(--tint-4); border-radius: 999px; padding: 4px 13px; font-size: 11.5px; font-weight: 700; }
.blog__tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(26px, 3vw, 38px); }
.blog__tab { border: 1.5px solid var(--tint-4); border-radius: 999px; padding: 9px 20px; font-size: 13.5px; font-weight: 700; }
.blog__tab.is-current { background: var(--tint-3); border-color: var(--ico-ink); }
.psearch { margin-bottom: clamp(22px, 2.6vw, 32px); }
.psearch__label { display: block; margin-bottom: 9px; font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--muted); }
.psearch__row { display: flex; gap: 10px; max-width: 520px; }
.psearch__input { flex: 1 1 auto; min-width: 0; border: 1.5px solid var(--tint-4); border-radius: 999px; background: var(--bg); padding: 11px 18px; font: inherit; font-size: 14.5px; }
.psearch__input:focus { outline: none; border-color: var(--ico-ink); }
.psearch__clear { border: 1.5px solid var(--tint-4); border-radius: 999px; background: transparent; padding: 0 16px; font-size: 13px; font-weight: 700; cursor: pointer; }
.psearch__count { margin-top: 8px; min-height: 1.5em; font-size: 12.5px; color: var(--muted); }
.psearch__empty { padding: 28px 0; text-align: center; font-size: 14.5px; color: var(--muted); }
.blog__card[hidden], .news__list li[hidden] { display: none; }

/* ── お問い合わせ（フォーム・流れ）── */
.cf__in { max-width: 820px; margin-inline: auto; }
.cf__side { text-align: center; margin-bottom: clamp(26px, 3vw, 38px); }
.cf__h { font-size: clamp(22px, 2.8vw, 30px); font-weight: 900; line-height: 1.6; margin-bottom: 14px; }
.cf__note { font-size: 14px; color: var(--muted); }
.cf__req, .cf__opt { display: inline-block; margin-left: 10px; padding: 1px 9px; font-size: 11px; font-weight: 700; border-radius: 999px; vertical-align: 2px; }
.cf__req { background: var(--tint-4); color: var(--ink); }
.cf__opt { background: var(--tint-2); color: var(--muted); }
.cf__form { background: var(--bg); border: 1px solid var(--tint-4); border-radius: var(--r-xl); padding: 40px 36px; box-shadow: 0 10px 36px var(--sh-1); }
.f-hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.f-row { margin-bottom: 22px; }
.f-row label { display: block; font-size: 14px; font-weight: 700; margin-bottom: 8px; }
.f-row input, .f-row select, .f-row textarea {
  width: 100%; font: inherit; font-size: 15px; color: var(--ink);
  background: var(--tint-1); border: 1.5px solid var(--tint-4); border-radius: 16px; padding: 12px 16px;
  transition: border-color .2s ease, background .2s ease;
}
.f-row input:focus, .f-row select:focus, .f-row textarea:focus { outline: none; border-color: var(--ico-ink); background: var(--bg); }
.f-row .is-err, .f-agree .is-err { border-color: #c33a52; background: #fdeaee; }
.f-err { display: none; font-size: 12.5px; color: #c33a52; margin-top: 6px; }
.f-err.on { display: block; }
.f-alert { display: none; font-size: 14px; font-weight: 700; color: #c33a52; background: #fdeaee; border-radius: 16px; padding: 12px 16px; margin-bottom: 20px; }
.f-alert.on { display: block; }
.f-agree { display: flex; align-items: center; gap: 10px; font-size: 14px; margin-top: 28px; }
.f-agree a { text-decoration: underline; text-decoration-color: var(--ico-ink); }
.f-agree input { width: 18px; height: 18px; accent-color: var(--ico-ink); }
.act { margin-top: 28px; }
.cf__form .act { text-align: center; }
.is-sending { opacity: .6; pointer-events: none; }
.f-sample { margin: 0 0 20px; padding: 14px 18px; border: 1px solid var(--tint-4); border-radius: var(--r-lg); background: var(--tint-2); font-size: 13.5px; line-height: 1.85; }
.flow__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.flow__list--4 { grid-template-columns: repeat(4, 1fr); }
.flow__item { background: var(--bg); border: 1px solid var(--tint-4); border-radius: var(--r-xl); padding: 26px; box-shadow: 0 10px 36px var(--sh-1); }
.flow__no { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--tint-4); font-size: 17px; font-weight: 700; }
.flow__item .flow__name { margin: 14px 0 6px; }
.flow__mail { margin-top: 24px; font-size: 13px; color: var(--muted); }

/* ── サンクス・404・プライバシーポリシー ── */
.thx { padding-block: calc(var(--hd-h) + var(--pad-sec)) calc(var(--pad-sec) * 1.25); }   /* タイトル帯の無いページ（送信完了・404）。上はヘッダー（オーバーレイ）ぶん足す */
.thx__in { text-align: center; max-width: 640px; }
.thx__ic { display: inline-block; width: 64px; height: 64px; color: var(--ico-ink); margin-bottom: 18px; }
.thx__h { font-size: clamp(24px, 3vw, 30px); font-weight: 900; margin: 6px 0 22px; }
.thx__lead p { font-size: 15px; color: var(--muted); }
.thx__lead p + p { margin-top: 14px; }
.thx .act { text-align: center; margin-top: 36px; }
.nf__code { font-family: var(--ff-en); font-size: clamp(64px, 10vw, 110px); font-weight: 800; color: var(--tint-4); line-height: 1; }
.pp__in h2 { font-size: 18px; font-weight: 900; margin: 36px 0 12px; padding-left: 14px; border-left: 3px solid var(--ico-ink); }
.pp__in p { font-size: 15px; }
.pp__in ul { padding-left: 1.4em; }
.pp__in ul li { list-style: disc; font-size: 15px; }
.pp__in a { text-decoration: underline; text-decoration-color: var(--ico-ink); }

/* ============================================================
   レスポンシブ
   ============================================================ */
@media (max-width: 1024px) {
  /* タブレット幅：TRUST/MESSAGE は2枚並びだと文字欄が細くなるので1列に（文字＋右に写真は維持） */
  .pil__cards { grid-template-columns: 1fr; }
  .flow__list { grid-template-columns: 1fr; }
  .flow__list--4 { grid-template-columns: 1fr 1fr; }
  /* できることカード：5枚は3列＋2列に折る */
  .fc { grid-template-columns: repeat(3, 1fr); }
  .ph--cards .ph__in { grid-template-columns: 1fr minmax(0, 360px); }
  /* STRENGTH（写真あり）：縦積み＝ラベル→見出し→宣言→説明→写真（幅いっぱい・4:3で高さを抑える）→3項目の帯 */
  .str__top--photo { grid-template-columns: 1fr; gap: clamp(36px, 5vw, 48px); }
  .str__top--photo .str__big { font-size: clamp(28px, 6.2vw, 60px); }
  .str__ph { aspect-ratio: 4 / 3; max-height: 420px; }
  .str__media::before { inset: -5% 10% 8% -3%; border-radius: 34px; }
}
@media (max-width: 767px) {
  .sec__h { text-wrap: pretty; }
  /* FV：縦積み（文字 → 写真カード群）＝下の「FVの縦積み」ブロック（タブレット縦と共通）。ここはスマホだけの差分 */
  .fv__catch { font-size: clamp(31px, 8.8vw, 38px); }
  .btn--orb { padding-left: 26px; }
  .blob--fv1 { width: 260px; height: 260px; left: -120px; top: 12%; }
  .blob--fv3 { width: 240px; height: 240px; }
  /* ABOUT：写真 → 文字（DOM順のまま） */
  .about__in { grid-template-columns: 1fr; gap: 40px; }
  .about__media::before { inset: -5% 10% 8% -4%; border-radius: 34px; }
  /* BUSINESS・TRUST/MESSAGE：1列 */
  .biz__cards, .pil__cards { grid-template-columns: 1fr; gap: 16px; }
  .biz__top, .pil__head { gap: 14px; }
  .ico { width: 56px; height: 56px; }
  .ico svg { width: 24px; height: 24px; }
  .num { width: 42px; height: 42px; font-size: 14px; }
  .rarrow { width: 42px; height: 42px; }
  /* TRUST/MESSAGE：写真 → 文字 */
  .pil__card { grid-template-columns: 1fr; }
  .pil__media { order: -1; min-height: 0; aspect-ratio: 16 / 9; }
  .pil__txt { padding: 20px 12px 16px; }
  /* STRENGTH：宣言 → 説明 → 3項目（縦）。山形は下向き */
  .str__row { flex-direction: column; align-items: flex-start; gap: 18px; }
  .str__big { font-size: clamp(28px, 8.4vw, 40px); }
  .str__top--photo .str__big { font-size: clamp(28px, 8.4vw, 40px); }
  .str__media::before { inset: -5% 10% 8% -4%; border-radius: 34px; }
  .str__side { padding-bottom: 0; font-size: 15px; }
  .str__steps { grid-template-columns: 1fr; --gap: 34px; margin-top: 32px; padding: 26px 22px; }
  .str__step:not(:last-child)::after { left: 16px; top: calc(100% + var(--gap) / 2); margin-top: -7px; transform: rotate(135deg); }
  /* NEWS：見出し → リスト（縦） */
  .news--top .news__grid { grid-template-columns: 1fr; gap: 20px; }
  .news--top .news__head { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  .news--top .news__list a { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; }
  .news--top .news__list a::after { grid-column: 2; grid-row: 1 / 3; }
  /* CTAカード：左右の余白を詰める */
  .cta__card { padding: 40px 18px; border-radius: 28px; }
  /* FLOW：縦。円の下に短い縦線 */
  .flow__steps { grid-template-columns: 1fr; gap: 28px; --num: 56px; }
  .flow__step { display: grid; grid-template-columns: var(--num) 1fr; column-gap: 18px; text-align: left; align-items: center; }
  .flow__num { grid-row: 1 / 3; font-size: 17px; }
  .flow__name { margin-top: 0; }
  .flow__step:not(:last-child)::after { left: calc(var(--num) / 2); right: auto; top: calc(var(--num) + 6px); width: 1.5px; height: 16px; }
  /* NEWS：日付とタイトルを縦に */
  .news__list a { flex-direction: column; gap: 4px; padding: 16px 8px; }
  .news__head { align-items: flex-end; }
  /* CTA：ボタンとQRを縦に */
  .cta__row { flex-direction: column; gap: 24px; }
  .btn--lg { padding: 18px 34px; font-size: 16px; width: min(100%, 360px); }
  /* フッター：ブランド → リンク2列 */
  .ft__in { flex-direction: column; gap: 32px; }
  .ft__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; width: 100%; }
  .ft__col { gap: 12px; }
  /* 追従カード：フッター最下部と重ならない余白 */
  .ft__btm { padding-bottom: 88px; }
  .fcta { right: 12px; bottom: 12px; }
  /* 下層 */
  .profile__row { grid-template-columns: 1fr; gap: 4px; padding: 14px 0; }
  .cf__form { padding: 28px 20px; }
  .flow__list--4 { grid-template-columns: 1fr; }
  /* タイトル帯の写真カード：見出しの下に小さく */
  .ph--cards .ph__in { grid-template-columns: 1fr; gap: 24px; }
  .ph__stack { height: 150px; max-width: 320px; }
  /* 事業：文字 → 写真（反転セクションも同じ順） */
  .bz__in, .bz--rev .bz__in { grid-template-columns: 1fr; gap: 28px; }
  .bz--rev .bz__media { order: 0; }
  /* できることカード：1列・アイコン左の横並び（横スクロールを出さない） */
  .fc, .fc--3 { grid-template-columns: 1fr; gap: 12px; }
  .fc__card, .fc--3 .fc__card { display: grid; grid-template-columns: 52px 1fr; column-gap: 16px; row-gap: 2px; align-items: center; text-align: left; padding: 18px 20px; }
  .fc__card .ico { grid-row: 1 / span 2; width: 52px; height: 52px; }
  .fc__card .ico svg { width: 24px; height: 24px; }
  .fc__desc { margin-top: 2px; }
  .fc--3 .fc__name { font-size: 15.5px; }
  /* 代表挨拶：文字 → 写真 */
  .msg__in { grid-template-columns: 1fr; gap: 36px; }
  .msg__media { margin-left: 0; max-width: 360px; }
  .msg__media::before { inset: -5% 10% 8% -4%; border-radius: 34px; }
  /* 安心・法令遵守への導線：縦積み・中央寄せ */
  .tlead__card { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 18px; padding: 28px 22px; }
  /* 安心・法令遵守ページ：1列 */
  .tr__cards { grid-template-columns: 1fr; gap: 14px; }
  .tr__card { gap: 16px; padding: 22px 20px; }
  .tr__card .ico--lg { width: 60px; height: 60px; }
  .tr__card .ico--lg svg { width: 26px; height: 26px; }
  /* FVの浮遊：振幅を半分に（カードが重なって潰れないように）。傾き --tilt はPCと同じ */
  .fv__card--1 { --amp: 8px; }
  .fv__card--2 { --amp: 7px; }
  .fv__card--3 { --amp: 11px; }
  .fv__card--4 { --amp: 10px; }
  .fv__card--5 { --amp: 13px; }
  .blob--fv1 { --amp: 10px; }
  .blob--fv2 { --amp: 6px; }
  .blob--fv3 { --amp: 10px; }
  /* 展開した写真の浮遊も、スマホは振幅を半分（回転も浅く） */
  .ph__card--1 { --amp: 13px; --rot: -.45deg; }
  .ph__card--2 { --amp: 10px; --rot: .55deg; }
  .about__media img                { --amp: 8px; --rot: -.25deg; }
  .bz:not(.bz--rev) .bz__media img { --amp: 9px; --rot: .28deg; }
  .bz--rev .bz__media img          { --amp: 7px; --rot: -.35deg; }
  .msg__media img                  { --amp: 8px; --rot: .32deg; }
  .str__ph                         { --amp: 8px; --rot: .25deg; }
}

/* ============================================================
   FVの縦積み（スマホ ≤767 ＋ タブレット縦 ≤1024×portrait）
   ★縦長の画面で横並びにすると、カード群が幅で頭打ちになって小さく浮き、リード文に近づく（768×1024 実測で隙間3px）。
     縦長の画面は「文字 → カード群」の縦積みにする。カード群は FV の全面ではなく、文字の下の箱に置く
   ★カード群は5枚（F＝6枚目・左下の強ぼかしを出さない）。主役は箱の高さの86%（70%以上）。
     位置は箱の %（cqw/cqh の計算式を left/right/top/width/height の上書きで外す）
   ============================================================ */
@media (max-width: 767px), (max-width: 1024px) and (orientation: portrait) {
  .fv { flex-direction: column; align-items: stretch; justify-content: center; padding-block: calc(var(--hd-h) + 8px) 40px; }
  .fv__scroll { display: none; }   /* 文字の下にカード群が続くので出さない */
  .fv__stack {
    position: relative; inset: auto; margin-top: 28px;
    width: min(100% - 32px, 620px); margin-inline: auto;
    height: clamp(300px, 39vh, 520px); height: clamp(300px, 39svh, 520px);
  }
  .fv__card--6 { display: none; }
  .fv__card--1 { left: auto; right: 2%;  top: 6%;  width: 54%; height: 86%; }
  .fv__card--2 { left: auto; right: 10%; top: 0;   width: 56%; height: 74%; }
  .fv__card--3 { left: 2%;   right: auto; top: 6%;  width: 34%; height: 26%; }
  .fv__card--4 { left: 14%;  right: auto; top: 39%; width: 22%; height: 20%; }
  .fv__card--5 { left: 4%;   right: auto; top: 64%; width: 46%; height: 34%; }
  /* 1枚写真（2026-10-17〜）＝ヘッダーの下に縦長の写真 → 文字。
     写真の下端は白へ溶かし（配信画面の入力欄を沈める）、小見出しを溶けた部分に重ねる（GPTイメージ 10/17） */
  .fv--photo { display: block; min-height: 0; padding-block: var(--hd-h) 44px; }
  .fv--photo::after { display: none; }
  .fv--photo .fv__bg { position: relative; inset: auto; width: min(100%, 560px); margin-inline: auto; }
  .fv--photo .fv__bg img { height: auto; aspect-ratio: 1153 / 1364; }
  .fv--photo .fv__bg::after { content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(255,255,255,0) 82%, rgba(255,255,255,.6) 86%, rgba(255,255,255,.94) 89.5%, var(--bg) 93%); }
  .fv--photo .fv__in { margin-top: calc(min(100vw, 560px) * -0.11); }
}
/* スマホ：1行目「ストリップチャットを」（10字）を折らない上限＝8.2vw（360pxで29.5px） */
@media (max-width: 767px) {
  .fv--photo .fv__catch { font-size: clamp(28px, 8.2vw, 36px); }
  /* 小見出しの塗り（22字）を1行に固定＝「マネジメ／ント」で割れない。360pxでも収まる大きさ */
  .fv--photo .fv__sub { padding: 6px 14px; font-size: clamp(11.5px, 3.3vw, 13px); letter-spacing: .04em; white-space: nowrap; }
}

/* スマホ：写真を見出しのすぐ下へ（10/17）＝事業内容の各事業／強み（STRENGTH）／会社概要の代表メッセージ。
   本文側の箱を display:contents で外し、見出し・写真・本文を同じ縦並びにして order で並べ替える（HTMLは触らない） */
@media (max-width: 767px) {
  .bz .bz__in { gap: 0; }
  .bz .bz__body { display: contents; }
  .bz .bz__body > .lbl { order: 1; }
  .bz .bz__body > .bz__h { order: 2; }
  .bz .bz__in > .bz__media { order: 3; margin-top: 24px; }
  .bz .bz__body > .bz__lead { order: 4; margin-top: 24px; }

  .str .str__top--photo { gap: 0; }
  .str .str__top--photo > .str__l { display: contents; }
  .str .str__top--photo .sec__head { order: 1; margin-bottom: 28px; }
  .str .str__top--photo > .str__media { order: 2; margin-bottom: 36px; }
  .str .str__top--photo .str__row { order: 3; }

  .msg .msg__in { gap: 0; }
  .msg .msg__body { display: contents; }
  .msg .msg__body > .lbl { order: 1; }
  .msg .msg__body > .sec__h { order: 2; }
  .msg .msg__in > .msg__media { order: 3; margin-top: 28px; }
  .msg .msg__body > .msg__text { order: 4; }
  .msg .msg__body > .msg__sign { order: 5; }
}

/* ============================================================
   reduced-motion：全アニメ停止（出現・ホバー移動・ヘッダー）
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js [data-rev], html.js [data-rev] .flow__step { opacity: 1; transform: none; transition: none; }
  html.js .fv__line, html.js .fv__lead, html.js .fv__act, html.js .fv__card,
  html.js .fv__sub, html.js .fv__scroll { animation: none; opacity: 1; transform: none; }
  .fv__scroll-bar::after { animation: none; transform: none; }
  .biz__media img, .rarrow, .rarrow svg, .news--top .news__list a::after { transition: none; }
  a.biz__card:hover .biz__media img, a.biz__card:hover .rarrow svg, .news--top .news__list a:hover::after { transform: none; }
  /* 浮遊は全部完全停止（JS無効時も）。★今回展開した5箇所もここに必ず入れる */
  .fv__card, .fv .blob,
  .ph__card, .about__media img, .bz__media img, .msg__media img, .str__ph { animation: none; transform: none; will-change: auto; }
  .fv__card, html.js .fv__card { transform: rotate(var(--tilt, 0deg)); }   /* FVの6枚は浮遊だけ止めて、傾きは残す（上の transform:none より後ろ＆同じ強さで勝たせる） */
  .btn--orb:hover .btn__orb { transform: none; }
  .btn:hover, .btn:hover svg, .tlink:hover svg, .fcta__link:hover svg, a.card:hover { transform: none; }
  .hd, .hd--hide, .drawer, .fcta { transition: none; transform: none; }
  .btn, .card, .hd__nav a, .news__list a { transition: none; }
}


/* ============================================================
   事業内容：報酬カード（2026-10-03・Luminaの「報酬率＋特大の数字」に倣う）
   ============================================================ */
.rw {
  margin: clamp(40px, 5vw, 64px) auto 0; max-width: 560px; text-align: center;
  padding: clamp(28px, 3.4vw, 44px) clamp(24px, 4vw, 56px);
  border-radius: var(--r-xl, 28px); background: var(--tint-2);
  box-shadow: 0 0 0 1px var(--line), 0 18px 44px var(--sh-1);
}
.rw__lbl { justify-content: center; margin-bottom: 6px; }
.rw__name { font-size: clamp(15px, 1.3vw, 17px); font-weight: 700; letter-spacing: .08em; }
.rw__num { display: flex; align-items: baseline; justify-content: center; gap: 6px; margin-top: 4px; line-height: 1; color: var(--ink); }
.rw__pre { font-size: clamp(16px, 1.6vw, 22px); font-weight: 700; margin-right: 4px; }
.rw__val { font-family: var(--ff-en, inherit); font-size: clamp(72px, 9vw, 120px); font-weight: 800; letter-spacing: -.02em; }
.rw__unit { font-family: var(--ff-en, inherit); font-size: clamp(28px, 3.4vw, 44px); font-weight: 800; }
.rw__note { margin-top: 14px; font-size: 14px; color: var(--muted); }

/* 報酬カード：左に写真・右に報酬の2列（2026-10-04）。≤767 は写真→報酬の縦積み */
.rw--photo {
  max-width: none; padding: clamp(14px, 1.6vw, 20px); text-align: left;   /* 2026-10-04 上の5枚カードと幅を揃える（.wrap いっぱい） */
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 3.4vw, 48px); align-items: center;
}
.rw__media { border-radius: calc(var(--r-xl, 28px) - 8px); overflow: hidden; aspect-ratio: 4 / 3; }
.rw__ph { display: block; width: 100%; height: 100%; object-fit: cover; }
.rw__ph--empty { background: linear-gradient(135deg, var(--tint-3), var(--tint-1)); }
.rw--photo .rw__body { padding: 8px clamp(8px, 1.6vw, 24px); justify-self: center; text-align: center; }   /* 2026-10-04 右カラムの中央に（写真に寄りすぎ解消） */
.rw--photo .rw__lbl { justify-content: center; }
.rw--photo .rw__num { justify-content: center; }
@media (max-width: 767px) {
  .rw--photo { grid-template-columns: 1fr; text-align: center; gap: 20px; }
  .rw--photo .rw__body { padding: 0 8px 12px; }
  .rw--photo .rw__lbl, .rw--photo .rw__num { justify-content: center; }
}

img.rw__ph { object-position: 62% 45%; }  /* スマホと手元を残す */

.rw__cta { margin-top: 22px; display: flex; justify-content: center; }   /* 報酬カード：注記の下のLINEボタン */

/* ============================================================
   2026-10-17 修正最終：顧客「全体的に文字が薄い」→ サイト全体で一段濃く
   ・本文の太さ 400 → 500（Noto Sans JP 500 は読み込み済み）
   ・補足文（--muted）＝ink を地へ 35% 寄せていた → 10% に（ほぼ ink）
   ・英字ラベル（--accent-ink）＝brand 45% → 28%（水色みは残す）
   ★theme.php は全案件共通の部品なので触らない。このサイトだけ、後から読む site.css で上書きする
   ============================================================ */
:root {
  --muted: color-mix(in srgb, var(--ink) 90%, var(--bg));
  --accent-ink: color-mix(in srgb, var(--brand) 28%, var(--ink));
}
body { font-weight: 500; }

/* ============================================================
   2026-10-20 顧客要望：拠点が茨城に見えないように
   ・配信スタジオ（新宿区周辺）を社名の下に本文色で出す
   ・登記住所はラベル付きで、小さくグレーに落とす（--muted は 10/17 にほぼ ink へ寄せたので専用色）
   ============================================================ */
.ft__studio { margin-top: 6px; font-size: 13.5px; font-weight: 500; }
.ft__addr { margin-top: 8px; max-width: 34em; font-size: 12px; font-weight: 400; line-height: 1.75; color: color-mix(in srgb, var(--ink) 66%, var(--bg)); }
.ft__addr span { display: inline-block; }   /* 折り返すなら「ラベル／住所」の切れ目で（番地の「6」だけ落ちるのを防ぐ） */