/* ============================================================
   direction.css — システムディレクター アサインサービス LP (/about_direction) 2026-09 作り直し
   独自トークン (--d-*)。site.css / machiit.css は読み込まない (LP は自己完結、site-spec §1)。
   紙 (#F4F6FA) と墨 (#0C1226) はトップと同値、書体もトップと同じ (Zen Kaku Gothic New + Inter)。

   方針 (plan 2026-09-21):
   ・「昼の neu」。地は紙のみ、夜は #solution の帯 1 箇所だけ
   ・差し色は藍 (#2458A6)。帯の工程線の現在地・リンク下線・フォーカスリングに限定。小さい文字には使わない
   ・面カードは導入実績のカルテだけ。番号は「アサインまでの流れ」だけ。動きはユーザー操作への応答だけ
   ・罫は通常罫 (--d-line) が既定。強罫 (--d-line-strong) はセクション境界とカルテの見出し下だけ

   計測の命名規約 (GTM GTM-MQLPFT4 の実測、2026-09-21):
   ・id が "cta_" で始まるクリック → GA4 cta_machiit + Google 広告コンバージョン (街の IT 屋さん専用)
   ・id が "cta"  で始まるリンククリック → GA4「LPボタンクリック」(button_click = id)
   → この LP の CTA は必ず "cta-direction-*" (ハイフン)。"cta_" を使うと街の IT 屋さんの広告 CV を汚す
   ============================================================ */

:root{
  --d-paper:#F4F6FA;
  --d-paper-deep:#E8EDF5;
  --d-ink:#0C1226;
  --d-body:#2B3550;      /* paper 上 11.6:1 */
  --d-2nd:#49556E;       /* 6.9:1 */
  --d-line:#D6DCE7;
  --d-line-strong:#B7C0D1;
  --d-blue:#2458A6;      /* paper 上 6.3:1 */
  --d-night:#0C1226;
  --d-night-2:#0A0F19;
  --d-night-ink:#D7E1EF; /* 夜面上 14:1 */
  --d-night-sub:#9DACC2;
  --d-ease:cubic-bezier(.25,.6,.3,1);
  --d-max:72rem;
  --d-measure:40rem;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:80px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  background:var(--d-paper); color:var(--d-body);
  font-family:'Zen Kaku Gothic New','Hiragino Sans','Noto Sans JP','Yu Gothic UI',system-ui,sans-serif;
  font-size:1rem; line-height:1.9; -webkit-font-smoothing:antialiased;
  /* 和文組版 4 行: machiit.css 34〜37 行と同値 (ページごとに折り返しが変わらないように) */
  font-feature-settings:'palt';
  line-break:strict; word-break:normal; overflow-wrap:anywhere;
}
p, li, dd, dt, summary, figcaption{text-wrap:pretty}
h1, h2, h3{color:var(--d-ink); font-feature-settings:'palt'; letter-spacing:.02em; text-wrap:balance}
.num, .proc li span{font-family:'Inter','Helvetica Neue',Arial,sans-serif; font-variant-numeric:tabular-nums; letter-spacing:0}
a{color:inherit; text-decoration-color:var(--d-blue); text-underline-offset:4px; text-decoration-thickness:1px}
:focus-visible{outline:2px solid var(--d-blue); outline-offset:3px}
.wrap{max-width:var(--d-max); margin:0 auto; padding:0 24px}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip:focus{position:fixed; top:8px; left:8px; z-index:20; width:auto; height:auto; clip:auto; padding:8px 12px; background:var(--d-paper); color:var(--d-ink); border:1.5px solid var(--d-ink); border-radius:6px}

