/* ================================================================
   FUKUGYOU LP — OLIVE DARK EDITION
   副業診断誘導LP 専用スタイルシート
   Turning Point Today / 稼ぐ〇〇日記
   
   フォント   : M PLUS Rounded 1c（まるごシック）
   基調カラー : 高級感のあるオリーブ系グラデーショングリーン
   対応端末   : PC / タブレット / スマートフォン（完全レスポンシブ）
================================================================ */

/* ----------------------------------------------------------------
   0. CSS RESET & CUSTOM PROPERTIES
---------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  /* ─── Backgrounds ─── */
  --flp-bg:   #060E07;
  --flp-bg2:  #0B180C;
  --flp-bg3:  #0F1D10;
  --flp-bg4:  #081209;

  /* ─── Olive accent palette ─── */
  --flp-olive:      #7A9E4B;
  --flp-olive-lt:   #A8C96B;
  --flp-olive-dim:  #4A6430;
  --flp-olive-glow: rgba(122, 158, 75, 0.22);

  /* ─── Text ─── */
  --flp-white:  #F0EDE6;
  --flp-white2: #B4BBA8;
  --flp-white3: #6B756A;
  --flp-white4: #232B24;

  /* ─── Lines / borders ─── */
  --flp-line:        rgba(122, 158, 75, 0.20);
  --flp-line-strong: rgba(122, 158, 75, 0.50);

  /* ─── Status ─── */
  --flp-yes:    #52D68A;
  --flp-danger: #E8726A;

  /* ─── Typography ─── */
  --flp-marugo: 'M PLUS Rounded 1c', 'Zen Maru Gothic', 'Noto Sans JP', 'ヒラギノ丸ゴ ProN', sans-serif;
  --flp-serif:  'Noto Serif JP', 'Yu Mincho', 'YuMincho', serif;
  --flp-en:     'EB Garamond', Georgia, serif;

  /* ─── Spacing ─── */
  --flp-section-py: 7rem;
  --flp-inner-max:  900px;
  --flp-inner-sm:   680px;
  --flp-inner-lg:   1100px;
}

/* ----------------------------------------------------------------
   1. BASE
---------------------------------------------------------------- */
html { scroll-behavior: smooth; }

body.fukugyou-lp-body {
  background: var(--flp-bg);
  color: var(--flp-white);
  font-family: var(--flp-marugo);
  font-weight: 400;
  line-height: 1.85;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Cocoon/WordPress 汎用スタイル上書き（独自テンプレート保護） */
body.fukugyou-lp-body #header,
body.fukugyou-lp-body #main,
body.fukugyou-lp-body .site-header,
body.fukugyou-lp-body .cocoon-wrapper {
  display: none !important;
}

/* テキスト選択 */
::selection {
  background: rgba(122, 158, 75, 0.30);
  color: var(--flp-white);
}

img { max-width: 100%; display: block; }
a   { color: inherit; text-decoration: none; }

/* grain noise texture */
body.fukugyou-lp-body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity: .022;
  pointer-events: none;
  z-index: 9999;
}

/* アドミンバー対応 */
body.admin-bar .flp-nav { top: 32px; }

/* ----------------------------------------------------------------
   2. LAYOUT HELPERS
---------------------------------------------------------------- */
.flp-inner {
  max-width: var(--flp-inner-max);
  margin: 0 auto;
  padding: 0 2rem;
}
.flp-inner-sm {
  max-width: var(--flp-inner-sm);
  margin: 0 auto;
  padding: 0 2rem;
}
.flp-inner-lg {
  max-width: var(--flp-inner-lg);
  margin: 0 auto;
  padding: 0 2rem;
}

/* ----------------------------------------------------------------
   3. NAV
---------------------------------------------------------------- */
.flp-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  padding: .9rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  transition: background .4s ease, backdrop-filter .4s ease, border-color .4s;
  border-bottom: 1px solid transparent;
}

.flp-nav.scrolled {
  background: rgba(6, 14, 7, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--flp-line);
}

.flp-nav-logo {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  line-height: 1.2;
}
.flp-nav-logo-en {
  font-family: var(--flp-en);
  font-size: .82rem;
  letter-spacing: .20em;
  color: var(--flp-olive-lt);
  text-transform: uppercase;
}
.flp-nav-logo-ja {
  font-size: .7rem;
  color: var(--flp-white3);
  letter-spacing: .08em;
}

.flp-nav-cta {
  background: var(--flp-olive);
  color: var(--flp-bg);
  font-size: .78rem;
  font-weight: 700;
  padding: .5em 1.4em;
  border-radius: 2em;
  letter-spacing: .08em;
  transition: all .25s;
  white-space: nowrap;
  flex-shrink: 0;
}
.flp-nav-cta:hover {
  background: var(--flp-olive-lt);
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(122,158,75,.35);
}

/* ----------------------------------------------------------------
   4. HERO
---------------------------------------------------------------- */
.flp-hero {
  min-height: 100svh;
  min-height: 100vh; /* fallback */
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 8rem 2rem 10rem;
  overflow: hidden;
}

/* 背景画像 */
.flp-hero-bg {
  position: absolute;
  inset: 0;
  background:
    url('https://www.turning-point.today/wp-content/uploads/2026/04/fukugyou_lp_hero_image.webp')
    center center / cover no-repeat;
  background-attachment: fixed;
  z-index: 0;
  transform-origin: center;
  transition: transform 0.1s ease-out;
}

