/* ============================================================
   FSW コーポレートサイト プロトタイプ（T-47）共通スタイル
   基準: future-secure-wave-design スキル＋文書様式標準
   （白×ネイビー・8pxグラデ罫。ナビは Owner 指示 2026-07-05 で
     左固定サイドバー→上部ヘッダーへ変更。追従はしない静的ヘッダー）
   2026-07-25 デザイン改修: pitch/サイバーレジリエンスサービス紹介_deck の
   設計言語（丸ゴ・淡青マーカー強調・キッカーチップ・クリムゾンルール・
   カード様式）へ寄せた。既存画像はすべて維持（page-hero で左余白に文字を重ねる）。
   ============================================================ */
:root{
  --navy-900:#060D3E; --navy-800:#0A1561; --navy-700:#223178; --navy-600:#33408C;
  --paleblue:#B3D9FF; --paleblue-200:#D6E9FF; --paleblue-100:#EAF3FF;
  --crimson:#D6004B;
  --white:#FFFFFF; --slate-50:#F5F7FB; --slate-100:#EDF1F7; --slate-200:#DEE4EE;
  --slate-300:#C5CEDD; --slate-700:#3A4252; --gray-500:#5C6470; --ink:#1A1F2E;
  --line:#DEE4EE;
  --grad-bar:linear-gradient(90deg,#0A1561 0%,#0A1561 30%,#B3D9FF 100%);
  --grad-navy:linear-gradient(135deg,#060D3E 0%,#0A1561 55%,#223178 100%);
  --font-jp:"Hiragino Maru Gothic ProN","ヒラギノ丸ゴ ProN","Hiragino Maru Gothic Pro","Meiryo","メイリオ",sans-serif;
  --sh-1:0 1px 3px rgba(10,21,97,.08);
  --sh-2:0 2px 10px rgba(10,21,97,.08);
  --sh-card:0 10px 22px rgba(10,21,97,.07);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:24px;}
body{font-family:var(--font-jp);color:var(--ink);background:var(--white);line-height:1.75;font-size:15.5px;}
a{color:var(--navy-700);}
img{max-width:100%;}

/* ---- レイアウト: 上部ヘッダーナビ＋本文（Owner指示 2026-07-05） ---- */
.wrap{max-width:960px;margin:0 auto;padding:0 20px 64px;}
#SITEHEAD{background:#fff;border-bottom:1px solid var(--line);}
#SITEHEAD .hd-in{max-width:1120px;margin:0 auto;padding:14px 20px 12px;
  display:flex;align-items:center;justify-content:space-between;gap:14px 22px;flex-wrap:wrap;}
#SITEHEAD .brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none;}
#SITEHEAD .brand img{height:34px;width:auto;}
#SITEHEAD .proto-tag{
  display:inline-block;font-size:10.5px;font-weight:700;color:var(--crimson);
  border:1px solid var(--crimson);border-radius:10px;padding:0 8px;letter-spacing:.06em;
}
#SITEHEAD .hd-grad{height:4px;background:var(--grad-bar);}
.hd-nav{display:flex;align-items:center;gap:2px;flex-wrap:wrap;}
.hd-nav>a,.hd-nav .dd>summary{
  display:block;font-size:14px;font-weight:600;color:var(--slate-700);
  text-decoration:none;padding:8px 13px;border-radius:6px;line-height:1.3;
  white-space:nowrap;cursor:pointer;
}
.hd-nav>a:hover,.hd-nav .dd>summary:hover{background:var(--paleblue-100);color:var(--navy-800);}
.hd-nav>a.active{background:var(--paleblue-100);color:var(--navy-800);font-weight:700;
  box-shadow:inset 0 -3px 0 var(--navy-800);}
