/* =====================================================================
   サービス詳細の型（保守引き継ぎ・DX・受託開発・SES・自社サービス開発）
   並び：ページの頭 → お悩み → 事例 → 特徴 → 流れ → 料金と体制 → よくあるご質問 → 相談
   見せ方を毎回変える：2 列のリスト → 数字と表 → 挿絵つきの 3 列 → 縦の工程 → 料金の選択肢 → 質問の一覧
   ===================================================================== */

/* ---- お悩み：箱にしない。縦の罫線 1 本で分けた 2 列のリスト。問題の核心だけ太字 ---- */
.wr-grid{display:grid;grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;border-top:1px solid #0b2560}
.wr-col{padding:32px clamp(24px,3vw,40px) 8px}
.wr-col:first-child{padding-left:0}
.wr-col:last-child{padding-right:0}
.wr-col+.wr-col{border-left:1px solid #d6dfec}
.wr-col .h3{display:flex;align-items:center;gap:14px;font-size:clamp(20px,1.7vw,24px)}
.wr-ic{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;background:#eef3fa}
.wr-ic img{width:22px;height:22px}
.wr-col ul{margin:20px 0 0;padding:0;list-style:none}
.wr-col li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:8px;padding:15px 0;border-bottom:1px solid #e2e8f2;color:#3f4a5e;font-size:16px;line-height:1.75}
.wr-col li:last-child{border-bottom:0}
.wr-col li::before{content:"";width:6px;height:6px;margin-top:.7em;background:#dd4f28}
.wr-col .em{color:#0b2560;font-weight:700}
/* 方眼の線と項目の仕切り線が重なって見分けにくいので、この欄だけ方眼を消す（2026-10-29 茗荷さん） */
.bg-paper:has(.wr-grid){background-image:none}

/* ---- 事例：成果を大きく。1 件目は数字の差を大きさで、2・3 件目は「項目名の下に本文」 ---- */
.ex-lead{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);background:#fff;border-radius:2px;color:inherit}
/* 右は濃紺の面なので、右下の角の飾りは箱の外に出す（内側だと濃紺に重なって見える） */
.ex-lead::after{right:-7px;bottom:-7px}
.ex-lead:hover{color:inherit}
.ex-lead-txt{padding:clamp(28px,3.4vw,48px)}
.ex-lead-txt .h3{margin:14px 0 16px;font-size:clamp(22px,2vw,29px);line-height:1.45}
.ex-lead .more{margin-top:28px}
.ex-lead:hover .more .ar{transform:translateX(3px)}
.ex-metric{display:flex;flex-direction:column;justify-content:center;margin:0;padding:clamp(32px,3.4vw,48px);background:#0b2560;color:#fff}
.ex-metric dt{color:rgba(255,255,255,.72);font-size:14px;font-weight:700;letter-spacing:.04em}
.ex-metric dd{margin:0}
.ex-metric .from{display:flex;align-items:center;gap:14px;margin-top:24px;color:rgba(255,255,255,.62);font:700 28px/1 'DM Sans','Noto Sans JP',sans-serif}
.ex-metric .from s{text-decoration-thickness:1.5px}
.ex-metric .from span{color:#ff9c78;font:700 24px/1 'DM Sans'}
.ex-metric .to{display:block;margin-top:12px;font:700 clamp(56px,5.6vw,80px)/1 'DM Sans','Noto Sans JP',sans-serif;letter-spacing:-.03em}
.ex-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));gap:24px;margin-top:24px}
.ex-card{display:flex;flex-direction:column;padding:clamp(28px,3vw,40px);background:#fff;border-radius:2px}
.ex-cat{display:block;margin-top:14px;color:#5c667a;font-size:13.5px;font-weight:700}
.ex-card .h3{margin:6px 0 0;font-size:clamp(20px,1.7vw,24px)}
.ex-card dl{margin:22px 0 0}
.ex-card dl>div{display:grid;grid-template-columns:7em minmax(0,1fr);gap:16px;padding:16px 0;border-top:1px solid #e2e8f2}
.ex-card dt{padding-top:2px;color:#c23f1f;font-size:13px;font-weight:700;letter-spacing:.04em;line-height:1.7}
.ex-card dd{margin:0;color:#3f4a5e;font-size:15px;line-height:1.85}
.ex-card dd.mono{color:#5c667a;font:500 14px/1.8 'DM Sans','Noto Sans JP',sans-serif}
.ex-card .gap{flex:1 0 24px}
.ex-card .more{align-self:stretch;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:14px;min-height:48px;align-items:center;padding:10px 0 6px}
.ex-card .more small{display:block;margin-top:2px;color:#5c667a;font-size:12.5px;font-weight:500;line-height:1.5}

/* ---- 特徴：挿絵は枠に入れず小さく。罫線 → 番号と見出し → 本文 ---- */
.ft3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 40px}
.ft3-ill{display:flex;align-items:flex-end;height:128px}
.ft3-ill img{width:auto;height:100%;max-width:180px;object-fit:contain;object-position:left bottom}
.ft3-head{display:flex;align-items:baseline;gap:14px;min-height:calc(24px + 3 * 1.5em);margin-top:28px;padding-top:24px;border-top:1px solid #0b2560;font-size:clamp(20px,1.6vw,23px)}
.ft3-no{flex:none;color:#c23f1f;font:700 15px/1 'DM Sans',sans-serif;letter-spacing:.06em}
.ft3 .h3{font-size:clamp(20px,1.6vw,23px)}
.ft3 .txt{margin-top:16px;font-size:15.5px}
.ft3 .txt+.txt{margin-top:12px}

/* ---- 流れ：左に見出しと結論（1〜3か月）、右に縦の一本道。期間は右端に文字で揃える ---- */
.st-wrap{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:48px clamp(48px,6vw,96px);align-items:start}
.st-head{position:sticky;top:120px}
.st-head .sec-lead{max-width:none;margin-top:24px}
.st-total{margin-top:32px;padding-top:24px;border-top:1px solid #0b2560;color:#0b2560}
.st-total span{display:block;font-size:13.5px;font-weight:700}
.st-total b{display:block;margin-top:10px;font:700 clamp(40px,3.6vw,52px)/1 'DM Sans','Noto Sans JP',sans-serif;letter-spacing:-.02em}
.st-list{--sz:48px;margin:0;padding:0;list-style:none;border-top:1px solid #c9d5e8}
.st-item{position:relative;display:grid;grid-template-columns:var(--sz) minmax(0,1fr) 9em;column-gap:24px;padding:24px 0;border-bottom:1px solid #c9d5e8}
.st-mark{display:grid;place-items:center;width:var(--sz);height:var(--sz);border-radius:50%;background:#fff;color:#0b2560;font:700 15px/1 'DM Sans',sans-serif}
.st-item:last-child .st-mark{background:#0b2560;color:#fff}
.st-body{padding-top:8px}
.st-name{margin:0;color:#0b2560;font-family:'Zen Kaku Gothic New',sans-serif;font-weight:900;font-size:clamp(18px,1.5vw,20px);line-height:1.5}
.st-body p{margin:8px 0 0;color:#3f4a5e;font-size:16px;line-height:1.85}
.st-dur{margin:0;padding-top:12px;text-align:right;color:#0b2560;font:700 15px/1.4 'DM Sans','Noto Sans JP',sans-serif;white-space:nowrap}
.st-dur small{display:block;margin-bottom:4px;color:#5c667a;font-size:11.5px;font-weight:500}

/* ---- 料金と体制 ---- */
.pr-wrap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,3vw,40px);align-items:start}
.pr-box{border:1px solid #d6dfec;border-radius:2px;overflow:hidden;background:#fff}
/* 入口の費用（初期調査・引き継ぎ作業）だけ紺 */
.pr-entry{display:grid;grid-template-columns:1fr 1fr;background:#06153a;color:#fff}
.pr-entry>div{padding:28px clamp(24px,2.6vw,36px)}
.pr-entry>div+div{border-left:1px solid rgba(255,255,255,.14)}
.pr-k{display:block;font-size:14px;font-weight:700;line-height:1.6}
.pr-v{display:block;margin-top:10px;font:700 clamp(30px,2.6vw,36px)/1.1 'DM Sans','Noto Sans JP',sans-serif;letter-spacing:-.01em}
.pr-v small{font-size:14px;font-weight:500;margin-left:4px}
.pr-entry .pr-v.free{color:#ff9c78}
.pr-entry .pr-n{margin:12px 0 0;color:rgba(255,255,255,.75);font-size:14px;line-height:1.8}
.pr-monthly{padding:28px clamp(24px,2.6vw,36px) 32px}
.pr-sub{margin:0;color:#0b2560;font-size:15px;font-weight:700}
.pr-opts{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.pr-opt{padding:24px;background:#faf8f4;border-radius:2px}
.pr-opt .pr-v{font-size:clamp(28px,2.4vw,34px)}
.pr-opt .pr-k,.pr-opt .pr-v{color:#0b2560}
.pr-opt .pr-n{margin:12px 0 0;color:#3f4a5e;font-size:14px;line-height:1.8}
.pr-term{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 24px;margin:0;padding:20px clamp(24px,2.6vw,36px);border-top:1px solid #e2e8f2}
.pr-term dt{color:#5c667a;font-size:14px}
.pr-term dd{margin:0;color:#0b2560;font-size:16px;font-weight:700}
.pr-foot{margin:14px 0 0;color:#5c667a;font-size:14px;line-height:1.8}
/* 体制：いちばん大事な「2 名以上」を先頭で大きく */
.sp-box{padding:clamp(28px,3vw,40px);background:#faf8f4;border-radius:2px}
.sp-box h3{margin:0;color:#0b2560;font-family:'Zen Kaku Gothic New',sans-serif;font-size:20px;font-weight:900}
.sp-key{margin:20px 0 0;padding-bottom:24px;border-bottom:1px solid #0b2560;color:#0b2560;font-family:'Zen Kaku Gothic New',sans-serif;font-size:clamp(22px,1.8vw,26px);font-weight:900;line-height:1.5}
.sp-key small{display:block;margin-bottom:6px;color:#5c667a;font-family:'Noto Sans JP',sans-serif;font-size:13px;font-weight:500}
.sp-box dl{margin:0}
.sp-box dl>div{padding:16px 0;border-bottom:1px solid #e2e8f2}
.sp-box dt{color:#5c667a;font-size:13px;line-height:1.6}
.sp-box dd{margin:4px 0 0;color:#0b2560;font-size:16px;font-weight:700;line-height:1.7}
/* 対応できる技術：箱にせず文字の一覧で */
.tech{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:24px clamp(48px,6vw,96px);margin-top:clamp(64px,7vw,88px);padding-top:clamp(40px,4vw,56px);border-top:1px solid #0b2560}
.tech h3{margin:0;color:#0b2560;font-family:'Zen Kaku Gothic New',sans-serif;font-size:clamp(20px,1.7vw,24px);font-weight:900}
.tech-l p{margin:14px 0 0;color:#3f4a5e;font-size:15.5px;line-height:1.9}
.tech dl{margin:0}
.tech dl>div{display:grid;grid-template-columns:15em minmax(0,1fr);gap:4px 24px;padding:16px 0;border-bottom:1px solid #e2e8f2}
.tech dl>div:first-child{padding-top:0}
.tech dt{color:#0b2560;font-size:14.5px;font-weight:700;line-height:1.8}
.tech dd{margin:0;color:#3f4a5e;font:500 15px/1.8 'DM Sans','Noto Sans JP',sans-serif}
.tech .tech-note{margin:16px 0 0;color:#5c667a;font-size:14px}

/* ---- ここから、ページごとに中身の形が違うための部品（2026-10-20 追加） ---- */
/* ページの頭 2 段目の右に、要点の数字ではなく一覧を置く（開発実績など） */
.ph-list{margin:0;padding:0;list-style:none;border-top:1px solid #0b2560}
.ph-list-h{margin:0 0 12px;color:#5c667a;font-size:13px;font-weight:700}
.ph-list li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;padding:14px 0;border-bottom:1px solid #d6dfec;color:#0b2560;font-size:15.5px;font-weight:700;line-height:1.6}
.ph-list li small{align-self:center;color:#5c667a;font-size:12.5px;font-weight:500;white-space:nowrap}
/* 挿絵なしの番号つき 2 列（特徴が 4〜5 個のとき） */
.nl2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(40px,5vw,72px);border-top:1px solid #0b2560}
.nl2>article{display:grid;align-content:start;grid-template-columns:56px minmax(0,1fr);column-gap:16px;padding:32px 0 36px;border-bottom:1px solid #d6dfec}
.nl2-no{color:#0b2560;font:700 32px/1 'DM Sans',sans-serif;letter-spacing:-.03em}
.nl2 .h3{align-self:start;padding-top:2px} /* 1 行と 2 行の見出しで、上の線をそろえる */
.nl2 .txt{grid-column:2;margin-top:14px}
.nl2 .txt+.txt{margin-top:10px}
/* 2 本柱（「伴走」と「共創」など、考え方を言葉で立てる） */
.pl2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.pl2>article{padding:clamp(32px,3.6vw,52px);background:#fff;border-radius:2px}
.pl2-word{display:block;color:#0b2560;font-family:'Zen Kaku Gothic New',sans-serif;font-weight:900;font-size:clamp(36px,3.9vw,56px);line-height:1;letter-spacing:.02em}
.pl2-word::after{content:"";display:block;width:40px;height:3px;margin-top:22px;background:#dd4f28}
.pl2 .h3{margin-top:20px;font-size:clamp(18px,1.4vw,20px)}
.pl2 .txt{margin-top:16px}
/* 「無料で始められること」の 2 枚。札「無料」をつける */
.fr2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.fr2>article{display:flex;flex-direction:column;padding:clamp(28px,3.2vw,44px);background:#fff;border-radius:2px}
.fr2-tag{align-self:flex-start;display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:2px;background:#dd4f28;color:#fff;font-size:13px;font-weight:700;letter-spacing:.06em}
.fr2 .h3{margin-top:18px}
.fr2 .txt{margin-top:14px}
.fr2 ul{margin:20px 0 0;padding:16px 0 0;list-style:none;border-top:1px solid #e2e8f2}
.fr2 li{display:grid;grid-template-columns:16px minmax(0,1fr);gap:8px;padding:6px 0;color:#3f4a5e;font-size:15px;line-height:1.75}
.fr2 li::before{content:"";width:5px;height:5px;margin-top:.75em;background:#0b2560}
.fr2 .note{margin:12px 0 0;color:#5c667a;font-size:14px}

@media (max-width:999px){
  .ex-lead{grid-template-columns:1fr}
  .ft3{grid-template-columns:1fr;gap:48px}
  .ft3>article{display:grid;grid-template-columns:120px minmax(0,1fr);column-gap:32px}
  .ft3-ill{grid-row:1/span 3;height:auto;align-items:flex-start}
  .ft3-ill img{width:120px;height:auto}
  .ft3-head{margin-top:0;min-height:0}
  .st-wrap{grid-template-columns:1fr}
  .st-head{position:static}
  .pr-wrap{grid-template-columns:1fr}
  .tech{grid-template-columns:1fr}
  .nl2,.pl2,.fr2{grid-template-columns:1fr}
}
@media (max-width:699px){
  .wr-grid{grid-auto-flow:row;grid-template-columns:1fr}
  .wr-col,.wr-col+.wr-col{padding:24px 0 4px;border-left:0}
  .wr-col+.wr-col{border-top:1px solid #d6dfec;margin-top:16px}
  .wr-col li{font-size:15.5px;padding:13px 0}
  .ex-lead-txt,.ex-metric{padding:24px 20px 28px}
  .ex-card{padding:24px 20px}
  .ex-card dl>div{grid-template-columns:1fr;gap:4px;padding:14px 0}
  .ex-card dd{font-size:15px;line-height:1.8}
  .ex-metric .to{font-size:56px}
  .ex-metric .from{font-size:24px}
  .ft3>article{grid-template-columns:minmax(0,1fr) 72px;column-gap:16px;padding-top:20px;border-top:1px solid #0b2560}
  .ft3-ill{grid-column:2;grid-row:1;height:auto}
  .ft3-ill img{width:72px}
  .ft3-head{grid-column:1;grid-row:1;flex-direction:column;gap:10px;padding-top:0;border-top:0}
  .ft3 .txt{grid-column:1/-1}
  /* 流れ：工程名 → 期間 → 説明の順に詰める */
  .st-list{--sz:32px}
  .st-item{grid-template-columns:var(--sz) minmax(0,1fr);column-gap:14px;padding:24px 0}
  .st-mark{grid-row:1/span 3;font-size:12px}
  .st-body{display:contents}
  .st-name{grid-column:2;grid-row:1;align-self:center}
  .st-dur{grid-column:2;grid-row:2;margin:8px 0 0;padding:0;text-align:left;font-size:14px}
  .st-dur small{display:inline;margin:0 8px 0 0}
  .st-body p{grid-column:2;grid-row:3;margin-top:12px;font-size:15px;line-height:1.8}
  .pr-entry{grid-template-columns:1fr}
  .pr-entry>div{padding:22px 20px}
  .pr-entry>div+div{border-left:0;border-top:1px solid rgba(255,255,255,.14)}
  .pr-monthly{padding:22px 20px 24px}
  .pr-opts{grid-template-columns:1fr;gap:12px}
  .pr-term{padding:18px 20px}
  .sp-box{padding:24px 20px}
  .tech dl>div{grid-template-columns:1fr}
  .nl2>article{grid-template-columns:28px minmax(0,1fr);column-gap:12px;padding:24px 0 26px}
  .nl2-no{font-size:20px;padding-top:3px}
  .nl2 .h3{align-self:start;font-size:18px;line-height:1.55}
  .nl2 .txt{grid-column:1/-1;margin-top:16px}
  .pl2>article,.fr2>article{padding:24px 20px 28px}
}