/* ============================================================
   www.simplesystem.co.jp  ── 共通スタイル（第2版）
   ★Codex 指示 20260909-2101 のトークンとタイポグラフィに合わせた。
   コンセプト＝「経営伴走 × 現場で動くプロダクト」。
   ★外部フォント・外部画像は読み込まない。
   ★ゴールドは「人が確認・決定する一点」だけに使う（ボタン地色にはしない）。
   ============================================================ */
:root{
  --navy-900:#06284D; --navy-800:#0A3768; --blue-600:#1769D2;
  --blue-050:#EAF2FB; --gray-050:#F3F6F9; --gray-200:#D9E2EC;
  --gray-600:#52667A; --ink:#12243A; --gold:#B87412;
  --gold-on-navy:#efc990;      /* 濃紺の上で 5.20:1（実測済み） */
  --gold-text:#8f5200;         /* 淡い地の上で 5.80:1（実測済み） */
  --bg:#ffffff;
  --serif:"Hiragino Mincho ProN","Yu Mincho","YuMincho","MS PMincho",serif;
  --sans:"Hiragino Kaku Gothic ProN","Yu Gothic","YuGothic","Meiryo",system-ui,sans-serif;
  --maxw:1160px;
  --shadow:0 18px 45px rgba(6,40,77,.10);
  --shadow-sm:0 6px 18px rgba(6,40,77,.07);
  --r-card:16px; --r-ctrl:9px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
     line-height:1.8;-webkit-text-size-adjust:100%;font-size:16.5px}
img{max-width:100%;height:auto}
a{color:var(--blue-600)}
a:focus-visible,button:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;z-index:100;background:var(--bg);padding:10px 14px;
     border:2px solid var(--navy-800);border-radius:var(--r-ctrl)}

/* ── ヘッダー ───────────────────────────────── */
header.site{position:sticky;top:0;z-index:50;background:var(--bg);
     border-bottom:1px solid var(--gray-200)}
.head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 0}
.brand{display:flex;align-items:baseline;gap:10px;text-decoration:none;color:var(--ink)}
.brand b{font-size:20px;letter-spacing:.02em;color:var(--navy-900)}
.brand span{font-size:11.5px;color:var(--gray-600);letter-spacing:.08em}
nav.site ul{display:flex;gap:24px;list-style:none;margin:0;padding:0}
nav.site a{color:var(--ink);text-decoration:none;font-size:15px;padding:6px 0;
     border-bottom:2px solid transparent}
nav.site a:hover,nav.site a[aria-current="page"]{border-bottom-color:var(--gold)}
.menu-btn{display:none;font:inherit;font-size:15px;padding:10px 16px;background:var(--bg);
     color:var(--navy-900);border:1px solid var(--gray-600);border-radius:var(--r-ctrl);
     cursor:pointer}
#menu[hidden]{display:none}

