@charset "utf-8";
/* =========================================
   固定ページの本文（page.php）
   株式会社スリーエス

   common.css はタグの余白をすべて 0 にリセットしているため、
   エディタで書いた本文には余白が付きません。
   ここで **.page-body__content の中だけ** に余白と見た目を戻します。
   グローバル（body / p / h2 など）には一切触れていません。

   ・色・文字サイズ・余白はすべて :root の既存の変数を使用
   ・デバイス区分は 1439 / 1199 / 700 / 349 のまま
========================================= */

.page-body__content {
  color: var(--color-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  word-break: auto-phrase;
  line-break: strict;
}

/* 続けて並ぶ要素の間隔（最初の要素の上には余白を付けない） */
.page-body__content > * + * {
  margin-top: var(--space-20);
}

/* --- 見出し --- */
.page-body__content h2,
.page-body__content h3,
.page-body__content h4 {
  color: var(--color-text-strong);
  font-weight: 900;
  line-height: 1.4;
}

.page-body__content h2 {
  padding-bottom: var(--space-10);
  border-bottom: 2px solid var(--color-teal);
  font-size: clamp(1.375rem, 1rem + 0.9vw, 1.75rem);
}

.page-body__content h3 {
  font-size: clamp(1.125rem, 0.95rem + 0.5vw, 1.375rem);
}

.page-body__content h4 {
  font-size: var(--font18-size);
}

/* 見出しの前は、次のかたまりが始まることが分かるよう広めに空ける */
.page-body__content > * + h2 {
  margin-top: var(--space-60);
}

.page-body__content > * + h3,
.page-body__content > * + h4 {
  margin-top: var(--space-40);
}

/* --- 文章 --- */
.page-body__content strong {
  font-weight: 700;
}

.page-body__content a {
  color: var(--color-teal);
  text-decoration: underline;
  transition: opacity 0.3s ease;
}

.page-body__content a:hover,
.page-body__content a:focus-visible {
  opacity: 0.7;
}

/* --- リスト --- */
.page-body__content ul,
.page-body__content ol {
  padding-left: 1.5em;
}

.page-body__content ul {
  list-style: disc;
}

.page-body__content ol {
  list-style: decimal;
}

.page-body__content li + li {
  margin-top: 6px;
}

.page-body__content li::marker {
  color: var(--color-teal);
}

/* --- 画像・図版 --- */
.page-body__content img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}

.page-body__content figcaption {
  margin-top: var(--space-10);
  color: var(--color-text-mute);
  font-size: var(--font14-size);
  text-align: center;
}

/* --- 引用 --- */
.page-body__content blockquote {
  padding: var(--space-20);
  border-left: 4px solid var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-text-mute);
}

/* --- 表 --- */
/* 幅が足りないときは表だけ横スクロールさせ、ページ全体は横に伸ばさない */
.page-body__content .wp-block-table,
.page-body__content figure.wp-block-table {
  overflow-x: auto;
}

.page-body__content table {
  width: 100%;
  border-collapse: collapse;
}

.page-body__content th,
.page-body__content td {
  padding: 12px var(--space-20);
  border: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
}

.page-body__content th {
  background: var(--color-surface);
  color: var(--color-text-strong);
  font-weight: 700;
  white-space: nowrap;
}

/* =========================================
   700px以下：スマートフォン
========================================= */
@media screen and (max-width: 700px) {
  .page-body__content > * + h2 {
    margin-top: var(--space-40);
  }

  .page-body__content > * + h3,
  .page-body__content > * + h4 {
    margin-top: var(--space-30);
  }

  .page-body__content th,
  .page-body__content td {
    padding: var(--space-10);
  }

  .page-body__content th {
    white-space: normal;
  }
}

/* =========================================
   ページ内リンク（本文の h2 に id があると自動で出ます）

   ボタンの見た目は common.css の .ts-chip です
   （導入実績・よくあるご質問の絞り込みと共通）。
========================================= */
.page-anchors {
  margin-bottom: var(--space-40);
}

.page-anchors__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-10);
  min-width: 0;
}

.page-anchors__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.page-anchors__link i {
  flex: 0 0 auto;
  font-size: 0.875em;
  line-height: 1;
}

/*
 * 飛んだ先が固定ヘッダーの下に隠れないようにします。
 * --header-h は header.css がデバイス別に持っている値です。
 */
.page-body__content h2[id] {
  scroll-margin-top: calc(var(--header-h) + var(--space-20));
}

/* =========================================
   ショートコードで差し込んだかたまり
   （[threes_staff] / [threes_faq] / [threes_works]）

   本文用のリスト装飾（点・字下げ）が中の部品にまで
   かかってしまうので、このかたまりの中だけ戻します。
   部品側のCSS（about.css / faq.css / works.css）が
   そのまま効くようにするためです。
========================================= */
.page-body__content .page-block {
  margin-top: var(--space-30);
}

.page-body__content .page-block ul,
.page-body__content .page-block ol {
  padding-left: 0;
  list-style: none;
}

.page-body__content .page-block li + li {
  margin-top: 0;
}

/* =========================================
   700px以下：スマートフォン
========================================= */
@media screen and (max-width: 700px) {
  .page-anchors {
    margin-bottom: var(--space-30);
  }
}