/* ==========================================================
   top-brand.css — 統括トップ専用「合流」演出（2026-07-07）
   コンセプト: 静謐な精密 — 2つの流れがひとつの経営になる
   ・サロレジの流れ = スチールブルー / サロウェブの流れ = 粉青
   ・モーションは transform / opacity / stroke-dashoffset のみ
   ・prefers-reduced-motion では全モーション無効（最終状態で成立）
   ・依存: tokens.css の変数 / base.css の .rv + nav.js の is-in
   ========================================================== */

:root {
  --tb-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --tb-stream-a: #47798d;   /* サロレジ = スチールブルー */
  --tb-stream-b: #6f97a6;   /* サロウェブ = 粉青の濃色 */
}

/* ==========================================================
   A. 静的デザイン（reduced-motion でもこの見た目で成立する）
   ========================================================== */

/* ---- ヒーロー: 静かな存在感 ---- */
.hub-hero { position: relative; isolation: isolate; }
@media (min-width: 961px) {
  .hub-hero { min-height: 86vh; display: flex; align-items: center; }
  .hub-hero .wrap { width: 100%; }
}
#hero-heading { font-feature-settings: "palt"; }

/* 背景の器（JSが .tb-hero-bg を注入する。無JS時は存在しない） */
.tb-hero-bg {
  position: absolute; inset: 0; z-index: -1;
  overflow: hidden; pointer-events: none;
}
.tb-hero-bg::before { /* 細い縦罫 — 和書の罫線の気配 */
  content: ""; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(90deg,
    rgba(47, 58, 61, 0.05) 0 1px, transparent 1px 180px);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
}
.tb-hero-bg svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* 合流ライン（ヒーロー背景） */
.tb-flow { fill: none; stroke-linecap: round; }
.tb-flow-a    { stroke: var(--tb-stream-a); opacity: 0.30; stroke-width: 1.4; }
.tb-flow-b    { stroke: var(--blue);        opacity: 0.55; stroke-width: 1.4; }
.tb-flow-m    { stroke: url(#tbMG);         opacity: 0.45; stroke-width: 2; }
.tb-flow-echo { stroke: var(--blue);        opacity: 0.16; stroke-width: 1; }
.tb-hero-node { fill: var(--terra); }

/* ヒーロー・アイブロウ: 先導する一本の罫線 */
.tb-eyebrow { display: inline-flex; align-items: center; gap: 0.8em; }
.tb-eyebrow::before {
  content: ""; width: 2.4em; height: 1px;
  background: var(--terra);
  transform: scaleX(1); transform-origin: left;
}

/* 2つのCTA: 主従を色でなく質感で分ける（コピー不変） */
.hub-hero .btn-primary + .btn-primary {
  background: var(--cream-2); color: var(--terra);
  border: 1.5px solid rgba(71, 121, 141, 0.5); box-shadow: none;
}
.hub-hero .btn-primary + .btn-primary:hover {
  background: #eef4f6; border-color: var(--terra);
  transform: translateY(-2px); box-shadow: 0 10px 26px -14px rgba(71,121,141,.4);
}

/* ヒーロー右: 画像を「額」に納める */
.tb-hero-visual { position: relative; }
.tb-hero-visual::before { /* 粉青の面をひとつ、奥に敷く */
  content: ""; position: absolute; z-index: -1;
  top: -18px; left: -18px; width: 52%; aspect-ratio: 1;
  border-radius: var(--radius-xl);
  background: var(--blue); opacity: 0.30;
}
.tb-hero-visual .img-slot {
  border-radius: var(--radius-lg);
  background: var(--cream-2);
  box-shadow: var(--shadow-float);
}
.tb-hero-visual figcaption {
  position: relative; z-index: 1; /* 絶対配置の picture より前面に出す */
  background: var(--cream-2);
  font-size: var(--text-xs); color: var(--ink-3);
  text-align: center; padding: 0.75rem 1rem;
  border-top: 1px solid var(--line-soft);
  letter-spacing: 0.02em;
}

/* ---- セクション・アイブロウ共通: 罫線を添える ---- */
.sec-head .sec-eyebrow { display: inline-flex; align-items: center; gap: 0.8em; }
.sec-head .sec-eyebrow::before,
.sec-head[style*="center"] .sec-eyebrow::after {
  content: ""; width: 2.2em; height: 1px; background: var(--terra);
  opacity: 0.55; transform: scaleX(1);
}
.sec-head .sec-eyebrow::before { transform-origin: right; }
.sec-head[style*="center"] .sec-eyebrow::after { transform-origin: left; }

/* ---- 問題→解決カード: 因果の罫線 ---- */
.hub-holes .hub-hole { border-width: 1px; position: relative; }
.tb-then { position: relative; }
.tb-ans { position: relative; }

/* ---- 2サービスカード: 流れの色を宿す ---- */
.hub-services .hub-svc { position: relative; overflow: hidden; border-width: 1px; }
.hub-services .hub-svc::before { /* 上辺のアクセント罫 */
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--tb-stream-a);
  transform: scaleX(1); transform-origin: left;
}
.hub-services .hub-svc:nth-child(2)::before { background: var(--tb-stream-b); }
.hub-services .hub-svc:nth-child(2) .hub-svc-eyebrow,
.hub-services .hub-svc:nth-child(2) .hub-svc-arrow { color: var(--tb-stream-b); }
.hub-services .hub-svc:hover {
  transform: translateY(-6px);
  border-color: rgba(71, 121, 141, 0.35);
  box-shadow: var(--shadow-float);
}
.hub-svc-tag { background: transparent; }

/* ---- 合流図（2カード → セット価格へ。JSが注入） ---- */
.tb-merge {
  display: block; width: 100%;
  height: clamp(110px, 16vw, 170px);
  margin: calc(var(--space-section) * -0.5) auto 2.2rem;
}
.tb-merge svg { width: 100%; height: 100%; overflow: visible; }
.tb-m-line { fill: none; stroke-width: 1.6; stroke-linecap: round; }
.tb-m-a { stroke: var(--tb-stream-a); opacity: 0.55; }
.tb-m-b { stroke: var(--tb-stream-b); opacity: 0.55; }
.tb-m-node { fill: var(--terra); }
@media (max-width: 760px) { .tb-merge { display: none; } } /* 縦積み時は意味を失うため */

/* ---- クロスセル暗パネル: 奥に粉青の気配 ---- */
.hub-cross { position: relative; overflow: hidden; }
.hub-cross::before {
  content: ""; position: absolute; z-index: 0;
  top: -45%; right: -18%; width: 68%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(176, 208, 223, 0.14), transparent 70%);
  pointer-events: none;
}
.hub-cross > * { position: relative; z-index: 1; }

