/* MOAI デザインシステム（docs/design-system/）をサイト全体に当てる層。
   v0.3 層（moai-v03-*.css）の置き換え。本文・フォーム・計測の動きは変えず、見た目だけを上書きする。
   値は tokens.css（--color-* など）から取る。新しい色をここで作らない。 */

body.moai-ds {
  /* 旧テーマ・教育ページ・CAMPページの変数を、デザインシステムの値へ寄せる */
  --edu-ink: var(--color-ink); --edu-muted: var(--color-muted); --edu-paper: var(--color-white); --edu-line: var(--color-border);
  --edu-teal: var(--color-primary); --edu-coral: var(--color-cta); --edu-sand: var(--color-canvas); --edu-sea: var(--color-surface-mist);
  --ink: var(--color-ink); --green: var(--color-primary); --teal: var(--color-primary); --teal-dark: var(--color-deep);
  --cream: var(--color-canvas); --coral: var(--color-cta); --line: var(--color-border); --muted: var(--color-muted);
  --color-primary-dark: var(--color-deep); --color-surface-soft: var(--color-surface-mist); --color-surface-cream: var(--color-canvas);
  --color-body: var(--color-ink); --color-mute: var(--color-muted); --color-link: var(--color-primary);
  background: var(--color-canvas);
  color: var(--color-ink);
  font-family: var(--font-body);
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
}
body.moai-ds :is(h1, h2, h3, h4) { font-family: var(--font-body); font-weight: 700; color: var(--color-heading); text-wrap: pretty; }
body.moai-ds a { color: var(--color-primary); }
body.moai-ds :is(a, button, input, textarea, select, summary):focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }

/* ── ボタン：主ボタンは焦げ橙のグラデーション、二番目は白地＋ティールの線 ── */
body.moai-ds :is(.edu-button, .button, .btn, .wpcf7-submit, .btn--primary) {
  box-sizing: border-box; max-width: 100%; min-height: 54px; padding: 12px 28px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid var(--color-cta-border) !important; border-radius: var(--radius-pill) !important;
  background: linear-gradient(180deg, var(--color-cta-top) 0%, var(--color-cta) 100%) !important;
  color: var(--color-on-dark) !important; box-shadow: var(--shadow-cta) !important; text-shadow: none;
  font: 700 15px/1.6 var(--font-body); letter-spacing: .02em; text-decoration: none; white-space: normal; overflow-wrap: anywhere;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
body.moai-ds :is(.edu-button, .button, .btn, .wpcf7-submit, .btn--primary):hover {
  background: linear-gradient(180deg, var(--color-cta-hover-top) 0%, var(--color-cta-hover) 100%) !important;
  border-color: var(--color-cta-hover-border) !important; box-shadow: var(--shadow-cta-hover) !important;
  color: var(--color-on-dark) !important; transform: translateY(-1px);
}
body.moai-ds :is(.edu-button, .button, .btn, .wpcf7-submit, .btn--primary):active { transform: scale(.96); }
body.moai-ds :is(.edu-button-outline, .button.outline, .btn--outline, .btn--secondary, .session-select, .blog-cluster-guide__link, .edu-button.edu-button-outline) {
  background: var(--color-paper) !important; color: var(--color-primary) !important;
  border: 1px solid var(--color-outline) !important; box-shadow: var(--shadow-outline) !important;
}
body.moai-ds :is(.edu-button-outline, .button.outline, .btn--outline, .btn--secondary, .session-select, .blog-cluster-guide__link):hover {
  background: var(--color-primary-soft) !important; color: var(--color-primary) !important;
  border-color: var(--color-outline-hover) !important; box-shadow: var(--shadow-outline) !important;
}
body.moai-ds :is(.edu-button-small, .button.compact, .site-header__cta, .btn--sm) { min-height: 42px; padding: 8px 18px; font-size: 14px; }
body.moai-ds :is(.edu-button, .button, .btn, .wpcf7-submit):is(:disabled, [aria-disabled="true"]) {
  background: var(--color-hairline) !important; color: var(--color-muted) !important; border-color: var(--color-border) !important;
  box-shadow: none !important; transform: none; cursor: not-allowed;
}
body.moai-ds :is(.edu-text-link, .text-link, .hero-consult, .sticky-consult) { color: var(--color-primary); text-underline-offset: 4px; font-weight: 700; }

/* ── ヘッダー ── */
body.moai-ds :is(.edu-header, .site-header, .header) {
  background: rgba(245, 249, 248, .94); color: var(--color-heading);
  border-bottom: 1px solid var(--color-hairline); box-shadow: none;
}
body.moai-ds :is(.edu-header, .site-header, .header) :is(nav a:not(.edu-button):not(.btn):not(.button), .brand, .brand b, .brand span, .edu-brand, .edu-brand b, .edu-brand span) { color: var(--color-heading); }
body.moai-ds :is(.edu-header, .header) nav.is-open { background: var(--color-canvas); border-bottom: 1px solid var(--color-hairline); }
body.moai-ds :is(.edu-menu-toggle, .menu-toggle, .site-header__toggle, .site-nav__close, .dialog-close) {
  min-height: 44px; min-width: 44px; border: 1px solid var(--color-outline); border-radius: var(--radius-pill);
  background: var(--color-paper); color: var(--color-primary);
}
body.moai-ds :is(.edu-sticky, .camp-sticky-cta) { background: rgba(255, 255, 255, .96); border-top: 1px solid var(--color-hairline); box-shadow: var(--shadow-sm); }

/* ── 地・帯 ── */
body.moai-ds :is(.edu-hero-band, .page-hero, .ai-work-guide__header) { background: var(--color-canvas); color: var(--color-ink); }
body.moai-ds .edu-hero-band:before { display: none; }
body.moai-ds :is(.edu-entries-band, .program) { background: var(--color-surface-mist); color: var(--color-ink); }
body.moai-ds :is(.program) :is(h2, h3) { color: var(--color-heading); }
body.moai-ds :is(.program) :is(p, .small-note, .day-head > span, .days li > span) { color: var(--color-ink); }

/* 英字ラベル・小見出し */
body.moai-ds :is(.edu-eyebrow, .eyebrow, .section__label, .ai-work-guide__eyebrow) {
  color: var(--color-cta-text) !important; font-family: var(--font-heading-en); font-weight: 700; letter-spacing: .1em;
}
/* 見出しの強調語は黄色のマーカー */
body.moai-ds :is(.edu-hero h1 em, .page-hero__title em, .hero-copy h1 em) {
  font-style: normal; color: inherit; -webkit-text-fill-color: currentColor;
  background: linear-gradient(transparent 62%, var(--color-marker) 62%); padding: 0 .06em;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}

/* ── カード：白地・淡い枠・ぼかさない影 ── */
body.moai-ds :is(.edu-hero-art, .edu-study-visual, .edu-hero-film, .moai-section-image) {
  border: 1px solid var(--color-border); border-radius: var(--radius-xl); box-shadow: var(--shadow-paper); background: var(--color-white); overflow: hidden;
}
body.moai-ds .edu-hero-art figcaption { background: var(--color-white); color: var(--color-muted); }
body.moai-ds :is(.edu-choose-card, .edu-theme-card, .edu-sched-item, .edu-study-past-item, .edu-live-list, .edu-start-path, .plan, .camp-session, .date-panel, .card, .ai-work-guide__card, .blog-cluster-guide, .corporate-training__cards > article, .edu-project-grid article) {
  border: 1px solid var(--color-border); border-radius: var(--card-radius); box-shadow: var(--shadow-paper);
  background: var(--color-white); color: var(--color-ink);
}
body.moai-ds :is(.edu-next-study, .edu-next-card) {
  border: 2px solid var(--color-cta); border-radius: 20px; box-shadow: 0 6px 0 var(--color-border-warm);
  background: var(--color-white); color: var(--color-ink);
}
body.moai-ds :is(.edu-choose-camp, .edu-camp-invitation, .camp-from-study) {
  background: linear-gradient(180deg, var(--color-white) 0%, var(--color-surface-warm) 100%); border-color: var(--color-border-warm);
}
body.moai-ds :is(.edu-choose-basic, .camp-school-note) {
  background: linear-gradient(180deg, var(--color-white) 0%, var(--color-surface-green) 100%); border-color: var(--color-border-green);
}
body.moai-ds .edu-choose-corporate { background: none; border: 0; box-shadow: none; }
/* バッジ */
body.moai-ds :is(.edu-choose-badge, .edu-study-free-badge, .session-status, .hero-tags span, .blog-card__cat) {
  display: inline-flex; align-items: center; background: var(--color-primary-soft); color: var(--color-primary);
  border: 0; border-radius: var(--radius-pill); padding: 2px 12px; font-size: 12px; font-weight: 700; line-height: 1.6;
}
body.moai-ds :is(.edu-choose-badge-open, .edu-study-free-badge) { background: var(--color-cta-soft); color: var(--color-cta-ink); }
body.moai-ds .edu-choose-badge-live { background: var(--color-success-soft); color: var(--color-success); }
body.moai-ds :is(.edu-required, .req) {
  display: inline-block; white-space: nowrap; background: none; border: 0; padding: 0 0 0 4px;
  color: var(--color-required); font-size: 10px; font-weight: 700;
}
body.moai-ds :is(.edu-community, .camp-line) {
  border: 1px solid var(--color-border); border-radius: var(--card-radius); box-shadow: var(--shadow-paper); background: var(--color-white);
}

/* ── フォーム ── */
body.moai-ds :is(.edu-form-panel, .edu-apply-panel, .contact-form, .corporate-training__consult) {
  background: var(--color-paper); border: 1px solid var(--color-border); border-radius: var(--panel-radius);
  box-shadow: var(--shadow-paper); padding: 32px;
}
body.moai-ds .edu-form-label {
  display: inline-flex; align-items: center; padding: 2px 14px; border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--color-badge-bg) 0%, var(--color-badge-bg-end) 100%);
  color: var(--color-warning); font-size: 12px; font-weight: 700;
}
body.moai-ds :is(.wpcf7-form, .contact-form, .moai-blog-search, .edu-notice-form, #apply) :is(input:not([type=submit], [type=checkbox], [type=radio], [type=hidden]), select, textarea) {
  box-sizing: border-box; max-width: 100%; width: 100%; min-height: 48px; padding: 10px 14px;
  border: 1px solid var(--color-input-border); border-radius: var(--radius-md); background: var(--color-input-bg);
  color: var(--color-ink); font-size: 16px; line-height: 1.6; box-shadow: none;
}
body.moai-ds :is(.wpcf7-form, .contact-form, .moai-blog-search, .edu-notice-form, #apply) :is(input, select, textarea):focus {
  border-color: var(--color-focus); box-shadow: var(--shadow-focus); background: var(--color-white); outline: none;
}
body.moai-ds :is(.wpcf7-form, .contact-form, #apply) :is(input[type=checkbox], input[type=radio]) { accent-color: var(--color-label); width: 20px; height: 20px; flex-shrink: 0; }
body.moai-ds :is(.wpcf7-form, .contact-form, #apply) :is(input, textarea, select)[aria-invalid="true"] { border-color: var(--color-error); }
body.moai-ds :is(.wpcf7-not-valid-tip, .migration-form-error) { color: var(--color-error); font-size: 14px; }
body.moai-ds .wpcf7-acceptance .wpcf7-list-item-label { font-size: 13px; }

/* ── よくある質問 ── */
body.moai-ds :is(.edu-faq, .faq-list, .article-cluster-faq__list) details {
  background: var(--color-white); color: var(--color-ink); border: 1px solid var(--color-border);
  border-radius: var(--card-radius); box-shadow: var(--shadow-paper); margin-bottom: 14px;
}
body.moai-ds :is(.edu-faq, .faq-list, .article-cluster-faq__list) summary { padding: 18px 44px 18px 20px; color: var(--color-heading); font-weight: 700; }
body.moai-ds :is(.edu-faq, .faq-list, .article-cluster-faq__list) details > p { padding-inline: 20px; padding-bottom: 20px; color: var(--color-ink); }
body.moai-ds :is(.edu-faq, .faq-list, .article-cluster-faq__list) summary:after { right: 18px; color: var(--color-primary); }

/* ── CAMP / BASIC：動画の上の文字は白い紙面に ── */
body.moai-ds .hero-copy {
  background: rgba(255, 255, 255, .96); color: var(--color-ink); border: 1px solid var(--color-border);
  border-radius: var(--card-radius); box-shadow: var(--shadow-paper); padding: 32px;
}
body.moai-ds .hero-copy :is(h1, p, .intro, .hero-reassurance, .hero-offer) { color: var(--color-ink); text-shadow: none; }
body.moai-ds .hero-copy h1 { color: var(--color-heading); }
body.moai-ds .preview { background: var(--color-surface-mist); color: var(--color-heading); border-bottom: 1px solid var(--color-border); }
body.moai-ds .contact-form .wpcf7-form > p { margin-block: 0 22px; }
body.moai-ds .contact-form .wpcf7-form > p > label { display: block; margin-bottom: 8px; color: var(--color-label); font-weight: 700; }

/* ── 締めの帯とフッター：深ティール ── */
body.moai-ds :is(.edu-closing, .closing) { background: var(--color-deep); color: var(--color-on-dark); }
body.moai-ds :is(.edu-closing, .closing) :is(h2, h3, p, .small-note, .day-head > span, .days li > span, .edu-closing-lead) { color: var(--color-on-dark) !important; }
body.moai-ds :is(.edu-closing, .closing) :is(.edu-eyebrow, .eyebrow) { color: var(--color-on-dark-mute) !important; }
body.moai-ds :is(.edu-closing, .closing) :is(.edu-button-outline, .button.outline, .btn--outline) {
  background: transparent !important; color: var(--color-on-dark) !important; border-color: rgba(255, 255, 255, .6) !important; box-shadow: none !important;
}
body.moai-ds :is(.edu-closing, .closing) .text-link { color: var(--color-on-dark); }
body.moai-ds :is(.edu-footer, .camp-footer, .site-footer) { background: var(--color-deep); color: var(--color-on-dark); border-top: 0; }
body.moai-ds :is(.edu-footer, .camp-footer, .site-footer) :is(p, a, span, b, small, li, .site-footer__social-heading, .site-footer__tagline) { color: var(--color-on-dark) !important; }
body.moai-ds :is(.edu-footer, .camp-footer, .site-footer) :is(p, small, .site-footer__social-addr, .site-footer__copyright) { color: var(--color-on-dark-mute) !important; }
/* ロゴは描き直さず、白い台紙に載せて深ティールの上に置く */
body.moai-ds :is(.edu-footer, .camp-footer, .site-footer) :is(.edu-brand img, .site-footer__logo-img) { background: var(--color-white); border-radius: 12px; padding: 4px; box-sizing: content-box; }
body.moai-ds .edu-footer.edu-shell { box-shadow: 0 0 0 100vmax var(--color-deep); clip-path: inset(0 -100vmax); }
body.moai-ds .site-footer__bottom { background: rgba(0, 0, 0, .12); border-color: var(--color-hairline-on-dark); }

/* ── 動き：控えめに。アイちゃんの絵は動かさない ── */
@media (prefers-reduced-motion: reduce) {
  body.moai-ds :is(.edu-button, .button, .btn, .wpcf7-submit, .btn--primary, .session-select) { transition: none; }
  body.moai-ds :is(.edu-button, .button, .btn, .wpcf7-submit, .btn--primary, .session-select):is(:hover, :active) { transform: none; }
}

/* ── スマホ ── */
@media (max-width: 639px) {
  body.moai-ds :is(.edu-button, .button, .btn, .wpcf7-submit, .session-select) { min-height: 50px; padding: 10px 20px; font-size: 15px; }
  body.moai-ds :is(.edu-button-small, .site-header__cta, .camp-sticky-cta .button, .edu-sticky .edu-button) { min-height: 44px; font-size: 14px; padding: 8px 16px; }
  body.moai-ds :is(.edu-form-panel, .edu-apply-panel, .contact-form, .corporate-training__consult, .hero-copy) { padding: 20px; border-radius: 14px; }
  body.moai-ds .hero-copy { max-width: 100%; width: 100%; }
}

/* ── 勉強会ページの申込みフォーム（ID付きの旧ルールに合わせた詳細度） ── */
body.moai-ds.moai-study-hub #apply :is(input[type=text], input[type=email], textarea) { border: 1px solid var(--color-input-border); border-radius: var(--radius-md); box-shadow: none; }
body.moai-ds.moai-study-hub #apply input[type=submit] { border-radius: var(--radius-pill); }
body.moai-ds.moai-study-hub #apply .wpcf7-radio label { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-white); }
body.moai-ds.moai-study-hub #apply .wpcf7-radio label:has(input:checked) { background: var(--color-primary-soft); border-color: var(--color-primary); box-shadow: none; }

/* 法人研修の入れ子フォーム */
body.moai-ds .corporate-training .ai-work-guide__cta { background: var(--color-surface-mist); color: var(--color-ink); border: 1px solid var(--color-border); border-radius: var(--card-radius); }
body.moai-ds .corporate-training .ai-work-guide__cta :is(h2, p, label) { color: var(--color-ink); }
@media (max-width: 639px) { body.moai-ds .corporate-training .ai-work-guide__cta { padding: 16px 12px; } body.moai-ds .corporate-training__consult { padding: 16px 12px; } }

/* BASIC: スマホはメニューと下部固定CTAで案内し、ヘッダーの縦折れを防ぐ。 */
@media (max-width: 620px) {
  body.moai-ds .basic-header > .button.compact { display: none; }
  body.moai-ds .basic-header .menu-toggle { flex-shrink: 0; white-space: nowrap; }
  body.moai-ds .basic-header .brand { min-width: 0; }
}