/* グラデーションオーバーレイ（オリーブ系） */
.flp-hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      160deg,
      rgba(6,14,7, 0.88) 0%,
      rgba(10,18,9, 0.70) 45%,
      rgba(15,28,16, 0.82) 100%
    );
  z-index: 1;
}
.flp-hero-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(6,14,7,0.95) 0%,
    rgba(6,14,7,0.0) 50%
  );
}

/* グリッドライン装飾 */
.flp-hero-grid {
  position: absolute;
  inset: 0;
  z-index: 2;
  background-image:
    linear-gradient(var(--flp-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--flp-line) 1px, transparent 1px);
  background-size: 80px 80px;
  opacity: .35;
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.5) 40%, rgba(0,0,0,.1) 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.5) 40%, rgba(0,0,0,.1) 100%);
}

.flp-hero-content {
  position: relative;
  z-index: 3;
  max-width: var(--flp-inner-max);
  margin: 0 auto;
  width: 100%;
}

/* eyebrow */
.flp-hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2.5rem;
  opacity: 0;
  transform: translateY(12px);
  animation: flp-up .8s .2s both;
}
.flp-hero-line {
  height: 1px;
  width: 40px;
  background: var(--flp-olive);
  flex-shrink: 0;
}
.flp-hero-eye-text {
  font-size: .72rem;
  letter-spacing: .25em;
  color: var(--flp-olive-lt);
  text-transform: uppercase;
  font-weight: 500;
}

/* H1 */
.flp-hero-h1 {
  font-family: var(--flp-serif);
  font-size: clamp(2rem, 5.5vw, 4.2rem);
  font-weight: 300;
  line-height: 1.35;
  color: var(--flp-white);
  margin-bottom: 1.8rem;
}
.flp-h1-row {
  display: block;
  opacity: 0;
  transform: translateY(18px);
}
.flp-h1-row.r1 { animation: flp-up .8s .4s  both; }
.flp-h1-row.r2 { animation: flp-up .8s .55s both; }
.flp-h1-row.r3 { animation: flp-up .8s .70s both; color: var(--flp-olive-lt); }
.flp-h1-row.r4 { animation: flp-up .8s .85s both; }

/* sub copy */
.flp-hero-sub {
  font-size: clamp(.88rem, 1.8vw, 1.05rem);
  color: var(--flp-white2);
  line-height: 2.0;
  max-width: 560px;
  margin-bottom: 3rem;
  opacity: 0;
  animation: flp-up .8s 1.0s both;
}

/* CTA wrap */
.flp-hero-cta-wrap {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  opacity: 0;
  animation: flp-up .8s 1.15s both;
}
.flp-hero-btn {
  display: inline-block;
  background: linear-gradient(135deg, var(--flp-olive), var(--flp-olive-lt));
  color: var(--flp-bg);
  font-weight: 700;
  font-size: 1rem;
  padding: 1.05rem 2.8rem;
  border-radius: 2em;
  letter-spacing: .06em;
  transition: all .3s;
  box-shadow: 0 0 40px rgba(122,158,75,.22);
}
.flp-hero-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 40px rgba(122,158,75,.40);
}
.flp-hero-note {
  font-size: .78rem;
  color: var(--flp-white3);
}

/* スクロールインジケーター */
.flp-hero-scroll {
  position: absolute;
  bottom: 2.8rem;       /* ← CTAエリアからの分離を確保 */
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .45rem;
  opacity: 0;
  animation: flp-up .6s 1.8s both;
  background: none;
  border: none;
  cursor: pointer;
  padding: .75rem 1.2rem; /* ← タップ領域を広げてモバイルUX向上 */
  transition: opacity .3s, transform .3s;
  /* セパレーター：CTAとの視覚的分離のための微細グラデーション境界 */
  border-top: 1px solid transparent;
}
.flp-hero-scroll:hover {
  opacity: .8;
  transform: translateX(-50%) translateY(-3px); /* ← ホバー時の浮き上がり演出 */
}
/* タッチデバイスでのタップ演出 */
.flp-hero-scroll:active {
  transform: translateX(-50%) translateY(1px);
}

.flp-scroll-text {
  font-size: .58rem;
  letter-spacing: .28em;
  color: var(--flp-white3);
  text-transform: uppercase;
  font-family: var(--flp-en); /* ← EB Garamondで欧文テイストを強調 */
}
.flp-scroll-line {
  display: block;
  width: 1px;
  height: 40px; /* ← 36px→40px：存在感を少し強化 */
  background: linear-gradient(to bottom, var(--flp-olive), transparent);
  animation: flp-scroll-pulse 2s infinite ease-in-out;
}
.flp-scroll-arrow {
  font-size: .78rem;
  color: var(--flp-olive-lt); /* ← より視認性の高いライトオリーブに変更 */
  animation: flp-bounce 2s infinite;
}

/* ----------------------------------------------------------------
   5. SECTION LABEL (共通)
---------------------------------------------------------------- */
.flp-sec-label {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1.5rem;
}
.flp-sec-num {
  font-family: var(--flp-en);
  font-size: .75rem;
  color: var(--flp-olive-dim);
  letter-spacing: .12em;
}
.flp-sec-bar {
  height: 1px;
  width: 32px;
  background: var(--flp-line-strong);
  flex-shrink: 0;
}
.flp-sec-tag {
  font-size: .68rem;
  letter-spacing: .22em;
  color: var(--flp-olive-lt);
  text-transform: uppercase;
  font-weight: 500;
}

