@charset "utf-8";
/* ============================================================
   i-ShareDX ページの中身（2026-10-14 デザインの決まり 確定版）
   置き場所：/contents/assets/isharedx/v2/css/style.css（今と同じ）
   ヘッダー・フッターは frame.css

   作りの約束
   - ページは「名前の付いた部品（クラス）」の組み合わせで作る。HTMLに style="…" は書かない
   - 色・文字サイズ・余白・角の丸み・影は、下の ① の変数だけを使う
   - 部品は PC で作り、760px 以下では1列に並ぶ（スマホの細かい決まりは別途）

   目次
   ① 変数（色・文字・余白・角の丸み・影）
   ② ベース
   ③ 並べ方（段・幅・列）
   ④ 見出し
   ⑤ 文章・リスト
   ⑥ ボタン・リンク
   ⑦ カード・枠
   ⑧ 番号・札・アイコン・矢印
   ⑨ 紺の帯（最後の帯）・パンくず・ページ送り・絞り込み
   ⑩ トップ専用
   ⑪ 機能・セキュリティ専用
   ⑫ 料金・サポート専用
   ⑬ デモ・FAQ・お問い合わせ（Q&A・表・窓口・フォーム）
   ⑭ 一覧・詳細（事例・コラム・資料・セミナー）と記事本文
   ⑮ 760px 以下：1列に並べる
   ============================================================ */

/* ── ① 変数 ── */
:root{
  /* 色（この一覧にない色は使わない） */
  --c-navy:#1F3F55;        /* 紺：見出しの文字・濃い帯 */
  --c-navy-2:#2C5A78;      /* 紺のグラデーションの終わり（濃い帯・濃い箱だけ） */
  --c-navy-deep:#152736;   /* 紺・濃：フッターだけ（最後の帯と境目を付けるため） */
  --c-blue:#396E8E;        /* 青：リンク・番号・札・英字の小見出し・選択中 */
  --c-orange:#C9502A;      /* オレンジ：主ボタン（＋1ページ1か所までの強調）。白い文字とのコントラスト 4.5 */
  --c-orange-dark:#B8461F; /* オレンジ：主ボタンのマウスを乗せたとき */
  --c-teal:#00B6A7;        /* ティール：効果・導入後のグラフの面 */
  --c-teal-ink:#0B7D73;    /* ティール：効果・導入後の文字・チェック */
  --c-ink:#1A2A38;         /* 文字：本文の強調（太字） */
  --c-text:#4A6478;        /* 文字：説明文 */
  --c-line:#D0E2EE;        /* 罫線・白カードの枠・見出しのマーカー */
  --c-bg:#F2F7FA;          /* 薄い青：段の背景・面のカード */
  --c-tint:#E3EEF5;        /* 薄い青（濃）：札の地・アイコンの丸・メインビジュアルの面 */
  --c-white:#FFFFFF;

  /* 文字サイズ（8段階＋記事本文） */
  --fs-display:54px;  /* 特大：トップの見出し・削減効果の数字 */
  --fs-title:40px;    /* 題名：ページの題名 */
  --fs-h2:34px;       /* 段の見出し・記事の題名・実績の数字 */
  --fs-h3:24px;       /* 箱の見出し（大） */
  --fs-h4:20px;       /* 箱の見出し（小） */
  --fs-body-l:18px;   /* 記事本文・メインビジュアルの説明文だけ */
  --fs-body:17px;     /* 本文・カードの説明文・ボタン */
  --fs-small:15px;    /* 小：注記・英字の小見出し・メニュー・補足の1行 */
  --fs-xs:13px;       /* 極小：札・パンくず */

  --lh-body:1.9;
  --lh-head:1.45;

  /* 余白の刻み */
  --s-4:4px; --s-8:8px; --s-12:12px; --s-16:16px; --s-24:24px; --s-32:32px; --s-48:48px; --s-64:64px; --s-88:88px;

  /* 中身の幅 */
  --w-std:1120px;   /* 標準 */
  --w-narrow:800px; /* FAQ・表・記事本文 */
  --w-form:480px;   /* 右に付いてくるフォームの列（お問い合わせ・資料・セミナー・デモ）。10-14 384→480 */
  --gutter:40px;    /* 画面の左右の余白 */

  /* 角の丸み */
  --r-s:6px;     /* ボタン・札・入力欄・画面写真 */
  --r-m:12px;    /* カード・箱 */
  --r-full:999px;/* 長丸・番号の丸 */

  /* 影（2種類だけ） */
  --sh-frame:0 8px 24px rgba(31,63,85,.10); /* 画面写真の枠 */
  --sh-hover:0 8px 24px rgba(31,63,85,.14); /* マウスを乗せたとき */

  --grad-navy:linear-gradient(120deg,var(--c-navy),var(--c-navy-2));
}

/* ── ② ベース ── */
*{box-sizing:border-box}
body{margin:0;background:var(--c-white);font-family:"isdx-yugo",YuGothic,"Yu Gothic","游ゴシック","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;color:var(--c-ink);font-size:var(--fs-body);line-height:var(--lh-body);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
img{max-width:100%;height:auto;display:block}
b,strong{font-weight:700}
[id]{scroll-margin-top:88px}
@media(max-width:1200px){[id]{scroll-margin-top:120px}}

/* ── ③ 並べ方 ── */
/* 段：上下 88。背景は 白（何も付けない）と 薄い青（--soft）を交互に */
.sec{padding:var(--s-88) var(--gutter)}
.sec--soft{background:var(--c-bg)}
.sec--line{border-top:1px solid var(--c-line)} /* 白の段が続くときの区切り */
.sec--after-title{padding-top:0}               /* ページの題名のすぐ下の段 */
.sec--strip{padding-top:var(--s-48);padding-bottom:var(--s-48)} /* ロゴの帯など、細い段 */

.wrap{max-width:var(--w-std);margin-left:auto;margin-right:auto}
.wrap--narrow{max-width:var(--w-narrow);margin-left:auto;margin-right:auto}

/* 列：間は 24 */
.grid{display:grid;gap:var(--s-24)}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}

/* 2つに分ける（文章と画像など） */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s-48);align-items:center}
/* 文章＋画像（画像の幅 480）。--rev は画像が左 */
.media-row{display:grid;grid-template-columns:minmax(0,1fr) 480px;gap:var(--s-48);align-items:center}
.media-row--rev{grid-template-columns:480px minmax(0,1fr)}
.media-row--rev>.media-row__media{order:-1}
.rows{display:flex;flex-direction:column;gap:var(--s-64)} /* 縦に並ぶ大きなまとまりの間 */
.stack>*+*{margin-top:var(--s-48)}                     /* 段の中の小さなまとまりの間 */
.after-grid{margin-top:var(--s-48);text-align:center}    /* 一覧の下の「すべて見る →」など */
.links{display:flex;gap:var(--s-16) var(--s-48);justify-content:center;flex-wrap:wrap} /* 文字のリンクを横に並べる */
.group-hd{display:flex;align-items:baseline;gap:var(--s-16);flex-wrap:wrap;margin:var(--s-64) 0 var(--s-24)} /* 段の中の小さなまとまりの見出し（箱の見出し＋補足） */

/* ── ④ 見出し（3種類だけ） ── */
/* 英字の小見出し（前に青い線） */
.kicker{display:inline-flex;align-items:center;gap:var(--s-8);font-size:var(--fs-small);font-weight:700;line-height:1.5;letter-spacing:.12em;color:var(--c-blue)}
.kicker::before{content:"";width:20px;height:2px;background:var(--c-blue)}
/* 見出しの上の小さな青い文字（POINT 01・STEP 01・「これまで」など）。線は付けない */
.eyebrow{display:block;font-size:var(--fs-small);font-weight:700;line-height:1.5;letter-spacing:.08em;color:var(--c-blue)}

/* 1. ページの題名：英字の小見出し → 題名40 → 一文17（中央） */
.page-hd{padding:var(--s-64) var(--gutter) var(--s-48);text-align:center}
.page-title{margin-top:var(--s-8);font-size:var(--fs-title);font-weight:700;line-height:var(--lh-head);color:var(--c-navy)}
.page-lead{max-width:var(--w-narrow);margin:var(--s-16) auto 0;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--c-text)}
.page-hd .btns,.page-hd .jump{margin-top:var(--s-32)}

/* 2. 段の見出し：（英字の小見出し）→ 34（中央）。下の中身まで 48 */
.sec-hd{text-align:center;margin-bottom:var(--s-48)}
.sec-title{margin-top:var(--s-8);font-size:var(--fs-h2);font-weight:700;line-height:var(--lh-head);color:var(--c-navy)}
.sec-hd>.sec-title:first-child{margin-top:0}
.sec-lead{max-width:var(--w-narrow);margin:var(--s-16) auto 0;font-size:var(--fs-body);color:var(--c-text)}
.sec-pre{font-size:var(--fs-h4);font-weight:700;line-height:var(--lh-head);color:var(--c-navy);margin-bottom:var(--s-8)} /* 見出しの上の問いかけ（トップの課題） */
.sec-hd span.nb,.sec-pre span.nb{display:inline-block} /* 言葉の途中で折り返さない */

/* 3. 箱の中の見出し：24 または 20（左寄せ） */
.box-title{font-size:var(--fs-h3);font-weight:700;line-height:var(--lh-head);color:var(--c-navy)}
.box-title--s{font-size:var(--fs-h4)}
.eyebrow+.box-title{margin-top:var(--s-8)}
.box-title+.txt,.box-title+.list,.box-title+.checks{margin-top:var(--s-12)}
.box-title--s+.txt{margin-top:var(--s-8)}
.box-title .tag,.box-title .tag-pill{margin-left:var(--s-8);vertical-align:.2em}

/* マーカー（トップで1か所だけ） */
.marker{background:linear-gradient(transparent 62%,var(--c-line) 62%);padding:0 .1em}

/* ── ⑤ 文章・リスト ── */
.txt{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--c-text)}
.txt b,.txt strong{color:var(--c-ink)}
.txt+.txt{margin-top:var(--s-16)}
.txt--center{text-align:center}
.note{font-size:var(--fs-small);line-height:1.8;color:var(--c-text)}
.txt+.list,.txt+.stats,.txt+.btns{margin-top:var(--s-24)}

/* 点のリスト */
.list li{position:relative;padding-left:20px;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--c-text)}
.list li+li{margin-top:var(--s-4)}
.list li::before{content:"";position:absolute;left:4px;top:.8em;width:6px;height:6px;border-radius:var(--r-full);background:var(--c-blue)}

/* チェックのリスト（青。罫線で区切る） */
.checks li{position:relative;padding:var(--s-12) 0 var(--s-12) 32px;border-bottom:1px solid var(--c-line);font-size:var(--fs-body);line-height:1.7;color:var(--c-ink)}
.checks li::before{content:"";position:absolute;left:6px;top:calc(var(--s-12) + .45em);width:12px;height:7px;border-left:2px solid var(--c-blue);border-bottom:2px solid var(--c-blue);transform:rotate(-45deg)}

/* まとまりの間（見出し → 中身、中身 → 中身） */
.box-title+.ai-list,.box-title+.grid,.txt+.grid,.txt+.ai-list{margin-top:var(--s-24)}
.grid+.card,.qa-list+.card,.list+.card{margin-top:var(--s-24)}
.qa-list+.card{margin-top:var(--s-48)}
.card .btns{margin-top:var(--s-24)}
.list a{color:var(--c-blue);text-decoration:underline;text-underline-offset:3px}

/* ── ⑥ ボタン・リンク（4種類だけ） ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-8);height:56px;padding:0 var(--s-32);border-radius:var(--r-s);font-family:inherit;font-size:var(--fs-body);font-weight:700;line-height:1;white-space:nowrap;cursor:pointer;transition:background .2s,color .2s,border-color .2s,box-shadow .2s}
/* 1. 主ボタン（オレンジ）：「デモ・無料トライアル」 */
.btn--primary{background:var(--c-orange);color:var(--c-white);border:1px solid var(--c-orange)}
.btn--primary:hover{background:var(--c-orange-dark);border-color:var(--c-orange-dark);box-shadow:var(--sh-hover)}
/* 2. 副ボタン（白地・紺文字・薄い枠）：「資料請求」「お問い合わせ」 */
.btn--secondary{background:var(--c-white);color:var(--c-navy);border:1px solid var(--c-line)}
.btn--secondary:hover{border-color:var(--c-blue);color:var(--c-blue)}
/* 3. 紺の帯の上の副ボタン（透明・白文字・白い枠） */
.btn--on-dark{background:transparent;color:var(--c-white);border:1px solid rgba(255,255,255,.8)}
.btn--on-dark:hover{background:rgba(255,255,255,.12);border-color:var(--c-white)}
/* 並べるのは2つまで。順番は 主 → 副 */
.btns{display:flex;flex-wrap:wrap;gap:var(--s-16);justify-content:center}
.btns--left{justify-content:flex-start}
/* 4. 文字のリンク（青・太字・末尾に「→」）：ページの移動 */
.link{display:inline-block;font-size:var(--fs-body);font-weight:700;line-height:1.6;color:var(--c-blue)}
.link:hover{text-decoration:underline;text-underline-offset:4px}
.link--s{font-size:var(--fs-small)}
.txt a,.note a{color:var(--c-blue);text-decoration:underline;text-underline-offset:3px} /* 文の中のリンク */

