/*
Theme Name: FP Marche
Theme URI: https://fpmarche.com
Description: FPマルシェ カスタムテーマ
Version: 1.0
Author: OSD
*/
      /* ========================================
       :root — Design System Variables
       ======================================== */
      :root {
        /* === カラー === */
        --color-primary: #2e8b57;
        --color-primary-dark: #1e6b47;
        --color-primary-light: #e8f5e9;
        --color-primary-50: #f4faf7;
        --color-primary-100: #e6f4ec;
        --color-primary-200: #c9e8d6;
        --color-primary-300: #99d6b3;
        --color-primary-400: #5cc188;
        --color-primary-500: #3aa569;
        --color-primary-600: #2e8b57;
        --color-primary-700: #236b43;
        --color-primary-800: #1b5434;
        --color-primary-900: #133923;
        --color-primary-950: #0a1e13;

        --color-cta: #f5a623;
        --color-cta-hover: #e8951a;
        --color-cta-text: #333333;

        --color-bg-white: #ffffff;
        --color-bg-light: #f8f9fa;
        --color-bg-warm: #f0f7f2;

        --color-text: #333333;
        --color-text-sub: #666666;
        --color-text-light: #999999;
        --color-border: #e0e0e0;

        --color-link: #1e6b47;
        --color-link-hover: #133923;

        --color-tag-bg: #e6f4ec;
        --color-tag-text: #2e8b57;

        /* === タイポグラフィ === */
        --font-sans:
          "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "メイリオ", sans-serif;
        --font-mono: "Inter", system-ui, sans-serif;

        --text-xs: clamp(0.69rem, 0.65rem + 0.2vw, 0.75rem);
        --text-sm: clamp(0.81rem, 0.77rem + 0.2vw, 0.875rem);
        --text-base: clamp(0.94rem, 0.9rem + 0.2vw, 1rem);
        --text-lg: clamp(1.13rem, 1.05rem + 0.4vw, 1.25rem);
        --text-xl: clamp(1.41rem, 1.3rem + 0.5vw, 1.563rem);
        --text-2xl: clamp(1.76rem, 1.6rem + 0.8vw, 1.953rem);
        --text-3xl: clamp(2.2rem, 2rem + 1vw, 2.441rem);
        --text-4xl: clamp(2.75rem, 2.5rem + 1.2vw, 3.052rem);

        --leading-tight: 1.35;
        --leading-snug: 1.4;
        --leading-normal: 1.5;
        --leading-relaxed: 1.8;
        --leading-loose: 1.9;

        --tracking-tight: 0.02em;
        --tracking-normal: 0.04em;

        /* === スペーシング === */
        --space-2xs: 4px;
        --space-xs: 8px;
        --space-sm: 12px;
        --space-md: 16px;
        --space-lg: 24px;
        --space-xl: 32px;
        --space-2xl: 48px;
        --space-3xl: 64px;
        --space-4xl: 80px;
        --space-section-lg: 96px;
        --space-5xl: 128px;

        /* === レイアウト === */
        --content-max: 1000px;
        --text-max: 680px;
        --wide-max: 1200px;

        /* === コンポーネント === */
        --radius-sm: 8px;
        --radius-md: 12px;
        --radius-pill: 20px;

        --shadow-sm:
          0 1px 3px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.04);
        --shadow-md:
          0 4px 12px rgba(0, 0, 0, 0.08), 0 8px 24px rgba(0, 0, 0, 0.06);
        --shadow-cta: 0 2px 8px rgba(245, 166, 35, 0.3);

        --transition-base: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);

        /* === グラデーション === */
        --gradient-hero: linear-gradient(135deg, #1e6b47 0%, #2e8b57 100%);
        --gradient-footer: linear-gradient(180deg, #1b5434 0%, #133923 100%);
        --gradient-cta: linear-gradient(135deg, #f5a623 0%, #e8951a 100%);

        /* === スクロールアニメ === */
        --scroll-duration: 0.6s;
        --scroll-easing: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        --scroll-delay: 0s;
        --scroll-distance: 40px;
        --stagger-interval: 0.1s;
      }

      /* ========================================
       リセット & ベーススタイル
       ======================================== */
      *,
      *::before,
      *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }

      html {
        scroll-behavior: smooth;
        -webkit-text-size-adjust: 100%;
      }

      body {
        font-family: var(--font-sans);
        font-size: var(--text-base);
        line-height: var(--leading-loose);
        color: var(--color-text);
        background-color: var(--color-bg-white);
        letter-spacing: var(--tracking-normal);
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }

      img {
        max-width: 100%;
        height: auto;
        display: block;
      }

      a {
        color: var(--color-link);
        text-decoration: none;
        transition: var(--transition-base);
      }

      a:hover {
        color: var(--color-link-hover);
      }

      h1,
      h2,
      h3,
      h4,
      h5,
      h6 {
        font-weight: 700;
        line-height: var(--leading-snug);
        letter-spacing: var(--tracking-tight);
      }

      /* ========================================
       コンテナ
       ======================================== */
      .container {
        width: calc(100% - 40px);
        max-width: var(--content-max);
        margin-inline: auto;
      }

      .container--text {
        max-width: var(--text-max);
      }

      .container--wide {
        max-width: var(--wide-max);
      }

      /* ========================================
       グローバルコンポーネント
       ======================================== */

      /* --- ボタン: プライマリCTA --- */
      .btn-primary {
        display: inline-flex;
        align-items: center;
        gap: var(--space-xs);
        padding: var(--space-md) var(--space-2xl);
        background: var(--gradient-cta);
        color: var(--color-cta-text);
        font-family: var(--font-sans);
        font-size: var(--text-base);
        font-weight: 700;
        text-decoration: none;
        border: none;
        border-radius: var(--radius-sm);
        cursor: pointer;
        box-shadow: var(--shadow-cta);
        transition: var(--transition-base);
      }

      .btn-primary:hover {
        background: var(--color-cta-hover);
        color: var(--color-cta-text);
        transform: translateY(-2px);
        box-shadow: 0 4px 16px rgba(245, 166, 35, 0.4);
      }

      .btn-primary .arrow {
        display: inline-block;
        transition: transform 0.3s ease;
      }

      .btn-primary:hover .arrow {
        animation: bounce-x 0.5s ease;
      }

      @keyframes bounce-x {
        0% {
          transform: translateX(0);
        }
        30% {
          transform: translateX(8px);
        }
        50% {
          transform: translateX(2px);
        }
        70% {
          transform: translateX(6px);
        }
        100% {
          transform: translateX(4px);
        }
      }

      /* --- ボタン: セカンダリCTA --- */
      .btn-secondary {
        display: inline-flex;
        align-items: center;
        gap: var(--space-xs);
        padding: 14px 38px;
        background: transparent;
        color: var(--color-primary-dark);
        font-family: var(--font-sans);
        font-size: var(--text-base);
        font-weight: 700;
        text-decoration: none;
        border: 2px solid var(--color-primary);
        border-radius: var(--radius-sm);
        cursor: pointer;
        transition: var(--transition-base);
      }

      .btn-secondary:hover {
        background: var(--color-primary-50);
        border-color: var(--color-primary-dark);
        color: var(--color-primary-dark);
      }

      /* --- テキストリンク矢印アニメ --- */
      .link-arrow {
        display: inline-block;
        transition: transform 0.3s ease;
      }
      a:hover .link-arrow {
        transform: translateX(5px);
      }

      /* --- CTA pulse（微呼吸） --- */
      @keyframes cta-pulse {
        0%,
        100% {
          transform: scale(1);
        }
        50% {
          transform: scale(1.03);
        }
      }
      .fixed-cta .btn-primary {
        animation: cta-pulse 3s ease-in-out infinite;
      }
      .fixed-cta .btn-primary:hover {
        animation: none;
      }

      /* --- セクション見出し --- */
      .section-heading {
        position: relative;
        padding-top: var(--space-xl);
        padding-bottom: var(--space-md);
        margin-bottom: var(--space-xl);
        font-size: var(--text-2xl);
        text-align: center;
      }

      .section-heading::before {
        content: attr(data-en);
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        color: rgba(46, 139, 87, 0.08);
        font-family: var(--font-mono);
        font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem);
        font-weight: 600;
        text-transform: uppercase;
        text-align: center;
        pointer-events: none;
        z-index: 0;
      }

      .section-heading span {
        position: relative;
        z-index: 1;
      }

      .section-heading::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 60px;
        height: 3px;
        border-radius: 2px;
        background: var(--color-primary);
        transform-origin: center;
        scale: 0 1;
        transition: scale 0.6s cubic-bezier(0.22, 1, 0.36, 1);
      }
      .section-heading.is-visible::after {
        scale: 1 1;
      }

      /* --- フィルタチップ --- */
      .chip {
        display: inline-block;
        padding: var(--space-xs) var(--space-md);
        background: var(--color-bg-white);
        color: var(--color-text-sub);
        font-size: var(--text-sm);
        font-weight: 500;
        border: 1px solid var(--color-border);
        border-radius: var(--radius-pill);
        cursor: pointer;
        transition: var(--transition-base);
      }

      .chip:hover {
        background: var(--color-primary-50);
        color: var(--color-text);
        border-color: var(--color-primary-200);
      }

      .chip.active {
        background: var(--color-primary-100);
        color: var(--color-primary-dark);
        border-color: var(--color-primary);
      }

      /* --- タグ --- */
      .tag {
        display: inline-block;
        padding: var(--space-2xs) var(--space-sm);
        background: var(--color-tag-bg);
        color: var(--color-tag-text);
        font-size: var(--text-xs);
        font-weight: 500;
        border-radius: var(--radius-pill);
      }

      /* ========================================
       スクロールアニメーション基盤
       ======================================== */
      [data-scroll] {
        opacity: 0;
        transition:
          opacity var(--scroll-duration) var(--scroll-easing),
          transform var(--scroll-duration) var(--scroll-easing);
      }

      [data-scroll="fade"] {
        opacity: 0;
      }

      [data-scroll="slide-up"] {
        transform: translateY(var(--scroll-distance));
      }

      [data-scroll="blur-in"] {
        filter: blur(8px);
        transition:
          opacity var(--scroll-duration) var(--scroll-easing),
          filter var(--scroll-duration) var(--scroll-easing);
      }

      [data-scroll].is-visible {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
      }

      /* スタガー */
      [data-scroll="stagger"] > * {
        opacity: 0;
        transform: translateY(var(--scroll-distance));
        transition:
          opacity var(--scroll-duration) var(--scroll-easing),
          transform var(--scroll-duration) var(--scroll-easing);
      }

      [data-scroll="stagger"].is-visible > *:nth-child(1) {
        transition-delay: 0s;
        opacity: 1;
        transform: translateY(0);
      }
      [data-scroll="stagger"].is-visible > *:nth-child(2) {
        transition-delay: var(--stagger-interval);
        opacity: 1;
        transform: translateY(0);
      }
      [data-scroll="stagger"].is-visible > *:nth-child(3) {
        transition-delay: calc(var(--stagger-interval) * 2);
        opacity: 1;
        transform: translateY(0);
      }
      [data-scroll="stagger"].is-visible > *:nth-child(4) {
        transition-delay: calc(var(--stagger-interval) * 3);
        opacity: 1;
        transform: translateY(0);
      }
      [data-scroll="stagger"].is-visible > *:nth-child(5) {
        transition-delay: calc(var(--stagger-interval) * 4);
        opacity: 1;
        transform: translateY(0);
      }
      [data-scroll="stagger"].is-visible > *:nth-child(6) {
        transition-delay: calc(var(--stagger-interval) * 5);
        opacity: 1;
        transform: translateY(0);
      }
      [data-scroll="stagger"].is-visible > *:nth-child(7) {
        transition-delay: calc(var(--stagger-interval) * 6);
        opacity: 1;
        transform: translateY(0);
      }
      [data-scroll="stagger"].is-visible > *:nth-child(8) {
        transition-delay: calc(var(--stagger-interval) * 7);
        opacity: 1;
        transform: translateY(0);
      }
      [data-scroll="stagger"].is-visible > *:nth-child(9) {
        transition-delay: calc(var(--stagger-interval) * 8);
        opacity: 1;
        transform: translateY(0);
      }

      /* prefers-reduced-motion */
      @media (prefers-reduced-motion: reduce) {
        [data-scroll],
        [data-scroll] > * {
          opacity: 1 !important;
          transform: none !important;
          filter: none !important;
          transition: none !important;
        }
      }

      /* ========================================
       ヘッダー（グローバル）
       ======================================== */
      .site-header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 110;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
        transition: var(--transition-base);
      }

      .site-header__inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: var(--space-sm) 0;
        max-width: var(--wide-max);
      }

      .site-header__logo {
        display: flex;
        align-items: center;
      }

      .site-header__logo img {
        height: 48px;
        width: auto;
        display: block;
      }

      /* --- ハンバーガーボタン --- */
      .hamburger {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 32px;
        height: 32px;
        background: none;
        border: none;
        cursor: pointer;
        padding: 4px;
        z-index: 110;
      }
      .hamburger__line {
        display: block;
        width: 100%;
        height: 2px;
        background: var(--color-text);
        border-radius: 1px;
        transition:
          transform 0.3s ease,
          opacity 0.3s ease;
      }
      .hamburger.is-open .hamburger__line:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
      }
      .hamburger.is-open .hamburger__line:nth-child(2) {
        opacity: 0;
      }
      .hamburger.is-open .hamburger__line:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
      }

      /* --- SPドロワーメニュー --- */
      .sp-nav {
        position: fixed;
        top: 0;
        right: 0;
        width: min(280px, 80vw);
        height: 100vh;
        height: 100dvh;
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        z-index: 105;
        padding: 80px var(--space-lg) var(--space-xl);
        transform: translateX(100%);
        transition: transform 0.35s ease;
        box-shadow: -4px 0 24px rgba(0, 0, 0, 0.08);
      }
      .sp-nav.is-open {
        transform: translateX(0);
      }
      .sp-nav__list {
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 0;
      }
      .sp-nav__list li {
        border-bottom: 1px solid var(--color-primary-100);
      }
      .sp-nav__list a {
        display: block;
        padding: var(--space-md) 0;
        font-size: var(--text-base);
        font-weight: 500;
        color: var(--color-text);
        text-decoration: none;
      }
      .sp-nav__list a:hover {
        color: var(--color-primary-dark);
      }
      .sp-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.3);
        z-index: 104;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.35s ease;
      }
      .sp-overlay.is-open {
        opacity: 1;
        pointer-events: auto;
      }

      .site-header__nav {
        display: none;
      }

      @media (min-width: 768px) {
        .hamburger {
          display: none;
        }
        .sp-nav {
          display: none;
        }
        .sp-overlay {
          display: none;
        }
        .site-header__nav {
          display: flex;
          gap: var(--space-lg);
          list-style: none;
          align-items: center;
        }
        .site-header__nav a {
          font-size: var(--text-sm);
          font-weight: 500;
          color: var(--color-text-sub);
        }
        .site-header__nav a:hover {
          color: var(--color-primary-dark);
        }
        .site-header__nav .nav-btn-fp {
          display: inline-block;
          padding: 6px 16px;
          border: 1.5px solid var(--color-primary-dark);
          border-radius: 8px;
          background: #fff;
          color: var(--color-primary-dark);
          font-size: var(--text-sm);
          font-weight: 700;
          text-decoration: none;
          transition:
            background 0.2s,
            color 0.2s,
            box-shadow 0.2s;
          box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
        }
        .site-header__nav .nav-btn-fp:hover {
          background: var(--color-primary-light, #e8f5e9);
          color: var(--color-primary-dark);
          box-shadow: 0 2px 8px rgba(46, 139, 87, 0.15);
        }
      }

      /* ========================================
       フッター（グローバル）
       ======================================== */
      .site-footer {
        background: var(--gradient-footer);
        color: rgba(255, 255, 255, 0.7);
        padding: var(--space-3xl) var(--space-md) var(--space-xl);
      }

      .site-footer__inner {
        max-width: var(--content-max);
        margin-inline: auto;
      }

      .site-footer__logo {
        font-size: var(--text-lg);
        font-weight: 700;
        color: #ffffff;
        margin-bottom: var(--space-lg);
      }

      .site-footer__links {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-md) var(--space-xl);
        list-style: none;
        margin-bottom: var(--space-2xl);
      }

      .site-footer__links a {
        color: rgba(255, 255, 255, 0.7);
        font-size: var(--text-sm);
      }

      .site-footer__links a:hover {
        color: #ffffff;
      }

      .site-footer__copy {
        font-size: var(--text-xs);
        color: rgba(255, 255, 255, 0.4);
        padding-top: var(--space-lg);
        border-top: 1px solid rgba(255, 255, 255, 0.1);
      }

      /* ========================================
       CTA固定バー（モバイル）
       ======================================== */
      .fixed-cta {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 90;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border-top: 1px solid rgba(0, 0, 0, 0.06);
        padding: var(--space-sm) var(--space-md);
        display: flex;
        justify-content: center;
      }

      .fixed-cta .btn-primary {
        width: 100%;
        max-width: 400px;
        justify-content: center;
      }

      @media (min-width: 768px) {
        .fixed-cta {
          display: none;
        }
      }

      /* ========================================
       セクション共通パディング
       ======================================== */
      /* body offset for fixed header */
      body {
        padding-top: 56px;
      }

      /* ========================================
       各セクション CSS（Phase 2で追加）
       ======================================== */

      /* --- #hero --- */

      @keyframes hero-illust-in {
        0% {
          opacity: 0;
          filter: blur(12px);
          transform: translateY(8px);
        }
        100% {
          opacity: 0.25;
          filter: blur(0);
          transform: translateY(0);
        }
      }

      @keyframes hero-illust-in-pc {
        0% {
          opacity: 0;
          filter: blur(12px);
          transform: translateY(8px);
        }
        100% {
          opacity: 1;
          filter: blur(0);
          transform: translateY(0);
        }
      }

      @keyframes hero-blur-in {
        0% {
          opacity: 0;
          filter: blur(12px);
          transform: translateY(8px);
        }
        100% {
          opacity: 1;
          filter: blur(0);
          transform: translateY(0);
        }
      }

      #hero {
        position: relative;
        width: 100%;
        aspect-ratio: 16 / 9;
        color: #f5f5f7;
        overflow: hidden;
      }
      #hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background: url("images/hero-bg-bw.png") center 30% / cover no-repeat;
        z-index: 0;
      }
      #hero::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
          90deg,
          rgba(15, 22, 26, 0.6) 0%,
          rgba(15, 22, 26, 0.3) 55%,
          rgba(15, 22, 26, 0) 100%
        );
        z-index: 1;
      }

      .hero-inner {
        position: absolute;
        inset: 0;
        z-index: 2;
        display: flex;
        align-items: center;
        padding: var(--space-lg) var(--space-md);
        box-sizing: border-box;
      }

      .hero-illustration {
        position: absolute;
        bottom: 0;
        right: -20%;
        width: 120%;
        max-width: none;
        opacity: 0;
        animation: hero-illust-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) 1.3s
          forwards;
        filter: none;
        pointer-events: none;
        z-index: 0;
      }

      .hero-headline {
        font-family: "Noto Sans JP", "Hiragino Sans", "メイリオ", sans-serif;
        font-size: clamp(1.8rem, 5.8vw, 2.4rem);
        font-weight: 500;
        line-height: 1.55;
        letter-spacing: 0.04em;
        color: #f5f5f7;
        margin: 0 0 var(--space-md);
        max-width: 620px;
        text-shadow: 0 2px 24px rgba(0, 0, 0, 0.38);
        opacity: 0;
        animation: hero-blur-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
      }

      .hero-sub {
        font-size: var(--text-base);
        line-height: var(--leading-relaxed);
        color: rgba(255, 255, 255, 0.88);
        margin: 0 auto var(--space-lg);
        max-width: var(--text-max);
        opacity: 0;
        animation: hero-blur-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.3s
          forwards;
      }

      .hero-search {
        position: relative;
        max-width: 520px;
        margin: 0 auto var(--space-md);
        opacity: 0;
        animation: hero-blur-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.6s
          forwards;
      }

      .hero-search-input {
        display: block;
        width: 100%;
        height: 48px;
        padding: 0 48px 0 16px;
        font-family: var(--font-sans);
        font-size: var(--text-sm);
        line-height: 48px;
        color: var(--color-text);
        background: var(--color-bg-white);
        border: 2px solid var(--color-border);
        border-radius: var(--radius-md);
        outline: none;
        box-sizing: border-box;
        transition:
          border-color 0.2s,
          box-shadow 0.2s;
      }

      .hero-search-input::placeholder {
        color: var(--color-text-light);
      }

      .hero-search-input:focus {
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px rgba(46, 139, 87, 0.18);
      }

      .hero-search-btn {
        position: absolute;
        right: 6px;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        background: var(--color-primary);
        color: var(--color-bg-white);
        border: none;
        border-radius: var(--radius-sm);
        cursor: pointer;
        transition: background 0.2s;
      }

      .hero-search-btn:hover {
        background: var(--color-primary-dark);
      }

      .hero-chips {
        list-style: none;
        margin: 0 auto var(--space-lg);
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--space-2xs);
        max-width: var(--text-max);
        opacity: 0;
        animation: hero-blur-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.9s
          forwards;
      }

      .hero-chips .chip {
        background: rgba(255, 255, 255, 0.15);
        color: var(--color-bg-white);
        border: 1px solid rgba(255, 255, 255, 0.35);
        font-size: var(--text-sm);
        padding: 6px 14px;
      }

      .hero-chips .chip:hover {
        background: rgba(255, 255, 255, 0.28);
        border-color: rgba(255, 255, 255, 0.6);
        color: var(--color-bg-white);
      }

      .hero-sub-cta {
        display: inline-block;
        font-size: var(--text-sm);
        color: rgba(255, 255, 255, 0.85);
        text-decoration: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.4);
        padding-bottom: 2px;
        transition:
          color 0.2s,
          border-color 0.2s;
        opacity: 0;
        animation: hero-blur-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) 1.1s
          forwards;
      }

      .hero-sub-cta:hover {
        color: var(--color-bg-white);
        border-color: var(--color-bg-white);
      }

      @media (min-width: 768px) {
        #hero {
          text-align: left;
        }

        #hero .hero-inner {
          padding: var(--space-2xl) var(--space-xl);
        }

        .hero-text {
          width: 100%;
          max-width: var(--wide-max);
          margin: 0 auto;
        }

        .hero-text .hero-headline {
          max-width: 620px;
          padding-left: clamp(0px, 4vw, 48px);
        }

        .hero-headline {
          font-size: clamp(2.2rem, 4vw, 3.2rem);
          line-height: 1.5;
          margin-left: 0;
          margin-right: 0;
          margin-bottom: var(--space-lg);
        }

        .hero-br {
          display: block;
        }

        .hero-sub {
          font-size: clamp(1rem, 1.3vw, 1.2rem);
          white-space: nowrap;
          margin-left: 0;
          margin-right: 0;
        }

        .hero-search-input {
          height: 56px;
          line-height: 56px;
          font-size: var(--text-base);
          padding: 0 56px 0 20px;
        }

        .hero-search-btn {
          right: 8px;
          width: 40px;
          height: 40px;
        }

        .fp-filter__search {
          max-width: 520px;
          margin-bottom: var(--space-lg);
        }

        .fp-filter__search .hero-search-input {
          height: 56px;
          line-height: 56px;
          font-size: var(--text-base);
          padding: 0 56px 0 20px;
          border-color: var(--color-border);
        }
      }

      /* --- .tagline-band（FV直下の訴求メッセージ） --- */
      .tagline-band {
        background: var(--color-bg-white);
        padding: var(--space-3xl) var(--space-md);
        text-align: center;
        position: relative;
        z-index: 4;
      }
      .tagline-band__inner {
        max-width: var(--content-max);
        margin: 0 auto;
      }
      .tagline-band__heading {
        font-size: clamp(1.7rem, 5.6vw, 2.6rem);
        font-weight: 700;
        line-height: 1.7;
        letter-spacing: 0.04em;
        color: var(--color-primary-dark);
        margin: 0;
      }
      .tagline-band__heading .hero-highlight {
        color: var(--color-cta);
      }
      .tagline-band__sub {
        font-size: clamp(1rem, 3.6vw, 1.2rem);
        line-height: var(--leading-relaxed);
        color: var(--color-primary-700);
        margin: var(--space-lg) 0 0;
        opacity: 0.9;
      }
      .tagline-band__sub strong {
        color: var(--color-primary-dark);
        font-weight: 700;
      }
      @media (min-width: 768px) {
        .tagline-band {
          padding: var(--space-4xl) var(--space-xl);
        }
        .tagline-band__sub {
          font-size: clamp(1.05rem, 1.4vw, 1.35rem);
        }
      }

      /* --- #fp-pickup --- */
      .fp-pickup {
        background: var(--color-bg-white);
        padding: var(--space-3xl) var(--space-md);
        position: relative;
        z-index: 3;
      }
      .fp-pickup__inner {
        max-width: var(--content-max);
        margin: 0 auto;
      }
      .fp-pickup__grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--space-lg);
        margin-top: var(--space-xl);
      }
      .fp-card {
        display: flex;
        flex-direction: column;
        background: var(--color-bg-white);
        border: 1px solid rgba(0, 0, 0, 0.06);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-sm);
        overflow: hidden;
        text-decoration: none;
        color: inherit;
        transition: var(--transition-base);
      }
      .fp-card:hover {
        box-shadow: var(--shadow-md);
        transform: translateY(-4px);
      }
      .fp-card__photo {
        overflow: hidden;
        aspect-ratio: 1 / 1;
        background: var(--color-primary-100);
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
      }
      .fp-card__photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      /* --- 金融詐欺撲滅宣言バッジ --- */
      .fraud-badge {
        position: absolute;
        top: 8px;
        right: 8px;
        width: 52px;
        height: auto;
        z-index: 2;
        pointer-events: none;
      }
      .fraud-badge img {
        width: 100%;
        height: auto;
        display: block;
      }
      .fp-card__initial {
        font-family: var(--font-mono);
        font-size: var(--text-4xl);
        font-weight: 700;
        color: var(--color-primary-600);
        line-height: 1;
        user-select: none;
      }
      .fp-card__body {
        padding: var(--space-md);
        flex: 1;
      }
      .fp-card__name {
        font-size: var(--text-base);
        font-weight: 700;
        color: var(--color-text);
        line-height: var(--leading-tight);
      }
      .fp-card__quote {
        font-size: var(--text-sm);
        color: var(--color-text-sub);
        line-height: var(--leading-normal);
        margin-top: var(--space-xs);
      }
      .fp-card__tags {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2xs);
        margin-top: var(--space-sm);
      }
      .fp-card__area {
        font-size: var(--text-xs);
        color: var(--color-text-sub);
        margin-top: var(--space-sm);
      }
      .fp-card__cta {
        display: block;
        padding: var(--space-sm) var(--space-md);
        font-size: var(--text-sm);
        font-weight: 600;
        color: var(--color-link);
        border-top: 1px solid rgba(0, 0, 0, 0.06);
        transition: var(--transition-base);
      }
      .fp-card:hover .fp-card__cta {
        color: var(--color-link-hover);
      }
      .fp-pickup__more {
        text-align: center;
        margin-top: var(--space-xl);
      }
      .fp-pickup__more-link {
        font-size: var(--text-base);
        font-weight: 600;
        color: var(--color-link);
      }
      .fp-pickup__more-link:hover {
        color: var(--color-link-hover);
      }

      @media (min-width: 768px) {
        .fp-pickup {
          padding: var(--space-section-lg) var(--space-xl);
        }
        .fp-pickup__grid {
          grid-template-columns: repeat(3, 1fr);
        }
      }

      /* --- #features --- */
      .features {
        background: var(--color-bg-warm);
        padding: var(--space-3xl) var(--space-md);
      }

      .features__item {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--space-md);
        align-items: center;
        max-width: var(--text-max);
        margin: var(--space-2xl) auto 0;
      }

      .features__item--reverse {
        direction: ltr;
      }

      .features__visual {
        display: flex;
        align-items: center;
        justify-content: center;
        background: #fff;
        border-radius: var(--radius-lg);
        padding: var(--space-lg);
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
      }

      .features__visual img {
        width: 140px;
        height: 140px;
        object-fit: contain;
      }

      .features__text {
        position: relative;
      }

      .features__label {
        display: flex;
        align-items: baseline;
        gap: var(--space-xs);
        margin-bottom: var(--space-sm);
      }

      .features__label span {
        font-family: var(--font-mono);
        font-size: 3.5rem;
        font-weight: 800;
        line-height: 1;
        background: linear-gradient(
          135deg,
          var(--color-primary-600),
          var(--color-primary-400)
        );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
      }

      .features__label::after {
        content: "";
        flex: 1;
        height: 2px;
        background: linear-gradient(
          90deg,
          var(--color-primary-300),
          transparent
        );
        border-radius: 1px;
      }

      .features__title {
        font-size: var(--text-lg);
        font-weight: 700;
        color: var(--color-text);
        line-height: var(--leading-snug);
        margin-bottom: var(--space-xs);
      }

      .features__desc {
        font-size: var(--text-base);
        color: #475569;
        line-height: var(--leading-relaxed);
      }

      .features__desc strong {
        color: var(--color-text);
        font-weight: 700;
      }

      .features__link {
        text-align: center;
        margin-top: var(--space-2xl);
        padding-bottom: var(--space-3xl);
      }

      .features__link-anchor {
        font-size: var(--text-base);
        font-weight: 600;
        color: var(--color-link);
      }

      .features__link-anchor:hover {
        color: var(--color-link-hover);
      }

      @media (min-width: 768px) {
        .features {
          padding: var(--space-4xl) var(--space-xl);
        }

        .features__item {
          max-width: var(--content-max);
          grid-template-columns: 240px 1fr;
          gap: var(--space-xl);
          align-items: center;
        }

        .features__item--reverse {
          direction: rtl;
        }

        .features__item--reverse > * {
          direction: ltr;
        }

        .features__visual img {
          width: 180px;
          height: 180px;
        }
      }

      /* --- #voices --- */
      .voices {
        background: var(--color-bg-white);
        padding: var(--space-3xl) var(--space-md);
      }
      .voices__list {
        display: flex;
        flex-direction: column;
        gap: var(--space-xl);
        margin-top: var(--space-xl);
        max-width: var(--text-max);
        margin-inline: auto;
      }
      .voices__card {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: var(--space-sm);
        padding: var(--space-lg) 0;
        border-bottom: 1px solid var(--color-primary-100);
      }
      .voices__card:last-child {
        border-bottom: none;
      }
      .voices__profile {
        display: flex;
        align-items: center;
        gap: var(--space-sm);
      }
      .voices__avatar {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: var(--color-primary-100);
        color: var(--color-primary-dark);
        font-family: var(--font-en);
        font-size: var(--text-base);
        font-weight: 600;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
      }
      .voices__header {
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
      }
      .voices__name-line {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--space-xs) var(--space-md);
      }
      .voices__name {
        font-size: var(--text-base);
        font-weight: 700;
        color: var(--color-text);
      }
      .voices__detail {
        font-size: var(--text-sm);
        color: var(--color-text-sub);
      }
      .voices__stars {
        display: flex;
        gap: 2px;
      }
      .voices__star {
        width: 16px;
        height: 16px;
        color: #f5a623;
      }
      .voices__body {
        padding-left: var(--space-md);
        border-left: 3px solid var(--color-primary-200);
        max-width: var(--text-max);
      }
      .voices__text {
        font-size: var(--text-base);
        line-height: var(--leading-relaxed);
        color: var(--color-text);
      }
      .voices__text strong {
        color: var(--color-primary-dark);
        font-weight: 700;
      }
      .voices__note {
        text-align: center;
        font-size: var(--text-xs);
        color: var(--color-text-light);
        margin-top: var(--space-xl);
      }
      @media (min-width: 768px) {
        .voices {
          padding: var(--space-section-lg) var(--space-xl);
        }
        .voices__list {
          max-width: 760px;
        }
        .voices__avatar {
          width: 56px;
          height: 56px;
          font-size: var(--text-lg);
        }
        .voices__stars {
          margin-left: auto;
        }
        .voices__name-line {
          flex-direction: row;
          align-items: center;
        }
      }

      /* --- #flow --- */
      .flow {
        background: var(--color-bg-white);
        padding: var(--space-xl) var(--space-md);
        padding-bottom: calc(var(--space-xl) + 16px);
      }
      .flow__inner {
        max-width: 800px;
        margin: 0 auto;
      }
      /* セクション見出し（HOW TO / はじめての方へ）はセンター */
      .flow__inner .section-heading {
        text-align: center;
      }
      /* タイトルはステッパーと揃えて左寄せ */
      .flow__title {
        font-size: var(--text-2xl);
        font-weight: 700;
        color: var(--color-text);
        line-height: var(--leading-tight);
        margin-top: var(--space-sm);
        text-align: left;
        padding-left: calc(52px + var(--space-lg));
      }
      /* --- モバイル: 左寄せ縦ステッパー + 画像 --- */
      .flow__steps {
        list-style: none;
        padding: 0;
        margin: var(--space-md) 0 0;
        position: relative;
      }
      .flow__step {
        display: grid;
        grid-template-columns: 52px 1fr;
        column-gap: var(--space-lg);
        position: relative;
        padding-bottom: 4px;
      }
      .flow__step:last-child {
        padding-bottom: 0;
      }
      /* 縦ライン（モバイル） */
      .flow__step:not(:last-child)::before {
        content: "";
        position: absolute;
        top: 52px;
        left: 25px;
        width: 2px;
        height: calc(100% - 52px);
        background: var(--color-primary);
        opacity: 0.18;
      }
      .flow__number {
        grid-row: 1;
        width: 52px;
        height: 52px;
        border-radius: 50%;
        background: var(--color-primary);
        display: grid;
        place-items: center;
        flex-shrink: 0;
        box-shadow: 0 4px 12px rgba(46, 139, 87, 0.2);
      }
      .flow__number span {
        font-family: var(--font-mono);
        font-size: var(--text-xl);
        font-weight: 700;
        color: #fff;
        line-height: 1;
      }
      .flow__content {
        min-width: 0;
      }
      .flow__step-label {
        font-size: var(--text-xl);
        font-weight: 700;
        color: var(--color-text);
        line-height: 1.2;
        margin-top: var(--space-xs);
      }
      .flow__step-body {
        font-size: var(--text-base);
        color: var(--color-text-sub);
        line-height: var(--leading-relaxed);
        margin-top: 8px;
      }
      .flow__step-body strong {
        color: var(--color-text);
      }
      .flow__image {
        grid-column: 1 / -1;
        margin-top: var(--space-sm);
        padding-left: calc(52px + var(--space-lg));
        display: flex;
        justify-content: center;
      }
      .flow__image img {
        width: 100%;
        max-width: 180px;
        height: 140px;
        object-fit: contain;
        opacity: 0.85;
      }
      .flow__number--goal {
        background: transparent;
        width: 56px;
        height: 56px;
        margin-left: -2px;
        box-shadow: 0 6px 20px rgba(46, 139, 87, 0.35);
        position: relative;
        overflow: visible;
      }
      .flow__goal-icon {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
        position: relative;
        z-index: 2;
      }
      .flow__step--goal .flow__step-label {
        color: var(--color-cta-hover);
        font-size: var(--text-xl);
      }
      /* ゴール: 祝福パーティクル */
      .flow__celebration {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        pointer-events: none;
      }
      .flow__particle {
        position: absolute;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        opacity: 0;
      }
      .flow__particle:nth-child(1) {
        background: #f5a623;
      }
      .flow__particle:nth-child(2) {
        background: var(--color-primary);
      }
      .flow__particle:nth-child(3) {
        background: #e8725c;
      }
      .flow__particle:nth-child(4) {
        background: #5cade8;
      }
      .flow__particle:nth-child(5) {
        background: #f5a623;
      }
      .flow__particle:nth-child(6) {
        background: #9b59b6;
      }
      .flow__particle:nth-child(7) {
        background: var(--color-primary);
      }
      .flow__particle:nth-child(8) {
        background: #e8725c;
      }
      .flow__particle:nth-child(9) {
        width: 6px;
        height: 10px;
        border-radius: 2px;
        background: #5cade8;
      }
      .flow__particle:nth-child(10) {
        width: 10px;
        height: 6px;
        border-radius: 2px;
        background: #f5a623;
      }
      .flow__particle:nth-child(11) {
        width: 5px;
        height: 9px;
        border-radius: 2px;
        background: #9b59b6;
      }
      .flow__particle:nth-child(12) {
        width: 9px;
        height: 5px;
        border-radius: 2px;
        background: var(--color-primary);
      }
      @keyframes burst-1 {
        0% {
          opacity: 1;
          transform: translate(0, 0) scale(1);
        }
        100% {
          opacity: 0;
          transform: translate(-50px, -70px) scale(0.4);
        }
      }
      @keyframes burst-2 {
        0% {
          opacity: 1;
          transform: translate(0, 0) scale(1);
        }
        100% {
          opacity: 0;
          transform: translate(60px, -60px) scale(0.3);
        }
      }
      @keyframes burst-3 {
        0% {
          opacity: 1;
          transform: translate(0, 0) scale(1);
        }
        100% {
          opacity: 0;
          transform: translate(-70px, -20px) scale(0.5);
        }
      }
      @keyframes burst-4 {
        0% {
          opacity: 1;
          transform: translate(0, 0) scale(1);
        }
        100% {
          opacity: 0;
          transform: translate(55px, -45px) scale(0.4);
        }
      }
      @keyframes burst-5 {
        0% {
          opacity: 1;
          transform: translate(0, 0) scale(1);
        }
        100% {
          opacity: 0;
          transform: translate(-30px, -80px) scale(0.3);
        }
      }
      @keyframes burst-6 {
        0% {
          opacity: 1;
          transform: translate(0, 0) scale(1);
        }
        100% {
          opacity: 0;
          transform: translate(75px, -30px) scale(0.5);
        }
      }
      @keyframes burst-7 {
        0% {
          opacity: 1;
          transform: translate(0, 0) scale(1);
        }
        100% {
          opacity: 0;
          transform: translate(-60px, -55px) scale(0.3);
        }
      }
      @keyframes burst-8 {
        0% {
          opacity: 1;
          transform: translate(0, 0) scale(1);
        }
        100% {
          opacity: 0;
          transform: translate(40px, -75px) scale(0.4);
        }
      }
      @keyframes burst-9 {
        0% {
          opacity: 1;
          transform: translate(0, 0) rotate(0);
        }
        100% {
          opacity: 0;
          transform: translate(-45px, -65px) rotate(180deg);
        }
      }
      @keyframes burst-10 {
        0% {
          opacity: 1;
          transform: translate(0, 0) rotate(0);
        }
        100% {
          opacity: 0;
          transform: translate(65px, -50px) rotate(-120deg);
        }
      }
      @keyframes burst-11 {
        0% {
          opacity: 1;
          transform: translate(0, 0) rotate(0);
        }
        100% {
          opacity: 0;
          transform: translate(-55px, -40px) rotate(90deg);
        }
      }
      @keyframes burst-12 {
        0% {
          opacity: 1;
          transform: translate(0, 0) rotate(0);
        }
        100% {
          opacity: 0;
          transform: translate(50px, -70px) rotate(-90deg);
        }
      }
      .flow__step--goal.celebration-active .flow__particle:nth-child(1) {
        animation: burst-1 0.7s ease-out 0.3s forwards;
      }
      .flow__step--goal.celebration-active .flow__particle:nth-child(2) {
        animation: burst-2 0.7s ease-out 0.35s forwards;
      }
      .flow__step--goal.celebration-active .flow__particle:nth-child(3) {
        animation: burst-3 0.65s ease-out 0.3s forwards;
      }
      .flow__step--goal.celebration-active .flow__particle:nth-child(4) {
        animation: burst-4 0.7s ease-out 0.4s forwards;
      }
      .flow__step--goal.celebration-active .flow__particle:nth-child(5) {
        animation: burst-5 0.65s ease-out 0.35s forwards;
      }
      .flow__step--goal.celebration-active .flow__particle:nth-child(6) {
        animation: burst-6 0.7s ease-out 0.45s forwards;
      }
      .flow__step--goal.celebration-active .flow__particle:nth-child(7) {
        animation: burst-7 0.65s ease-out 0.35s forwards;
      }
      .flow__step--goal.celebration-active .flow__particle:nth-child(8) {
        animation: burst-8 0.7s ease-out 0.3s forwards;
      }
      .flow__step--goal.celebration-active .flow__particle:nth-child(9) {
        animation: burst-9 0.8s ease-out 0.35s forwards;
      }
      .flow__step--goal.celebration-active .flow__particle:nth-child(10) {
        animation: burst-10 0.8s ease-out 0.4s forwards;
      }
      .flow__step--goal.celebration-active .flow__particle:nth-child(11) {
        animation: burst-11 0.75s ease-out 0.3s forwards;
      }
      .flow__step--goal.celebration-active .flow__particle:nth-child(12) {
        animation: burst-12 0.75s ease-out 0.45s forwards;
      }
      .flow__sub-cta {
        margin-top: var(--space-4xl);
        padding-top: var(--space-xl);
        border-top: 1px solid rgba(46, 139, 87, 0.15);
        text-align: center;
      }
      .flow__sub-cta-text {
        font-size: var(--text-sm);
        color: var(--color-text-sub);
        line-height: var(--leading-relaxed);
        margin-bottom: var(--space-md);
      }
      .flow__sub-cta-text strong {
        color: var(--color-text);
      }

      /* --- デスクトップ: 左寄せステッパー + 画像 --- */
      @media (min-width: 768px) {
        .flow {
          padding: var(--space-5xl) var(--space-xl);
          padding-bottom: calc(var(--space-5xl) + 120px);
        }
        .flow__title {
          font-size: var(--text-2xl);
          margin-top: var(--space-md);
          padding-left: calc(60px + var(--space-xl));
        }
        .flow__steps {
          margin-top: var(--space-5xl);
          position: relative;
        }
        /* 左の縦ライン（デスクトップ） */
        .flow__steps::before {
          content: "";
          position: absolute;
          top: 0;
          left: 30px;
          width: 2px;
          height: 100%;
          background: var(--color-primary);
          opacity: 0.12;
          transform-origin: top center;
          transform: scaleY(0);
        }
        .flow__steps[data-scroll="stagger"].is-visible::before {
          transform: scaleY(1);
          transition: transform 1.8s ease-out 0.05s;
        }
        .flow__step {
          display: grid;
          grid-template-columns: 60px 1fr 200px;
          column-gap: var(--space-xl);
          align-items: center;
          padding-bottom: 40px;
        }
        .flow__step:last-child {
          padding-bottom: 0;
        }
        .flow__step:not(:last-child)::before {
          display: none;
        }
        .flow__number {
          grid-column: 1;
          grid-row: 1;
          width: 60px;
          height: 60px;
          justify-self: center;
        }
        .flow__number span {
          font-size: var(--text-2xl);
        }
        .flow__content {
          grid-column: 2;
          grid-row: 1;
          padding-top: 8px;
        }
        .flow__step-label {
          font-size: var(--text-xl);
          margin-top: 0;
        }
        .flow__image {
          grid-column: 3;
          grid-row: 1;
          padding-left: 0;
          margin-top: 0;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .flow__image img {
          max-width: 180px;
          height: 160px;
          object-fit: contain;
          opacity: 0.9;
        }
        /* ゴールステップ */
        .flow__number--goal {
          width: 68px;
          height: 68px;
          margin-left: -4px;
        }
        .flow__step--goal .flow__step-label {
          font-size: var(--text-xl);
        }
        .flow__sub-cta {
          padding-left: 0;
        }
      }

      /* --- #interviews --- */
      .interviews {
        background: var(--color-bg-warm);
        padding: var(--space-3xl) var(--space-md);
      }
      .interviews__inner {
        max-width: var(--content-max);
        margin: 0 auto;
      }
      .interviews__grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--space-lg);
        margin-top: var(--space-xl);
      }
      .interview-card {
        display: flex;
        flex-direction: column;
        background: var(--color-bg-white);
        border: 1px solid rgba(0, 0, 0, 0.06);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-sm);
        overflow: hidden;
        text-decoration: none;
        color: inherit;
        transition: var(--transition-base);
      }
      .interview-card:hover {
        box-shadow: var(--shadow-md);
        transform: translateY(-4px);
      }
      .interview-card__photo {
        overflow: hidden;
        aspect-ratio: 1 / 1;
        background: var(--color-primary-100);
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
      }
      .interview-card__photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .interview-card__initial {
        font-family: var(--font-mono);
        font-size: var(--text-4xl);
        font-weight: 700;
        color: var(--color-primary-600);
        line-height: 1;
        user-select: none;
      }
      .interview-card__body {
        padding: var(--space-md);
        flex: 1;
      }
      .interview-card__name {
        font-size: var(--text-base);
        font-weight: 700;
        color: var(--color-text);
      }
      .interview-card__quote {
        font-size: var(--text-sm);
        color: var(--color-text-sub);
        line-height: var(--leading-normal);
        margin-top: var(--space-xs);
      }
      .interview-card__tags {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2xs);
        margin-top: var(--space-sm);
      }
      .interviews__more {
        text-align: center;
        margin-top: var(--space-xl);
      }
      .interviews__more-link {
        font-size: var(--text-base);
        font-weight: 600;
        color: var(--color-link);
      }
      .interviews__more-link:hover {
        color: var(--color-link-hover);
      }

      @media (min-width: 768px) {
        .interviews {
          padding: var(--space-4xl) var(--space-xl);
        }
        .interviews__grid {
          grid-template-columns: repeat(3, 1fr);
        }
      }

      /* --- #fp-guide --- */
      .about-fp-guide {
        background: var(--color-bg-white);
        padding: var(--space-2xl) var(--space-md);
        scroll-margin-top: 80px;
      }
      @media (max-width: 767px) {
        .about-fp-guide { scroll-margin-top: 64px; }
      }
      /* グローバルなアンカー時のヘッダー逃げ */
      html { scroll-padding-top: 80px; }
      @media (max-width: 767px) {
        html { scroll-padding-top: 64px; }
      }
      .about-fp-guide__inner {
        max-width: var(--content-max);
        margin: 0 auto;
        text-align: center;
      }
      .about-fp-guide__heading {
        font-size: var(--text-xl);
        font-weight: 700;
        color: var(--color-text);
        line-height: var(--leading-snug);
        margin-bottom: var(--space-sm);
      }
      .about-fp-guide__intro {
        font-size: var(--text-base);
        color: var(--color-text-sub);
        line-height: var(--leading-relaxed);
        margin-bottom: var(--space-2xl);
      }
      .about-fp-guide__intro strong {
        color: var(--color-text);
        font-weight: 700;
      }
      .about-fp-guide__steps {
        display: flex;
        flex-direction: column;
        gap: var(--space-xl);
        margin-bottom: var(--space-2xl);
        counter-reset: fp-step;
      }
      .about-fp-guide__step {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: var(--space-md);
        counter-increment: fp-step;
      }
      .about-fp-guide__step-number {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: var(--color-primary);
        display: grid;
        place-items: center;
        flex-shrink: 0;
      }
      .about-fp-guide__step-number span {
        font-family: var(--font-mono);
        font-size: var(--text-lg);
        font-weight: 700;
        color: #fff;
        line-height: 1;
      }
      .about-fp-guide__step-image {
        width: 140px;
        height: 120px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .about-fp-guide__step-image img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
      }
      .about-fp-guide__step-body {
        max-width: 280px;
      }
      .about-fp-guide__step-title {
        font-size: var(--text-lg);
        font-weight: 700;
        color: var(--color-text);
        line-height: var(--leading-snug);
        margin-bottom: var(--space-xs);
      }
      .about-fp-guide__step-desc {
        font-size: var(--text-sm);
        color: var(--color-text-sub);
        line-height: var(--leading-relaxed);
      }
      .about-fp-guide__connector {
        width: 2px;
        height: 32px;
        background: var(--color-primary);
        opacity: 0.2;
        margin: 0 auto;
      }
      @media (min-width: 768px) {
        .about-fp-guide {
          padding: var(--space-3xl) var(--space-xl);
        }
        .about-fp-guide__heading {
          font-size: var(--text-2xl);
        }
        .about-fp-guide__steps {
          flex-direction: row;
          align-items: flex-start;
          gap: 0;
        }
        .about-fp-guide__step {
          flex: 1;
          position: relative;
        }
        .about-fp-guide__connector {
          display: none;
        }
        .about-fp-guide__step:not(:last-child)::after {
          content: "";
          position: absolute;
          top: 24px;
          right: -20%;
          width: 40%;
          height: 2px;
          background: var(--color-primary);
          opacity: 0.2;
        }
        .about-fp-guide__step-image {
          width: 160px;
          height: 140px;
        }
        .about-fp-guide__step-body {
          max-width: 240px;
        }
      }

      /* --- #cta-final --- */
      .section-cta-final {
        background: var(--gradient-hero);
        padding: var(--space-2xl) var(--space-md);
        text-align: center;
      }

      .cta-final__heading {
        font-size: var(--text-2xl);
        font-weight: 700;
        color: #fff;
        line-height: var(--leading-normal);
        margin-bottom: var(--space-md);
      }

      .cta-final__body {
        font-size: var(--text-base);
        color: rgba(255, 255, 255, 0.92);
        line-height: var(--leading-relaxed);
        margin-bottom: var(--space-xl);
        max-width: var(--text-max);
        margin-inline: auto;
      }

      .cta-final__body strong {
        color: #fff;
        font-weight: 700;
      }

      .cta-final__buttons {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--space-sm);
      }

      .btn-outline-white {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 14px 38px;
        font-family: var(--font-sans);
        font-size: var(--text-base);
        font-weight: 700;
        color: #fff;
        background: transparent;
        border: 2px solid rgba(255, 255, 255, 0.85);
        border-radius: var(--radius-sm);
        text-decoration: none;
        transition: var(--transition-base);
        cursor: pointer;
      }

      .btn-outline-white:hover {
        background: rgba(255, 255, 255, 0.12);
        border-color: #fff;
        color: #fff;
      }

      @media (min-width: 768px) {
        .section-cta-final {
          padding: var(--space-section-lg) var(--space-xl);
        }

        .cta-final__heading {
          font-size: var(--text-3xl);
        }

        .cta-final__buttons {
          flex-direction: row;
          justify-content: center;
          gap: var(--space-md);
        }

        .cta-final__heading .sp-only {
          display: none;
        }

        /* PCではsp-onlyの<br>を全て無効化 */
        br.sp-only {
          display: none;
        }
      }

      /* ========================================
       Living Green — 遊び心の追加CSS
       ======================================== */

      /* --- A1: メインキャッチのキーワードハイライト --- */
      .hero-highlight {
        color: var(--color-cta);
        position: relative;
      }
      .hero-highlight::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: -2px;
        right: -2px;
        height: 30%;
        background: rgba(245, 166, 35, 0.15);
        border-radius: 2px;
        z-index: -1;
      }

      /* --- A3: ステップのアニメーション --- */
      @keyframes pop-in {
        0% {
          transform: scale(0.3);
          opacity: 0;
        }
        50% {
          transform: scale(1.1);
        }
        70% {
          transform: scale(0.95);
        }
        100% {
          transform: scale(1);
          opacity: 1;
        }
      }
      @keyframes slide-in-left {
        0% {
          opacity: 0;
          transform: translateX(-30px);
        }
        100% {
          opacity: 1;
          transform: translateX(0);
        }
      }
      @keyframes slide-in-right {
        0% {
          opacity: 0;
          transform: translateX(30px);
        }
        100% {
          opacity: 1;
          transform: translateX(0);
        }
      }
      @keyframes line-grow {
        0% {
          transform: scaleY(0);
        }
        100% {
          transform: scaleY(1);
        }
      }
      .flow__number {
        opacity: 0;
        transform: scale(0.3);
      }
      .flow__content {
        opacity: 0;
        transform: translateX(20px);
      }
      .flow__image {
        opacity: 0;
        transform: translateY(16px);
      }
      /* 番号ポップイン */
      [data-scroll="stagger"].is-visible
        .flow__step:nth-child(1)
        .flow__number {
        animation: pop-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s forwards;
      }
      [data-scroll="stagger"].is-visible
        .flow__step:nth-child(2)
        .flow__number {
        animation: pop-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.35s forwards;
      }
      [data-scroll="stagger"].is-visible
        .flow__step:nth-child(3)
        .flow__number {
        animation: pop-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s forwards;
      }
      [data-scroll="stagger"].is-visible
        .flow__step:nth-child(4)
        .flow__number {
        animation: pop-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.85s forwards;
      }
      [data-scroll="stagger"].is-visible
        .flow__step:nth-child(5)
        .flow__number {
        animation: pop-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 1.1s forwards;
      }
      [data-scroll="stagger"].is-visible
        .flow__step:nth-child(6)
        .flow__number {
        animation: pop-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 1.35s forwards;
      }
      /* テキスト・画像のフェードスライド */
      [data-scroll="stagger"].is-visible .flow__content {
        animation: slide-in-right 0.5s ease-out forwards;
      }
      [data-scroll="stagger"].is-visible .flow__image {
        animation: fade-up 0.5s ease-out forwards;
      }
      @keyframes fade-up {
        from {
          opacity: 0;
          transform: translateY(16px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
      /* ディレイ（番号の少し後にスライド） */
      [data-scroll="stagger"].is-visible
        .flow__step:nth-child(1)
        .flow__content {
        animation-delay: 0.2s;
      }
      [data-scroll="stagger"].is-visible .flow__step:nth-child(1) .flow__image {
        animation-delay: 0.35s;
      }
      [data-scroll="stagger"].is-visible
        .flow__step:nth-child(2)
        .flow__content {
        animation-delay: 0.45s;
      }
      [data-scroll="stagger"].is-visible .flow__step:nth-child(2) .flow__image {
        animation-delay: 0.6s;
      }
      [data-scroll="stagger"].is-visible
        .flow__step:nth-child(3)
        .flow__content {
        animation-delay: 0.7s;
      }
      [data-scroll="stagger"].is-visible .flow__step:nth-child(3) .flow__image {
        animation-delay: 0.85s;
      }
      [data-scroll="stagger"].is-visible
        .flow__step:nth-child(4)
        .flow__content {
        animation-delay: 0.95s;
      }
      [data-scroll="stagger"].is-visible .flow__step:nth-child(4) .flow__image {
        animation-delay: 1.1s;
      }
      [data-scroll="stagger"].is-visible
        .flow__step:nth-child(5)
        .flow__content {
        animation-delay: 1.2s;
      }
      [data-scroll="stagger"].is-visible .flow__step:nth-child(5) .flow__image {
        animation-delay: 1.35s;
      }
      [data-scroll="stagger"].is-visible
        .flow__step:nth-child(6)
        .flow__content {
        animation-delay: 1.45s;
      }
      [data-scroll="stagger"].is-visible .flow__step:nth-child(6) .flow__image {
        animation-delay: 1.6s;
      }

      /* --- A4: お客様の声の引用符SVGアニメ --- */
      .voices__quote-mark {
        position: absolute;
        top: var(--space-md);
        right: var(--space-md);
        width: 40px;
        height: 32px;
        opacity: 0.12;
      }
      .voices__quote-mark path {
        fill: none;
        stroke: var(--color-primary);
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-dasharray: 100;
        stroke-dashoffset: 100;
        transition: stroke-dashoffset 1s ease-out;
      }
      [data-scroll="stagger"].is-visible
        .voices__card:nth-child(1)
        .voices__quote-mark
        path {
        stroke-dashoffset: 0;
        transition-delay: 0.2s;
      }
      [data-scroll="stagger"].is-visible
        .voices__card:nth-child(2)
        .voices__quote-mark
        path {
        stroke-dashoffset: 0;
        transition-delay: 0.35s;
      }
      [data-scroll="stagger"].is-visible
        .voices__card:nth-child(3)
        .voices__quote-mark
        path {
        stroke-dashoffset: 0;
        transition-delay: 0.5s;
      }

      /* --- B6: 検索バーフォーカス時の虫眼鏡回転 --- */
      .hero-search-btn svg {
        transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
      }
      .hero-search-input:focus ~ .hero-search-btn svg {
        transform: rotate(90deg) scale(1.1);
      }

      /* --- C8: フッター🍃揺れアニメ --- */
      @keyframes leaf-sway {
        0%,
        100% {
          transform: rotate(0deg);
        }
        25% {
          transform: rotate(8deg);
        }
        75% {
          transform: rotate(-6deg);
        }
      }
      .footer-leaf {
        display: inline-block;
        margin-left: var(--space-xs);
        animation: leaf-sway 3s ease-in-out infinite;
        transform-origin: bottom center;
        font-size: var(--text-sm);
        opacity: 0.6;
      }

      /* --- C9: FPカードホバーのグリーングロー --- */
      .fp-card:hover {
        box-shadow:
          var(--shadow-md),
          0 0 20px rgba(46, 139, 87, 0.12);
      }
      .interview-card:hover {
        box-shadow:
          var(--shadow-md),
          0 0 20px rgba(46, 139, 87, 0.12);
      }

      /* --- 見出し下線のIntersectionObserver用 --- */
      .section-heading {
        opacity: 0;
        transform: translateY(20px);
        transition:
          opacity 0.6s ease,
          transform 0.6s ease;
      }
      .section-heading.is-visible {
        opacity: 1;
        transform: translateY(0);
      }

      /* ========================================
       Rich Background — 背景装飾
       ======================================== */

      /* --- FV: 浮遊する球体 --- */
      @keyframes float-1 {
        0%,
        100% {
          transform: translate(0, 0);
        }
        50% {
          transform: translate(15px, -20px);
        }
      }
      @keyframes float-2 {
        0%,
        100% {
          transform: translate(0, 0);
        }
        50% {
          transform: translate(-20px, 15px);
        }
      }
      @keyframes float-3 {
        0%,
        100% {
          transform: translate(0, 0);
        }
        50% {
          transform: translate(10px, 18px);
        }
      }
      .hero-orb {
        display: none;
      }
      .hero-orb--1 {
        width: 300px;
        height: 300px;
        top: -60px;
        left: -80px;
        animation: float-1 8s ease-in-out infinite;
      }
      .hero-orb--2 {
        width: 180px;
        height: 180px;
        top: 40%;
        right: 10%;
        animation: float-2 10s ease-in-out infinite;
      }
      .hero-orb--3 {
        width: 120px;
        height: 120px;
        bottom: 20%;
        left: 30%;
        animation: float-3 7s ease-in-out infinite;
      }
      .hero-orb--4 {
        width: 220px;
        height: 220px;
        top: 10%;
        right: -60px;
        animation: float-1 12s ease-in-out infinite;
        background: radial-gradient(
          circle at 40% 40%,
          rgba(255, 255, 255, 0.08),
          transparent
        );
      }
      .hero-orb--5 {
        width: 80px;
        height: 80px;
        bottom: 30%;
        left: 15%;
        animation: float-2 6s ease-in-out infinite;
      }
      @media (min-width: 768px) {
        .hero-orb--1 {
          width: 450px;
          height: 450px;
          top: -100px;
          left: -120px;
        }
        .hero-orb--2 {
          width: 280px;
          height: 280px;
        }
        .hero-orb--3 {
          width: 180px;
          height: 180px;
        }
        .hero-orb--4 {
          width: 350px;
          height: 350px;
        }
        .hero-orb--5 {
          width: 120px;
          height: 120px;
        }
      }

      /* --- 白背景セクション: 薄いノイズテクスチャ --- */
      .fp-pickup::before,
      .voices::before,
      .flow::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: radial-gradient(
          circle at 1px 1px,
          rgba(46, 139, 87, 0.02) 1px,
          transparent 0
        );
        background-size: 20px 20px;
        pointer-events: none;
        z-index: 0;
      }
      .voices,
      .flow {
        position: relative;
      }

      /* --- グリーン背景セクション: 有機的なブロブ装飾 --- */
      .features::before {
        content: "";
        position: absolute;
        top: -40px;
        right: -60px;
        width: 300px;
        height: 300px;
        background: radial-gradient(
          ellipse,
          rgba(46, 139, 87, 0.06) 0%,
          transparent 70%
        );
        border-radius: 50%;
        pointer-events: none;
        z-index: 0;
      }
      .features::after {
        content: "";
        position: absolute;
        bottom: -30px;
        left: -40px;
        width: 200px;
        height: 200px;
        background: radial-gradient(
          ellipse,
          rgba(46, 139, 87, 0.05) 0%,
          transparent 70%
        );
        border-radius: 50%;
        pointer-events: none;
        z-index: 0;
      }
      .features {
        position: relative;
        overflow: hidden;
      }

      .interviews::before {
        content: "";
        position: absolute;
        top: 20px;
        left: -80px;
        width: 250px;
        height: 250px;
        background: radial-gradient(
          ellipse,
          rgba(46, 139, 87, 0.05) 0%,
          transparent 70%
        );
        border-radius: 50%;
        pointer-events: none;
        z-index: 0;
      }
      .interviews {
        position: relative;
      }

      /* --- セクション区切り: ウェーブ（mask-image方式） --- */
      .divider-wave {
        position: relative;
        margin-top: -40px;
        padding-top: 100px;
        mask-image:
          url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 15" preserveAspectRatio="none"><path d="M0,0h0v15c6.7,0,13.3-2.5,20-7.5S33.3,0,40,0s13.3,2.5,20,7.5,13.3,7.5,20,7.5,13.3-2.5,20-7.5S113.3,0,120,0s13.3,2.5,20,7.5,13.3,7.5,20,7.5,13.3-2.5,20-7.5S193.3,0,200,0s13.3,2.5,20,7.5,13.3,7.5,20,7.5,13.3-2.5,20-7.5S273.3,0,280,0s13.3,2.5,20,7.5,13.3,7.5,20,7.5V0h0c0,0-320,0-320,0Z"/></svg>'),
          url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"><rect x="0" y="0" height="100" width="100"/></svg>');
        -webkit-mask-image:
          url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 15" preserveAspectRatio="none"><path d="M0,0h0v15c6.7,0,13.3-2.5,20-7.5S33.3,0,40,0s13.3,2.5,20,7.5,13.3,7.5,20,7.5,13.3-2.5,20-7.5S113.3,0,120,0s13.3,2.5,20,7.5,13.3,7.5,20,7.5,13.3-2.5,20-7.5S193.3,0,200,0s13.3,2.5,20,7.5,13.3,7.5,20,7.5,13.3-2.5,20-7.5S273.3,0,280,0s13.3,2.5,20,7.5,13.3,7.5,20,7.5V0h0c0,0-320,0-320,0Z"/></svg>'),
          url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"><rect x="0" y="0" height="100" width="100"/></svg>');
        mask-composite: exclude;
        -webkit-mask-composite: xor;
        mask-size:
          1200px 40px,
          100% 100%;
        -webkit-mask-size:
          1200px 40px,
          100% 100%;
        mask-position:
          left top,
          center top;
        -webkit-mask-position:
          left top,
          center top;
        mask-repeat: repeat-x, no-repeat;
        -webkit-mask-repeat: repeat-x, no-repeat;
      }

      /* --- セクション区切り: 半円（上凸・border-radius方式） --- */
      .divider-curve {
        position: relative;
        border-radius: 50% 50% 0 0 / 60px 60px 0 0;
        margin-top: -60px;
        padding-top: calc(60px + 64px);
      }

      /* --- セクション区切り: 半円（下凸・border-radius方式） --- */
      .divider-curve-down {
        position: relative;
        border-radius: 0 0 50% 50% / 0 0 60px 60px;
        margin-bottom: -60px;
        padding-bottom: calc(60px + 64px);
      }

      /* --- セクション区切り: ウェーブ超緩め --- */
      .divider-wave-gentle {
        position: relative;
        margin-top: -30px;
        padding-top: 80px;
        mask-image:
          url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 15" preserveAspectRatio="none"><path d="M0,0h0v15c6.7,0,13.3-2.5,20-7.5S33.3,0,40,0s13.3,2.5,20,7.5,13.3,7.5,20,7.5,13.3-2.5,20-7.5S113.3,0,120,0s13.3,2.5,20,7.5,13.3,7.5,20,7.5,13.3-2.5,20-7.5S193.3,0,200,0s13.3,2.5,20,7.5,13.3,7.5,20,7.5,13.3-2.5,20-7.5S273.3,0,280,0s13.3,2.5,20,7.5,13.3,7.5,20,7.5V0h0c0,0-320,0-320,0Z"/></svg>'),
          url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"><rect x="0" y="0" height="100" width="100"/></svg>');
        -webkit-mask-image:
          url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 15" preserveAspectRatio="none"><path d="M0,0h0v15c6.7,0,13.3-2.5,20-7.5S33.3,0,40,0s13.3,2.5,20,7.5,13.3,7.5,20,7.5,13.3-2.5,20-7.5S113.3,0,120,0s13.3,2.5,20,7.5,13.3,7.5,20,7.5,13.3-2.5,20-7.5S193.3,0,200,0s13.3,2.5,20,7.5,13.3,7.5,20,7.5,13.3-2.5,20-7.5S273.3,0,280,0s13.3,2.5,20,7.5,13.3,7.5,20,7.5V0h0c0,0-320,0-320,0Z"/></svg>'),
          url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"><rect x="0" y="0" height="100" width="100"/></svg>');
        mask-composite: exclude;
        -webkit-mask-composite: xor;
        mask-size:
          4800px 24px,
          100% 100%;
        -webkit-mask-size:
          4800px 24px,
          100% 100%;
        mask-position:
          left top,
          center top;
        -webkit-mask-position:
          left top,
          center top;
        mask-repeat: repeat-x, no-repeat;
        -webkit-mask-repeat: repeat-x, no-repeat;
      }

      @media (min-width: 768px) {
        .divider-wave {
          margin-top: -50px;
          padding-top: 110px;
          mask-size:
            1600px 50px,
            100% 100%;
          -webkit-mask-size:
            1600px 50px,
            100% 100%;
        }
        .divider-wave-gentle {
          margin-top: -40px;
          padding-top: 90px;
          mask-size:
            6400px 30px,
            100% 100%;
          -webkit-mask-size:
            6400px 30px,
            100% 100%;
        }
        .divider-curve {
          border-radius: 50% 50% 0 0 / 100px 100px 0 0;
          margin-top: -100px;
          padding-top: calc(100px + 80px);
        }
        .divider-curve-down {
          border-radius: 0 0 50% 50% / 0 0 100px 100px;
          margin-bottom: -100px;
          padding-bottom: calc(100px + 80px);
        }

        .features::before {
          width: 500px;
          height: 500px;
          top: -80px;
          right: -100px;
        }
        .features::after {
          width: 350px;
          height: 350px;
          bottom: -60px;
          left: -80px;
        }
      }

      /* --- prefers-reduced-motion: Living Green対応 --- */
      @media (prefers-reduced-motion: reduce) {
        .btn-primary:hover .arrow {
          animation: none;
          transform: translateX(4px);
        }
        .flow__number {
          opacity: 1;
          transform: none;
        }
        .flow__content {
          opacity: 1;
          transform: none;
        }
        .flow__image {
          opacity: 1;
          transform: none;
        }
        .flow__steps::before {
          transform: scaleY(1);
        }
        .flow__particle {
          display: none;
        }
        .voices__quote-mark path {
          stroke-dashoffset: 0;
          transition: none;
        }
        .footer-leaf {
          animation: none;
        }
        .hero-orb {
          animation: none;
        }
        .section-heading {
          opacity: 1;
          transform: none;
          transition: none;
        }
      }

      /* ========================================
       FPフィルター（トップページ用）
       ======================================== */
      .fp-filter {
        background: var(--color-bg-white);
        padding: var(--space-3xl) var(--space-md) var(--space-xl);
      }

      .fp-filter__inner {
        max-width: var(--content-max);
        margin: 0 auto;
      }

      .fp-filter__bar {
        margin-top: var(--space-lg);
      }

      .fp-filter__group {
        margin-bottom: var(--space-md);
      }

      .fp-filter__label {
        display: block;
        font-size: var(--text-sm);
        font-weight: 700;
        color: var(--color-text);
        margin-bottom: var(--space-xs);
      }

      .fp-filter__chips {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-xs);
      }

      .fp-filter__select {
        display: block;
        width: 100%;
        max-width: 280px;
        padding: var(--space-xs) var(--space-md);
        font-family: var(--font-sans);
        font-size: var(--text-sm);
        color: var(--color-text);
        background: var(--color-bg-white);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-sm);
        cursor: pointer;
        transition: var(--transition-base);
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 12px center;
        padding-right: 36px;
      }

      .fp-filter__select:focus {
        outline: none;
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px rgba(46, 139, 87, 0.15);
      }

      .fp-filter__note {
        font-size: var(--text-sm);
        color: var(--color-text-sub);
        line-height: var(--leading-relaxed);
        margin-top: var(--space-md);
        margin-bottom: var(--space-xl);
      }

      .fp-filter__cta {
        margin-top: var(--space-xl);
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--space-sm);
      }
      .fp-filter__reset-link {
        background: none;
        border: none;
        padding: 0;
        font-size: var(--text-sm);
        color: var(--color-text-light);
        cursor: pointer;
        text-decoration: underline;
        text-underline-offset: 3px;
      }
      .fp-filter__reset-link:hover {
        color: var(--color-text);
      }

      @media (min-width: 768px) {
        .fp-filter {
          padding: var(--space-4xl) var(--space-xl) var(--space-2xl);
        }

        .fp-filter__bar {
          display: flex;
          flex-wrap: wrap;
          gap: var(--space-lg);
          align-items: flex-end;
        }

        .fp-filter__group {
          margin-bottom: 0;
        }
      }

      /* ========================================
         スマホ専用上書き (max 767px)
         2026-04-29 mobile-audit対応
         ======================================== */
      @media (max-width: 767px) {
        /* M2: ヘッダー — ロゴをやや大きく見やすく */
        .site-header__inner {
          padding: 8px var(--space-sm);
        }
        .site-header__logo img {
          height: 36px;
        }
        body {
          padding-top: 56px;
        }

        /* ハンバーガーのタップ領域を拡大 */
        .hamburger {
          width: 44px;
          height: 44px;
          padding: 10px 6px;
          pointer-events: auto;
        }

        /* H7: 見出しの孤立行（「か？」だけ折返し）を防ぐ
           overflow-wrap は外す: keep-all単体で粒度を保ち、必要なときだけ
           CSSのline-break: strict で句読点孤立を抑える */
        .section-heading > span,
        .cta-final__heading {
          word-break: keep-all;
          line-break: strict;
        }

        /* H5: STEP本文の途中分断を緩和 */
        .flow__step-body {
          word-break: keep-all;
          line-break: strict;
        }

        /* flow__title: 左パディングを抑え font を一段縮める */
        .flow__title {
          padding-left: var(--space-sm);
          font-size: var(--text-xl);
          word-break: keep-all;
          line-break: strict;
        }

        /* L3: フッターリンクを2列均等 */
        .site-footer__links {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: var(--space-md) var(--space-md);
        }

        /* H8: cta-final 表示時は固定CTAを非表示にするためのクラス */
        .fixed-cta.is-hidden {
          display: none !important;
        }

        /* L2: チップを少しコンパクトに（折返し時のバランス改善） */
        .hero-chips .chip,
        .fp-filter__chips .chip {
          font-size: 0.82rem;
          padding: var(--space-2xs) var(--space-sm);
        }

        /* M3: ヒーローキャッチの不自然な折返しを抑える */
        .tagline-band__heading {
          font-size: 1.35rem;
          line-height: 1.6;
          word-break: keep-all;
          line-break: strict;
        }

        /* === 実機FBラウンド2 (2026-04-29 追加) === */

        /* セクション見出しの実機オーバーフロー対策。
           keep-all で粒度を保ちつつ、収まらないときは折り返し許容（line-break: loose）。
           font-size も一段ダウン */
        .section-heading {
          font-size: 1.4rem;
          padding-top: var(--space-md);
          padding-bottom: var(--space-sm);
          margin-bottom: var(--space-lg);
        }
        .section-heading::before {
          font-size: 2rem;
        }
        .section-heading > span,
        .cta-final__heading {
          word-break: keep-all;
          line-break: loose;
          overflow-wrap: break-word;
        }

        /* FVサブ「第三者が取材した〜」を句読点位置で改行 */
        .tagline-band__sub {
          word-break: keep-all;
          line-break: strict;
        }

        /* flow__title をセンター寄せ + パディング解除 + 下に余白を追加 */
        .flow__inner .flow__title,
        .flow__title {
          text-align: center;
          padding-left: 0;
          font-size: 1.3rem;
          margin-bottom: var(--space-2xl);
        }

        /* flow__step-body 等が右側に切れる対策 */
        .flow__step-body,
        .flow__step-label {
          word-break: keep-all;
          overflow-wrap: anywhere;
          line-break: loose;
        }
        .flow__image {
          padding-left: 0;
        }

        /* ステップ番号の丸を小さく + step列幅も連動して縮小 */
        .flow__step {
          grid-template-columns: 36px 1fr;
          column-gap: var(--space-sm);
        }
        .flow__step:not(:last-child)::before {
          left: 17px;
          top: 36px;
          height: calc(100% - 36px);
        }
        .flow__number {
          width: 36px;
          height: 36px;
          box-shadow: 0 3px 8px rgba(46, 139, 87, 0.2);
        }
        .flow__number span {
          font-size: 0.95rem;
        }
        .flow__number--goal {
          width: 40px;
          height: 40px;
          margin-left: -2px;
        }

        /* interviews/features セクション上の半円カーブを「より正円」に。
           horizontal radius 50% × vertical 100px で深いドーム */
        .divider-curve {
          margin-top: 0;
          border-radius: 50% 50% 0 0 / 100px 100px 0 0;
          padding-top: calc(100px + var(--space-md));
        }
        /* 前セクションのsub-CTAに底余白を確保 */
        .flow__sub-cta {
          padding-bottom: var(--space-3xl);
        }

        /* === FBラウンド3 (2026-04-29) === */

        /* cta-final見出しをスマホで2行に確実に収める */
        .cta-final__heading {
          font-size: 1.3rem;
          line-height: 1.5;
        }
        .cta-final__body {
          font-size: 0.95rem;
          line-height: 1.7;
        }

        /* features 01-03 の数字を一段小さく */
        .features__label span {
          font-size: 2.4rem;
        }
        .features__title {
          font-size: 1.05rem;
        }

        /* hero テキストを下方向に寄せて顔と被らないように */
        .hero-inner {
          align-items: flex-end;
          padding-bottom: var(--space-lg);
        }
        .hero-headline {
          font-size: 1.45rem;
        }
      }