/* ----------------------------------------------------------------
   6. SECTION: TRUTH (01)
---------------------------------------------------------------- */
.flp-sec-truth {
  padding: var(--flp-section-py) 0;
}

.flp-truth-intro {
  font-family: var(--flp-serif);
  font-size: clamp(1.25rem, 3vw, 2rem);
  font-weight: 300;
  line-height: 1.65;
  color: var(--flp-white);
  margin-bottom: 3rem;
}
.flp-truth-intro em {
  font-style: normal;
  color: var(--flp-olive-lt);
}

.flp-truth-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1px;
  background: var(--flp-line);
  border: 1px solid var(--flp-line);
  margin-bottom: 3rem;
}
.flp-truth-card {
  background: var(--flp-bg2);
  padding: 2rem 1.8rem;
  transition: background .3s;
}
.flp-truth-card:hover { background: var(--flp-bg3); }

.flp-tc-num {
  font-family: var(--flp-en);
  font-size: 2.8rem;
  color: var(--flp-line-strong);
  line-height: 1;
  margin-bottom: .8rem;
  font-weight: 400;
}
.flp-tc-head {
  font-size: .95rem;
  font-weight: 700;
  color: var(--flp-white);
  margin-bottom: .6rem;
  line-height: 1.5;
}
.flp-tc-body {
  font-size: .85rem;
  color: var(--flp-white2);
  line-height: 1.9;
}

/* ----------------------------------------------------------------
   7. PULL QUOTE
   ── 淡いオレンジ×薄ピンク系ウォームトーン（軽量版）──
---------------------------------------------------------------- */
.flp-pull-section {
  padding: 6rem 0;
  position: relative;
  /* ベースは元のダーク基調を維持しつつ、薄い暖色グラデーションを重ねる */
  background:
    linear-gradient(
      160deg,
      rgba(240, 150, 110, 0.08) 0%,
      rgba(230, 130,  95, 0.05) 50%,
      rgba(240, 150, 110, 0.07) 100%
    ),
    var(--flp-bg2);               /* ← 元のダーク基調（#0B180C）に戻す */
  border-top:    1px solid rgba(220, 115, 80, 0.18);
  border-bottom: 1px solid rgba(220, 115, 80, 0.18);
}

/* ★ 最重要：Cocoonが blockquote / .flp-inner-sm に注入する
       白背景を根本から透明化する                              */
.flp-pull-section .flp-inner-sm,
.flp-pull-section blockquote,
.flp-pull-section .flp-pull-quote,
.flp-pull-section p {
  background:       transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;    /* Cocoon blockquote の影も除去 */
  border:     none !important;    /* Cocoon blockquote の枠線も除去 */
  padding-left: 0  !important;    /* Cocoon blockquote の左余白リセット */
}

.flp-pull-quote {
  font-family: var(--flp-serif);
  font-size: clamp(1.55rem, 4.2vw, 3rem);
  font-weight: 200;
  line-height: 1.45;
  color: var(--flp-white);
  text-align: center;
  position: relative;
  padding: 0 1rem;
  quotes: none;
}

/* 上部装飾ライン：暖色系 */
.flp-pull-quote::before {
  content: '';
  display: block;
  width: 40px;
  height: 1px;
  background: rgba(220, 112, 82, 0.55);
  margin: 0 auto 2rem;
}

/* 下部装飾ライン：暖色系 */
.flp-pull-quote::after {
  content: '';
  display: block;
  width: 40px;
  height: 1px;
  background: rgba(220, 112, 82, 0.55);
  margin: 2rem auto 0;
}

/* 強調テキスト：テラコッタオレンジ */
.flp-pull-quote em {
  font-style: normal;
  color: #F0956B;
}

.flp-pull-attr {
  text-align: center;
  font-size: .78rem;
  color: var(--flp-white3);
  margin-top: 1.5rem;
  letter-spacing: .1em;
}

/* ----------------------------------------------------------------
   8. SECTION: MARKET (02)
---------------------------------------------------------------- */
.flp-sec-market { padding: var(--flp-section-py) 0; }

.flp-market-head {
  font-family: var(--flp-serif);
  font-size: clamp(1.3rem, 3vw, 2rem);
  font-weight: 300;
  line-height: 1.6;
  margin-bottom: 1rem;
}
.flp-market-sub {
  font-size: .95rem;
  color: var(--flp-white2);
  line-height: 1.9;
  margin-bottom: 4rem;
  max-width: 600px;
}

/* Shift grid */
.flp-shift-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border: 1px solid var(--flp-line);
}
.flp-shift-row {
  display: grid;
  grid-template-columns: 1fr 60px 1fr;
  align-items: stretch;
  border-bottom: 1px solid var(--flp-line);
}
.flp-shift-row:last-child { border-bottom: none; }

.flp-shift-cell {
  padding: 1.4rem 1.6rem;
  font-size: .88rem;
  line-height: 1.7;
}
.flp-shift-cell.flp-old {
  color: var(--flp-white3);
  background: var(--flp-bg);
}
.flp-shift-cell.flp-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--flp-olive);
  font-size: 1.2rem;
  background: rgba(122,158,75,.04);
  border-left:  1px solid var(--flp-line);
  border-right: 1px solid var(--flp-line);
}
.flp-shift-cell.flp-new {
  color: var(--flp-white);
  background: var(--flp-bg3);
}
.flp-cell-label {
  font-size: .65rem;
  letter-spacing: .15em;
  color: var(--flp-white3);
  text-transform: uppercase;
  margin-bottom: .3rem;
  display: block;
}
.flp-shift-cell.flp-new .flp-cell-label { color: var(--flp-olive-lt); }
.flp-cell-text { font-weight: 500; display: block; }

