@charset "utf-8";
/* ==========================================================================
   components.css ― 部品
   色・余白・文字サイズは tokens.css の変数のみ。直値を書かない。
   ========================================================================== */

/* ==========================================================================
   1. セクション見出し
   [アイコン56px] / 日本語見出し / 英字ラベル / リード文
   ========================================================================== */
.sec-head { text-align: center; }

.sec-head__icon {
  width: clamp(calc(44 / 16 * 1rem), 6vw, calc(56 / 16 * 1rem));
  height: auto;
  margin: 0 auto var(--sp-10);
}

.sec-head__title {
  margin: 0;
  font-size: var(--fs-4xl);
  font-weight: var(--fw-black);
}

/* ページ先頭の h1 だけ可変 */
.sec-head__title[data-level="page"] { font-size: var(--fs-h2); }

/* --------------------------------------------------------------------------
   英字ラベル
   日本語見出しの繰り返しだが、色相を保ったまま暗くして 5.3:1 以上にしてある。
   セクションごとの色分けは残る（tokens.css 2節）。
   -------------------------------------------------------------------------- */
.sec-head__en {
  margin-top: var(--sp-6);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-en-lg);
}

.sec-head__en[data-tone="brand"] { color: var(--c-text-brand); }
.sec-head__en[data-tone="green"] { color: var(--c-text-green); }
.sec-head__en[data-tone="blue"]  { color: var(--c-text-blue); }
.sec-head__en[data-tone="pink"]  { color: var(--c-text-pink); }

.sec-head__lead {
  max-width: var(--w-text);
  margin: var(--sp-32) auto 0;
  font-size: var(--fs-md);
  line-height: var(--lh-table);
  text-align: center;
}

/* 2本目以降のリード文は間隔が狭い */
.sec-head__lead + .sec-head__lead { margin-top: var(--sp-18); }

/* 教育方針のような、赤い小見出し */
.sec-subtitle {
  margin-top: var(--sp-36);
  text-align: center;
  font-size: clamp(calc(18 / 16 * 1rem), 2.6vw, calc(26 / 16 * 1rem));
  font-weight: var(--fw-black);
  line-height: 2;
  color: var(--c-heading-accent);
}

/* ==========================================================================
   2. ボタン
   ★ プライマリー（塗り）は1画面に1つ。それ以外は枠線かテキストにする
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-10);
  min-height: var(--tap-min);
  padding: var(--sp-16) var(--sp-44);
  border: 2px solid transparent;
  border-radius: var(--r-md);
  font-size: var(--fs-md);
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-en);
  text-align: center;
  text-decoration: none;
}

.btn:hover { text-decoration: underline; }

/* 塗り。面と文字を対で */
.btn[data-tone="brand"] { background: var(--c-brand); color: var(--c-on-brand); }
.btn[data-tone="green"] { background: var(--c-green); color: var(--c-on-green); }

.btn[data-tone="brand"]:hover,
.btn[data-tone="green"]:hover { color: var(--c-on-brand); }

/* 枠線。形の差で階層を表す（色だけに頼らない） */
.btn[data-tone="outline"] {
  background: var(--c-surface);
  color: var(--c-on-surface);
  border-color: var(--c-border);
}

.btn__arrow {
  font-size: max(.8em, var(--fs-sm));
  line-height: 1;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-16);
  margin-top: var(--sp-40);
}

/* ==========================================================================
   3. 写真＋文章の2段組
   ========================================================================== */
.media {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-40);
  margin-top: var(--sp-44);
}

/* ごあいさつ型：写真は 300×280 で固定、文章が伸びる */
.media[data-figure="fixed"] { align-items: flex-start; }

.media[data-figure="fixed"] .media__figure {
  width: min(100%, calc(300 / 16 * 1rem));
  height: calc(280 / 16 * 1rem);
  flex-shrink: 0;
}

/* 安全対策型：写真と文章が 1 : 1.2 */
.media[data-figure="grow"] .media__figure {
  flex: 1;
  min-width: min(100%, calc(300 / 16 * 1rem));
  height: calc(260 / 16 * 1rem);
}

.media__figure { margin: 0; }

.media__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--r-md);
}

.media__body {
  flex: 1;
  min-width: min(100%, calc(300 / 16 * 1rem));
  line-height: var(--lh-table);
}

.media[data-figure="grow"] .media__body { flex: 1.2; }

.media__body p + p { margin-top: var(--sp-8); }

.media__sign {
  margin-top: var(--sp-24);
  text-align: right;
  font-weight: var(--fw-bold);
}

/* ==========================================================================
   4. 写真を横に3枚
   ========================================================================== */
