/* =====================================================================
   _top_variant_b.css — hwp348 TS-Porters TOP バリアントB
   「荷物を、一緒に。」ポーター物語＋トータルサポート
   白×オレンジ×黄 / 丸ゴ(M PLUS Rounded 1c) / signature=ポーターちゃん
   ---------------------------------------------------------------------
   ⚠️ _theme.css / _global.css は編集しない。全スタイルは .vb 配下に閉じる
      （他バリアント・他ページに影響を出さないため全クラス vb- プレフィックス）。
===================================================================== */

.vb {
  /* ── パレット（白60 / オレンジ30 / 黄10・やさしいトーン） ── */
  --base: #ffffff;
  --cream: #FFF8F0;
  --cream2: #FFFCF7;
  --ink: #3B322D;      /* 真っ黒でなく温かみのある濃茶 */
  --soft: #6E635B;
  --line: #F0E4D6;

  --orange: #EF8A3C;
  --orange-d: #B35411;   /* 文字にも使うため AA 準拠の濃さに（_theme.css の --c-main-dark と同値）*/
  --orange-dd: #C25E1B;   /* 錨のダークオレンジパネル */
  --orange-l: #FBE3CB;
  --orange-ll: #FEF3E8;

  --yellow: #F7C948;
  --yellow-d: #E7B32E;
  --yellow-l: #FCEEC2;

  --disp: 'M PLUS Rounded 1c', 'Noto Sans JP', sans-serif;
  --body: 'Noto Sans JP', sans-serif;
  --wrap: 1200px;   /* 下層の --width-container と揃える（/debug ②layout #6）*/

  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --dur: .6s;

  /* 8ptベースの縦リズム */
  --sec-pad: clamp(64px, 8vw, 120px);
  --radius-panel: 32px;
  --radius-card: 20px;

  background: var(--base);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.08em;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  font-feature-settings: "palt" 0;
}

.vb *,
.vb *::before,
.vb *::after { box-sizing: border-box; }

.vb h1, .vb h2, .vb h3, .vb h4 {
  font-family: var(--disp);
  font-weight: 500;
  margin: 0;
  line-height: 1.28;
  letter-spacing: 0.01em;
  font-feature-settings: "palt";
}
.vb p { margin: 0; }
.vb a { color: inherit; text-decoration: none; }
.vb img { max-width: 100%; display: block; }

.vb__wrap {
  width: min(var(--wrap), calc(100% - 48px));
  margin-inline: auto;
  position: relative;
}
.vb__sec { padding: var(--sec-pad) 0; position: relative; }

/* ── 共通：eyebrow（英字ラベル＋黄の角丸マーカー） ── */
.vb-ey {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  font-family: var(--disp);
  font-weight: 500;
  font-size: .8rem;
  letter-spacing: .18em;
  color: var(--orange-d);
  margin: 0 0 1em;
}
.vb-ey::before {
  content: "";
  width: 14px; height: 14px;
  border-radius: 5px;
  background: var(--yellow);
  box-shadow: 7px 0 0 var(--orange-l);
  flex-shrink: 0;
}

/* ── 共通：セクション見出し（ジャンプ率3.5倍） ── */
.vb-h2 {
  font-size: clamp(2rem, 1.15rem + 3.4vw, 3.5rem);   /* 32 → 56px */
  line-height: 1.24;
  letter-spacing: .02em;
}
.vb-h2 .mk {   /* 黄のマーカー風下線塗り */
  background: linear-gradient(transparent 62%, var(--yellow-l) 62%);
  padding: 0 .06em;
}
.vb-h2 .or { color: var(--orange-d); }
/* 見出し（H2/H3）と直後の本文の間に余白を確保（修正指示 2026-08-23
   「見出しと長文の間の余白が少ない」）。h2/h3 は margin:0 のため隣接セレクタで足す */
.vb h2 + p, .vb h3 + p,
.vb h2 + div, .vb h3 + div,
.vb h2 + ul, .vb h3 + ul { margin-top: clamp(18px, 2vw, 28px); }
.vb-lead {
  color: var(--soft);
  font-size: 1.02rem;
  line-height: 1.9;
}

/* ── 共通：ボタン（丸ゴ・6型のうち塗り/枠） ── */
/* .m-btn（下層のButton）と高さを揃える。line-height を継承すると 65px になり
   同じページのCTAボタン 52px と食い違う（/debug ③design #4）*/