/* Stats */
.flp-stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1px;
  background: var(--flp-line);
  border: 1px solid var(--flp-line);
  margin-top: 3rem;
}
.flp-stat-block {
  background: var(--flp-bg2);
  padding: 2rem 1.5rem;
  text-align: center;
}
.flp-stat-num {
  font-family: var(--flp-en);
  font-size: 3rem;
  color: var(--flp-olive-lt);
  line-height: 1;
  font-weight: 400;
  margin-bottom: .4rem;
}
.flp-stat-num span         { font-size: 1.5rem; }
.flp-stat-num .flp-stat-frac  { font-size: 1.5rem; }
.flp-stat-num .flp-stat-unit  { font-family: var(--flp-marugo); font-size: 1.5rem; }
.flp-stat-label {
  font-size: .82rem;
  color: var(--flp-white2);
  line-height: 1.6;
}

/* ----------------------------------------------------------------
   9. SECTION: PARADIGM (03)
---------------------------------------------------------------- */
.flp-sec-paradigm {
  padding: var(--flp-section-py) 0;
  background: var(--flp-bg2);
}
.flp-paradigm-giant {
  font-family: var(--flp-serif);
  font-size: clamp(3rem, 10vw, 8rem);
  font-weight: 200;
  line-height: 1;
  color: var(--flp-white4);
  letter-spacing: -.02em;
  text-align: center;
  margin-bottom: 4rem;
  overflow: hidden;
  background: linear-gradient(135deg, var(--flp-white4), var(--flp-olive-dim));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.flp-paradigm-table {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--flp-line);
}
.flp-pt-head {
  background: var(--flp-bg3);
  padding: 1rem 1.5rem;
  font-size: .72rem;
  letter-spacing: .15em;
  color: var(--flp-white3);
  text-transform: uppercase;
  font-weight: 500;
  border-bottom: 1px solid var(--flp-line);
}
.flp-pt-head.flp-pt-gold { color: var(--flp-olive-lt); }
.flp-pt-cell {
  padding: 1rem 1.5rem;
  font-size: .88rem;
  line-height: 1.7;
  border-bottom: 1px solid var(--flp-line);
  border-right: 1px solid var(--flp-line);
}
.flp-pt-cell:nth-child(even) { border-right: none; }
.flp-pt-cell:nth-last-child(-n+2) { border-bottom: none; }
.flp-pt-cell.flp-pt-old {
  color: var(--flp-white3);
  background: var(--flp-bg);
  text-decoration: line-through;
  text-decoration-color: rgba(232,114,106,.45);
}
.flp-pt-cell.flp-pt-new {
  color: var(--flp-white);
  background: var(--flp-bg3);
}

/* gold divider */
.flp-divider-olive {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--flp-olive), transparent);
}

/* ----------------------------------------------------------------
   10. SECTION: WHAT IS (04)
---------------------------------------------------------------- */
.flp-sec-whatis { padding: var(--flp-section-py) 0; }

.flp-whatis-flex {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: start;
  margin-top: 2rem;
}
.flp-wi-head {
  font-family: var(--flp-serif);
  font-size: clamp(1.3rem, 3vw, 2.2rem);
  font-weight: 300;
  line-height: 1.5;
  margin-bottom: 1.5rem;
}
.flp-wi-head em { font-style: normal; color: var(--flp-olive-lt); }

.flp-wi-body {
  font-size: .9rem;
  color: var(--flp-white2);
  line-height: 1.95;
  margin-bottom: 1rem;
}
.flp-wi-body:last-of-type { margin-bottom: 0; }

/* visual box */
.flp-wi-visual {
  background: var(--flp-bg2);
  border: 1px solid var(--flp-line);
  border-radius: 4px;
  padding: 2rem;
  position: relative;
  overflow: hidden;
}
.flp-wi-visual::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--flp-olive-dim), var(--flp-olive-lt), var(--flp-olive-dim));
}
.flp-wi-vis-title {
  font-size: .7rem;
  letter-spacing: .18em;
  color: var(--flp-olive-lt);
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  font-weight: 500;
}

.flp-wi-steps {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--flp-line);
}
.flp-wi-step {
  background: var(--flp-bg3);
  padding: 1rem 1.2rem;
  display: flex;
  gap: .9rem;
  align-items: flex-start;
  transition: background .25s;
}
.flp-wi-step:hover { background: var(--flp-bg4); }

.flp-wi-step-n {
  font-family: var(--flp-en);
  font-size: 1.1rem;
  color: var(--flp-olive);
  line-height: 1;
  flex-shrink: 0;
  padding-top: .1rem;
}
.flp-wi-step-t {
  font-size: .82rem;
  font-weight: 700;
  color: var(--flp-white);
  margin-bottom: .25rem;
}
.flp-wi-step-b {
  font-size: .78rem;
  color: var(--flp-white3);
  line-height: 1.65;
}