/* ── ⑦ カード・枠（カードは2種類だけ） ── */
/* 白カード：白・薄い枠 */
.card{background:var(--c-white);border:1px solid var(--c-line);border-radius:var(--r-m);padding:var(--s-24)}
/* 面のカード：薄い青・枠なし（白の段の上だけで使う） */
.card--soft{background:var(--c-bg);border-color:transparent}
.card--l{padding:var(--s-32)}            /* 中身の多い大きな箱 */
.card--center{text-align:center}
/* 押せるカード（マウスを乗せると影） */
.card--link{display:block;transition:box-shadow .2s,border-color .2s}
.card--link:hover{box-shadow:var(--sh-hover);border-color:var(--c-blue)}
/* 押せるカード（右に「＞」） */
.card--go{display:flex;align-items:center;gap:var(--s-16)}
.card--go>div{flex:1;min-width:0}
.card--go::after{content:"";flex:none;width:9px;height:9px;border-right:2px solid var(--c-blue);border-top:2px solid var(--c-blue);transform:rotate(45deg);margin-right:var(--s-4)}

/* 画面写真の枠（影1） */
.frame{background:var(--c-white);border:1px solid var(--c-line);border-radius:var(--r-m);padding:var(--s-8);box-shadow:var(--sh-frame)}
.frame img{width:100%;border-radius:var(--r-s)}

/* ── ⑧ 番号・札・アイコン・矢印 ── */
/* 番号：青の丸に白い数字 */
.num{flex:none;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--r-full);background:var(--c-blue);color:var(--c-white);font-size:var(--fs-small);font-weight:700;line-height:1}
.num--s{width:28px;height:28px;font-size:var(--fs-xs)}
/* 最後の段階（導入後）：ティールのチェック */
.num--done{background:var(--c-white);border:2px solid var(--c-teal-ink)}
.num--done::before{content:"";width:12px;height:7px;border-left:2px solid var(--c-teal-ink);border-bottom:2px solid var(--c-teal-ink);transform:translateY(-2px) rotate(-45deg)}

/* 札は2種類 */
/* 分類：四角（薄い青の地・青い文字） */
.tag{display:inline-block;font-size:var(--fs-xs);font-weight:700;line-height:1.6;color:var(--c-blue);background:var(--c-tint);border-radius:var(--r-s);padding:2px var(--s-8);white-space:nowrap}
/* 時期：長丸（白地・青い枠） */
.tag-pill{display:inline-block;font-size:var(--fs-xs);font-weight:700;line-height:1.6;color:var(--c-blue);background:var(--c-white);border:1px solid var(--c-blue);border-radius:var(--r-full);padding:1px var(--s-12);white-space:nowrap}
.tags,.tag-list{display:flex;gap:var(--s-8);flex-wrap:wrap;align-items:center}
.tag-list li,.tag-list .tag{margin:0}

/* アイコン：線画（青）を薄い青の丸に */
.icon{flex:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:var(--r-full);background:var(--c-tint);color:var(--c-blue)}
.icon svg{width:24px;height:24px}
.icon--s{width:36px;height:36px}
.icon--s svg{width:20px;height:20px}

/* 矢印は「＞」の形に統一（図の流れ・下向き） */
.chev{display:flex;align-items:center;justify-content:center;color:var(--c-blue)}
.chev::before{content:"";width:12px;height:12px;border-right:2px solid currentColor;border-top:2px solid currentColor;transform:rotate(45deg)}
.chev--down::before{transform:rotate(135deg)}

/* ── ⑨ 紺の帯・パンくず・ページ送り・絞り込み ── */
/* 紺の帯（上下 64）。ほかのページでは「最後の帯」だけ */
.band{background:var(--grad-navy);color:var(--c-white);padding:var(--s-64) var(--gutter)}
.band--cta{text-align:center}
.band-title{font-size:var(--fs-h2);font-weight:700;line-height:var(--lh-head);color:var(--c-white)}
.band-title+.btns{margin-top:var(--s-32)}
/* 最後の帯の下に「一覧へ戻る」が付くページ */
.back{padding:var(--s-48) var(--gutter);text-align:center}
.detail+.back{padding-top:0}

.crumb{font-size:var(--fs-xs);line-height:1.7;color:var(--c-text);padding:var(--s-16) var(--gutter) 0;letter-spacing:.02em}
.crumb a{color:var(--c-text)}
.crumb a:hover{color:var(--c-blue);text-decoration:underline}
.crumb .sep{display:inline-block;width:6px;height:6px;margin:0 10px 1px 6px;border-right:1.5px solid currentColor;border-top:1.5px solid currentColor;transform:rotate(45deg)}

/* 絞り込み・ページ内の移動（長丸） */
.filter{display:flex;gap:var(--s-8);justify-content:center;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;gap:var(--s-8);height:40px;padding:0 var(--s-16);border:1px solid var(--c-line);border-radius:var(--r-full);background:var(--c-white);font-family:inherit;font-size:var(--fs-small);font-weight:500;color:var(--c-text);cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.pill:not(.on):hover{border-color:var(--c-blue);color:var(--c-blue)}
.pill.on{background:var(--c-blue);border-color:var(--c-blue);color:var(--c-white);font-weight:700}
.pill:focus-visible{outline:2px solid var(--c-blue);outline-offset:2px}
.pill svg{width:18px;height:18px}
.pill .num{width:22px;height:22px;font-size:var(--fs-xs)}
/* ページ内の移動は「＞」を下向きに */
.jump{display:flex;gap:var(--s-8);justify-content:center;flex-wrap:wrap}
.jump .pill::after{content:"";width:6px;height:6px;border-right:1.5px solid var(--c-blue);border-bottom:1.5px solid var(--c-blue);transform:translateY(-2px) rotate(45deg)}

/* ページ送り（CMSの pagination_idx が li.page-item > a.page-link で出す） */
.pager ul{display:flex;gap:var(--s-8);justify-content:center;margin:var(--s-48) 0 0}
.pager .page-link{display:flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 var(--s-12);border:1px solid var(--c-line);border-radius:var(--r-s);font-size:var(--fs-small);color:var(--c-text);background:var(--c-white)}
.pager .page-item.active .page-link{background:var(--c-blue);border-color:var(--c-blue);color:var(--c-white);font-weight:700}
.pager .page-item.disabled{display:none}
.pager .page-link .icon-style{display:none}

/* ── ⑩ トップ専用 ── */
/* メインビジュアル（確定案「案1_余白で整える」。変えたのは、見出しの上の2行・ボタンの色・値を変数に置き換えたことだけ） */
.fv1{position:relative;overflow:hidden;background:var(--c-bg);padding:0 var(--gutter)}
.fv1 .fv-in{max-width:var(--w-std);margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);column-gap:var(--s-48);align-content:center;
  grid-template-areas:"tag img" "kicker img" "h1 img" "lead img" "ctas img"}
/* 見出しの上：「正しい手順は、ココにある。」は小さな青い文字、分類名は 20 の紺の太字で読めるように */
.fv1 .fv-tag{grid-area:tag;font-size:var(--fs-small);font-weight:700;line-height:1.5;letter-spacing:.04em;color:var(--c-blue);margin:48px 0 var(--s-4)}
.fv1 .fv-kicker{grid-area:kicker;font-size:var(--fs-h4);font-weight:700;line-height:1.5;letter-spacing:.04em;color:var(--c-navy);margin:0}
.fv1 .fv-h1{grid-area:h1;font-size:var(--fs-display);font-weight:700;line-height:1.3;letter-spacing:.02em;color:var(--c-navy);margin:var(--s-12) 0 var(--s-16)}
.fv1 .fv-h1 em{font-style:normal;color:var(--c-orange)} /* このページの「強調1か所」 */
.fv1 .fv-lead{grid-area:lead;font-size:var(--fs-body-l);line-height:1.85;color:var(--c-text);margin:0 0 var(--s-24)}
.fv1 .fv-lead span{display:inline-block}
.fv1 .fv-ctas{grid-area:ctas;justify-content:flex-start;margin-bottom:88px} /* 下のお知らせバーがかぶる分を含む */
.fv1 .fv-note{grid-area:note;margin:var(--s-12) 0 48px}
/* 画像の面：右半分を上から下まで四角く（10-14 案4-2。角丸なし） */
.fv1 .fv-img{grid-area:img;position:relative;display:flex;align-items:flex-start;padding:calc(var(--s-48) * 2) 0 0 var(--s-24)} /* 10-14 画像を下げ、パソコンの上端を見出しの1行目にそろえる（画像の中心＝左の文字のまとまりの中心） */
.fv1 .fv-img::before{content:"";position:absolute;left:calc(var(--s-24) * -1);right:-100vw;top:0;bottom:0;background:var(--c-tint)} /* 10-14 面の左端＝文字と画像の間のすき間の真ん中。画像は面の中に収める */
.fv1 .fv-img img{position:relative;width:100%;filter:drop-shadow(0 16px 22px rgba(31,63,85,.16))}
/* 文書の種類：画像（パソコン＋スマホ）の真下に、中心をそろえて置く（10-14。下のお知らせバーにかからない高さ） */
.fv1 .fv-docs{grid-area:img;align-self:end;justify-self:center;position:relative;z-index:1;display:flex;align-items:center;gap:var(--s-16);margin:0 0 60px;padding-left:var(--s-24)}
.fv1 .fv-docs .icon{background:var(--c-white)}
.fv1 .fv-docs ul{display:grid;grid-template-columns:repeat(3,auto);gap:2px 0}
.fv1 .fv-docs li{font-size:var(--fs-small);font-weight:500;line-height:1.6;color:var(--c-navy);padding:0 var(--s-16);border-left:1px solid var(--c-line);white-space:nowrap}
.fv1 .fv-docs li:nth-child(3n){padding-right:0}

/* お知らせバー（10-14）：メインビジュアルとロゴの帯の境目に、白いバーを半分かぶせる。写真にはかぶらない
   中身は CMS の1か所（札・見出し・ひとこと・リンク先）。空のときはバーごと出さない */
.mv-news{position:relative;z-index:2;max-width:calc(var(--w-std) + var(--gutter) * 2);margin:-36px auto 0;padding:0 var(--gutter)}
.mv-news a{display:flex;align-items:center;gap:var(--s-16);height:72px;padding:0 var(--s-24);background:var(--c-white);border:1px solid var(--c-line);border-radius:var(--r-m);box-shadow:var(--sh-frame);color:var(--c-navy);transition:border-color .15s,box-shadow .15s}
.mv-news a:hover{border-color:var(--c-blue);box-shadow:var(--sh-hover)}
.mv-news__tag{flex:none;display:inline-flex;align-items:center;height:30px;padding:0 var(--s-12);border-radius:var(--r-full);background:var(--c-blue);color:var(--c-white);font-size:var(--fs-xs);font-weight:700;letter-spacing:.06em}
.mv-news__title{flex:none;font-size:var(--fs-body);font-weight:700}
.mv-news__desc{flex:1;min-width:0;padding-left:var(--s-16);border-left:1px solid var(--c-line);font-size:var(--fs-small);color:var(--c-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mv-news__more{flex:none;display:inline-flex;align-items:center;gap:var(--s-8);font-size:var(--fs-small);font-weight:700;color:var(--c-blue)}
.mv-news__more::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-top:2px solid currentColor;transform:rotate(45deg)}
.mv-news+.sec--strip{padding-top:var(--s-48)}
@media(max-width:1000px){
  .fv1 .fv-ctas{margin-bottom:0}
  .fv1 .fv-docs{padding-left:0;margin-bottom:72px}
}
@media(max-width:760px){
  .fv1 .fv-ctas{margin-bottom:72px}
  .mv-news a{height:auto;flex-wrap:wrap;gap:var(--s-8) var(--s-12);padding:var(--s-12) var(--s-16)}
  .mv-news__desc{order:3;flex-basis:100%;border-left:0;padding-left:0;white-space:normal}
  .mv-news__more{margin-left:auto}
}

/* 導入企業ロゴ：枠なしで8社を1列に（流さない） */
.logos-lead{text-align:center;margin-bottom:var(--s-24)}
.logos{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:var(--s-24);align-items:center;max-width:var(--w-std);margin:0 auto}
.logos li{display:flex;align-items:center;justify-content:center;height:48px}
.logos img{max-height:40px;width:auto;max-width:100%}

/* 課題：業務の課題3つ（白カード） → 下向きの矢印 → 紺の帯「生成AI活用への影響」 → 締めの一文 */
.problems{padding-bottom:0}
.problem{display:flex;flex-direction:column}
.problem__img{height:128px;display:flex;align-items:center;justify-content:center;margin-bottom:var(--s-16)}
.problem__img img{max-height:112px;width:auto}
.problem .box-title{display:flex;align-items:center;gap:var(--s-12)}
.problem .box-title .nb{display:inline-block}
.problem .txt{margin-top:var(--s-8)}
.problem-arrows{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-24);height:var(--s-64)}
.problem-arrows .chev{color:var(--c-navy)}
.problem-arrows .chev::before{width:16px;height:16px;border-width:3px}