.hd-nav>a.cta{background:var(--navy-800);color:#fff;font-weight:700;margin-left:6px;}
.hd-nav>a.cta:hover{background:var(--navy-700);color:#fff;}
.hd-nav>a.cta.active{box-shadow:none;background:var(--navy-700);}
/* サービス ドロップダウン（details/summary・JS最小） */
.hd-nav .dd{position:relative;}
.hd-nav .dd>summary{list-style:none;}
.hd-nav .dd>summary::-webkit-details-marker{display:none;}
.hd-nav .dd>summary::after{content:"▾";font-size:10px;margin-left:6px;color:var(--gray-500);}
.hd-nav .dd[open]>summary,.hd-nav .dd.cur>summary{
  background:var(--paleblue-100);color:var(--navy-800);font-weight:700;}
.hd-nav .dd.cur>summary{box-shadow:inset 0 -3px 0 var(--navy-800);}
.hd-nav .dd-panel{
  position:absolute;top:calc(100% + 8px);left:0;min-width:248px;z-index:60;
  background:#fff;border:1px solid var(--line);border-radius:10px;
  box-shadow:0 6px 22px rgba(10,21,97,.16);padding:10px;
}
.hd-nav .dd-sec{font-size:11px;font-weight:700;color:var(--gray-500);
  letter-spacing:.1em;margin:8px 4px 4px;}
.hd-nav .dd-sec:first-child{margin-top:2px;}
.hd-nav .dd-panel a{display:block;font-size:13.5px;font-weight:600;color:var(--slate-700);
  text-decoration:none;padding:6px 10px;border-radius:6px;border-left:3px solid transparent;
  white-space:nowrap;}
.hd-nav .dd-panel a:hover{background:var(--paleblue-100);color:var(--navy-800);}
.hd-nav .dd-panel a.active{background:var(--paleblue-100);color:var(--navy-800);
  border-left-color:var(--navy-800);font-weight:700;}
.hd-nav .dd-panel a .en{font-size:10px;color:var(--gray-500);letter-spacing:.08em;margin-left:6px;}
@media (max-width:920px){
  #SITEHEAD .hd-in{flex-direction:column;align-items:flex-start;gap:8px;}
  .hd-nav{gap:0;}
  .hd-nav>a,.hd-nav .dd>summary{font-size:13.5px;padding:7px 10px;}
  .hd-nav .dd-panel{position:static;box-shadow:none;border:1px solid var(--line);
    margin:4px 0 6px;min-width:0;}
  .hd-nav>a.cta{margin-left:0;}
}

/* ---- ページヘッダ ----
   デッキ表紙様式: キッカーチップ（淡青枠）→ タイトル → 8pxグラデ罫 */
.page-head{padding-top:36px;}
.page-head .eyebrow{display:inline-block;padding:4px 14px;border:1px solid var(--paleblue);
  background:rgba(234,243,255,.92);color:var(--navy-800);
  font-size:12.5px;font-weight:700;letter-spacing:.08em;}
.page-head h1{font-size:34px;font-weight:700;color:var(--navy-800);line-height:1.3;margin:14px 0 0;}
.page-head .fsw-bar{height:8px;width:100%;background:var(--grad-bar);margin:18px 0 8px;}
.page-head .lead{font-size:16px;color:var(--slate-700);margin-top:14px;}

/* ---- 強調（デッキ様式: ネイビー太字＋淡青マーカー50%） ---- */
.page-head .lead b,p.body b,ul.list b,.tbl td b,.card .d b,.hero .lead b,
.qa-item .a b,.ai-lens p b,.page-hero .ph-sub b,.cover-head .sub b{
  color:var(--navy-800);background:linear-gradient(transparent 50%,var(--paleblue) 50%);
  padding:0 2px;}

/* ---- ページヒーロー（デッキ・セクション扉の移植版） ----
   既存ヒーロー画像は「左余白・右被写体」構図のため、左に白グラデを
   敷いてキッカー／クリムゾンルール／タイトル／リードを重ねる。 */
.page-hero{position:relative;margin-top:28px;border-radius:12px;overflow:hidden;
  box-shadow:var(--sh-card);border:1px solid var(--line);
  min-height:300px;display:flex;align-items:center;}
.page-hero .ph-img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:right center;}
.page-hero::before{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(255,255,255,.62) 0%,rgba(255,255,255,.38) 46%,
    rgba(255,255,255,0) 78%);}
/* 文字の可読性はバックスクリーン（すりガラス調の白パネル）で担保する。
   backdrop-filter 非対応環境でも rgba(.82)＋左グラデで読める段構え。 */
.page-hero .ph-in{position:relative;max-width:640px;margin:32px 36px;padding:28px 32px;
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:blur(10px) saturate(1.05);backdrop-filter:blur(10px) saturate(1.05);
  border:1px solid rgba(255,255,255,.8);border-radius:12px;
  box-shadow:0 8px 24px rgba(10,21,97,.09);}