.photo-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(240 / 16 * 1rem)), 1fr));
  gap: var(--sp-20);
  margin-top: var(--sp-44);
}

.photo-row img {
  width: 100%;
  height: calc(220 / 16 * 1rem);
  object-fit: cover;
  border-radius: var(--r-md);
}

/* ==========================================================================
   5. 表
   ★ <div>＋grid で組まない。<table> ＋ scope="row" ＋ <caption>
   ========================================================================== */
.spec-table {
  width: 100%;
  max-width: var(--w-content);
  margin: var(--sp-36) auto 0;
  background: var(--c-surface);
  color: var(--c-on-surface);
  border-radius: var(--r-md);
  padding: var(--sp-28) var(--sp-32);
}

.spec-table caption {
  text-align: left;
  font-weight: var(--fw-black);
}

.spec-table th,
.spec-table td {
  padding: var(--sp-12) var(--sp-4);
  text-align: left;
  vertical-align: top;
  line-height: var(--lh-body);
  border-bottom: 1px dashed var(--c-border);
}

.spec-table tr:last-child th,
.spec-table tr:last-child td { border-bottom: 0; }

/* 項目名。引き渡しは橙 #E8963B（2.37:1）。茶に寄せて 5.85:1 */
.spec-table th[scope="row"] {
  width: calc(134 / 16 * 1rem);
  color: var(--c-text-on-light-safe);
  font-weight: var(--fw-bold);
  white-space: nowrap;
}

/* 金額など右寄せしたい列 */
.spec-table td[data-align="end"] { text-align: right; }

/* 時刻の表（園での一日／職員の一日） */
.time-table {
  width: 100%;
  margin-top: var(--sp-36);
  background: var(--c-page);
  color: var(--c-on-page);
  border-radius: var(--r-md);
  overflow: hidden;
}

.time-table th,
.time-table td {
  padding: var(--sp-16) var(--sp-22);
  text-align: left;
  border-bottom: 1px dashed var(--c-border);
  font-weight: var(--fw-bold);
}

.time-table tr:last-child th,
.time-table tr:last-child td { border-bottom: 0; }

.time-table th[scope="row"] {
  width: calc(110 / 16 * 1rem);
  color: var(--c-text-green);     /* 5.35:1 */
  font-weight: var(--fw-black);
}

/* ==========================================================================
   5-2. 季節の表（年間行事）
   見出しセルが色面。面の色はそのままで、文字を濃茶にして 6:1 以上
   ========================================================================== */
.event-table {
  width: 100%;
  margin-top: var(--sp-36);
  background: var(--c-surface);
  color: var(--c-on-surface);
  border-radius: var(--r-md);
  overflow: hidden;
}

.event-table th[scope="row"] {
  width: calc(90 / 16 * 1rem);
  padding: var(--sp-18) var(--sp-22);
  text-align: center;
  font-weight: var(--fw-black);
  /* 行の区切りは背景と同じ色の太い線。data-gap で帯の色を指定する */
  border-bottom: 4px solid var(--c-surface-ivory);
}

.event-table tr:last-child th[scope="row"] { border-bottom: 0; }

.event-table th[data-tone="spring"] { background: var(--c-pink);        color: var(--c-on-pink); }
.event-table th[data-tone="summer"] { background: var(--c-blue);        color: var(--c-on-blue); }
.event-table th[data-tone="autumn"] { background: var(--c-brand-light); color: var(--c-on-brand-light); }
.event-table th[data-tone="winter"] { background: var(--c-green);       color: var(--c-on-green); }

.event-table td {
  padding: var(--sp-18) var(--sp-22);
  border-bottom: 1px dashed var(--c-border);
  font-weight: var(--fw-bold);
  line-height: 2;
}

.event-table tr:last-child td { border-bottom: 0; }

/* ==========================================================================
   5-3. 料金の表（預かり保育）
   ========================================================================== */
.rate-table {
  width: 100%;
  margin-top: var(--sp-36);
  background: var(--c-surface);
  color: var(--c-on-surface);
  border-radius: var(--r-md);
  overflow: hidden;
}

.rate-table thead th {
  padding: var(--sp-14) var(--sp-22);
  text-align: left;
  background: var(--c-brand);
  color: var(--c-on-brand);
  font-weight: var(--fw-black);
}

.rate-table tbody th,
.rate-table tbody td {
  padding: var(--sp-16) var(--sp-22);
  text-align: left;
  border-bottom: 1px dashed var(--c-border);
  font-weight: var(--fw-bold);
}

.rate-table tbody tr:last-child th,
.rate-table tbody tr:last-child td { border-bottom: 0; }

.rate-table tbody th[scope="row"] { font-weight: var(--fw-black); }