.impact-label{display:flex;align-items:center;justify-content:center;gap:var(--s-12);margin-bottom:var(--s-32);font-size:var(--fs-h3);font-weight:700;line-height:var(--lh-head);color:var(--c-white)}
.impact-label .icon{background:rgba(255,255,255,.14);color:var(--c-white)}
.impact .card{border:0}
.impact h3{font-size:var(--fs-body);font-weight:700;color:var(--c-navy)}
.impact__lead{display:flex;align-items:center;gap:var(--s-8);font-size:var(--fs-body);font-weight:700;line-height:1.6;color:var(--c-blue)}
.impact__key{display:block;margin-top:var(--s-4);font-size:var(--fs-h3);font-weight:700;line-height:var(--lh-head);color:var(--c-navy)}
.impact .txt{margin-top:var(--s-12)}

.closing{padding-top:var(--s-64);padding-bottom:var(--s-64);text-align:center}
.closing p{font-size:var(--fs-h3);font-weight:500;line-height:1.7;color:var(--c-navy)}
.closing b{font-weight:700;background:linear-gradient(transparent 62%,var(--c-line) 62%);padding:0 .1em} /* 10-14 太字にマーカー（見出しのマーカーと同じ色） */
.closing span{display:inline-block}

/* i-ShareDXとは：実績の数字 */
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-16)}
.stats>div{text-align:center;padding:var(--s-16) var(--s-8)}
.stats b{display:block;font-size:var(--fs-h2);line-height:1.3;color:var(--c-blue)}
.stats b small{font-size:var(--fs-body);margin-left:2px}
.stats span{display:block;margin-top:var(--s-4);font-size:var(--fs-small);line-height:1.6;color:var(--c-text)}
.about-img{max-width:400px;margin:0 auto}

/* i-ShareDXを支える技術：データ構造化 */
.tech{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s-8) var(--s-32);align-items:start}
.tech__hd{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-8)}
.tech__hd .box-title{white-space:nowrap}
.tech__body{border-left:1px solid var(--c-line);padding-left:var(--s-32)}
.tech__link{grid-column:1/-1;margin-top:var(--s-16);text-align:center}

/* 4つの特徴：POINT 04 の「AIの機能」の一覧（白い枠。画面写真と同じ並びの扱い） */
.ai-list{background:var(--c-white);border:1px solid var(--c-line);border-radius:var(--r-m);box-shadow:var(--sh-frame);padding:var(--s-8) var(--s-24)}
.ai-list li{display:flex;gap:var(--s-16);align-items:flex-start;padding:var(--s-16) 0}
.ai-list li+li{border-top:1px solid var(--c-line)}
.ai-list__name{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-4) var(--s-12);font-size:var(--fs-body);font-weight:700;line-height:1.6;color:var(--c-navy)}
.ai-list .note{margin-top:var(--s-4)}
/* 機能ページでは本文の大きさで */
.ai-list--l{padding:var(--s-8) var(--s-32);box-shadow:none}
.ai-list--l li{padding:var(--s-24) 0}
.ai-list--l .ai-list__name{font-size:var(--fs-h4)}
.ai-list--l .txt{margin-top:var(--s-4)}

/* 4つの特徴：スクロールして行が画面に入ると、見出しにマーカーが引かれ、画像がふわっと出る（2026-10-14 追加）
   ・動きは main.js が html に .js-motion を付けたときだけ（JSが動かない環境では最初から全部見える）
   ・パソコンで「動きを減らす」を設定している人には、動かさずにマーカーも最初から表示 */
.hl{background:linear-gradient(var(--c-line),var(--c-line)) no-repeat 0 90%/100% 46%;padding:0 .1em}
.js-motion .js-reveal .hl{background-size:0% 46%;transition:background-size .9s cubic-bezier(.2,.7,.2,1) .25s}
.js-motion .js-reveal.is-in .hl{background-size:100% 46%}
.js-motion .js-reveal .media-row__media{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.js-motion .js-reveal.is-in .media-row__media{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .js-motion .js-reveal .hl{background-size:100% 46%;transition:none}
  .js-motion .js-reveal .media-row__media{opacity:1;transform:none;transition:none}
}

/* 削減効果：紺の箱に4つの棒グラフ（導入後＝ティール） */
.effects{background:var(--grad-navy);border-radius:var(--r-m);padding:var(--s-48) var(--s-32) var(--s-24);color:var(--c-white)}
.effects__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.fx{padding:0 var(--s-24);text-align:center;border-left:1px solid rgba(255,255,255,.2)}
.fx:first-child{border-left:0}
.fx-label{font-size:var(--fs-body);font-weight:700;line-height:1.6}
.fx-num{font-size:var(--fs-display);font-weight:700;line-height:1.2;margin:var(--s-4) 0 var(--s-16)}
.fx-num small{font-size:var(--fs-h4);margin-left:var(--s-4)}
.fx-bars{position:relative;display:flex;align-items:flex-end;justify-content:center;gap:var(--s-12);height:152px;border-bottom:1px solid rgba(255,255,255,.5)}
.fx-bar{width:72px;display:flex;align-items:center;justify-content:center;font-size:var(--fs-small);font-weight:700;border-radius:var(--r-s) var(--r-s) 0 0}
.fx-bar.b{background:rgba(255,255,255,.28);color:var(--c-white)}
.fx-bar.a{background:var(--c-teal);color:var(--c-ink)}
/* 高さ（グラフの値）は style を使わず、クラスで指定 */
.h-92{height:92%}.h-46{height:46%}.h-37{height:37%}.h-23{height:23%}.h-18{height:18%}
.fx-bubble{position:absolute;right:0;top:0;background:var(--c-white);color:var(--c-teal-ink);font-size:var(--fs-xs);font-weight:700;line-height:1.4;border-radius:var(--r-s);padding:var(--s-4) var(--s-8)}
.fx-cap{display:flex;justify-content:center;gap:var(--s-12);font-size:var(--fs-xs);color:#C9D6E0;margin-top:var(--s-8)}
.fx-cap span{width:72px}
.fx-unit{font-size:var(--fs-xs);color:#C9D6E0;margin-top:var(--s-4)}
.effects__note{font-size:var(--fs-xs);color:#C9D6E0;text-align:right;margin-top:var(--s-24)}

/* 導入事例・コラムのカード（中身はCMS） */
.post{display:flex;flex-direction:column;padding:0;overflow:hidden}
.post__thumb{aspect-ratio:16/9;background:var(--c-tint);overflow:hidden}
.post__thumb img{width:100%;height:100%;object-fit:cover}
.post__body{padding:var(--s-24);display:flex;flex-direction:column;gap:var(--s-8);flex:1}
.post__title{font-size:var(--fs-body);font-weight:700;line-height:1.7;color:var(--c-ink)}
.post__meta{display:flex;align-items:center;gap:var(--s-8);flex-wrap:wrap;font-size:var(--fs-small);color:var(--c-text)}
.post__sub{font-size:var(--fs-small);font-weight:700;color:var(--c-blue)}
.post__more{margin-top:auto;padding-top:var(--s-8);font-size:var(--fs-small);font-weight:700;color:var(--c-blue)}
.post__desc{font-size:var(--fs-small);line-height:1.8;color:var(--c-text)}
.post .column_ls_tg_itm{display:inline-block;font-size:var(--fs-xs);font-weight:700;line-height:1.6;color:var(--c-blue);background:var(--c-tint);border-radius:var(--r-s);padding:2px var(--s-8)}
.post .keys{display:flex;gap:var(--s-8);flex-wrap:wrap}
.post .keys .key{font-size:var(--fs-xs);line-height:1.6;color:var(--c-text);border:1px solid var(--c-line);border-radius:var(--r-full);padding:1px var(--s-8)}
.list-card.is-hidden{display:none}

/* ── ⑪ 機能・セキュリティ専用 ── */
/* データ構造化とは（図）。4つの区分は、色を増やさず 紺・青・灰・白抜き で見分ける */
.ds{display:grid;grid-template-columns:minmax(0,1fr) 48px minmax(0,1.1fr) 48px minmax(0,1fr);align-items:stretch;margin-top:var(--s-32)}
.ds-step{display:flex;flex-direction:column}
.ds-step .box-title{margin:var(--s-4) 0 var(--s-16)}
.ds-step>.note{margin-top:var(--s-16)}
.ds-doc{background:var(--c-white);border:1px solid var(--c-line);border-radius:var(--r-s);padding:var(--s-12) var(--s-16)}
.ds-l{display:block;height:7px;border-radius:var(--r-full);background:var(--c-line);margin:7px 0}
.ds-l.s{width:72%}.ds-l.xs{width:45%}
.ds-doc>.ds-l.c-step{background:var(--c-navy);opacity:.55}
.ds-doc>.ds-l.c-warn{background:var(--c-blue);opacity:.55}
.ds-doc>.ds-l.c-judge{background:var(--c-text);opacity:.4}
.ds-doc.is-struct{display:flex;flex-direction:column;gap:var(--s-8);padding:var(--s-12)}
.ds-blk{background:var(--c-bg);border-radius:var(--r-s);padding:var(--s-8) var(--s-12) var(--s-4)}
.ds-blk span{display:inline-block;font-size:var(--fs-xs);font-weight:700;line-height:1.6;color:var(--c-white);border-radius:var(--r-s);padding:0 var(--s-8)}
.ds-blk .ds-l{margin:6px 0}
.ds-blk.c-step span{background:var(--c-navy)}
.ds-blk.c-warn span{background:var(--c-blue)}
.ds-blk.c-judge span{background:var(--c-text)}
.ds-blk.c-rev span{background:var(--c-white);color:var(--c-blue);box-shadow:inset 0 0 0 1px var(--c-blue)}
.ds-who{display:flex;flex-direction:column;gap:var(--s-16)}
.ds-who>div{display:flex;gap:var(--s-12);align-items:flex-start}
.ds-who .txt b{color:var(--c-navy)}

/* AIが活用しやすい文書の、3つの条件 */
.cond{display:flex;flex-direction:column}
.cond .num{margin-bottom:var(--s-16)}
.cond .txt{margin-top:var(--s-8)}
.cond__how{margin-top:auto;padding-top:var(--s-16);border-top:1px solid var(--c-line);font-size:var(--fs-small);font-weight:700;line-height:1.7;color:var(--c-blue)}
.cond__how:hover{text-decoration:underline;text-underline-offset:3px}
.cond .txt+.cond__how{margin-top:var(--s-16)}
.cond__how::after{content:" →"}

/* ISMS の登録マーク：マークは縮小のみ（形・色・余白は変えない） */
.isms{display:flex;gap:var(--s-32);align-items:center}
.isms img{flex:none;width:168px}
.isms .txt{margin-top:var(--s-4)}
.isms .link{margin-top:var(--s-8)}

/* ── ⑫ 料金・サポート専用 ── */
.price-lead{max-width:var(--w-std);margin:0 auto var(--s-48);text-align:center;font-size:var(--fs-h4);font-weight:500;line-height:1.8;color:var(--c-navy)}
.price-lead b{font-weight:700}
.price-lead .c-init{color:var(--c-blue)}
.price-lead .c-month{color:var(--c-navy)}
.price-lead .c-any{color:var(--c-text)}
.price-flow{display:grid;grid-template-columns:minmax(0,1.25fr) 32px minmax(0,2.2fr) 32px minmax(0,1.25fr);gap:var(--s-8);align-items:stretch}
.price-box{display:flex;flex-direction:column;align-items:center;text-align:center}
.price-box .box-title{margin-bottom:var(--s-4)}
.price-box.pb-init .box-title{color:var(--c-blue)}
.price-box.pb-any .box-title{color:var(--c-text)}
.price-box .pb-when{margin-bottom:var(--s-16)}
/* 月額費用（中心）は「面のカード」、中の4項目は白。初期・随時は「白カード」。色付きの枠は使わずに中心を示す */
.pb-items{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-12)}
.pb-items li{background:var(--c-white);border:1px solid var(--c-line);border-radius:var(--r-s);padding:var(--s-12) var(--s-8);display:flex;flex-direction:column;gap:2px}
.pb-items b{font-size:var(--fs-body);color:var(--c-ink)}
.pb-items span{font-size:var(--fs-small);line-height:1.6;color:var(--c-text)}
.pb-plus{align-self:center;justify-self:center;width:24px;height:24px;position:relative}
.pb-plus::before,.pb-plus::after{content:"";position:absolute;left:50%;top:50%;width:20px;height:2px;background:var(--c-text);transform:translate(-50%,-50%)}
.pb-plus::after{transform:translate(-50%,-50%) rotate(90deg)}
.price-foot{margin-top:var(--s-32);text-align:center}
.price-foot .btns{margin-top:var(--s-24)}

/* 段階（ヒアリング → … → 運用定着）。間に「＞」 */
.steps{display:flex;justify-content:center;align-items:flex-start;max-width:var(--w-std);margin:0 auto}
.step{flex:1;text-align:center;padding:0 var(--s-8);position:relative}
.step+.step::before{content:"";position:absolute;left:-5px;top:13px;width:10px;height:10px;border-right:2px solid var(--c-line);border-top:2px solid var(--c-line);transform:rotate(45deg)}
.step .num{width:40px;height:40px;margin-bottom:var(--s-12)}
.step__name{font-size:var(--fs-body);font-weight:700;line-height:1.6;color:var(--c-navy)}
.step__name--done{color:var(--c-teal-ink)}
.step .note{margin-top:var(--s-4)}
.steps+.grid{margin-top:var(--s-48)}
.grid+.grid{margin-top:var(--s-24)}

/* ── ⑬ デモ・FAQ・お問い合わせ ── */
/* Q&A（クリックで開閉。動きは main.js） */
.qa-list{display:flex;flex-direction:column;gap:var(--s-12)}
.qa{background:var(--c-white);border:1px solid var(--c-line);border-radius:var(--r-m);padding:var(--s-16) var(--s-24);cursor:pointer;transition:border-color .2s}
.qa:hover{border-color:var(--c-blue)}
.qa .q{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s-16);font-size:var(--fs-body);font-weight:700;line-height:1.7;color:var(--c-navy)}
.qa .tgl{flex:none;width:20px;height:20px;margin-top:4px;position:relative}
.qa .tgl::before,.qa .tgl::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:2px;background:var(--c-blue);transform:translate(-50%,-50%);transition:transform .2s}
.qa .tgl::after{transform:translate(-50%,-50%) rotate(90deg)}
.qa.open .tgl::after{transform:translate(-50%,-50%) rotate(0)}
.qa .a{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--c-text);max-height:0;overflow:hidden;transition:max-height .3s ease,margin-top .3s ease}
.qa.open .a{max-height:240px;margin-top:var(--s-8)}
.qa-more{margin-top:var(--s-24);text-align:right}