/* ===== 固定ページ共通スタイル ===== */
:root {
  --g-dark:   #277e50;
  --g-mid:    #1f6640;
  --g-accent: #277e50;
  --g-light:  #e6f4ec;
  --cream:    #faf8f4;
  --text:     #1c1c1c;
  --muted:    #5a5a5a;
  --border:   #c8e0d2;
}
* { margin:0; padding:0; box-sizing:border-box; }
/* 固定ページ共通：背景色とフォント */
body.is-fixed-page { background: var(--cream); }
.content { font-family:'Noto Sans JP',sans-serif; font-weight:300; color:var(--text); }

/* === ヘッダー（既存サイト流用） === */
.site-header {
  position: fixed; top: 0; left: 0; width: 100%;
  z-index: 110;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 24px;
  max-width: 1200px; margin: 0 auto;
}
.site-header__logo { display: flex; align-items: center; }
.site-header__logo img { height: 44px; width: auto; display: block; }

.hamburger {
  display: flex; flex-direction: column; justify-content: center;
  gap: 5px; width: 32px; height: 32px;
  background: none; border: none; cursor: pointer; padding: 4px; z-index: 110;
}
.hamburger__line {
  display: block; width: 100%; height: 2px;
  background: var(--text); border-radius: 1px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.hamburger.is-open .hamburger__line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.is-open .hamburger__line:nth-child(2) { opacity: 0; }
.hamburger.is-open .hamburger__line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.sp-nav {
  position: fixed; top: 0; right: 0;
  width: min(280px, 80vw); height: 100vh; height: 100dvh;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  z-index: 105;
  padding: 80px 24px 32px;
  transform: translateX(100%);
  transition: transform 0.35s ease;
  box-shadow: -4px 0 24px rgba(0,0,0,0.08);
}
.sp-nav.is-open { transform: translateX(0); }
.sp-nav__list { list-style: none; display: flex; flex-direction: column; gap: 0; }
.sp-nav__list li { border-bottom: 1px solid var(--g-light); }
.sp-nav__list a {
  display: block; padding: 16px 0;
  font-size: 15px; font-weight: 500;
  color: var(--text); text-decoration: none;
  font-family: 'Zen Maru Gothic', sans-serif;
}
.sp-nav__list a:hover { color: var(--g-dark); }

.sp-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.3);
  z-index: 104;
  opacity: 0; pointer-events: none;
  transition: opacity 0.35s ease;
}
.sp-overlay.is-open { opacity: 1; pointer-events: auto; }

