/* スマホ版 WCAG 2.2 AA 対応（1.4.4 / 1.4.10 / 1.4.12 / 2.5.8）。各ページの CSS の後に読む */

.sp-text { display: none; }

@media (max-width: 767px) {
  /* ヘッダーは白背景なし */
  .site-header, .site-header.is-solid { background: transparent; }
  /* 肩書きは小さめに（9px だと読みにくいので 11px） */
  .member-role, .supporter-role, .teacher-role { font-size: 11px; line-height: 16px; }
  /* 段落の最終行が半分未満にならないよう行長をそろえる */
  .top-about-text br { display: none; }
  .top-about-text p { text-wrap: balance; }
  p, dd, .cls-lead, .sp-text { text-wrap: pretty; }

  /* 左右の余白は TOP メッセージ文の左端（22px）に統一 */
  :root { --gutter: 22px; }
  /* メッセージの文章は、左右の余白を同じにして、画面の真ん中に置く（行の頭は左揃え） */
  .top-message-pin { justify-content: center; }
  .top-message-text { width: max-content; max-width: 100%; }
  /* 「つくるを通していきるを学ぶ」は、画面の真ん中に（文字の間隔の余白ぶんも合わせる） */
  .top-catch { width: 100%; text-align: center; padding-left: 0.06em; }
  /* 2.5.8 タップ領域 */
  .burger { box-sizing: border-box; width: 44px; height: 44px; padding: 15px 8px; top: calc(var(--hd-mid) - 22px); right: 14px; place-items: center; }
  .menu-close { top: calc(var(--hd-mid) - 22px); right: 14px; min-width: 44px; min-height: 44px; display: grid; place-items: center; }
  .footer-list a, .footer-sub a, .menu-panel a { display: inline-block; min-height: 24px; padding: 5px 0; line-height: 24px; }
  /* フッターとメニューの小項目：文字の行も画像（SVG）の行も、同じ高さの行にそろえる */
  .footer-list a { display: flex; align-items: center; min-height: 34px; padding: 0; }
  .footer-list .nav-svg { height: 30px; width: auto; max-width: none; }
  .menu-list { gap: 0; }
  .menu-list a { display: flex; align-items: center; min-height: 36px; padding: 0; }
  .menu-list .nav-svg { height: 24px; width: auto; max-width: none; }
  .footer-list { line-height: 34px; font-size: 15px; }
  .dn-check, .dn-submit label { min-height: 24px; align-items: center; }
  .dn-check input { width: 24px; height: 24px; }

  /* 1.4.4 文字サイズ：本文 16、注釈・肩書 14 以上 */
  .top-about-text { font-size: 16px; line-height: 32px; }
  .supporter-comment, .supporter-comment p { font-size: 16px; line-height: 28px; }
  .cls-text, .tl-text, .dn-p, .faq-a p, .da-step-body p, .co-v14, .co-v16, td, th, dt, dd { font-size: 16px; line-height: 28px; }
  .cls-note, .dn-note-s, .dn-req, .faq-group-h, .da-step-name, .dn-check span, .dn-field label { font-size: 14px; line-height: 22px; }
  .co-num, .dn-num, .dn-who, .dn-go, .dn-cta-label small, .dn-ph span, .da-tax-cap, .da-tax-bar span, .da-tax-legend span { font-size: 14px; line-height: 22px; }
  .footer-copy, .menu-copy, .footer-sub, .footer-sub a, .more span { font-size: 14px; }

  /* 説明文は SVG の代わりに実テキストを見せる（折り返し・拡大に追従） */
  .school-line, .act-line, .school-desc-svg, .act-desc-svg { display: none; }
  .sp-text { display: block; width: fit-content; max-width: 100%; font-size: 16px; line-height: 28px; background: var(--paper); padding: 8px 12px; }
  /* アートスクールページの説明文は、白い背景なしで、白い文字＋影で写真の上に置く */
  /* アートスクールのページは、PC と同じ「白い帯に墨色の文字」（SVG）を、スマホでも使う。実テキストは出さない */
  .school .sp-text { display: none; }
  .school .school-line, .school .school-desc-svg { display: block; }

  /* 1.4.10 リフロー：長い行は折り返す */
  .top-catch { white-space: normal; overflow-wrap: anywhere; }
  .cls-title img, .school-title img, .cls-en img, .school-en img { max-width: 100%; height: auto; }

  /* 5 列の料金表は区分ごとの縦積みに */
  .fee--5, .fee--5 tbody { display: block; width: 100%; }
  .fee--5 thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .fee--5 tr { display: block; padding: 8px 0; border-bottom: 1px solid #d9d9d9; }
  .fee--5 td { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border: 0; }
  .fee--5 td::before { content: attr(data-label); opacity: 0.7; }
  .fee--5 td:empty { display: none; }

  /* 優先度の高い既存指定の上書き */
  .fee th, .fee td, .fee .col-1, .fee .col-2, table th, table td, dl dt, .cls-sec dt { font-size: 14px !important; line-height: 22px !important; }
  .fee td { font-size: 16px !important; line-height: 24px !important; }
  .da-tax-bar span, .da-tax-legend span, span.dn-ph { font-size: 14px !important; }

  /* 拡大時（幅 188px 相当）も折り返す */
  .footer-list { display: flex; flex-direction: column; align-items: flex-start; }
  .footer-list li, .footer-list a { max-width: 100%; }
  img.nav-svg, .menu-panel img, .da-furusato-text img, .dn-who img, .dn-cta-label img { max-width: 100%; height: auto; }
  .dn-who, .dn-cta-label, .dn-cta-label small, .da-furusato-text, .da-furusato-text p { min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }

  .act:not(.act--bleed) .sp-text { padding: 8px 0; background: none; }
  .dn-who img { max-width: 100% !important; width: auto !important; height: auto !important; }

  .dn-method { grid-template-columns: minmax(0, 1fr) auto; }

  /* 応援メンバーの声：5 行まで＋もっと読む */
  .supporter-comment.is-clamped p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden; }
  .supporter-comment.is-clamped.is-open p { display: block; -webkit-line-clamp: none; overflow: visible; }
  .read-more { display: inline-grid; place-items: center; align-self: flex-end; width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; }
  .read-more img { width: 22px; height: auto; transition: transform 0.25s ease-out; }
  .is-open .read-more img { transform: rotate(45deg); }
  .read-more[hidden] { display: none; }
}

.read-more { display: none; }
@media (max-width: 767px) { .read-more:not([hidden]) { display: inline-grid; } }