/* ----------------------------------------------------------------
   11. SECTION: 5 TYPES (05)
---------------------------------------------------------------- */
.flp-sec-types {
  padding: var(--flp-section-py) 0;
  background: var(--flp-bg4);
}
.flp-types-head {
  font-family: var(--flp-serif);
  font-size: clamp(1.3rem, 3vw, 2rem);
  font-weight: 300;
  line-height: 1.6;
  margin-bottom: .8rem;
}
.flp-types-sub {
  font-size: .9rem;
  color: var(--flp-white2);
  line-height: 1.9;
  max-width: 580px;
  margin-bottom: 3.5rem;
}
.flp-types-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1px;
  background: var(--flp-line);
  border: 1px solid var(--flp-line);
}
.flp-type-card {
  background: var(--flp-bg2);
  padding: 2rem 1.8rem;
  position: relative;
  overflow: hidden;
  cursor: default;
  transition: background .3s;
}
.flp-type-card:hover { background: var(--flp-bg3); }
.flp-type-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px;
  height: 100%;
  background: var(--tc, var(--flp-olive));
}
.flp-type-card-num {
  font-family: var(--flp-en);
  font-size: .72rem;
  color: var(--flp-white3);
  letter-spacing: .12em;
  margin-bottom: .8rem;
}
.flp-type-card-name {
  font-size: .88rem;
  font-weight: 700;
  color: var(--flp-white);
  line-height: 1.5;
  margin-bottom: .6rem;
}
.flp-type-card-tag {
  display: inline-block;
  font-size: .68rem;
  letter-spacing: .08em;
  padding: .2em .9em;
  border-radius: 1em;
  margin-bottom: .8rem;
  font-weight: 500;
}
.flp-type-card-desc {
  font-size: .8rem;
  color: var(--flp-white2);
  line-height: 1.8;
}
.flp-type-card-lock {
  position: absolute;
  bottom: 1.2rem;
  right: 1.5rem;
  font-size: .68rem;
  color: var(--flp-white4);
  letter-spacing: .08em;
}

/* ----------------------------------------------------------------
   12. SECTION: SCIENCE (06)
---------------------------------------------------------------- */
.flp-sec-science { padding: var(--flp-section-py) 0; }

.flp-sci-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2rem;
  margin-top: 3rem;
}
.flp-sci-card {
  border-top: 1px solid var(--flp-olive);
  padding-top: 1.5rem;
  position: relative;
}
.flp-sci-card::before {
  content: '';
  position: absolute;
  top: -1px; left: 0;
  width: 30px;
  height: 2px;
  background: var(--flp-olive-lt);
}
.flp-sci-card-head {
  font-size: .8rem;
  font-weight: 700;
  color: var(--flp-olive-lt);
  letter-spacing: .05em;
  margin-bottom: .8rem;
  text-transform: uppercase;
}
.flp-sci-card-body {
  font-size: .87rem;
  color: var(--flp-white2);
  line-height: 1.9;
}
.flp-sci-card-src {
  font-size: .72rem;
  color: var(--flp-white3);
  margin-top: .7rem;
  font-style: italic;
}

/* ----------------------------------------------------------------
   13. SECTION: FOR / NOT FOR (07)
---------------------------------------------------------------- */
.flp-sec-for {
  padding: 6rem 0;
  background: var(--flp-bg2);
}
.flp-for-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--flp-line);
  border: 1px solid var(--flp-line);
  margin-top: 2.5rem;
}
.flp-for-col { padding: 2rem 1.8rem; }
.flp-for-col.flp-for-yes { background: var(--flp-bg3); }
.flp-for-col.flp-for-no  { background: var(--flp-bg); }

.flp-for-col-head {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: 1.2rem;
}
.flp-for-icon {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .7rem;
  font-weight: 700;
  flex-shrink: 0;
}
.flp-for-icon.flp-for-y {
  background: rgba(82,214,138,.15);
  color: var(--flp-yes);
}
.flp-for-icon.flp-for-n {
  background: rgba(232,114,106,.12);
  color: var(--flp-danger);
}
.flp-for-col-label {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.flp-for-col-label.flp-for-y { color: var(--flp-yes); }
.flp-for-col-label.flp-for-n { color: var(--flp-danger); }

.flp-for-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .7rem;
}
.flp-for-list li {
  font-size: .87rem;
  color: var(--flp-white2);
  line-height: 1.65;
  padding-left: 1.2rem;
  position: relative;
}
.flp-for-list li::before {
  content: '';
  position: absolute;
  left: 0; top: .65em;
  width: 5px; height: 5px;
  border-radius: 50%;
}
.flp-for-list.flp-for-y li::before { background: var(--flp-yes); }
.flp-for-list.flp-for-n li::before { background: var(--flp-danger); opacity: .55; }

.flp-for-note {
  font-size: .8rem;
  color: var(--flp-white3);
  margin-top: 1.5rem;
  line-height: 1.75;
}

/* ================================================================
   14. FINAL CTA — FULL VISUAL EDITION
   背景画像 + 多層オーバーレイ + コーナーフレーム + パルスCTA
================================================================ */

/* ── セクション本体 ── */
.flp-sec-cta {
  position: relative;
  min-height: 100svh;
  min-height: 100vh;           /* fallback */
  display: flex;
  align-items: center;
  text-align: center;
  overflow: hidden;
  padding: 0;
}

/* ── 背景画像 ── */
.flp-cta-bg-img {
  position: absolute;
  inset: 0;
  background:
    url('https://www.turning-point.today/wp-content/uploads/2026/04/fukugyou_lp_cta.webp')
    center center / cover no-repeat;
  background-attachment: fixed;
  z-index: 0;
  transform-origin: center;
}

