/* =====================================================================
   it-support.css — IT・システム開発支援（/it-support/）専用。
   functions.php で /it-support/ の表示時だけ読み込む。
   セレクタはすべて .mp-it-* に限定し、他ページの既存クラス（.faq / .step-row /
   .breadcrumb など）の定義は変更しない。色・余白・書体は site.css のトークンを使う。
   ===================================================================== */

/* ---------- 共通 ---------- */
/* セクション内の縦の間隔（テーマ設定では blockGap のスタイルが出力されないため、ここで指定する）。 */
.mp-it-section > * { margin-top: 0; margin-bottom: 0; }
.mp-it-section > * + * { margin-top: var(--wp--preset--spacing--space-xl); }
.mp-it-section--tight > * + * { margin-top: var(--wp--preset--spacing--space-md); }
.mp-it-section > .mp-it-subtitle { margin-top: var(--wp--preset--spacing--space-xl); }
.mp-it-section > .mp-it-subtitle + * { margin-top: var(--wp--preset--spacing--space-sm); }
.mp-it-head { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--space-sm); }
.mp-it-head > * { margin: 0; }
.mp-it-body > * + * { margin-top: var(--wp--preset--spacing--space-sm); }
.mp-it-body p,
.mp-it-lead { font-size: 16px; line-height: 1.95; margin: 0; }
.mp-it-list { font-size: 15px; line-height: 1.9; padding-left: 1.3em; margin: 0; }
.mp-it-list li + li { margin-top: 4px; }
.mp-it-list li::marker { color: var(--wp--preset--color--accent); }
.mp-it-subtitle { font-size: 20px; }

/* ---------- ヒーロー（キャッチコピー） ---------- */
/* セクションのblockGap（space-md）で縦に並べる。パンくず→英字ラベル→見出しの間だけ詰める。 */
.mp-it-hero > .breadcrumb + .eyebrow,
.mp-it-hero > .eyebrow + .page-title { margin-top: 8px; }
.mp-it-hero .page-title { line-height: 1.5; }
.mp-it-hero > .section-lead + .mp-it-hero__desc { margin-top: 12px; }
.mp-it-hero__desc { font-size: 15px; line-height: 1.95; color: var(--wp--preset--color--text); }

/* ---------- 行政書士業務との区分表示（2か所） ---------- */
.mp-it-notice {
  background-color: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--border);
  border-left: 4px solid var(--wp--preset--color--brand);
  border-radius: 8px;
  padding: var(--wp--preset--spacing--space-sm) var(--wp--preset--spacing--space-md);
}
.mp-it-notice > * { margin: 0; }
.mp-it-notice__title { font-size: 15px; color: var(--wp--preset--color--brand); line-height: 1.7; }
.mp-it-notice__text { font-size: 14px; line-height: 1.9; margin-top: 6px !important; }

/* ---------- 4つのサービス（同じ大きさのカード。PC 2列×2行／スマホ1列） ---------- */
.mp-it-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--wp--preset--spacing--space-md);
}
.mp-it-cards > .mp-it-card { margin: 0; }
.mp-it-card {
  background-color: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 10px;
  padding: var(--wp--preset--spacing--space-lg);
  display: flex;
  flex-direction: column;
}
.mp-it-card > * { margin: 0; }
.mp-it-card__code {
  font-family: var(--wp--preset--font-family--latin);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--wp--preset--color--accent-ink);
  line-height: 1.6;
}
.mp-it-card__title { font-size: 21px; margin-top: 4px; }
.mp-it-card__sub {
  font-size: 14px;
  color: var(--wp--preset--color--brand);
  margin-top: var(--wp--preset--spacing--space-md);
  margin-bottom: 6px;
}
.mp-it-card .mp-it-list { font-size: 14px; }
/* 支援内容の直後に置く責任範囲の注記（S4）。本文より一段控えめに。 */
.mp-it-card__scope { font-size: 13px; line-height: 1.8; color: var(--wp--preset--color--text-light); margin-top: 10px !important; }
/* 料金は各カードの最下部にそろえる（カードの高さは行ごとにそろう）。 */
.mp-it-card__price {
  margin-top: auto !important;
  padding-top: var(--wp--preset--spacing--space-md);
}
.mp-it-card__price > * { margin: 0; }
.mp-it-card__price::before {
  content: "";
  display: block;
  border-top: 1px solid var(--wp--preset--color--border);
  margin-bottom: var(--wp--preset--spacing--space-sm);
}
.mp-it-card__price-label { font-size: 13px; font-weight: 700; color: var(--wp--preset--color--text-light); }
.mp-it-card__price-line {
  font-size: 16px;
  font-weight: 700;
  color: var(--wp--preset--color--brand);
  line-height: 1.7;
}
/* S2のプラン（ライト／スタンダード）。カード内で横に2つ、幅が足りないときは縦に積む。
   他のカードと同じ白地・細枠の範囲に収め、S2だけが目立たないようにする。 */