.site-header__nav { display: none; list-style: none; }

@media (min-width: 768px) {
  .hamburger { display: none; }
  .sp-nav { display: none; }
  .sp-overlay { display: none; }
  .site-header__nav {
    display: flex; gap: 28px; align-items: center;
  }
  .site-header__nav a {
    font-size: 13.5px; font-weight: 500; color: var(--muted);
    font-family: 'Zen Maru Gothic', sans-serif;
    text-decoration: none; transition: color 0.2s;
  }
  .site-header__nav a:hover { color: var(--g-dark); }
  .site-header__nav .nav-btn-fp {
    display: inline-block;
    padding: 7px 18px;
    border: 1.5px solid var(--g-dark);
    border-radius: 8px;
    background: #fff; color: var(--g-dark);
    font-weight: 700;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    transition: background 0.2s, color 0.2s, box-shadow 0.2s;
  }
  .site-header__nav .nav-btn-fp:hover {
    background: var(--g-light);
    box-shadow: 0 2px 8px rgba(46,139,87,0.15);
  }
}

@media (max-width: 767px) {
  .site-header__inner { padding: 8px 16px; }
  .site-header__logo img { height: 36px; }
  body { padding-top: 56px; }
}

/* === ZIPデザイン（クライアント指定） === */
.page-hero { background:var(--g-dark); padding:64px 40px 48px; position:relative; overflow:hidden; }
.page-hero::before { content:''; position:absolute; top:-60px; right:-60px; width:320px; height:320px; box-sizing:content-box; border-radius:50%; border:70px solid rgba(255,255,255,0.03); z-index:0; pointer-events:none; }
.page-hero .en { font-family:'Cormorant Garamond',serif; font-size:clamp(40px,7vw,72px); font-weight:600; color:rgba(255,255,255,0.07); line-height:1; margin-bottom:6px; letter-spacing:3px; }
.page-hero h1 { font-family:'Zen Maru Gothic',sans-serif; font-size:clamp(22px,3vw,30px); color:white; font-weight:600; }