/* ── 多層グラデーションオーバーレイ ── */
.flp-cta-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* 上下に深い暗化 + 中央は画像を活かす */
  background:
    linear-gradient(
      to bottom,
      rgba(6, 14, 7, 0.92)  0%,
      rgba(6, 14, 7, 0.55) 25%,
      rgba(6, 14, 7, 0.48) 50%,
      rgba(6, 14, 7, 0.62) 75%,
      rgba(6, 14, 7, 0.96) 100%
    );
}
/* オリーブグロー：ブランドカラーで画像を染める */
.flp-cta-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 80% 60% at 50% 50%,
    rgba(122, 158, 75, 0.10) 0%,
    transparent 75%
  );
}
/* 左右暗化：コンテンツの視認性を高める */
.flp-cta-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to right,
      rgba(6,14,7, 0.45) 0%,
      transparent 30%,
      transparent 70%,
      rgba(6,14,7, 0.45) 100%
    );
}

/* ── フローティングオーブ（環境光演出） ── */
.flp-cta-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
}
.flp-cta-orb-1 {
  width: 500px;
  height: 500px;
  top: -10%;
  right: -8%;
  background: radial-gradient(
    circle,
    rgba(122, 158, 75, 0.14) 0%,
    transparent 70%
  );
  animation: flp-orb-float 14s ease-in-out infinite alternate;
}
.flp-cta-orb-2 {
  width: 380px;
  height: 380px;
  bottom: 0%;
  left: -6%;
  background: radial-gradient(
    circle,
    rgba(240, 149, 107, 0.09) 0%,
    transparent 70%
  );
  animation: flp-orb-float 18s ease-in-out infinite alternate-reverse;
}

/* ── コーナーフレーム装飾 ── */
.flp-cta-frame {
  position: absolute;
  inset: 3.5rem 3.5rem;
  pointer-events: none;
  z-index: 3;
}
.flp-cta-frame-tl,
.flp-cta-frame-tr,
.flp-cta-frame-bl,
.flp-cta-frame-br {
  position: absolute;
  width: 48px;
  height: 48px;
  border-color: rgba(122, 158, 75, 0.35);
  border-style: solid;
}
.flp-cta-frame-tl { top: 0; left: 0;  border-width: 1px 0 0 1px; }
.flp-cta-frame-tr { top: 0; right: 0; border-width: 1px 1px 0 0; }
.flp-cta-frame-bl { bottom: 0; left: 0;  border-width: 0 0 1px 1px; }
.flp-cta-frame-br { bottom: 0; right: 0; border-width: 0 1px 1px 0; }

/* ── ウォーターマーク背景テキスト ── */
.flp-cta-bg-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--flp-en);
  font-size: 22vw;
  font-weight: 400;
  color: rgba(122, 158, 75, 0.035);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  overflow: hidden;
  z-index: 2;
  letter-spacing: -.02em;
}

/* ── メインコンテンツラッパー ── */
.flp-cta-inner {
  position: relative;
  z-index: 4;
  width: 100%;
  padding: 9rem 2rem 8rem;
}

/* ── 上部縦区切りライン ── */
.flp-cta-vline {
  width: 1px;
  height: 64px;
  margin: 0 auto 3.5rem;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(122, 158, 75, 0.60) 50%,
    transparent 100%
  );
}

/* ── Preテキスト ── */
.flp-cta-pre {
  font-size: .72rem;
  letter-spacing: .32em;
  color: var(--flp-olive-lt);
  text-transform: uppercase;
  font-family: var(--flp-en);
  margin-bottom: 2.2rem;
  opacity: .85;
}

/* ── H2 ── */
.flp-cta-h2 {
  font-family: var(--flp-serif);
  font-size: clamp(1.65rem, 4.2vw, 3.0rem);
  font-weight: 300;
  line-height: 1.55;
  color: var(--flp-white);
  margin-bottom: 0;
  text-shadow: 0 2px 40px rgba(0,0,0, 0.55);
}
.flp-cta-h2 em {
  font-style: normal;
  color: var(--flp-olive-lt);
  position: relative;
}
/* emにアンダーラインアクセント */
.flp-cta-h2 em::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 0; right: 0;
  height: 1px;
  background: rgba(168, 201, 107, 0.45);
}

/* ── 水平区切り装飾 ── */
.flp-cta-hline {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  max-width: 280px;
  margin: 3rem auto;
}
.flp-cta-hline::before,
.flp-cta-hline::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--flp-line-strong);
}
.flp-cta-hline::after {
  background: linear-gradient(
    to right,
    var(--flp-line-strong),
    transparent
  );
}
.flp-cta-hline::before {
  background: linear-gradient(
    to left,
    var(--flp-line-strong),
    transparent
  );
}

/* ── ボディテキスト ── */
.flp-cta-body {
  font-size: .97rem;
  color: rgba(180, 187, 168, 0.88);
  line-height: 2.1;
  max-width: 520px;
  margin: 0 auto 3.8rem;
  text-shadow: 0 1px 20px rgba(0,0,0, 0.50);
}