.page-hero .ph-kicker{display:inline-block;padding:4px 14px;border:1px solid var(--paleblue);
  background:rgba(234,243,255,.92);color:var(--navy-800);
  font-size:12px;font-weight:700;letter-spacing:.08em;}
.page-hero .ph-rule{width:56px;height:5px;background:var(--crimson);margin:16px 0 12px;}
.page-hero h1{font-size:34px;font-weight:700;color:var(--navy-800);line-height:1.3;margin:0;}
.page-hero h1 .ph-en{display:inline-block;margin-left:12px;font-size:13px;font-weight:700;
  letter-spacing:.16em;color:var(--navy-600);vertical-align:6px;}
.page-hero .ph-sub{margin:12px 0 0;font-size:15px;line-height:1.85;color:var(--slate-700);}
@media (max-width:720px){
  .page-hero{min-height:0;}
  .page-hero::before{background:rgba(255,255,255,.5);}
  .page-hero .ph-in{margin:14px;padding:22px 18px;}
  .page-hero h1{font-size:26px;}
}

/* ---- トップ表紙（デッキ表紙の中央揃えレイアウト） ---- */
.cover-head{text-align:center;padding:40px 20px 8px;}
.cover-head .kicker{display:inline-block;padding:4px 14px;border:1px solid var(--paleblue);
  background:rgba(234,243,255,.92);color:var(--navy-800);
  font-size:13px;font-weight:700;letter-spacing:.08em;}
.cover-head .rule{width:56px;height:5px;background:var(--crimson);margin:18px auto;}
.cover-head h1{font-size:36px;font-weight:700;color:var(--navy-800);line-height:1.4;margin:0;}
.cover-head .sub{max-width:760px;margin:16px auto 0;font-size:16px;line-height:1.85;
  color:var(--slate-700);}
.cover-head .mini{margin-top:10px;font-size:13.5px;color:var(--gray-500);}
@media (max-width:720px){.cover-head h1{font-size:27px;}}

/* ---- セクション ---- */
section{margin-top:44px;}
/* ブロックごとの背景色分け（白 / 淡いスレート）でセクションの区切りにリズムを出す。
   --slate-50 を採用（--paleblue-100 は .callout / .ai-lens 等の内部ボックスで
   既に使用中のため、入れ子になっても区別がつくよう別トーンにしている）。 */
.wrap > section:nth-of-type(even){
  background:var(--slate-50);
  border-radius:16px;
  padding:36px 32px;
}
@media (max-width:760px){
  .wrap > section:nth-of-type(even){padding:24px 18px;border-radius:12px;}
}
h2{font-size:24px;font-weight:700;color:var(--navy-800);line-height:1.35;}
h2 .bar{display:block;height:5px;width:56px;background:var(--grad-bar);margin-top:8px;}
h3.h3{font-size:18px;font-weight:700;color:var(--navy-800);margin:22px 0 10px;
  padding-left:12px;border-left:5px solid var(--navy-800);}
h3.h3.alert{border-left-color:var(--crimson);}
p.body{margin:12px 0;}
p.body b,li b{color:var(--navy-800);}
.note{font-size:13px;color:var(--gray-500);margin-top:8px;}