.mp-it-card__price > .mp-it-plans { margin-top: 8px; }
.mp-it-plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}
.mp-it-plans > .mp-it-plan { margin: 0; }
.mp-it-plan {
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 8px;
  background-color: var(--wp--preset--color--mist);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
}
.mp-it-plan > * { margin: 0; }
.mp-it-plan__name { font-size: 15px; font-weight: 700; color: var(--wp--preset--color--text); line-height: 1.6; }
.mp-it-card .mp-it-plan__list { font-size: 13px; line-height: 1.8; margin-top: 6px; }
.mp-it-plan__list li + li { margin-top: 2px; }
.mp-it-plan__price {
  margin-top: auto !important;
  padding-top: 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--wp--preset--color--brand);
  line-height: 1.6;
}
.mp-it-card__price-note { font-size: 13px; color: var(--wp--preset--color--text-light); line-height: 1.8; margin-top: 4px !important; }

/* ---------- その他のご相談（小規模システム開発支援）— 4サービスより控えめな別枠 ---------- */
.mp-it-other {
  background-color: var(--wp--preset--color--mist);
  border: 1px dashed var(--wp--preset--color--border);
  border-radius: 8px;
  padding: var(--wp--preset--spacing--space-md);
}
.mp-it-other > * { margin: 0; font-size: 15px; line-height: 1.9; }
.mp-it-other > * + * { margin-top: 10px; }
.mp-it-other__price strong { color: var(--wp--preset--color--brand); }

/* ---------- 汎用の囲み（経歴・技術・ツール） ---------- */
.mp-it-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--wp--preset--spacing--space-md);
}
.mp-it-tools {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--wp--preset--spacing--space-md);
}
.mp-it-cols > *,
.mp-it-tools > * { margin: 0; }
.mp-it-box {
  background-color: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 10px;
  padding: var(--wp--preset--spacing--space-md);
}
.mp-it-box > * { margin: 0; }
.mp-it-box > * + * { margin-top: 10px; }
.mp-it-box > .mp-it-box__title + .mp-it-list { margin-top: 8px; }
.mp-it-box > .mp-it-list + .mp-it-box__title { margin-top: var(--wp--preset--spacing--space-md); }
.mp-it-box__title { font-size: 17px; }
.mp-it-box p { font-size: 15px; line-height: 1.9; color: var(--wp--preset--color--text-light); }
.mp-it-tool .mp-it-box__title a { color: var(--wp--preset--color--brand); text-decoration: none; }
.mp-it-tool .mp-it-box__title a:hover { text-decoration: underline; }
.mp-it-name { font-size: 17px; }
/* 代表者のIT経験の紹介文：1行が長くなりすぎないよう幅を抑える（下の経験分野・資格カードは全幅のまま）。 */
.mp-it-profile > p { max-width: 820px; } /* ブロック自体は全幅のまま（下のカードと左端をそろえる） */
.mp-it-profile > p + p { margin-top: var(--wp--preset--spacing--space-sm); }
.mp-it-profile > .mp-it-name + p { margin-top: var(--wp--preset--spacing--space-xs); }
.mp-it-name a { color: var(--wp--preset--color--text); text-decoration: none; border-bottom: 1px solid var(--wp--preset--color--border); }
.mp-it-name a:hover { color: var(--wp--preset--color--brand); }
.mp-it-body a,
.mp-it-other a { color: var(--wp--preset--color--brand); }