/* ── 濃紺の帯 ─────────────────────────────── */
.band{background:linear-gradient(160deg,var(--navy-800) 0%,var(--navy-900) 100%);
      color:#fff;padding:92px 0 108px;position:relative;overflow:hidden}
.band .wrap{position:relative;z-index:2;max-width:var(--maxw)}
.band .inner{max-width:660px}
.band .eyebrow{font-size:13.5px;letter-spacing:.16em;color:var(--gold-on-navy);margin:0 0 20px}
.band h1{font-family:var(--serif);font-size:46px;line-height:1.42;margin:0 0 22px;
     font-weight:600;letter-spacing:.01em}
.band p{color:#cfdcec;margin:0;max-width:36em;font-size:16.5px}
.band .actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.band-art{position:absolute;right:calc(50% - 616px);top:50%;transform:translateY(-50%);
     width:520px;max-width:42vw;pointer-events:none;z-index:1}
.band-art svg{width:100%;height:auto;display:block}
.band.short{padding:74px 0 84px}
.tilecard{background:#fff;border-radius:var(--r-card);overflow:hidden;box-shadow:var(--shadow)}
.tilecard svg{display:block;width:100%}
.band.short h1{font-size:38px}

/* ── 節 ─────────────────────────────────── */
section{padding:104px 0}
section.tint{background:var(--gray-050)}
h2.sec{font-size:27px;margin:0 0 10px;color:var(--navy-900);line-height:1.5;
     letter-spacing:.01em}
h2.sec + .lead{margin:0 0 36px;color:var(--gray-600);font-size:16px;max-width:44em}
h3.sub{font-size:19px;margin:44px 0 14px;color:var(--navy-900)}
.mincho{font-family:var(--serif);font-size:20px;line-height:1.95;color:var(--ink)}

/* ── ボタン ──────────────────────────────── */
.btn{display:inline-block;font:inherit;font-size:15.5px;padding:14px 26px;
     border-radius:var(--r-ctrl);text-decoration:none;border:1px solid transparent;cursor:pointer}
.btn-primary{background:#fdf6ec;color:var(--gold-text);border-color:var(--gold)}
.btn-primary:hover{background:#fbeeda}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn-ghost:hover{background:rgba(255,255,255,.10)}
.btn-navy{background:var(--blue-600);color:#fff;border-color:var(--blue-600)}
.btn-navy:hover{background:var(--navy-800)}

/* ── 帯の直後に重ねる白カード ─────────────── */
.overlap{margin-top:-64px;position:relative;z-index:3}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{background:var(--bg);border:1px solid var(--gray-200);border-radius:var(--r-card);
      padding:26px 24px;box-shadow:var(--shadow)}
.card h3{margin:8px 0 10px;font-size:19px;color:var(--navy-900);line-height:1.5}
.card p{margin:0;color:var(--gray-600);font-size:15px}
.card .more{display:inline-block;margin-top:16px;font-size:15px;text-decoration:none;
     border-bottom:1px solid currentColor}
.cardico{margin:0}
.ico{width:56px;height:54px;display:block}

/* ── 事例カード（★visual tile が主役） ─────── */
.case-list{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;list-style:none;
     padding:0;margin:0}
.case{background:var(--bg);border:1px solid var(--gray-200);border-radius:var(--r-card);
     overflow:hidden;box-shadow:var(--shadow-sm);display:flex;flex-direction:column}
.case .tile{margin:0;background:var(--gray-050);border-bottom:1px solid var(--gray-200)}
.case .tile svg{display:block;width:100%;height:auto}
.case .body{padding:22px 24px 24px}
.case .meta{font-size:12.5px;color:var(--gray-600);margin:0 0 10px;display:flex;gap:10px;
     flex-wrap:wrap;align-items:center}
.case h3{margin:0 0 10px;font-size:19px;line-height:1.55}
.case h3 a{color:var(--navy-900);text-decoration:none}
.case h3 a:hover{text-decoration:underline}
.case p{margin:0;font-size:15px;color:var(--ink)}
.case .go{display:inline-block;margin-top:16px;font-size:15px;text-decoration:none;
     color:var(--blue-600)}
.case .go:hover{text-decoration:underline}
.label{display:inline-block;font-size:11.5px;letter-spacing:.08em;padding:3px 9px;
     border-radius:4px;border:1px solid var(--gray-600);color:var(--gray-600);background:var(--bg)}
.label.real{border-color:var(--blue-600);color:var(--navy-900);background:var(--blue-050)}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 30px;padding:0;list-style:none}
.chips a{display:inline-block;font-size:14px;padding:8px 16px;border-radius:999px;
     border:1px solid var(--gray-600);color:var(--gray-600);text-decoration:none;background:var(--bg)}
.chips a:hover{background:var(--blue-050);border-color:var(--blue-600);color:var(--navy-900)}
.featured{background:var(--gray-050);border:1px solid var(--gray-200);border-radius:20px;
     padding:34px 32px;margin:0 0 34px}
.featured .mincho{margin:0 0 16px}
.featured-art{margin:18px 0 6px}

/* ── 事例の詳細 ─────────────────────────── */
.detail{display:grid;grid-template-columns:1fr 320px;gap:44px;align-items:start}
.facts{background:var(--gray-050);border:1px solid var(--gray-200);border-radius:var(--r-card);
     padding:24px;position:sticky;top:92px}
.facts dt{font-size:12.5px;color:var(--gray-600);margin-top:16px}
.facts dt:first-child{margin-top:0}
.facts dd{margin:3px 0 0;font-size:15px}
.flow{list-style:none;padding:0;margin:0;counter-reset:step}
.flow li{position:relative;padding:0 0 24px 52px;counter-increment:step}
.flow li::before{content:counter(step);position:absolute;left:0;top:0;width:32px;height:32px;
     border-radius:50%;background:var(--blue-600);color:#fff;display:grid;place-items:center;
     font-size:15px}
.flow li b{display:block;color:var(--navy-900)}
.note{font-size:14px;color:var(--gray-600);border-left:3px solid var(--gray-200);
     padding:4px 0 4px 16px;margin:22px 0}

/* ── 図 ─────────────────────────────────── */
figure{margin:26px 0}
figcaption{font-size:14px;color:var(--gray-600);margin-top:10px}
.figflow svg,.figsteps svg,.figproduct svg{width:100%;height:auto;display:block}
.figflow{max-width:640px}
.figsteps{max-width:900px;margin:30px 0 34px}
.figsteps .narrow{display:none}
.brand b{white-space:nowrap}
.figproduct{max-width:660px}

/* ── よくある質問 ───────────────────────── */
.faq details{border-bottom:1px solid var(--gray-200);padding:18px 0}
.faq summary{cursor:pointer;font-size:16px;color:var(--navy-900)}
.faq p{margin:12px 0 0;color:var(--gray-600);font-size:15px}

/* ── 締めの帯・フッター ─────────────────── */
.cta{background:var(--navy-900);color:#fff;padding:80px 0}
.cta h2{font-family:var(--serif);font-size:28px;margin:0 0 14px;font-weight:600}
.cta p{color:#cfdcec;margin:0 0 28px;font-size:16px}
footer.site{background:var(--bg);border-top:1px solid var(--gray-200);padding:44px 0;
     font-size:14.5px}
footer.site ul{list-style:none;display:flex;flex-wrap:wrap;gap:20px;padding:0;margin:0 0 18px}
footer.site a{color:var(--ink);text-decoration:none}
footer.site a:hover{text-decoration:underline}
footer.site small{color:var(--gray-600)}

/* ── 表 ─────────────────────────────────── */
.tablewrap{overflow-x:auto}
table.doc{border-collapse:collapse;width:100%;font-size:15px;min-width:520px}
table.doc th,table.doc td{border:1px solid var(--gray-200);padding:13px 15px;text-align:left;
     vertical-align:top}
table.doc th{background:var(--gray-050);color:var(--navy-900);white-space:nowrap}

/* ── 画面幅 ─────────────────────────────── */
@media (max-width:1080px){
  .band-art{position:static;transform:none;width:100%;max-width:540px;margin:34px 0 0}
  .band{padding-bottom:96px}
  .band .inner{max-width:none}
}
@media (max-width:860px){
  .cards{grid-template-columns:1fr}
  .case-list{grid-template-columns:1fr}
  .detail{grid-template-columns:1fr}
  .facts{position:static}
}
@media (max-width:640px){
  body{font-size:16px}
  .wrap{padding:0 20px}
  nav.site{position:absolute;left:0;right:0;top:100%;background:var(--bg);
     border-bottom:1px solid var(--gray-200);box-shadow:var(--shadow)}
  nav.site ul{flex-direction:column;gap:0;padding:6px 20px 14px}
  nav.site li{border-top:1px solid var(--gray-200)}
  nav.site a{display:block;padding:14px 0}
  .menu-btn{display:inline-block}
  header.site .head{position:relative}
  section{padding:64px 0}
  .band{padding:56px 0 78px}
  .band h1{font-size:32px;line-height:1.46}
  .band.short h1{font-size:28px}
  .band p{font-size:16px}
  .overlap{margin-top:-56px}
  h2.sec{font-size:23px}
  .mincho{font-size:18px}
  .cta{padding:56px 0}
  .cta h2{font-size:24px}
  .featured{padding:24px 20px}
  /* ★狭い画面は縮小でなく組み直す */
  .figsteps .wide{display:none}
  .figsteps .narrow{display:block}
  .band h1{font-size:28.5px;letter-spacing:0}
  .brand span{display:none}
}

/* ★★★ Codex 20260909-2231 —— featured / journey / その他の事例 / 微調整 */

/* ② featured: ★左 45% に大きな tile、★★右 55% に課題・作ったもの・変化・CTA。
      ★★★白カードを濃紺帯へ 28px 重ねる（★空白が主役に見えないようにする） */
.featured{display:grid;grid-template-columns:45% 55%;gap:0;align-items:stretch;
  background:#fff;border:1px solid var(--gray-200);border-radius:20px;
  padding:0;overflow:hidden;margin:-28px 0 44px;
  box-shadow:0 18px 45px rgba(6,40,77,.10)}
.featured .featured-art{margin:0;background:var(--gray-050);
  border-right:1px solid var(--gray-200);display:flex;align-items:center}
.featured .featured-art svg{display:block;width:100%;height:auto}
.featured .featured-body{padding:30px 32px 28px}
.featured .meta{margin:0 0 8px;font-size:13px;color:var(--gray-600);
  display:flex;gap:10px;align-items:center}
.featured .feat-h{font-size:35px;line-height:1.28;margin:0 0 16px;
  color:var(--navy-900);letter-spacing:-.01em}
.featured .feat-k{margin:0 0 12px;font-size:16.5px;line-height:1.75}
.featured .feat-k b{display:block;font-size:12.5px;letter-spacing:.08em;
  color:var(--gray-600);font-weight:600;margin-bottom:2px}
.featured .feat-cta{margin:22px 0 0}

/* ① その他の事例: ★★画像なしのコンパクトな一覧 */
.more{margin:26px 0 8px;border-top:1px solid var(--gray-200);padding-top:18px}
.more>summary{cursor:pointer;font-weight:600;color:var(--navy-800);
  font-size:16px;padding:6px 0}
.case-index{list-style:none;padding:0;margin:12px 0 0;
  display:grid;grid-template-columns:repeat(2,1fr);gap:2px 26px}
.case-index li{border-bottom:1px solid var(--gray-200)}
.case-index a{display:block;padding:11px 0 4px;font-size:16px;
  text-decoration:none;color:var(--navy-800)}
.case-index .ix{display:block;padding-bottom:9px;font-size:13px;
  color:var(--gray-600)}

/* ③ journey canvas: ★★2 つの業務の場面を比べる */
.journey{margin:22px 0 8px}
.journey svg{display:block;width:100%;height:auto}
.journey figcaption{margin-top:10px;font-size:14px;color:var(--gray-600)}

@media (max-width:860px){
  /* ★★★390px は縮小ではなく組み直す */
  .featured{grid-template-columns:1fr;margin:-24px 0 34px}
  .featured .featured-art{border-right:0;border-bottom:1px solid var(--gray-200)}
  .featured .featured-body{padding:22px 20px 24px}
  .featured .feat-h{font-size:26px;line-height:1.32;margin-bottom:14px}
  .case-index{grid-template-columns:1fr}
  /* ★hero h1 は 31.5px（★指示: 31〜32px） */
  .band h1{font-size:31.5px;letter-spacing:0}
  /* ★★実寸 390px で情報として見えない薄い線・文字は出さない */
  .journey figcaption{font-size:13.5px}
}

/* ★desktop のヘッダーの社名を 12% 大きく（★指示: 10〜15%） */
@media (min-width:861px){
  .brand b{font-size:22.4px}
}
/* ── ★帯の見出しが右の図に潜る問題は、★2 か所で受けています（対象が別） ──
   ①ここ: `.inner` を持つ帯（トップ・サービス・事例詳細）＝入れ物ごと幅を詰める
   ②下: `.inner` を持たない帯（/cases/ など）＝見出し・リード・ボタンに上限を置く
   ★同じ症状に 2 つの規則が並ぶので、片方だけ直しても効かないことがあります。
   ★まとめるなら「全部の帯に .inner を付けて ① に寄せる」——ただし
     受入済みの版に手を入れることになるので、いまは触りません。 */
/* ★★★詳細ページの h1 が右の図の下へ潜り込んでいたので、★★幅を詰めます */
@media (min-width:861px){
  .band .inner{max-width:560px}
}

/* ★帯に図がある画面で、見出しの右端が図に重なっていた（1280px で 184px 重なり・実測）。
   ★見出し・リード・ボタンの領域に上限を置き、図と分ける。★390px の縦積みは変えない。 */
.band h1,.band .eyebrow,.band p,.band .actions{max-width:600px}
@media (max-width:1080px){
  .band h1,.band .eyebrow,.band p,.band .actions{max-width:none}
}

/* ★見出しを意味のまとまりで折り返す。★<br> で固定すると、広い画面でも必ず割れてしまい、
   コピーした文字列にも改行が入る。★「割ってはいけない語」を包んで、そこだけ割らせない。 */
.nb{white-space:nowrap}