.vb-btn {
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: .7em;
  font-family: var(--disp);
  font-weight: 500;
  font-size: 1rem;
  padding: 1em 2em;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color .22s var(--ease-io),
              color .22s var(--ease-io),
              border-color .22s var(--ease-io),
              box-shadow .22s var(--ease-io),
              transform .22s var(--ease-io);
}
.vb-btn .ar { transition: transform .22s var(--ease-io); }
.vb-btn:hover .ar { transform: translateX(4px); }

.vb-btn--fill {
  background: var(--orange);
  color: #fff;
  box-shadow: 0 12px 26px -14px rgba(194, 94, 27, .8);
}
.vb-btn--fill:hover { background: var(--orange-d); transform: translateY(-2px); }
.vb-btn--fill:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.vb-btn--fill:active { transform: translateY(0); background: var(--orange-dd); }

.vb-btn--ghost {
  background: #fff;
  color: var(--ink);
  border-color: var(--orange-l);
}
.vb-btn--ghost:hover { border-color: var(--orange); color: var(--orange-d); transform: translateY(-2px); }
.vb-btn--ghost:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.vb-btn--ghost:active { transform: translateY(0); }

/* .vb-btn--white は CtaSection モジュール（Button variant="secondary"）へ移行し廃止 */

/* =====================================================================
   HERO — 噛み合う2面 / ポーターちゃんが荷物を運ぶ / 透かし "Porter"
===================================================================== */
/* MV下の余白は「こんなお悩み」までを詰めるため縮小（修正指示 2026-08-23） */
.vb-hero { position: relative; overflow: clip; padding: clamp(40px, 5vw, 72px) 0 clamp(48px, 6vw, 88px); }
/* MV直後（＝こんなお悩み）の上余白も詰める：合計 218px → 約160px */
.vb-hero + .vb__sec { padding-top: clamp(36px, 4.5vw, 72px); }
.vb-hero__wm {
  position: absolute; top: 4%; right: -2%;
  font-family: var(--disp); font-weight: 500;
  font-size: clamp(6rem, 20vw, 20rem);
  line-height: .8; color: var(--orange);
  opacity: .05; pointer-events: none; user-select: none;
  z-index: 0; letter-spacing: -.02em;
}
.vb-hero__blob {
  position: absolute; border-radius: 50%; z-index: 0; pointer-events: none;
}
.vb-hero__blob--1 { width: 340px; height: 340px; background: var(--orange-ll); left: -80px; top: 40px; }
.vb-hero__blob--2 { width: 180px; height: 180px; background: var(--yellow-l); right: 6%; bottom: -30px; }
.vb-hero__grid {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
/* テキスト面をコンテナ化：見出しを「列幅」基準で詰められるようにする */
.vb-hero__copy { container-type: inline-size; }
.vb-hero__catch {
  /* 1行目「人と会社の「困った」を、」＝約12.3em。8cqw（＝列幅の1/12.5）で頭打ちにして
     どの画面幅でも1行目が折り返さないようにする */
  font-size: clamp(1.3rem, min(1.4rem + 4vw, 8cqw), 4.6rem);
  line-height: 1.28; letter-spacing: .01em;
  margin: 0 0 .6em;
}
.vb-hero__catch .or { color: var(--orange-d); }
.vb-hero__catch .mk { background: linear-gradient(transparent 60%, var(--yellow) 60%); padding: 0 .08em; border-radius: 2px; }
.vb-hero__sub { color: var(--soft); font-size: 1.05rem; line-height: 2; margin: 0; }
.vb-hero__acts { display: flex; gap: 14px; flex-wrap: wrap; margin-top: clamp(28px, 3.4vw, 44px); }

/* 噛み合う2面：メディア（キャラ面） */
.vb-hero__media { position: relative; }
/* 背景・枠・ドットは撤去し、イラスト単体で大きく見せる（修正指示 2026-08-23） */
.vb-hero__stage {
  position: relative;
  aspect-ratio: 6 / 5;   /* MVイラスト（横長 1108×796）に合わせて正方形から変更 */
  display: grid; place-items: center;
}
.vb-hero__char { position: relative; z-index: 2; width: 66%; }
/* MV イラスト（支給素材 mv.png）：ステージいっぱいに contain で収める */
.vb-hero__img {
  position: relative; z-index: 2;
  width: 100%; height: auto; max-height: 100%;
  object-fit: contain;
}
/* 運ぶ矢印バッジは撤去（修正指示 2026-08-23） */

@media (max-width: 880px) {
  .vb-hero__grid { grid-template-columns: 1fr; }
  .vb-hero__media { max-width: 420px; margin-inline: auto; width: 100%; }
}

/* =====================================================================
   お悩み — 大角丸クリーム帯 + 段差チップ群（背景の工夫=ドット）
===================================================================== */
.vb-worry__panel {
  position: relative;
  background: var(--cream);
  border-radius: var(--radius-panel);
  padding: clamp(40px, 5vw, 72px) clamp(24px, 4vw, 64px);
  overflow: hidden;
}
.vb-worry__panel::before { /* 背面ドット */
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(222,115,39,.08) 3px, transparent 3px);
  background-size: 34px 34px; z-index: 0;
}
/* 透かしが下に見切れていたため、パネル内に収まる位置へ（修正指示 2026-08-23） */
.vb-worry__wm {
  position: absolute; right: 4%; bottom: 4%;
  font-family: var(--disp); font-weight: 500; font-size: clamp(4rem, 12vw, 11rem);
  color: var(--orange); opacity: .045; line-height: .8; z-index: 0; user-select: none;
}
.vb-worry__inner { position: relative; z-index: 2; }
.vb-worry__head { margin: 0 0 clamp(28px, 4vw, 44px); }
.vb-chips { display: flex; flex-wrap: wrap; gap: 12px 14px; margin: 0 0 clamp(28px, 4vw, 40px); }
.vb-chip {
  display: inline-flex; align-items: center; gap: .55em;
  background: #fff;
  border: 2px solid var(--line);
  border-radius: 999px;
  padding: .7em 1.25em;
  font-family: var(--disp); font-weight: 500; font-size: .98rem;
  color: var(--ink);
  box-shadow: 0 8px 18px -16px rgba(59,50,45,.6);
}
.vb-chip .dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.vb-chip:nth-child(odd) .dot { background: var(--orange); }
.vb-chip:nth-child(even) .dot { background: var(--yellow-d); }
/* 段差なし＝余白を揃えて綺麗に整列（ユーザー確定 2026-08-15） */
/* max-width による途中改行（右に余白が残る）を解除（修正指示 2026-08-23） */
.vb-worry__body { color: var(--soft); line-height: 2; }
.vb-worry__body p + p { margin-top: .6em; }