/* ---------- 表（料金表・S2の範囲） ---------- */
.mp-it-price,
.mp-it-compare { margin: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.mp-it-price table,
.mp-it-compare table {
  width: 100%;
  border-collapse: collapse;
  background-color: var(--wp--preset--color--white);
  font-size: 15px;
  line-height: 1.8;
}
.mp-it-price th,
.mp-it-price td,
.mp-it-compare th,
.mp-it-compare td {
  border: 1px solid var(--wp--preset--color--border);
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
}
.mp-it-price thead th,
.mp-it-compare thead th {
  background-color: var(--wp--preset--color--brand);
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}
.mp-it-price td:first-child,
.mp-it-compare td:first-child {
  background-color: var(--wp--preset--color--mist);
  font-weight: 700;
  font-size: 14px;
}

/* 料金表：金額列は右寄せ・折り返さない。 */
.mp-it-price td:nth-child(3),
.mp-it-price td:nth-child(4),
.mp-it-price th:nth-child(3),
.mp-it-price th:nth-child(4) { text-align: right; white-space: nowrap; }
.mp-it-price td:nth-child(4) { font-weight: 700; color: var(--wp--preset--color--brand); }
.mp-it-price td:first-child { width: 30%; }

/* S2の範囲：1列目は項目名、2・3列目は同じ幅。 */
.mp-it-compare td:first-child { width: 8em; white-space: nowrap; }
.mp-it-compare thead th:first-child { background-color: var(--wp--preset--color--deep); }

.mp-it-notes { font-size: 14px; color: var(--wp--preset--color--text-light); }

/* ---------- 流れ・FAQ（既存の .step-row / .faq をそのまま使い、並べ方だけ指定） ---------- */
.mp-it-steps > *,
.mp-it-faq > * { margin: 0; }
.mp-it-steps > .step-row > * { margin: 0; }
.mp-it-steps > .step-row > * + * { margin-top: 6px; }
.mp-it-steps > .step-row:last-child,
.mp-it-faq > .faq:last-child { border-bottom: 1px solid var(--wp--preset--color--border); }

/* ---------- お問い合わせ ---------- */
.mp-it-contact .mp-it-lead { font-size: 16px; }

/* ---------- タブレット ---------- */
@media (max-width: 1023px) {
  .mp-it-tools { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- スマートフォン ---------- */
@media (max-width: 768px) {
  .mp-it-cards,
  .mp-it-cols { grid-template-columns: minmax(0, 1fr); }
  .mp-it-card { padding: var(--wp--preset--spacing--space-md); }
  .mp-it-card__title { font-size: 19px; }
  .mp-it-subtitle { font-size: 18px; }
  .mp-it-hero .section-lead { font-size: 16px; }
  .mp-it-notice { padding: 14px 16px; }

  /* 料金表・S2の範囲：表のまま横スクロール（プラン名・時間・金額の対応関係を崩さない）。
     1列目（サービス名・項目名）は横スクロール中も見えるよう左端に固定する。 */
  .mp-it-price table { min-width: 560px; font-size: 13px; }
  .mp-it-compare table { min-width: 540px; font-size: 13px; }
  .mp-it-price th,
  .mp-it-price td,
  .mp-it-compare th,
  .mp-it-compare td { padding: 10px; }
  .mp-it-price table,
  .mp-it-compare table { border-collapse: separate; border-spacing: 0; }
  .mp-it-price th,
  .mp-it-price td,
  .mp-it-compare th,
  .mp-it-compare td { border-width: 0 1px 1px 0; }
  .mp-it-price tr > :first-child,
  .mp-it-compare tr > :first-child { border-left-width: 1px; }
  .mp-it-price thead th,
  .mp-it-compare thead th { border-top-width: 1px; }
  .mp-it-price tr > :first-child,
  .mp-it-compare tr > :first-child {
    position: sticky;
    left: 0;
    z-index: 1;
  }
  .mp-it-price td:first-child { width: 8.5em; min-width: 8.5em; font-size: 13px; }
  .mp-it-compare td:first-child { width: 6em; min-width: 6em; white-space: normal; font-size: 13px; }
}