/* 本体HPの共通の見た目。トップ（index.html）の <style> から、色の札・書体・.wrap・.h2・.lead・金の釦・頭・足・節の地を写した物。
 * トップの見た目を変えたら、ここも同じに直す。書体はすべて OS の物で、外へ読みに行かない。 */
:root {
  --ink: #0D1117;
  --sub: #4A5059;
  --mute: #6B7079;
  --paper: #FCFCFB;
  --ground: #F1F1F1;
  --line: #D9D9D6;
  --on-dark: #F4F2EE;
  --on-dark-sub: #C9C7C2;
  --gold-a: #A47948;
  --gold-b: #C5A27C;
  --gold: linear-gradient(90deg, var(--gold-a), var(--gold-b));
  --veil: rgba(13, 17, 23, .72);
  --f-min: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", serif;
  --f-gill: "Gill Sans", "Gill Sans MT", "游ゴシック体", "Yu Gothic", YuGothic, sans-serif;
  --f-body: "游ゴシック体", "Yu Gothic", YuGothic, "Hiragino Sans", sans-serif;
  --wrap: 1180px;
  --pad: 32px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 500 15px/1.9 var(--f-body); letter-spacing: .04em; overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul, ol, figure { margin: 0; padding: 0; }
ul { list-style: none; }
.wrap { max-width: calc(var(--wrap) + var(--pad) * 2); margin: 0 auto; padding: 0 var(--pad); }
.h2 { font: 400 56px/1.25 var(--f-min); letter-spacing: .02em; }
.h2 + .lead { margin-top: 24px; }
.lead { font-size: 15px; color: var(--sub); }
.kw { word-break: keep-all; }
.sp { display: none; }

/* 金の釦：角の無い四角、金のグラデ、細い線の矢印 */
.btn { display: inline-flex; align-items: center; gap: 22px; min-height: 44px; padding: 0 24px; border: 0; background: var(--gold); color: var(--paper); font: 700 14px/1 var(--f-body); letter-spacing: .12em; cursor: pointer; transition: filter .2s; }
.btn:hover { filter: brightness(1.08); }
.btn svg { width: 46px; height: 8px; fill: none; stroke: currentColor; stroke-width: 1; }
/* 2つ目の釦：金の地を持たず、細い線で囲む */
.btn--line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.btn--line:hover { filter: none; background: var(--paper); }

/* ヘッダー：白い地が基本（2026-10-21 古野さん「上部ヘッダーが真っ黒なのが気になる。ベースは白の方が良さそう」）。スマホは右上の釦で行き先を開く */
.hd { position: fixed; inset: 0 0 auto; z-index: 50; display: flex; align-items: center; justify-content: space-between; height: 80px; padding: 0 44px; color: var(--ink); background: rgba(252, 252, 251, .97); box-shadow: 0 1px 0 var(--line); }
.logo { font: 600 22px/1 var(--f-gill); letter-spacing: .04em; }
.logo i { font-style: normal; color: #005EFF; }
.hd nav { display: flex; gap: 30px; font-size: 13px; font-weight: 700; letter-spacing: .1em; }
.hd nav a:hover { color: var(--gold-a); }
.hd nav a[aria-current="page"] { color: var(--gold-a); text-decoration: underline 1px; text-underline-offset: 9px; }
.menu { display: none; width: 44px; height: 44px; margin-right: -5px; padding: 0; border: 0; background: none; cursor: pointer; position: relative; }
.menu::before, .menu::after { content: ""; position: absolute; left: 5px; right: 5px; border-top: 1px solid var(--ink); transition: transform .2s; }
.menu::before { top: 17px; }
.menu::after { top: 26px; }
.hd.is-open .menu::before { transform: translateY(4.5px) rotate(20deg); }
.hd.is-open .menu::after { transform: translateY(-4.5px) rotate(-20deg); }

/* 本物の画面を反転して暗く敷く面（トップの1画面目・最後の帯と同じ作り） */
.screen { position: absolute; inset: 0; }
.screen img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) invert(1) brightness(.9); }
.screen::after { content: ""; position: absolute; inset: 0; background: var(--veil); }

/* ページの頭：明るい地に業務図の画面をうっすら敷く（2026-10-21 暗い面から替えた）。高さは画面の4割前後 */
.ph { position: relative; height: 42vh; min-height: 380px; max-height: 460px; color: var(--ink); background: var(--ground); overflow: hidden; border-bottom: 1px solid var(--line); }
.ph .screen img { object-position: var(--ph-pos, 0 0); filter: grayscale(1); opacity: .32; }
.ph .screen::after { background: linear-gradient(90deg, rgba(241,241,241,.97) 0%, rgba(241,241,241,.92) 50%, rgba(241,241,241,.72) 100%); }
.ph__in { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 64px; }
.ph h1 { font: 400 52px/1.3 var(--f-min); letter-spacing: .06em; }
.ph p { margin-top: 18px; max-width: 40em; font-size: 15px; line-height: 1.9; color: var(--sub); }

