/* 会社HPの静的ページ（/business/・/service-list/、2便目で /ai/）の共通の見た目。
 * 正本：_shared/css/common.css。直したら zsh _tools/sync_shared.sh で各フォルダの css/ に写す（写しは直接直さない）
 * 決まり：art-director「2026-10-05_新しいページのトーンの決まり.md」＋v3の上書き
 *   角は写真・箱8px／ボタン6px、影なし、罫線は1pxの#DDDDDDだけ、緑#0F7945＋黄#FFF200は1画面1か所、段の地は白、写真は3:2・現場の写真だけ
 *   新しい絵・アイコン・線画は入れない。/government/ の金の線はここに入れない
 * スマホの上書き（@media）はファイルの最後（後に書いた方が勝つ）。ページだけの見た目は各フォルダの css/page.css
 */
:root{
  --green:#0F7945;      /* 主色：ボタン・リンク・細い線 */
  --yellow:#FFF200;     /* 差し色：1画面1か所だけ（マーカー・札）。上に白文字を置かない */
  --ink:#1A1A1A;        /* 見出し */
  --text:#555555;       /* 本文（会社HPの本文色） */
  --sub:#666666;        /* 補足 */
  --line:#DDDDDD;       /* 罫線1px */
  --r-box:8px; --r-btn:6px;
  --gap-section:120px;
  --font:"Zen Kaku Gothic New","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px}
body{font-family:var(--font);color:var(--text);background:#fff;font-size:16px;line-height:1.8;letter-spacing:.05em;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:var(--green)}
ul,ol{list-style:none}
p+p{margin-top:.9em}
.wrap{max-width:1100px;margin:0 auto;padding:0 40px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;z-index:100;background:#fff;padding:8px 12px}
:focus-visible{outline:3px solid var(--green);outline-offset:2px}
h1,h2,h3,p,li,dd,summary,b,.t,.when{word-break:auto-phrase}
h1,h2,h3{text-wrap:balance;color:var(--ink);font-weight:700}
h1{font-size:34px;line-height:1.5;letter-spacing:.08em}
h2{font-size:28px;line-height:1.5;letter-spacing:.08em}
h3{font-size:20px;line-height:1.6;letter-spacing:.06em}

/* 差し込み待ちの印（公開の前に全部消す。data-slot で数える） */
.tbd{outline:1px dashed #B5B5B5;outline-offset:4px}
.tbd__label{display:inline-block;font-size:12px;line-height:1.5;color:#5F4B00;background:#FFF6CC;padding:2px 8px;border-radius:4px;letter-spacing:.02em;font-weight:400;vertical-align:middle}

/* ---------- ヘッダー（会社HP v3と同じ：白地・ロゴ・メニュー5つ＋相談する。スマホは固定しない） ---------- */
header.hd{border-bottom:1px solid var(--line);background:#fff;position:sticky;top:0;z-index:40}
.hd .wrap{display:flex;align-items:center;height:72px;max-width:1200px}
.hd__logo{display:inline-flex;align-items:center;min-height:44px}
.hd__logo img{height:26px;width:auto}
.hd nav{margin-left:auto;display:flex;gap:28px;font-size:15px}
.hd nav a{color:var(--text);text-decoration:none;padding:12px 0}
.hd nav a:hover{color:var(--green)}
.hd .btn{margin-left:28px;height:44px;padding:0 22px;font-size:15px}
.crumb{font-size:13px;color:var(--sub);padding:16px 0 0}
.crumb a{color:var(--sub);display:inline-flex;align-items:center;min-height:44px}

/* ---------- ボタン ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:56px;padding:0 28px;border-radius:var(--r-btn);
  font:700 16px/1.4 var(--font);letter-spacing:.06em;white-space:nowrap;border:1px solid var(--green);text-decoration:none;cursor:pointer}
.btn.main{background:var(--green);color:#fff}
.btn.sub{background:#fff;color:var(--green)}
.btn:hover{opacity:.88}
.btn--wide{width:100%}
.textlink{display:inline-flex;align-items:center;min-height:44px;font-weight:700;text-decoration:none}

/* ---------- 段 ---------- */
section.blk{padding-top:var(--gap-section)}
.blk-head{margin-bottom:48px}
.blk-head .lead{margin-top:16px;max-width:720px}

/* ---------- 共通の相談部品（#consult。ページの最後に1回だけ） ---------- */
#consult{padding-bottom:var(--gap-section)}
.cs-head{text-align:center;margin-bottom:48px}
.cs-head p{margin-top:12px}
.people-head{max-width:720px;margin:0 auto 0;font-size:16px;font-weight:700;color:var(--ink);padding-bottom:12px}
.people-sub{max-width:720px;margin:0 auto 12px;font-size:14px}
/* 部品A：相談を受ける人（1〜3人で崩れない。いまは荻野さん1人＝data-n="1"） */
.people{display:grid;gap:0 48px;margin:0 auto;border-top:1px solid var(--line)}
.people[data-n="1"]{grid-template-columns:1fr;max-width:720px}
.people[data-n="2"]{grid-template-columns:1fr 1fr;max-width:960px}
.people[data-n="3"]{grid-template-columns:repeat(3,1fr);max-width:1020px}
.p{display:grid;grid-template-columns:112px 1fr;gap:6px 24px;padding:28px 0;align-content:start}
.p.no-ph{grid-template-columns:1fr}
.p .ph{grid-row:span 2;width:112px;height:112px;border-radius:50%;object-fit:cover}
.people[data-n="3"] .p{grid-template-columns:88px 1fr}
.people[data-n="3"] .p .ph{width:88px;height:88px}
.p .name{font-size:22px;font-weight:700;color:var(--ink);line-height:1.4;align-self:end}
.p .name small{display:block;font-size:13px;font-weight:400;color:var(--sub);letter-spacing:.1em}
.p .role{font-size:14px;color:var(--text)}
.p .bio{grid-column:1 / -1;font-size:15px;margin-top:10px}
.p .word{grid-column:1 / -1;color:var(--ink);border-left:2px solid var(--green);padding-left:16px;margin-top:12px}
/* 部品B：流れ3つ */
.flow{display:grid;grid-template-columns:repeat(3,1fr);max-width:960px;margin:56px auto 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.flow li{padding:20px 16px 20px 0;color:var(--ink);font-weight:700}
.flow li + li{padding-left:24px;border-left:1px solid var(--line)}
.flow .no{color:var(--green);margin-right:8px}
.flow-note{max-width:960px;margin:12px auto 0;font-size:14px}
/* 部品C：箱（資料が無いページは1つを中央に、最大480px） */
.boxes{display:grid;gap:24px;margin:40px auto 0}
.boxes[data-n="1"]{grid-template-columns:1fr;max-width:480px}
.boxes[data-n="2"]{grid-template-columns:1fr 1fr;max-width:960px}
.box{border:1px solid var(--line);border-radius:var(--r-box);padding:28px}
.box .when{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:16px}
.box .what{font-size:13px;color:var(--sub);margin-top:12px}
.sub-links{text-align:center;font-size:14px;margin-top:24px}

/* ---------- フッター（文字だけ。罫線1px） ---------- */
.ft{background:#fff;color:var(--text);padding:0 0 40px}
.ft__row{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:32px}
.ft__name a{color:var(--green);font-weight:700;font-size:16px;letter-spacing:.06em;text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.ft__nav{display:flex;flex-wrap:wrap;gap:0 28px}
.ft__nav a{color:var(--text);text-decoration:none;font-size:14px;display:inline-flex;align-items:center;min-height:44px}
.ft__nav a:hover{color:var(--green)}
.ft__copy{font-size:12px;color:var(--sub);margin-top:16px;letter-spacing:.06em}

/* ---------- スマホの下の帯（スマホだけ。hidden で始める） ---------- */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:50;background:#fff;border-top:1px solid var(--line);padding:8px 20px max(8px,env(safe-area-inset-bottom))}
.sticky[hidden]{display:none !important}

/* =========================================================
 * スマホ（820px以下）。必ずこのファイルの最後に置く
 * ========================================================= */
@media (max-width:820px){
  .wrap{padding:0 20px}
  header.hd{position:static}
  html{scroll-padding-top:16px}
  section.blk{padding-top:80px}
  .hd .wrap{height:60px}
  .hd__logo img{height:22px}
  .hd nav{display:none}
  .hd .btn{margin-left:auto;height:44px;padding:0 16px;font-size:14px;width:auto}
  h1{font-size:26px}
  h2{font-size:22px;letter-spacing:.04em}
  h3{font-size:18px}
  .btn{width:100%}
  .hd .btn{width:auto}
  .blk-head{margin-bottom:32px}
  .cs-head{text-align:left;margin-bottom:32px}
  .people[data-n="2"],.people[data-n="3"]{grid-template-columns:1fr}
  .p,.people[data-n="3"] .p{grid-template-columns:88px 1fr;gap:4px 16px;padding:24px 0;border-bottom:1px solid var(--line)}
  .p.no-ph{grid-template-columns:1fr}
  .p .ph,.people[data-n="3"] .p .ph{width:88px;height:88px}
  .flow{grid-template-columns:1fr;margin-top:32px;border-bottom:0}
  .flow li,.flow li + li{padding:14px 0;border-left:0;border-bottom:1px solid var(--line)}
  .boxes[data-n="2"]{grid-template-columns:1fr;gap:16px}
  .box{padding:20px}
  .sub-links{text-align:left}
  /* 帯の高さ（56＋上下の余白）分、フッターの下をあける */
  .ft{padding-bottom:calc(112px + env(safe-area-inset-bottom))}
  .ft__row{flex-direction:column;align-items:flex-start;gap:4px;padding-top:24px}
  .ft__nav{gap:0 20px}
}
@media (min-width:821px){
  .sticky{display:none !important}
}