.rate-table th[data-tone="blue"]  { color: var(--c-deep-blue); }
.rate-table th[data-tone="brand"] { color: var(--c-deep-orange); }
.rate-table th[data-tone="green"] { color: var(--c-deep-green); }

/* ==========================================================================
   5-4. 並んだ札（課外教室）
   ========================================================================== */
.chips {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(160 / 16 * 1rem)), 1fr));
  gap: var(--sp-14);
  margin-top: var(--sp-32);
}

.chip {
  padding: var(--sp-22) var(--sp-16);
  background: var(--c-surface);
  color: var(--c-on-surface);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-soft);
  font-size: var(--fs-md);
  font-weight: var(--fw-black);
  text-align: center;
}
.chip[data-tone="blue"]  { color: var(--c-deep-blue); }
.chip[data-tone="brand"] { color: var(--c-deep-orange); }
.chip[data-tone="pink"]  { color: var(--c-deep-pink); }
.chip[data-tone="green"] { color: var(--c-deep-green); }

/* ==========================================================================
   6. 番号つきカード（教育方針・入園までの流れ）
   ========================================================================== */
.num-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(260 / 16 * 1rem)), 1fr));
  gap: var(--sp-24);
  margin-top: var(--sp-40);
}

.num-card {
  background: var(--c-surface);
  color: var(--c-on-surface);
  border-radius: var(--r-md);
  padding: var(--sp-30) var(--sp-26);
  text-align: center;
}

.num-card__no {
  display: grid;
  place-items: center;
  width: calc(64 / 16 * 1rem);
  height: calc(64 / 16 * 1rem);
  margin: 0 auto;
  border-radius: var(--r-circle);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-black);
}

/* 面と文字を対で。文字は濃茶。7.4〜8.1:1 */
.num-card__no[data-tone="blue"]  { background: var(--c-blue-light); color: var(--c-on-blue-light); }
.num-card__no[data-tone="brand"] { background: var(--c-brand-light); color: var(--c-on-brand-light); }
.num-card__no[data-tone="green"] { background: var(--c-green-light); color: var(--c-on-green-light); }
.num-card__no[data-tone="pink"]  { background: var(--c-pink);        color: var(--c-on-pink); }

/* 3つの柱のような、丸が少し小さい版 */
.num-cards[data-size="sm"] { gap: var(--sp-22); }

.num-cards[data-size="sm"] .num-card {
  padding: var(--sp-32) var(--sp-26);
  box-shadow: var(--shadow-soft);
}

.num-cards[data-size="sm"] .num-card__no {
  width: calc(56 / 16 * 1rem);
  height: calc(56 / 16 * 1rem);
  font-size: var(--fs-2xl);
}

.num-card__title {
  margin-top: var(--sp-16);
  font-size: var(--fs-lg);
  font-weight: var(--fw-black);
}

.num-cards[data-size="sm"] .num-card__title { font-size: var(--fs-xl); }

/* 見出しに色を付ける版。色相を保ったまま暗くした版を使う（5.3:1 以上） */
.num-card__title[data-tone="blue"]   { color: var(--c-deep-blue); }
.num-card__title[data-tone="brand"]  { color: var(--c-deep-orange); }
.num-card__title[data-tone="green"]  { color: var(--c-deep-green); }
.num-card__title[data-tone="pink"]   { color: var(--c-deep-pink); }

.num-card__text {
  margin-top: var(--sp-10);
  font-size: var(--fs-md);
  line-height: 2;
}

.num-cards[data-size="sm"] .num-card__text {
  margin-top: var(--sp-12);
  line-height: 2.1;
  text-align: left;
}

/* ==========================================================================
   7. 沿革
   ========================================================================== */
.history {
  width: 100%;
  max-width: calc(860 / 16 * 1rem);
  margin: var(--sp-40) auto 0;
}

.history th,
.history td {
  padding: var(--sp-16) var(--sp-8);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px dashed var(--c-border);
  line-height: 1.9;
}

.history th[scope="row"] {
  width: calc(138 / 16 * 1rem);
  color: var(--c-text-on-light-safe);
  font-weight: var(--fw-black);
  white-space: nowrap;
}

/* ==========================================================================
   8. 箇条書き
   ========================================================================== */
.bullets { margin-top: var(--sp-12); }

.bullets li {
  padding-left: 1em;
  text-indent: -1em;
  line-height: var(--lh-body);
}

.bullets li::before { content: "・"; }

/* ==========================================================================
   9. 900px 未満
   ========================================================================== */