/* ── ボタンラッパー ── */
.flp-cta-btn-wrap {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

/* ── CTAボタン本体 ── */
.flp-cta-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .9rem;
  background: linear-gradient(
    135deg,
    var(--flp-olive)    0%,
    var(--flp-olive-lt) 60%,
    #C8E085            100%
  );
  color: var(--flp-bg);
  font-weight: 700;
  font-size: 1.08rem;
  padding: 1.3rem 4rem;
  border-radius: 3em;
  letter-spacing: .08em;
  transition: all .35s cubic-bezier(.22,1,.36,1);
  box-shadow:
    0 0  60px rgba(122,158,75, 0.30),
    0 0 120px rgba(122,158,75, 0.12),
    0 8px 40px rgba(0,0,0, 0.40);
  text-shadow: none;
}
/* パルスリング 1重目 */
.flp-cta-btn::before {
  content: '';
  position: absolute;
  inset: -7px;
  border-radius: 3em;
  border: 1px solid rgba(122,158,75, 0.50);
  animation: flp-ring-pulse 2.4s ease-out infinite;
}
/* パルスリング 2重目（遅延） */
.flp-cta-btn::after {
  content: '';
  position: absolute;
  inset: -14px;
  border-radius: 3em;
  border: 1px solid rgba(122,158,75, 0.25);
  animation: flp-ring-pulse 2.4s .75s ease-out infinite;
}
.flp-cta-btn:hover {
  transform: translateY(-5px) scale(1.03);
  box-shadow:
    0 0  90px rgba(122,158,75, 0.50),
    0 0 160px rgba(122,158,75, 0.18),
    0 16px 60px rgba(0,0,0, 0.45);
}
.flp-cta-btn:active {
  transform: translateY(-2px) scale(1.01);
}
.flp-cta-btn-text { position: relative; z-index: 1; }
.flp-cta-btn-arrow {
  position: relative;
  z-index: 1;
  font-size: 1.1em;
  transition: transform .3s;
}
.flp-cta-btn:hover .flp-cta-btn-arrow {
  transform: translateX(4px);
}

/* ── メタテキスト ── */
.flp-cta-meta {
  font-size: .75rem;
  color: rgba(107,117,106, 0.75);
  letter-spacing: .08em;
  line-height: 2;
}
.flp-cta-meta span {
  color: var(--flp-white2);
}

/* ── アニメーション追加 ── */
@keyframes flp-ring-pulse {
  0%   { opacity: .9; transform: scale(1); }
  100% { opacity: 0;  transform: scale(1.18); }
}
@keyframes flp-orb-float {
  0%   { transform: translate(0,  0px) scale(1.0); }
  100% { transform: translate(25px, -25px) scale(1.12); }
}

/* ================================================================
   14-R. FINAL CTA — レスポンシブ対応
================================================================ */

/* ── タブレット（max 900px） ── */
@media (max-width: 900px) {
  .flp-cta-frame {
    inset: 2.5rem 2rem;
  }
  .flp-cta-orb-1 { width: 380px; height: 380px; }
  .flp-cta-orb-2 { width: 280px; height: 280px; }
}

/* ── スマートフォン（max 768px） ── */
@media (max-width: 768px) {
  /* コーナーフレームはモバイルで非表示（狭すぎる） */
  .flp-cta-frame { display: none; }

  /* 背景はスマホで fixed を解除 */
  .flp-cta-bg-img {
    background-attachment: scroll;
    background-position: center top;
  }
  .flp-cta-inner {
    padding: 7rem 1.5rem 6.5rem;
  }
  .flp-cta-vline { height: 44px; margin-bottom: 2.5rem; }
  .flp-cta-h2 {
    font-size: clamp(1.5rem, 6vw, 2rem);
    line-height: 1.6;
  }
  .flp-cta-body {
    font-size: .92rem;
    line-height: 2.0;
    margin-bottom: 3rem;
    /* モバイルでは改行タグを無視してすっきり表示 */
  }
  .flp-cta-body br { display: none; }
  .flp-cta-btn-wrap { flex-direction: column; align-items: stretch; }
  .flp-cta-btn {
    padding: 1.15rem 2rem;
    font-size: 1rem;
    justify-content: center;
  }
  .flp-cta-orb-1 { width: 260px; height: 260px; top: -5%; right: -10%; }
  .flp-cta-orb-2 { width: 200px; height: 200px; bottom: 5%; left: -10%; }
  .flp-cta-bg-text { font-size: 30vw; }
}

/* ── 小型スマートフォン（max 390px） ── */
@media (max-width: 390px) {
  .flp-cta-inner { padding: 6rem 1.2rem 6rem; }
  .flp-cta-h2 { font-size: clamp(1.4rem, 7vw, 1.8rem); }
  .flp-cta-btn { font-size: .95rem; }
}

/* ----------------------------------------------------------------
   15. ANIMATIONS
---------------------------------------------------------------- */
@keyframes flp-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes flp-scroll-pulse {
  0%, 100% { opacity: 1;   transform: scaleY(1); }
  50%       { opacity: .4; transform: scaleY(.75); }
}
@keyframes flp-bounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(4px); }
}
@keyframes flp-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Scroll reveal */
.flp-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .75s cubic-bezier(.22,1,.36,1),
              transform .75s cubic-bezier(.22,1,.36,1);
}
.flp-reveal.flp-in {
  opacity: 1;
  transform: translateY(0);
}
.flp-reveal.flp-d1 { transition-delay: .10s; }
.flp-reveal.flp-d2 { transition-delay: .20s; }
.flp-reveal.flp-d3 { transition-delay: .30s; }
.flp-reveal.flp-d4 { transition-delay: .40s; }
.flp-reveal.flp-d5 { transition-delay: .50s; }

