@charset "UTF-8";
/* ==========================================================================
   241回目（2026/10/01）：主な機能の下層ページ（4ページ）
   1) 機能ブロックをA案に（番号／見出し／赤いリード／説明文／ポイント3点｜図解）
   2) 図解をHTMLで実装（画像なし）＋クリックで拡大表示
   読み込み順：feature.css の後
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 機能ブロック（A案）
   -------------------------------------------------------------------------- */
.feat-v2 .featdetail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 104px 0;
}
.feat-v2 .featdetail-item {
  display: grid;
  grid-template-columns: minmax(0, 470px) minmax(0, 1fr);
  grid-template-rows: auto auto;
  -webkit-column-gap: 56px;
  column-gap: 56px;
  row-gap: 0;
  align-items: center;
  align-content: center;
}
.feat-v2 .featdetail-item .featdetail-head   { grid-area: 1 / 1 / 2 / 2; align-self: end; }
.feat-v2 .featdetail-item .featdetail-desc   { grid-area: 2 / 1 / 3 / 2; align-self: start; }
.feat-v2 .featdetail-item .featdetail-visual { grid-area: 1 / 2 / 3 / 3; margin: 0; }
.feat-v2 .featdetail-item:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 470px); }
.feat-v2 .featdetail-item:nth-child(even) .featdetail-head   { grid-area: 1 / 2 / 2 / 3; }
.feat-v2 .featdetail-item:nth-child(even) .featdetail-desc   { grid-area: 2 / 2 / 3 / 3; }
.feat-v2 .featdetail-item:nth-child(even) .featdetail-visual { grid-area: 1 / 1 / 3 / 2; }

.feat-v2 .featdetail-no {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  color: #6B7280;
  letter-spacing: .08em;
}
.feat-v2 .featdetail-no::before {
  content: "";
  display: block;
  width: 28px;
  height: 1px;
  background: #F32F4C;
}
.feat-v2 .featdetail-no b { color: #F32F4C; font-weight: 700; font-size: 14px; }
.feat-v2 .featdetail-item .featdetail-ttl {
  margin: 0;
  padding: 0;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.45;
  color: #222222;
  text-align: left;
}
.feat-v2 .featdetail-lead {
  margin: 14px 0 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.7;
  color: #F32F4C;
}
.feat-v2 .featdetail-item .featdetail-body {
  margin: 14px 0 0;
  padding: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: 0;
  color: #45484D;
  text-indent: 0;
}
.feat-v2 .featdetail-points {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid #E4E8ED;
}
.feat-v2 .featdetail-points li {
  position: relative;
  margin: 0;
  padding: 11px 0 11px 26px;
  font-size: 14px;
  line-height: 1.6;
  color: #222222;
  border-bottom: 1px solid #E4E8ED;
}
.feat-v2 .featdetail-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 15px;
  width: 16px;
  height: 16px;
  background: #F32F4C;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* 図解を乗せる面（画像のままの図解も同じ面に乗せる） */
.feat-v2 .featdetail-stage,
.feat-v2 .featdetail-stage *,
.ffz,
.ffz__fit,
.ffm, .ffm * { box-sizing: border-box; }
.feat-v2 .featdetail-stage {
  display: block;
  width: 100%;
  margin: 0;
  padding: 36px 32px;
  border: 0;
  border-radius: 12px;
  background: #F5F8FA;
}
.feat-v2 .featdetail-stage img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 900px) {
  .feat-v2 .featdetail-grid { gap: 64px 0; }
  .feat-v2 .featdetail-item,
  .feat-v2 .featdetail-item:nth-child(even) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
  }
  /* SP：番号・見出し → 図解 → リード・説明文・ポイント */
  .feat-v2 .featdetail-item .featdetail-head,
  .feat-v2 .featdetail-item:nth-child(even) .featdetail-head   { grid-area: 1 / 1 / 2 / 2; }
  .feat-v2 .featdetail-item .featdetail-visual,
  .feat-v2 .featdetail-item:nth-child(even) .featdetail-visual { grid-area: 2 / 1 / 3 / 2; margin-top: 20px; }
  .feat-v2 .featdetail-item .featdetail-desc,
  .feat-v2 .featdetail-item:nth-child(even) .featdetail-desc   { grid-area: 3 / 1 / 4 / 2; }
  .feat-v2 .featdetail-item .featdetail-ttl { font-size: 22px; }
  .feat-v2 .featdetail-lead { margin-top: 18px; font-size: 15px; }
  .feat-v2 .featdetail-stage { padding: 20px 16px; }
}

/* --------------------------------------------------------------------------
   2. 図解ボタン（ブロック内）
   -------------------------------------------------------------------------- */