/* 表（項目と内容） */
.info-table{width:100%;border-collapse:separate;border-spacing:0;background:var(--c-white);border:1px solid var(--c-line);border-radius:var(--r-m);overflow:hidden;font-size:var(--fs-body)}
.info-table th,.info-table td{padding:var(--s-16) var(--s-24);text-align:left;vertical-align:top;line-height:1.8}
.info-table tr+tr th,.info-table tr+tr td{border-top:1px solid var(--c-line)}
.info-table th{width:28%;background:var(--c-bg);color:var(--c-navy);font-weight:700}
.info-table td{color:var(--c-text)}

/* 本文＋右にフォーム（お問い合わせ・資料・セミナーの詳細） */
.detail{display:grid;grid-template-columns:minmax(0,1fr) var(--w-form);gap:var(--s-48);max-width:calc(var(--w-std) + var(--gutter) * 2);margin:0 auto;padding:var(--s-48) var(--gutter) var(--s-88);align-items:start}
.detail--top0{padding-top:0}
.detail__main>.box-title{margin-bottom:var(--s-16)}
.detail__main>*+.box-title{margin-top:var(--s-48)}
.form-card{position:sticky;top:96px;padding:var(--s-32)}
.form-card .box-title+.note{margin-top:var(--s-4)}
.form-card .note{margin-bottom:var(--s-16)}
@media(max-width:1200px){.form-card{top:136px}}
.tel{display:flex;flex-direction:column;gap:var(--s-8)}
.tel div{display:flex;gap:var(--s-16);align-items:baseline;font-size:var(--fs-body)}
.tel b{color:var(--c-ink);min-width:6em}
.tel a{color:var(--c-blue);font-weight:700}

/* 左の本文がいくつかのまとまりに分かれるとき（デモ・トライアル。2026-10-14） */
.detail__main>section+section{margin-top:var(--s-64)}
.detail__main>section>.box-title{margin-bottom:var(--s-24)}
.form-card .eyebrow+.box-title{margin-top:var(--s-4)}
/* デモ・トライアル：見出しの下の「安心ポイント」3つ（10-14 案2） */
.perks{max-width:var(--w-std);margin:var(--s-32) auto 0;text-align:left}
.perk{display:flex;gap:var(--s-16);align-items:flex-start;background:var(--c-bg);border-radius:var(--r-m);padding:var(--s-24)}
.perk .note{margin-top:var(--s-4)}
/* 見出しの下の「お申し込みフォームへ」（下向きの「＞」） */
.to-form{margin-top:var(--s-24)}
.to-form .link{display:inline-flex;align-items:center;gap:var(--s-8)}
.to-form .link::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg)}
/* デモでご覧いただけること：左に画面の写真、右に文 */
.demo-item{display:grid;grid-template-columns:200px minmax(0,1fr);gap:var(--s-24);align-items:center}
.demo-item .frame{padding:4px;box-shadow:none}
.demo-item .box-title+.txt{margin-top:var(--s-4)}
/* 流れ：番号を縦の線でつなぐ */
.timeline{position:relative}
.timeline li{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:var(--s-16);align-items:center;padding:var(--s-8) 0}
.timeline li+li{margin-top:var(--s-8)}
.timeline li:not(:last-child)::after{content:"";position:absolute;left:19px;top:calc(50% + 20px);height:calc(100% - 24px);width:2px;background:var(--c-line)}
.timeline .num{width:40px;height:40px}
.timeline .note{margin-top:0}

/* 左の列が狭いページでは、段階を縦に並べる（左に番号、右に名前と説明） */
.detail__main .steps{flex-direction:column;align-items:stretch;gap:var(--s-16)}
.detail__main .step{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:var(--s-16);align-items:center;text-align:left;padding:0}
.detail__main .step .num{grid-row:span 2;margin:0}
.detail__main .step .note{margin-top:0}
.detail__main .step+.step::before{left:15px;top:-14px;transform:rotate(135deg)}
.form-card__sub{margin:var(--s-16) 0 0;text-align:center}

/* Q&A の「Q.」「A.」の印 */
.qa-mark{color:var(--c-blue);font-weight:700;margin-right:2px}
.qa .a .qa-mark{color:var(--c-navy)}

/* FAQ：左に分類の目次（付いてくる）、右に分類ごとのQ&A（2026-10-14） */
.faq{display:grid;grid-template-columns:240px minmax(0,1fr);gap:var(--s-48);align-items:start}
.faq-nav{position:sticky;top:104px}
.faq-nav ul{display:flex;flex-direction:column;gap:var(--s-8)}
.faq-nav a{display:flex;align-items:center;gap:var(--s-12);padding:var(--s-12) var(--s-16) var(--s-12) var(--s-12);background:var(--c-white);border:1px solid var(--c-line);border-radius:var(--r-m);font-size:var(--fs-small);font-weight:700;color:var(--c-navy);transition:border-color .15s,box-shadow .15s}
.faq-nav a:hover{border-color:var(--c-blue);box-shadow:var(--sh-hover)}
.faq-nav__name{flex:1}
.faq-count{font-size:var(--fs-xs);font-weight:500;color:var(--c-text)}
.faq-group+.faq-group{margin-top:var(--s-48)}
.faq-group__title{display:flex;align-items:center;gap:var(--s-12);margin-bottom:var(--s-16)}
.faq-cta{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s-32);align-items:center}
.faq-cta .btns{margin-top:0}
.faq-cta .txt{margin-top:var(--s-8)}
@media(max-width:1000px){
  .faq{grid-template-columns:minmax(0,1fr)}
  .faq-nav{position:static}
  .faq-nav ul{flex-direction:row;flex-wrap:wrap}
  .faq-cta{grid-template-columns:minmax(0,1fr)}
}

/* お申し込み（デモ・トライアルのフォーム） */
.apply-form{max-width:640px;margin:0 auto;text-align:left}
.apply-form+.after-grid{margin-top:var(--s-24)}

/* フォームの入力欄（シャノンのフォームが入ったとき用） */
input[type=text],input[type=email],input[type=tel],select,textarea{width:100%;background:var(--c-white);border:1px solid var(--c-line);border-radius:var(--r-s);height:48px;padding:0 var(--s-12);font-family:inherit;font-size:var(--fs-body);color:var(--c-ink)}
textarea{height:120px;padding:var(--s-12);resize:vertical}

/* ── ⑭ 一覧・詳細・記事本文 ── */
.filter+.grid,.filter+.list-wrap{margin-top:var(--s-48)}
.cat-empty{display:none;text-align:center;margin-top:var(--s-24)}

/* 記事の題名（事例・コラム・資料・セミナーの詳細）：長い題名が入るため 34・左寄せ */
.article-hd .tags{margin-bottom:var(--s-16)}
.article-title{font-size:var(--fs-h2);font-weight:700;line-height:1.55;color:var(--c-navy)}
.article-hd .post__meta{margin-bottom:var(--s-16)}
.article-hd .post__sub{margin-bottom:var(--s-8)}
.article-hd .keys{margin-top:var(--s-16)}
.article-hd .keys .key{font-size:var(--fs-xs);line-height:1.6;color:var(--c-text);border:1px solid var(--c-line);border-radius:var(--r-full);padding:1px var(--s-8)}
.article{max-width:calc(var(--w-narrow) + var(--gutter) * 2);margin:0 auto;padding:var(--s-48) var(--gutter) var(--s-88)}
.article-hd+*{margin-top:var(--s-32)}
.detail-lead{margin-top:var(--s-16);font-size:var(--fs-body-l);line-height:var(--lh-body);color:var(--c-text)}
.detail-img{margin:var(--s-32) 0;border-radius:var(--r-m);overflow:hidden;background:var(--c-tint);border:1px solid var(--c-line)}
.detail-img img{width:100%}
.col-lead{margin-bottom:var(--s-32)}
.col-lead:empty{display:none}
.col-lead p:last-child{margin-bottom:0}
.toc{margin-bottom:var(--s-32)}
.toc-title{font-size:var(--fs-small);font-weight:700;color:var(--c-navy);margin-bottom:var(--s-8)}
.toc-list{list-style:decimal;padding-left:20px;font-size:var(--fs-body);line-height:2}
.toc-list a{color:var(--c-blue)}
.toc-list ol{list-style:decimal;padding-left:20px;font-size:var(--fs-small)}
.author{border-top:1px solid var(--c-line);padding-top:var(--s-16);margin-top:var(--s-48)}
.col-recommend{margin-top:var(--s-32)}
.col-recommend h3,.col-recommend .sidebar_ttl{font-size:var(--fs-h4);font-weight:700;color:var(--c-navy);margin:0 0 var(--s-16)}
.col-recommend ul{display:grid;gap:var(--s-12)}
.col-recommend li a{display:block;border:1px solid var(--c-line);border-radius:var(--r-m);padding:var(--s-16) var(--s-24);background:var(--c-white);transition:box-shadow .2s,border-color .2s}
.col-recommend li a:hover{border-color:var(--c-blue);box-shadow:var(--sh-hover)}
.col-recommend .dsc{display:block;font-size:var(--fs-xs);color:var(--c-blue);font-weight:700}
.col-recommend .ttl{display:block;font-size:var(--fs-body);font-weight:700;color:var(--c-ink);line-height:1.6;margin-top:2px}