/* フローの現在地（JSが tb-on / tb-done を巡回付与） */
.hub-cross-flow span:not(.hub-cross-flow-sep) {
  display: inline-block; position: relative; padding-bottom: 3px;
}
.hub-cross-flow span:not(.hub-cross-flow-sep)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--blue);
  transform: scaleX(0); transform-origin: left;
}
.hub-cross-flow .tb-on { color: #eef3f3; }
.hub-cross-flow .tb-on::after { transform: scaleX(1); }
.hub-cross-flow .tb-done { color: rgba(238, 243, 243, 0.72); }

/* ---- サポート帯: 絵文字を円に納める ---- */
.hub-support-icon {
  display: grid; place-items: center;
  width: 3.2rem; height: 3.2rem;
  background: var(--rose-bg); border-radius: 50%;
  font-size: 1.35rem; margin-top: 0;
}

/* ---- 信頼3点: 罫線を主役に ---- */
.hub-trust .hub-trust-item { border-left-color: rgba(71, 121, 141, 0.2); position: relative; }
.hub-trust .hub-trust-item::before {
  content: ""; position: absolute; left: -3px; top: 0; width: 3px; height: 100%;
  background: var(--terra);
  transform: scaleY(1); transform-origin: top;
}

/* ==========================================================
   B. モーション（reduced-motion では一切適用されない）
   初期状態の隠蔽・transition はすべてこのブロック内に置く
   ========================================================== */
@media (prefers-reduced-motion: no-preference) {

  /* ---- ヒーロー入場カスケード ---- */
  .hub-hero .rv {
    transform: translateY(30px);
    transition-duration: 1.1s;
    transition-timing-function: var(--tb-ease);
  }
  .hub-hero .rv.is-in { opacity: 1; transform: none; }
  .hub-hero-inner > div:first-child > .rv:nth-child(1) { transition-delay: 0.08s; }
  .hub-hero-inner > div:first-child > .rv:nth-child(2) { transition-delay: 0.18s; }
  .hub-hero-inner > div:first-child > .rv:nth-child(3) { transition-delay: 0.34s; }
  .hub-hero-inner > div:first-child > .rv:nth-child(4) { transition-delay: 0.48s; }
  .hub-hero-inner > div:first-child > .rv:nth-child(5) { transition-delay: 0.62s; }
  .hub-hero-inner > div:first-child > .rv:nth-child(6) { transition-delay: 0.78s; }
  .hub-hero-inner > .tb-hero-visual { transition-delay: 0.55s; }

  /* アイブロウの罫線が先に走る */
  .tb-eyebrow::before {
    transform: scaleX(0);
    transition: transform 1s var(--tb-ease) 0.35s;
  }
  .tb-eyebrow.is-in::before { transform: scaleX(1); }

  /* H1 行マスク（JSが行を .tb-line で包み、ヒーローに .tb-ready を付与） */
  h1.tb-split.rv { opacity: 1; transform: none; transition: none; }
  .tb-line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
  .tb-line-i {
    display: block; transform: translateY(112%);
    transition: transform 1.25s var(--tb-ease);
  }
  .tb-ready .tb-line:nth-of-type(1) .tb-line-i { transition-delay: 0.18s; }
  .tb-ready .tb-line:nth-of-type(2) .tb-line-i { transition-delay: 0.34s; }
  .tb-ready .tb-line-i { transform: none; }

  /* カバー行チップの雫落ち */
  .hub-hero .hub-cover.rv { opacity: 1; transform: none; }
  .hub-cover.rv > span {
    opacity: 0; transform: translateY(12px);
    transition: opacity 0.7s var(--tb-ease), transform 0.7s var(--tb-ease);
  }
  .hub-cover.rv.is-in > span { opacity: 1; transform: none; }
  .hub-cover.rv.is-in > span:nth-child(1)  { transition-delay: 0.50s; }
  .hub-cover.rv.is-in > span:nth-child(2)  { transition-delay: 0.55s; }
  .hub-cover.rv.is-in > span:nth-child(3)  { transition-delay: 0.60s; }
  .hub-cover.rv.is-in > span:nth-child(4)  { transition-delay: 0.65s; }
  .hub-cover.rv.is-in > span:nth-child(5)  { transition-delay: 0.70s; }
  .hub-cover.rv.is-in > span:nth-child(6)  { transition-delay: 0.75s; }
  .hub-cover.rv.is-in > span:nth-child(7)  { transition-delay: 0.80s; }
  .hub-cover.rv.is-in > span:nth-child(8)  { transition-delay: 0.85s; }
  .hub-cover.rv.is-in > span:nth-child(9)  { transition-delay: 0.90s; }
  .hub-cover.rv.is-in > span:nth-child(10) { transition-delay: 0.95s; }
  .hub-cover.rv.is-in > span:nth-child(11) { transition-delay: 1.00s; }

  /* ヒーロー背景: 合流ラインの描画（.tb-ready で開始） */
  .tb-flow {
    stroke-dasharray: 1; stroke-dashoffset: 1;
    transition: stroke-dashoffset 2.4s var(--tb-ease);
  }
  .tb-ready .tb-flow-b    { transition-delay: 0.25s; }
  .tb-ready .tb-flow-m    { transition-delay: 1.1s; transition-duration: 1.8s; }
  .tb-ready .tb-flow-echo { transition-delay: 0.6s; transition-duration: 3s; }
  .tb-ready .tb-flow { stroke-dashoffset: 0; }
  .tb-hero-node {
    opacity: 0; transform: scale(0.2);
    transform-origin: center; transform-box: fill-box;
    transition: opacity 0.6s var(--tb-ease) 2.1s, transform 0.8s var(--ease-bounce) 2.1s;
  }
  .tb-ready .tb-hero-node { opacity: 1; transform: scale(1); }

  /* 画像の呼吸（浮遊） */
  @keyframes tbFloat {
    from { transform: translateY(0); }
    to   { transform: translateY(-8px); }
  }
  .tb-hero-visual .img-slot { animation: tbFloat 6.5s ease-in-out infinite alternate; }

  /* ---- 問題→解決: 「↓だから」が繋がって見えるシーケンス ---- */
  .hub-holes.rv { opacity: 1; transform: none; }
  .hub-holes .hub-hole {
    opacity: 0; transform: translateY(30px);
    transition: opacity 1s var(--tb-ease), transform 1s var(--tb-ease);
  }
  .hub-holes.is-in .hub-hole { opacity: 1; transform: none; }
  .hub-holes.is-in .hub-hole:nth-child(2) { transition-delay: 0.16s; }
  .hub-holes.is-in .hub-hole:nth-child(3) { transition-delay: 0.32s; }

  .hub-hole .tb-then,
  .hub-hole .tb-ans,
  .hub-hole .tb-then ~ .hub-hole-desc {
    opacity: 0; transform: translateY(14px);
    transition: opacity 0.8s var(--tb-ease), transform 0.8s var(--tb-ease);
  }
  .hub-holes.is-in .hub-hole .tb-then,
  .hub-holes.is-in .hub-hole .tb-ans,
  .hub-holes.is-in .hub-hole .tb-then ~ .hub-hole-desc { opacity: 1; transform: none; }
  /* 問題が読めてから因果が繋がる（カードごとに +0.16s ずつ遅れて） */
  .hub-holes.is-in .hub-hole:nth-child(1) .tb-then { transition-delay: 0.75s; }
  .hub-holes.is-in .hub-hole:nth-child(1) .tb-ans  { transition-delay: 0.95s; }
  .hub-holes.is-in .hub-hole:nth-child(1) .tb-then ~ .hub-hole-desc { transition-delay: 1.1s; }
  .hub-holes.is-in .hub-hole:nth-child(2) .tb-then { transition-delay: 0.91s; }
  .hub-holes.is-in .hub-hole:nth-child(2) .tb-ans  { transition-delay: 1.11s; }
  .hub-holes.is-in .hub-hole:nth-child(2) .tb-then ~ .hub-hole-desc { transition-delay: 1.26s; }
  .hub-holes.is-in .hub-hole:nth-child(3) .tb-then { transition-delay: 1.07s; }
  .hub-holes.is-in .hub-hole:nth-child(3) .tb-ans  { transition-delay: 1.27s; }
  .hub-holes.is-in .hub-hole:nth-child(3) .tb-then ~ .hub-hole-desc { transition-delay: 1.42s; }

  /* ---- 2サービスカード: 上辺の罫線が流れ込む ---- */
  .hub-services.rv { opacity: 1; transform: none; }
  .hub-services .hub-svc {
    opacity: 0; transform: translateY(30px);
    transition: opacity 1s var(--tb-ease), transform 1s var(--tb-ease),
                border-color var(--duration-fast), box-shadow var(--duration-fast);
  }
  .hub-services.is-in .hub-svc { opacity: 1; transform: none; }
  .hub-services.is-in .hub-svc:nth-child(2) { transition-delay: 0.18s; }
  .hub-services .hub-svc::before {
    transform: scaleX(0);
    transition: transform 1.2s var(--tb-ease) 0.5s;
  }
  .hub-services.is-in .hub-svc::before { transform: scaleX(1); }
  .hub-services.is-in .hub-svc:nth-child(2)::before { transition-delay: 0.68s; }
  /* hover中も入場transitionが transform を奪わないように */
  .hub-services.is-in .hub-svc:hover { transform: translateY(-6px); }

  /* ---- 合流図の描画 ---- */
  .tb-merge .tb-m-line {
    stroke-dasharray: 1; stroke-dashoffset: 1;
    transition: stroke-dashoffset 1.5s var(--tb-ease) 0.1s;
  }
  .tb-merge.tb-in .tb-m-line { stroke-dashoffset: 0; }
  .tb-merge .tb-m-node {
    opacity: 0; transform: scale(0.2);
    transform-origin: center; transform-box: fill-box;
    transition: opacity 0.5s var(--tb-ease) 1.35s, transform 0.7s var(--ease-bounce) 1.35s;
  }
  .tb-merge.tb-in .tb-m-node { opacity: 1; transform: scale(1); }

  /* ---- クロスセル: フローの現在地はゆっくり移る ---- */
  .hub-cross-flow span:not(.hub-cross-flow-sep) {
    transition: color 0.5s var(--tb-ease);
  }
  .hub-cross-flow span:not(.hub-cross-flow-sep)::after {
    transition: transform 0.6s var(--tb-ease);
  }

  /* ---- 信頼3点: 罫線が上から満ちる ---- */
  .hub-trust.rv { opacity: 1; transform: none; }
  .hub-trust .hub-trust-item {
    opacity: 0; transform: translateY(18px);
    transition: opacity 0.9s var(--tb-ease), transform 0.9s var(--tb-ease);
  }
  .hub-trust.is-in .hub-trust-item { opacity: 1; transform: none; }
  .hub-trust.is-in .hub-trust-item:nth-child(2) { transition-delay: 0.15s; }
  .hub-trust.is-in .hub-trust-item:nth-child(3) { transition-delay: 0.3s; }
  .hub-trust .hub-trust-item::before {
    transform: scaleY(0);
    transition: transform 1s var(--tb-ease) 0.25s;
  }
  .hub-trust.is-in .hub-trust-item::before { transform: scaleY(1); }
  .hub-trust.is-in .hub-trust-item:nth-child(2)::before { transition-delay: 0.4s; }
  .hub-trust.is-in .hub-trust-item:nth-child(3)::before { transition-delay: 0.55s; }

  /* ---- セクション見出しの罫線 ---- */
  .sec-head .sec-eyebrow::before,
  .sec-head[style*="center"] .sec-eyebrow::after {
    transform: scaleX(0);
    transition: transform 1s var(--tb-ease) 0.25s;
  }
  .sec-head.is-in .sec-eyebrow::before,
  .sec-head.is-in .sec-eyebrow::after { transform: scaleX(1); }

  /* ---- 全体: リビールをひと呼吸ゆっくりに ---- */
  .sec .rv { transition-duration: 0.95s; transition-timing-function: var(--tb-ease); }
}

/* ================================================================
   CINE (2026-07-08 Fable) — CH.00 プロローグ。
   参照水準: prismplane.pages.dev（粒子シーン+章立てのシネマティック）を
   マネサロの世界観（寒色・和モダン・菱形）に翻訳。
   ================================================================ */
.hub-hero.cine {
  position: relative;
  min-height: 100vh;
  display: flex; align-items: center;
  overflow: hidden;
  padding: calc(72px + 2rem) 0 4.5rem;
  background:
    radial-gradient(900px 620px at 50% 42%, rgba(71, 121, 141, .34), transparent 68%),
    radial-gradient(1400px 900px at 80% 110%, rgba(31, 51, 60, .9), transparent 70%),
    #14232a;
  color: #eef3f3;
}
.hub-hero.cine::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  opacity: .08; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.cine-field { position: absolute; inset: 0; width: 100%; height: 100%; }
.cine-hishi {
  position: absolute; z-index: 1;
  right: 6%; top: 50%;
  width: clamp(280px, 34vw, 520px); aspect-ratio: 1;
  transform: translateY(-52%);
  filter: drop-shadow(0 0 40px rgba(176, 208, 223, .18));
  pointer-events: none;
}
.cine-hishi-spin { transform-origin: 120px 120px; animation: cineSpin 80s linear infinite; }
@keyframes cineSpin { to { transform: rotate(360deg); } }
.cine-rail {
  position: absolute; left: 1.7rem; top: 50%; transform: translateY(-50%);
  z-index: 2; display: flex; flex-direction: column; align-items: center; gap: .8rem;
  color: rgba(238, 243, 243, .55);
  font-size: .62rem; font-weight: 700; letter-spacing: .3em;
}
.cine-rail i { display: block; width: 1px; height: 72px; background: linear-gradient(180deg, rgba(238,243,243,.5), rgba(238,243,243,.05)); }
.cine-rail-v { writing-mode: vertical-rl; letter-spacing: .42em; }
.cine-inner { position: relative; z-index: 2; }
.cine-ey { color: rgba(176, 208, 223, .85) !important; }
.cine-h1 {
  font-family: var(--font-display);
  font-weight: 800; font-feature-settings: "palt";
  font-size: clamp(2.8rem, 1.4rem + 4.6vw, 5rem);
  line-height: 1.22; letter-spacing: .03em;
  color: #f2f6f7;
  margin: 0 0 1.3rem;
  text-shadow: 0 2px 40px rgba(20, 35, 42, .6);
}
.cine-lead { color: rgba(238, 243, 243, .78); line-height: 2; margin: 0 0 1.6rem; font-size: var(--text-md); max-width: 36em; }
.cine-lead strong { color: #eef6f9; }
.hub-hero.cine .hub-cover.cine-cover { justify-content: flex-start; margin-bottom: 1.8rem; color: rgba(238, 243, 243, .88); }
.hub-hero.cine .hub-cover-sep::before { background: rgba(176, 208, 223, .6); }
.cine-ctas { display: flex; gap: .8rem; flex-wrap: wrap; }
.cine-ctas .btn-ghost { border-color: rgba(238, 243, 243, .35); color: #eef3f3; background: rgba(20, 35, 42, .35); backdrop-filter: blur(4px); }
.cine-note { font-size: var(--text-xs); color: rgba(238, 243, 243, .45); margin-top: 1rem; }
.cine-scroll {
  position: absolute; left: 50%; bottom: 1.6rem; transform: translateX(-50%);
  z-index: 2; display: flex; flex-direction: column; align-items: center; gap: .5rem;
  font-size: .6rem; font-weight: 700; letter-spacing: .34em; color: rgba(238, 243, 243, .5);
}
.cine-scroll i { display: block; width: 1px; height: 34px; background: rgba(238, 243, 243, .4); overflow: hidden; position: relative; }
.cine-scroll i::after { content: ""; position: absolute; left: 0; top: -100%; width: 100%; height: 100%; background: #b0d0df; animation: cineScrollDrop 2.2s cubic-bezier(.16, 1, .3, 1) infinite; }
@keyframes cineScrollDrop { 0% { top: -100%; } 55% { top: 100%; } 100% { top: 100%; } }

@media (max-width: 960px) {
  .hub-hero.cine { padding-top: calc(72px + 3rem); }
  .cine-hishi { right: -14%; top: 30%; width: 62vw; opacity: .5; }
  .cine-rail { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cine-hishi-spin { animation: none; }
  .cine-scroll i::after { animation: none; top: 0; }
}