@media (max-width: 900px) {

  .media {
    grid-template-columns: 1fr;
    gap: var(--sp-20);
  }

  .media[data-reverse="true"] { direction: ltr; }

  .btn { padding: var(--sp-16) var(--sp-24); }

  /* 表は2段組をやめ、項目名を上に積む */
  .spec-table th[scope="row"],
  .spec-table td {
    display: block;
    width: auto;
    white-space: normal;
  }

  .spec-table th[scope="row"] {
    border-bottom: 0;
    padding-bottom: var(--sp-4);
  }

  .spec-table td[data-align="end"] { text-align: left; }

  .history th[scope="row"] {
    display: block;
    width: auto;
    border-bottom: 0;
    padding-bottom: var(--sp-4);
  }

  .history td { display: block; }
}

/* ==========================================================================
   10. 費用の表（入園案内）
   caption を見える見出しとして使う（表の題名なので div にしない）
   ========================================================================== */
.fee-tables {
  display: grid;
  gap: var(--sp-24);
  margin-top: var(--sp-40);
}

.fee-card {
  background: var(--c-surface);
  color: var(--c-on-surface);
  border-radius: var(--r-md);
  padding: var(--sp-26) var(--sp-32);
}

.fee-card table { width: 100%; }

.fee-card caption {
  caption-side: top;
  text-align: left;
  font-size: var(--fs-lg);
  font-weight: var(--fw-black);
  padding-bottom: var(--sp-12);
}

.fee-card th,
.fee-card td {
  padding: var(--sp-12) var(--sp-4);
  border-bottom: 1px dashed var(--c-border);
}

.fee-card tr:last-child th,
.fee-card tr:last-child td { border-bottom: 0; }

/* 項目名。引き渡しは橙（2.37:1）。茶に寄せて 5.85:1 */
.fee-card th[scope="row"] {
  text-align: left;
  color: var(--c-text-on-light-safe);
  font-weight: var(--fw-bold);
}

.fee-card td { text-align: right; }

/* 注記の箱（無償化について） */
.note-box {
  background: var(--c-surface-ivory);
  color: var(--c-on-surface-ivory);
  border-radius: var(--r-md);
  padding: var(--sp-26) var(--sp-32);
}

.note-box__title {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: var(--fw-black);
}

.note-box__text {
  margin-top: var(--sp-12);
  line-height: 2.1;
}

.note-box__small {
  margin-top: var(--sp-10);
  font-size: var(--fs-sm);
  line-height: 2;
  color: var(--c-text-muted);   /* 生成り地に対して 5.4:1 */
}

/* ==========================================================================
   11. ステップ一覧（入園までの流れ）
   ========================================================================== */
.flow-list {
  display: grid;
  gap: var(--sp-16);
  margin-top: var(--sp-40);
}

.flow-item {
  display: flex;
  align-items: center;
  gap: var(--sp-22);
  background: var(--c-surface);
  color: var(--c-on-surface);
  border-radius: var(--r-md);
  padding: var(--sp-22) var(--sp-26);
}

.flow-item__no {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: calc(56 / 16 * 1rem);
  height: calc(56 / 16 * 1rem);
  border-radius: var(--r-circle);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-black);
}

/* 面と文字を対で。文字は濃茶。6.2〜8.1:1 */
.flow-item__no[data-tone="blue"]  { background: var(--c-blue-light);  color: var(--c-on-blue-light); }
.flow-item__no[data-tone="brand"] { background: var(--c-brand-light); color: var(--c-on-brand-light); }
.flow-item__no[data-tone="green"] { background: var(--c-green-light); color: var(--c-on-green-light); }
.flow-item__no[data-tone="pink"]  { background: var(--c-pink);        color: var(--c-on-pink); }

.flow-item__body { flex: 1; min-width: calc(200 / 16 * 1rem); }

.flow-item__title {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: var(--fw-black);
}

.flow-item__desc {
  margin-top: var(--sp-4);
  line-height: 2;
}

/* ==========================================================================
   12. 資料ダウンロードの札
   ========================================================================== */
.dl-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(200 / 16 * 1rem)), 1fr));
  gap: var(--sp-14);
  margin-top: var(--sp-30);
}

.dl-card {
  display: block;
  padding: var(--sp-20) var(--sp-18);
  background: var(--c-surface);
  color: var(--c-on-surface);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-soft);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  text-align: center;
  text-decoration: none;
}

.dl-card:hover { text-decoration: underline; }

.dl-card__type {
  display: block;
  margin-top: var(--sp-6);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--c-text-muted);   /* 白地に対して 6.0:1 */
}

/* ==========================================================================
   13. 問い合わせ誘導の箱
   ========================================================================== */
.cta-box {
  background: var(--c-surface-ivory);
  color: var(--c-on-surface-ivory);
  border-radius: var(--r-md);
  padding: var(--sp-56) var(--sp-30);
  text-align: center;
}

