@charset "UTF-8";
/* ==========================================================================
   サービス（一覧＋3領域の詳細）専用 — 子CC-A
   base.css のトークンだけを使う（新しい色・影・角丸・グラデーションは作らない）
   丸いのは工程表の点だけ（会社概要の沿革の点と同じ扱い）
   ========================================================================== */

/* ---------- 改行の整え（対応ブラウザだけに効く上乗せ。未対応でも表示は崩れない） ----------
   段落は text-wrap: pretty を使わない（WebKit では行が一律に短くなり、右端が不ぞろいに見えるため）。
   段落の最終行が短くならないよう、文面の字数で調整済み（1440／1366／1280／390 で確認）。
   短い項目＝2行の長さをそろえる */
.issue-list li, .faq__q, .first-step__list li, .theme__out, .other__text, .person__text { text-wrap: balance; }
/* 短い項目と題は、語の途中で折り返さない：HTML 側で文節の切れ目に <wbr> を入れてあり（生成時に BudouX で付与）、
   keep-all で <wbr> と句読点でだけ折り返す。Chrome・WebKit とも同じ挙動（長すぎる語は base の overflow-wrap で折れる） */
.issue-list li, .faq__q, .first-step__list li, .theme__out, .other__text, .card__title, .person__text, .flow__term { word-break: keep-all; }
/* SPでは中央寄せの長いリードが読みにくいので左寄せに（このCSSを読むサービスの4ページだけ） */
@media (max-width: 767px) { .lead--center { text-align: left; } }
/* 句の切れ目で改行する <br>：狭い幅で無理に折ると行がそろわないので、幅の広い画面だけで効かせる */
.br-lg, .br-xl { display: none; }
@media (min-width: 1024px) { .br-lg { display: inline; } }
@media (min-width: 1280px) { .br-xl { display: inline; } }

/* ---------- 一覧：3領域を写真と文の左右交互で（行の間は1px罫） ---------- */
.svc-rows { margin-top: 88px; }
.svc-row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: center;
  padding-block: 64px;
}
.svc-row:first-child { padding-top: 0; }
.svc-row:last-child { padding-bottom: 0; }
.svc-row + .svc-row { border-top: 1px solid var(--line); }
.svc-row--rev .svc-row__media { order: 2; }
.svc-row__media { position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: var(--gray-3); }
.svc-row__media img { width: 100%; height: 100%; object-fit: cover; }
.svc-row__en { margin-top: 12px; font-size: 13px; line-height: 1.4; font-weight: 400; letter-spacing: .12em; color: var(--mute); }
.svc-row__text { margin-top: 24px; font-size: 17px; line-height: 1.85; color: var(--text); }
.svc-row__h { margin-top: 32px; font-size: 13px; line-height: 1.5; font-weight: 500; color: var(--ink); }
.svc-row__link { margin-top: 28px; }
/* 主な支援テーマ（罫の小リスト・2列） */
.theme-list { margin-top: 10px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; border-top: 1px solid var(--ink); }
.theme-list li { padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 1.5; font-weight: 400; color: var(--ink); }
@media (max-width: 1023px) {
  .svc-rows { margin-top: 64px; }
  .svc-row { grid-template-columns: 1fr; gap: 32px; padding-block: 56px; }
  .svc-row--rev .svc-row__media { order: 0; }
}
@media (max-width: 767px) {
  .svc-rows { margin-top: 48px; }
  .svc-row { gap: 24px; padding-block: 44px; }
  .svc-row__text { margin-top: 18px; font-size: 16px; line-height: 1.85; }
  .svc-row__h { margin-top: 24px; }
  .theme-list { column-gap: 16px; }
  .theme-list li { font-size: 14px; padding: 11px 0; }
  .svc-row__link { margin-top: 22px; }
}

