/* =========================================================
   SPIRAL STRAINER® — 統合スタイルシート
   THREE-M INDUSTRY / スリーエム工業株式会社
   Design concept: FLOW LINE ― 流れを止めない設計

   style.css（共通土台のうち現在も使用中の部分のみ）と
   flow.css（現行デザイン FLOW LINE 全体）を統合したもの。
   このファイル1枚で ｽﾊﾟｲﾗﾙ_特設ﾍﾟｰｼﾞv7.html / faq.html の
   両方が成立する。

   ── 構成 ──
   PART 1  共通土台
             1-1 デザイントークン（レガシー変数）
             1-2 リセット / ベース
             1-3 ヘッダー・グローバルナビ
             1-4 バリューストリップ
             1-5 スクロール表示アニメーション
             1-6 レスポンシブ（共通土台）
   PART 2  FLOW LINE デザイン本体
   ========================================================= */


/* =========================================================
   ▓ PART 1  共通土台
   ========================================================= */

/* ---------------------------------------------------------
   1-1 デザイントークン（レガシー変数）
   ヘッダー・ナビ・バリューストリップが参照する変数。
   FLOW LINE の配色に統一済み（--fl-* とは別系統）。
   --------------------------------------------------------- */
:root{
  /* ダーク基調（ガンメタル / スチール） */
  --bg:        #0f151b;
  --bg-2:      #141d25;
  --ink:       #eef2f6;
  --ink-soft:  #c4ccd4;
  --muted-2:   #6a747e;
  /* アクセント：スチールブルー */
  --accent:    #1a6aa6;
  --accent-2:  #2f80b8;
  --accent-lt: #62a0cd;
  --glow:      rgba(26,106,166,.42);
  --line:      rgba(205,214,222,.10);
  --line-2:    rgba(205,214,222,.18);
  /* ライト情報面 */
  --paper:      #eceff2;
  --line-dk:    #dfe6ee;

  /* 書体 */
  --ff-jp:      "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  --ff-body:    "Noto Sans JP", "Zen Kaku Gothic New", sans-serif;
  --ff-tech:    "Chakra Petch", "Zen Kaku Gothic New", sans-serif;

  --wrap: 1180px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------------------------------------------------------
   1-2 リセット / ベース
   --------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--ff-body);
  font-weight:400;
  line-height:1.85;
  letter-spacing:.02em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4,p,dl,dd,dt,figure,ul{ margin:0; }
.wrap{ width:min(var(--wrap), 90vw); margin-inline:auto; }

/* ---------------------------------------------------------
   1-3 ヘッダー・グローバルナビ
   --------------------------------------------------------- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:60;
  transition:background .4s var(--ease), border-color .4s var(--ease), backdrop-filter .4s;
  border-bottom:1px solid transparent;
}
.site-header.scrolled{
  background:rgba(8,16,29,.82);
  backdrop-filter:blur(14px) saturate(120%);
  -webkit-backdrop-filter:blur(14px) saturate(120%);
  border-bottom-color:var(--line);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  height:84px;
}
.brand-logo{ height:50px; width:auto; transition:transform .4s var(--ease); }
.brand:hover .brand-logo{ transform:scale(1.04); }

.nav{ display:flex; align-items:center; gap:34px; }
.nav a{
  font-family:var(--ff-jp); font-weight:500; font-size:.94rem;
  color:var(--ink-soft); letter-spacing:.06em; position:relative;
  transition:color .25s var(--ease);
}
.nav a:not(.nav-cta)::after{
  content:""; position:absolute; left:0; bottom:-6px;
  width:100%; height:1.5px; background:var(--accent-lt);
  transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease);
}
.nav a:not(.nav-cta):hover{ color:#fff; }
.nav a:not(.nav-cta):hover::after{ transform:scaleX(1); }
.nav-cta{
  padding:11px 22px; border-radius:999px;
  background:linear-gradient(180deg,#5f97c2 0%,#3a86bf 50%,#255f8e 100%);
  border:1px solid rgba(255,255,255,.16);
  color:#fff !important; font-weight:700; letter-spacing:.08em;
  box-shadow:0 10px 24px -10px var(--glow),
             inset 0 1px 0 rgba(255,255,255,.42),
             inset 0 -1px 0 rgba(0,0,0,.22);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.nav-cta:hover{ transform:translateY(-2px); box-shadow:0 12px 26px -8px var(--glow); }

.nav-toggle{
  display:none; width:46px; height:46px; border:1px solid var(--line-2);
  background:rgba(255,255,255,.04); border-radius:12px; cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.nav-toggle span{ display:block; width:20px; height:2px; background:var(--ink); transition:.3s var(--ease); }
.nav-toggle.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity:0; }
.nav-toggle.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---------------------------------------------------------
   1-4 バリューストリップ（ヒーロー直下の4項目帯）
   --------------------------------------------------------- */
.value-strip{
  position:relative; z-index:3;
  border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2);
  background:linear-gradient(180deg, rgba(198,214,230,.05), rgba(198,214,230,.015));
}
.value-inner{ display:grid; grid-template-columns:repeat(4,1fr); }
.value-item{
  display:flex; align-items:center; gap:14px; padding:26px 8px;
  font-family:var(--ff-jp); font-weight:500; font-size:1.02rem; color:var(--ink-soft);
  justify-content:center; position:relative;
}
.value-item + .value-item::before{
  content:""; position:absolute; left:0; top:24%; height:52%; width:1px; background:var(--line); }
.vnum{
  font-family:var(--ff-tech); font-weight:700; font-size:1.15rem; letter-spacing:.05em;
  color:var(--accent-lt); -webkit-text-fill-color:var(--accent-lt); }

/* ---------------------------------------------------------
   1-5 スクロール表示アニメーション
   --------------------------------------------------------- */
.reveal{ opacity:0; transform:translateY(34px);
  transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in{ opacity:1; transform:none; }

/* ---------------------------------------------------------
   1-6 レスポンシブ（共通土台）
   --------------------------------------------------------- */
@media (max-width:860px){
  .header-inner{ height:72px; }
  .brand-logo{ height:42px; }
  .nav-toggle{ display:flex; }
  .nav{
    position:absolute; top:72px; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:rgba(8,16,29,.97); backdrop-filter:blur(16px);
    border-bottom:1px solid var(--line); padding:8px 0 18px;
    clip-path:inset(0 0 100% 0); opacity:0; pointer-events:none;
    transition:clip-path .4s var(--ease), opacity .3s var(--ease);
  }
  .nav.open{ clip-path:inset(0 0 0 0); opacity:1; pointer-events:auto; }
  .nav a{ padding:16px 7vw; font-size:1.02rem; }
  .nav a:not(.nav-cta)::after{ display:none; }
  .nav-cta{ margin:12px 7vw 0; text-align:center; justify-content:center; }

  .value-inner{ grid-template-columns:repeat(2,1fr); }
  .value-item + .value-item:nth-child(odd)::before{ display:none; }
  .value-item:nth-child(3), .value-item:nth-child(4){ border-top:1px solid var(--line); }
}

@media (max-width:480px){
  .wrap{ width:90vw; }
}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition-duration:.01ms !important; }
  .reveal{ opacity:1; transform:none; }
}