.content { max-width:760px; margin:0 auto; padding:56px 40px 80px; }
.content h2 { font-family:'Zen Maru Gothic',sans-serif; font-size:17px; font-weight:600; color:var(--g-dark); margin:44px 0 16px; padding-bottom:10px; border-bottom:2px solid var(--g-accent); }
.content h2:first-child { margin-top:0; }
.content p { font-size:14.5px; line-height:1.95; color:var(--text); margin-bottom:16px; }
.content ul { margin:10px 0 20px 20px; }
.content ul li { font-size:14.5px; line-height:1.9; margin-bottom:8px; }
.content table { width:100%; border-collapse:collapse; margin:16px 0 24px; font-size:13.5px; }
.content table th, .content table td { padding:12px 16px; border:1px solid var(--border); text-align:left; line-height:1.7; }
.content table th { background:var(--g-light); font-weight:500; color:var(--g-dark); width:30%; }

.warn-box { padding:32px 0 28px; margin:0 0 36px; font-family:'Zen Maru Gothic',sans-serif; font-size:17px; line-height:2; color:var(--g-dark); border-bottom:1px solid var(--border); font-weight:700; }

.pledge-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:20px; margin:32px 0; }
.pledge-card { background:white; border:1px solid var(--border); border-radius:10px; padding:28px; position:relative; overflow:hidden; }
.pledge-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--g-accent); }
.pledge-num { font-family:'Cormorant Garamond',serif; font-size:44px; color:var(--g-dark); line-height:1; margin-bottom:10px; font-weight:600; }
.pledge-card h3 { font-family:'Zen Maru Gothic',sans-serif; font-size:15px; font-weight:700; color:var(--text); margin-bottom:10px; line-height:1.6; }
.pledge-card p { font-size:13px; line-height:1.85; color:var(--muted); }
.pledge-card a { color:var(--g-accent); }