/* ---------- 比較表（灰の地に白い列。SPは横スクロール＋先頭列を固定） ---------- */
.compare-hint { display: none; }
.compare { border-collapse: separate; border-spacing: 0; table-layout: fixed; min-width: 820px; }
.compare__c0 { width: 200px; }
.compare th, .compare td { text-align: left; vertical-align: top; }
.compare thead th, .compare thead td {
  padding: 28px 28px 24px; vertical-align: bottom; background: #fff; border-bottom: 1px solid var(--ink);
}
.compare thead th, .compare tbody td, .compare tfoot td { border-left: 2px solid var(--gray-1); }
.compare .compare__corner { background: var(--gray-1); border-left: 0; }
.compare__name { display: block; font-family: var(--ff-serif); font-weight: 300; font-size: 28px; line-height: 1.3; color: var(--ink); }
.compare__en { display: block; margin-top: 6px; font-size: 12px; line-height: 1.4; font-weight: 400; letter-spacing: .12em; color: var(--mute); }
.compare tbody th {
  padding: 22px 24px 22px 0; background: var(--gray-1); border-bottom: 1px solid var(--line);
  font-size: 15px; line-height: 1.6; font-weight: 500; color: var(--ink);
}
.compare tbody td {
  padding: 22px 28px; background: #fff; border-bottom: 1px solid var(--line);
  font-size: 15px; line-height: 1.75; font-weight: 300; color: var(--text);
}
.compare tfoot td { padding: 20px 28px 28px; background: #fff; }
.compare tfoot .compare__corner { background: var(--gray-1); }
/* 先頭列（行の見出し）を固定。PCでは動かないので効かない */
.compare .compare__corner, .compare tbody th { position: -webkit-sticky; position: sticky; left: 0; z-index: 1; }
.compare__list li + li { margin-top: 4px; }
.compare__big { font-size: 15px; line-height: 1.4; font-weight: 400; color: var(--ink); }
.compare__big b { font-family: var(--ff-serif); font-weight: 300; font-size: 30px; line-height: 1.2; color: var(--ink); margin-inline: 3px; }
@media (max-width: 1279px) { .compare { min-width: 900px; } .compare__c0 { width: 168px; } }
@media (max-width: 1023px) { .compare-hint { display: block; margin-bottom: 12px; } }
@media (max-width: 767px) {
  .compare { min-width: 740px; }
  .compare__c0 { width: 104px; }
  .compare thead th { padding: 20px 16px 16px; }
  .compare__name { font-size: 20px; }
  .compare__en { font-size: 11px; }
  .compare tbody th { padding: 16px 12px 16px 0; font-size: 13px; line-height: 1.55; border-right: 1px solid var(--line); }
  .compare .compare__corner { border-right: 1px solid var(--line); }
  .compare tbody td { padding: 16px; font-size: 14px; line-height: 1.7; }
  .compare tfoot td { padding: 16px 16px 20px; }
  .compare__big b { font-size: 24px; }
}

/* ---------- 工程表（5段階）＝一覧と3つの詳細で共用 ----------
   PC：細い横線の上に点、下に段階名・説明・期間／タブ以下：縦の罫の一覧 */
.flow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 32px; }
.flow__step { position: relative; display: flex; flex-direction: column; padding-top: 40px; }
.flow__step::before {
  content: ""; position: absolute; left: 0; top: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--blue);
}
.flow__step:not(:last-child)::after {
  content: ""; position: absolute; top: 5px; left: 11px; right: -32px; height: 1px; background: var(--ink);
}
.flow__name { font-size: 20px; line-height: 1.4; font-weight: 500; color: var(--ink); }
.flow__text { margin-top: 12px; font-size: 15px; line-height: 1.75; color: var(--text); flex: 1 1 auto; }
.flow__term {
  margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line);
  font-family: var(--ff-serif); font-size: 16px; line-height: 1.5; font-weight: 400; color: var(--ink);
}
/* 1280〜1439：1列198px。WebKit は括弧を詰めないので「60分・無料（オンライン可）」が折れないよう1px小さく */
@media (min-width: 1280px) and (max-width: 1439px) { .flow__term { font-size: 15px; } }
@media (max-width: 1279px) {
  .flow { grid-template-columns: 1fr; border-top: 1px solid var(--ink); padding-top: 32px; }
  .flow__step { padding: 0 0 36px 36px; }
  .flow__step:last-child { padding-bottom: 0; }
  .flow__step::before { top: 9px; }
  .flow__step:not(:last-child)::after { top: 20px; bottom: -9px; left: 5px; right: auto; width: 1px; height: auto; }
  .flow__term { margin-top: 10px; padding-top: 0; border-top: 0; font-size: 16px; color: var(--blue-ink); }
}
@media (min-width: 768px) and (max-width: 1279px) {
  .flow__step { display: grid; grid-template-columns: 232px minmax(0, 1fr); column-gap: 32px; align-content: start; }
  .flow__name { grid-column: 1; grid-row: 1; }
  .flow__term { grid-column: 1; grid-row: 2; margin-top: 4px; }
  .flow__text { grid-column: 2; grid-row: 1 / span 2; margin-top: 2px; }
}
@media (max-width: 767px) {
  .flow { padding-top: 28px; }
  .flow__step { padding: 0 0 28px 30px; }
  .flow__name { font-size: 18px; }
  .flow__text { margin-top: 8px; font-size: 15px; }
  .flow__step::before { top: 8px; }
  .flow__step:not(:last-child)::after { top: 19px; bottom: -8px; }
}