@media (max-width: 720px) {
  .vb-chip { font-size: .9rem; padding: .6em 1em; }
  .vb-chip[class] { transform: none; }
}

/* =====================================================================
   強み — 大小非対称 bento（特大ゴースト番号＝ghost_number / bg motif）
===================================================================== */
.vb-str { position: relative; }
.vb-str::before { /* ブランドモチーフ背景（薄い荷物ドット菱形） */
  content: ""; position: absolute; inset: 0; z-index: 0; opacity: .5;
  background-image: radial-gradient(rgba(247,201,72,.16) 2px, transparent 2px);
  background-size: 40px 40px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 20%, #000 80%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 20%, #000 80%, transparent);
}
.vb-str__inner { position: relative; z-index: 2; }
.vb-str__head { margin: 0 0 clamp(32px, 4vw, 48px); }
.vb-bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.6vw, 22px);
}
.vb-scard {
  position: relative;
  background: #fff;
  border: 2px solid var(--line);
  border-radius: var(--radius-card);
  /* 上下の余白を詰める（旧 26–40px → 22–30px・修正指示 2026-08-23） */
  padding: clamp(22px, 2vw, 30px) clamp(22px, 2.2vw, 32px);
  overflow: hidden;
  display: flex; flex-direction: column;
}
/* 非リンク要素のhoverアニメ・シャドウは撤去（ユーザー確定 2026-08-15） */
.vb-scard__ghost {
  position: absolute; top: -.18em; right: .1em;
  font-family: var(--disp); font-weight: 500; font-size: clamp(4.5rem, 8vw, 7.5rem);
  color: var(--orange); opacity: .08; line-height: 1; z-index: 0; user-select: none;
}
/* 図版（支給イラスト 1〜6.png）。旧アイコンチップ .vb-scard__ic を置き換え */
.vb-scard__fig {
  position: relative; z-index: 1;
  margin: 0 0 18px;
  display: flex; align-items: flex-end; justify-content: center;
  height: clamp(120px, 12vw, 160px);
}
.vb-scard__fig img { width: auto; max-width: 100%; max-height: 100%; height: auto; }
.vb-scard__txt { position: relative; z-index: 1; }
.vb-scard__cat {
  position: relative; z-index: 1;
  display: inline-block;
  font-family: var(--disp); font-weight: 500; font-size: .8rem; letter-spacing: .06em;
  color: var(--orange-d);
  background: var(--orange-ll);
  padding: .25em .8em; border-radius: 999px; margin: 0 0 .9em;
}
.vb-scard__title {
  position: relative; z-index: 1;
  font-size: clamp(1.25rem, .9rem + 1vw, 1.65rem);
  line-height: 1.4; margin: 0 0 .7em;
}
.vb-scard__body { position: relative; z-index: 1; color: var(--soft); font-size: .96rem; line-height: 1.95; }