.form-group { margin-bottom:22px; }
.form-group label { display:block; font-size:13.5px; font-weight:500; margin-bottom:8px; color:var(--g-dark); }
.form-group label .req { display:inline-block; background:var(--g-accent); color:white; font-size:10px; padding:1px 7px; border-radius:3px; margin-left:8px; font-weight:400; vertical-align:middle; }
.form-group input, .form-group select, .form-group textarea { width:100%; padding:11px 14px; border:1px solid var(--border); border-radius:6px; font-family:'Noto Sans JP',sans-serif; font-size:13.5px; font-weight:300; color:var(--text); background:white; transition:border-color .2s; outline:none; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color:var(--g-accent); }
.form-group textarea { resize:vertical; min-height:130px; }
.btn-submit { background:var(--g-dark); color:white; padding:13px 44px; border:none; border-radius:4px; font-family:'Noto Sans JP',sans-serif; font-size:14px; cursor:pointer; transition:background .2s; letter-spacing:1px; }
.btn-submit:hover { background:var(--g-mid); }

.page-footer-nav { background:var(--g-dark); padding:28px 40px; display:flex; flex-wrap:wrap; gap:20px; justify-content:center; }
.page-footer-nav a { color:rgba(255,255,255,0.6); text-decoration:none; font-size:12.5px; transition:color .2s; font-family:'Zen Maru Gothic',sans-serif; }
.page-footer-nav a:hover { color:white; }