/* =========================================================
   ▓ PART 2  FLOW LINE デザイン本体
   ========================================================= */
/* =========================================================
   FLOW LINE — SPIRAL STRAINER® リニューアル
   コンセプト：ページ全体を「流路」として設計。
   左端のフローライン（背骨）に沿って情報が下降し、
   非対称・エディトリアルに配置される。
   色＝素材（図面紙／鋼墨／ステンレス鋼／螺旋の青／渦の赤）
   ========================================================= */
:root{
  --fl-ink:      #0f151b;   /* 鋼墨（暗部・劇的ゾーン） */
  --fl-ink-2:    #141d25;
  --fl-paper:    #eceff2;   /* 図面紙（情報面） */
  --fl-blue:     #1a6aa6;   /* 螺旋の青（唯一の主アクセント） */
  --fl-blue-lt:  #62a0cd;
  --fl-red:      #d23b2c;   /* 渦の赤（流れ・渦の指標のみ） */
  --fl-steel-1:  #cdd4dc;   /* ステンレス鋼 */
  --fl-steel-2:  #8b97a4;
  --fl-steel-3:  #5c6875;
  --fl-hair:     rgba(205,214,222,.12);
  --fl-hair-2:   rgba(205,214,222,.24);
  --fl-mono:  "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --fl-disp:  "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  --fl-body:  "Noto Sans JP", "Zen Kaku Gothic New", sans-serif;
  --fl-ease:  cubic-bezier(.2,.72,.24,1);
  --fl-ink-soft: #3f5360;   /* ライト面の本文 */
  --fl-ink-mut:  #6f8393;   /* ライト面の補助テキスト */
  --fl-line-dk:  #dfe6ee;   /* ライト面の罫線 */
}

/* =========================================================
   HERO / 00 序
   ========================================================= */