/* 記事本文（ブロックエディターの出力）。見出しは「箱の見出し」と同じ 24／20 */
.article-body{font-size:var(--fs-body-l);line-height:2;color:var(--c-text)}
.article-body .row{margin-left:0;margin-right:0}
.article-body [class*="col-"]{padding-left:0;padding-right:0}
.article-body p{margin:0 0 1.1em}
.article-body p:empty{display:none}
.article-body b,.article-body strong{color:var(--c-ink)}
.article-body a{color:var(--c-blue);text-decoration:underline;text-underline-offset:3px}
.article-body h2,.article-body h3,.article-body .TsukuruCmsHeadingCss h2,.article-body .TsukuruCmsHeadingCss h3{font-size:var(--fs-h3);font-weight:700;line-height:var(--lh-head);color:var(--c-navy);margin:var(--s-48) 0 var(--s-16)}
.article-body h4,.article-body h5,.article-body .TsukuruCmsHeadingCss h4,.article-body .TsukuruCmsHeadingCss h5{font-size:var(--fs-h4);font-weight:700;line-height:var(--lh-head);color:var(--c-navy);margin:var(--s-32) 0 var(--s-12)}
.article-body .TsukuruCmsHeadingCss{margin:0}
.article-body .TsukuruCmsImageCss{margin:var(--s-24) 0}
.article-body .TsukuruCmsImageCss img{max-width:100%;border-radius:var(--r-m);margin:0 auto}
.article-body .TsukuruCmsButtonCss{margin:var(--s-24) 0;text-align:center}
/* 本文中のボタン：副ボタンの形。エディターで「btn04」（塗りつぶし）を選んだものは主ボタン（オレンジ） */
.article-body .TsukuruCmsButtonCss a,.article-body .TsukuruCmsButtonCss a.btnElement{display:inline-flex!important;align-items:center;height:56px;padding:0 var(--s-32)!important;background:var(--c-white)!important;color:var(--c-navy)!important;font-weight:700;font-size:var(--fs-body)!important;border:1px solid var(--c-line)!important;border-radius:var(--r-s)!important;text-decoration:none!important;box-shadow:none!important;width:auto!important}
.article-body .TsukuruCmsButtonCss a:hover{border-color:var(--c-blue)!important;color:var(--c-blue)!important}
.article-body .TsukuruCmsButtonCss a[class*="btn04"]{background:var(--c-orange)!important;border-color:var(--c-orange)!important;color:var(--c-white)!important}
.article-body .TsukuruCmsButtonCss a[class*="btn04"]:hover{background:var(--c-orange-dark)!important;color:var(--c-white)!important}
.article-body table{width:100%;border-collapse:collapse;margin:var(--s-16) 0}
.article-body th,.article-body td{border:1px solid var(--c-line);padding:var(--s-12) var(--s-16);text-align:left;vertical-align:top;font-size:var(--fs-body)}
.article-body th{background:var(--c-bg);color:var(--c-navy);font-weight:700}
.article-body figure{margin:0}
.article-body [style*="font-size"]{font-size:inherit!important}
.article-body ul,.article-body ol{padding-left:1.4em;margin:0 0 1.1em}
.article-body ul{list-style:disc}
.article-body ol{list-style:decimal}
.article-body hr{border:0;border-top:1px solid var(--c-line);margin:var(--s-24) 0}
.article-body .richTextBoxCss{overflow-wrap:break-word}

/* ── ⑮ 760px 以下：1列に並べる（スマホの細かい決まりは、PCの確定後に別途） ── */
@media(max-width:1000px){
  .fv1{padding:0 24px}
  .fv1 .fv-in{grid-template-columns:minmax(0,1fr);grid-template-areas:"tag" "kicker" "h1" "img" "ctas" "note" "lead" "docs"}
  .fv1 .fv-img{margin:0 -24px;padding:8px 24px 24px;justify-content:center}
  .fv1 .fv-img::before{left:0;right:0;top:36px;border-radius:0}
  .fv1 .fv-img img{max-width:560px}
  .fv1 .fv-docs{grid-area:docs;align-self:auto;justify-self:start;margin:24px 0 32px}
  .logos{grid-template-columns:repeat(4,minmax(0,1fr))}
  .effects__grid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--s-32)}
  .fx:nth-child(3){border-left:0}
  .ds,.price-flow{grid-template-columns:minmax(0,1fr)}
  .ds .chev::before,.ds-arrow::before{transform:rotate(135deg)}
  .ds>.chev{height:var(--s-32)}
  .detail{grid-template-columns:minmax(0,1fr)}
  .form-card{position:static}
}
@media(max-width:760px){
  :root{--gutter:16px}
  .sec{padding-top:var(--s-48);padding-bottom:var(--s-48)}
  .band{padding:var(--s-48) var(--gutter)}
  .grid--2,.grid--3,.grid--4,.split,.media-row,.media-row--rev,.tech,.stats{grid-template-columns:minmax(0,1fr)}
  .media-row--rev>.media-row__media{order:0}
  .problem-arrows{grid-template-columns:1fr}
  .problem-arrows .chev:nth-child(n+2){display:none}
  .tech__body{border-left:0;padding-left:0}
  .steps{flex-direction:column;gap:var(--s-16)}
  .step+.step::before{display:none}
  .isms{flex-direction:column;text-align:center}
  .btns{flex-direction:column;align-items:stretch}
  .btn{white-space:normal}
  .page-title{font-size:var(--fs-h2)}
  .sec-title,.band-title{font-size:var(--fs-h3)}
  .fv1 .fv-h1{font-size:var(--fs-h2)}
  .fv1 .fv-lead,.fv1 .fv-docs{display:none}
  .logos{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-16)}
  .effects__grid{grid-template-columns:1fr}
  .fx{border-left:0}
}

/* ── 組み込みで追加（2026-10-14）：お知らせバーの中身は CMS の記事から入る ──
   ・題名が長いときは1行で「…」にする（バーの高さを変えない）
   ・カテゴリが2つ以上ある記事は、1つ目だけを札に出す（format_html_category_column_idx が span を並べるため） */
.mv-news__title{flex:0 1 auto;min-width:0;max-width:50%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mv-news__tag .column_ls_tg_itm+.column_ls_tg_itm{display:none}
@media(max-width:760px){.mv-news__title{max-width:none;white-space:normal}}

/* ── 2026-10-14 トップ：文書の種類をメインビジュアルから「i-ShareDXとは」へ移した（3枚の実績カードの代わり。中身は箇条書き） ── */
.doc-hd{margin:var(--s-24) 0 var(--s-12);font-size:var(--fs-small);font-weight:700;line-height:1.6;letter-spacing:.06em;color:var(--c-blue)}
.doc-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s-8)}
.doc-chips li{font-size:var(--fs-small);font-weight:500;line-height:1.6;color:var(--c-navy);background:var(--c-white);border:1px solid var(--c-line);border-radius:var(--r-s);padding:6px var(--s-12)}
.split .txt+.txt{margin-top:var(--s-16)}

/* ── 2026-10-14 トップのメインビジュアル：文書の種類を外したので、実機の写真を少し下げて大きく（PCの2列のときだけ。1000px以下は今まで同じ） ── */
@media(min-width:1001px){
  .fv1 .fv-img{padding-top:104px}
}
@media(min-width:1251px){ /* 1001〜1250px は画面の右端でスマホが切れるため、大きくしない */
  .fv1 .fv-img img{width:114%;max-width:none}
}
/* 1000px以下（1列）：画像の下にあった文書の種類（下の余白72px）が無くなったので、説明文の下に同じ余白を取る（お知らせバーが重ならないように） */
@media(min-width:761px) and (max-width:1000px){
  .fv1 .fv-lead{margin-bottom:72px}
}
/* ── 2026-10-14 お知らせバーを目立たせる：バー全体を紺、文字は白（オレンジは主ボタンだけのまま。色の系統が違うのでボタンは目立ったまま） ── */
.mv-news a{background:var(--grad-navy);border-color:transparent;color:var(--c-white)}
.mv-news a:hover{border-color:transparent;box-shadow:var(--sh-hover)}
.mv-news__tag{background:var(--c-white);color:var(--c-navy)}
.mv-news__title{color:var(--c-white)}
.mv-news__desc{color:#C9D6E0;border-left-color:rgba(255,255,255,.3)}
.mv-news__more{color:var(--c-white)}

/* ── 2026-10-14 料金ページを「面で締める」（見本 案B。ユーザー決定）：淡くさみしい印象への対応
   ・段の背景：料金の仕組み＝薄い青／伴走・サポート＝白（テンプレートの段のクラスを入れ替え）
   ・料金の箱：白で影を付けて浮かせる。月額は紺の枠と紺のアイコンで中心を示す
   ・伴走の5段階：薄い青（濃）の帯にのせ、番号を線でつなぐ
   ・サポート4枚：アイコン付きの薄い青の面（.sup） */
.p-pricing .price-box{background:var(--c-white);border-color:transparent;box-shadow:var(--sh-frame)}
.p-pricing .price-box>.icon{margin-bottom:var(--s-12)}
.p-pricing .pb-month{border:2px solid var(--c-navy)}
.p-pricing .pb-month>.icon{background:var(--c-navy);color:var(--c-white)}
.p-pricing .pb-month .box-title{font-size:var(--fs-h3)}
.p-pricing .pb-month .pb-items li{background:var(--c-bg);border-color:transparent}
.p-pricing .pb-any>.icon{color:var(--c-text)}
.p-pricing .steps{max-width:none;background:var(--c-tint);border-radius:var(--r-m);padding:var(--s-32) var(--s-24);position:relative}
.p-pricing .steps::before{content:"";position:absolute;left:12%;right:12%;top:51px;height:2px;background:var(--c-blue);opacity:.35}
.p-pricing .step+.step::before{display:none}
.p-pricing .step .num{position:relative;box-shadow:0 0 0 6px var(--c-tint)}
.sup{display:flex;gap:var(--s-16);align-items:flex-start;background:var(--c-bg);border-color:transparent}
.sup>div{min-width:0}
.sup>.icon{background:var(--c-white)}
@media(max-width:760px){
  .p-pricing .steps{padding:var(--s-24) var(--s-16);align-items:stretch} /* 5段階を中央にそろえる */
  .p-pricing .steps::before{display:none}
}

/* ── 2026-10-14 記事本文の見出しを「面」に（見本 案B。ユーザー決定）：シンプルすぎて章と小見出しの区別がつきにくい、への対応
   ・本番の記事は h3＝章・h4＝小見出し（h2 は今は使われていないが、同じ扱いにしておく）
   ・章：薄い青の面にのせる／小見出し：頭に青い四角＋下に細い罫線（左の縦線は使わない＝決まりのとおり）
   ・コラムのリード（薄い青の箱）の中に見出しがあるときは、面を白にする */
.article-body h2,.article-body h3,.article-body .TsukuruCmsHeadingCss h2,.article-body .TsukuruCmsHeadingCss h3{background:var(--c-bg);border-radius:var(--r-s);padding:var(--s-16) var(--s-24)}
.article-body.col-lead h2,.article-body.col-lead h3{background:var(--c-white)}
.article-body h4,.article-body .TsukuruCmsHeadingCss h4{position:relative;padding:0 0 var(--s-8) var(--s-24);border-bottom:1px solid var(--c-line)}
.article-body h4::before{content:"";position:absolute;left:2px;top:.5em;width:10px;height:10px;border-radius:2px;background:var(--c-blue)}
@media(max-width:760px){
  .article-body h2,.article-body h3,.article-body .TsukuruCmsHeadingCss h2,.article-body .TsukuruCmsHeadingCss h3{padding:var(--s-12) var(--s-16)}
}

/* ============================================================
   ⑯ 詳細ページ（事例・コラム・資料・セミナー）と記事本文 ── 2026-10-14 デザイン案「A：本文＋右の列」
   4種類とも同じ骨組み：
     ┌ 題名の帯（薄い青・画面の端まで）┐┌ 右の列 ┐ ← 右の列の最初のカードは帯にかぶさる
     └ 本文の列                       ┘│(付いてくる)│
   ・右の列の幅は中身で2つ：案内（目次など）＝272（本文 800＋間 48＋272＝1120）／フォーム＝480（今のまま）
   ・右の列のカードはすべて白カード（帯の薄い青の上に乗るため。面のカードは使わない）
   ・1000px 以下は1列（題名 → 右の列（目次）→ 本文。フォームは本文の後）
   ============================================================ */
:root{--w-side:calc(var(--w-std) - var(--w-narrow) - var(--s-48))} /* 272：右の列（案内）。新しい値ではなく、決まりの幅から計算 */

/* 骨組み */
.detail{grid-template-columns:minmax(0,1fr) var(--w-form);grid-template-rows:auto 1fr;column-gap:var(--s-48);row-gap:0;padding-top:var(--s-16)}
.detail--side{grid-template-columns:minmax(0,var(--w-narrow)) var(--w-side)}
.detail__hd{grid-column:1;grid-row:1;padding:var(--s-48) 0;background:var(--c-bg);box-shadow:0 0 0 100vmax var(--c-bg);clip-path:inset(0 -100vmax)}
.detail__main{grid-column:1;grid-row:2;min-width:0;padding-top:var(--s-48)}
.detail>.side,.detail>.form-card{grid-column:2;grid-row:1 / span 2;align-self:start;margin-top:var(--s-48)}
.detail>.form-card{background:var(--c-white);border-color:var(--c-line)} /* 帯の上に乗るので白カード */
.side{position:sticky;top:96px;display:flex;flex-direction:column;gap:var(--s-16);max-height:calc(100vh - 120px);overflow-y:auto;scrollbar-width:thin}
@media(max-width:1200px){.side{top:136px;max-height:calc(100vh - 160px)}}

/* 題名の帯の中 */
.detail__hd .article-title{max-width:var(--w-narrow)}
.detail__hd .post__meta{margin-bottom:var(--s-16)}
.detail__hd .post__meta .date{font-size:var(--fs-small);color:var(--c-text)}
.detail__hd .tag,.detail__hd .column_ls_tg_itm{display:inline-block;font-size:var(--fs-xs);font-weight:700;line-height:1.6;color:var(--c-blue);background:var(--c-white);border-radius:var(--r-s);padding:2px var(--s-8)}
.detail__hd .tags,.detail__hd .tag-list{gap:var(--s-8)}
.detail__hd .tag-list{margin-bottom:var(--s-16)}
.detail__hd .post__sub{font-size:var(--fs-body);margin-bottom:var(--s-8)}
.detail__hd .detail-lead{margin-top:var(--s-16)}
.detail__hd .keys{display:flex;flex-wrap:wrap;gap:var(--s-8);margin-top:var(--s-24)}
.detail__hd .keys .key{font-size:var(--fs-small);line-height:1.6;color:var(--c-navy);background:var(--c-white);border:1px solid var(--c-line);border-radius:var(--r-full);padding:4px var(--s-12)}
/* 事例：どの会社の話か（業種の札＋会社名）を題名の上に大きく */
.case-co{display:flex;align-items:center;gap:var(--s-12);flex-wrap:wrap;margin-bottom:var(--s-12)}
.case-co__name{font-size:var(--fs-h4);font-weight:700;line-height:var(--lh-head);color:var(--c-navy)}

/* 本文の列 */
.detail__main>*+*{margin-top:var(--s-32)}
.detail__main>.detail-img{margin:0}
.detail__main>.detail-img+*{margin-top:var(--s-32)}
.detail__main>.col-lead+.article-body{margin-top:var(--s-48)}
.col-lead{padding:var(--s-32);color:var(--c-ink)}
.col-lead:empty{display:none}

/* 執筆者：アイコン付きの面のカード（文言は今のまま） */
.author{display:flex;gap:var(--s-16);align-items:flex-start;margin-top:var(--s-64)!important;border-top:0;padding:var(--s-24)}
.author__name{font-size:var(--fs-small);font-weight:700;color:var(--c-navy);line-height:1.7}
.author .note{margin-top:var(--s-4)}

/* おすすめ記事（あるときだけ）：本文の最後に2列のカード（右端に「＞」） */
.col-recommend:empty{display:none}
.col-recommend{margin-top:var(--s-48)!important}
.col-recommend .sidebar_ttl,.col-recommend h3{font-size:var(--fs-h4);font-weight:700;color:var(--c-navy);margin:0 0 var(--s-16)}
.col-recommend ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-16)}
.col-recommend li a{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--s-16);align-items:center;height:100%;padding:var(--s-16) var(--s-24)}
.col-recommend li a>span{grid-column:1}
.col-recommend li a::after{content:"";grid-column:2;grid-row:1 / span 2;width:9px;height:9px;border-right:2px solid var(--c-blue);border-top:2px solid var(--c-blue);transform:rotate(45deg);margin-right:var(--s-4)}