@media (max-width:600px) {
  .page-hero { padding:48px 20px 36px; }
  .content { padding:40px 20px 60px; }
  .page-footer-nav { padding:20px; gap:14px; }
}

/* ===== FP一覧ページ固有スタイル ===== */
       FPカード（TOPから再利用）
       ======================================== */
    .fp-card {
      display: flex;
      flex-direction: column;
      background: var(--color-bg-white);
      border: 1px solid rgba(0, 0, 0, 0.06);
      border-radius: var(--radius-md);
      box-shadow: var(--shadow-sm);
      overflow: hidden;
      text-decoration: none;
      color: inherit;
      transition: var(--transition-base);
    }
    .fp-card:hover {
      box-shadow: var(--shadow-md);
      transform: translateY(-4px);
    }
    .fp-card__photo {
      overflow: hidden;
      aspect-ratio: 1 / 1;
      background: var(--color-primary-100);
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }

    /* --- 金融詐欺撲滅宣言バッジ --- */
    .fraud-badge {
      position: absolute;
      top: 8px;
      right: 8px;
      width: 52px;
      height: auto;
      z-index: 2;
      pointer-events: none;
    }
    .fraud-badge img {
      width: 100%;
      height: auto;
      display: block;
    }
    .fp-card__photo img { width: 100%; height: 100%; object-fit: cover; }
    .fp-card__initial {
      font-family: var(--font-mono);
      font-size: var(--text-4xl);
      font-weight: 700;
      color: var(--color-primary-600);
      line-height: 1;
      user-select: none;
    }
    .fp-card__body { padding: var(--space-md); flex: 1; }
    .fp-card__name {
      font-size: var(--text-base);
      font-weight: 700;
      color: var(--color-text);
      line-height: var(--leading-tight);
    }
    .fp-card__quote {
      font-size: var(--text-sm);
      color: var(--color-text-sub);
      line-height: var(--leading-normal);
      margin-top: var(--space-xs);
    }
    .fp-card__tags {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-2xs);
      margin-top: var(--space-sm);
    }
    .fp-card__area {
      font-size: var(--text-xs);
      color: var(--color-text-sub);
      margin-top: var(--space-sm);
    }
    .fp-card__cta {
      display: block;
      padding: var(--space-sm) var(--space-md);
      font-size: var(--text-sm);
      font-weight: 600;
      color: var(--color-link);
      border-top: 1px solid rgba(0, 0, 0, 0.06);
      transition: var(--transition-base);
    }
    .fp-card:hover .fp-card__cta { color: var(--color-link-hover); }

    /* ========================================
       ページ固有CSS: FP一覧・検索
       ======================================== */

    /* --- セクション1: フィルタヘッダー --- */
    .fp-filter {
      background: var(--color-bg-white);
      padding: var(--space-3xl) var(--space-md) var(--space-xl);
    }

    .fp-filter__inner {
      max-width: var(--content-max);
      margin: 0 auto;
    }

    .fp-filter__bar {
      margin-top: var(--space-lg);
    }

    .fp-filter__group {
      margin-bottom: var(--space-md);
    }

    .fp-filter__label {
      display: block;
      font-size: var(--text-sm);
      font-weight: 700;
      color: var(--color-text);
      margin-bottom: var(--space-xs);
    }

    .fp-filter__chips {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-xs);
    }

    .fp-filter__select {
      display: block;
      width: 100%;
      max-width: 280px;
      padding: var(--space-xs) var(--space-md);
      font-family: var(--font-sans);
      font-size: var(--text-sm);
      color: var(--color-text);
      background: var(--color-bg-white);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-sm);
      cursor: pointer;
      transition: var(--transition-base);
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 12px center;
      padding-right: 36px;
    }

    .fp-filter__select:focus {
      outline: none;
      border-color: var(--color-primary);
      box-shadow: 0 0 0 3px rgba(46, 139, 87, 0.15);
    }

    .fp-filter__note {
      font-size: var(--text-sm);
      color: var(--color-text-sub);
      line-height: var(--leading-relaxed);
      margin-top: var(--space-md);
      margin-bottom: var(--space-xl);
    }

    @media (min-width: 768px) {
      .fp-filter {
        padding: var(--space-4xl) var(--space-xl) var(--space-2xl);
      }

      .fp-filter__bar {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-lg);
        align-items: flex-end;
      }

      .fp-filter__group {
        margin-bottom: 0;
      }
    }

    /* --- セクション2: FPカードグリッド --- */
    .fp-list {
      background: var(--color-bg-light);
      padding: var(--space-xl) var(--space-md) var(--space-3xl);
    }

    .fp-list__inner {
      max-width: var(--content-max);
      margin: 0 auto;
    }

    .fp-list__count {
      font-size: var(--text-base);
      color: var(--color-text-sub);
      margin-bottom: var(--space-lg);
    }

    .fp-list__count strong {
      color: var(--color-text);
      font-weight: 700;
    }

    .fp-list__grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-lg);
    }

    @media (min-width: 768px) {
      .fp-list {
        padding: var(--space-2xl) var(--space-xl) var(--space-4xl);
      }

      .fp-list__grid {
        grid-template-columns: repeat(3, 1fr);
      }
    }

    /* --- セクション3: 代替CTA --- */
    .fp-fallback-cta {
      background: var(--color-bg-white);
      padding: var(--space-2xl) var(--space-md);
    }

    .fp-fallback-cta__inner {
      max-width: var(--text-max);
      margin: 0 auto;
      text-align: center;
    }

    .fp-fallback-cta__heading {
      font-size: var(--text-xl);
      font-weight: 700;
      color: var(--color-text);
      line-height: var(--leading-snug);
      margin-bottom: var(--space-md);
    }

    .fp-fallback-cta__body {
      font-size: var(--text-base);
      color: var(--color-text-sub);
      line-height: var(--leading-relaxed);
      margin-bottom: var(--space-lg);
    }

    .fp-fallback-cta__body strong {
      color: var(--color-text);
      font-weight: 700;
    }

    @media (min-width: 768px) {
      .fp-fallback-cta {
        padding: var(--space-3xl) var(--space-xl);
      }
    }

    /* --- セクション4: 件数ゼロ時メッセージ --- */
    .fp-empty {
      background: var(--color-bg-light);
      padding: var(--space-2xl) var(--space-md);
      text-align: center;
      display: none;
    }

    .fp-empty__inner {
      max-width: var(--text-max);
      margin: 0 auto;
    }

    .fp-empty__heading {
      font-size: var(--text-xl);
      font-weight: 700;
      color: var(--color-text);
      line-height: var(--leading-snug);
      margin-bottom: var(--space-md);
    }

    .fp-empty__body {
      font-size: var(--text-base);
      color: var(--color-text-sub);
      line-height: var(--leading-relaxed);
      margin-bottom: var(--space-lg);
    }

    .fp-empty__body strong {
      color: var(--color-text);
      font-weight: 700;
    }

    .fp-empty__buttons {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--space-sm);
    }

    @media (min-width: 768px) {
      .fp-empty__buttons {
        flex-direction: row;
        justify-content: center;
        gap: var(--space-md);
      }
    }

    /* --- 検索フォーム --- */
    .fp-filter__search {
      position: relative;
      max-width: 520px;
      margin: 0 auto var(--space-lg);
    }

    .fp-filter__search-input {
      display: block;
      width: 100%;
      height: 48px;
      padding: 0 48px 0 16px;
      font-family: var(--font-sans);
      font-size: var(--text-sm);
      color: var(--color-text);
      background: var(--color-bg-white);
      border: 2px solid var(--color-border);
      border-radius: var(--radius-md);
      outline: none;
      box-sizing: border-box;
      transition: border-color 0.2s, box-shadow 0.2s;
    }

    .fp-filter__search-input::placeholder {
      color: var(--color-text-light);
    }

    .fp-filter__search-input:focus {
      border-color: var(--color-primary);
      box-shadow: 0 0 0 3px rgba(46, 139, 87, 0.18);
    }

    .fp-filter__search-btn {
      position: absolute;
      right: 6px;
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      background: var(--color-primary);
      color: var(--color-bg-white);
      border: none;
      border-radius: var(--radius-sm);
      cursor: pointer;
      transition: background 0.2s;
    }

    .fp-filter__search-btn:hover {
      background: var(--color-primary-dark);
    }

    @media (min-width: 768px) {
      .fp-filter__search-input {
        height: 56px;
        font-size: var(--text-base);
        padding: 0 56px 0 20px;
      }

      .fp-filter__search-btn {
        right: 8px;
        width: 40px;
        height: 40px;
      }
      /* PCではsp-onlyの<br>を無効化 */
      br.sp-only {
        display: none;
      }
    }

    /* ========================================
       スマホ専用上書き (max 767px)
       2026-04-29 mobile-audit対応
       ======================================== */
    @media (max-width: 767px) {
      /* M2: ヘッダー — ロゴをやや大きく */
      .site-header__inner {
        padding: 8px var(--space-sm);
      }
      .site-header__logo img {
        height: 36px;
      }
      body {
        padding-top: 56px;
      }
      .hamburger {
        width: 44px;
        height: 44px;
        padding: 10px 6px;
        pointer-events: auto;
      }

      /* H7: section-heading の和文タイトル分断防止 */
      .section-heading {
        font-size: 1.4rem;
        padding-top: var(--space-md);
        padding-bottom: var(--space-sm);
        margin-bottom: var(--space-lg);
      }
      .section-heading::before {
        font-size: 2rem;
      }
      .section-heading > span {
        word-break: keep-all;
        line-break: loose;
        overflow-wrap: break-word;
      }

      /* L2: フィルタチップを少し小さく */
      .fp-filter__chips .chip {
        font-size: 0.82rem;
        padding: var(--space-2xs) var(--space-sm);
      }

      /* L3: フッターリンク2列均等 */
      .site-footer__links {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-md) var(--space-md);
      }

      /* H8: 固定CTAをfooter可視時に隠す共通クラス */
      .fixed-cta.is-hidden {
        display: none !important;
      }
    }


