/* 「運営元情報」ページ(page-operator.php)専用。style.css の後に読み込む。
   クラスはすべて .operator で始め、他のページには影響しない。色・フォント・ボタン・テキストリンクは、style.css の変数と .button / .text-link をそのまま使う。
   面は2つ:見出しと情報の表(白)、お問い合わせへの導線(帯)。中身は下層ページの本文の列(style.css の --content-width)で中央寄せ、表と導線はその左端にそろえる(/about/ と同じ)。
   縦書きラベルは使わない。金は、見出しの下の短い線と、テキストリンクの下線だけ */

.operator {
  /* 表の最大幅と、768px 以上での項目名の列の幅・列の間隔 */
  --operator-table-max: 760px;
  --operator-term-width: 9em;
  --operator-col-gap: 32px;

  /* 内容の1行の長さの上限(16px で約38字) */
  --operator-text-max: 38em;

  /* 行頭禁則を厳しくする(小さい「っ」「ゃ」や長音「ー」を行頭に置かない)。子に継承される */
  line-break: strict;
}

/* 中身の幅は、下層ページの本文の列(--content-width)。カード・区切り線が無いので、枠ごと本文幅にして中央に置く */
.operator__inner {
  width: 100%;
  max-width: calc(var(--content-width) + (var(--page-x) * 2));
  margin-inline: auto;
  padding: 56px var(--page-x) 64px;
}

.operator__inner > * {
  margin-block: 0;
}

/* ページの見出し(h1)。下に金の短い線(/about/ の見出しと同じ形) */
.operator__title {
  font-size: clamp(28px, 4.2vw, 40px);
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.4;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.operator__title::after {
  content: "";
  display: block;
  width: 48px;
  height: 2px;
  margin-top: 20px;
  background: var(--color-gold);
}

.operator__inner > .operator__title + .operator__table {
  margin-top: 40px;
}

/* 情報の表。上端は紺の線、行の間は細い線。スマホ幅では、項目名の下に内容を積む */
.operator__table {
  max-width: var(--operator-table-max);
  border-top: 1px solid var(--color-rule);
}

.operator__row {
  padding: 16px 2px 18px;
  border-bottom: 1px solid var(--color-line-soft);
}

.operator__term {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.7;
}

.operator__desc {
  max-width: var(--operator-text-max);
  margin: 4px 0 0;
  font-size: 16px;
  line-height: 1.85;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

/* 半角スペースで区切った塊(inc/operator.php の sbcc_operator_html() が包む)。スペースのところでだけ改行する */
.operator__seg {
  display: inline-block;
}

/* 事業内容:記号なしで1行に1項目 */
.operator__items {
  margin: 0;
  padding: 0;
  list-style: none;
}

.operator__items > li + li {
  margin-top: 2px;
}

/* お問い合わせへの導線(帯)。ボタンの下に、小さなテキストリンク */
.operator__cta {
  background: var(--color-bg-alt);
}

.operator__cta .operator__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding-block: 48px 52px;
}

/* 段落は常に横幅いっぱい(ボタンの width: 100% と min-width の 100% が、この幅を基準にするため) */
.operator__cta-action {
  width: 100%;
}

/* .button は inline-flex だが、その中では text-wrap: balance が効かないため、inline-block にする(高さは .button の min-height で 44px 以上)。
   帯の上で目立つよう、地は白(ホバー時は .button の紺) */
.operator__btn {
  display: inline-block;
  width: 100%;
  padding: 14px 20px;
  background: var(--color-bg);
  font-size: 15px;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

/* テキストリンク:文字は .text-link の 14px。押せる高さを 44px 以上にする */
.operator__sub-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* 768px 以上:項目名と内容を横に並べる。ボタンは幅を自動に(最小 320px) */
@media (min-width: 768px) {
  .operator__inner {
    padding-block: 64px 88px;
  }

  .operator__inner > .operator__title + .operator__table {
    margin-top: 48px;
  }

  .operator__row {
    display: grid;
    grid-template-columns: var(--operator-term-width) minmax(0, 1fr);
    column-gap: var(--operator-col-gap);
    align-items: baseline;
    padding: 22px 4px;
  }

  .operator__term {
    font-size: 15px;
  }

  .operator__desc {
    margin-top: 0;
    line-height: 1.95;
  }

  .operator__cta .operator__inner {
    padding-block: 56px 64px;
  }

  .operator__btn {
    width: auto;
    min-width: min(100%, 320px);
    padding-inline: 32px;
  }
}