/* ---------- ボタン ---------- */
.btn{
  display:inline-block; padding:13px 26px; border-radius:6px; border:1.5px solid var(--d-ink);
  background:var(--d-ink); color:#fff; font-weight:500; font-size:.9375rem; letter-spacing:.04em;
  text-decoration:none; line-height:1.4; transition:background .2s var(--d-ease), color .2s var(--d-ease);
}
.btn:hover{background:#1B2A4A; border-color:#1B2A4A}
.btn-secondary{background:transparent; color:var(--d-ink)}
.btn-secondary:hover{background:#E8EDF5; border-color:var(--d-ink)}
.btn:active{transform:translateY(1px)}
.btn-row{display:flex; flex-wrap:wrap; gap:12px 16px; margin-top:32px}

/* ---------- ヘッダー ---------- */
.d-head{
  position:sticky; top:0; z-index:10; background:rgba(244,246,250,.94); backdrop-filter:saturate(1.2) blur(6px);
  border-bottom:1px solid var(--d-line);
}
.d-head .wrap{display:flex; align-items:center; gap:24px; height:64px}
.d-logo{text-decoration:none; color:var(--d-ink); line-height:1.2; flex:none}
.d-logo b{display:block; font-size:.9375rem; font-weight:700; letter-spacing:.02em; white-space:nowrap}
.d-logo small{display:block; font-size:.6875rem; color:var(--d-2nd); letter-spacing:.06em; margin-top:2px}
.d-nav{display:flex; gap:22px; margin-left:auto; font-size:.875rem}
.d-nav a{text-decoration:none; color:var(--d-2nd); white-space:nowrap}
.d-nav a:hover{color:var(--d-ink); text-decoration:underline}
.d-head-cta{font-size:.875rem; padding:9px 16px; flex:none}
@media (max-width:1023px){ .d-nav{display:none} .d-head-cta{margin-left:auto} }
@media (max-width:639px){ .d-head .wrap{height:auto; min-height:56px; padding-top:8px; padding-bottom:8px; gap:12px} .d-logo{flex:1 1 auto; min-width:0} .d-logo b{white-space:normal; font-size:.8125rem; line-height:1.3} .d-head-cta{padding:8px 12px; font-size:.8125rem} }

/* ---------- セクション共通 ---------- */
.sec{padding:96px 0}
.sec + .sec{border-top:1px solid var(--d-line-strong)}
.sec + .d-band, .d-band + .sec{border-top:0}   /* 夜帯の上下には罫を引かない (同特異性で後勝ち) */
.sec-h{font-size:clamp(1.375rem, 1.2rem + .7vw, 1.75rem); font-weight:700; line-height:1.5}
.sec-intro{margin-top:18px; max-width:var(--d-measure); font-size:1.0625rem; color:var(--d-body)}
.note{font-size:.875rem; color:var(--d-2nd)}
@media (max-width:767px){ .sec{padding:72px 0} }

/* ---------- ヒーロー ---------- */
.d-hero{padding:72px 0 88px; position:relative; overflow:hidden}
.d-hero .wrap{display:grid; grid-template-columns:minmax(0,1fr); gap:40px; align-items:center}
/* PC: 線画を文字の背後まで大きく敷く (CEO 提案 2026-09-21)。文字側は左に寄せ、画像は右上から左下へ紙面に溶かす。
   重なる部分の可読性は、マスクで画像の左側を薄くすることと、文字の紙色のハロー (text-shadow) で確保する */
@media (min-width:1024px){
  .d-hero{padding:88px 0 128px}
  .d-hero .wrap{display:block; position:relative; min-height:600px}
  .hero-copy{position:relative; z-index:1; max-width:34rem}
  .hero-copy .kicker, .hero-copy .d-h1, .hero-copy .lead, .hero-copy .btn-note{
    text-shadow:0 0 2px var(--d-paper), 0 0 8px var(--d-paper), 0 0 16px var(--d-paper), 0 0 28px var(--d-paper), 0 0 48px var(--d-paper), 0 0 72px var(--d-paper);
  }
  /* 画像はヒーロー全幅に敷く (左右に 10% はみ出し、overflow:hidden で切る)。
     文字の背後 (左 45%) にもごく薄く (約 12%) 残し、右へ行くほど濃くする。下端は紙面に溶かす */
  .d-hero .fig{position:absolute; z-index:0; top:-6%; bottom:-4%; left:50%; width:100vw; transform:translateX(-50%); overflow:hidden; pointer-events:none}
  /* 画像はビューポート幅の 1.35 倍にして左へ 8% ずらし、主題 (ホワイトボード) を文字の右側に置く。上下は cover で切る */
  .d-hero .fig img{
    width:100%; height:100%; object-fit:cover; object-position:50% 40%;
    /* 横長版 (左 = 景色、右 = 主題): 左 38% は 22% の濃さ、58% で 100%。景色は線が薄いので文字の背後に置ける */
    -webkit-mask-image:linear-gradient(to right, rgba(0,0,0,.10) 0, rgba(0,0,0,.10) 40%, rgba(0,0,0,.45) 52%, #000 62%), linear-gradient(to bottom, rgba(0,0,0,0) 0, #000 14%, #000 66%, rgba(0,0,0,.35) 90%, rgba(0,0,0,0) 100%);
    -webkit-mask-composite:source-in;
    mask-image:linear-gradient(to right, rgba(0,0,0,.10) 0, rgba(0,0,0,.10) 40%, rgba(0,0,0,.45) 52%, #000 62%), linear-gradient(to bottom, rgba(0,0,0,0) 0, #000 14%, #000 66%, rgba(0,0,0,.35) 90%, rgba(0,0,0,0) 100%);
    mask-composite:intersect;
  }
}
.kicker{font-size:.9375rem; color:var(--d-2nd); letter-spacing:.02em}
.d-h1{
  margin-top:16px;
  font-size:clamp(1.875rem, 1.45rem + 1.7vw, 2.75rem);   /* 30→44px */
  font-weight:700; line-height:1.4; color:var(--d-ink); text-wrap:balance;   /* A/B 両案 (h1 / p) で折り返し条件を揃える */
}
.keep{white-space:nowrap}
.lead{margin-top:24px; max-width:var(--d-measure); font-size:clamp(1.0625rem, 1rem + .3vw, 1.1875rem); line-height:1.95}
.btn-note{margin-top:12px; font-size:.8125rem; color:var(--d-2nd)}
/* h1 の意味の切れ目で折る (「要件定 / 義」のような折れを避ける)。320px 幅では nowrap を解く */
@media (min-width:400px){ .d-h1 .nb{white-space:nowrap} }

/* ---------- 画像 / 空枠 ---------- */
.fig{margin:0}
/* 画像は紙の色を透明化した線画 (WebP alpha)。四角い枠を見せず、端を紙面へ溶かす */
.fig img{
  display:block; width:100%; height:auto;
  -webkit-mask-image:radial-gradient(ellipse 78% 78% at 50% 50%, #000 62%, rgba(0,0,0,0) 100%);
  mask-image:radial-gradient(ellipse 78% 78% at 50% 50%, #000 62%, rgba(0,0,0,0) 100%);
}
.ph{
  aspect-ratio:4/3; border:1px dashed var(--d-line-strong); border-radius:8px; background:var(--d-paper-deep);
  display:flex; align-items:center; justify-content:center; padding:24px; text-align:center;
}
.ph figcaption{font-size:.8125rem; color:var(--d-2nd); max-width:22em}

@media (max-width:1023px){ .d-hero .fig img{aspect-ratio:4/3; object-fit:cover; object-position:82% 50%} }

/* ---------- 2 列一覧 (悩み・価値) ---------- */
.list-2{list-style:none; margin-top:40px; display:grid; grid-template-columns:minmax(0,1fr); gap:0 48px}
@media (min-width:768px){ .list-2{grid-template-columns:repeat(2, minmax(0,1fr))} }
.list-2 li{padding:22px 0 24px; border-top:1px solid var(--d-line)}
.list-2 h3{font-size:1.0625rem; font-weight:700; line-height:1.6}
.list-2 p{margin-top:6px; font-size:.9375rem; color:var(--d-body)}

/* ---------- 帯 (火種は要求定義にある): ページ唯一の夜面 ---------- */
.d-band{
  background:linear-gradient(#0C1226, var(--d-night-2)); color:var(--d-night-ink);
}
.d-band .sec-h, .d-band h3{color:#fff}
.d-band .sec-intro{color:var(--d-night-ink)}
.d-band .btn{background:transparent; color:#fff; border-color:rgba(215,225,239,.6)}
.d-band .btn:hover{background:rgba(215,225,239,.1); border-color:#fff}
.d-band :focus-visible{outline-color:#fff}
/* 工程線: Why → What → How → 開発 → 検収。実テキストの <ol> を横一列に置き、Why/What の区間だけ藍の面 */
.proc-wrap{margin-top:48px}
.proc-cap{font-size:.875rem; color:var(--d-night-sub); margin-bottom:12px}
.proc-cap b{color:#fff; font-weight:500}
.proc{list-style:none; display:flex; align-items:stretch; position:relative; padding:0}
.proc::before{content:''; position:absolute; left:8%; right:8%; top:22px; height:1px; background:rgba(215,225,239,.45)}
.proc li{flex:1 1 0; position:relative; text-align:center; padding:44px 4px 14px; font-size:.9375rem; color:var(--d-night-ink); white-space:nowrap}
.proc li::before{content:''; position:absolute; left:50%; top:16px; width:13px; height:13px; margin-left:-6.5px; border-radius:50%; background:var(--d-night-ink)}
.proc li.is-here{background:var(--d-blue); color:#fff}
.proc li.is-here::before{background:#fff}
.proc li.is-here:first-child{border-radius:6px 0 0 6px}
.proc li.is-here-end{border-radius:0 6px 6px 0}
.proc li span{font-weight:600; font-size:1rem}
@media (max-width:479px){ .proc li{font-size:.8125rem; padding:40px 2px 12px} .proc li span{font-size:.875rem} }
.band-points{list-style:none; margin-top:44px; max-width:var(--d-measure)}
.band-points li{padding:14px 0; border-top:1px solid rgba(215,225,239,.22); font-size:1.0625rem; line-height:1.8}
.band-points li:last-child{border-bottom:1px solid rgba(215,225,239,.22)}
.band-points b{color:#fff; font-weight:700}

/* ---------- 強み (テキスト + 成果物の図) ---------- */
.split{display:grid; grid-template-columns:minmax(0,1fr); gap:40px; margin-top:40px; align-items:start}
@media (min-width:1024px){
  .split{grid-template-columns:minmax(0,1fr) minmax(0,42%); gap:64px; position:relative}
  /* 画像 (縦長) は右列の位置に絶対配置し、セクション下端とその境界線を越えて「導入実績」の見出し行まで被せる (CEO 提案)。
     下端はフェードで紙面に溶かす。導入実績のカルテ (見出しから 176px 下) には掛からない高さに収める */
  .split .fig{position:absolute; right:-3%; top:-48px; width:42%; z-index:1; pointer-events:none}
  .split .fig img{
    -webkit-mask-image:linear-gradient(to bottom, #000 0, #000 58%, rgba(0,0,0,.4) 82%, rgba(0,0,0,0) 100%), radial-gradient(ellipse 95% 100% at 50% 40%, #000 60%, rgba(0,0,0,0) 100%);
    -webkit-mask-composite:source-in;
    mask-image:linear-gradient(to bottom, #000 0, #000 58%, rgba(0,0,0,.4) 82%, rgba(0,0,0,0) 100%), radial-gradient(ellipse 95% 100% at 50% 40%, #000 60%, rgba(0,0,0,0) 100%);
    mask-composite:intersect;
  }
}
.list-1{list-style:none}
.list-1 li{padding:22px 0 24px; border-top:1px solid var(--d-line)}
.list-1 li:last-child{border-bottom:1px solid var(--d-line)}
.list-1 h3{font-size:1.0625rem; font-weight:700; line-height:1.6}
.list-1 p{margin-top:6px; font-size:.9375rem}

/* ---------- 導入実績 (カルテ = ページ唯一の面カード) ---------- */
.karte-grid{display:grid; grid-template-columns:minmax(0,1fr); gap:24px; margin-top:40px}
@media (min-width:900px){ .karte-grid{grid-template-columns:repeat(2, minmax(0,1fr))} }
.karte{background:var(--d-paper-deep); border-radius:8px; padding:32px 32px 28px}
.karte .case-no{font-size:.8125rem; color:var(--d-2nd); letter-spacing:.04em}
.karte h3{margin-top:6px; font-size:1.125rem; font-weight:700; line-height:1.6; padding-bottom:14px; border-bottom:1px solid var(--d-line-strong)}
.karte .setup{margin-top:14px; font-size:.875rem; color:var(--d-2nd)}
.karte dl{margin-top:8px}
.karte dt{margin-top:16px; font-size:.8125rem; font-weight:700; color:var(--d-ink); letter-spacing:.04em}
.karte dd{margin-top:4px; font-size:.9375rem}
.record{margin-top:40px; max-width:var(--d-measure)}
.record dt{font-weight:700; color:var(--d-ink); margin-top:14px; font-size:.9375rem}
.record dd{font-size:.9375rem}
@media (max-width:479px){ .karte{padding:24px 20px} }

/* ---------- アサインプラン (3 列 dl) ---------- */
.plan-grid{display:grid; grid-template-columns:minmax(0,1fr); margin-top:40px; border-top:1px solid var(--d-line)}
@media (min-width:768px){ .plan-grid{grid-template-columns:repeat(3, minmax(0,1fr)); gap:0 40px} }
.plan-grid > div{padding:24px 0 26px; border-bottom:1px solid var(--d-line)}
.plan-grid dt{font-size:1.0625rem; font-weight:700; color:var(--d-ink); line-height:1.6}
.plan-grid dd{margin-top:8px; font-size:.9375rem}
.plan-grid dd + dd{margin-top:6px}

/* ---------- 流れ (順序があるので番号。番号はここだけ) ---------- */
.flow{list-style:none; counter-reset:step; margin-top:40px; max-width:var(--d-measure)}
.flow li{counter-increment:step; position:relative; padding:18px 0 20px 56px; border-top:1px solid var(--d-line)}
.flow li:last-child{border-bottom:1px solid var(--d-line)}
.flow li::before{
  content:counter(step); position:absolute; left:0; top:20px; width:36px; height:36px; border-radius:50%;
  border:1.5px solid var(--d-ink); color:var(--d-ink); display:grid; place-items:center;
  font-family:'Inter','Helvetica Neue',Arial,sans-serif; font-weight:600; font-size:.9375rem;
}
.flow h3{font-size:1.0625rem; font-weight:700; line-height:1.6}
.flow p{margin-top:4px; font-size:.9375rem}

/* ---------- FAQ ---------- */
.faq{margin-top:32px; max-width:48rem}
.faq details{border-top:1px solid var(--d-line)}
.faq details:last-child{border-bottom:1px solid var(--d-line)}
.faq summary{
  list-style:none; cursor:pointer; padding:18px 40px 18px 0; position:relative;
  font-weight:700; color:var(--d-ink); font-size:1rem; line-height:1.7;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:''; position:absolute; right:8px; top:50%; width:9px; height:9px; margin-top:-7px;
  border-right:1.5px solid var(--d-ink); border-bottom:1.5px solid var(--d-ink); transform:rotate(45deg);
  transition:transform .2s var(--d-ease);
}
.faq details[open] summary::after{transform:rotate(225deg); margin-top:-2px}
.faq summary:hover{text-decoration:underline; text-decoration-color:var(--d-blue); text-underline-offset:5px}
.faq .a{padding:0 0 20px; font-size:.9375rem; line-height:1.9}

/* ---------- お問い合わせ (トップと同じ id/class。送信処理は /js/site.js が担う) ---------- */
.n-form{margin-top:40px; max-width:var(--d-measure)}
.f-row{margin-top:22px}
.f-row label{display:block; margin-bottom:8px; font-size:.8125rem; font-weight:500; letter-spacing:.04em; color:var(--d-ink)}
.f-field{
  width:100%; padding:12px 14px; font:inherit; font-size:1rem; line-height:1.6; color:var(--d-ink);
  background:#fff; border:1px solid #7E899E; border-radius:6px;   /* 枠線は白に 3:1 以上 (WCAG 1.4.11)。--d-line-strong では 1.8:1 */
}
.f-field:focus{outline:none; border-color:var(--d-blue); box-shadow:0 0 0 1px var(--d-blue)}
textarea.f-field{resize:vertical; min-height:8.5em}
.send-row{margin-top:32px; display:flex; align-items:center; flex-wrap:wrap; gap:12px 16px}
.btn-send{
  font:inherit; font-size:.9375rem; font-weight:500; letter-spacing:.06em; cursor:pointer;
  color:#fff; background:var(--d-ink); border:1.5px solid var(--d-ink); border-radius:6px; padding:13px 40px;
}
.btn-send:hover{background:#1B2A4A; border-color:#1B2A4A}
.btn-send:disabled{opacity:.55; cursor:default}
.btn-send:disabled:hover{background:var(--d-ink)}
.form-status{margin-top:14px; font-size:.875rem; color:var(--d-ink); min-height:1.5em}
.form-note{margin-top:14px; font-size:.8125rem; color:var(--d-2nd)}
/* honeypot: 視覚・SR・タブ順のすべてから外す (人間は触れない欄) */
.hp-row{position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); border:0; white-space:nowrap}
/* 送信完了: 項目を隠し、文字だけの完了表示 (トップの琥珀の灯はトップ専用の語彙なので使わない) */
.n-form.is-done .f-row, .n-form.is-done .send-row, .n-form.is-done .form-note, .n-form.is-done .form-status{display:none}
.form-done{display:none; margin-top:32px; padding:24px 0; border-top:1px solid var(--d-line); border-bottom:1px solid var(--d-line)}
.form-done:focus{outline:none}
.n-form.is-done .form-done{display:block}
.form-done .fd-h{font-size:1.0625rem; font-weight:700; color:var(--d-ink)}
.form-done .fd-p{margin-top:6px; font-size:.9375rem}

/* ---------- フッター ---------- */
.d-foot{border-top:1px solid var(--d-line-strong); padding:56px 0 40px; font-size:.8125rem; color:var(--d-2nd)}
.legal{display:grid; grid-template-columns:minmax(0,1fr); gap:24px 48px}
@media (min-width:768px){ .legal{grid-template-columns:repeat(2, minmax(0,1fr))} }
.legal h2{font-size:.8125rem; font-weight:700; color:var(--d-ink); margin-top:16px}
.legal h2:first-child{margin-top:0}
.legal p{margin-top:6px; line-height:1.8}
.legal a{color:var(--d-ink)}
.bottom{margin-top:40px; padding-top:20px; border-top:1px solid var(--d-line); display:flex; flex-wrap:wrap; gap:8px 24px; align-items:center; justify-content:space-between}
.bottom nav{display:flex; gap:20px}
.bottom a{color:var(--d-ink); text-decoration:none}
.bottom a:hover{text-decoration:underline}

@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{transition:none !important}
}
@media (forced-colors:active){ .f-field:focus{outline:2px solid Highlight; outline-offset:1px} }
@media print{
  .d-head, .btn-row, .d-head-cta, .send-row{display:none}
  .d-band{background:#fff; color:#000; border-top:1px solid #000; border-bottom:1px solid #000}
  .d-band .sec-h, .d-band h3, .d-band .band-points b, .proc li{color:#000}
  .faq details{border:0}
}