/*
 * トップページ（front-page.php）だけで読むCSS。
 *
 * **このファイルはトップでしか読み込まれない**（functions.php の
 * tailwind8_front_top_assets）。だから .tw8c-launcher や #page-top-btn を
 * 素の名前で上書きしてよい。他のページには届かない。
 *
 * 名前空間は .tw8f-。self-check(.sc) / contact(.ct) / chat(.tw8c) と同じ作法。
 *
 * ここに書くのは Tailwind のユーティリティで書けないものだけ:
 *   - デモの舞台（SVGのnodeの点灯）と、抜き出した項目の一覧
 *   - 横スワイプ（scroll-snap）
 *   - 固定CTAバーと、チャット・ページトップとの座標の取り合い
 * 色は Tailwind 側のクラスで当てる。**ここで色を持たない**（トークンが二重化する）。
 *
 * 16px 未満の文字を作らないこと。階層は太さ・色・字間・余白で作る。
 */

:root {
  /* 固定CTAバーの高さ。チャットとページトップの位置がこれを基準にする */
  --tw8f-bar-h: 64px;
}

/* ============================================================
   1. ヒーローの流れ（Excel・紙・メール → … → 数字がすぐ見られる）
   ============================================================ */
.tw8f-flow__row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0;
}
.tw8f-flow__dot {
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  border-radius: 0.625rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color .4s ease, color .4s ease, transform .4s ease;
}
/* 点灯の色。「消灯 → 点灯」の状態変化はユーティリティで書けないので、
   ここだけ色を持つ。値は tailwind.config.js の brand / brand-light。 */
.tw8f-flow__row.is-on .tw8f-flow__dot {
  transform: scale(1.06);
  background-color: #0075C2;
  color: #ffffff;
}
.tw8f-flow__row.is-on + .tw8f-flow__pipe span { background-color: #00B9EF; }
.tw8f-flow__pipe { width: 2.5rem; display: flex; justify-content: center; }
.tw8f-flow__pipe span { display: block; width: 2px; height: 1.125rem; }

/* ============================================================
   2. デモ枠（16:9）と舞台
   **動画ファイルは置かない。** ここで動いているものが、そのまま作れるもの
   ＝サイト自体をショールームにする、という方針。だから HTML/SVG で作る。
   ============================================================ */
.tw8f-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.tw8f-frame > svg,
.tw8f-frame > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* ============================================================
   3. 横スワイプ
   ライブラリを入れず、ネイティブのスクロールスナップで作る。
   使うのは「順序に意味がなく、全部見なくても損しないもの」だけ。
   ============================================================ */
.tw8f-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 86%;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0.25rem 1rem 1.25rem;
  margin: 0 -1rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.tw8f-rail > * { scroll-snap-align: center; }

/* スワイプの案内。**display は Tailwind のユーティリティに任せないこと。**
   style.css（wp_head prio 10 の preload）は front-top.css（wp_print_styles prio 8）
   より後に当たるので、<p> に .flex を付けると .flex{display:flex} が
   下の 768px の display:none を上書きし、**PCでも案内が出る**（2026-09-11 実測）。
   詳細度は同じクラス1個ずつなので、勝敗を決めているのは読み込み順だけ。 */
.tw8f-rail__hint {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

@media (min-width: 768px) {
  .tw8f-rail {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
    padding: 0;
    margin: 0;
    gap: 1.5rem;
  }
  .tw8f-rail__hint { display: none; }
}
@media (min-width: 1024px) {
  .tw8f-rail--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tw8f-rail--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
/* デモは中身が厚い（舞台＋状態の文＋項目の一覧＋操作ボタン）。
   1024で4列にすると1枚215pxになり、項目一覧のラベルと値が同じ行に入らない。
   **4列にするのは1280から。** それまでは2列。 */
@media (min-width: 1280px) {
  .tw8f-rail--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ============================================================
   4. 数字
   ============================================================ */
.tw8f-num { font-variant-numeric: tabular-nums; }

/* ============================================================
   5. スマホの固定CTAバー
   **右下は既に埋まっている。** チャットランチャー（.tw8c-launcher、
   right:.75rem / bottom:.75rem / z-index:50）とページトップ（#page-top-btn、
   bottom-24 / z-index:40）が先にいるので、3つを積まずに次のように分ける。
   　　バー … 画面下端いっぱい（チャットはバーの中のボタンに畳む）
   　　ページトップ … バーの上
   **この上書きを chat.css / footer.php へ移さないこと。** 固定CTAバーがあるのは
   トップだけなので、他のページでランチャーを消したりページトップを上げたりすると
   逆に壊れる。ここに置いてあるのが正しい。
   ============================================================ */
.tw8f-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 45;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  padding: 0.5rem 0.75rem calc(0.5rem + env(safe-area-inset-bottom));
  transform: translateY(110%);
  transition: transform .3s ease;
}
.tw8f-bar.is-in { transform: none; }
.tw8f-bar__btn {
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

/*
 * **バーを出す幅は「ヘッダーのCTAが消える幅」に合わせる。**
 * theme/header.php はPCナビ・検索・お問い合わせボタンを xl(1280px) 以上でしか出さない。
 * 768〜1279px（タブレット）は、ヘッダーCTAがハンバーガーの中に隠れるうえに
 * 固定バーも無く、**画面に問い合わせ導線が1つも無い**状態だった（2026-09-07）。
 */
@media (max-width: 1279px) {
  body { padding-bottom: var(--tw8f-bar-h); }

  /* ランチャーはバーの中のボタンが兼ねる。2つ出さない */
  .tw8c-launcher { display: none !important; }

  /* パネルはバーの上から生やす */
  .tw8c-panel { bottom: calc(var(--tw8f-bar-h) + 0.75rem + env(safe-area-inset-bottom)) !important; }

  /* ページトップはバーの上。3.5rem はバー内ボタン(3rem)＋余白 */
  #page-top-btn {
    bottom: calc(var(--tw8f-bar-h) + 0.75rem + 3.5rem + env(safe-area-inset-bottom)) !important;
    right: 0.75rem !important;
  }
}

/* ヘッダーにCTAが出る幅（1280px以上）ではバーを出さない。
   右下はチャットとページトップだけに戻る */
@media (min-width: 1280px) {
  .tw8f-bar { display: none; }
}

/* ============================================================
   6. 動きを減らす設定
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  /* デモは動かさず、最後まで進んだ状態で見せる（front-top.js が .is-on を全部付ける） */
  .tw8f-stage [data-tw8f-node],
  .tw8f-field,
  .tw8f-field [data-tw8f-field-value],
  .tw8f-flow__dot { transition: none !important; }
  .tw8f-bar { transition: none !important; transform: none; }
}