/* 節：地は #F1F1F1、白い地の節は .sec--paper */
.sec { padding: 104px 0; background: var(--ground); }
.sec + .sec { border-top: 1px solid #E4E4E1; }
.sec--paper { background: var(--paper); }
.sec__hd { margin-bottom: 56px; }

/* 表：項目と中身の2列。罫線は上下だけ */
.dl { border-bottom: 1px solid var(--line); }
.dl > div { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; padding: 22px 4px; border-top: 1px solid var(--line); }
.dl dt { font-weight: 700; }
.dl dd { margin: 0; color: var(--sub); }

/* お問い合わせの帯：トップの最後の帯と同じ作り */
.cta { position: relative; padding: 130px 0; color: var(--on-dark); text-align: center; overflow: hidden; }
.cta .screen img { object-position: 50% 50%; }
.cta .screen::after { background: radial-gradient(ellipse 62% 75% at 50% 50%, rgba(13, 17, 23, .9), rgba(13, 17, 23, .74)); }
.cta__in { position: relative; z-index: 2; }
.cta p { font: 400 42px/1.6 var(--f-min); letter-spacing: .1em; }
.cta .btn { margin-top: 44px; }
.cta .cta__sub { margin-top: 26px; font: 500 13px/1.8 var(--f-body); letter-spacing: .06em; color: var(--on-dark-sub); }
.cta__sub a { text-decoration: underline 1px; text-underline-offset: 5px; }
.cta__sub a:hover { color: var(--gold-b); }

/* フッター */
.ft { padding: 72px 0 40px; background: var(--paper); font-size: 13px; color: var(--sub); }
.ft__in { display: flex; justify-content: space-between; gap: 40px; }
.ft__name { font-weight: 700; color: var(--ink); font-size: 15px; }
.ft__addr { margin-top: 10px; line-height: 1.9; }
.ft nav { display: grid; grid-template-columns: repeat(3, auto); gap: 10px 48px; align-content: start; font-weight: 700; color: var(--ink); }
.ft nav a:hover { color: var(--gold-a); }
.ft small { display: block; margin-top: 56px; font: 400 12px/1 var(--f-gill); letter-spacing: .08em; color: var(--mute); }

@media (max-width: 1100px) {
  .hd nav { gap: 20px; }
}
@media (max-width: 760px) {
  :root { --pad: 20px; }
  body { font-size: 14px; }
  .sp { display: inline; }
  .pc { display: none; }
  .h2 { font-size: 36px; }
  .hd { height: 64px; padding: 0 20px; }
  .menu { display: block; }
  .hd nav { display: none; position: absolute; top: 64px; left: 12px; right: 12px; flex-direction: column; gap: 0; padding: 8px 20px; background: var(--paper); color: var(--ink); border-radius: 4px; box-shadow: 0 16px 36px -12px rgba(0, 0, 0, .5); font-size: 15px; }
  .hd nav a { padding: 14px 0; border-top: 1px solid var(--line); }
  .hd nav a:first-child { border-top: 0; }
  .hd nav a:hover { color: var(--gold-a); }
  .hd nav a[aria-current="page"] { color: var(--gold-a); }
  .hd.is-open nav { display: flex; }
  .ph { height: 40vh; min-height: 320px; max-height: 380px; }
  .ph__in { padding-bottom: 44px; }
  .ph h1 { font-size: 32px; line-height: 1.4; letter-spacing: .04em; }
  .ph p { margin-top: 12px; font-size: 13.5px; }
  .sec { padding: 72px 0; }
  .sec__hd { margin-bottom: 36px; }
  .dl > div { grid-template-columns: 1fr; gap: 4px; padding: 18px 2px; }
  .cta { padding: 110px 0; }
  .cta p { font-size: 23px; letter-spacing: .06em; }
  .ft__in { flex-direction: column; }
  .ft nav { grid-template-columns: repeat(2, auto); justify-content: start; gap: 10px 32px; }
}

/* en */
/* 英語のページ（en/）。見出しは明朝でなく、トップの英字の書体（Gill Sans）。本文は英字の読みやすい OS の書体。字間は英字に合わせて詰める */
html[lang="en"] { --f-min: var(--f-gill); --f-body: "Helvetica Neue", Helvetica, Arial, "游ゴシック体", "Yu Gothic", YuGothic, sans-serif; }
html[lang="en"] body { letter-spacing: .005em; line-height: 1.75; }
html[lang="en"] .h2, html[lang="en"] .ph h1, html[lang="en"] .cta p { letter-spacing: .01em; }
html[lang="en"] .h2 { line-height: 1.15; }
html[lang="en"] .btn { letter-spacing: .06em; }
html[lang="en"] .hd nav { letter-spacing: .04em; }
html[lang="en"] .ft__addr { line-height: 1.75; }

/* en の記事：本文は元のまま。読む幅を絞り、見出しは Gill Sans。日本語の記事（news/*・agent-cases/*）も同じ札の名前を使うので、en の中だけに効かせる */
html[lang="en"] .ph--art h1 { font-size: 40px; line-height: 1.3; max-width: 22em; }
html[lang="en"] .ph--art p { font: 400 15px/1.6 var(--f-gill); letter-spacing: .06em; }
html[lang="en"] .art { padding: 88px 0 110px; background: var(--paper); }
html[lang="en"] .art .wrap > * { max-width: 760px; }
html[lang="en"] .art-body > p { margin-top: 20px; font-size: 16px; line-height: 1.9; color: var(--sub); }
html[lang="en"] .art-body > p:first-child { margin-top: 0; color: var(--ink); }
html[lang="en"] .art-body strong { color: var(--ink); }
html[lang="en"] .art-body a { color: var(--ink); font-weight: 700; text-decoration: underline 1px; text-underline-offset: 4px; }
html[lang="en"] .art-body a:hover { color: var(--gold-a); }
html[lang="en"] .art-body h2 { margin: 56px 0 0; padding-bottom: 12px; border-bottom: 1px solid var(--line); font: 400 26px/1.4 var(--f-min); letter-spacing: .01em; }
html[lang="en"] .art-body ul { margin-top: 18px; border-bottom: 1px solid var(--line); }
html[lang="en"] .art-body ul li { padding: 11px 2px; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.8; color: var(--sub); }
html[lang="en"] .art-body .info-box { margin-top: 24px; }
html[lang="en"] .art-body .info-table { width: 100%; border-collapse: collapse; border-bottom: 1px solid var(--line); }
html[lang="en"] .art-body .info-table th, html[lang="en"] .art-body .info-table td { padding: 16px 4px; border-top: 1px solid var(--line); text-align: left; vertical-align: top; font-size: 15px; line-height: 1.7; }
html[lang="en"] .art-body .info-table th { width: 140px; font-weight: 700; }
html[lang="en"] .art-body .info-table td { color: var(--sub); }
html[lang="en"] .art-body .quote-box { margin-top: 24px; padding: 28px 32px; background: var(--ground); }
html[lang="en"] .art-body .quote-box p { font-size: 16px; line-height: 1.9; }
html[lang="en"] .art-body .quote-box p + p { margin-top: 12px; }
html[lang="en"] .art-cta { margin-top: 72px; display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 36px 40px; background: var(--ground); }
html[lang="en"] .art-cta h3 { font: 400 22px/1.4 var(--f-min); }
html[lang="en"] .art-cta p { margin-top: 8px; font-size: 14px; color: var(--sub); }
html[lang="en"] .art-cta .btn { flex: none; }
html[lang="en"] .back-list { margin-top: 40px; font-size: 14px; font-weight: 700; }
html[lang="en"] .back-list a { text-decoration: underline 1px; text-underline-offset: 5px; }
html[lang="en"] .back-list a:hover { color: var(--gold-a); }
html[lang="en"] .pager { margin-top: 24px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; border-top: 1px solid var(--line); }
html[lang="en"] .pager-card { display: block; padding: 22px 0; }
html[lang="en"] .pager-next { text-align: right; }
html[lang="en"] .pager-label { font: 400 13px/1 var(--f-gill); letter-spacing: .1em; color: var(--gold-a); }
html[lang="en"] .pager-title { margin-top: 8px; font-weight: 700; line-height: 1.6; }
html[lang="en"] a.pager-card:hover .pager-title { color: var(--gold-a); }
html[lang="en"] .pager-date { margin-top: 4px; font: 400 13px/1.4 var(--f-gill); color: var(--mute); }
@media (max-width: 760px) {
  html[lang="en"] .ph--art h1 { font-size: 26px; }
  html[lang="en"] .art { padding: 56px 0 80px; }
  html[lang="en"] .art-body > p { font-size: 15px; }
  html[lang="en"] .art-body h2 { margin-top: 44px; font-size: 22px; }
  html[lang="en"] .art-body .info-table th { width: 96px; }
  html[lang="en"] .art-body .quote-box { padding: 22px 20px; }
  html[lang="en"] .art-cta { flex-direction: column; align-items: flex-start; padding: 28px 22px; gap: 20px; }
  html[lang="en"] .pager { grid-template-columns: 1fr; gap: 0; }
  html[lang="en"] .pager-next { text-align: left; border-top: 1px solid var(--line); }
}
/* 記事・事例・資料のページ（2026-10-20 追加）
 * 頭の下に暗いページの頭が無いページは、頭に最初から暗い面を敷く */
/* メディアのページの2段目：ラボの名前と、その行き先 */
.subnav { margin-top: 80px; background: var(--paper); border-bottom: 1px solid var(--line); }
.subnav__in { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 60px; }
.subnav__name { font: 400 19px/1.4 var(--f-min); letter-spacing: .06em; white-space: nowrap; }
.subnav nav { display: flex; align-items: center; gap: 28px; font-size: 13px; font-weight: 700; letter-spacing: .08em; }
.subnav nav a { white-space: nowrap; }
.subnav nav a:hover { color: var(--gold-a); }
.subnav nav .subnav__cta { padding: 9px 18px; background: var(--gold); color: var(--paper); }
.subnav nav .subnav__cta:hover { color: var(--paper); filter: brightness(1.08); }
/* 足の断り書き（商標など） */
.ft__note { margin-top: 32px; max-width: 760px; font-size: 11.5px; line-height: 1.9; color: var(--mute); }
@media (max-width: 760px) {
  .subnav { margin-top: 64px; }
  .subnav__in { min-height: 52px; gap: 16px; }
  .subnav__name { font-size: 16px; }
  .subnav nav a:not(.subnav__cta) { display: none; }
  .subnav nav .subnav__cta { padding: 8px 14px; font-size: 12px; }
}

/* 記事のページの見出し：トップと同じ明朝400。本文は游ゴシックのまま */
.art-head h1, .art-body h2, .article-page .art-head h1, .article-page .art-body h2, .hero-document-sheet strong, .hero-programs-head, .hero-program strong, .hero-event-copy strong, .idx-head h1, .jz-hero h1, .av-hero h1, .av-ihero h1, .ac-head h1, .art-cta h3, .ac-cta h2 {
  font-family: var(--f-min); font-weight: 400; letter-spacing: .04em;
}
.art-head h1 { line-height: 1.5; }
.art-body h2 { line-height: 1.6; }
/* 帯の下は、頭の高さの分の余白を持たない */
.subnav ~ .art-head, .subnav ~ .av-hero, .subnav ~ main .av-ihero, .subnav ~ main .jz-hero, .subnav ~ main .idx-head, .subnav ~ .idx-head { padding-top: 56px; }
@media (max-width: 760px) {
  .subnav ~ .art-head, .subnav ~ .av-hero, .subnav ~ main .av-ihero, .subnav ~ main .jz-hero, .subnav ~ main .idx-head, .subnav ~ .idx-head { padding-top: 36px; }
}
/* 英字の小さな飾り見出しは使わない：共有の札は消し、「Related」は日本語にする */
.a-share-label, .hero-kicker { display: none; }
.related .rl-h { font-size: 0; letter-spacing: 0; }
.related .rl-h::before { content: "関連する記事"; font: 400 22px/1.4 var(--f-min); letter-spacing: .06em; color: var(--ink); }
/* 一覧と絵の中の英字の札（AI Security・Week 1・PROGRAM 01 など）も出さない */
.jz-hero .kicker, .idx-head .kicker, .av-kicker, .ct-en, .kn-stamp, .sj-stamp, .hero-program b, .hero-event-copy small { display: none; }
.ph .ph__meta { margin-top: 10px; font-size: 12.5px; }
.ph .ph__meta span + span { margin-left: 18px; }
/* 色の地の帯（事例の最後の相談）は、トップの最後の帯と同じ暗い面にする */
.ac-cta { position: relative; overflow: hidden; background: var(--ink); color: var(--on-dark); }
.ac-cta::before { content: ""; position: absolute; inset: 0; background: url(/assets/top/cta-map.jpg) 50% 50% / cover; filter: grayscale(1) invert(1) brightness(.9); opacity: .22; }
.ac-cta .inner { position: relative; }
.ac-cta .btn { background: var(--gold); color: var(--paper); border-radius: 0; }
/* 色の地の箱は暗い面にする。釦は角を立てる */
.ac-result h2, .final, aside.map { background: var(--ink); color: var(--on-dark); }
.btn { border-radius: 0; }
/* 一覧のページ：ページの頭のすぐ下に余白を置く。文の多い頭は高さを文に合わせる */
.ph + .ac-filter { margin-top: 64px; }
.ph + main.mh-wrap, .ph + main.container { padding-top: 72px; }
.ph--tall { height: auto; max-height: none; }
.ph--tall .ph__in { padding-top: 150px; }
@media (max-width: 760px) {
  .ph + .ac-filter { margin-top: 40px; }
  .ph + main.mh-wrap, .ph + main.container { padding-top: 44px; }
  .ph--tall .ph__in { padding-top: 110px; }
}
.subnav button.subnav__cta { border: 0; font: inherit; cursor: pointer; }
@media print {
  .hd, .subnav, .ft { display: none; }
}