.cta-box__title {
  margin: 0;
  font-size: var(--fs-2xl);
  font-weight: var(--fw-black);
}

.cta-box__text {
  margin-top: var(--sp-14);
  line-height: 2.2;
}

.cta-box__tel {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  margin-top: var(--sp-18);
  font-size: clamp(calc(24 / 16 * 1rem), 3.4vw, calc(34 / 16 * 1rem));
  font-weight: var(--fw-black);
  color: var(--c-text-brand);
  text-decoration: none;
}

.cta-box__hours {
  margin-top: var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}

.cta-box .btn { margin-top: var(--sp-26); }

/* ==========================================================================
   14. よくある質問（アコーディオン）
   ★ ネイティブの details/summary を使う。JS も ARIA も足さない
     （DADS：HTML要素で実現できるものは ARIA より優先する）
   ========================================================================== */
.faq-groups { display: grid; gap: var(--sp-44); margin-top: var(--sp-44); }

.faq-cat { display: flex; align-items: center; gap: var(--sp-12); }

.faq-cat__dot {
  flex-shrink: 0;
  width: calc(14 / 16 * 1rem);
  height: calc(14 / 16 * 1rem);
  border-radius: var(--r-circle);
}

.faq-cat__dot[data-tone="brand"]       { background: var(--c-brand); }
.faq-cat__dot[data-tone="blue"]        { background: var(--c-blue); }
.faq-cat__dot[data-tone="green"]       { background: var(--c-green); }
.faq-cat__dot[data-tone="pink"]        { background: var(--c-pink); }
.faq-cat__dot[data-tone="brand-light"] { background: var(--c-brand-light); }
.faq-cat__dot[data-tone="blue-light"]  { background: var(--c-blue-light); }

.faq-cat__name { margin: 0; font-size: var(--fs-2xl); font-weight: var(--fw-black); }

.faq-list { display: grid; gap: var(--sp-12); margin-top: var(--sp-18); }

.faq-item {
  background: var(--c-surface);
  color: var(--c-on-surface);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.faq-item__q {
  display: flex;
  align-items: center;
  gap: var(--sp-14);
  min-height: var(--tap-min);
  padding: var(--sp-18) var(--sp-20);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  cursor: pointer;
  list-style: none;
}

.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__q:hover { text-decoration: underline; }

/* 開閉は色ではなく形（＋／−）で示す */
.faq-item__mark {
  margin-left: auto;
  color: var(--c-text-brand);
  font-size: var(--fs-lg);
  font-weight: var(--fw-black);
}

.faq-item__mark::after { content: "＋"; }
.faq-item[open] .faq-item__mark::after { content: "−"; }

.faq-badge {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: calc(30 / 16 * 1rem);
  height: calc(30 / 16 * 1rem);
  border-radius: var(--r-circle);
  font-size: var(--fs-sm);
  font-weight: var(--fw-black);
}

.faq-badge[data-tone="brand"]       { background: var(--c-brand);       color: var(--c-on-brand); }
.faq-badge[data-tone="blue"]        { background: var(--c-blue);        color: var(--c-on-blue); }
.faq-badge[data-tone="green"]       { background: var(--c-green);       color: var(--c-on-green); }
.faq-badge[data-tone="pink"]        { background: var(--c-pink);        color: var(--c-on-pink); }
.faq-badge[data-tone="brand-light"] { background: var(--c-brand-light); color: var(--c-on-brand-light); }
.faq-badge[data-tone="blue-light"]  { background: var(--c-blue-light);  color: var(--c-on-blue-light); }
.faq-badge[data-tone="answer"]      { background: var(--c-page);        color: var(--c-text-brown); }

.faq-item__a {
  display: flex;
  gap: var(--sp-14);
  padding: 0 var(--sp-20) var(--sp-20);
  line-height: 2.1;
}

.faq-item__a > p { flex: 1; padding-top: var(--sp-4); margin: 0; }

/* ==========================================================================
   15. フォーム
   ★ 送信ボタンを disabled にしない。placeholder を項目名の代わりにしない
   ========================================================================== */
.form { display: grid; gap: var(--sp-22); margin-top: var(--sp-36); }

.field__label {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
}

/* 必須は色だけでなく文字でも示す */
.badge-required {
  padding: var(--sp-2) var(--sp-8);
  background: var(--c-danger);
  color: var(--c-surface);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
}

.badge-optional {
  padding: var(--sp-2) var(--sp-8);
  background: var(--c-surface-beige);
  color: var(--c-on-surface-beige);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
}

.input {
  width: 100%;
  margin-top: var(--sp-8);
  padding: var(--sp-14);
  border: 2px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-field);
  color: var(--c-on-field);
  font-size: var(--fs-md);
}

