/* base.css — リセット＋ベーススタイル（tokens.css の変数を参照）
   ※ 余白・サイズ・色は数値直書きせず var() を使う */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-text);
  background: var(--color-white);
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--space-16);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
}
h1 { font-size: var(--font-size-h1); }
h2 { font-size: var(--font-size-h2); }
h3 { font-size: var(--font-size-h3); }
h4 { font-size: var(--font-size-h4); }
h5 { font-size: var(--font-size-h5); }
h6 { font-size: var(--font-size-h6); }

p { margin: 0 0 var(--space-16); }

a { color: var(--color-primary); }

.text-xl {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
}
.text-large {
  font-size: var(--font-size-large);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
}
.lead { color: var(--color-gray-dark); }

body { background: var(--color-bg); }

.container {
  max-width: var(--layout-max);
  margin-inline: auto;
  padding: var(--space-48) var(--space-24);
}
.container--medium { max-width: var(--layout-medium); }
.container--narrow { max-width: var(--layout-narrow); }

section { margin-block: var(--space-48); }

/* --- 事業ページのアクセントテーマ切替 ------------------------------------
   body に付与したクラスで --color-accent を上書きし、全コンポーネントに波及させる */
.is-after-school { /* 放課後等デイサービス（水色） */
  --color-accent:      var(--color-accent-blue);
  --color-accent-deep: #0f7d99;
  --color-accent-soft: #eef7fb;
  --color-accent-tint: rgba(20, 153, 185, 0.18);
}
.is-child-dev    { --color-accent: var(--color-accent-green); }  /* 児童発達支援（既定・緑）*/

/* --- セクション背景ユーティリティ ----------------------------------------- */
.bg-cream  { background: var(--color-bg-light-yellow); }
.bg-yellow { background: var(--color-bg-yellow); }
.bg-white  { background: var(--color-white); }

/* --- SP専用の改行（PCでは無効＝テキストが連結する）------------------------
   見出しやラベルの折り返しを Figma SP に合わせる用。<br class="sp-br"> で使う。 */
.sp-br { display: none; }
@media (max-width: 768px) { .sp-br { display: inline; } }

/* --- PC専用の改行（SPでは無効＝テキストが1行に連結する）------------------
   PC（狭いラベル列など）でのみ折り返したい箇所に <br class="pc-br"> で使う。 */
@media (max-width: 768px) { .pc-br { display: none; } }

/* --- スクリーンリーダー専用（視覚的に隠す）------------------------------- */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}
.screen-reader-text:focus {
  position: static !important;
  width: auto; height: auto;
  clip: auto; margin: 0;
  padding: var(--space-8) var(--space-16);
  background: var(--color-white);
}

.swatches { display: flex; flex-wrap: wrap; gap: var(--space-16); }
.swatch {
  width: var(--space-96);
  height: var(--space-64);
  border: 1px solid var(--color-gray);
  display: flex;
  align-items: flex-end;
  padding: var(--space-8);
  font-size: var(--font-size-h6);
  color: var(--color-white);
}