.fl-hero{
  position:relative; min-height:100svh; overflow:hidden;
  padding:132px 0 76px;
  background:
    radial-gradient(115% 85% at 82% 22%, #182533 0%, transparent 56%),
    linear-gradient(180deg, #0f151b 0%, #0b1116 100%);
  color:var(--fl-paper); font-family:var(--fl-body);
}

/* blueprint grid（図面の方眼・ごく薄く） */
.fl-hero-bg{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(var(--fl-hair) 1px, transparent 1px),
    linear-gradient(90deg, var(--fl-hair) 1px, transparent 1px);
  background-size:66px 66px;
  -webkit-mask:radial-gradient(120% 100% at 72% 32%, #000, transparent 78%);
          mask:radial-gradient(120% 100% at 72% 32%, #000, transparent 78%);
  opacity:.5;
}
/* 背後で回り続ける螺旋（モーションは1ルール：一定回転） */
.fl-hero-spiral{
  position:absolute; right:-8%; top:50%; transform:translateY(-50%);
  width:min(780px,66vw); aspect-ratio:1; border-radius:50%; z-index:0; pointer-events:none;
  background:conic-gradient(from 210deg,
    transparent 0 42deg, rgba(98,160,205,.16) 120deg, transparent 200deg,
    rgba(210,59,44,.07) 300deg, transparent 360deg);
  -webkit-mask:radial-gradient(circle, transparent 30%, #000 32%, #000 67%, transparent 69%);
          mask:radial-gradient(circle, transparent 30%, #000 32%, #000 67%, transparent 69%);
  animation:fl-spin 96s linear infinite;
}
@keyframes fl-spin{ to{ transform:translateY(-50%) rotate(360deg); } }

/* フローライン背骨 */
.fl-spine{ position:absolute; left:max(26px,4vw); top:0; bottom:0; z-index:2; width:1px; }
.fl-spine::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:1px;
  background:linear-gradient(180deg, transparent 0, var(--fl-blue) 12%, var(--fl-steel-3) 72%, transparent 100%);
}
.fl-spine-node{
  position:absolute; left:-4.5px; top:150px; width:10px; height:10px; border-radius:50%;
  background:var(--fl-blue); box-shadow:0 0 0 5px rgba(26,106,166,.2);
}
.fl-spine-num{
  position:absolute; left:16px; top:124px; font-family:var(--fl-disp); font-weight:900;
  font-size:22px; color:var(--fl-steel-3); letter-spacing:.02em;
}
.fl-spine-vlabel{
  position:absolute; left:14px; top:186px; writing-mode:vertical-rl;
  font-family:var(--fl-mono); font-size:11px; letter-spacing:.3em; color:var(--fl-steel-2);
}

/* 非対称グリッド（左に背骨用の余白、コピー広め＋写真） */
.fl-hero-inner{
  position:relative; z-index:3; width:min(1280px,92vw); margin:0 auto;
  padding-left:clamp(38px,7vw,120px);
  display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:clamp(24px,4vw,54px); align-items:center;
}

/* 製品ロックアップ（横ロゴ画像＋アルファベット部の下にカタカナ） */
.fl-product{ --fl-logo-w:clamp(290px,30vw,372px);   /* ロゴとカタカナの共通幅 */
  display:inline-block; margin-bottom:34px;
  opacity:0; animation:fl-rise .9s var(--fl-ease) .05s forwards; }
.fl-logo{ display:block; width:var(--fl-logo-w); height:auto;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.45)); }
.fl-logo-jp{ display:block; box-sizing:border-box; width:var(--fl-logo-w); margin-top:11px; /* ＝ロゴ全幅に合わせる */
  font-family:var(--fl-body); font-weight:700; font-size:clamp(16px,1.5vw,18.5px);
  text-align:justify; text-align-last:justify; text-justify:inter-character;
  color:var(--fl-blue-lt);   /* ロゴと同系の青 */
  text-shadow:0 1px 10px rgba(6,18,30,.55); }
.fl-logo-sub{ display:flex; align-items:center; gap:9px; margin-top:11px;
  font-family:var(--fl-mono); font-weight:500; font-size:11.5px; letter-spacing:.2em;
  color:#a7bccb; }
.fl-logo-sub::before{ content:""; width:18px; height:1px; flex:none;
  background:linear-gradient(90deg, var(--fl-blue-lt), rgba(98,160,205,.15)); }

/* キッカー（採用「流れを止めるな！」画像） */
.fl-kick{ margin:0 0 -6px;                    /* 見出しに近づける */
  opacity:0; animation:fl-rise .9s var(--fl-ease) .16s forwards; }
.fl-kick-img{ display:block; width:clamp(280px,46%,430px); height:auto;
  margin-left:-30px;                          /* 左へはみ出す（テキストより左） */
  filter:drop-shadow(0 8px 20px rgba(0,0,0,.5)); }

/* 巨大見出し（極太・タイトな行間・非対称） */
.fl-head{
  margin:0; font-family:var(--fl-disp); font-weight:900; color:#fff;
  font-size:clamp(46px,8.6vw,98px); line-height:1.03; letter-spacing:.01em;
  opacity:0; animation:fl-rise 1s var(--fl-ease) .24s forwards;
}
.fl-spiral{ position:relative; z-index:0; color:#aeddfa; white-space:nowrap;
  text-shadow:0 1px 12px rgba(6,18,30,.5); } /* 明るい水色＝帯より明るくして視認性UP */
.fl-spiral small{ font-size:.36em; font-weight:700; color:var(--fl-steel-1); letter-spacing:.01em; }
/* 水の帯：テキスト下部に少し重なる“背面レイヤー”。右端は高さゼロまで滑らかにテーパー（SVGマスク） */
.fl-spiral::before, .fl-spiral::after{ content:""; position:absolute; z-index:-1;
  left:-.05em; right:-.52em; bottom:.05em; height:.3em;    /* 少し細く／文字下部に重ねる */
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 24' preserveAspectRatio='none'%3E%3Cpath d='M9 0 L100 0 C52 1 28 13 0 24 L9 0 Z' fill='%23000'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 24' preserveAspectRatio='none'%3E%3Cpath d='M9 0 L100 0 C52 1 28 13 0 24 L9 0 Z' fill='%23000'/%3E%3C/svg%3E") no-repeat center / 100% 100%; }
.fl-spiral::before{
  background:linear-gradient(90deg, rgba(16,84,138,.96) 0%, rgba(46,132,196,.55) 46%, rgba(120,190,235,0) 100%); }
/* 水の流れ：控えめなきらめきが左→右へ走る */
.fl-spiral::after{
  background:linear-gradient(100deg, transparent 34%, rgba(200,231,252,.55) 50%, transparent 66%);
  background-size:280% 100%; background-repeat:no-repeat;
  animation:fl-water 4.6s ease-in-out infinite; }
@keyframes fl-water{ 0%{ background-position:135% 0; } 100%{ background-position:-35% 0; } }
.fl-no{ font-size:.72em; }   /* 「の」を少しだけ小さめに */

.fl-lead{ margin:28px 0 32px; max-width:42ch; color:var(--fl-steel-1); line-height:1.95;
  font-size:clamp(14px,1.35vw,16px); font-weight:300;
  opacity:0; animation:fl-rise 1s var(--fl-ease) .34s forwards; }

/* アクション（面取りの角ばったボタン＝非ピル） */
.fl-actions{ display:flex; gap:14px; flex-wrap:wrap;
  opacity:0; animation:fl-rise 1s var(--fl-ease) .42s forwards; }
.fl-btn{ display:inline-flex; align-items:center; gap:11px; font-family:var(--fl-body);
  font-weight:700; font-size:15px; letter-spacing:.04em; padding:16px 28px; cursor:pointer;
  transition:background .3s var(--fl-ease), border-color .3s var(--fl-ease), transform .3s var(--fl-ease), color .3s; }
.fl-btn-solid{ background:var(--fl-blue); color:#fff;
  clip-path:polygon(0 0, 100% 0, 100% 100%, 12px 100%, 0 calc(100% - 12px)); }
.fl-btn-solid:hover{ background:#1f7cc0; transform:translateY(-2px); }
.fl-btn-line{ color:var(--fl-paper); border:1px solid var(--fl-hair-2);
  clip-path:polygon(0 0, 100% 0, 100% 100%, 12px 100%, 0 calc(100% - 12px)); }
.fl-btn-line:hover{ border-color:var(--fl-blue-lt); color:#fff; transform:translateY(-2px); }
.fl-arw{ transition:transform .3s var(--fl-ease); }
.fl-btn:hover .fl-arw{ transform:translateX(5px); }

/* ステータス・タグ（等幅） */
.fl-tags{ list-style:none; display:flex; gap:10px; flex-wrap:wrap; margin:32px 0 0; padding:0;
  opacity:0; animation:fl-rise 1s var(--fl-ease) .5s forwards; }
.fl-tag{ font-family:var(--fl-mono); font-size:11px; letter-spacing:.12em; color:var(--fl-steel-2);
  border:1px solid var(--fl-hair-2); padding:7px 13px; display:inline-flex; align-items:center; gap:8px; }
.fl-tag-live{ color:var(--fl-paper); border-color:rgba(26,106,166,.55); }
.fl-dot{ width:7px; height:7px; border-radius:50%; background:var(--fl-red);
  box-shadow:0 0 0 3px rgba(210,59,44,.25); }

/* 製品写真（技術プレート：コーナーマーク＋等幅キャプション、右へ裁ち落とし） */
.fl-fig{ position:relative; margin:0; margin-right:clamp(-5vw,-30px,0px);
  opacity:0; animation:fl-rise-fig 1.1s var(--fl-ease) .3s forwards; }
.fl-fig-img{ width:100%; display:block; border-radius:2px;
  box-shadow:0 50px 90px -44px rgba(0,0,0,.8), 0 0 0 1px var(--fl-hair); }
.fl-fig-mark{ position:absolute; width:22px; height:22px; z-index:2; }
.fl-fig-mark.tl{ left:-7px; top:-7px; border-left:2px solid var(--fl-blue-lt); border-top:2px solid var(--fl-blue-lt); }
.fl-fig-mark.br{ right:-7px; bottom:-7px; border-right:2px solid var(--fl-blue-lt); border-bottom:2px solid var(--fl-blue-lt); }
.fl-fig-cap{ margin-top:14px; text-align:right; font-family:var(--fl-mono); font-size:11px;
  letter-spacing:.1em; color:var(--fl-steel-2); }

/* スクロールキュー（背骨の足元・縦組み） */
.fl-scroll{ position:absolute; left:max(26px,4vw); bottom:30px; z-index:3;
  writing-mode:vertical-rl; font-family:var(--fl-mono); font-size:11px; letter-spacing:.3em;
  color:var(--fl-steel-2); display:inline-flex; align-items:center; gap:12px; text-decoration:none; }
.fl-scroll:hover{ color:var(--fl-paper); }
.fl-scroll-arw{ animation:fl-bob 1.9s var(--fl-ease) infinite; }

@keyframes fl-rise{ to{ opacity:1; transform:none; } }
.fl-product,.fl-kick,.fl-head,.fl-lead,.fl-actions,.fl-tags{ transform:translateY(18px); }
@keyframes fl-rise-fig{ from{ opacity:0; transform:translateY(24px) scale(.98); } to{ opacity:1; transform:none; } }
@keyframes fl-bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(7px); } }

/* ---- レスポンシブ ---- */
@media (max-width:960px){
  .fl-hero{ padding:120px 0 64px; }
  .fl-hero-inner{ grid-template-columns:1fr; gap:34px; padding-left:0; }
  .fl-spine, .fl-scroll{ display:none; }
  .fl-fig{ order:-1; margin-right:0; max-width:520px; }
  .fl-head{ font-size:clamp(42px,12vw,66px); }
  .fl-hero-spiral{ right:-24%; opacity:.7; }
  .fl-kick-img{ margin-left:0; }   /* モバイルでは左はみ出しを解除 */
}
@media (max-width:520px){
  .fl-brk{ display:none; }
  .fl-actions .fl-btn{ flex:1; justify-content:center; }
}
@media (prefers-reduced-motion:reduce){
  .fl-hero-spiral, .fl-scroll-arw, .fl-spiral::after{ animation:none; }
  .fl-product,.fl-kick,.fl-head,.fl-lead,.fl-actions,.fl-tags,.fl-fig{ opacity:1; transform:none; animation:none; }
}

/* =========================================================
   SECTION 共通（FLOW LINE）
   ========================================================= */
.fl-sec{ position:relative; padding:clamp(88px,12vw,148px) 0; }
.fl-sec-light{ background:var(--fl-paper); color:var(--fl-ink); }
#concept.fl-sec-light{ background:var(--fl-paper); border-top:1px solid var(--fl-line-dk); }
.fl-sec-inner{ position:relative; z-index:2; width:min(1280px,92vw); margin:0 auto;
  padding-left:clamp(38px,7vw,120px); }

/* 日本語本文：文節で折り返し、単語の途中での改行を避ける（全セクション共通ルール） */
.fl-hero-copy, .fl-sec-inner{ word-break:auto-phrase; line-break:strict; overflow-wrap:normal; }

/* セクションのフローライン背骨（ライト面用の濃淡） */
.fl-spine-sec::before{ background:linear-gradient(180deg,
  transparent, var(--fl-blue) 9%, rgba(92,104,117,.45) 74%, transparent); }
.fl-sec-light .fl-spine-num{ color:#b9c5d1; }
.fl-sec-light .fl-spine-vlabel{ color:var(--fl-steel-3); }
.fl-sec-light .fl-spine-node{ background:var(--fl-blue); box-shadow:0 0 0 5px rgba(26,106,166,.16); }

/* セクション見出し（共通・左寄せ・極太） */
.fl-eyebrow{ margin:0 0 20px; }
.fl-eyebrow-en{ font-family:var(--fl-mono); font-weight:700; letter-spacing:.28em; font-size:12px; color:var(--fl-blue); }
.fl-sec-title{ font-family:var(--fl-disp); font-weight:900; line-height:1.26; letter-spacing:.01em;
  font-size:clamp(28px,4.4vw,52px); color:var(--fl-ink); margin:0; }
.fl-kw{ position:relative; color:var(--fl-blue); white-space:nowrap; }
.fl-kw::after{ content:""; position:absolute; left:0; right:0; bottom:.01em; height:.09em;
  background:var(--fl-blue); opacity:.32; }
/* 見出しの助詞（の・が・を 等）は少し小さく＝名詞の視認性を上げる共通ルール */
.fl-p{ font-size:.78em; }

/* =========================================================
   01 CONCEPT — 非対称（本文＋段差データプレート）
   ========================================================= */
.fl-concept{ display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,.78fr);
  gap:clamp(30px,5vw,72px); align-items:start; }
.fl-lead-dk{ margin:26px 0 0; max-width:46ch; color:var(--fl-ink-soft);
  line-height:1.98; font-weight:400; font-size:clamp(14px,1.3vw,16px); }
.fl-lead-dk strong{ color:var(--fl-ink); font-weight:700; }
.fl-quote{ color:var(--fl-blue); font-weight:700; }

.fl-concept-data{ display:flex; flex-direction:column; gap:26px; padding-top:6px; }
.fl-plate{ border-left:2px solid var(--fl-blue); padding:2px 0 4px 20px; }
.fl-plate-2{ margin-left:44px; }              /* 段差＝左右対称を避ける */
.fl-plate-unit{ display:block; font-family:var(--fl-mono); font-size:11px; letter-spacing:.24em; color:var(--fl-blue); }
.fl-plate-num{ display:block; font-family:var(--fl-disp); font-weight:900; line-height:.86;
  font-size:clamp(58px,7.4vw,92px); color:var(--fl-ink); margin:4px 0 10px; }
.fl-plate-label{ display:block; font-size:13px; line-height:1.7; color:var(--fl-ink-mut); }

@media (max-width:960px){
  .fl-sec-inner{ padding-left:0; }
  .fl-spine-sec{ display:none; }
  .fl-concept{ grid-template-columns:1fr; gap:44px; }
  .fl-concept-data{ flex-direction:row; flex-wrap:wrap; gap:32px; }
  .fl-plate-2{ margin-left:0; }
}
@media (max-width:520px){
  .fl-concept-data{ flex-direction:column; gap:26px; }
}

/* =========================================================
   02 MECHANISM — ダーク面（構造図＋渦STEP＋POINT）
   ========================================================= */
.fl-sec-dark{ background:linear-gradient(180deg, var(--fl-ink) 0%, #0a1016 100%); color:var(--fl-paper); }
.fl-sec-dark .fl-spine-sec::before{
  background:linear-gradient(180deg, transparent, var(--fl-blue) 8%, var(--fl-steel-3) 75%, transparent); }

/* ダーク面の見出し・本文・キーワード */
.fl-title-dk{ color:#fff; }
.fl-eyebrow-dk{ color:var(--fl-blue-lt); }
.fl-body-dk{ margin:22px 0 0; max-width:52ch; color:var(--fl-steel-1); line-height:1.95;
  font-weight:300; font-size:clamp(14px,1.3vw,16px); }
.fl-body-dk b, .fl-body-dk strong{ color:#fff; font-weight:700; }
.fl-kw-dk{ color:var(--fl-blue-lt); }

/* 構造図 + サイドアクション（非対称） */
.fl-mech-main{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,.72fr);
  gap:clamp(28px,4vw,56px); align-items:start; margin-top:48px; }
.fl-mech-fig{ margin:0; position:relative; }
.fl-mech-imgwrap{ position:relative; }
.fl-mech-img{ width:100%; display:block; border-radius:4px;
  border:1px solid var(--fl-hair-2); box-shadow:0 30px 70px -30px rgba(0,0,0,.7); }
.fl-mech-arrow{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  display:flex; flex-direction:column; align-items:center; gap:9px; z-index:2;
  padding:15px 22px 13px; border-radius:12px;
  background:linear-gradient(180deg, rgba(16,24,33,.80), rgba(9,14,20,.86));
  backdrop-filter:blur(5px) saturate(1.15); -webkit-backdrop-filter:blur(5px) saturate(1.15);
  border:1px solid rgba(120,180,225,.40);
  box-shadow:0 16px 44px -16px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.08); }
.fl-mech-arrow-mark{ display:block; width:clamp(48px,5.4vw,68px); color:var(--fl-blue-lt); }
.fl-mech-arrow-mark svg{ display:block; width:100%; height:auto;
  filter:drop-shadow(0 0 7px rgba(70,150,210,.5)); }
.fl-arw{ transform-box:fill-box; transform-origin:center; }
.fl-arw-l{ animation:fl-arw-l 2.8s var(--fl-ease) infinite; }
.fl-arw-r{ animation:fl-arw-r 2.8s var(--fl-ease) infinite; }
@keyframes fl-arw-l{ 0%,100%{ transform:translateX(0); opacity:.8; } 50%{ transform:translateX(-2.5px); opacity:1; } }
@keyframes fl-arw-r{ 0%,100%{ transform:translateX(0); opacity:.8; } 50%{ transform:translateX(2.5px); opacity:1; } }
@media (prefers-reduced-motion:reduce){ .fl-arw-l,.fl-arw-r{ animation:none; } }
.fl-mech-arrow-text{ font-family:var(--fl-disp); font-weight:700; font-size:clamp(11px,1.2vw,13px);
  letter-spacing:.04em; line-height:1.5; color:var(--fl-paper); text-align:center; white-space:nowrap; }
.fl-mech-callouts{ display:flex; justify-content:space-between; margin-top:12px; }
.fl-callout{ font-family:var(--fl-mono); font-size:11px; letter-spacing:.14em; color:#c6cfd9;
  padding:6px 12px; border:1px solid rgba(160,180,200,.42); }
.fl-callout-r{ margin-left:auto; }

.fl-mech-side{ padding-top:8px; }
.fl-mech-note{ margin:0; font-size:12px; line-height:1.85; color:#9fadbb;
  padding-left:14px; border-left:2px solid var(--fl-hair-2); }

/* 渦発生メカニズム */
.fl-vortex{ margin-top:clamp(64px,8vw,110px); }
.fl-vortex-title{ font-family:var(--fl-disp); font-weight:900; line-height:1.2;
  font-size:clamp(24px,3.6vw,40px); color:#fff; margin:0; }
.fl-vortex-lead{ max-width:52ch; }

/* STEP カード（非対称：1枚目は左寄り、2枚目は右にオフセット） */
.fl-vsteps{ display:flex; flex-direction:column; gap:clamp(32px,5vw,56px); margin-top:44px; }
.fl-vstep{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(24px,3.6vw,48px); align-items:center; }
.fl-vstep:nth-child(2){ grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  margin-left:clamp(0px,4vw,60px); }  /* 段差でカード網を避ける */
.fl-vstep-media{ margin:0; }
.fl-vstep-media img{ width:100%; display:block; border-radius:4px; border:1px solid var(--fl-hair-2);
  box-shadow:0 24px 56px -24px rgba(0,0,0,.6); }

.fl-vstep-eye{ margin:0 0 10px; font-family:var(--fl-mono); font-size:12px; letter-spacing:.18em;
  color:var(--fl-steel-2); display:flex; align-items:center; gap:10px; }
.fl-vstep-num{ font-family:var(--fl-disp); font-weight:900; font-size:clamp(36px,5vw,56px);
  color:var(--fl-blue); line-height:.86; margin-right:6px; }
.fl-vstep-label{ color:var(--fl-steel-1); }
.fl-vstep-view{ color:#a7bccb; font-size:11px; letter-spacing:.1em;
  display:inline-flex; align-items:center; }
.fl-vstep-view::before{ content:"／"; margin-right:5px; color:var(--fl-blue-lt); opacity:.7; }
.fl-vstep-h{ font-family:var(--fl-disp); font-weight:900; font-size:clamp(20px,2.6vw,28px);
  color:#fff; line-height:1.3; margin:0 0 14px; }
.fl-vstep-text{ margin:0; color:var(--fl-steel-1); font-size:14px; line-height:1.95; }
.fl-vstep-text b{ color:#fff; font-weight:700; }

/* POINT（左に赤線＝渦の指標色） */
.fl-point{ display:flex; align-items:center; gap:18px; margin-top:clamp(36px,5vw,56px);
  padding:22px 28px; border-left:3px solid var(--fl-red); background:rgba(210,59,44,.06); }
.fl-point-badge{ font-family:var(--fl-mono); font-weight:700; font-size:12px; letter-spacing:.22em;
  color:var(--fl-red); flex:none; }
.fl-point-text{ margin:0; color:var(--fl-steel-1); font-size:14px; line-height:1.8; }
.fl-point-text b{ color:#fff; font-weight:700; }

/* MECHANISM レスポンシブ */
@media (max-width:960px){
  .fl-mech-main{ grid-template-columns:1fr; gap:36px; }
  .fl-vstep, .fl-vstep:nth-child(2){ grid-template-columns:1fr; margin-left:0; }
  .fl-vstep-media{ max-width:520px; }
}
@media (max-width:520px){
  .fl-point{ flex-direction:column; align-items:flex-start; gap:10px; }
}

/* ===================================================================
   03 価値 / FEATURES ― 流れに沿って下る「段差リスト」
   =================================================================== */
/* 面がのっぺりしないよう、ライト面の中でトーンを一段落とす */
#features.fl-sec-light{ background:linear-gradient(180deg, var(--fl-paper) 0%, #dfe6ed 100%); }

.fl-vals{ margin-top:clamp(44px,5.5vw,76px); display:flex; flex-direction:column;
  gap:clamp(16px,2vw,26px); }
.fl-val{ position:relative; display:grid;
  grid-template-columns:clamp(74px,8vw,116px) minmax(0,1fr);
  gap:clamp(16px,2.4vw,38px); align-items:start;
  padding:clamp(26px,3.2vw,42px) clamp(24px,3vw,40px);
  background:#fff; border:1px solid rgba(120,140,160,.20); border-radius:3px;
  box-shadow:0 18px 38px -28px rgba(15,45,75,.38);
  transition:transform .45s var(--fl-ease), box-shadow .45s var(--fl-ease),
             border-color .45s var(--fl-ease); }
/* 左端の流路アクセント（ホバーで伸びる） */
.fl-val::before{ content:""; position:absolute; left:-1px; top:-1px; bottom:-1px; width:3px;
  background:linear-gradient(180deg, var(--fl-blue-lt), var(--fl-blue));
  transform:scaleY(.22); transform-origin:top;
  transition:transform .55s var(--fl-ease); }
.fl-val:hover{ transform:translateY(-4px); border-color:rgba(26,106,166,.34);
  box-shadow:0 30px 56px -30px rgba(15,45,75,.46); }
.fl-val:hover::before{ transform:scaleY(1); }
@media (prefers-reduced-motion:reduce){
  .fl-val, .fl-val::before{ transition:none; }
  .fl-val:hover{ transform:none; }
}
/* 段差＝流路が下るイメージ */
.fl-val:nth-child(2){ margin-left:clamp(0px,2.6vw,44px); }
.fl-val:nth-child(3){ margin-left:clamp(0px,5.2vw,88px); }
.fl-val:nth-child(4){ margin-left:clamp(0px,7.8vw,132px); }

.fl-val-num{ font-family:var(--fl-mono); font-weight:700; letter-spacing:-.02em;
  font-size:clamp(38px,5.2vw,70px); line-height:.82; color:#c0cbd9;
  transition:color .45s var(--fl-ease); }
.fl-val:hover .fl-val-num{ color:var(--fl-blue-lt); }

.fl-val-body{ padding-top:clamp(2px,.6vw,8px); }
.fl-val-title{ font-family:var(--fl-disp); font-weight:900; line-height:1.3; letter-spacing:.01em;
  font-size:clamp(20px,2.7vw,31px); color:var(--fl-ink); margin:0 0 13px; }
.fl-val-text{ margin:0; max-width:54ch; color:var(--fl-ink-soft);
  font-size:15px; line-height:1.95;
  word-break:auto-phrase; line-break:strict; overflow-wrap:normal; }

/* FEATURES レスポンシブ */
@media (max-width:820px){
  .fl-val, .fl-val:nth-child(2), .fl-val:nth-child(3), .fl-val:nth-child(4){ margin-left:0; }
  .fl-val{ grid-template-columns:1fr; gap:10px; }
  .fl-val-num{ font-size:40px; }
  .fl-val-body{ padding-top:0; }
}

/* ===================================================================
   04 諸元 / SPECIFICATIONS ― データシート
   =================================================================== */
.fl-spec-main{ display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(32px,4.4vw,72px); align-items:center; margin-top:clamp(44px,5.5vw,74px); }

/* 外観：2点を段違いに並べる */
.fl-spec-visual{ display:grid; grid-template-columns:minmax(0,1.32fr) minmax(0,.76fr);
  gap:clamp(12px,1.8vw,24px); align-items:end; }
.fl-shot{ position:relative; margin:0; padding:clamp(16px,2vw,26px) clamp(10px,1.4vw,18px) 0;
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
  border:1px solid var(--fl-hair); border-radius:3px; }
.fl-shot:nth-child(2){ margin-bottom:clamp(18px,3vw,44px); }  /* 段差 */
.fl-shot-glow{ position:absolute; left:50%; top:46%; transform:translate(-50%,-50%);
  width:88%; aspect-ratio:1; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(46,132,196,.30) 0%, rgba(46,132,196,0) 68%); }
.fl-shot img{ position:relative; z-index:1; width:100%; display:block; }
.fl-shot-cap{ position:relative; z-index:1; display:block; text-align:center;
  font-family:var(--fl-mono); font-size:11px; letter-spacing:.24em; color:#a7bccb;
  padding:12px 0 13px; border-top:1px solid var(--fl-hair); margin-top:clamp(10px,1.4vw,16px); }

/* データ表 */
.fl-spec-list{ margin:0; border-top:1px solid var(--fl-hair-2); }
.fl-spec-row{ display:grid; grid-template-columns:minmax(0,.62fr) minmax(0,1fr);
  gap:clamp(14px,2vw,32px); align-items:baseline;
  padding:clamp(17px,2.1vw,25px) 0; border-bottom:1px solid var(--fl-hair-2); }
.fl-spec-key{ display:flex; flex-direction:column; gap:5px; }
.fl-spec-jp{ font-family:var(--fl-disp); font-weight:700; font-size:15px; color:var(--fl-steel-1);
  letter-spacing:.02em; }
.fl-spec-en{ font-family:var(--fl-mono); font-size:10.5px; letter-spacing:.18em; color:#8fa3b3; }
.fl-spec-val{ margin:0; font-family:var(--fl-mono); font-weight:500;
  font-size:clamp(17px,2vw,23px); letter-spacing:.01em; color:#fff; line-height:1.45; }
.fl-spec-tag{ display:inline-block; vertical-align:middle; margin-left:10px;
  font-family:var(--fl-mono); font-size:10.5px; letter-spacing:.14em; color:var(--fl-blue-lt);
  border:1px solid rgba(98,160,205,.45); padding:5px 10px; }
.fl-spec-note{ margin:22px 0 0; font-size:12px; line-height:1.85; color:#9fadbb;
  padding-left:14px; border-left:2px solid var(--fl-hair-2); }

/* SPEC レスポンシブ */
@media (max-width:960px){
  .fl-spec-main{ grid-template-columns:1fr; gap:40px; }
  .fl-spec-visual{ max-width:560px; }
}
@media (max-width:520px){
  .fl-spec-row{ grid-template-columns:1fr; gap:8px; }
  .fl-spec-key{ flex-direction:row; align-items:baseline; gap:10px; }
}

/* ===================================================================
   FAQ リンクバンド ― ダーク面からライト面への継ぎ目
   =================================================================== */
.fl-band-sec{ background:linear-gradient(180deg,#0a1016 0%,#101b25 100%);
  padding:0 0 clamp(52px,6vw,84px); }
.fl-band{ position:relative; display:grid;
  grid-template-columns:auto minmax(0,1fr) auto; align-items:center;
  gap:clamp(18px,2.6vw,34px); text-decoration:none;
  width:min(1280px,92vw); margin:0 auto;
  padding:clamp(24px,3vw,36px) clamp(24px,3vw,40px);
  background:linear-gradient(100deg, rgba(26,106,166,.14), rgba(255,255,255,.03));
  border:1px solid var(--fl-hair-2); border-left:3px solid var(--fl-blue);
  transition:border-color .45s var(--fl-ease), background .45s var(--fl-ease),
             transform .45s var(--fl-ease); }
.fl-band:hover{ transform:translateY(-3px); border-color:rgba(98,160,205,.5);
  border-left-color:var(--fl-blue-lt);
  background:linear-gradient(100deg, rgba(26,106,166,.22), rgba(255,255,255,.05)); }
.fl-band-icon{ width:clamp(38px,4vw,50px); color:var(--fl-blue-lt); flex:none; }
.fl-band-icon svg{ width:100%; height:auto; display:block; }
.fl-band-text{ display:flex; flex-direction:column; gap:7px; min-width:0; }
.fl-band-label{ font-family:var(--fl-mono); font-weight:700; font-size:11px;
  letter-spacing:.28em; color:var(--fl-blue-lt); }
.fl-band-title{ font-family:var(--fl-disp); font-weight:900; line-height:1.3;
  font-size:clamp(19px,2.4vw,27px); color:#fff; }
.fl-band-sub{ font-size:13.5px; line-height:1.8; color:#a7bccb;
  word-break:auto-phrase; line-break:strict; overflow-wrap:normal; }
.fl-band-cta{ display:inline-flex; align-items:center; gap:12px; flex:none;
  font-family:var(--fl-mono); font-size:12px; letter-spacing:.14em; color:var(--fl-paper); }
.fl-band-arw{ width:20px; color:var(--fl-blue-lt);
  transition:transform .45s var(--fl-ease); }
.fl-band-arw svg{ width:100%; height:auto; display:block; }
.fl-band:hover .fl-band-arw{ transform:translateX(6px); }

/* ===================================================================
   05 次の一手 / DOWNLOAD
   =================================================================== */
.fl-dl{ margin-top:clamp(38px,4.6vw,60px); }
.fl-dl-card{ position:relative; display:grid;
  grid-template-columns:auto minmax(0,1fr) auto; align-items:center;
  gap:clamp(18px,2.6vw,34px); text-decoration:none; max-width:860px;
  padding:clamp(24px,3vw,34px) clamp(22px,2.8vw,36px);
  background:#fff; border:1px solid rgba(120,140,160,.22); border-radius:3px;
  box-shadow:0 18px 38px -28px rgba(15,45,75,.38);
  transition:transform .45s var(--fl-ease), box-shadow .45s var(--fl-ease),
             border-color .45s var(--fl-ease); }
.fl-dl-card::before{ content:""; position:absolute; left:-1px; top:-1px; bottom:-1px; width:3px;
  background:linear-gradient(180deg, var(--fl-blue-lt), var(--fl-blue));
  transform:scaleY(.22); transform-origin:top;
  transition:transform .55s var(--fl-ease); }
.fl-dl-card:hover{ transform:translateY(-4px); border-color:rgba(26,106,166,.34);
  box-shadow:0 30px 56px -30px rgba(15,45,75,.46); }
.fl-dl-card:hover::before{ transform:scaleY(1); }
.fl-dl-icon{ width:clamp(34px,3.6vw,44px); color:var(--fl-blue); flex:none; }
.fl-dl-icon svg{ width:100%; height:auto; display:block; }
.fl-dl-text{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.fl-dl-title{ font-family:var(--fl-disp); font-weight:900; font-size:clamp(17px,2vw,21px);
  color:var(--fl-ink); line-height:1.35; }
.fl-dl-sub{ font-size:13px; line-height:1.75; color:var(--fl-ink-mut); }
.fl-dl-meta{ display:inline-flex; align-items:center; gap:14px; flex:none; }
.fl-dl-format{ font-family:var(--fl-mono); font-weight:700; font-size:11px; letter-spacing:.16em;
  color:var(--fl-blue); border:1px solid rgba(26,106,166,.4); padding:6px 11px; }
.fl-dl-arw{ width:20px; color:var(--fl-blue); transition:transform .45s var(--fl-ease); }
.fl-dl-arw svg{ width:100%; height:auto; display:block; }
.fl-dl-card:hover .fl-dl-arw{ transform:translateX(6px); }

/* ===================================================================
   CTA ― 流路の終点
   =================================================================== */
.fl-cta{ position:relative; overflow:hidden;
  background:linear-gradient(180deg,#101b25 0%, var(--fl-ink) 58%, #0a1016 100%);
  padding:clamp(84px,11vw,140px) 0; }
.fl-cta-glow{ position:absolute; left:50%; top:-30%; transform:translateX(-50%);
  width:min(900px,110vw); aspect-ratio:1; pointer-events:none;
  background:radial-gradient(circle, rgba(46,132,196,.20) 0%, rgba(46,132,196,0) 62%); }
/* 左端のフローラインがここで収束して終わる */
.fl-cta-line{ position:absolute; left:clamp(18px,3.4vw,58px); top:0; width:1px;
  height:clamp(90px,12vw,150px);
  background:linear-gradient(180deg, rgba(98,160,205,.55), transparent); }
.fl-cta-line::after{ content:""; position:absolute; left:50%; top:100%;
  transform:translate(-50%,-50%); width:7px; height:7px; border-radius:50%;
  background:var(--fl-blue-lt); box-shadow:0 0 0 5px rgba(98,160,205,.16); }
.fl-cta-inner{ position:relative; z-index:2; width:min(1280px,92vw); margin:0 auto;
  padding-left:clamp(38px,7vw,120px);
  word-break:auto-phrase; line-break:strict; overflow-wrap:normal; }
.fl-cta-tag{ margin:0 0 20px; font-family:var(--fl-mono); font-weight:700; font-size:12px;
  letter-spacing:.28em; color:var(--fl-blue-lt); }
.fl-cta-title{ margin:0; font-family:var(--fl-disp); font-weight:900; line-height:1.24;
  font-size:clamp(29px,4.8vw,58px); color:#fff; letter-spacing:.01em; }
.fl-cta-lead{ margin:24px 0 0; max-width:50ch; color:var(--fl-steel-1);
  font-size:15px; line-height:1.95; }
.fl-cta-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:clamp(30px,3.6vw,44px); }
.fl-btn-lg{ padding:17px 30px; font-size:15px; }

/* 05・CTA レスポンシブ */
@media (max-width:820px){
  .fl-band{ grid-template-columns:auto minmax(0,1fr); row-gap:20px; }
  .fl-band-cta{ grid-column:2; }
  .fl-dl-card{ grid-template-columns:auto minmax(0,1fr); row-gap:18px; }
  .fl-dl-meta{ grid-column:2; }
}
@media (max-width:520px){
  .fl-band, .fl-dl-card{ grid-template-columns:1fr; }
  .fl-band-cta, .fl-dl-meta{ grid-column:1; }
  .fl-cta-actions .fl-btn{ width:100%; justify-content:center; }
}

/* ===================================================================
   FOOTER ― 流路の水面下
   =================================================================== */
.fl-foot{ position:relative; background:#080d12; color:var(--fl-steel-1);
  border-top:1px solid var(--fl-hair); }
.fl-foot-inner{ width:min(1280px,92vw); margin:0 auto;
  padding:clamp(52px,6.5vw,84px) 0 clamp(40px,5vw,60px);
  display:grid; grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  gap:clamp(34px,5vw,80px); align-items:start; }

.fl-foot-brand{ display:flex; flex-direction:column; gap:18px; }
.fl-foot-logo{ width:clamp(120px,13vw,166px); height:auto; display:block; }
.fl-foot-company{ margin:0; font-family:var(--fl-disp); font-weight:700; font-size:15px;
  line-height:1.6; color:#e6ebf0; }

.fl-foot-offices{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:clamp(24px,3vw,44px); }
.fl-office{ position:relative; padding-left:15px; }
.fl-office::before{ content:""; position:absolute; left:0; top:.35em; bottom:.2em; width:1px;
  background:linear-gradient(180deg, var(--fl-blue), rgba(98,160,205,.06)); }
.fl-office-name{ margin:0 0 11px; font-family:var(--fl-mono); font-weight:700; font-size:11px;
  letter-spacing:.22em; color:var(--fl-blue-lt); }
.fl-office-addr{ margin:0; font-size:13px; line-height:1.85; color:#a7bccb; }
.fl-office-addr a{ color:#a7bccb; text-decoration:none; border-bottom:1px solid var(--fl-hair-2);
  transition:color .35s var(--fl-ease), border-color .35s var(--fl-ease); }
.fl-office-addr a:hover{ color:var(--fl-blue-lt); border-color:var(--fl-blue-lt); }
.fl-office-tel{ margin:11px 0 0; font-family:var(--fl-mono); font-size:14px; letter-spacing:.04em;
  color:#e6ebf0; display:flex; align-items:baseline; gap:9px; }
.fl-office-tel span{ font-size:10px; letter-spacing:.2em; color:#8fa3b3; }

.fl-foot-bar{ border-top:1px solid var(--fl-hair); }
.fl-foot-bar-inner{ width:min(1280px,92vw); margin:0 auto;
  padding:20px 0 24px; display:flex; flex-wrap:wrap; gap:10px 26px;
  justify-content:space-between; align-items:center;
  font-family:var(--fl-mono); font-size:10.5px; letter-spacing:.1em; color:#7c8d9c; }
.fl-foot-tm{ color:#8fa3b3; }

@media (max-width:820px){
  .fl-foot-inner{ grid-template-columns:1fr; }
}

/* ===================================================================
   FAQ ページ ― 下層ページのヒーロー
   =================================================================== */
.fl-phero{ position:relative; overflow:hidden;
  background:linear-gradient(180deg, var(--fl-ink) 0%, #0d1720 62%, #101b25 100%);
  padding:clamp(128px,15vw,190px) 0 clamp(72px,9vw,110px); }
.fl-phero-glow{ position:absolute; left:12%; top:-16%; width:min(760px,100vw); aspect-ratio:1;
  pointer-events:none;
  background:radial-gradient(circle, rgba(46,132,196,.24) 0%, rgba(46,132,196,0) 64%); }
.fl-phero-inner{ position:relative; z-index:2; width:min(1280px,92vw); margin:0 auto;
  padding-left:clamp(38px,7vw,120px);
  word-break:auto-phrase; line-break:strict; overflow-wrap:normal; }
.fl-crumbs{ display:flex; align-items:center; gap:11px; margin-bottom:26px;
  font-family:var(--fl-mono); font-size:11px; letter-spacing:.16em; color:#8fa3b3; }
.fl-crumbs a{ color:#a7bccb; text-decoration:none;
  border-bottom:1px solid var(--fl-hair-2); padding-bottom:2px;
  transition:color .35s var(--fl-ease), border-color .35s var(--fl-ease); }
.fl-crumbs a:hover{ color:var(--fl-blue-lt); border-color:var(--fl-blue-lt); }
.fl-crumbs [aria-current]{ color:var(--fl-blue-lt); }
.fl-phero-title{ margin:0; font-family:var(--fl-disp); font-weight:900; line-height:1.22;
  font-size:clamp(30px,5.2vw,62px); color:#fff; letter-spacing:.01em; }
.fl-phero-lead{ margin:26px 0 0; max-width:56ch; color:var(--fl-steel-1);
  font-size:15px; line-height:1.95; }
/* 下層ヒーローの背骨（番号なし・ラベルのみ） */
.fl-phero .fl-spine-vlabel{ color:#8fa3b3; }

/* ===================================================================
   FAQ 一覧 ― Q&A カード
   =================================================================== */
.fl-faq-sec{ background:linear-gradient(180deg, var(--fl-paper) 0%, #dfe6ed 100%); }
.fl-faqs{ display:flex; flex-direction:column; gap:clamp(16px,2vw,26px); }
.fl-faq{ position:relative; display:grid;
  grid-template-columns:clamp(62px,6.4vw,92px) minmax(0,1fr);
  gap:clamp(14px,2.2vw,34px); align-items:start;
  padding:clamp(26px,3.2vw,40px) clamp(24px,3vw,40px);
  background:#fff; border:1px solid rgba(120,140,160,.20); border-radius:3px;
  box-shadow:0 18px 38px -28px rgba(15,45,75,.38);
  transition:transform .45s var(--fl-ease), box-shadow .45s var(--fl-ease),
             border-color .45s var(--fl-ease); }
.fl-faq::before{ content:""; position:absolute; left:-1px; top:-1px; bottom:-1px; width:3px;
  background:linear-gradient(180deg, var(--fl-blue-lt), var(--fl-blue));
  transform:scaleY(.22); transform-origin:top;
  transition:transform .55s var(--fl-ease); }
.fl-faq:hover{ transform:translateY(-4px); border-color:rgba(26,106,166,.34);
  box-shadow:0 30px 56px -30px rgba(15,45,75,.46); }
.fl-faq:hover::before{ transform:scaleY(1); }
@media (prefers-reduced-motion:reduce){
  .fl-faq, .fl-faq::before{ transition:none; }
  .fl-faq:hover{ transform:none; }
}
.fl-faq-num{ font-family:var(--fl-mono); font-weight:700; letter-spacing:-.02em;
  font-size:clamp(32px,4.2vw,54px); line-height:.84; color:#c0cbd9;
  transition:color .45s var(--fl-ease); }
.fl-faq:hover .fl-faq-num{ color:var(--fl-blue-lt); }

.fl-faq-q{ margin:0 0 clamp(18px,2.2vw,26px); font-family:var(--fl-disp); font-weight:900;
  font-size:clamp(17px,2.1vw,24px); line-height:1.5; color:var(--fl-ink); letter-spacing:.01em; }

/* 回答：青の細罫で「流れ」を継ぐ */
.fl-faq-a{ display:grid; grid-template-columns:auto minmax(0,1fr);
  gap:clamp(12px,1.8vw,22px); align-items:start;
  padding-top:clamp(16px,2vw,22px); border-top:1px solid var(--fl-line-dk); }
.fl-faq-badge{ font-family:var(--fl-mono); font-weight:700; font-size:13px; line-height:1;
  color:#fff; background:var(--fl-blue); width:30px; height:30px; flex:none;
  display:inline-flex; align-items:center; justify-content:center; }
.fl-faq-a-body{ min-width:0; }
.fl-faq-a-body > p{ margin:0 0 13px; color:var(--fl-ink-soft); font-size:15px; line-height:1.95; }
.fl-faq-a-body > p:last-child{ margin-bottom:0; }
.fl-em{ background:none; color:var(--fl-blue); font-weight:700;
  box-shadow:inset 0 -.42em 0 rgba(26,106,166,.12); padding:0 .06em; }

/* メリット / デメリット ― 小見出しとして明確に立てる */
.fl-faq-a-body > p.fl-faq-sub{ margin:30px 0 16px; font-family:var(--fl-disp); font-weight:900;
  font-size:15px; letter-spacing:.06em; line-height:1;
  display:flex; align-items:center; gap:11px;
  padding:11px 16px 11px 14px; border-left:4px solid currentColor; }
.fl-faq-sub::before{ content:""; width:9px; height:9px; flex:none;
  border:2px solid currentColor; border-radius:50%; }
.fl-faq-a-body > p.fl-faq-merit{ color:var(--fl-blue); background:rgba(26,106,166,.08); }
.fl-faq-a-body > p.fl-faq-demerit{ color:var(--fl-red); background:rgba(210,59,44,.07); }
.fl-faq-a-body > p.fl-faq-sub:first-child{ margin-top:0; }
.fl-faq-list{ margin:0; padding-left:18px; list-style:none; }
.fl-faq-list li{ position:relative; padding-left:20px; margin-bottom:10px;
  color:var(--fl-ink-soft); font-size:14.5px; line-height:1.9; }
.fl-faq-list li::before{ content:""; position:absolute; left:2px; top:.78em;
  width:7px; height:1px; background:var(--fl-steel-2); }
.fl-faq-list li:last-child{ margin-bottom:0; }

/* FAQ の CTA は見出しなしのリード始まり */
.fl-cta-lead-top{ margin-top:0; font-size:clamp(16px,2vw,20px); color:#e6ebf0;
  font-family:var(--fl-disp); font-weight:700; line-height:1.7; max-width:44ch; }

/* FAQ レスポンシブ */
@media (max-width:820px){
  .fl-faq{ grid-template-columns:1fr; gap:10px; }
  .fl-faq-num{ font-size:34px; }
}
@media (max-width:520px){
  .fl-faq-a{ grid-template-columns:1fr; gap:14px; }
}