/* ---------- まずは課題整理から（濃紺の面） ---------- */
.first-step { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 88px; align-items: start; }
.first-step__terms { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 20px 56px; }
.first-step__terms dt { font-size: 13px; line-height: 1.5; font-weight: 400; color: rgba(255,255,255,.72); }
.first-step__terms dd { margin-top: 6px; font-family: var(--ff-serif); font-weight: 300; font-size: 44px; line-height: 1.15; color: #fff; }
.first-step__terms dd small { font-size: .45em; margin-inline: 4px; }
.first-step__terms dd small:first-child { margin-left: 0; }
.first-step__text { font-size: 17px; line-height: 1.85; color: rgba(255,255,255,.9); }
.first-step__h { margin-top: 32px; font-size: 13px; line-height: 1.5; font-weight: 500; color: #fff; }
.first-step__list { margin-top: 10px; border-top: 1px solid rgba(255,255,255,.4); }
.first-step__list li { padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.2); font-size: 16px; line-height: 1.6; font-weight: 400; color: #fff; }
.first-step .btn { margin-top: 36px; }
@media (max-width: 1279px) { .first-step { grid-template-columns: 1fr; gap: 40px; } }
@media (max-width: 767px) {
  .first-step { gap: 32px; }
  .first-step__terms { margin-top: 28px; gap: 16px 40px; }
  .first-step__terms dd { font-size: 34px; }
  .first-step__text { font-size: 15px; }
  .first-step__list li { font-size: 15px; }
  .first-step .btn { width: 100%; }
}

/* ---------- よくあるご質問（details の罫の一覧） ---------- */
.faq-block { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 48px; }
.faq { border-top: 1px solid var(--ink); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  position: relative; display: block; padding: 24px 56px 24px 0; cursor: pointer; list-style: none;
  font-size: 18px; line-height: 1.6; font-weight: 500; color: var(--ink);
  transition: color .2s linear;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::marker { content: ""; }
.faq__q:hover { color: var(--blue-ink); }
.faq__icon { position: absolute; right: 8px; top: 31px; width: 16px; height: 16px; }
.faq__icon::before, .faq__icon::after {
  content: ""; position: absolute; left: 0; top: 7px; width: 16px; height: 1.5px; background: var(--blue);
  transition: transform var(--dur) var(--ease);
}
.faq__icon::after { transform: rotate(90deg); }
.faq__item[open] .faq__icon::after { transform: rotate(0deg); }
.faq__a { padding: 0 56px 28px 0; font-size: 16px; line-height: 1.85; color: var(--text); }
@media (max-width: 1023px) { .faq-block { grid-template-columns: 1fr; gap: 24px; } }
@media (max-width: 767px) {
  .faq__q { padding: 20px 40px 20px 0; font-size: 16px; }
  .faq__icon { right: 4px; top: 25px; }
  .faq__a { padding: 0 0 24px; font-size: 15px; }
}

/* ======================= 詳細ページ（3領域とも同じ型） ======================= */

/* ---- リード＋本文2段組 ---- */
.svc-body { margin-top: 64px; column-count: 2; column-gap: 48px; font-size: 17px; line-height: 1.9; color: var(--text); }
.svc-body p + p { margin-top: 1.1em; }
@media (max-width: 1023px) { .svc-body { column-count: 1; } }
@media (max-width: 767px) { .svc-body { margin-top: 36px; font-size: 16px; line-height: 1.9; } }

/* ---- 主な支援テーマ：2×2（上に1px黒罫） ---- */
.themes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 48px; }
.theme { display: flex; flex-direction: column; border-top: 1px solid var(--ink); padding-top: 24px; }
.theme__text { margin-top: 14px; font-size: 16px; line-height: 1.85; color: var(--text); flex: 1 1 auto; }
.theme__out { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.7; font-weight: 400; color: var(--mute); }
.theme__out b { display: block; margin-bottom: 2px; font-weight: 500; color: var(--ink); }
@media (max-width: 1023px) { .themes { grid-template-columns: 1fr; gap: 48px; } }
@media (max-width: 767px) {
  .themes { gap: 40px; }
  .theme { padding-top: 20px; }
  .theme__text { font-size: 15px; }
}

/* ---- こんな課題をお持ちの方へ：左に見出し、右に罫の一覧 ---- */
.issues { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 64px; align-items: start; }
.issues__text { margin-top: 16px; font-size: 15px; line-height: 1.8; color: var(--text); }
.issues__head .link-arrow { margin-top: 20px; }
.issue-list { border-top: 1px solid var(--ink); }
.issue-list li { padding: 20px 0; border-bottom: 1px solid var(--line); font-size: 17px; line-height: 1.6; font-weight: 400; color: var(--ink); }
@media (max-width: 1023px) { .issues { grid-template-columns: 1fr; gap: 28px; } }
@media (max-width: 767px) {
  .issue-list li { padding: 16px 0; font-size: 15px; }
}

/* ---- 体制・費用の目安 ---- */
.spec-links { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px 40px; }
.fees .note { margin-top: 16px; }

/* ---- 担当コンサルタント：2名なので2列・中央寄せ ---- */
.people--2 { grid-template-columns: repeat(2, minmax(0, 408px)); justify-content: center; }
@media (max-width: 767px) { .people--2 { grid-template-columns: minmax(0, 1fr); } }

/* ---- 関連する導入事例 ---- */
.cases-more { margin-top: 40px; text-align: right; }
@media (max-width: 767px) { .cases-more { margin-top: 32px; text-align: left; } }

/* ---- ほかのサービス：写真付きの小さな横並びリンク ---- */
.others { border-top: 1px solid var(--line); padding-top: 56px; }
.others__head { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; margin-bottom: 28px; }
.others__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.other { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; align-items: center; color: var(--ink); }
.other__media { position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: var(--gray-3); }
.other__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur) var(--ease); }
.other:hover .other__media img { transform: scale(1.04); }
.other__name { font-size: 22px; line-height: 1.35; font-weight: 500; color: var(--ink); }
.other__name .chev { display: inline-block; width: 9px; height: 14px; margin-left: 8px; color: var(--blue); vertical-align: -1px; transition: transform var(--dur) var(--ease); }
.other:hover .other__name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.other:hover .other__name .chev { transform: translateX(3px); }
.other__text { margin-top: 8px; font-size: 14px; line-height: 1.6; font-weight: 300; color: var(--text); }
@media (max-width: 1023px) { .other { grid-template-columns: 140px minmax(0, 1fr); gap: 18px; } .other__name { font-size: 19px; } }
@media (max-width: 767px) {
  .others { padding-top: 44px; }
  .others__head { flex-direction: column; gap: 10px; margin-bottom: 24px; }
  .others__grid { grid-template-columns: 1fr; gap: 20px; }
  .other { grid-template-columns: 128px minmax(0, 1fr); gap: 16px; }
  .other__name { font-size: 17px; }
  .other__text { margin-top: 4px; font-size: 13px; }
}