/* ----------------------------------------------------------------
   16. RESPONSIVE — タブレット (max 900px)
---------------------------------------------------------------- */
@media (max-width: 900px) {
  :root { --flp-section-py: 5.5rem; }

  /* タブレット：ヒーロー下部余白の最適化 */
  .flp-hero {
    padding-bottom: 9rem; /* ← スクロールインジケーターとCTAの重複を回避 */
  }

  .flp-whatis-flex {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .flp-types-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }
  .flp-for-grid {
    grid-template-columns: 1fr;
  }
}

/* ----------------------------------------------------------------
   17. RESPONSIVE — スマートフォン (max 768px)
---------------------------------------------------------------- */
@media (max-width: 768px) {
  :root { --flp-section-py: 4.5rem; }

  /* Nav */
  .flp-nav { padding: .75rem 1.2rem; }
  .flp-nav-logo-en { font-size: .72rem; letter-spacing: .12em; }
  .flp-nav-logo-ja { display: none; }
  .flp-nav-cta { font-size: .72rem; padding: .45em 1.1em; }

  /* Hero：スクロールインジケーター分の下部余白を確保 */
  .flp-hero {
    padding: 7rem 1.2rem 9rem; /* ← 4.5rem → 9rem：モバイルでの重複を完全解消 */
    justify-content: flex-end;
  }
  /* スマホ：スクロールインジケーターをコンパクト化 */
  .flp-hero-scroll {
    bottom: 2rem;
  }
  .flp-scroll-line {
    height: 28px; /* ← モバイルでやや短く調整 */
  }
  .flp-hero-bg {
    background-attachment: scroll;      /* モバイルはfixed無効 */
    background-position: center top;    /* 縦長クロップ */
    background-size: cover;
  }
  .flp-hero-h1 {
    font-size: clamp(1.65rem, 6.5vw, 2.5rem);
  }
  .flp-hero-sub {
    font-size: .88rem;
    line-height: 1.9;
  }
  .flp-hero-cta-wrap {
    flex-direction: column;
    align-items: stretch;
    gap: .9rem;
  }
  .flp-hero-btn {
    text-align: center;
    font-size: .95rem;
    padding: 1rem 1.5rem;
  }
  .flp-hero-note {
    text-align: center;
    font-size: .75rem;
  }

  /* Layout */
  .flp-inner, .flp-inner-sm, .flp-inner-lg {
    padding: 0 1.2rem;
  }

  /* Truth */
  .flp-truth-intro {
    font-size: clamp(1.1rem, 4.5vw, 1.5rem);
  }
  .flp-truth-cards {
    grid-template-columns: 1fr;
  }
  .flp-truth-card { padding: 1.5rem 1.2rem; }

  /* Pull quote */
  .flp-pull-section { padding: 4rem 0; }
  .flp-pull-quote {
    font-size: clamp(1.3rem, 5vw, 2rem);
  }

  /* Market */
  .flp-shift-row {
    grid-template-columns: 1fr 36px 1fr;
  }
  .flp-shift-cell { padding: 1rem .8rem; font-size: .82rem; }
  .flp-stat-row {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Paradigm */
  .flp-paradigm-table {
    grid-template-columns: 1fr;
  }
  .flp-pt-head:first-child,
  .flp-pt-cell.flp-pt-old { display: none; }

  /* What is */
  .flp-whatis-flex { grid-template-columns: 1fr; gap: 2rem; }

  /* Types */
  .flp-types-grid { grid-template-columns: 1fr; }

  /* For grid */
  .flp-for-grid { grid-template-columns: 1fr; }

  /* Science */
  .flp-sci-grid { grid-template-columns: 1fr; gap: 1.5rem; }

  /* CTA */
  .flp-cta-btn-wrap { flex-direction: column; align-items: stretch; }
  .flp-cta-btn {
    padding: 1.05rem 1.5rem;
    font-size: .98rem;
    text-align: center;
  }
  .flp-sec-cta { padding: 5rem 0; }
}

/* ----------------------------------------------------------------
   18. RESPONSIVE — 小型スマートフォン (max 390px)
---------------------------------------------------------------- */
@media (max-width: 390px) {
  .flp-hero-h1 {
    font-size: clamp(1.5rem, 7vw, 1.9rem);
  }
  /* 小型スマホ：ヒーロー余白の最終調整 */
  .flp-hero {
    padding-bottom: 8rem; /* ← 極小端末でも重複しない最小値 */
  }
  .flp-scroll-line {
    height: 24px;
  }
  .flp-stat-row {
    grid-template-columns: 1fr;
  }
  .flp-shift-row {
    grid-template-columns: 1fr;
  }
  .flp-shift-cell.flp-arrow { display: none; }
  .flp-shift-cell.flp-old {
    border-bottom: 1px solid var(--flp-line);
    opacity: .6;
  }
}

/* ----------------------------------------------------------------
   19. ADMIN BAR OFFSET
---------------------------------------------------------------- */
@media (max-width: 600px) {
  body.admin-bar .flp-nav { top: 46px; }
}

/* ----------------------------------------------------------------
   20. PRINT (最小限)
---------------------------------------------------------------- */
@media print {
  .flp-nav, .flp-hero-scroll { display: none !important; }
  body.fukugyou-lp-body { background: #fff; color: #000; }
}