/* 右の列のカード */
.side-card{background:var(--c-white);border:1px solid var(--c-line);border-radius:var(--r-m);padding:var(--s-24)}
.side-title{font-size:var(--fs-small);font-weight:700;line-height:1.6;color:var(--c-navy);margin-bottom:var(--s-12)}
/* 目次（中身は main.js が本文の見出しから作る）。右の列では章だけ（小見出しは出さない）。番号は付けない（10-15） */
.side .toc{margin:0}
.side .toc-title{font-size:var(--fs-small);margin-bottom:var(--s-8)}
.side .toc-list{list-style:none;padding:0;font-size:var(--fs-small);line-height:1.6}
.side .toc-list>li>a{line-height:1.55}
.side .toc-list>li+li{margin-top:2px}
.side .toc-list>li>a{display:block;padding:var(--s-4) var(--s-8);margin:0 calc(var(--s-8) * -1);border-radius:var(--r-s);color:var(--c-text);transition:background .15s,color .15s}
.side .toc-list>li>a:hover{background:var(--c-bg);color:var(--c-navy)}
.side .toc-list>li>a.is-current{background:var(--c-tint);color:var(--c-navy);font-weight:700}
.side .toc-list ol{display:none}
/* 事例：右の列の上に、どの会社の話か */
.side-co .tag{margin-bottom:var(--s-8)}
.side-co__name{font-size:var(--fs-body);font-weight:700;line-height:1.6;color:var(--c-navy)}
/* お役立ち情報への案内（文言はヘッダーのメニューと同じ） */
.side-links{display:flex;flex-direction:column;gap:var(--s-4)}
.side-link{display:flex;align-items:center;gap:var(--s-12);padding:var(--s-8);margin:0 calc(var(--s-8) * -1);border-radius:var(--r-s);transition:background .15s}
.side-link:hover{background:var(--c-bg)}
.side-link b{display:block;font-size:var(--fs-small);line-height:1.5;color:var(--c-navy)}
.side-link small{display:block;font-size:var(--fs-xs);line-height:1.5;color:var(--c-text)}

/* ── 記事本文（CMSのブロックエディターが出すHTML。中身は変えずにCSSだけで整える） ── */
.article-body{font-size:var(--fs-body-l);line-height:2;color:var(--c-text)}
.article-body .is-blank{display:none}                        /* 全角スペースだけの段落（main.js が印を付ける） */
.article-body>.blockEditorCss>.row:first-child>[class*="col-"]>:first-child>:is(h2,h3):first-child,
.article-body>.blockEditorCss>.row:first-child>[class*="col-"]>:first-child:is(h2,h3){margin-top:0}

/* 列：エディターの「2列」（col-md-6 など）を、どの環境でも同じ形に */
.article-body .row{display:flex;flex-wrap:wrap;column-gap:var(--s-32);align-items:center}
.article-body .row>[class*="col-"]{flex:1 1 100%;min-width:0;max-width:none;width:auto;float:none}
.article-body .row>.col-md-6{flex-basis:calc(50% - var(--s-16))}
.article-body .row>.col-md-4{flex-basis:calc(33.333% - var(--s-32))}
.article-body .row>.col-md-8{flex-basis:calc(66.666% - var(--s-32))}
.article-body .row>.col-md-6 .TsukuruCmsImageCss{margin:var(--s-24) 0}
/* 2列の中の小見出し（事例の「書式がバラバラ…」など）は、写真の横の大きめの一文として見せる */
.article-body .col-md-6 h4{font-size:var(--fs-h3);line-height:1.6;padding:0;border:0;margin:var(--s-24) 0}
.article-body .col-md-6 h4::before{position:static;display:block;width:40px;height:3px;border-radius:2px;margin-bottom:var(--s-16)}

/* 章（h2・h3）：薄い青の面（10-14 決定）。上を広く空けて区切りをはっきり */
.article-body h2,.article-body h3,.article-body .TsukuruCmsHeadingCss h2,.article-body .TsukuruCmsHeadingCss h3{margin:var(--s-64) 0 var(--s-24);padding:var(--s-16) var(--s-24);font-size:var(--fs-h3);line-height:var(--lh-head);background:var(--c-bg);border-radius:var(--r-s)}
/* 小見出し（h4）：頭に青い四角＋下に細い罫線（10-14 決定） */
.article-body h4,.article-body .TsukuruCmsHeadingCss h4{margin:var(--s-48) 0 var(--s-16);font-size:var(--fs-h4)}
.article-body :is(h2,h3)+h4,.article-body :is(h2,h3)+p+h4{margin-top:var(--s-32)}
/* 「Q.」で始まる小見出し（よくある質問）：四角の代わりに「Q.」を青く（FAQ と同じ印。main.js が印を付ける） */
.article-body h4.is-q{padding-left:0}
.article-body h4.is-q::before{display:none}

/* 段落・強調 */
.article-body p{margin:0 0 1em}
.article-body b,.article-body strong{color:var(--c-ink)}
/* エディターで付けた文字の色・蛍光ペン・下線は、そのまま表示する（10-15 決定：CMS側の確認が要るため触らない） */

/* 箇条書き：薄い青の面にのせる（文章が続く中で、ひと目で「並び」と分かるように） */
.article-body :is(ul,ol){margin:var(--s-24) 0;padding:var(--s-24) var(--s-32);background:var(--c-bg);border-radius:var(--r-m);list-style:none}
.article-body li{position:relative;padding-left:1.3em;line-height:1.8}
.article-body li+li{margin-top:var(--s-8)}
.article-body ul>li::before{content:"";position:absolute;left:.2em;top:.72em;width:7px;height:7px;border-radius:var(--r-full);background:var(--c-blue)}
.article-body ol{counter-reset:ol}
.article-body ol>li{counter-increment:ol;padding-left:1.8em}
.article-body ol>li::before{content:counter(ol) ".";position:absolute;left:0;font-weight:700;color:var(--c-blue)}
.article-body td :is(ul,ol){margin:var(--s-8) 0;padding:0;background:none}

/* 表：角の丸い枠の中に。横に長い表は枠の中で横に動かせる */
.article-body figure.table{margin:var(--s-32) 0;overflow-x:auto;border:1px solid var(--c-line);border-radius:var(--r-m)}
.article-body figure.table table{margin:0;border-style:hidden}
.article-body th,.article-body td{padding:var(--s-12) var(--s-16);line-height:1.8}
.article-body td p{margin:0}
.article-body td p+p{margin-top:var(--s-4)}
/* 見出しの行が無い表（事例の「対象・課題・利用サービス・効果」など）は、左の列を見出しとして見せる */
.article-body table:not(:has(th)) td:first-child{width:1%;white-space:nowrap;background:var(--c-bg);color:var(--c-navy);font-weight:700}
.article-body table:not(:has(th)) td{border-left:0;border-right:0}

/* 画像 */
.article-body .TsukuruCmsImageCss{margin:var(--s-32) 0}
.article-body .TsukuruCmsImageCss img{max-width:100%;border-radius:var(--r-m);margin:0 auto}

/* 本文中のボタン（10-15 決定：案4「使い分け」）
   ・エディターで「塗り」（btn04）を選んだボタン＝紺の塗り＋白い「＞」
   ・それ以外＝白地＋青い枠＋青い「＞」
   ・幅は 400 以上でそろえ、文字は左・「＞」は右。続けて置いたボタンは間 16 で縦に並ぶ
   ・オレンジは使わない（オレンジは主ボタン「デモ・無料トライアル」だけ） */
.article-body .TsukuruCmsButtonCss{margin:var(--s-32) 0;text-align:center}
.article-body .TsukuruCmsButtonCss+.TsukuruCmsButtonCss{margin-top:calc(var(--s-16) - var(--s-32))}
.article-body .TsukuruCmsButtonCss a,.article-body .TsukuruCmsButtonCss a.btnElement{justify-content:space-between!important;min-width:400px;max-width:100%;padding:0 var(--s-24) 0 var(--s-32)!important;background:var(--c-white)!important;border:1px solid var(--c-blue)!important;color:var(--c-navy)!important}
.article-body .TsukuruCmsButtonCss a::after{content:"";flex:none;width:8px;height:8px;margin-left:var(--s-16);border-right:2px solid currentColor;border-top:2px solid currentColor;transform:rotate(45deg);color:var(--c-blue)}
.article-body .TsukuruCmsButtonCss a:hover,.article-body .TsukuruCmsButtonCss a.btnElement:hover{background:var(--c-bg)!important;color:var(--c-navy)!important}
.article-body .TsukuruCmsButtonCss a[class*="btn04"]{background:var(--c-navy)!important;border-color:var(--c-navy)!important;color:var(--c-white)!important}
.article-body .TsukuruCmsButtonCss a[class*="btn04"]::after{color:var(--c-white)}
.article-body .TsukuruCmsButtonCss a[class*="btn04"]:hover{background:var(--c-navy-2)!important;border-color:var(--c-navy-2)!important;color:var(--c-white)!important}

