/* ==============================================================
   sub.css — 下層ページ共通
   パンくず / ページ見出し / 事業ページ / 役員ページ / 導入事例ページ
   ============================================================== */

:root { --maxw: 1180px; }

/* ---------- パンくず・ページ見出し ---------- */

.crumbs { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: clamp(18px,3vw,30px) 0 0; font-size: 12px; color: var(--ink-3); }
.crumbs li::after { content: "／"; margin-left: 8px; }
.crumbs li:last-child::after { content: ""; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--cta); }

.page-head { padding-block: clamp(22px,3vw,34px) clamp(30px,4vw,52px); }
.page-head .num { font-family: var(--en); font-size: 12px; font-weight: 700; letter-spacing: .26em; color: var(--cta); margin: 0 0 12px; }
.page-head h1 { font-size: clamp(27px, 4.6vw, 48px); font-weight: 900; line-height: 1.3; margin: 0 0 10px; word-break: auto-phrase; text-wrap: balance; }
/* リード文は2〜3行で収まる短い文なので、行の長さを揃えたほうが収まりがよい。
   max-width は .article と同じ考えで em にしている（66ch だと全角36字ほどしかない）。 */
/* リード文は本文と同じ組み方（両端そろえ）にする。
   text-wrap: balance を併せると行が短くそろえられ、足りないぶんが字間に配られて
   「会 社 の 紹 介 に」のように伸びる。スマホ幅で顕著だったため使わない。 */
.page-head .lead { max-width: 42em; color: var(--ink-2); margin: 0; }

.cover { position: relative; aspect-ratio: 21 / 8; background-position: center 42%; background-size: cover; border-block: 1px solid var(--line); }

section { padding-block: clamp(38px, 5.5vw, 74px); }
section.band { background: var(--band); }

h2.sec { display: flex; align-items: baseline; gap: 12px; font-size: clamp(19px,2.6vw,26px); font-weight: 700; margin: 0 0 22px; padding-bottom: 12px; border-bottom: 2px solid var(--ink); }

.back-row { margin: 26px 0 0; }

/* ---------- 事業ページ ---------- */

.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: clamp(16px,2.6vw,28px); }
.cols .panel { background: var(--paper); border: 1px solid var(--line); padding: 24px 22px; display: flex; flex-direction: column; gap: 12px; }
section.band .cols .panel { border-color: #d6cfc0; }
.cols .panel h3 { font-size: 15px; font-weight: 700; letter-spacing: .04em; margin: 0 0 4px; padding-bottom: 10px; border-bottom: 2px solid var(--cta); }
.cols .panel ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 11px; }
.cols .panel li { position: relative; padding-left: 19px; font-size: 14.5px; color: var(--ink-2); line-height: 1.8; }
.cols .panel li::before { content: ""; position: absolute; left: 0; top: .66em; width: 8px; height: 8px; background: var(--cta); }

.flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.flow li { background: var(--paper); padding: 22px 20px; display: flex; flex-direction: column; gap: 7px; }
.flow .s { font-family: var(--en); font-size: 10.5px; font-weight: 700; letter-spacing: .18em; color: var(--cta); }
.flow h4 { font-size: 16px; font-weight: 700; margin: 0; }
.flow p { margin: 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.8; }

