/* =========================================================
   社外CMOサービス — FLOW LAYER (v4)
   斜めの背景でセクションを連動させ、背景にあしらいを加える
   loaded last — overrides earlier section backgrounds
   ========================================================= */

:root {
  --skew: 0deg;        /* 境界を水平に */
  --bleed: 0px;        /* 食み出しなし */
  --font-deco: "Cormorant Garamond", "Noto Serif JP", "Times New Roman", serif;
}

/* 横スクロール防止（大きな背景ワードのため）。sticky は維持される */
html { overflow-x: clip; }

/* ---------------------------------------------------------
   1. 斜めの背景バンド — 各セクションが自前の色帯（.sect-band）を持ち、
      上辺の斜めエッジが前のセクションに重なって境界をつくる
   --------------------------------------------------------- */
.section {
  position: relative;
  background: transparent;          /* flat fill は帯に置き換え */
  isolation: isolate;
}

.sect-band {
  position: absolute;
  left: 0; right: 0;
  top: calc(var(--bleed) * -1);
  bottom: calc(var(--bleed) * -1);
  z-index: 0;
  background: var(--band, #ffffff);
  transform: skewY(var(--skew));
  transform-origin: center;
  pointer-events: none;
}

/* セクション本文は帯・ワードより前面へ */
.section > .wrap { position: relative; z-index: 1; }

/* --- 色／テクスチャの割り当て（custom prop は子の .sect-band が継承） --- */

/* 白セクション（デフォルト）: ごく薄いドット */
.section {
  --band:
    radial-gradient(rgba(20,34,63,.035) 1.1px, transparent 1.7px) 0 0 / 24px 24px,
    linear-gradient(#ffffff, #ffffff);
}

/* ソフトセクション: 少し濃いドット + ベース色 */
.section--soft {
  --band:
    radial-gradient(rgba(20,34,63,.05) 1.1px, transparent 1.7px) 0 0 / 24px 24px,
    linear-gradient(var(--bg-soft), var(--bg-soft));
}

/* ダーク: REASON */
.why {
  --band:
    repeating-linear-gradient(168deg, transparent 0 34px, rgba(255,255,255,.045) 34px 35px),
    radial-gradient(820px 520px at 18% 6%, rgba(86,150,235,.40), transparent 56%),
    radial-gradient(760px 520px at 92% 96%, rgba(60,120,220,.26), transparent 60%),
    linear-gradient(158deg, #123a86 0%, #0b2459 46%, #071a3a 100%);
}

/* ダーク: CONTACT */
.final {
  --band:
    repeating-linear-gradient(168deg, transparent 0 34px, rgba(255,255,255,.045) 34px 35px),
    radial-gradient(820px 520px at 82% 8%, rgba(86,150,235,.42), transparent 56%),
    radial-gradient(700px 480px at 12% 96%, rgba(50,110,210,.26), transparent 60%),
    linear-gradient(158deg, #123a86 0%, #0b2459 46%, #071a3a 100%);
}

/* MESSAGE: 明るいグラデ + ドット */
.message {
  --band:
    radial-gradient(rgba(20,34,63,.04) 1.1px, transparent 1.7px) 0 0 / 24px 24px,
    linear-gradient(180deg, #f5f8fc, #eef2f7);
}

/* ダークセクションは帯がはみ出せるよう overflow を解放 */
.why, .final { overflow: visible; }

/* ---------------------------------------------------------
   2. 背景のあしらい — 大きく薄い英字ウォーターマーク（細字セリフ）
   --------------------------------------------------------- */
.ghost-num { display: none !important; }   /* 旧・巨大数字は撤去 */

.sect-word {
  position: absolute;
  top: -0.12em;
  z-index: 0;
  font-family: var(--font-deco);
  font-weight: 300;
  font-style: normal;
  font-size: clamp(2.6rem, 8vw, 7.25rem);
  line-height: 0.8;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--deco-ink, #1b3a72);
  opacity: 0.12;
  transform: skewY(var(--skew));
  pointer-events: none;
  user-select: none;
}
.section[data-deco-pos="left"]  .sect-word { left:  -0.03em; }
.section[data-deco-pos="right"] .sect-word { right: -0.03em; }

/* ダーク背景では白で少しだけ強く */
.why, .final { --deco-ink: #ffffff; }
.why .sect-word, .final .sect-word { opacity: 0.14; }

/* ---------------------------------------------------------
   3. FV → 最初のセクションへの連動
      ソフト帯が FV 下部の濃紺CTAへ斜めに食い込むため
      CTA本文を帯から逃がす余白を確保
   --------------------------------------------------------- */
.fv__cta-inner { padding-bottom: clamp(44px, 5.5vw, 80px); }

/* ---------------------------------------------------------
   4. 長文中の重要フレーズ — ゴールドのマーカー下線
   --------------------------------------------------------- */
.mk {
  background: linear-gradient(transparent 58%, rgba(245,180,0,.42) 0);
  font-weight: 700;
  padding: 0 .05em;
  border-radius: 1px;
}

/* ---------------------------------------------------------
   5. セクションタイトル — 1文字ずつ登場
   --------------------------------------------------------- */
@keyframes chReveal {
  from { opacity: 0; transform: translateY(0.5em) rotate(4deg); filter: blur(5px); }
  to   { opacity: 1; transform: translateY(0)     rotate(0);   filter: blur(0); }
}
.shead__title .ch {
  display: inline-block;
  opacity: 0;
  will-change: opacity, transform, filter;
}
.shead__title.chars-in .ch {
  animation: chReveal .55s cubic-bezier(.22,.61,.36,1) both;
  animation-delay: var(--d, 0ms);
}
@media (prefers-reduced-motion: reduce) {
  .shead__title .ch { opacity: 1; }
  .shead__title.chars-in .ch { animation: none; }
}

/* ---------------------------------------------------------
   responsive — モバイルでは斜めを浅く、ワードを小さく
   --------------------------------------------------------- */
@media (max-width: 720px) {
  :root { --skew: 0deg; --bleed: 0px; }
  .sect-word { font-size: clamp(1.9rem, 11.5vw, 3.4rem); letter-spacing: 0.04em; }
}