/* ===== FP個別ページ固有スタイル ===== */
    /* --- セクション1: FPヘッダー --- */
    /* --- FV: フルブリード写真ヘッダー --- */
    .fp-header {
      position: relative;
      overflow: hidden;
      background: #FFFFFF;
      padding: 0;
      font-family: 'Noto Sans JP', var(--font-sans);
    }
    .fp-header::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 60%;
      background: #0C7706;
      z-index: 0;
    }
    .fp-header__bg-wrap {
      position: relative;
      z-index: 1;
      width: calc(100% - var(--space-xl) * 2);
      max-width: var(--wide-max);
      margin: 0 auto;
      margin-bottom: var(--space-xl);
    }
    .fp-header__bg {
      display: block;
      width: 100%;
      object-fit: contain;
    }
    .fp-header__inner {
      max-width: var(--wide-max);
      margin: 0 auto;
    }

    /* --- 左上キャッチコピー帯 --- */
    .fp-header__catchband {
      position: absolute;
      top: var(--space-xl);
      left: var(--space-xl);
      z-index: 4;
      background: transparent;
      padding: var(--space-lg) var(--space-xl);
      width: 48%;
      max-width: 620px;
      box-sizing: border-box;
    }
    /* グレー透過背景を画面左端まで伸ばす */
    .fp-header__catchband::before {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      /* 左端まで伸ばす */
      left: calc(-1 * var(--space-xl));
      background: rgba(80, 80, 80, 0.5);
      z-index: -1;
    }
    .fp-header__catchband p {
      font-family: 'Noto Sans JP', var(--font-sans);
      font-size: clamp(1.2rem, 2.5vw, 2rem);
      font-weight: 700;
      color: #FFFFFF;
      line-height: 1.2;
      letter-spacing: 0.1em;
      margin: 0;
    }

    @media (min-width: 768px) {
      .fp-header__catchband {
        top: var(--space-2xl);
        left: calc(50% - var(--wide-max) / 2);
        width: 44%;
        max-width: 620px;
        padding: var(--space-xl) var(--space-2xl);
      }
      .fp-header__catchband::before {
        /* PC: 写真左端から画面左端までの距離分 */
        left: calc(-1 * (50vw - var(--wide-max) / 2));
      }
      .fp-header__catchband p {
        font-size: clamp(1.5rem, 2.5vw, 2.2rem);
      }
    }

    /* INTERVIEW 縦テキスト */
    .fp-header__label {
      position: absolute;
      top: 0;
      right: var(--space-xs);
      writing-mode: vertical-rl;
      font-family: 'Oswald', var(--font-mono);
      font-weight: 700;
      letter-spacing: -0.02em;
      color: transparent;
      -webkit-text-stroke: 2px rgba(255, 255, 255, 1);
      text-transform: uppercase;
      pointer-events: none;
      z-index: 2;
      line-height: 1;
      font-size: var(--interview-font-size, 5vw);
      height: var(--interview-height, 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    /* 左下オーバーレイ：プロフィール情報 */
    .fp-header__overlay {
      position: absolute;
      bottom: calc(var(--space-xl) + var(--space-lg));
      left: calc(var(--space-xl) + var(--space-lg));
      z-index: 3;
      background: rgba(255, 255, 255, 0.5);
      padding: var(--space-lg) var(--space-xl);
      border-radius: 0;
      display: flex;
      align-items: center;
      gap: var(--space-lg);
      max-width: 520px;
      width: 42%;
    }
    .fp-header__overlay-photo {
      flex-shrink: 0;
      width: 80px;
      height: 80px;
      border-radius: 50%;
      overflow: hidden;
      border: 3px solid var(--color-primary);
    }
    .fp-header__overlay-photo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .fp-header__overlay-text {
      flex: 1;
      min-width: 0;
    }

    /* --- 右上三角 + ナンバー --- */
    .fp-header__corner {
      position: absolute;
      top: 0;
      right: 0;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 0 100px 100px 0;
      border-color: transparent rgba(80, 80, 80, 0.7) transparent transparent;
      z-index: 5;
    }
    .fp-header__corner-num {
      position: absolute;
      top: 12px;
      right: -88px;
      font-family: 'Noto Serif JP', serif;
      font-size: 1.4rem;
      font-weight: 700;
      color: #FFFFFF;
      line-height: 1;
      white-space: nowrap;
    }
    .fp-header__corner-hash {
      font-size: 0.8rem;
      vertical-align: baseline;
    }

    /* --- 名前ブロック --- */
    .fp-header__name-block {
      display: flex;
      align-items: flex-end;
      gap: var(--space-md);
    }
    .fp-header__name-area {
      flex: 1;
      min-width: 0;
    }
    .fp-header__name-en {
      font-family: 'Noto Serif JP', serif;
      font-size: var(--text-sm);
      font-weight: 400;
      color: var(--color-text-sub);
      letter-spacing: 0.3em;
      line-height: 1;
      margin-bottom: var(--space-2xs);
    }
    .fp-header__name {
      font-size: clamp(1.6rem, 4vw, 2.4rem);
      font-weight: 700;
      color: var(--color-text);
      line-height: 1.1;
      white-space: nowrap;
    }

    /* --- バッジ（FP個別ページヘッダーのみ大きいサイズ） --- */
    .fp-header .fraud-badge {
      position: absolute;
      top: var(--space-sm);
      right: var(--space-sm);
      width: 64px;
      height: auto;
      pointer-events: none;
      z-index: 5;
    }
    .fp-header .fraud-badge img {
      width: 100%;
      height: auto;
      display: block;
    }

    /* --- タグ --- */
    .fp-header__tags {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-xs);
      margin-top: var(--space-md);
    }
    .fp-header__tags .tag {
      background: #ef9e1e;
      color: #FFFFFF;
      font-size: var(--text-xs);
      padding: var(--space-2xs) var(--space-sm);
    }

    /* --- 説明文 --- */
    .fp-header__desc {
      font-size: var(--text-xs);
      color: var(--color-text);
      line-height: var(--leading-loose);
      margin-top: var(--space-md);
    }


    @media (min-width: 768px) {
      .fp-header__bg {
        margin-bottom: var(--space-2xl);
      }
      .fp-header__overlay {
        bottom: calc(var(--space-2xl) + var(--space-xl));
        left: calc(50% - var(--wide-max) / 2 + var(--space-xl));
        padding: var(--space-xl) var(--space-2xl);
        max-width: 520px;
        width: 38%;
        gap: var(--space-xl);
      }
      .fp-header__name {
        font-size: clamp(2rem, 4vw, 2.8rem);
      }
      .fp-header__label {
        right: var(--space-sm);
      }
      .fp-header__corner {
        border-width: 0 130px 130px 0;
      }
      .fp-header__corner-num {
        top: 16px;
        right: -114px;
        font-size: 1.8rem;
      }
      .fp-header__corner-hash {
        font-size: 1rem;
      }
      .fp-header__desc {
        font-size: var(--text-sm);
      }
      .fp-header .fraud-badge {
        width: 80px;
      }
    }

    /* --- スマホ専用上書き (max 767px) --- */
    @media (max-width: 767px) {
      /* 緑背景は明示的なcatchband要素に任せる */
      .fp-header::after {
        display: none;
      }
      .fp-header__bg-wrap {
        width: 100%;
        margin: 0;
        margin-bottom: 0;
      }
      /* キャッチを写真上の絶対配置から外し、写真下に縦積み */
      .fp-header__catchband {
        position: static;
        width: auto;
        max-width: none;
        padding: var(--space-lg) var(--space-md) var(--space-md);
        background: #0C7706;
      }
      .fp-header__catchband::before {
        display: none;
      }
      .fp-header__catchband p {
        font-size: 1.5rem;
        line-height: 1.4;
        letter-spacing: 0.04em;
      }
      /* 縦書きINTERVIEWは非表示 */
      .fp-header__label {
        display: none;
      }
      /* オーバーレイ（プロフィール）も写真上の絶対配置を解除し帯下へ */
      .fp-header__overlay {
        position: relative;
        bottom: auto;
        left: auto;
        width: 100%;
        max-width: none;
        background: rgba(255, 255, 255, 0.95);
        margin: 0;
        padding: var(--space-md);
        gap: var(--space-md);
      }
      .fp-header__overlay-photo {
        width: 64px;
        height: 64px;
      }
      /* 名前は折り返し許可 */
      .fp-header__name {
        white-space: normal;
        font-size: 1.4rem;
      }
      /* 右上の三角ナンバーは小さく */
      .fp-header__corner {
        border-width: 0 64px 64px 0;
      }
      .fp-header__corner-num {
        top: 6px;
        right: -56px;
        font-size: 1rem;
      }
      .fp-header__corner-hash {
        font-size: 0.7rem;
      }
      /* 詐欺撲滅バッジを縮小・位置調整 */
      .fp-header .fraud-badge {
        width: 44px;
        top: 8px;
        right: 8px;
      }
      /* 説明テキストの分断回避 */
      .fp-header__desc {
        word-break: keep-all;
        overflow-wrap: anywhere;
      }

      /* --- 共通: ヘッダー（ロゴをやや大きく） --- */
      .site-header__inner {
        padding: 8px var(--space-sm);
      }
      .site-header__logo img {
        height: 36px;
      }
      body {
        padding-top: 56px;
      }
      .hamburger {
        width: 44px;
        height: 44px;
        padding: 10px 6px;
        pointer-events: auto;
      }

      /* --- 共通: フッターリンクを2列均等に --- */
      .site-footer__links {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-md) var(--space-md);
      }

      /* H8: 固定CTAをfooter可視時に隠す共通クラス */
      .fixed-cta.is-hidden {
        display: none !important;
      }

      /* --- 共通: section-headingの英字+和文の分断防止 --- */
      .section-heading {
        font-size: 1.4rem;
        padding-top: var(--space-md);
        padding-bottom: var(--space-sm);
        margin-bottom: var(--space-lg);
      }
      .section-heading::before {
        font-size: 2rem;
      }
      .section-heading > span,
      .cta-final__heading {
        word-break: keep-all;
        line-break: loose;
        overflow-wrap: break-word;
      }

      /* sp-only br をスマホでのみ有効化（PC側のデフォルト display:none を上書き） */
      br.sp-only {
        display: inline !important;
      }
      /* CTA本文・サブテキスト・予約脚注の分断防止 */
      .fp-cta-bottom__body,
      .fp-cta-bottom__sub-text,
      .fp-booking__note {
        word-break: keep-all;
        line-break: loose;
        overflow-wrap: break-word;
      }
    }
    /* PCでは sp-only の<br>を無効化（デフォルト） */
    br.sp-only {
      display: none;
    }

    /* --- セクション2: プロフィールサマリ --- */
    .fp-profile {
      background: var(--color-bg-white);
      padding: var(--space-2xl) var(--space-md);
    }
    .fp-profile__inner {
      max-width: var(--content-max);
      margin: 0 auto;
    }
    .fp-profile__table {
      width: 100%;
      margin-top: var(--space-lg);
    }
    .fp-profile__row {
      display: flex;
      flex-direction: column;
      padding: var(--space-md) 0;
      border-bottom: 1px solid var(--color-border);
    }
    .fp-profile__row:first-child {
      border-top: 1px solid var(--color-border);
    }
    .fp-profile__dt {
      font-size: var(--text-sm);
      font-weight: 700;
      color: var(--color-text);
      min-width: 140px;
      margin-bottom: var(--space-2xs);
    }
    .fp-profile__dd {
      font-size: var(--text-base);
      color: var(--color-text-sub);
      line-height: var(--leading-relaxed);
    }
    .fp-profile__note {
      font-size: var(--text-xs);
      color: var(--color-text-muted, #999);
      line-height: var(--leading-normal);
      margin-top: var(--space-2xs);
    }
    .fp-profile__cta {
      margin-top: var(--space-xl);
      text-align: center;
    }
    .fp-profile__quote {
      margin-top: var(--space-xl);
      padding: var(--space-lg);
      padding-left: var(--space-lg);
      border-left: 4px solid var(--color-primary);
      background: var(--color-primary-50);
      border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    }
    .fp-profile__quote-label {
      font-size: var(--text-sm);
      font-weight: 700;
      color: var(--color-primary-dark);
      margin-bottom: var(--space-xs);
    }
    .fp-profile__quote-text {
      font-size: var(--text-base);
      color: var(--color-text);
      line-height: var(--leading-relaxed);
    }

    @media (min-width: 768px) {
      .fp-profile {
        padding: var(--space-3xl) var(--space-xl);
      }
      .fp-profile__row {
        flex-direction: row;
        gap: var(--space-lg);
      }
      .fp-profile__dt {
        flex-shrink: 0;
        margin-bottom: 0;
      }
    }

    /* --- フリーテキスト --- */
    .fp-free {
      background: var(--color-bg-light, #f8f7f4);
      padding: var(--space-2xl) var(--space-md);
    }
    .fp-free__inner {
      max-width: var(--text-max);
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: var(--space-2xl);
    }
    .fp-free__block {
      display: flex;
      flex-direction: column;
      gap: var(--space-md);
    }
    .fp-free__title {
      font-size: 1.4rem;
      font-weight: 700;
      color: var(--color-text);
      line-height: 1.4;
    }
    .fp-free__image-wrap {
      width: 100%;
    }
    .fp-free__image {
      width: 100%;
      height: auto;
      border-radius: 8px;
      display: block;
    }
    .fp-free__text {
      line-height: 1.9;
      white-space: pre-wrap;
      color: var(--color-text);
    }

    /* --- セクション3: インタビュー記事 --- */
    .fp-interview {
      background: var(--color-bg-white);
      padding: var(--space-2xl) var(--space-md);
    }
    .fp-interview__inner {
      max-width: var(--content-max);
      margin: 0 auto;
    }
    .fp-interview__body {
      max-width: var(--text-max);
      margin: 0 auto;
    }
    .fp-interview__qa {
      margin-top: var(--space-2xl);
    }
    .fp-interview__qa + .fp-interview__qa {
      margin-top: var(--space-2xl);
    }
    .fp-interview__q {
      font-size: var(--text-base);
      font-weight: 700;
      color: var(--color-primary-dark);
      line-height: var(--leading-relaxed);
      margin-bottom: var(--space-md);
    }
    .fp-interview__a {
      font-size: var(--text-base);
      color: var(--color-text);
      line-height: var(--leading-loose);
    }
    .fp-interview__a strong {
      color: var(--color-primary-dark);
      font-weight: 700;
    }
    .fp-interview__photo-placeholder {
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--color-bg-light);
      border-radius: var(--radius-md);
      color: var(--color-text-light);
      font-size: var(--text-sm);
      margin-top: var(--space-lg);
      overflow: hidden;
    }
    .fp-interview__photo-placeholder--16x9 {
      aspect-ratio: 16 / 9;
    }
    .fp-interview__photo-placeholder--4x3 {
      aspect-ratio: 4 / 3;
    }
    .fp-interview__photo-placeholder--1x1 {
      aspect-ratio: 1 / 1;
      max-width: 360px;
      margin-left: auto;
      margin-right: auto;
    }

    @media (min-width: 768px) {
      .fp-interview {
        padding: var(--space-3xl) var(--space-xl);
      }
    }

    /* --- セクション4: 経歴タイムライン --- */
    .fp-career {
      background: var(--color-bg-light);
      padding: var(--space-2xl) var(--space-md);
    }
    .fp-career__inner {
      max-width: var(--content-max);
      margin: 0 auto;
    }
    .fp-career__timeline {
      max-width: var(--text-max);
      margin: var(--space-xl) auto 0;
      position: relative;
      padding-left: var(--space-2xl);
    }
    .fp-career__timeline::before {
      content: '';
      position: absolute;
      left: 8px;
      top: 8px;
      bottom: 8px;
      width: 2px;
      background: var(--color-primary-200);
    }
    .fp-career__item {
      position: relative;
      padding-bottom: var(--space-xl);
    }
    .fp-career__item:last-child {
      padding-bottom: 0;
    }
    .fp-career__item::before {
      content: '';
      position: absolute;
      left: calc(-1 * var(--space-2xl) + 4px);
      top: 8px;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--color-primary);
      border: 2px solid var(--color-bg-light);
    }
    .fp-career__year {
      font-family: var(--font-mono);
      font-size: var(--text-sm);
      font-weight: 600;
      color: var(--color-primary);
      margin-bottom: var(--space-2xs);
    }
    .fp-career__desc {
      font-size: var(--text-base);
      color: var(--color-text);
      line-height: var(--leading-relaxed);
    }

    @media (min-width: 768px) {
      .fp-career {
        padding: var(--space-3xl) var(--space-xl);
      }
      .fp-career__timeline {
        padding-left: var(--space-3xl);
      }
      .fp-career__item::before {
        left: calc(-1 * var(--space-3xl) + 4px);
      }
      .fp-career__timeline::before {
        left: 8px;
      }
    }

    /* --- セクション5: 事務所情報 --- */
    .fp-office {
      background: var(--color-bg-white);
      padding: var(--space-2xl) var(--space-md);
    }
    .fp-office__inner {
      max-width: var(--content-max);
      margin: 0 auto;
    }
    .fp-office__table {
      width: 100%;
      margin-top: var(--space-lg);
    }
    .fp-office__row {
      display: flex;
      flex-direction: column;
      padding: var(--space-md) 0;
      border-bottom: 1px solid var(--color-border);
    }
    .fp-office__row:first-child {
      border-top: 1px solid var(--color-border);
    }
    .fp-office__dt {
      font-size: var(--text-sm);
      font-weight: 700;
      color: var(--color-text);
      min-width: 140px;
      margin-bottom: var(--space-2xs);
    }
    .fp-office__dd {
      font-size: var(--text-base);
      color: var(--color-text-sub);
      line-height: var(--leading-relaxed);
    }

    @media (min-width: 768px) {
      .fp-office {
        padding: var(--space-3xl) var(--space-xl);
      }
      .fp-office__row {
        flex-direction: row;
        gap: var(--space-lg);
      }
      .fp-office__dt {
        flex-shrink: 0;
        margin-bottom: 0;
      }
    }

    /* --- セクション5.5: オンライン予約カレンダー --- */
    .fp-booking {
      padding: var(--space-2xl) var(--space-md);
      scroll-margin-top: 80px;
    }
    .fp-booking__inner {
      max-width: 960px;
      margin: 0 auto;
    }
    .fp-booking__heading {
      font-size: var(--text-xl);
      font-weight: 700;
      color: var(--color-text);
      text-align: center;
      margin-bottom: var(--space-sm);
    }
    .fp-booking__body {
      font-size: var(--text-base);
      color: var(--color-text-sub);
      text-align: center;
      margin-bottom: var(--space-lg);
    }
    .fp-booking__widget-wrap {
      border: 1px solid rgba(0, 0, 0, 0.08);
      border-radius: var(--radius-md);
      overflow: hidden;
      background: var(--color-bg-white);
      padding: var(--space-md);
    }
    .fp-booking__note {
      font-size: var(--text-sm);
      color: var(--color-text-sub);
      text-align: center;
      margin-top: var(--space-md);
    }
    .fp-booking__note a {
      color: var(--color-link);
      text-decoration: underline;
    }

    /* --- セクション6: CTA（下部） --- */
    .fp-cta-bottom {
      background: var(--color-bg-warm);
      padding: var(--space-2xl) var(--space-md);
      text-align: center;
    }
    .fp-cta-bottom__inner {
      max-width: var(--text-max);
      margin: 0 auto;
    }
    .fp-cta-bottom__heading {
      font-size: var(--text-xl);
      font-weight: 700;
      color: var(--color-text);
      line-height: var(--leading-normal);
      margin-bottom: var(--space-md);
    }
    .fp-cta-bottom__body {
      font-size: var(--text-base);
      color: var(--color-text-sub);
      line-height: var(--leading-relaxed);
      margin-bottom: var(--space-xl);
    }
    .fp-cta-bottom__buttons {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--space-md);
    }
    .fp-cta-bottom__sub-text {
      font-size: var(--text-sm);
      color: var(--color-text-sub);
      line-height: var(--leading-relaxed);
      margin-top: var(--space-xl);
    }
    .fp-cta-bottom__sub-text strong {
      color: var(--color-text);
    }
    .fp-cta-bottom__share {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--space-md);
      margin-top: var(--space-lg);
      font-size: var(--text-sm);
      color: var(--color-text-sub);
    }
    .fp-cta-bottom__share-links {
      display: flex;
      gap: var(--space-md);
    }
    .fp-cta-bottom__share-link {
      display: inline-flex;
      align-items: center;
      gap: var(--space-2xs);
      font-size: var(--text-sm);
      font-weight: 600;
      color: var(--color-link);
    }
    .fp-cta-bottom__share-link:hover {
      color: var(--color-link-hover);
    }
    .fp-cta-bottom__share-icon {
      width: 18px;
      height: 18px;
      flex-shrink: 0;
    }

    @media (min-width: 768px) {
      .fp-cta-bottom {
        padding: var(--space-3xl) var(--space-xl);
      }
      .fp-cta-bottom__heading {
        font-size: var(--text-2xl);
      }
      .fp-cta-bottom__buttons {
        flex-direction: row;
        justify-content: center;
      }
    }

    /* --- セクション7: 関連FP --- */
    .fp-related {
      background: var(--color-bg-white);
      padding: var(--space-2xl) var(--space-md);
    }
    .fp-related__inner {
      max-width: var(--content-max);
      margin: 0 auto;
    }
    .fp-related__grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-lg);
      margin-top: var(--space-xl);
    }
    .fp-related__more {
      text-align: center;
      margin-top: var(--space-xl);
    }
    .fp-related__more-link {
      font-size: var(--text-base);
      font-weight: 600;
      color: var(--color-link);
    }
    .fp-related__more-link:hover {
      color: var(--color-link-hover);
    }

    @media (min-width: 768px) {
      .fp-related {
        padding: var(--space-3xl) var(--space-xl);
      }
      .fp-related__grid {
        grid-template-columns: repeat(3, 1fr);
      }
    }