textarea.input { min-height: calc(180 / 16 * 1rem); resize: vertical; }

.input[aria-invalid="true"] { border-color: var(--c-error-line); }

.form__submit { justify-self: center; margin-top: var(--sp-8); }

/* ==========================================================================
   16. アクセス
   ========================================================================== */
.access {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--sp-32);
  margin-top: var(--sp-40);
}

.access__card {
  flex: 1;
  min-width: min(100%, calc(300 / 16 * 1rem));
  background: var(--c-surface);
  color: var(--c-on-surface);
  border-radius: var(--r-md);
  padding: var(--sp-26) var(--sp-28);
}

.access__card table { width: 100%; }

.access__card th,
.access__card td {
  padding: var(--sp-8) 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px dashed var(--c-border);
  line-height: 2.2;
}

.access__card tr:last-child th,
.access__card tr:last-child td { border-bottom: 0; }

.access__card th[scope="row"] {
  width: calc(64 / 16 * 1rem);
  color: var(--c-text-on-light-safe);
  font-weight: var(--fw-black);
  white-space: nowrap;
}

.access__map {
  flex: 1;
  min-width: min(100%, calc(300 / 16 * 1rem));
  display: grid;
  padding: var(--sp-14);
  background: var(--c-surface);
  border-radius: var(--r-md);
}

.access__map svg { width: 100%; height: 100%; min-height: calc(240 / 16 * 1rem); }

/* ==========================================================================
   17. 条文の並び（プライバシーポリシー）
   ========================================================================== */
.doc {
  background: var(--c-surface);
  color: var(--c-on-surface);
  border-radius: var(--r-md);
  padding: var(--sp-40) clamp(var(--sp-24), 5vw, calc(48 / 16 * 1rem));
  margin-top: var(--sp-44);
}

.doc__list { display: grid; gap: calc(34 / 16 * 1rem); }

.doc__title {
  margin: 0;
  padding-bottom: var(--sp-10);
  border-bottom: 2px solid var(--c-page);
  font-size: var(--fs-xl);
  font-weight: var(--fw-black);
}

.doc__text { margin-top: var(--sp-14); line-height: 2.1; }

.doc__dates {
  margin-top: var(--sp-32);
  text-align: right;
  font-size: var(--fs-sm);
  line-height: 2;
}

/* ==========================================================================
   18. サイトマップ
   ========================================================================== */
.sitemap-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(380 / 16 * 1rem)), 1fr));
  gap: var(--sp-24);
  margin-top: var(--sp-44);
  align-items: start;
}

.sitemap-col { display: grid; gap: var(--sp-24); align-content: start; }

.sitemap-card {
  background: var(--c-surface);
  color: var(--c-on-surface);
  border-radius: var(--r-md);
  padding: var(--sp-26) var(--sp-30);
}

.sitemap-card__title {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  font-size: var(--fs-lg);
  font-weight: var(--fw-black);
  color: var(--c-text-brand);
}

.sitemap-card__list { display: grid; gap: var(--sp-2); margin-top: var(--sp-12); }

.sitemap-card__link {
  display: flex;
  align-items: center;
  min-height: var(--tap-min);
  padding: var(--sp-8) 0 var(--sp-8) var(--sp-18);
  border-bottom: 1px dashed var(--c-border-lighter);
  font-size: var(--fs-md);
}

.sitemap-card__list li:last-child .sitemap-card__link { border-bottom: 0; }

/* ==========================================================================
   19. 404
   ========================================================================== */
.notfound { text-align: center; padding-block: var(--sp-90) var(--sp-160); }

.notfound__icon { width: calc(96 / 16 * 1rem); margin: 0 auto; }

.notfound__code {
  margin-top: var(--sp-20);
  font-size: var(--fs-404);
  font-weight: var(--fw-black);
  color: var(--c-text-brand);
  line-height: 1.1;
}

.notfound__title { margin: 0; font-size: var(--fs-404-title); font-weight: var(--fw-black); }

.notfound__text { margin-top: var(--sp-14); }

.notfound__popular { margin-top: var(--sp-56); font-weight: var(--fw-black); }

.notfound__links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(150 / 16 * 1rem)), 1fr));
  gap: var(--sp-14);
  margin-top: var(--sp-20);
}

/* 5枚を1行に収める。塗りボタンより控えめな見た目にする */
.notfound__links .btn {
  width: 100%;
  padding-inline: var(--sp-16);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  letter-spacing: normal;
}

/* ==========================================================================
   20. 900px 未満（追加分）
   ========================================================================== */
@media (max-width: 900px) {
  .access__card th[scope="row"],
  .access__card td { display: block; width: auto; }
  .access__card th[scope="row"] { border-bottom: 0; padding-bottom: 0; }
}

