@charset "UTF-8";
/* ==================================================================
 *  共通ベース（変数 / リセット / タイポ / ユーティリティ）
 *  全ページで最初に読み込み
 * ================================================================== */
:root {
  --ink:   #101012;
  --ink2:  #1b1b1e;
  --ink3:  #26262a;
  --ink4:  #33333a;
  --paper: #f4f4f2;
  --gray:  #8a8a8e;
  --gray-l:#c9c9cc;
  --line:  rgba(255,255,255,.12);
  --line-d:rgba(16,16,18,.12);
  --serif: 'Noto Serif JP', serif;
  --sans:  'Noto Sans JP', sans-serif;
  --en:    'Jost', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  color: #1e1e21;
  font-weight: 400;
  line-height: 1.85;
  letter-spacing: .05em;
  background: #fff;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* スクロールフェードイン */
.fade-in { opacity: 0; transform: translateY(30px); transition: opacity 1s ease, transform 1s cubic-bezier(.22,.9,.3,1); }
.fade-in.scroll-in { opacity: 1; transform: none; }

/* 汎用アニメーション（ローディング文字・FVサブコピー等で使用） */
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* 下層セクション見出し（共通） */
.lower_headline { font-family: var(--serif); font-size: clamp(20px,2.4vw,28px); font-weight: 700; color: var(--ink); letter-spacing: .1em; text-align: center; margin-bottom: 8px; }
.lower_headline + .en-sub { display: block; text-align: center; font-family: var(--en); font-size: 12px; letter-spacing: .3em; color: #999; margin-bottom: 50px; }
/* 見出しの装飾：中央上に短いアクセント線（サイズに関係なく“見出し”と分かるように） */
.lower_headline::before { content: ''; display: block; width: 30px; height: 2px; background: var(--ink); margin: 0 auto 16px; }

/* ------------------------------------------------------------------
 *  跳ねる小キューブ（TOPのBusiness見出しと同じ演出。下層の見出しでも使用）
 *  keyframes は .biz-cubes（TOP・左寄せ）と .sec-cubes（下層・中央寄せ）で共有
 * ------------------------------------------------------------------ */
@keyframes cubeRoll { 0%,72%,100% { transform: translateY(0) rotate(0); } 36% { transform: translateY(-16px) rotate(180deg); } }

.sec-cubes { display: flex; justify-content: center; gap: 8px; margin-bottom: 20px; }
.sec-cubes span { width: 18px; height: 18px; border-radius: 4px; background: linear-gradient(145deg,#2c2c31,#18181b); border: 1px solid rgba(0,0,0,.08); animation: cubeRoll 4.6s infinite ease-in-out; }
.sec-cubes span:nth-child(1) { animation-delay: 0s; }
.sec-cubes span:nth-child(2) { animation-delay: .45s; background: linear-gradient(145deg,#f4f4f1,#d6d6d9); }
.sec-cubes span:nth-child(3) { animation-delay: .9s; }
.sec-cubes span:nth-child(4) { animation-delay: 1.35s; background: linear-gradient(145deg,#f4f4f1,#d6d6d9); }

/* 黒背景のセクション用（暗いキューブが背景に溶けないよう明度を上げる） */
.sec-cubes.on-dark span { background: linear-gradient(145deg,#3a3a41,#232327); border-color: rgba(255,255,255,.10); }
.sec-cubes.on-dark span:nth-child(2),
.sec-cubes.on-dark span:nth-child(4) { background: linear-gradient(145deg,#f4f4f1,#d6d6d9); }

/* キューブを置いた見出しはアクセント線を出さない（装飾の重複防止） */
.sec-cubes + .lower_headline::before { display: none; }

/* ------------------------------------------------------------------
 *  タイポ整列演出（バラバラ → スクロールで一斉に揃う）
 *  親に .typo-scatter、スクロールでJSが .aligned を付与（footer.php）
 *  文字分割は functions.php の rc_scatter_text()
 * ------------------------------------------------------------------ */
.typo-scatter .brk { display: block; height: 0; }
.typo-scatter .tw {
  display: inline-block;
  opacity: 0;
  transform: translate(var(--dx,0), var(--dy,0)) rotate(var(--dr,0)) scale(.6);
  /* ゆっくり集まる（速い印象を抑える） */
  transition: opacity 1.6s ease, transform 2.2s cubic-bezier(.22,.7,.24,1);
}
.typo-scatter.aligned .tw { opacity: 1; transform: translate(0,0) rotate(0) scale(1); }

/* JS無効・非対応環境では最初から表示（見出しが消えないための保険） */
.no-js .typo-scatter .tw { opacity: 1; transform: none; }