/* 引用：薄い青の面＋青い「“」（左の縦線は使わない） */
.article-body blockquote{position:relative;margin:var(--s-32) 0;padding:var(--s-24) var(--s-32) var(--s-24) 72px;background:var(--c-bg);border-radius:var(--r-m);color:var(--c-ink)}
.article-body blockquote::before{content:"\201C";position:absolute;left:var(--s-24);top:var(--s-8);font-size:var(--fs-display);line-height:1;font-weight:700;color:var(--c-blue)}
.article-body blockquote p:last-child{margin-bottom:0}

/* コラムのリード（薄い青の箱）の中：箇条書きの面を白に */
.col-lead :is(ul,ol){background:var(--c-white)}

/* 1000px 以下：1列（題名 → 右の列 → 本文。フォームは本文の後） */
@media(max-width:1000px){
  .detail,.detail--side{grid-template-columns:minmax(0,1fr);grid-template-rows:none}
  .detail__hd,.detail__main,.detail>.side,.detail>.form-card{grid-column:1;grid-row:auto}
  .detail__hd{order:0}
  .detail>.side{order:1;position:static;max-height:none;overflow:visible;margin-top:var(--s-32)}
  .detail__main{order:2}
  .detail>.form-card{order:3;position:static;margin-top:var(--s-48)}
  .col-recommend ul{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:760px){
  .article-body .row>[class*="col-"]{flex-basis:100%}
  .article-body .TsukuruCmsButtonCss a,.article-body .TsukuruCmsButtonCss a.btnElement{min-width:0;width:100%!important}
}
.side-co{padding-bottom:var(--s-16);margin-bottom:var(--s-16);border-bottom:1px solid var(--c-line)}
.article-body th{white-space:nowrap}

/* ── 10-14 追記①：右の列の目次が長いとき ──
   ・右の列全体ではなく「章の一覧」だけがスクロールする（「目次」の見出しと、下の「お役立ち情報」はいつも見える）
   ・一覧の上下に続きがあるときは、その端をぼかして知らせる（main.js が .is-more-down / .is-more-up を付ける）
   ・いま読んでいる章は、一覧の中で見える位置に来る（main.js） */
.side{overflow:visible}
.side>*{flex:none}
.side>.toc,.side>.side-card:has(.toc){flex:0 1 auto;min-height:0;display:flex;flex-direction:column}
.side .toc{display:flex;flex-direction:column;min-height:0}
.side .toc-title{flex:none}
.side .toc-list{position:relative;min-height:120px;overflow-y:auto;scrollbar-width:thin;padding:2px var(--s-8);margin:0 calc(var(--s-8) * -1)}
.side .toc-list.is-more-down{-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 40px),transparent)}
.side .toc-list.is-more-up{-webkit-mask-image:linear-gradient(to top,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(to top,#000 calc(100% - 40px),transparent)}
.side .toc-list.is-more-up.is-more-down{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 40px,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(to bottom,transparent,#000 40px,#000 calc(100% - 40px),transparent)}
.side .toc-list>li>a{margin:0}

@media(max-width:1000px){
  .side .toc-list{max-height:none;overflow:visible;min-height:0}
  .side .toc-list.is-more-down,.side .toc-list.is-more-up{-webkit-mask-image:none;mask-image:none}
}

/* ── 2026-10-15 資料・セミナーの詳細：フォームが入っていない記事は1列（ユーザー決定） ──
   ・セミナーは外部（Zoom など）の申し込みボタンだけで、フォームの無い記事がある → 右の列が空のフォームの枠になるのを防ぐ
   ・フォームの有無は、CMSが出す中身で判断する：シャノン（smp_form_tag が .smpFormWrapper を出す＝入力欄「SMPフォームのタグ」があり「非表示」でないとき）、
     または旧フォーム SATORI（#satori__creative_container の中に、読み込みタグ <script> 以外の表示が入ったとき）。記事ごとの設定は不要
   ・10-15 修正：入力欄 s_tag_form_idx に SATORI の読み込みタグだけが残っている記事が「フォームあり」と判断され2列のままだった → <script> は数えない
   ・お問い合わせ・デモ（<div class="detail">）は対象外（<article> の詳細ページだけ） */
article.detail:has(> .form-card):not(:has(.smpFormWrapper, #satori__creative_container > :not(script))){grid-template-columns:minmax(0,var(--w-narrow));justify-content:center}
article.detail:has(> .form-card):not(:has(.smpFormWrapper, #satori__creative_container > :not(script)))>.form-card{display:none}

/* ── 2026-10-15 セミナー・資料の詳細：先頭の画像（バナー・資料の画像）を、題名の帯の下の端にまたがらせる（ユーザー決定 案B） ──
   ・最初の画面で、題名の帯だけが大きく見えて画像が下に押し出されていた → 本文の列を上へ引き上げて、画像を帯にまたがらせる
   ・記事の中身（HTML）は動かさない（CSSだけ）＝CMSの編集画面・保存に影響しない
   ・効くのは、セミナー＝本文の先頭が Image のブロックのとき／資料＝入力欄「アイキャッチ」（m_image_idx）があるとき。無い記事は今のまま
   ・<article class="detail"> の詳細ページだけ（セミナー一覧も body が p-seminar なので article.detail で絞る）
   ・セミナーの題名は長いものが多いので一段小さく（34 → 24） */
.p-seminar article.detail>.detail__hd .article-title{font-size:var(--fs-h3)}
.p-seminar article.detail:has(>.detail__main .blockEditorCss>.row:first-child>[class*="col-"]:first-child>.TsukuruCmsImageCss:first-child)>.detail__hd,
.p-download article.detail:has(>.detail__main>.detail-img:first-child)>.detail__hd{padding-bottom:calc(var(--s-88) + var(--s-24))}
.p-seminar article.detail:has(>.detail__main .blockEditorCss>.row:first-child>[class*="col-"]:first-child>.TsukuruCmsImageCss:first-child)>.detail__main,
.p-download article.detail:has(>.detail__main>.detail-img:first-child)>.detail__main{padding-top:0;margin-top:calc(var(--s-88) * -1);position:relative;z-index:1} /* 帯（clip-path で重なり順が上になる）より手前に */
.p-seminar article.detail>.detail__main .blockEditorCss>.row:first-child>[class*="col-"]:first-child>.TsukuruCmsImageCss:first-child{margin-top:0}
.p-seminar article.detail>.detail__main .blockEditorCss>.row:first-child>[class*="col-"]:first-child>.TsukuruCmsImageCss:first-child img,
.p-download article.detail>.detail__main>.detail-img:first-child{box-shadow:var(--sh-frame)}

/* ── 2026-10-15 資料・セミナーの詳細：フォームを題名の帯にかぶせない（ユーザー決定。資料・セミナーでそろえる） ──
   ・題名の帯を横いっぱいに使う（題名が狭い幅で3行に折り返されていた）
   ・フォームは本文と同じ高さから始める：先頭の画像が帯にまたがる記事は、画像と同じ高さ（帯の下の端にまたがる）／画像が無い記事は、本文の先頭と同じ高さ
   ・1000px 以下（1列）は今までどおり（題名 → 本文 → フォーム）なので、PCの幅だけ */
@media(min-width:1001px){
  article.detail:has(>.form-card)>.detail__hd{grid-column:1 / -1}
  article.detail:has(>.form-card)>.form-card{grid-row:2;margin-top:var(--s-48);z-index:1}
  .p-seminar article.detail:has(>.detail__main .blockEditorCss>.row:first-child>[class*="col-"]:first-child>.TsukuruCmsImageCss:first-child)>.form-card,
  .p-download article.detail:has(>.detail__main>.detail-img:first-child)>.form-card{margin-top:calc(var(--s-88) * -1)}
}

/* ── 2026-10-15 コラム & News の一覧を横長のリストに（1行に1記事。ユーザー決定） ──
   ・題名が長い読み物（＋サブタイトル）なので、3列のカードだと題名が3〜4行に折り返し、高さもそろわなかった
   ・左に画像（16:9）、右に 日付・カテゴリ → サブタイトル → 題名。画像の無い記事（News など）は薄い青の枠のまま
   ・10-15 調整（「要素の位置が近い」）：カードの間 16→24、カードの内側に余白24（画像を枠から離して角を丸く）、画像と文字の間 32、日付・カテゴリと題名の間 16
   ・テンプレート isdx_コラム一覧 の並べる枠を .post-rows に（トップのコラムのカードは今のまま） */
.post-rows{display:flex;flex-direction:column;gap:var(--s-24)}
.filter+.post-rows{margin-top:var(--s-48)}                /* 絞り込みとの間（ほかの一覧の .filter+.grid と同じ） */
.post-rows>.post{flex-direction:row;align-items:center;gap:var(--s-32);padding:var(--s-24)}
.post-rows .post__thumb{flex:none;width:240px;aspect-ratio:16/9;border-radius:var(--r-s)}
.post-rows .post__body{padding:0;gap:0}
.post-rows .post__meta{margin-bottom:var(--s-16)}        /* 日付・カテゴリ と 題名のまとまり を離す */
.post-rows .post__sub{margin-bottom:var(--s-4)}          /* サブタイトルは題名の前置きなので近く */
.post-rows .post__title{font-size:var(--fs-body-l);line-height:1.6}
@media(max-width:760px){
  .post-rows{gap:var(--s-16)}
  .post-rows>.post{align-items:flex-start;gap:var(--s-16);padding:var(--s-16)}
  .post-rows .post__thumb{width:120px}
  .post-rows .post__meta{margin-bottom:var(--s-8)}
  .post-rows .post__title{font-size:var(--fs-body)}
}

/* ── 2026-10-16 導入企業のロゴ：プレミアムウォーターだけ2マス分の幅に（ユーザー「小さくて読めない」） ──
   ・画像が横300×縦15の細長い文字だけのロゴで、1マス（約120px）に縮むと読めなかった
   ・PCは9マスの1列（8社。プレミアムウォーターが2マス）、1000px以下は3マス×3段 */
.logos{grid-template-columns:repeat(9,minmax(0,1fr))}
.logos li:has(img[src*="logo-premiumwater"]){grid-column:span 2}
.fv1 .fv-kicker .nb{display:inline-block}                 /* 製品名「i-ShareDX」を途中で折らない（スマホ No.10） */
@media(max-width:1000px){
  .logos{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ── 2026-10-16 スマホ（760px以下）の見え方の調整（点検結果_スマホ_2026-10-15.md No.1〜11） ──
   ・PCの見た目は変わらない（No.9・11 は 1列になる 1000px 以下から） */
@media(max-width:760px){
  /* No.1 見出し・ボタンは言葉の切れ目で折り返し、行の長さをそろえる（「削減効／果」などを防ぐ）。iPhone は行の長さをそろえるだけ効く */
  h1,h2,h3,h4,.btn,.page-title,.sec-title,.band-title,.box-title,.article-title,.post__title,.fx-label,.price-lead{word-break:auto-phrase;text-wrap:balance}
  /* No.2 デモ「デモでご覧いただけること」：画像の下に文章 */
  .demo-item{grid-template-columns:minmax(0,1fr);gap:var(--s-16)}
  /* No.3 料金「月額費用」の4項目は1列 */
  .pb-items{grid-template-columns:minmax(0,1fr)}
  /* No.4 料金「伴走します」の5段階：左に番号・右に文字の行に（デモの流れと同じ形） */
  .p-pricing .steps{gap:var(--s-16)}
  .p-pricing .step{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:var(--s-16);align-items:center;text-align:left;padding:0}
  .p-pricing .step .num{grid-row:span 2;margin:0}
  .p-pricing .step .note{margin-top:0}
  /* No.5 デモの表：見出しは折らない */
  .info-table th,.info-table td{padding:var(--s-12) var(--s-16)}
  .info-table th{white-space:nowrap;width:1%}
  /* No.6 トップ「削減効果」：2列×2段の小さめのグラフに（数字は大きいまま） */
  .effects{padding:var(--s-32) var(--s-12) var(--s-24)}
  .effects__grid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--s-32)}
  .fx{padding:0 var(--s-8)}
  .fx:nth-child(even){border-left:1px solid rgba(255,255,255,.2)}
  .fx-label{font-size:var(--fs-small)}
  .fx-num{font-size:var(--fs-h2);margin-bottom:var(--s-12)}
  .fx-num small{font-size:var(--fs-small)}
  .fx-bars{height:104px;gap:var(--s-8)}
  .fx-bar,.fx-cap span{width:54px}
  .fx-bar{font-size:var(--fs-xs);white-space:nowrap}       /* 「200万円」を折らない */
  .fx-cap{gap:var(--s-8)}
  .fx-bubble{right:-4px;padding:2px var(--s-4)}
  /* No.7 トップ「課題」の3枚：イラストを小さく左に、文字を右に */
  .problem{display:grid;grid-template-columns:88px minmax(0,1fr);column-gap:var(--s-16);align-items:start}
  .problem__img{grid-row:span 2;height:auto;margin:0}
  .problem__img img{max-height:80px}
  /* No.8 詳細ページの題名はスマホでは一段小さく */
  .detail__hd .article-title{font-size:var(--fs-h3)}
}
@media(max-width:1000px){
  /* No.9 コラム詳細：「お役立ち情報」を本文の後ろへ（目次は本文の前のまま） */
  .p-column article.detail>.side{display:contents}
  .p-column article.detail>.side>.side-card{order:1;margin-top:var(--s-32)}
  .p-column article.detail>.side>.side-card:not(.toc){order:3;margin-top:var(--s-48)}
  /* No.11 資料詳細：フォーム（ダウンロードの入口）を題名のすぐ下に。画像を帯にまたがらせる形は、1列ではやめる */
  .p-download article.detail>.form-card{order:1;margin-top:var(--s-32)}
  .p-download article.detail>.detail__main{order:2}
  .p-download article.detail:has(>.detail__main>.detail-img:first-child)>.detail__hd{padding-bottom:var(--s-48)}
  .p-download article.detail:has(>.detail__main>.detail-img:first-child)>.detail__main{margin-top:0;padding-top:var(--s-48)}
}

/* ── 2026-10-16 PCの最終チェック：見出しの最後の1〜2文字だけ次の行に落ちるのを防ぐ（スマホ No.1 と同じ指定をPCにも） ──
   ・例：「生成するリ／スク」（トップ 課題）「ステップガイ／ド」（資料の題名）「イベン／ト」（コラム詳細の右の列）
   ・行の長さをそろえるだけで、文字の大きさ・行間は変わらない */
h1,h2,h3,h4,.btn,.page-title,.sec-title,.band-title,.box-title,.article-title,.post__title,.side-link,.fx-label,.price-lead{word-break:auto-phrase;text-wrap:balance}

/* ── 2026-10-16 事例一覧の絞り込み：「インフラ」だけ2行目に落ちていた（ボタン10個の合計が幅を18pxはみ出す）→ ボタンの左右の余白を 16→12 にして1行に（PC 1280px 以上） ── */
.p-cases .filter .pill{padding:0 var(--s-12)}

/* ── 2026-10-19 機能ページ データ構造化の図：「これまで」の見出しを「Word・Excel・PDF等のマニュアル」に（2行）。PCでは3枚の見出しの高さをそろえて、下の図の位置をそろえる ── */
.ds-step .box-title .nw{display:inline-block}
@media(min-width:1001px){.ds-step .box-title{min-height:2lh}}

/* ── 2026-10-23 シャノンのフォーム：右の列（幅約400px）では、項目名を入力欄の上に置く（smp-form_dg.css のスマホ用の並びと同じ）。項目名が横に220px取って入力欄が50〜140pxに潰れていたため ── */
.form-card .smpForm .ss_field,.form-card .smpForm .ss_enquete_field{display:block;padding:var(--s-8) 0}
.form-card .smpForm .ss_form_title,.form-card .smpForm .ss_enquete_title{width:100%;margin-bottom:var(--s-8);padding-top:0}
.form-card .smpForm #ss_name .ss_grid{flex-wrap:wrap}
/* 2026-10-23 シャノンのフォームは縦に約2,500pxあり画面より長い → 付いてくる動き（sticky）だと、本文が長い記事でフォームの下（送信ボタン）が画面の外に隠れたまま動かなくなる。シャノンのフォームが入っているときは付いてこないようにする */
.form-card:has(.smpFormWrapper){position:static}
/* 2026-10-23 シャノンのフォームの外側の余白（smpForm の左右の余白）をなくし、スマホでは白い枠の内側の余白も小さく → 入力欄を広く（375pxの画面で 244→約310px） */
.form-card .smpForm{margin:0;padding:0}
@media(max-width:760px){.form-card:has(.smpFormWrapper){padding:var(--s-24) var(--s-16)}}
/* ── 2026-10-23 シャノンのフォームをコンパクトに（白い枠の中だけ。余白で詰め、文字は小さくしすぎない（ユーザー指摘）：項目名は本文と同じ大きさ・説明は15px。入力欄の高さ44px・入力の文字16px＝スマホで勝手に拡大されない大きさ） ── */
.form-card .smpForm .ss_field,.form-card .smpForm .ss_enquete_field{padding:var(--s-8) var(--s-12)}
.form-card .smpForm .ss_form_title,.form-card .smpForm .ss_enquete_title{margin-bottom:var(--s-4);font-size:var(--fs-small);line-height:1.5} /* 10-23 ユーザー：フォームの中の文字だけ小さく */
.form-card .smpForm input[type=text],.form-card .smpForm input[type=email],.form-card .smpForm input[type=tel],.form-card .smpForm select{height:44px;font-size:16px}
.form-card .smpForm textarea{height:96px;min-height:0;font-size:16px}
.form-card .smpForm .ss_rightComment,.form-card .smpForm .ss_bottomComment,.form-card .smpForm .ss_leftComment{font-size:var(--fs-xs);line-height:1.5;color:var(--c-text)}
.form-card .smpForm #ss_name .ss_grid{flex-wrap:nowrap;gap:var(--s-8)}
.form-card .smpForm #ss_name .ss_input{flex:1}
.form-card .form-policy{padding:var(--s-16) 0 0;font-size:var(--fs-small);line-height:1.7}
.form-card .form-policy>div:first-child{font-size:var(--fs-body) !important}
.form-card .form-policy>div{margin-top:var(--s-4) !important;line-height:1.7 !important}
@media(max-width:760px){.form-card .smpForm .ss_field,.form-card .smpForm .ss_enquete_field{padding:var(--s-8)}}
.form-card .form-policy a{color:var(--c-blue);text-decoration:underline}
/* 2026-10-23 お問い合わせは文章を書くので、フォームの列を広く（480→520px）。左の列が狭くなりすぎないよう、PCの広い画面（1201px以上）だけ */
@media(min-width:1201px){.p-contact .detail,.p-trial .detail{--w-form:520px}.p-contact .grid--2>*{padding-left:var(--s-16);padding-right:var(--s-16)}} /* 左の窓口のカードは左右の余白を 24→16px にして、見出し「デモ・無料トライアル」を1行に保つ */
/* 2026-10-23 フォームの縦をさらに詰める（ユーザー）：入力欄のまわりの行の高さ（32px）が作っていたすき間をなくす・説明は入力欄のすぐ下・姓／名は入力欄の左に・項目の上下の余白 8→6px・最初の項目の上の余白 20→8px・入力欄の高さはPCだけ 44→40px（スマホは指で押すので44pxのまま） */
.form-card .smpForm .ss_input{line-height:1.4}
.form-card .smpForm .ss_rightComment,.form-card .smpForm .ss_bottomComment{display:block;margin:var(--s-2,2px) 0 0}
.form-card .smpForm #ss_name .ss_input{display:flex;align-items:center;gap:var(--s-4)}
.form-card .smpForm #ss_name .ss_leftComment{flex:none;margin:0}
.form-card .smpForm #ss_name input{flex:1;min-width:0}
.form-card .smpForm .ss_field,.form-card .smpForm .ss_enquete_field{padding-top:6px;padding-bottom:6px}
.form-card .smpForm .ss_visitor_form>.ss_field:first-child{margin-top:var(--s-8)}
@media(min-width:761px){.form-card .smpForm input[type=text],.form-card .smpForm input[type=email],.form-card .smpForm input[type=tel],.form-card .smpForm select{height:40px}}
/* ── 2026-10-23 フォームを目立たせる（ユーザー「フォームが目立たない」）：白い枠に上の紺の帯と影・入力欄の枠線を濃く・行の灰色の縞をやめる・送信ボタンをサイトの申し込みボタンと同じオレンジで幅いっぱいに ── */
.form-card:has(.smpFormWrapper){background:var(--c-bg);border:1px solid var(--c-line)} /* 枠は薄い青の面・入力欄は白で浮かせる。上の紺の帯と影は「ぎらつく」のでやめた（10-23 ユーザー） */
.form-card .smpForm .ss_field,.form-card .smpForm .ss_enquete_field{background:transparent !important}
.form-card .smpForm input[type=text],.form-card .smpForm input[type=email],.form-card .smpForm input[type=tel],.form-card .smpForm select,.form-card .smpForm textarea{border:1px solid #A9BFCF;border-radius:var(--r-s);padding-left:var(--s-12);padding-right:var(--s-12);background:var(--c-white)}
.form-card .smpForm input:focus,.form-card .smpForm select:focus,.form-card .smpForm textarea:focus{outline:2px solid var(--c-blue);outline-offset:0;border-color:var(--c-blue)}
.form-card .smpForm .ss_btnArea input[type=button],.form-card .smpForm .ss_btnArea input[type=submit]{display:block;width:100%;min-width:0;height:56px;padding:0 var(--s-24);border:0;border-radius:var(--r-s);background:var(--c-navy);color:var(--c-white);font-size:var(--fs-body);font-weight:700;cursor:pointer} /* 10-23 オレンジ→紺（落ち着いた色に） */
.form-card .smpForm .ss_btnArea input[type=button]:hover,.form-card .smpForm .ss_btnArea input[type=submit]:hover{background:var(--c-navy-deep);opacity:1}
/* 2026-10-23 「個人情報の取り扱いについて」を送信ボタンの上に（ユーザー：すべてのフォームに必要）。この文はCMSのチャンク form_privacy_policy_message で、シャノンのフォームの「後ろ」に出る。
   シャノンのフォームの中身は変えられないので、フォームを包む箱を見た目の上だけ「無いもの」（display:contents）として並べ直し、送信ボタンの箱を一番最後に回す。HTMLの並び・送信の仕組みは変わらない。本番で確認済み（10/23）
   ★前提：スニペット smp_form_tag が、個人情報の文（.form-policy）を .smpFormWrapper の「直下」に置いていること。置き場所を変えるとこの並べ替えは効かなくなり、文はボタンの下に戻る（壊れはしない）。辞書の smp_form_tag・form_privacy_policy_message にも記載 */
.form-card .smpFormWrapper{display:flex;flex-direction:column}
.form-card .smpFormWrapper>.smpForm,.form-card .smpForm form,.form-card .smpForm .ss_container,.form-card .smpForm .ss_contents{display:contents}
.form-card .smpFormWrapper>.form-policy{order:2;margin-top:var(--s-16);padding:var(--s-16);border-radius:var(--r-s)}
.form-card .smpForm .ss_btnArea{order:3}
/* 2026-10-23 入力エラーの表示（「! 必ず入力してください」）が出たとき、氏名・郵便番号のように横に並べている欄で入力欄が潰れていた → エラーの文を1行目、項目名と入力欄を2行目に折り返す */
.form-card .smpForm .ss_input:has(> .ss_error_msg){flex-wrap:wrap;row-gap:var(--s-4)}
.form-card .smpForm .ss_input > .ss_error_msg{flex:1 1 calc(100% - 32px);margin-left:var(--s-4)}
.form-card .smpForm .ss_input > .ss_warning_label{flex:none;align-self:center}
/* 郵便番号はエラーの文を入力欄の左に1行で（入力欄が短いので）。2つの欄が横に入りきらないときは2行に */
.form-card .smpForm #ss_zip .ss_grid{flex-wrap:wrap;row-gap:var(--s-4)}
.form-card .smpForm #ss_zip .ss_input:has(> .ss_error_msg){flex-wrap:nowrap}
.form-card .smpForm #ss_zip .ss_input > .ss_error_msg{flex:none;white-space:nowrap;margin-right:var(--s-4)}
/* 2026-10-23 送信が終わったら「個人情報の取り扱いについて」を隠す（ユーザー）。シャノンは送信が終わると、フォームを自分の仕組みの名前 <div class="ss_complete_message"> の箱に書き換える（シャノンの embedded_form.js で確認。完了メッセージの文面はその中）。それが白い枠の中にあるときだけ隠す。
   目印はシャノンの仕組みの名前だけにした（SMPの管理画面で書く完了メッセージ側の名前 .form-thanks は、管理画面で文面を直すと変わりうるので使わない）。白い枠（.form-card）の中なら文の置き場所に関係なく効く。効かなくなっても文が残るだけ */
.form-card:has(.ss_complete_message) .form-policy{display:none}