.ffz {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding: 36px 32px;
  border: 0;
  border-radius: 12px;
  background: #F5F8FA;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: zoom-in;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color .2s;
}
.ffz:hover { background: #EEF2F6; }
.ffz:focus-visible { outline: 2px solid #F32F4C; outline-offset: 3px; }
.ffz__fit { position: relative; width: 100%; }
.ffz__in { position: absolute; left: 0; top: 0; width: 1160px; -webkit-transform-origin: 0 0; transform-origin: 0 0; }
.ffz__hint {
  position: absolute;
  right: 14px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 1px 3px rgba(20, 30, 60, .12);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  color: #6B7280;
  transition: color .2s;
}
.ffz:hover .ffz__hint { color: #F32F4C; }
.ffz__hint svg { width: 12px; height: 12px; }
@media (max-width: 900px) {
  .ffz { padding: 20px 16px 44px; }
}

/* --------------------------------------------------------------------------
   3. 拡大表示
   -------------------------------------------------------------------------- */
html.ffm-lock, html.ffm-lock body { overflow: hidden; }
.ffm {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(18, 22, 30, .86);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s, visibility .25s;
}
.ffm.is-open { opacity: 1; visibility: visible; }
.ffm__box { position: relative; }
.ffm__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.ffm__ttl { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.5; color: #fff; }
.ffm__x {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  cursor: pointer;
}
.ffm__x:hover { background: rgba(255, 255, 255, .26); }
.ffm__x:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ffm__scroll { overflow: auto; -webkit-overflow-scrolling: touch; border-radius: 12px; background: #F5F8FA; }
.ffm__stage { position: relative; }
.ffm__stage > .ff { position: absolute; left: 0; top: 0; -webkit-transform-origin: 0 0; transform-origin: 0 0; }
.ffm__sp { display: none; margin: 10px 0 0; font-size: 11px; color: rgba(255, 255, 255, .72); text-align: center; }
@media (max-width: 767px) {
  .ffm { align-items: flex-start; padding-top: 48px; }
  .ffm__box { width: calc(100% - 24px); }
  .ffm__sp { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .ffm, .ffz, .ffz__hint { transition: none; }
}

/* --------------------------------------------------------------------------
   4. 図解の部品（.ff 配下のみ。幅1160pxの原寸で組み、表示側で縮小）
   -------------------------------------------------------------------------- */
.ff {
  position: relative;
  width: 1160px;
  font-family: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  color: #222222;
  letter-spacing: 0;
  text-align: left;
  -webkit-font-smoothing: antialiased;
}
.ff *, .ff *::before, .ff *::after { box-sizing: border-box; }
.ff b, .ff strong { font-weight: 700; }
.ff svg { display: block; overflow: visible; }
.ff table { border-collapse: collapse; border-spacing: 0; width: auto; margin: 0; }
.ff th, .ff td { margin: 0; border: 0; font-size: inherit; line-height: inherit; vertical-align: middle; }

/* 枠 */
.ff-abs { position: absolute; }
.ff-win {
  position: absolute;
  overflow: hidden;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 24px 50px -22px rgba(20, 30, 60, .38), 0 1px 4px rgba(20, 30, 60, .08);
}
.ff-row { display: flex; }
.ff-col { display: flex; flex-direction: column; }
.ff-grow { flex: 1 1 auto; min-width: 0; }
.ff-dim { position: absolute; inset: 0; background: rgba(34, 40, 52, .32); }

/* サイドメニュー */
.ff-side { flex: none; width: 196px; padding: 14px 0 0; border-right: 1px solid #EEF1F4; background: #fff; }
.ff-side__logo { display: flex; align-items: center; gap: 8px; padding: 0 14px 16px; }
.ff-logo { display: flex; align-items: center; gap: 4px; font-size: 17px; font-weight: 700; letter-spacing: .01em; color: #222; }
.ff-logo i { display: block; width: 14px; height: 17px; }
.ff-side__top { padding: 2px 8px; border: 1px solid #D6DBE1; border-radius: 999px; font-size: 9px; color: #6B7280; }
.ff-side__fold { margin-left: auto; color: #9AA3AE; font-size: 13px; }
.ff-nav__g { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px 6px 18px; font-size: 13px; font-weight: 700; }
.ff-nav__i { display: flex; align-items: center; gap: 8px; margin: 1px 8px; padding: 6px 10px; border-radius: 6px; font-size: 12px; color: #33373D; }
.ff-nav__i.is-on { background: #F1F4F8; font-weight: 700; }
.ff-nav__s { margin: 0 8px 0 30px; padding: 6px 0 6px 18px; border-left: 1px solid #E4E8ED; font-size: 12px; color: #45484D; }
.ff-nav__s.is-on { margin-left: 30px; padding-left: 16px; border-left: 2px solid #F32F4C; background: #F7F9FB; font-weight: 700; color: #222; }
.ff-nav__ss { margin: 0 8px 0 30px; padding: 5px 0 5px 32px; border-left: 1px solid #E4E8ED; font-size: 12px; color: #45484D; }
.ff-nav__ss.is-on { background: #F1F4F8; font-weight: 700; color: #222; }
.ff-ico { flex: none; width: 13px; height: 13px; border: 1.5px solid #6B7280; border-radius: 2px; }
.ff-chev { width: 10px; height: 10px; color: #6B7280; }

/* ヘッダー・ツールバー */
.ff-bar { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 16px; border-bottom: 1px solid #EEF1F4; font-size: 12px; }
.ff-bar__back { color: #6B7280; font-size: 14px; }
.ff-bar__ttl { font-weight: 500; }
.ff-bar__r { margin-left: auto; display: flex; align-items: center; gap: 10px; color: #6B7280; font-size: 11px; }
.ff-tool { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border-bottom: 1px solid #EEF1F4; color: #6B7280; font-size: 11px; }
.ff-tool__b { display: inline-block; width: 16px; height: 12px; border: 1.5px solid #9AA3AE; border-radius: 2px; }
.ff-tool__sep { width: 1px; height: 16px; background: #E4E8ED; }
.ff-pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border: 1px solid #E4E8ED; border-radius: 6px; background: #fff; font-size: 11px; color: #45484D; }
.ff-pill--ok { border-color: #9AD7B0; background: #EAF7EF; color: #2E9B5A; font-weight: 700; }

/* スプレッドシート */
.ff-sheet { border-collapse: collapse; table-layout: fixed; }
.ff-sheet td { height: 26px; padding: 0 8px; border-bottom: 1px solid #EEF1F4; text-align: right; white-space: nowrap; overflow: hidden; }
.ff-sheet td.rn { width: 30px; padding: 0; text-align: center; background: #F5F7FA; color: #9AA3AE; font-size: 10px; border-right: 1px solid #E4E8ED; }
.ff-sheet td.rn.is-sel { background: #FDE3E7; color: #F32F4C; }
.ff-sheet tr.ab td { height: 22px; background: #F5F7FA; color: #9AA3AE; font-size: 10px; text-align: center; border-right: 1px solid #E4E8ED; }
.ff-sheet tr.ab td.is-sel { background: #FDE3E7; color: #F32F4C; }
.ff-sheet tr.hd td { background: #EAF2FB; font-weight: 700; text-align: right; }
.ff-sheet tr.hd td.c { text-align: center; }
.ff-sheet td.lb { text-align: left; }
.ff-sheet td.kt { text-align: center; color: #6B7280; font-size: 11px; }
.ff-sheet td.l1 { padding-left: 26px; }
.ff-sheet td.l2 { padding-left: 50px; color: #45484D; }
.ff-sheet td.l3 { padding-left: 74px; color: #45484D; }
.ff-sheet td.l4 { padding-left: 98px; color: #45484D; }
.ff-sheet tr.tp td { font-weight: 700; background: #FAFCFE; }
.ff-sheet tr.tp td.lb { color: #2E7CD6; text-decoration: underline; text-underline-offset: 2px; }
.ff-sheet tr.sm td { font-size: 10px; color: #6B7280; }
.ff-sheet td.vl { border-left: 1px solid #D6DEE8; }
.ff-sheet .ng { color: #F32F4C; font-style: italic; }
.ff-sheet .ps { color: #2E7CD6; font-style: italic; }
.ff-sheet .up::before { content: "▲"; margin-right: 1px; font-size: 9px; font-style: normal; }
.ff-sheet td.ed { background: #fff; outline: 2px solid #F32F4C; outline-offset: -2px; }
.ff-sheet td.cl { outline: 2px solid #F32F4C; outline-offset: -2px; }
.ff-hit { display: inline-block; padding: 2px 7px; margin: -4px -8px; border: 2px solid #F32F4C; border-radius: 3px; background: #FFF5F6; }
.ff-caret { display: inline-block; width: 1px; height: 13px; margin-left: 1px; background: #222; vertical-align: -2px; }

/* ダイアログ・フォーム */
.ff-dlg {
  position: absolute;
  background: #fff;
  border-radius: 12px;
  padding: 18px 20px 16px;
  box-shadow: 0 26px 56px -18px rgba(20, 30, 60, .42), 0 1px 4px rgba(20, 30, 60, .1);
}
.ff-dlg__t { margin: 0 0 4px; font-size: 14px; font-weight: 700; text-align: center; }
.ff-dlg__d { margin: 0 0 12px; font-size: 11px; color: #6B7280; text-align: center; }
.ff-dlg__f { display: flex; justify-content: center; gap: 10px; margin-top: 14px; }
.ff-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 84px; height: 28px; padding: 0 14px; border-radius: 6px; font-size: 12px; font-weight: 500; }
.ff-btn--g { border: 1px solid #C9D1DA; background: #fff; color: #45484D; }
.ff-btn--r { background: #F32F4C; color: #fff; }
.ff-btn--o { min-width: 0; height: 24px; border: 1.5px solid #F32F4C; color: #F32F4C; background: #fff; font-size: 11px; }
.ff-lbl { margin: 0 0 4px; font-size: 11px; color: #6B7280; }
.ff-sel, .ff-inp {
  position: relative;
  display: flex;
  align-items: center;
  height: 30px;
  padding: 0 10px;
  border: 1px solid #DDE2E8;
  border-radius: 6px;
  background: #fff;
  font-size: 12px;
  color: #222;
  white-space: nowrap;
  overflow: hidden;
}
.ff-sel { padding-right: 26px; }
.ff-sel::after { content: ""; position: absolute; right: 10px; top: 50%; width: 6px; height: 6px; margin-top: -5px; border: solid #6B7280; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.ff-inp--g, .ff-sel--g { background: #F1F4F8; color: #45484D; }
.ff-inp--ph { color: #B0B7C0; }
.ff-inp--on { border-color: #F32F4C; box-shadow: 0 0 0 2px rgba(243, 47, 76, .14); }
.ff-ck { position: relative; display: inline-block; width: 14px; height: 14px; border: 1.5px solid #B0B7C0; border-radius: 3px; background: #fff; vertical-align: -2px; }
.ff-ck.is-on { border-color: #F32F4C; }
.ff-ck.is-on::after { content: ""; position: absolute; left: 3.5px; top: 0; width: 4px; height: 8px; border: solid #F32F4C; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.ff-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 1px solid #E4E8ED; border-radius: 6px; background: #fff; font-size: 12px; }
.ff-chip.is-on { color: #F32F4C; font-weight: 500; }
.ff-grip { display: inline-block; width: 10px; height: 8px; border-top: 1.5px solid #9AA3AE; border-bottom: 1.5px solid #9AA3AE; position: relative; }
.ff-grip::after { content: ""; position: absolute; left: 0; right: 0; top: 2px; height: 1.5px; background: #9AA3AE; }
.ff-x { display: inline-block; width: 16px; height: 16px; border-radius: 50%; background: #6B7280; position: relative; flex: none; }
.ff-x::before, .ff-x::after { content: ""; position: absolute; left: 4px; top: 7.2px; width: 8px; height: 1.6px; background: #fff; transform: rotate(45deg); }
.ff-x::after { transform: rotate(-45deg); }
.ff-edit { display: inline-block; width: 14px; height: 14px; flex: none; background: #F32F4C;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 20h4L19 9l-4-4L4 16v4zm13.6-15.6 2 2 1.4-1.4-2-2z' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 20h4L19 9l-4-4L4 16v4zm13.6-15.6 2 2 1.4-1.4-2-2z' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain; }
.ff-box { border: 1px solid #E4E8ED; border-radius: 8px; padding: 10px; background: #fff; }
.ff-box--g { background: #F7F9FB; }
.ff-sec { margin: 0 0 6px; font-size: 12px; font-weight: 700; }
.ff-add { margin-top: 8px; font-size: 12px; font-weight: 700; text-align: center; color: #222; }
.ff-add--r { color: #F32F4C; font-weight: 500; }

/* ツリー（階層データ） */
.ff-tree__r { position: relative; display: flex; align-items: center; gap: 12px; height: 30px; margin: 0 0 5px; padding: 0 10px; border: 1px solid #E4E8ED; border-radius: 6px; background: #FAFBFC; font-size: 12px; }
.ff-tree__r.is-top { background: #EEF5FC; border-color: #D6E6F6; }
.ff-tree__c { padding: 2px 8px; border: 1px solid #DDE2E8; border-radius: 5px; background: #fff; font-size: 10px; color: #6B7280; }
.ff-tree__tg { position: absolute; left: -22px; top: 9px; width: 8px; height: 8px; border: solid #45484D; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }

/* カード・グラフ */
.ff-card { position: absolute; padding: 12px 14px; background: #fff; border-radius: 10px; box-shadow: 0 6px 18px -10px rgba(20, 30, 60, .25), 0 0 0 1px #EEF1F4; }
.ff-card__t { margin: 0 0 6px; font-size: 12px; font-weight: 700; text-align: center; }
.ff-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; margin: 0 0 6px; font-size: 10px; color: #45484D; }
.ff-legend i { display: inline-block; width: 10px; height: 8px; margin-right: 4px; border-radius: 1px; vertical-align: 0; }

/* チャット */
.ff-chat__side { flex: none; width: 210px; padding: 14px 10px; background: #1F2A44; color: #C9D2E3; font-size: 12px; }
.ff-chat__side .it { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; }
.ff-chat__side .it.is-b { color: #fff; font-weight: 700; }
.ff-chat__side .it.is-on { background: #2F5BB7; color: #fff; }
.ff-chat__side .hs { width: 12px; height: 12px; border-radius: 3px; background: #4B5873; flex: none; }
.ff-chat__side .gp { margin: 10px 0 2px; padding: 0 8px; font-size: 11px; color: #8D99B3; }
.ff-av { flex: none; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 6px; background: #3B5998; color: #fff; font-size: 12px; font-weight: 700; }
.ff-av--k { background: #fff; border: 1px solid #F1D2D8; }
.ff-msg { display: flex; gap: 10px; }
.ff-msg__n { font-size: 12px; font-weight: 700; }
.ff-msg__n small { margin-left: 6px; font-size: 10px; font-weight: 400; color: #8D96A3; }
.ff-msg__t { margin-top: 2px; font-size: 12px; line-height: 1.6; }
.ff-sugg { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border: 1px solid #C9D1DA; border-radius: 4px; font-size: 11px; font-weight: 700; }
.ff-compose { border: 1px solid #C9D1DA; border-radius: 8px; padding: 8px 10px; font-size: 12px; color: #8D96A3; }

/* 吹き出し（AI） */
.ff-tip { position: absolute; padding: 14px 16px; border-radius: 8px; background: #2A2F38; color: #fff; box-shadow: 0 18px 36px -14px rgba(0, 0, 0, .45); }
.ff-tip__t { margin: 0 0 8px; padding-bottom: 8px; border-bottom: 1px solid rgba(255, 255, 255, .25); font-size: 14px; font-weight: 700; }
.ff-tip__b { margin: 0; font-size: 12px; line-height: 1.75; }

/* クリック表現 */
.ff-cur { position: absolute; width: 26px; height: 26px; z-index: 5; }
.ff-cur svg { position: absolute; left: 0; top: 0; width: 26px; height: 26px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .25)); }
.ff-cur i { position: absolute; left: -5px; top: -5px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid #F32F4C; opacity: .55; }
.ff-cur i + i { left: -10px; top: -10px; width: 26px; height: 26px; opacity: .25; }

/* 明細テーブル（ダイアログ内など） */
.ff-dd { width: 100%; font-size: 11px; }
.ff-dd th { padding: 5px 6px; background: #D6E8FB; font-weight: 500; text-align: center; white-space: nowrap; }
.ff-dd td { padding: 5px 6px; border-bottom: 1px solid #EEF1F4; text-align: center; white-space: nowrap; }

/* 組織ツリー（図解） */
.ff-ot { font-size: 14px; }
.ff-ot__n { display: inline-flex; align-items: center; justify-content: center; min-width: 96px; height: 34px; padding: 0 14px; border-radius: 4px; background: #F1F4F8; font-weight: 700; }
.ff-ot__n--root { min-width: 110px; height: 38px; background: #E5E9EE; font-size: 15px; }
.ff-ot__n--leaf { min-width: 84px; height: 32px; background: #2A2F38; color: #fff; font-weight: 500; font-size: 13px; }
.ff-ot__n--new { box-shadow: 0 0 0 2px #F32F4C; }
.ff-ot__b { position: relative; margin-left: 36px; padding-left: 22px; border-left: 1.5px solid #AEB6C1; }
.ff-ot__r { position: relative; margin-top: 10px; }
.ff-ot__b > .ff-ot__r::before { content: ""; position: absolute; left: -22px; top: 17px; width: 20px; height: 1.5px; background: #AEB6C1; }
.ff-ot__b > .ff-ot__r:last-child::after { content: ""; position: absolute; left: -24px; top: 18px; bottom: 0; width: 4px; background: #fff; }
.ff-ot__h { display: flex; align-items: center; justify-content: center; height: 34px; margin-bottom: 4px; border-radius: 6px; font-size: 14px; font-weight: 700; }

/* 表形式／履歴形式（図解） */
.ff-fttl { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; font-size: 20px; font-weight: 700; }
.ff-fttl::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: #222; }
.ff-ft { font-size: 14px; }
.ff-ft td { padding: 7px 10px; border-bottom: 1px solid #EEF1F4; text-align: right; white-space: nowrap; }
.ff-ft tr.m td { padding: 6px 10px; background: #F5F7FA; color: #45484D; text-align: center; border-bottom: 0; }
.ff-ft tr.h td { background: #F5F7FA; color: #45484D; font-weight: 500; text-align: right; }
.ff-ft tr.tp td { font-weight: 700; }
.ff-ft--h td { text-align: center; }
.ff-ft--h tr.h td { text-align: center; }
.ff-ft--h td:nth-child(3) { text-align: right; }

/* 予算入力（入力できる列を白に） */
.ff-bin .ff-sheet td:nth-child(3) { background: #fff; box-shadow: inset 1px 0 0 #EEF1F4, inset -1px 0 0 #EEF1F4; }
.ff-bin .ff-sheet tr.ab td:nth-child(3), .ff-bin .ff-sheet tr.hd td:nth-child(3) { background: #FDE9EC; color: #F32F4C; }
.ff-bin .ff-sheet td.ed { background: #FFF5F6; }
.ff-tip--down::after { content: ""; position: absolute; left: 270px; bottom: -9px; border: 9px solid transparent; border-bottom: 0; border-top-color: #2A2F38; }

/* 機能群の背景が灰色のページ（予実管理以外）は、図解の面を白に */
.feat-v2 .sec-featdetail:not(.sec-featdetail--white) .ffz,
.feat-v2 .sec-featdetail:not(.sec-featdetail--white) .featdetail-stage {
  background: #fff;
  box-shadow: 0 0 0 1px #E8ECF1;
}
.feat-v2 .sec-featdetail:not(.sec-featdetail--white) .ffz:hover { background: #FBFCFD; }


/* ==========================================================================
   242回目（2026/10/01）：A案の文字まわり調整
   番号（01／05）は削除。機能名は 20px・赤・一段階細く、リードは 32px・黒・行間1.7、ポイントの区切り線は廃止
   ========================================================================== */
.feat-v2 .featdetail-item .featdetail-ttl {
  font-size: 20px;
  font-weight: 500;
  color: #F32F4C;
}
.feat-v2 .featdetail-lead {
  margin-top: 10px;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.7;
  color: #222222;
}
.feat-v2 .featdetail-points {
  border-top: 0;
}
.feat-v2 .featdetail-points li {
  border-bottom: 0;
  padding: 6px 0 6px 26px;
}
.feat-v2 .featdetail-points li::before {
  top: 10px;
}
@media (max-width: 768px) {
  .feat-v2 .featdetail-item .featdetail-ttl {
    font-size: 16px;
  }
  .feat-v2 .featdetail-lead {
    margin-top: 8px;
    font-size: 22px;
  }
}


/* ==========================================================================
   243回目（2026/10/01）
   ========================================================================== */
.feat-v2 .featdetail-item .featdetail-ttl {
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: #222222;          /* 機能名は黒 */
}
.feat-v2 .featdetail-num {
  flex: 0 0 auto;
  color: #F32F4C;          /* 番号だけ赤 */
  font-weight: 500;
}
.feat-v2 .featdetail-lead {
  font-size: 28px;
  line-height: 1.6;
}
/* 説明文はPC用の改行位置を持たせたので、折り返しは改行位置だけで */
@media (min-width: 769px) {
  .feat-v2 .featdetail-item .featdetail-body {
    white-space: nowrap;
  }
}
@media (max-width: 768px) {
  .feat-v2 .featdetail-lead {
    font-size: 22px;
  }
}


/* ==========================================================================
   244回目（2026/10/01）
   ========================================================================== */
/* テキストの上端と図解の上端を揃える（中央揃え → 上揃え） */
@media (min-width: 769px) {
  .feat-v2 .featdetail-item { align-items: start; align-content: start; }
  .feat-v2 .featdetail-item .featdetail-head { align-self: start; }
  .feat-v2 .featdetail-item .featdetail-desc { align-self: start; }
}
.feat-v2 .featdetail-item .featdetail-ttl { font-size: 18px; }
.feat-v2 .featdetail-item .featdetail-body { line-height: 1.7; }
.feat-v2 .featdetail-points li { line-height: 1.7; }
/* 分析軸・配賦：表を窓いっぱいに拡大して右側の白い余白をなくす */
.ff-sheet--fill  { -webkit-transform: scale(1.0603); transform: scale(1.0603); -webkit-transform-origin: 0 0; transform-origin: 0 0; }
.ff-sheet--fill2 { -webkit-transform: scale(1.0376); transform: scale(1.0376); -webkit-transform-origin: 0 0; transform-origin: 0 0; }


/* ==========================================================================
   245回目（2026/10/01）
   ========================================================================== */
.ff-sheet--fill3 { -webkit-transform: scale(1.19); transform: scale(1.19); -webkit-transform-origin: 0 0; transform-origin: 0 0; }
.ff-logo__img { display: block; width: auto; height: 18px; }


/* ==========================================================================
   246回目（2026/10/01）
   ========================================================================== */
/* 図解内の kpiee ロゴ：feature.css の「.featdetail-visual img { width:100% }」に負けて巨大化していたのを修正 */
.feat-v2 .featdetail-visual .ff-logo__img,
.ffm .ff-logo__img,
.ff-logo__img {
  width: auto !important;
  height: 18px !important;
  max-width: none;
}
/* ダッシュボード系の図解：トップのダッシュボードと同じトーン（白カード・角丸10px・薄い影） */
.ff--dashboard .ff-card, .ff--bizkpi .ff-card, .ff--insight .ff-card {
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(20,30,60,.06), 0 0 0 1px #eceff4;
}
.ff--dashboard .ff-card__t, .ff--bizkpi .ff-card__t, .ff--insight .ff-card__t { color: #1c2430; }
.ff--insight .ff-tip { background: #3a4354; }
.ff--insight .ff-tip--down::after { border-top-color: #3a4354; }


/* ==========================================================================
   247回目（2026/10/01）
   ========================================================================== */
/* 図解の枠を 522×348 の比率で統一（PC）。中の図解は枠に収まる倍率で中央配置（JS） */
@media (min-width: 769px) {
  .feat-v2 .featdetail-visual .ffz,
  .feat-v2 .featdetail-visual .featdetail-stage {
    box-sizing: border-box;
    aspect-ratio: 522 / 348;
    padding: 24px;
  }
  .feat-v2 .featdetail-visual .ffz__fit { position: absolute; left: 24px; top: 24px; right: 24px; bottom: 24px; width: auto; height: auto; }
  .feat-v2 .featdetail-visual .featdetail-stage { display: flex; align-items: center; justify-content: center; }
  .feat-v2 .featdetail-visual .featdetail-stage img { width: auto; max-width: 100%; max-height: 100%; }
}
/* 図解内の kpiee ロゴ：画像ファイルに依存しないインラインSVGに（高さ19px） */
.ff-logo__svg { display: block; width: 60px; height: 24px; }
.feat-v2 .featdetail-visual .ff-logo svg, .ffm .ff-logo svg { width: 60px !important; height: 24px !important; }
/* 事業KPI：ダッシュボードの背景を白に */
.ff--bizkpi .ff-win { background: #fff; }
/* 見出し→1項目目の余白 80px */
.feat-v2 .sec-pagehead--center { padding-bottom: 0; }
.feat-v2 .sec-featdetail { padding-top: 80px; }


/* 248回目：Slack風画面の kpiee アイコン（公式ロゴのピン部分） */
.ff-kicon { display: block; flex: none; }
.feat-v2 .featdetail-visual .ff-kicon, .ffm .ff-kicon { width: auto; }
/* 配賦の適用：モーダル位置は図解内の指定（left:300px）に従う */


/* ==========================================================================
   2026/10/01 追加分（突合・大容量の図解用）
   既存の css/feature-figure.css の「末尾に追記」してください。既存の行は変更しません。
   追加しているのは新しいクラスのみ（ff-list / ff-fico / ff-hbar / ff-doc / ff-sheet--lg・--md・--tall / ff-big / ff-rec）です。
   ========================================================================== */
/* 一覧テーブル（データファイル一覧など） */
.ff-list { font-size: 12px; }
.ff-list th { height: 34px; padding: 0 10px; background: #F5F7FA; color: #6B7280; font-weight: 500; text-align: center; white-space: nowrap; border-bottom: 1px solid #E4E8ED; }
.ff-list td { height: 46px; padding: 0 10px; text-align: center; white-space: nowrap; border-bottom: 1px solid #EEF1F4; }
.ff-list tr.on td { background: #FFF7F8; }
.ff-fico { display: inline-block; width: 12px; height: 14px; margin-right: 8px; border: 1.5px solid #9AA3AE; border-radius: 2px; vertical-align: -2px; }

/* 大きめの見出しバー・表（主役の窓に使う） */
.ff-hbar { display: flex; align-items: center; gap: 14px; height: 64px; padding: 0 20px; border-bottom: 1px solid #EEF1F4; }
.ff-hbar__t { font-size: 24px; font-weight: 700; letter-spacing: .01em; white-space: nowrap; }
.ff-hbar__s { margin-left: auto; font-size: 15px; color: #8D96A3; white-space: nowrap; }
.ff-hbar .ff-logo { font-size: 22px; }
.ff-hbar .ff-logo i { width: 18px; height: 22px; }
.ff-doc { flex: none; position: relative; width: 22px; height: 26px; border: 2.5px solid #6B7280; border-radius: 3px; }
.ff-doc::after { content: ""; position: absolute; left: 4px; right: 4px; top: 6px; height: 2px; background: #6B7280; box-shadow: 0 5px 0 #6B7280, 0 10px 0 #6B7280; }
.ff-sheet--lg td { height: 42px; padding: 0 14px; font-size: 16px; }
.ff-sheet--lg tr.ab td { height: 26px; font-size: 11px; }
.ff-sheet--lg tr.hd td { height: 40px; font-size: 16px; }
.ff-sheet--lg td.rn { font-size: 11px; }
.ff-sheet--lg td.l1 { padding-left: 34px; }
.ff-big { font-weight: 700; color: #222; }
.ff .ff-rec, .ff-rec { width: 100%; font-size: 13px; }
.ff-rec th { height: 36px; padding: 0 16px; background: #F5F7FA; color: #6B7280; font-weight: 500; text-align: left; white-space: nowrap; border-bottom: 1px solid #E4E8ED; }
.ff-rec td { height: 26px; padding: 0 16px; text-align: left; white-space: nowrap; border-bottom: 1px solid #F1F3F6; color: #33373D; font-variant-numeric: tabular-nums; }
.ff-sheet--md td { height: 32px; padding: 0 14px; font-size: 14px; }
.ff-sheet--md td.rn { font-size: 11px; }
.ff-sheet--tall tr:not(.ab):not(.hd) td { height: 52px; }
.ff-rec--dense td { height: 17px; padding: 0 16px; font-size: 12px; line-height: 17px; border-bottom-color: #F4F6F8; }


/* 250回目：ダッシュボード機能の作り直し用 */
.ff--dashboard .ff-abs { position: absolute; }


/* ==========================================================================
   252回目（2026/10/01）
   ========================================================================== */
/* 各機能の文字色は黒（番号だけ赤） */
.feat-v2 .featdetail-item .featdetail-ttl,
.feat-v2 .featdetail-lead,
.feat-v2 .featdetail-item .featdetail-body,
.feat-v2 .featdetail-points li { color: #222222; }
/* チェック間の余白を2pxずつ詰める */
.feat-v2 .featdetail-points li { padding-top: 4px; padding-bottom: 4px; }
/* SP：図解の枠（.ffz）をPCと同じく比率で高さを確保し、中の図解を絶対配置で収める
   （これまでSPでは枠の高さが0になり、テキストと図解が重なっていた） */
@media (max-width: 768px) {
  .feat-v2 .featdetail-visual .ffz,
  .feat-v2 .featdetail-visual .featdetail-stage {
    box-sizing: border-box;
    aspect-ratio: 522 / 348;
    padding: 12px;
    margin: 0;
  }
  .feat-v2 .featdetail-visual .ffz__fit { position: absolute; left: 12px; top: 12px; right: 12px; bottom: 12px; width: auto; height: auto; }
  .feat-v2 .featdetail-visual .featdetail-stage { display: flex; align-items: center; justify-content: center; }
  .feat-v2 .featdetail-visual .featdetail-stage img { width: auto; max-width: 100%; max-height: 100%; }
  /* 見出し → 図解 → 説明文 の間隔は「kpieeでできること」と同じ（上10px／下24px） */
  .feat-v2 .featdetail-item .featdetail-visual { margin: 10px 0 24px; }
}


/* 253回目 SP：番号＋機能名 → リード（見出し）→ 図解 → 説明文・ポイント の順に */
@media (max-width: 768px) {
  .feat-v2 .featdetail-item { display: flex; flex-direction: column; }
  .feat-v2 .featdetail-item .featdetail-head { order: 1; }
  .feat-v2 .featdetail-item .featdetail-desc { display: contents; }
  .feat-v2 .featdetail-lead { order: 2; margin: 8px 0 0; }
  .feat-v2 .featdetail-item .featdetail-visual { order: 3; }
  .feat-v2 .featdetail-item .featdetail-body { order: 4; margin: 0; }
  .feat-v2 .featdetail-points { order: 5; }
  /* 拡大表示：画面幅に収める（横スクロール案内は不要に） */
  .ffm__scroll { overflow: hidden; }
  .ffm__sp { display: none; }
}

/* 253回目：SPで .ffz（button）の幅が auto になり枠が潰れていたのを修正 */
.feat-v2 .featdetail-visual .ffz { display: block; width: 100%; }
@media (max-width: 768px) {
  .feat-v2 .featdetail-item .featdetail-visual { width: 100%; }
}

@media (max-width: 768px) {
  .feat-v2 .featdetail-item .featdetail-head { align-self: stretch; text-align: left; }
  .feat-v2 .featdetail-item .featdetail-ttl { justify-content: flex-start; }
}


/* 254回目 SP */
@media (max-width: 768px) {
  .feat-v2 .featdetail-item .featdetail-ttl { font-size: 16px; }
  .feat-v2 .featdetail-lead { font-size: 20px; text-align: left; align-self: stretch; }
  .feat-v2 .featdetail-points { align-self: stretch; text-align: left; }
  .feat-v2 .featdetail-item .featdetail-body { align-self: stretch; text-align: left; }
  .feat-v2 .featdetail-item .featdetail-body br { display: inline; }
  /* 拡大表示は画面中央に */
  .ffm { align-items: center; padding-top: 0; }
}


/* 262回目：突合図解のヘッダー（ロゴとタイトルが重ならないように間隔を確保）／チャット画面の kpiee アイコン */
.ff--matching .ff-hbar { display: flex; align-items: center; gap: 12px; }
.ff--matching .ff-hbar .ff-logo { flex: none; margin-right: 6px; }
.ff-av--k .ff-kicon { width: 14px; height: auto; }


/* 263回目：大容量・突合の図解 ヘッダー文字 20px、突合のロゴを一回り大きく */
.ff-hbar__t { font-size: 20px; }
.ff--matching .ff-hbar .ff-logo svg,
.feat-v2 .featdetail-visual .ff--matching .ff-hbar .ff-logo svg,
.ffm .ff--matching .ff-hbar .ff-logo svg { width: 80px !important; height: 32px !important; }