/* 電話番号だけの白い箱（お問い合わせ） */
.tel-card {
  margin-top: var(--sp-36);
  padding: var(--sp-32) var(--sp-30);
  background: var(--c-surface);
  color: var(--c-on-surface);
  border-radius: var(--r-md);
  text-align: center;
}

.tel-card .cta-box__tel { margin-top: 0; }

/* ==========================================================================
   21. お知らせ
   ⚠ 絞り込みの札は「押せる／選択中」で背景と文字が入れ替わる。
     必ず両方の状態で背景色と文字色を対で書く（片方だけ書くと読めなくなる）
   ========================================================================== */
.news-tabs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--sp-10);
}

.news-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-min);
  padding: var(--sp-10) var(--sp-24);
  border: 2px solid transparent;
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-en-sm);
  text-decoration: none;
}

/* 未選択：白地＋その分類の色 */
.news-tab[data-tone="all"]   { background: var(--c-surface); color: var(--c-text-brown); }
.news-tab[data-tone="news"]  { background: var(--c-surface); color: var(--c-deep-green); }
.news-tab[data-tone="blog"]  { background: var(--c-surface); color: var(--c-deep-blue); }
.news-tab[data-tone="event"] { background: var(--c-surface); color: var(--c-deep-orange); }

/* 選択中：色面＋白文字。背景と文字を必ず対で上書きする */
.news-tab[aria-current="true"][data-tone="all"]   { background: var(--c-text-brown); color: var(--c-surface); }
.news-tab[aria-current="true"][data-tone="news"]  { background: var(--c-green);      color: var(--c-on-green); }
.news-tab[aria-current="true"][data-tone="blog"]  { background: var(--c-blue);       color: var(--c-on-blue); }
.news-tab[aria-current="true"][data-tone="event"] { background: var(--c-brand);      color: var(--c-on-brand); }

/* 選択中は色だけでなく下線でも示す */
.news-tab[aria-current="true"] { text-decoration: underline; }

.news-list {
  margin-top: var(--sp-26);
  padding: var(--sp-14) clamp(var(--sp-20), 4vw, calc(42 / 16 * 1rem)) var(--sp-24);
  background: var(--c-surface);
  color: var(--c-on-surface);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
}

.news-row {
  display: flex;
  gap: var(--sp-18);
  align-items: center;
  padding: var(--sp-18) var(--sp-4);
  border-bottom: 1px dashed var(--c-border);
  text-decoration: none;
}

.news-list li:last-child .news-row { border-bottom: 0; }

.news-row:hover .news-row__title { text-decoration: underline; }

.news-date {
  display: block;
  flex-shrink: 0;
  width: calc(74 / 16 * 1rem);
  padding: var(--sp-10) 0;
  border-radius: var(--r-md);
  text-align: center;
  font-weight: var(--fw-black);
}

/* 面と文字を対で。淡い地に同系の暗い色。5.3:1 以上 */
.news-date[data-tone="news"]  { background: var(--c-cat-news);  color: var(--c-text-green); }
.news-date[data-tone="blog"]  { background: var(--c-cat-blog);  color: var(--c-text-blue); }
.news-date[data-tone="event"] { background: var(--c-cat-event); color: var(--c-text-brand); }

.news-date__day  { display: block; font-size: var(--fs-2xl); line-height: 1.1; }
.news-date__ym   { display: block; font-size: var(--fs-sm); font-weight: var(--fw-bold); }

.news-row__body { display: block; flex: 1; min-width: 0; }

.news-row__cat {
  display: block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-en-sm);
}

.news-row__cat[data-tone="news"]  { color: var(--c-deep-green); }
.news-row__cat[data-tone="blog"]  { color: var(--c-deep-blue); }
.news-row__cat[data-tone="event"] { color: var(--c-deep-orange); }

.news-row__title {
  display: block;
  margin-top: var(--sp-2);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  line-height: 1.8;
  color: var(--c-on-surface);
}

/* ページ送り */
.pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--sp-10);
  margin-top: var(--sp-32);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
}

.pager__step {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  padding: var(--sp-10) var(--sp-16);
  text-decoration: none;
}

.pager__step[aria-disabled="true"] { color: var(--c-text-disabled); }

.pager__num {
  display: grid;
  place-items: center;
  width: var(--tap-min);
  height: var(--tap-min);
  border-radius: var(--r-md);
  background: var(--c-surface);
  color: var(--c-on-surface);
  text-decoration: none;
}

.pager__num[aria-current="page"] {
  background: var(--c-brand);
  color: var(--c-on-brand);
  font-weight: var(--fw-black);
}

