@charset "utf-8";
/* ============================================================
   /function リニューアル：ベネフィット5ピラー＋全機能アコーディオン
   2025のデザイン言語（#01a0e9 / #51bfeb / #073b52 / .section）に統一
   名前空間 .fn- に集約し既存スタイルと衝突させない
   ============================================================ */

/* ---- 5バリューピラー ---- */
.fn-pillar-list{ max-width:920px; margin:38px auto 0; display:flex; flex-direction:column; gap:16px; }
.fn-pillar{ display:flex; gap:22px; background:#fff; border:1px solid #e3eef5; border-radius:18px;
  padding:26px 28px; box-shadow:0 22px 50px -36px rgba(1,160,233,.45); transition:transform .2s, box-shadow .2s; }
.fn-pillar:hover{ transform:translateY(-3px); box-shadow:0 28px 58px -32px rgba(1,160,233,.5); }
.fn-pillar__icon{ flex:0 0 auto; width:58px; height:58px; border-radius:16px;
  background:linear-gradient(150deg,#51bfeb,#01a0e9); display:flex; align-items:center; justify-content:center; }
.fn-pillar__icon svg{ width:30px; height:30px; color:#fff; }
.fn-pillar--core .fn-pillar__icon{ background:linear-gradient(150deg,#0a4a63,#073b52); }
.fn-pillar__body{ flex:1; min-width:0; }
.fn-pillar__num{ font-family:"Poppins",sans-serif; font-weight:700; font-size:.78rem; letter-spacing:.1em; color:#9fc4d6; }
.fn-pillar__title{ font-size:1.4rem; font-weight:800; color:#073b52; margin:2px 0 0;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.fn-pillar__badge{ font-size:.68rem; font-weight:800; color:#9a6a06; background:#fff3d6;
  border:1px solid #ffe2a8; padding:3px 10px; border-radius:99px; }
.fn-pillar__lead{ font-size:1rem; font-weight:700; color:#26323a; line-height:1.7; margin:9px 0 13px; }
.fn-pillar__items{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr 1fr; gap:7px 24px; }
.fn-pillar__items li{ position:relative; padding-left:24px; font-size:.92rem; line-height:1.7; color:#39474f; }
.fn-pillar__items li::before{ content:""; position:absolute; left:4px; top:.42em; width:6px; height:11px;
  border-right:2.5px solid #01a0e9; border-bottom:2.5px solid #01a0e9; transform:rotate(45deg); }

/* ---- 業種診断バンド ---- */
.fn-diag{ display:flex; align-items:center; gap:16px; max-width:920px; margin:32px auto 0; text-decoration:none;
  background:linear-gradient(135deg,#eef9ff,#dcefff); border:1px solid #bfe6f7; border-radius:18px;
  padding:20px 26px; transition:transform .2s, box-shadow .2s; }
.fn-diag:hover{ transform:translateY(-2px); box-shadow:0 16px 32px -18px rgba(1,160,233,.55); }
.fn-diag__icon{ flex:0 0 auto; width:48px; height:48px; border-radius:50%; background:#01a0e9;
  display:flex; align-items:center; justify-content:center; }
.fn-diag__icon svg{ width:26px; height:26px; color:#fff; }
.fn-diag__body{ flex:1; min-width:0; }
.fn-diag__title{ font-size:1.1rem; font-weight:800; color:#073b52; margin:0; }
.fn-diag__sub{ font-size:.88rem; color:#0561c5; margin:3px 0 0; line-height:1.6; }
.fn-diag__go{ flex:0 0 auto; font-weight:800; color:#01a0e9; white-space:nowrap; }

/* ---- 信頼の束 ---- */
.fn-trust{ max-width:920px; margin:26px auto 0; display:flex; flex-wrap:wrap; justify-content:center; gap:12px 28px; }
.fn-trust > span{ font-size:.9rem; color:#6b7d88; display:inline-flex; align-items:center; gap:8px; }
.fn-trust svg{ width:18px; height:18px; color:#01a0e9; flex:0 0 auto; }

/* ---- 全機能・プラン対応表（アコーディオン） ---- */
.fn-toggle-wrap{ text-align:center; margin-top:26px; }
.fn-toggle{ display:inline-flex; align-items:center; gap:10px; background:#fff; border:2px solid #51bfeb;
  color:#0561c5; font-weight:800; font-size:1rem; border-radius:99px; padding:12px 30px; cursor:pointer; transition:.15s; }
.fn-toggle:hover{ background:#f4fbff; }
.fn-toggle svg{ width:16px; height:16px; transition:transform .2s; }
.fn-toggle[aria-expanded="true"] svg{ transform:rotate(180deg); }
.fn-toggle__close{ display:none; }
.fn-toggle[aria-expanded="true"] .fn-toggle__open{ display:none; }
.fn-toggle[aria-expanded="true"] .fn-toggle__close{ display:inline; }

/* ---- 全機能・プラン対応表 テーブルUI（fn-table.js が描画） ---- */
.fnt{ max-width:760px; margin:24px auto 0; }
.fnt__bar{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.fnt__search{ flex:1 1 300px; display:flex; align-items:center; gap:9px; background:#fff;
  border:1px solid #d4e3ef; border-radius:12px; padding:10px 14px; }
.fnt__search:focus-within{ border-color:#51bfeb; box-shadow:0 0 0 3px rgba(81,191,235,.18); }
.fnt__search svg{ width:18px; height:18px; color:#9fb6c4; flex:0 0 auto; }
.fnt__search input{ border:0; outline:0; width:100%; font-size:.95rem; color:#26323a; background:transparent; }
.fnt__plans{ display:flex; gap:6px; }
.fnt-plan{ background:#fff; border:1px solid #d4e3ef; color:#6b7d88; font-size:.82rem; font-weight:700;
  padding:8px 14px; border-radius:99px; cursor:pointer; transition:.15s; }
.fnt-plan:hover{ border-color:#51bfeb; color:#0561c5; }
.fnt-plan.is-active{ background:#01a0e9; border-color:#01a0e9; color:#fff; }
.fnt__chips{ display:flex; gap:6px; flex-wrap:wrap; margin-top:12px; }
.fnt-chip{ background:transparent; border:0; color:#6b7d88; font-size:.82rem; padding:6px 12px;
  border-radius:99px; cursor:pointer; transition:.15s; }
.fnt-chip:hover{ background:#eef6fc; color:#0561c5; }
.fnt-chip.is-active{ background:#eef6fc; color:#0561c5; font-weight:700; }
.fnt__count{ font-size:.8rem; color:#9fb6c4; margin:16px 2px 0; }
.fnt__count b{ color:#0288c2; }
.fnt-group{ margin-top:18px; }
.fnt-group[hidden]{ display:none; }
.fnt-group__head{ font-size:.8rem; font-weight:800; color:#5f8298; letter-spacing:.04em; margin:0 0 8px; }
.fnt-group__head span{ color:#9fb6c4; font-weight:700; }
.fnt-rows{ border:1px solid #e3eef5; border-radius:14px; overflow:hidden; background:#fff; }
.fnt-item[hidden]{ display:none; }
.fnt-item:not(:last-child){ border-bottom:1px solid #eef3f7; }
.fnt-row{ display:flex; align-items:center; gap:12px; width:100%; text-align:left; background:#fff;
  border:0; padding:14px 16px; cursor:pointer; transition:background .15s; }
.fnt-row:hover{ background:#f6fbff; }
.fnt-row__name{ flex:1; font-size:.95rem; font-weight:700; color:#26323a; min-width:0; }
.fnt-row__chev{ width:16px; height:16px; color:#b6c6d0; flex:0 0 auto; transition:transform .2s; }
.fnt-row[aria-expanded="true"] .fnt-row__chev{ transform:rotate(180deg); }
.fnt-row[aria-expanded="true"]{ background:#f6fbff; }
.fnt-badge{ flex:0 0 auto; font-size:.7rem; font-weight:800; padding:4px 11px; border-radius:99px; white-space:nowrap; }
.fnt-badge--all{ color:#0f6e56; background:#e1f5ee; }
.fnt-badge--premium{ color:#854f0b; background:#faeeda; }
.fnt-badge--beta{ color:#5f5e5a; background:#f1efe8; }
.fnt-desc{ display:none; padding:0 16px 15px; background:#f6fbff; }
.fnt-row[aria-expanded="true"] + .fnt-desc{ display:block; }
.fnt-desc p{ margin:0; font-size:.88rem; line-height:1.85; color:#5f7480; }
.fnt__empty{ text-align:center; color:#9fb6c4; padding:34px 0; }

@media (max-width:767px){
  .fn-pillar{ flex-direction:column; gap:14px; padding:22px 20px; }
  .fn-pillar__icon{ width:50px; height:50px; border-radius:14px; }
  .fn-pillar__icon svg{ width:26px; height:26px; }
  .fn-pillar__title{ font-size:1.2rem; }
  .fn-pillar__items{ grid-template-columns:1fr; gap:6px; }
  .fn-diag{ flex-direction:column; text-align:center; gap:12px; padding:22px 20px; }
}
@media (max-width:575px){
  .fnt__plans{ width:100%; }
  .fnt-plan{ flex:1; text-align:center; padding:8px 4px; font-size:.78rem; }
}