/* 6枚すべて同じ横幅の3列グリッドに統一（修正指示 2026-08-23
   「一番と二番の大きさが違うので同じ横幅にして、高さと上下の余白を調整」）。
   旧：01＝横2連／06＝横3連バナーの非対称 bento は廃止。
   高さは grid の行揃えで自動的に揃うため、余った縦余白は生じない。 */
.vb-scard--wide2,
.vb-scard--banner { grid-column: auto; }
/* 06 は面の色だけ残してアクセントにする（レイアウトは他と同一） */
.vb-scard--banner {
  background: linear-gradient(160deg, var(--orange-ll), #fff 70%);
  border-color: var(--orange-l);
}

@media (max-width: 900px) {
  .vb-bento { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .vb-bento { grid-template-columns: 1fr; }
  .vb-scard__fig { height: clamp(140px, 34vw, 180px); }
}

/* =====================================================================
   サービス一覧 — 透かしキーワード（corp_business_watermark_keyword）＋ list
===================================================================== */
.vb-svc { position: relative; overflow: clip; background: var(--cream2); }
.vb-svc__wm {
  position: absolute; left: -1%; top: 8%;
  font-family: var(--disp); font-weight: 500; font-style: normal;
  font-size: clamp(5rem, 15vw, 15rem); line-height: .82;
  color: var(--orange); opacity: .05; z-index: 0; user-select: none; white-space: nowrap;
}
/* 見出しバー（左：見出し／右：サービス案内ボタン）＋ 3×3 カードグリッド
   ※旧レイアウト（左sticky見出し＋右1列リスト・キーワードチップ）から変更（ユーザー指示 2026-08-16） */
.vb-svc__bar {
  position: relative; z-index: 2;
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: clamp(16px, 3vw, 32px);
  margin: 0 0 clamp(28px, 4vw, 44px);
}
.vb-svc__head { flex: 1 1 auto; }
.vb-svc__more { flex: 0 0 auto; }

.vb-svc__cards {
  position: relative; z-index: 2;
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 1.4vw, 20px);
}
.vb-svccard {
  height: 100%;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: 14px;
  background: #fff;
  border: 2px solid var(--line);
  border-radius: var(--radius-card);
  padding: clamp(18px, 1.8vw, 24px) clamp(16px, 1.6vw, 22px);
  transition: border-color .22s var(--ease-io), transform .22s var(--ease-io), background-color .22s var(--ease-io);
}
.vb-svccard:hover { border-color: var(--orange); transform: translateY(-3px); }
.vb-svccard:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.vb-svccard__num {
  font-family: var(--disp); font-weight: 500; font-size: .9rem;
  color: var(--orange); font-feature-settings: "tnum";
}
.vb-svccard__name {
  font-family: var(--disp); font-weight: 500; font-size: 1.05rem; line-height: 1.5;
  color: var(--ink);
}
.vb-svccard__arw {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--orange-ll); color: var(--orange-d);
  display: grid; place-items: center;
  transition: background-color .22s var(--ease-io), transform .22s var(--ease-io), color .22s var(--ease-io);
}
.vb-svccard__arw { font-size: .95rem; line-height: 1; }
.vb-svccard:hover .vb-svccard__arw { background: var(--orange); color: #fff; transform: translateX(3px); }

@media (max-width: 900px) {
  .vb-svc__cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .vb-svc__cards { grid-template-columns: 1fr; }
  .vb-svc__more { width: 100%; justify-content: center; }
}

/* =====================================================================
   代表メッセージ — テキスト1カラム
   ---------------------------------------------------------------------
   代表・スタッフ写真は非掲載の方針で確定したため、画像枠（グレー面）と逆split構成を撤去
   （ユーザー指示 2026-09-11）。コンテナ（.vb__wrap）の幅は変えず、行長だけ em で抑える
   （CODING_RULES「コンテンツ幅の標準」）。
===================================================================== */
/* 画像枠が無くなり左半分だけに寄って見えたため中央寄せに（ユーザー指示 2026-09-11）。
   事務所案内の「代表挨拶」（.p-about__msg）と同じ作り＝ブロックを中央に置き、
   見出し・ボタンは中央揃え／本文だけ左揃えにして可読性を保つ。 */
.vb-msg { max-width: 58em; margin-inline: auto; text-align: center; position: relative; z-index: 1; }
/* 画像枠を外して背景が寂しくなったため、MV と同じ装飾の丸を敷く（ユーザー指示 2026-09-11）。
   .vb-hero__blob と同じ作り（円・トークン色・pointer-events なし）。左上に大きいオレンジ・
   右下に黄色＝MV と同じ並びを土台に、右上へ小さいオレンジを1つ足した3つ配置
   （A/B/C を並べて比較しユーザーが採用＝パターンB）。
   overflow: clip は左にはみ出す丸で横スクロールが出ないように。 */
.vb-msg-sec { overflow: clip; }
.vb-msg__blob {
  position: absolute; border-radius: 50%; z-index: 0; pointer-events: none;
}
.vb-msg__blob--1 { width: 300px; height: 300px; background: var(--orange-ll); left: -70px; top: 10%; }
.vb-msg__blob--2 { width: 180px; height: 180px; background: var(--yellow-l); right: 4%; bottom: 4%; }
.vb-msg__blob--3 { width: 90px;  height: 90px;  background: var(--orange-ll); right: 14%; top: 12%; }
/* SP は丸を縮めて端へ寄せる（本文・ボタンに乗らないように） */
@media (max-width: 720px) {
  .vb-msg__blob--1 { width: 190px; height: 190px; left: -80px; top: 3%; }
  .vb-msg__blob--2 { width: 120px; height: 120px; right: -40px; bottom: 3%; }
  .vb-msg__blob--3 { width: 60px;  height: 60px;  right: 8%;   top: 2%; }
}
/* H2「代表メッセージ」の下の余白（修正指示 2026-08-23 → 2026-09-11 増量）。
   .vb h1,.vb h2,…{margin:0}（詳細度 0,1,1）が効いているため .vb-msg__label{margin-bottom}
   （0,1,0）では上書きできず、これまで余白が 0 のままだった。このファイル既存の作法
   （上部「h2/h3 は margin:0 のため隣接セレクタで足す」）に倣い隣接セレクタで足す。
   値は事務所案内「代表挨拶」の h2→h3 と同値（PC 22px / SP 14px）。 */
.vb-msg__label + .vb-msg__title { margin-top: clamp(14px, 1.5vw, 22px); }
/* H2(41.6px)とほぼ同寸で階層が出ず、SPでは H3 22.4px > H2 23.2px と差がほぼ無い状態だったため
   サイズを見直し（ユーザー指摘 2026-09-11）。
     PC 32px … 事務所案内「代表挨拶」の h3（Heading.astro の h3.m-head__title）と同値
     SP 20px … TOP 内の他の h3（.vb-scard__title＝強みカード見出し）と同値
   → どの幅でも H2 > H3 > 本文 の段差が付く。 */
.vb-msg__title { font-size: clamp(1.25rem, .97rem + 1.15vw, 2rem); line-height: 1.35; }
.vb-msg__body { color: var(--soft); line-height: 2; margin: 0 0 1.8em; text-align: left; }
/* 文章→ボタンの余白を確保（ユーザー確定 2026-08-15） */
.vb-msg__body + .vb-btn { margin-top: clamp(20px, 3vw, 28px); }

/* =====================================================================
   CTA — CtaSection モジュール（src/components/modules/CtaSection.astro）へ移行済み。
   確定TOPの「型2 噛み合う2面」は同一の見た目でモジュール側 .m-cta に実装。
   ここには TOP 固有の .vb-cta スタイルは持たない（重複排除）。
===================================================================== */

/* =====================================================================
   ポーターちゃん 仮キャラ（後日PNG差し替え前提の簡易SVGシルエット）
===================================================================== */
.vb-porter { display: block; }

/* =====================================================================
   登場アニメ（transform / opacity のみ・ease-out 一本）
===================================================================== */
.vb [data-reveal] { opacity: 0; transform: translateY(24px); }
.vb [data-reveal].is-in {
  opacity: 1; transform: none;
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
  .vb *, .vb *::before, .vb *::after { transition: none !important; animation: none !important; }
  .vb [data-reveal] { opacity: 1; transform: none; }
}