.faq { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.faq li { padding: 18px 0; border-bottom: 1px solid var(--line); }
.faq h3 { font-size: 15.5px; font-weight: 700; margin: 0 0 6px; display: flex; gap: 10px; }
.faq h3::before { content: "Q."; font-family: var(--en); color: var(--cta); }
.faq p { margin: 0; font-size: 14.5px; color: var(--ink-2); padding-left: 26px; }

/* 事業ページから導入事例への導線 */
.to-cases {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 28px; align-items: center;
  padding: clamp(20px, 2.6vw, 28px); border: 1px solid var(--line); background: var(--paper);
}
.to-cases p { margin: 0; font-size: 14.5px; color: var(--ink-2); }
@media (max-width: 640px) { .to-cases { grid-template-columns: 1fr; } }

/* ---------- 役員ページ ---------- */

.exec { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: clamp(24px,4vw,52px); align-items: start; }
.portrait { position: relative; aspect-ratio: 3 / 3.6; background-position: center 22%; background-size: cover; background-color: var(--band); border: 1px solid var(--line); }
.exec .role { font-family: var(--en); font-size: 11px; font-weight: 700; letter-spacing: .22em; color: var(--cta); margin: 0 0 8px; }
.exec h1 { font-size: clamp(28px,4.4vw,44px); font-weight: 900; margin: 0 0 4px; line-height: 1.3; }
/* 引用は行の長さをそろえたいので balance を使う。p なので既定では両端そろえに
   なるが、balance と併せると字間が伸びるため、ここだけ左そろえに戻す。 */
.pull { font-size: clamp(18px,2.4vw,26px); font-weight: 700; line-height: 1.7; margin: 0 0 24px; padding-left: 18px; border-left: 4px solid var(--cta); text-wrap: balance; text-align: left; }
.msg { margin: 0; color: var(--ink-2); font-size: 15px; }
.msg + .msg { margin-top: 16px; }

.others { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.others li { background: var(--paper); display: flex; }
.others a { flex: 1; display: block; padding: 20px; text-decoration: none; color: inherit; transition: background .25s; }
.others a:hover { background: #fffdf8; }
.others .r { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; color: var(--ink-3); display: block; margin-bottom: 4px; }
.others .n { font-size: 17px; font-weight: 700; }
.others a:hover .n { color: var(--cta); }

@media (max-width: 820px) { .exec { grid-template-columns: 1fr; } .portrait { aspect-ratio: 4 / 3.4; } }

/* ---------- 導入事例ページ ---------- */

.case-head .meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.case-head h1 .no { font-family: var(--en); color: var(--cta); letter-spacing: .01em; }
/* 事例の見出しは「官公庁・自治体向けパッケージ開発（東京・案件規模 数億円）」のように長い。
   ほかのページより一段小さくして、語の途中で折り返さないようにする。 */
.case-head h1 { font-size: clamp(21px, 3.2vw, 34px); line-height: 1.45; }

/* 概要（業界・拠点・規模・体制・期間） */
.facts {
  margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(205px, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
}
.facts > div { background: var(--paper); padding: 18px 20px; display: flex; flex-direction: column; gap: 4px; }
.facts dt { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; color: var(--ink-3); }
.facts dd { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.7; }
/* 業界名は長くなりがちなので、広い画面では2列分を使う */
@media (min-width: 900px) { .facts > div:first-child { grid-column: span 2; } }

/* 課題 → 対応 → 結果 */
/* 上の罫線は見出し（h2.sec）の下線が兼ねる */
.story { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.story li {
  display: grid; grid-template-columns: 150px minmax(0, 1fr);
  gap: clamp(12px, 3vw, 44px); align-items: baseline;
  padding-block: clamp(22px, 3vw, 36px); border-bottom: 1px solid var(--line);
}
.story .k { display: flex; align-items: baseline; gap: 12px; margin: 0; font-size: clamp(17px, 2vw, 21px); font-weight: 700; }
.story .k::before { counter-increment: step; content: "0" counter(step); font-family: var(--en); font-size: 12px; font-weight: 700; letter-spacing: .18em; color: var(--cta); }
.story .v { margin: 0; font-size: clamp(15.5px, 1.7vw, 18px); line-height: 2; color: var(--ink-2); }
.story li.result .v { color: var(--ink); font-weight: 700; }
@media (max-width: 720px) {
  .story li { grid-template-columns: 1fr; gap: 6px; }
}

/* 他の事例 */
.case-others { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.case-others li { display: flex; background: var(--paper); }
.case-others a { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 22px 22px 20px; text-decoration: none; color: inherit; transition: background .25s; }
.case-others a:hover { background: #fffdf8; }
.case-others .meta { display: flex; flex-wrap: wrap; gap: 6px; }
.case-others .t { font-size: 15.5px; font-weight: 700; line-height: 1.6; }
.case-others .t .no { font-family: var(--en); color: var(--cta); }
.case-others .r { font-size: 13.5px; color: var(--ink-2); line-height: 1.8; margin-top: auto; }
.case-others .more { font-family: var(--en); font-size: 11px; font-weight: 700; letter-spacing: .16em; color: var(--cta); display: inline-flex; gap: 8px; }
.case-others .more::after { content: "→"; transition: transform .2s; }
.case-others a:hover .more::after { transform: translateX(5px); }

@media (max-width: 720px) { .cover { aspect-ratio: 16 / 10; } }

/* ---------- 本文ページ（方針・サイトマップ） ---------- */

/* 方針などの本文ページ。広い画面では左に目次、右に本文を置く。
   本文は読みやすい行長（45文字前後）に収め、見出しと左端を揃える。 */
.doc-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(26px, 3.4vw, 56px); }
@media (min-width: 1000px) {
  .doc-layout { grid-template-columns: minmax(190px, 230px) minmax(0, 1fr); }
}

/* 見出しと本文の間が空きすぎないようにする */
section:has(> .doc-layout) { padding-top: clamp(16px, 2vw, 28px); }

.doc-toc { align-self: start; }
@media (min-width: 1000px) { .doc-toc { position: sticky; top: 104px; } }
.doc-toc .toc-h {
  margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line);
  font-size: 12px; font-weight: 700; letter-spacing: .12em; color: var(--ink-3);
}
.doc-toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line); counter-reset: toc; }
.doc-toc li { counter-increment: toc; }
.doc-toc a {
  display: flex; gap: 8px; margin-left: -1px; padding: 7px 0 7px 14px;
  border-left: 2px solid transparent;
  font-size: 13px; line-height: 1.7; color: var(--ink-2); text-decoration: none;
  transition: color .2s, border-color .2s;
}
.doc-toc a::before { content: counter(toc, decimal-leading-zero); font-family: var(--en); font-size: 10.5px; color: var(--ink-3); padding-top: 3px; }
.doc-toc a:hover { color: var(--cta); border-left-color: var(--cta); }
.doc-toc a:hover::before { color: var(--cta); }

.doc { max-width: 46em; }
.doc .intro { margin: 0 0 clamp(26px, 3vw, 38px); color: var(--ink-2); }
.doc section { padding-block: 0; }
.doc h2 {
  font-size: clamp(16px, 1.9vw, 19px); font-weight: 700; line-height: 1.6;
  margin: clamp(28px, 3.4vw, 40px) 0 12px; padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.doc h2:first-of-type { margin-top: 0; }
.doc p { margin: 0 0 14px; color: var(--ink-2); }
.doc p:last-child { margin-bottom: 0; }
.doc .signed {
  margin-top: clamp(30px, 4vw, 44px); padding-top: 18px; border-top: 1px solid var(--line);
  font-size: 13.5px; color: var(--ink-3);
}

.sitemap { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: clamp(14px, 1.8vw, 22px); align-items: start; }
.sitemap section { background: var(--paper); border: 1px solid var(--line); padding: 24px 22px; }
.sitemap h2 { font-size: 15px; font-weight: 700; margin: 0 0 12px; padding-bottom: 10px; border-bottom: 2px solid var(--cta); }
.sitemap ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.sitemap a { font-size: 14.5px; text-decoration: none; border-bottom: 1px solid transparent; }
.sitemap a:hover { color: var(--cta); border-bottom-color: var(--cta); }
.sitemap .ext::after { content: "↗"; font-family: var(--en); font-size: 11px; margin-left: 6px; color: var(--ink-3); }

/* ---------- お問い合わせフォーム ---------- */

/* 入力 → 確認 → 完了 の現在地 */
.steps { list-style: none; display: flex; flex-wrap: wrap; gap: 1px; margin: 0 0 clamp(26px, 3vw, 36px); padding: 0; background: var(--line); border: 1px solid var(--line); }
.steps li { flex: 1; min-width: 110px; background: var(--paper); color: var(--ink-3); padding: 12px 14px; font-size: 13px; font-weight: 700; display: flex; align-items: baseline; gap: 8px; }
.steps li .s { font-family: var(--en); font-size: 11px; letter-spacing: .14em; }
.steps li[aria-current="step"] { background: var(--ink); color: var(--paper); }
.steps li[aria-current="step"] .s { color: var(--cta-soft); }

.form { max-width: 820px; }
.form .row { display: grid; grid-template-columns: minmax(180px, 250px) minmax(0, 1fr); gap: 10px 28px; padding: clamp(18px, 2.2vw, 24px) 0; border-bottom: 1px solid var(--line); align-items: start; }
.form .row:first-of-type { border-top: 1px solid var(--ink); }
.form .lb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 700; }
.form .note { display: block; width: 100%; font-size: 12.5px; font-weight: 400; color: var(--ink-3); line-height: 1.7; }
.req, .opt { font-size: 11px; font-weight: 700; letter-spacing: .06em; line-height: 1; padding: 4px 8px; }
.req { background: var(--cta); color: #fff; }
.opt { background: var(--band); color: var(--ink-2); border: 1px solid var(--line); }

.form input[type="text"],
.form input[type="email"],
.form input[type="tel"],
.form textarea {
  width: 100%; font: inherit; font-size: 15px; color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: 0;
  padding: 12px 14px;
  transition: border-color .2s, box-shadow .2s;
}
.form textarea { min-height: 170px; resize: vertical; line-height: 1.9; }
.form input:focus, .form textarea:focus { outline: none; border-color: var(--cta); box-shadow: 0 0 0 3px rgba(194,68,15,.14); }
.form input[aria-invalid="true"], .form textarea[aria-invalid="true"] { border-color: #b3261e; background: #fff7f6; }

.err { display: none; margin: 8px 0 0; font-size: 13px; font-weight: 700; color: #b3261e; }
.err::before { content: "！"; margin-right: 4px; }
.err.is-on { display: block; }

/* ボット除け用。画面にも読み上げにも出さない */
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.agree { display: flex; align-items: flex-start; gap: 12px; margin: clamp(24px, 3vw, 32px) 0 0; padding: 20px 22px; background: var(--band); border: 1px solid var(--line); }
.agree input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--cta); flex: none; }
.agree label { font-size: 14.5px; }
.agree a { font-weight: 700; }

.form-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(26px, 3vw, 36px); }
.form-actions .btn { padding: 15px 30px; font-size: 14px; }
.form-actions button.btn { font-family: inherit; cursor: pointer; }

.form-alert { margin: 0 0 24px; padding: 16px 18px; border: 1px solid #b3261e; background: #fff7f6; color: #8a1d16; font-size: 14px; font-weight: 700; }
.form-alert:not(.is-on) { display: none; }

/* 確認画面 */
.confirm { max-width: 820px; margin: 0; border-top: 1px solid var(--ink); }
.confirm > div { display: grid; grid-template-columns: minmax(180px, 250px) minmax(0, 1fr); gap: 8px 28px; padding: clamp(16px, 2vw, 22px) 0; border-bottom: 1px solid var(--line); }
.confirm dt { font-size: 13.5px; font-weight: 700; color: var(--ink-3); }
.confirm dd { margin: 0; font-size: 15.5px; white-space: pre-wrap; }
.confirm dd:empty::before { content: "（未入力）"; color: var(--ink-3); font-size: 14px; }

/* 送信の設定が入るまでの断り書き */
.stub-note { margin: 0 0 clamp(24px, 3vw, 32px); padding: 16px 18px; border: 1px dashed #b9b2a4; background: #fbf7ea; font-size: 13.5px; color: #7a5c22; }

.done { max-width: 720px; }
.done .lead { font-size: clamp(16px, 2vw, 18px); font-weight: 700; margin: 0 0 18px; }
.done ol { margin: 0 0 26px; padding-left: 1.4em; color: var(--ink-2); font-size: 14.5px; }
.done li { margin-bottom: 8px; }

@media (max-width: 720px) {
  .form .row, .confirm > div { grid-template-columns: 1fr; }
  .form .row { padding-block: 16px; }
  .form-actions .btn { width: 100%; justify-content: center; }
}

/* ---------- お知らせの記事ページ ---------- */

/* 記事ページは「1本の段」にする。見出し・リード文・本文の幅をそろえ、
   読む目線が左右に動かないようにする。
   47字ぶんにしているのは、リード文（46字前後で書く想定）がPCで1行に収まる
   いちばん狭い幅だから。本文の1行が長くなりすぎる手前でもある。 */
.article-head,
section:has(> .wrap > .article) { --article-col: 47em; }

/* 幅の指定は親（.article-head）に置く。em はそれを書いた要素ではなく
   使う要素のフォントサイズで計算されるため、見出し（34px）に max-width: 47em と
   書くと 47×34＝1598px になり、段に収まらない。本文と同じ 15.5px の要素に置く。 */
.article-head { max-width: var(--article-col); }
/* 幅は親で決まっているので、下層ページ共通のリード文の上限は外す */
.article-head .lead { max-width: none; }
.article-head h1 {
  /* 段の幅に収めるため、下層ページの見出し（最大48px）より小さくする。
     20字前後のタイトルが1行に収まる大きさ。長ければ普通に折り返す。 */
  font-size: clamp(25px, 3vw, 34px);
}

/* 見出し・リード文・本文はひと続きの文章なので、あいだを詰める。
   下層ページの既定（見出しと別ブロックが続く前提）のままだと、
   リード文と本文のあいだに100px以上あいて話が切れて見える。
   :has() に対応していないブラウザでは、これまでどおりの間隔になる。 */
.article-head { padding-bottom: clamp(16px, 2vw, 26px); }
section:has(> .wrap > .article) { padding-top: clamp(20px, 2.6vw, 34px); }

.article-head .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 12px; }
.article-head .meta time { font-family: var(--en); font-size: 13px; font-weight: 700; letter-spacing: .06em; color: var(--ink-3); }
.article-head .meta .chip { text-decoration: none; }
.article-head .meta a.chip:hover { border-color: var(--ink-3); }

/* 1行の長さは em で決める。ch は「0」の字幅が基準で、Noto Sans JP では半角ぶんしか
   ないため、68ch と書いても全角37字にしかならず、46字のリード文が「37字＋9字」の
   ように割れていた。1em＝全角1字なので、em なら書いた字数がそのまま出る。
   日本語の本文は全角40字前後が読みやすいとされるので 42em にしている。 */
.article { max-width: var(--article-col, 47em); }
.article h2 {
  font-size: clamp(17px, 2.2vw, 22px); font-weight: 700; margin: clamp(28px, 3.4vw, 40px) 0 12px;
  padding-bottom: 10px; border-bottom: 1px solid var(--line);
}
.article h2:first-child { margin-top: 0; }
.article p { margin: 0 0 1.2em; color: var(--ink-2); line-height: 1.95; }
.article ul, .article ol { margin: 0 0 1.2em; padding-left: 1.4em; color: var(--ink-2); line-height: 1.95; }
.article li { margin-bottom: .4em; }
.article a { color: var(--cta); }

/* 折り返す位置（auto-phrase / strict）と本文の pretty は、付け忘れを防ぐため
   base.css でサイト全体に当てている。ここでは見出しだけ足す。 */
.article h2 { text-wrap: pretty; }

.news-others .t { font-weight: 700; }
.news-others .meta { display: flex; align-items: center; gap: 10px; }
.news-others .meta time { font-family: var(--en); font-size: 12px; font-weight: 700; color: var(--ink-3); }