/* ---- 部品（デザインシステム移植・カード様式はデッキ準拠） ---- */
.card{border:1px solid var(--line);border-radius:10px;box-shadow:var(--sh-card);
  padding:18px 20px;background:#fff;}
.card .minibar{height:5px;width:48px;background:var(--grad-bar);margin-bottom:12px;}
.card .card-ico{width:46px;height:46px;border-radius:10px;margin-bottom:14px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,var(--paleblue-100),#fff);border:1px solid var(--line);}
.card .card-ico svg{width:24px;height:24px;stroke:var(--navy-800);fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;}
.card:hover .card-ico{background:linear-gradient(160deg,var(--paleblue),var(--paleblue-100));}
.card .card-logo{height:34px;max-width:150px;margin-bottom:14px;display:flex;align-items:center;}
.card .card-logo img{height:100%;width:auto;max-width:100%;object-fit:contain;object-position:left center;}
.card .t{font-size:17px;font-weight:700;color:var(--navy-800);margin:0 0 6px;}
.card .d{font-size:14px;color:var(--slate-700);line-height:1.65;margin:0;}
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:18px;}
.card-grid.two{grid-template-columns:repeat(2,1fr);}
@media (max-width:860px){.card-grid,.card-grid.two{grid-template-columns:1fr;}}
a.card{display:block;text-decoration:none;color:inherit;
  transition:box-shadow .15s ease,transform .15s ease;}
a.card:hover{box-shadow:0 5px 16px rgba(10,21,97,.14);transform:translateY(-2px);}

.tag-navy{display:inline-block;background:var(--navy-800);color:#fff;border-radius:4px;
  padding:2px 10px;font-size:12.5px;font-weight:700;}
.pill{display:inline-block;border:1px solid var(--crimson);color:var(--crimson);
  background:#fff;border-radius:16px;padding:1px 12px;font-size:12.5px;font-weight:700;}
.pill.muted{border-color:var(--slate-300);color:var(--slate-700);}

.chev-row{display:flex;gap:6px;margin:14px 0;}
.chev{flex:1;background:var(--navy-800);color:#fff;font-size:13.5px;font-weight:700;
  text-align:center;padding:9px 8px 9px 14px;line-height:1.3;
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,0 100%,12px 50%);}
.chev.alt{background:var(--navy-600);}
.chev.dim{background:var(--slate-300);color:var(--slate-700);}
@media (max-width:720px){.chev-row{flex-direction:column;}
  .chev{clip-path:none;border-radius:6px;padding:8px;}}

.tbl{width:100%;border-collapse:collapse;font-size:14px;margin-top:14px;line-break:strict;}
.tbl th,.tbl td{padding:10px 14px;text-align:left;border:1px solid var(--line);line-height:1.6;}
.tbl thead th{background:var(--navy-800);color:#fff;font-weight:700;border-color:var(--navy-700);}
.tbl tbody th{background:var(--slate-50);color:var(--navy-800);font-weight:700;white-space:nowrap;}
@media (max-width:640px){.tbl tbody th{white-space:normal;}}
.tbl tbody tr:nth-child(even) td{background:var(--slate-50);}
/* スレートパネル（.wrap > section:nth-of-type(even)）内に .tbl が来ると、
   縞模様・th背景（--slate-50）がパネル背景と同色になり見分けがつかなくなるため、
   その場合だけ一段濃い --slate-100 に切り替える（ワークフロー検証で検出・2026-07-24）。 */
.wrap > section:nth-of-type(even) .tbl tbody th,
.wrap > section:nth-of-type(even) .tbl tbody tr:nth-child(even) td{
  background:var(--slate-100);
}

ul.list{list-style:none;margin:10px 0;}
ul.list>li{position:relative;padding-left:20px;margin-bottom:8px;}
ul.list>li::before{content:"・";position:absolute;left:0;color:var(--navy-800);font-weight:700;}
ul.list .sub{list-style:none;margin:6px 0 0;}
ul.list .sub li{position:relative;padding-left:18px;font-size:13.5px;
  color:var(--slate-700);margin-bottom:4px;}
ul.list .sub li::before{content:"–";position:absolute;left:2px;color:var(--gray-500);}

/* CSF 機能ラベル（ページ間で統一） */
.fn-chip{display:inline-flex;align-items:baseline;gap:8px;background:var(--navy-800);
  color:#fff;border-radius:6px;padding:4px 14px;font-size:15px;font-weight:700;}
.fn-chip .en{font-size:10.5px;letter-spacing:.12em;color:var(--paleblue);}

/* 関連機能への横断リンク（ページ末尾） */
.fn-next{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px;}
.fn-next a{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;
  color:var(--navy-800);text-decoration:none;border:1px solid var(--slate-300);
  border-radius:8px;padding:8px 14px;background:#fff;}
.fn-next a:hover{background:var(--paleblue-100);border-color:var(--paleblue);}

/* ---- ヒーロービジュアル（KV画像・トップ/Partner） ---- */
.hero-visual{margin-top:24px;}
.hero-visual img{width:100%;height:auto;display:block;border-radius:12px;box-shadow:var(--sh-2);}

/* ---- ヒーロー（トップ） ---- */
.hero{display:grid;grid-template-columns:1fr 380px;gap:36px;align-items:center;padding-top:12px;}
@media (max-width:900px){.hero{grid-template-columns:1fr;}}
.hero h1{font-size:32px;line-height:1.4;color:var(--navy-800);}
.hero .lead{font-size:16px;color:var(--slate-700);margin-top:14px;}

/* ---- 帯（SECUREWAVE Partner 等） ---- */
.band{background:var(--grad-bar);color:#fff;border-radius:8px;padding:22px 26px;
  margin-top:20px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.band .bt{font-size:20px;font-weight:700;}
.band .bd{font-size:13.5px;opacity:.95;}
.band a{color:#fff;font-weight:700;white-space:nowrap;border:1px solid rgba(255,255,255,.7);
  border-radius:8px;padding:8px 18px;text-decoration:none;}
.band a:hover{background:rgba(255,255,255,.15);}

/* 写真つき帯（Partner等・T-新規：画像を活かした帯レイアウト） */
.band-photo{display:grid;grid-template-columns:1fr 340px;border-radius:12px;overflow:hidden;
  margin-top:20px;box-shadow:var(--sh-2);}
.band-photo .bp-text{background:var(--grad-bar);color:#fff;padding:30px 32px;
  display:flex;flex-direction:column;justify-content:center;gap:10px;}
.band-photo .bp-text .bt{font-size:21px;font-weight:700;}
.band-photo .bp-text .bd{font-size:13.5px;opacity:.95;line-height:1.7;}
.band-photo .bp-text a{align-self:flex-start;color:#fff;font-weight:700;white-space:nowrap;
  border:1px solid rgba(255,255,255,.7);border-radius:8px;padding:8px 18px;
  text-decoration:none;margin-top:4px;}
.band-photo .bp-text a:hover{background:rgba(255,255,255,.15);}
.band-photo .bp-img{position:relative;min-height:180px;}
.band-photo .bp-img img{width:100%;height:100%;object-fit:cover;display:block;}
.band-photo .bp-img::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(10,21,97,.55),rgba(10,21,97,0) 55%);}
@media (max-width:860px){.band-photo{grid-template-columns:1fr;}.band-photo .bp-img{min-height:160px;}}

/* 写真バナー（会社紹介など・中間セクション用） */
.section-photo{position:relative;margin-top:22px;border-radius:12px;overflow:hidden;box-shadow:var(--sh-2);}
.section-photo img{width:100%;height:auto;max-height:320px;object-fit:cover;display:block;}
.section-photo .sp-cap{position:absolute;left:0;right:0;bottom:0;padding:20px 26px;
  background:linear-gradient(0deg,rgba(6,13,62,.82),rgba(6,13,62,0));color:#fff;}
.section-photo .sp-cap .sc-t{font-size:17px;font-weight:700;}
.section-photo .sp-cap .sc-d{font-size:12.5px;opacity:.9;margin-top:4px;}

/* ---- フッター ---- */
footer.site{border-top:1px solid var(--line);margin-top:64px;padding:22px 0 8px;
  font-size:12px;color:var(--gray-500);}
footer.site .grad{height:3px;background:var(--grad-bar);margin-bottom:16px;}
footer.site .proto-note{color:var(--crimson);font-weight:700;margin-bottom:6px;}

/* ---- 機能ページ共通部品（コンテンツ2カラム／callout／お悩みグリッド／ステップリスト／パネル見出し） ---- */
.cols{display:flex;gap:28px;align-items:flex-start;}
.cols .col{flex:1;min-width:0;}
@media (max-width:820px){.cols{flex-direction:column;}}

.callout{border-left:6px solid var(--navy-800);background:var(--paleblue-100);
  padding:14px 20px;font-size:15.5px;line-height:1.75;font-weight:700;
  color:var(--navy-800);border-radius:0 8px 8px 0;margin-top:18px;}

.panel-label{background:var(--navy-800);color:#fff;font-size:15.5px;font-weight:700;
  text-align:center;padding:8px 14px;border-radius:6px;margin:0 0 12px;}
.panel-label.crimson{background:var(--crimson);}

.step-list{list-style:none;margin:10px 0 0;display:flex;flex-direction:column;gap:6px;}
.step-list li{border:1px solid var(--navy-600);border-radius:6px;background:#fff;
  color:var(--navy-800);font-weight:700;font-size:13.5px;padding:9px 14px;}

/* Q&Aグリッド（デッキ p16「ニーズ→サービス対応カード」様式:
   白カードの左に淡青の質問箱＋吹き出し矢印、右に回答） */
.qa-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 18px;margin-top:18px;}
.qa-item{display:grid;grid-template-columns:190px 1fr;align-items:stretch;
  text-decoration:none;color:inherit;background:#fff;border:1px solid var(--line);
  border-radius:8px;box-shadow:var(--sh-2);overflow:hidden;
  transition:box-shadow .15s ease,transform .15s ease;}
.qa-item .q{position:relative;background:var(--paleblue-100);color:var(--navy-800);
  font-size:12.8px;font-weight:700;padding:12px 22px 12px 14px;
  display:flex;align-items:center;line-height:1.5;}
.qa-item .q::after{content:"";position:absolute;right:-9px;top:50%;transform:translateY(-50%);
  border-style:solid;border-width:9px 0 9px 9px;
  border-color:transparent transparent transparent var(--paleblue-100);z-index:1;}
.qa-item .a{font-size:13px;line-height:1.6;color:var(--slate-700);
  padding:12px 16px 12px 20px;display:flex;flex-direction:column;justify-content:center;}
.qa-item .a .tag-navy{margin-bottom:4px;align-self:flex-start;}
a.qa-item:hover{box-shadow:0 5px 16px rgba(10,21,97,.14);transform:translateY(-2px);}
a.qa-item:hover .q{background:var(--paleblue-200);}
.qa-item.muted{opacity:.72;}
@media (max-width:760px){.qa-grid{grid-template-columns:1fr;}
  .qa-item{grid-template-columns:1fr;}
  .qa-item .q{padding:10px 14px;}
  .qa-item .q::after{display:none;}}

/* ステップカード（デッキ「ご相談の進め方」の番号チップつきカード） */
.step-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px;}
.step-cards>div{background:#fff;border:1px solid var(--line);border-radius:10px;
  box-shadow:var(--sh-card);padding:16px 18px;}
.step-cards span{display:inline-flex;align-items:center;justify-content:center;
  min-width:30px;height:22px;margin-bottom:8px;background:var(--navy-800);color:#fff;
  font-size:11.5px;font-weight:700;}
.step-cards b{display:block;color:var(--navy-800);font-size:15.5px;line-height:1.4;margin-bottom:6px;}
.step-cards p{margin:0;color:var(--slate-700);font-size:13px;line-height:1.6;}
@media (max-width:760px){.step-cards{grid-template-columns:1fr;}}

/* ---- ダミー問い合わせフォーム（contact.html・送信機能なし） ---- */
.proto-form{max-width:560px;margin-top:16px;background:var(--slate-50);
  border:1px solid var(--line);border-radius:10px;padding:26px 28px;}
.proto-form .fg{margin-bottom:16px;}
.proto-form label{display:block;font-size:13px;font-weight:700;color:var(--slate-700);margin-bottom:6px;}
.proto-form .req{display:inline-block;font-size:10.5px;font-weight:700;color:var(--crimson);
  border:1px solid var(--crimson);border-radius:10px;padding:0 7px;margin-left:6px;vertical-align:1px;}
.proto-form .opt{display:inline-block;font-size:10.5px;font-weight:700;color:var(--gray-500);
  border:1px solid var(--slate-300);border-radius:10px;padding:0 7px;margin-left:6px;vertical-align:1px;}
.proto-form input[type=text],.proto-form input[type=email],.proto-form textarea{
  width:100%;border:1px solid var(--slate-300);border-radius:6px;padding:10px 12px;
  font-size:14px;font-family:var(--font-jp);background:#fff;color:var(--ink);}
.proto-form textarea{min-height:96px;resize:vertical;}
.proto-form .consent{display:flex;align-items:flex-start;gap:8px;}
.proto-form .consent input{margin-top:3px;width:auto;flex:none;}
.proto-form .consent label{font-size:13px;font-weight:500;margin:0;}
.proto-form button{width:100%;padding:12px;border:0;border-radius:8px;
  background:var(--navy-800);color:#fff;font-weight:700;font-size:14.5px;cursor:not-allowed;}
.proto-form .form-note{font-size:12px;color:var(--gray-500);margin-top:10px;text-align:center;}

/* ---- 情報ボックス（プロトタイプ注記等） ---- */
.info-box{border:1px solid var(--crimson);background:#fff5f8;color:var(--crimson);
  border-radius:8px;padding:12px 18px;font-size:13.5px;font-weight:700;margin-top:16px;}

/* ---- AIレンズ（各機能ページ／独立ページと接続する差し込み） ---- */
.ai-badge{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.04em;
  border-radius:10px;padding:1px 8px;margin-left:6px;vertical-align:1px;}
.ai-badge.with{background:var(--navy-800);color:#fff;}
.ai-badge.of{background:var(--paleblue-100);color:var(--navy-800);border:1px solid var(--paleblue);}
.ai-lens{border:1px solid var(--paleblue);background:var(--paleblue-100);border-radius:10px;
  padding:14px 18px;margin-top:20px;}
.ai-lens .hd{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px;}
.ai-lens .hd .lbl{font-size:14px;font-weight:700;color:var(--navy-800);}
.ai-lens .hd .ai-badge{margin-left:0;}
.ai-lens p{font-size:13.5px;color:var(--slate-700);line-height:1.75;margin:0;}
.ai-lens p b{color:var(--navy-800);}
.ai-lens a.more{font-size:12.5px;font-weight:700;color:var(--navy-800);text-decoration:none;
  white-space:nowrap;margin-left:auto;}
.ai-lens a.more:hover{text-decoration:underline;}
@media (max-width:560px){.ai-lens a.more{margin-left:0;}}

/* ---- セキュア基盤レイヤー（CSF 2.0 の6機能を下支えする土台・トップページ／基盤ページ共通） ---- */
.fd-arrows{display:flex;justify-content:center;gap:64px;margin-top:18px;}
.fd-arrows span{width:0;height:0;border-left:9px solid transparent;border-right:9px solid transparent;
  border-bottom:11px solid var(--paleblue);}
.foundation{margin-top:10px;border:1px solid var(--line);border-radius:12px;background:#fff;
  box-shadow:var(--sh-2);overflow:hidden;}
.foundation .fd-top{height:5px;background:var(--grad-bar);}
.foundation .fd-hd{display:flex;gap:20px;align-items:flex-end;justify-content:space-between;
  padding:20px 24px 18px;flex-wrap:wrap;}
.foundation .fd-hd>div:first-child{flex:1 1 480px;}
.foundation .fd-kicker{display:inline-block;padding:3px 12px;border:1px solid var(--paleblue);
  border-radius:12px;background:var(--paleblue-100);color:var(--navy-800);
  font-size:10.5px;font-weight:700;letter-spacing:.1em;}
.foundation .fd-t{font-size:21px;font-weight:700;color:var(--navy-800);margin:10px 0 0;line-height:1.35;}
.foundation .fd-t .en{display:block;font-size:10.5px;font-weight:700;letter-spacing:.1em;
  color:var(--gray-500);margin-top:4px;}
.foundation .fd-d{font-size:13.5px;line-height:1.8;color:var(--slate-700);margin:10px 0 0;max-width:700px;}
.foundation .fd-d b{color:var(--navy-800);}
.foundation .fd-more{font-size:13px;font-weight:700;color:var(--navy-800);text-decoration:none;
  border:1px solid var(--slate-300);border-radius:6px;padding:9px 15px;white-space:nowrap;}
.foundation .fd-more:hover{background:var(--paleblue-100);border-color:var(--paleblue);}
.foundation .fd-items{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line);border-top:1px solid var(--line);}
.foundation .fd-items>div{background:#fff;padding:15px 18px 17px;}
.foundation .fd-items b{display:block;font-size:14px;color:var(--navy-800);margin-bottom:5px;}
.foundation .fd-items p{margin:0;font-size:12.5px;line-height:1.65;color:var(--slate-700);}
@media (max-width:820px){.foundation .fd-items{grid-template-columns:repeat(2,1fr);}
  .fd-arrows{gap:40px;}}
@media (max-width:520px){.foundation .fd-items{grid-template-columns:1fr;}}