/* 記事詳細 */
.article {
  padding: clamp(var(--sp-24), 4vw, calc(48 / 16 * 1rem));
  background: var(--c-surface);
  color: var(--c-on-surface);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
}

.article__meta {
  display: flex;
  align-items: center;
  gap: var(--sp-14);
  flex-wrap: wrap;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--c-text-muted);
}

.article__cat {
  padding: var(--sp-4) var(--sp-12);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-en-sm);
}

.article__cat[data-tone="news"]  { background: var(--c-green); color: var(--c-on-green); }
.article__cat[data-tone="blog"]  { background: var(--c-blue);  color: var(--c-on-blue); }
.article__cat[data-tone="event"] { background: var(--c-brand); color: var(--c-on-brand); }

.article__title {
  margin: var(--sp-14) 0 0;
  padding-bottom: var(--sp-18);
  border-bottom: 2px solid var(--c-page);
  font-size: clamp(calc(20 / 16 * 1rem), 2.6vw, calc(26 / 16 * 1rem));
  font-weight: var(--fw-black);
  line-height: var(--lh-body);
}

.article__body > p { margin-top: var(--sp-24); line-height: 2.4; }

/* ==========================================================================
   22. 採用案内
   ========================================================================== */
.numbers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(160 / 16 * 1rem)), 1fr));
  gap: var(--sp-16);
  margin-top: var(--sp-40);
}

.number-card {
  padding: var(--sp-32) var(--sp-16);
  background: var(--c-surface-beige);
  color: var(--c-on-surface-beige);
  border-radius: var(--r-md);
  text-align: center;
}

.number-card__value {
  display: block;
  font-size: clamp(calc(30 / 16 * 1rem), 3.6vw, calc(40 / 16 * 1rem));
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-en-sm);
}

/* 大きな文字なので 3:1 が基準。橙と緑はわずかに届いていない */
.number-card__value[data-tone="blue"]   { color: var(--c-deep-blue); }
.number-card__value[data-tone="orange"] { color: var(--c-deep-orange); }
.number-card__value[data-tone="green"]  { color: var(--c-deep-green); }
.number-card__value[data-tone="pink"]   { color: var(--c-deep-pink); }

.number-card__label {
  display: block;
  margin-top: var(--sp-10);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
}

/* 先輩の声 */
.voices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(260 / 16 * 1rem)), 1fr));
  gap: var(--sp-22);
  margin-top: var(--sp-40);
}

.voice {
  padding: var(--sp-32) var(--sp-26);
  background: var(--c-surface);
  color: var(--c-on-surface);
  border-radius: var(--r-md);
  text-align: center;
}

/* 顔写真は差し替え前提のプレースホルダ */
.voice__photo {
  display: grid;
  place-items: center;
  width: calc(110 / 16 * 1rem);
  height: calc(110 / 16 * 1rem);
  margin: 0 auto;
  border-radius: var(--r-circle);
  background: var(--c-surface-beige);
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
  line-height: 1.6;
}

.voice__role {
  margin: var(--sp-16) 0 0;
  font-size: var(--fs-md);
  font-weight: var(--fw-black);
}

.voice__role[data-tone="blue"]  { color: var(--c-deep-blue); }
.voice__role[data-tone="brand"] { color: var(--c-deep-orange); }
.voice__role[data-tone="green"] { color: var(--c-deep-green); }

.voice__text { margin-top: var(--sp-12); line-height: 2.1; text-align: left; }

/* 選考の流れ */
.steps-row {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-10);
  margin-top: var(--sp-40);
}

.steps-row__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-min);
  padding: var(--sp-14) var(--sp-24);
  background: var(--c-surface-beige);
  color: var(--c-on-surface-beige);
  border-radius: var(--r-md);
  font-size: var(--fs-md);
  font-weight: var(--fw-black);
}

.steps-row__item[data-tone="blue"]  { color: var(--c-deep-blue); }
.steps-row__item[data-tone="brand"] { color: var(--c-deep-orange); }
.steps-row__item[data-tone="green"] { color: var(--c-deep-green); }
.steps-row__item[data-tone="pink"]  { color: var(--c-deep-pink); }

.steps-row__sep { color: var(--c-text-faint); }

/* エントリー */
.entry-box {
  margin-top: var(--sp-40);
  padding: var(--sp-40) var(--sp-30);
  background: var(--c-surface-beige);
  color: var(--c-on-surface-beige);
  border-radius: var(--r-md);
  text-align: center;
}

.entry-box__tel {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  margin-top: var(--sp-20);
  font-size: clamp(calc(24 / 16 * 1rem), 3.4vw, calc(34 / 16 * 1rem));
  font-weight: var(--fw-black);
  color: var(--c-text-brand);
  text-decoration: none;
}