@charset "UTF-8";
/* =========================================================
   MONDO LP  (static, build-free)
   - Figma: master / desktop (1920w)
   - tokens are mirrored from Figma variables
   ========================================================= */

/* ---- design tokens ---- */
:root {
  --mondo-primary: #4669a8;
  --mondo-secondary: #ff8400;
  --mondo-surface: #ffffff;
  --mondo-on-primary: #ffffff;
  --mondo-on-surface: #424242;
  --mondo-primary-text: #4669a8;
  --mondo-outline: #bdbdbd;
  --mondo-shadow-3: 0 4px 8px 3px rgba(0, 0, 0, .30), 0 1px 3px rgba(0, 0, 0, .20);

  /* font sizes — base = standard desktop (1281–1919px).
     Scaled up at ≥1920 (wide) and down at ≤1280 (small laptop). */
  --mondo-fs-3xs: 10px;
  --mondo-fs-sm: 16px;
  --mondo-fs-md: 17px;
  --mondo-fs-lg: 19px;
  --mondo-fs-xl: 22px;
  --mondo-fs-2xl: 28px;
  --mondo-fs-h3: 26px;
  --mondo-fs-title: 44px;
  --mondo-r-scale: 1;
  --mondo-sp-scale: 1;

  --mondo-header: 64px;
}

/* ---- reset / base ---- */
.mondo *,
.mondo *::before,
.mondo *::after { box-sizing: border-box; }

.mondo {
  margin: 0;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  color: var(--mondo-on-surface);
  line-height: 1.5;
  background: var(--mondo-primary);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.mondo img { max-width: 100%; }
.mondo a { color: inherit; text-decoration: none; }
.mondo p { margin: 0; }

.material-symbols-outlined {
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-variation-settings: "FILL" 0, "GRAD" 0, "opsz" 24;
}

/* =========================================================
   header
   ========================================================= */
.mondo-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--mondo-primary);
  height: var(--mondo-header);
  transition: transform .3s ease, box-shadow .25s ease;
  will-change: transform;
}
/* hidden while actively scrolling (re-shown when scrolling stops) */
.mondo-header.is-hidden { transform: translateY(-100%); }
/* shadow whenever the page is scrolled away from the very top */
.mondo-header.is-scrolled { box-shadow: 0 2px 12px rgba(0, 0, 0, .18); }

.mondo-header__inner {
  max-width: 1872px;
  height: 100%;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.mondo-header__logo { flex: 0 0 auto; }
.mondo-header__logo img { display: block; width: 208px; height: auto; }

.mondo-header__nav {
  display: flex;
  align-items: center;
  gap: 16px;
}

.mondo-header__nav > a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 120px;
  height: 64px;
  color: var(--mondo-on-primary);
  font-weight: 600;
  font-size: var(--mondo-fs-sm);
  white-space: nowrap;
  transition: opacity .2s;
}
.mondo-header__nav > a:hover { opacity: .75; }

.mondo-header__cta {
  gap: 6px;
  width: 200px;
  min-width: 200px;
  height: 40px;
  padding: 0 16px;
  border-radius: 88px;
  background: var(--mondo-secondary);
  color: var(--mondo-on-primary);
}
.mondo-header__nav > a.mondo-header__cta { height: 40px; }
.mondo-header__cta .material-symbols-outlined { font-size: 24px; }
.mondo-header__cta span:last-child { font-weight: 600; font-size: var(--mondo-fs-md); }

/* =========================================================
   hero (top)
   ========================================================= */
/* each top-level section fills at least the viewport height */
.mondo main > section { min-height: 100vh; }

.mondo-hero {
  position: relative;
  background: var(--mondo-primary);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* big white circle that forms the curved bottom of the hero (Figma 6000px circle) */
.mondo-hero__bg {
  position: absolute;
  width: 6000px;
  height: 6000px;
  left: calc(50% + 320px);
  transform: translateX(-50%);
  top: 430px;
  border-radius: 50%;
  background: var(--mondo-surface);
  z-index: 0;
  pointer-events: none;
}

.mondo-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 1703px;
  margin: 0 auto;
  padding: 48px 16px 56px;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 24px;
}

/* ---- left column : badge + logo (top), characters (bottom) ---- */
.mondo-hero__left {
  width: 48%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.mondo-hero__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

/* pill + MONDO logo combined into a single transparent image (hero-logo.png) */
img.mondo-hero__logo {
  display: block;
  width: 100%;
  max-width: 540px;
  height: auto;
}

.mondo-hero__people {
  width: 100%;
  max-width: 680px;
  margin-top: auto;
}
.mondo-hero__people img { display: block; width: 100%; height: auto; }

/* ---- right column : catch (top) + phone / dashboard composite ---- */
.mondo-hero__right {
  width: 52%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* single combined image (phone + dashboard + catch copy baked in) */
.mondo-hero__app {
  display: block;
  width: 100%;
  height: auto;
}

/* =========================================================
   shared
   ========================================================= */
.mondo-section-title {
  margin: 0;
  font-weight: 700;
  font-size: var(--mondo-fs-title);
  line-height: 1.25;
  text-align: center;
  color: var(--mondo-on-surface);
}

/* =========================================================
   about (MONDOとは？)
   ========================================================= */
.mondo-about { background: var(--mondo-surface); padding-bottom: calc(96px * var(--mondo-sp-scale)); }
.mondo-about__card {
  max-width: 1280px;
  margin: 0 auto;
  padding: calc(80px * var(--mondo-sp-scale)) calc(24px * var(--mondo-sp-scale)) 0;
}
.mondo-about__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(48px * var(--mondo-sp-scale));
}

.mondo-about__hero {
  display: flex;
  gap: 32px;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
}
.mondo-about__person { display: block; flex: none; }
.mondo-about__person--l { width: 134px; height: auto; }
.mondo-about__person--r { width: 107px; height: auto; }

.mondo-about__center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  flex: 0 1 622px;
  width: 622px;
  max-width: 100%;
}

.mondo-about__bubble {
  position: relative;
  background: var(--mondo-primary);
  border-radius: 999px;
  padding: 32px;
  color: var(--mondo-on-primary);
  text-align: center;
  width: 100%;
}
.mondo-about__bubble-sub {
  font-size: var(--mondo-fs-2xl);
  font-weight: 600;
  line-height: 1.5;
}
.mondo-about__bubble-sub strong { font-size: inherit; font-weight: 600; }
.mondo-about__bubble-main {
  font-size: var(--mondo-fs-2xl);
  font-weight: 600;
  line-height: 1.5;
}
.mondo-about__bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -18px;
  transform: translateX(-50%);
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 19px solid var(--mondo-primary);
}

.mondo-about__pills {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.mondo-about__pill {
  flex: 1 1 0;
  min-width: 0;
  max-width: 171px;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border-radius: 50%;
  font-weight: 600;
  font-size: var(--mondo-fs-xl);
  color: var(--mondo-on-surface);
  text-align: center;
}
.mondo-about__pill--a { background: #edd5de; }
.mondo-about__pill--b { background: #e1f2d7; }
.mondo-about__pill--c { background: #dee8ff; }
.mondo-about__times { width: 23px; height: 23px; flex: none; }

.mondo-about__lead {
  max-width: 622px;
  font-size: var(--mondo-fs-lg);
  line-height: 1.5;
  text-align: center;
  color: var(--mondo-on-surface);
}

/* recommend block ("こんな先生・学校様におすすめ") */
.mondo-about__recommend {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(56px * var(--mondo-sp-scale));
  width: 100%;
  margin-top: calc(124px * var(--mondo-sp-scale));
}
.mondo-about__rec-title {
  margin: 0;
  font-weight: 700;
  font-size: var(--mondo-fs-xl);
  color: var(--mondo-primary-text);
}
.mondo-about__rec-title span { position: relative; display: inline-block; }
/* 共通: rec-title / origin タイトルの装飾スパーク（位置をここで一括管理） */
.mondo-about__rec-spark,
.mondo-origin__spark { position: absolute; top: -8px; right: -20px; width: 23px; height: 9px; transform: rotate(45deg); }

.mondo-about__features {
  display: flex;
  gap: calc(48px * var(--mondo-sp-scale));
  align-items: stretch;
  justify-content: center;
  width: 100%;
}
.mondo-about__col {
  flex: 1 1 400px;
  min-width: 0;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
}

/* callout = icon above a pill with a chevron pointing toward the phone */
.mondo-callout { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.mondo-callout__icon { display: flex; align-items: center; justify-content: center; width: 68px; height: 68px; flex: none; }
.mondo-callout__icon img { display: block; width: 100%; height: 100%; object-fit: contain; }
.mondo-callout__box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  flex: 1 1 auto;
  min-height: 88px;
  padding: 16px;
  border-radius: calc(16px * var(--mondo-r-scale));
  background: rgba(218, 225, 238, .5);
  font-weight: 600;
  font-size: var(--mondo-fs-lg);
  line-height: 1.25;
  color: var(--mondo-on-surface);
  text-align: center;
}
.mondo-callout__box::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: 10px solid transparent;
}
.mondo-callout--l .mondo-callout__box::after { left: 100%; border-left-color: rgba(218, 225, 238, .5); }
.mondo-callout--r .mondo-callout__box::after { right: 100%; border-right-color: rgba(218, 225, 238, .5); }

/* recommend phone — the image already includes the device frame, so no CSS mockup */
.mondo-about__phone {
  flex: none;
  align-self: center;
  width: 232px;
  max-width: 100%;
}
.mondo-about__phone img {
  display: block;
  width: 100%;
  height: auto;
}

/* =========================================================
   origin (由来・目指す先)
   ========================================================= */
.mondo-origin {
  background: linear-gradient(to bottom, #ffffff 0%, #dae1ee 50%, #dae1ee 100%);
  padding: calc(160px * var(--mondo-sp-scale)) calc(24px * var(--mondo-sp-scale));
}
.mondo-origin__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.mondo-origin__row {
  display: flex;
  gap: calc(40px * var(--mondo-sp-scale));
  align-items: center;
  width: 100%;
}
.mondo-origin__group {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  gap: 24px;
  align-items: center;
}
.mondo-origin__group--right { justify-content: flex-end; }

.mondo-origin__person { display: block; flex: none; align-self: flex-start; }
.mondo-origin__person--l { width: 80px; height: auto; }
.mondo-origin__person--r { width: 106px; height: auto; align-self: center; }

.mondo-origin__text {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.mondo-origin__title {
  margin: 0;
  font-weight: 600;
  font-size: var(--mondo-fs-2xl);
  line-height: 1.25;
  text-align: center;
  color: var(--mondo-primary-text);
}
.mondo-origin__title span { position: relative; display: inline-block; }
.mondo-origin__box {
  background: rgba(255, 255, 255, .4);
  border-radius: calc(32px * var(--mondo-r-scale));
  padding: 24px 28px;
}
.mondo-origin__box p {
  font-size: var(--mondo-fs-lg);
  line-height: 1.8;
  color: var(--mondo-on-surface);
}

.mondo-origin__photo {
  flex: none;
  width: 400px;
  height: 400px;
  border-radius: 999px;
  overflow: hidden;
}
.mondo-origin__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* =========================================================
   features (機能紹介)
   ========================================================= */
.mondo-features { background: var(--mondo-surface); padding: calc(80px * var(--mondo-sp-scale)) calc(24px * var(--mondo-sp-scale)); }
.mondo-features__inner { max-width: 1280px; margin: 0 auto; }
.mondo-features__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: calc(64px * var(--mondo-sp-scale));
}
.mondo-features__caption {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: var(--mondo-fs-sm);
  color: var(--mondo-primary-text);
}
.mondo-features__caption span {
  display: block;
  width: 1px;
  height: 28px;
  background: var(--mondo-primary-text);
}
.mondo-features__caption span:first-child { transform: rotate(-25deg); }
.mondo-features__caption span:last-child { transform: rotate(25deg); }

.mondo-feat {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-top: calc(120px * var(--mondo-sp-scale));
}

.mondo-feat__text { flex: 1 1 0; min-width: 0; }
.mondo-feat__art { flex: 0 0 500px; max-width: 500px; }
.mondo-feat__art img { display: block; width: 100%; height: auto; }

.mondo-feat__head { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.mondo-feat__badge {
  flex: none;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  line-height: 1;
}
.mondo-feat__badge b { font-size: 24px; font-weight: 700; }
.mondo-feat__badge i { font-size: 12px; font-style: normal; font-weight: 600; margin-top: 2px; }
.mondo-feat__head h3 { margin: 0; font-weight: 600; font-size: var(--mondo-fs-h3); line-height: 1.25; color: var(--mondo-on-surface); }

.mondo-feat__desc { font-size: var(--mondo-fs-lg); line-height: 1.6; color: var(--mondo-on-surface); margin-bottom: 24px; }

.mondo-feat__list { margin: 0; display: flex; flex-direction: column; }
.mondo-feat__list > div {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 16px 0;
  border-bottom: 1px solid #ededed;
}
.mondo-feat__list > div:last-child { border-bottom: 0; }
.mondo-feat__list dt {
  flex: none;
  width: 240px;
  padding: 16px 8px;
  border-radius: 62px;
  text-align: center;
  font-weight: 600;
  font-size: var(--mondo-fs-md);
}
.mondo-feat__list dd { margin: 0; font-size: var(--mondo-fs-md); color: var(--mondo-on-surface); }

/* per-block palette */
.mondo-feat--blue .mondo-feat__badge { background: #4669a8; }
.mondo-feat--blue .mondo-feat__list dt { background: #dde6f7; color: #3a5a92; }
.mondo-feat--pink .mondo-feat__badge { background: #d24f80; }
.mondo-feat--pink .mondo-feat__list dt { background: #f6dde7; color: #c0436f; }
.mondo-feat--green .mondo-feat__badge { background: #6fa83f; }
.mondo-feat--green .mondo-feat__list dt { background: #e4f2da; color: #5a8c33; }

/* h3 color per feature (Figma) */
.mondo-feat--blue  .mondo-feat__head h3 { color: #4669a8; }
.mondo-feat--pink  .mondo-feat__head h3 { color: #a84669; }
.mondo-feat--green .mondo-feat__head h3 { color: #69a846; }
.mondo-feat--admin .mondo-feat__head h3 { color: #4a5878; }

/* =========================================================
   faq (よくある質問)
   ========================================================= */
.mondo-faq {
  background: #f7f7f7;
  padding: calc(80px * var(--mondo-sp-scale)) calc(24px * var(--mondo-sp-scale));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(80px * var(--mondo-sp-scale));
}
.mondo-faq__head { display: flex; flex-direction: column; align-items: center; gap: 32px; }
.mondo-faq__caption {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: var(--mondo-fs-sm);
  color: var(--mondo-primary-text);
}
.mondo-faq__caption span { display: block; width: 1px; height: 24px; background: var(--mondo-primary-text); }
.mondo-faq__caption span:first-child { transform: rotate(-30deg); }
.mondo-faq__caption span:last-child { transform: rotate(30deg); }

.mondo-faq__panel {
  width: 100%;
  max-width: 1280px;
  background: #dae1ee;
  border-radius: calc(64px * var(--mondo-r-scale));
  padding: 40px 40px 16px;
}
.mondo-faq__card {
  background: var(--mondo-surface);
  border-radius: calc(40px * var(--mondo-r-scale));
  padding: 32px;
}
.mondo-faq__item { padding: 24px 0 32px; border-bottom: 1px solid var(--mondo-outline); }
.mondo-faq__item:first-child { padding-top: 0; }
.mondo-faq__item:last-child { border-bottom: 0; padding-bottom: 0; }
.mondo-faq__q { display: flex; align-items: center; gap: 0; }
.mondo-faq__mark {
  flex: none;
  width: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: var(--mondo-fs-2xl);
  color: var(--mondo-primary-text);
}
.mondo-faq__q h3 { margin: 0; font-weight: 600; font-size: var(--mondo-fs-xl); line-height: 1.5; color: var(--mondo-on-surface); }
.mondo-faq__a { padding: 16px 48px; }
.mondo-faq__a p { font-size: var(--mondo-fs-lg); line-height: 1.8; color: var(--mondo-on-surface); }
.mondo-faq__more {
  padding: 56px 16px;
  text-align: center;
  font-size: var(--mondo-fs-2xl);
  line-height: 1.5;
  color: var(--mondo-on-surface);
}

/* =========================================================
   contact (お問い合わせ)
   ========================================================= */
.mondo-contact {
  background: var(--mondo-surface);
  padding: calc(80px * var(--mondo-sp-scale)) calc(24px * var(--mondo-sp-scale));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(40px * var(--mondo-sp-scale));
  /* 送信後にこのセクションへスクロールする際、固定ヘッダー分の余白を確保 */
  scroll-margin-top: 80px;
}
.mondo-contact__head { display: flex; flex-direction: column; align-items: center; gap: 32px; }
.mondo-contact__caption {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: var(--mondo-fs-sm);
  color: var(--mondo-primary-text);
}
.mondo-contact__caption span { display: block; width: 1px; height: 24px; background: var(--mondo-primary-text); }
.mondo-contact__caption span:first-child { transform: rotate(-30deg); }
.mondo-contact__caption span:last-child { transform: rotate(30deg); }

.mondo-contact__panel {
  width: 100%;
  max-width: 1280px;
  background: #dae1ee;
  border-radius: calc(48px * var(--mondo-r-scale));
  padding: calc(40px * var(--mondo-sp-scale));
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.mondo-form {
  background: var(--mondo-surface);
  border-radius: calc(32px * var(--mondo-r-scale));
  padding: calc(64px * var(--mondo-sp-scale)) calc(80px * var(--mondo-sp-scale));
}
.mondo-form__lead { text-align: center; font-size: var(--mondo-fs-md); line-height: 1.8; color: var(--mondo-on-surface); margin-bottom: 72px; }

.mondo-form__row { display: flex; gap: 24px; align-items: flex-start; padding: 16px 0; }
.mondo-form__label { flex: 0 0 208px; padding-top: 12px; font-weight: 600; font-size: var(--mondo-fs-sm); color: var(--mondo-on-surface); }
.mondo-form__field { flex: 1 1 0; min-width: 0; }
/* MW WP Form の自動整形(wpautop)が label/span を <p> で包んでもラベル列(208px)を保つ */
.mondo-form__row > p { flex: 0 0 208px; margin: 0; min-width: 0; }

.mondo-form__field input,
.mondo-form__field textarea {
  width: 100%;
  font-family: inherit;
  font-size: var(--mondo-fs-sm);
  color: var(--mondo-on-surface);
  background: var(--mondo-surface);
  border: 1px solid var(--mondo-outline);
  border-radius: 8px;
  padding: 12px 16px;
}
.mondo-form__field input::placeholder,
.mondo-form__field textarea::placeholder { color: #b0b0b0; }
.mondo-form__field input:focus,
.mondo-form__field textarea:focus { outline: 2px solid var(--mondo-primary); outline-offset: -1px; border-color: var(--mondo-primary); }
/* 半角幅。MW WP Form 生成の input には --half クラスを付けられないため name 属性で代替 */
.mondo-form__input--half,
.mondo-form__field input[name="name"],
.mondo-form__field input[name="kana"],
.mondo-form__field input[name="tel"] { max-width: 280px; }
.mondo-form__field textarea { resize: vertical; min-height: 140px; }

/* 折り返した2行目以降もインデントせず左揃え（MW同梱CSSの中央寄せ等を打ち消す） */
.mondo-form__radios { display: flex; flex-wrap: wrap; justify-content: flex-start; text-align: left; gap: 12px 20px; padding-top: 8px; }
.mondo-form__radios label { display: inline-flex; align-items: center; gap: 6px; font-size: var(--mondo-fs-sm); color: var(--mondo-on-surface); cursor: pointer; }
.mondo-form__radios input { accent-color: var(--mondo-primary); width: 16px; height: 16px; }
/* MW WP Form は各選択肢を span.mwform-radio-field で包むので余白をリセット（gapに委ねる）。
   MW同梱の `.mw_wp_form .horizontal-item + .horizontal-item { margin-left:10px }`(詳細度0,3,0)を
   確実に上書きするため、ここは `.mw_wp_form` を前置して 0,4,0 で打ち消す。 */
.mw_wp_form .mondo-form__radios .mwform-radio-field,
.mw_wp_form .mondo-form__radios .mwform-radio-field + .mwform-radio-field { margin: 0; }

.mondo-form__submit { display: flex; justify-content: center; margin-top: 32px; }
.mondo-form__submit button,
.mondo-form__submit input[type="submit"],
.mondo-form__submit input[type="button"] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 16px 48px;
  border: 0;
  border-radius: 88px;
  background: var(--mondo-secondary);
  color: #fff;
  font-family: inherit;
  font-weight: 600;
  font-size: var(--mondo-fs-md);
  cursor: pointer;
  transition: opacity .2s;
}
.mondo-form__submit button:hover,
.mondo-form__submit input[type="submit"]:hover,
.mondo-form__submit input[type="button"]:hover { opacity: .9; }
/* MWの送信は <input> で子要素アイコンを持てないため send アイコンを背景で付与 */
.mondo-form__submit input[type="submit"],
.mondo-form__submit input[type="button"] {
  padding-left: 78px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24' viewBox='0 -960 960 960' fill='%23ffffff'%3E%3Cpath d='M120-160v-640l760 320-760 320Zm80-120 474-200-474-200v140l240 60-240 60v140Zm0 0v-400 400Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 46px center;
  background-size: 22px 22px;
}
.mondo-form__submit .material-symbols-outlined { font-size: 22px; }

/* 必須マーク: MW本文のラベル内 <span class="mondo-form__req">*</span> の見た目 */
.mondo-form__req { margin-left: 4px; color: #d33; font-weight: 700; }
/* バリデーションエラー時に JS が送信ボタン上へ挿入する総合エラー告知 */
.mondo-form__alert {
  margin: 0 0 16px;
  padding: 12px 16px;
  border: 1px solid #f3b6b0;
  border-radius: 8px;
  background: #fdecea;
  color: #c0392b;
  font-weight: 600;
  font-size: var(--mondo-fs-sm);
  text-align: center;
}
/* MW WP Form の項目別バリデーションエラーを赤字に（告知文「赤字の項目」と一致させる） */
.mw_wp_form .error { display: block; margin-top: 6px; color: #d33; font-size: var(--mondo-fs-sm); font-weight: 600; }
/* 完了画面・送信エラー画面のメッセージを入力フォームと同じ白パネルに揃える */
.mw_wp_form_complete,
.mw_wp_form_send_error {
  background: var(--mondo-surface);
  border-radius: calc(32px * var(--mondo-r-scale));
  padding: calc(64px * var(--mondo-sp-scale)) calc(80px * var(--mondo-sp-scale));
  text-align: center;
  font-size: var(--mondo-fs-md);
  line-height: 1.8;
  color: var(--mondo-on-surface);
}

.mondo-contact__tel { display: flex; flex-direction: column; gap: 24px; background: var(--mondo-surface); border-radius: calc(32px * var(--mondo-r-scale)); padding: 48px 80px; }
.mondo-contact__telnote { font-size: var(--mondo-fs-md); line-height: 1.8; color: var(--mondo-on-surface); }
.mondo-contact__telbox {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 32px;
  background: #ededed;
  border-radius: calc(16px * var(--mondo-r-scale));
  padding: 24px 32px;
  font-size: var(--mondo-fs-md);
  color: var(--mondo-on-surface);
}
.mondo-contact__telbox strong { font-weight: 600; }

/* =========================================================
   footer
   ========================================================= */
.mondo-footer-top {
  background: #dae1ee;
  padding: calc(120px * var(--mondo-sp-scale)) calc(24px * var(--mondo-sp-scale));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.mondo-footer-top__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 32px;
  border-radius: 104px;
  background: var(--mondo-primary);
  color: var(--mondo-on-primary);
  font-weight: 600;
  font-size: var(--mondo-fs-sm);
}
.mondo-footer-top__logo { display: block; width: 493px; max-width: 90%; height: auto; }

.mondo-footer-bottom {
  background: var(--mondo-primary);
  padding-top: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.mondo-footer-bottom__logo { display: block; width: 247px; height: 64px; }
.mondo-footer-bottom__links { display: flex; gap: 24px; }
.mondo-footer-bottom__links a { color: var(--mondo-on-primary); font-weight: 700; font-size: var(--mondo-fs-sm); }
.mondo-footer-bottom__links a:hover { opacity: .8; }
.mondo-footer-bottom__copy { padding: 32px 0; color: var(--mondo-on-primary); font-size: var(--mondo-fs-3xs); }

/* header burger (hidden on desktop) */
.mondo-header__burger { display: none; }
.mondo-hero__cta-mobile { display: none; }

/* =========================================================
   responsive — wide screens (≥1920px : Figma full size)
   ========================================================= */
@media screen and (min-width: 1920px) {
  :root {
    --mondo-fs-md: 18px;
    --mondo-fs-lg: 20px;
    --mondo-fs-xl: 24px;
    --mondo-fs-2xl: 32px;
    --mondo-fs-h3: 28px;
    --mondo-fs-title: 48px;
  }
}

/* =========================================================
   responsive — small laptop (font down-scale only; hero stays 2-column)
   ========================================================= */
@media screen and (max-width: 1280px) {
  :root {
    --mondo-fs-sm: 15px;
    --mondo-fs-md: 16px;
    --mondo-fs-lg: 18px;
    --mondo-fs-xl: 20px;
    --mondo-fs-2xl: 26px;
    --mondo-fs-h3: 24px;
    --mondo-fs-title: 40px;
    --mondo-r-scale: 0.85;
    --mondo-sp-scale: 0.9;
  }
}

/* =========================================================
   responsive — tablet collapse (Figma desktop 1920w → mobile 390w)
   ========================================================= */
@media screen and (max-width: 1080px) {
  /* tablet/mobile: collapse nav into hamburger (desktop nav doesn't fit < ~920px) */
  .mondo-header__burger { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: var(--mondo-on-primary); cursor: pointer; border-radius: 8px; transition: background .2s ease; }
  .mondo-header__burger .material-symbols-outlined { font-size: 32px; }
  /* selected/active state while the menu is open */
  .mondo-header__toggle:checked ~ .mondo-header__burger { background: rgba(255, 255, 255, .2); }
  .mondo-header__nav { display: none; position: absolute; top: calc(var(--mondo-header) + 8px); left: auto; right: 8px; width: 240px; flex-direction: column; align-items: stretch; gap: 0; background: var(--mondo-surface); padding: 8px 16px 16px; border-radius: 12px; box-shadow: var(--mondo-shadow-3); z-index: 20; }
  .mondo-header__toggle:checked ~ .mondo-header__nav { display: flex; }
  .mondo-header__nav > a { width: 100%; min-width: 0; height: 52px; justify-content: flex-start; color: var(--mondo-on-surface); }
  /* in the dropdown, the お問い合わせ CTA becomes a plain text item like the others */
  .mondo-header__nav > a.mondo-header__cta { width: 100%; min-width: 0; height: 52px; margin-top: 0; padding: 0; gap: 0; justify-content: flex-start; background: none; border-radius: 0; }
  .mondo-header__cta .material-symbols-outlined { display: none; }
  .mondo-header__cta span:last-child { font-size: var(--mondo-fs-sm); }

  /* origin / features → single column */
  .mondo-origin__row,
  .mondo-origin__row:nth-child(even) { flex-direction: column; gap: 24px; }
  .mondo-origin__photo { order: -1; width: 100%; max-width: 480px; height: auto; aspect-ratio: 1 / 1; margin: 0 auto; }
  .mondo-origin__group { width: 100%; }

  /* feat → stack in coding order: head, art, desc, list */
  .mondo-feat { flex-direction: column; align-items: stretch; gap: 24px; }
  .mondo-feat__text { display: contents; }
  .mondo-feat__head { order: 1; margin-bottom: 0; }
  .mondo-feat__art  { order: 2; flex: none; width: 100%; max-width: 460px; margin: 0 auto; }
  .mondo-feat__desc { order: 3; margin-bottom: 0; }
  .mondo-feat__list { order: 4; }
}

/* =========================================================
   responsive — mobile (Figma mobile frame, 390w) — 〜1080px をモバイルCSSで統一
   ========================================================= */
@media screen and (max-width: 1080px) {
  :root { --mondo-header: 64px; --mondo-r-scale: 0.55; --mondo-sp-scale: 0.7; }

  .mondo img { max-width: 360px; }

  /* cap each section at 640px centered, and don't force full-viewport height */
  .mondo main > section { max-width: 640px; margin-left: auto; margin-right: auto; min-height: auto; }
  /* full-bleed background sections; cap their inner content to 640 instead
     (白セクションも全幅にして両脇に body の primary が出ないようにする) */
  .mondo main > .mondo-hero,
  .mondo main > .mondo-origin,
  .mondo main > .mondo-faq,
  .mondo main > .mondo-features,
  .mondo main > .mondo-contact { max-width: none; }
  .mondo-hero__inner,
  .mondo-origin__inner,
  .mondo-faq__panel,
  .mondo-features__inner,
  .mondo-contact__panel,
  .mondo-contact__tel { max-width: 640px; }

  /* pull the white about up 1px to hide any sub-pixel seam at the hero's curved bottom */
  .mondo-about { margin-top: -1px; }

  /* ---- header: smaller logo (hamburger itself handled in the <=1080 block) ---- */
  .mondo-header__logo img { width: 123px; height: auto; }

  /* ---- shared (Figma mobile font sizes) ---- */
  .mondo-section-title { font-size: 24px; }
  .mondo-features__caption,
  .mondo-faq__caption,
  .mondo-contact__caption { font-size: 13px; }

  /* ---- hero (mobile : single column → pill, logo, app, characters, cta) ---- */
  .mondo-hero__inner { flex-direction: column; align-items: center; padding: 32px 16px 40px; gap: 20px; }
  .mondo-hero__left,
  .mondo-hero__right { display: contents; }
  .mondo-hero__intro { order: 1; gap: 12px; margin: 28px 0; }
  img.mondo-hero__logo { max-width: 280px; }
  .mondo-hero__app { order: 3; max-width: 340px; margin: 0 auto; }
  .mondo-hero__people { order: 4; max-width: 340px; margin: 0 auto; }
  .mondo-hero__bg { width: 100%; height: 100%; inset: 0; left: 0; top: 0; transform: none; border-radius: 0; clip-path: ellipse(170% 60% at 50% 100%); }
  .mondo a.mondo-hero__cta-mobile {
    order: 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 36px;
    border-radius: 88px;
    background: var(--mondo-secondary);
    color: #fff;
    font-weight: 600;
    font-size: 18px;
  }
  .mondo-hero__cta-mobile .material-symbols-outlined { font-size: 24px; }

  /* ---- about ---- */
  .mondo-about__card { padding: 56px 16px 0; }
  .mondo-about__head { gap: 24px; }
  .mondo-about__hero { position: relative; gap: 0; align-items: stretch; }
  .mondo-about__person { display: block; position: absolute; bottom: 0; z-index: 2; }
  .mondo-about__person--l { width: 46px; left: 0; }
  .mondo-about__person--r { width: 38px; right: 0; }
  .mondo-about__center { flex: 1 1 auto; width: 100%; min-width: 0; gap: 18px; }
  /* keep the phone narrow so its height stays within the bubble-list area (no overlap with titles) */
  .mondo-about__phone { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: clamp(72px, 9vw, 84px); margin: 0; }
  .mondo-about__bubble { padding: 14px 20px; }
  .mondo-about__bubble-sub strong { font-size: inherit; }
  .mondo-about__bubble-sub { font-size: 16px; }
  .mondo-about__bubble-main { font-size: 16px; }
  .mondo-about__bubble::after { bottom: -16px; border-top-width: 17px; border-left-width: 12px; border-right-width: 12px; }
  .mondo-about__pills { gap: 4px; }
  .mondo-about__pill { padding: 0; aspect-ratio: 1 / 1; max-width: 84px; font-size: 11px; border-radius: 50%; }
  .mondo-about__times { width: 8px; height: 8px; }
  .mondo-about__lead { font-size: 12px; padding: 0 64px; }
  .mondo-about__recommend { gap: 40px; margin-top: 72px; }
  .mondo-about__rec-title { font-size: 16px; }
  /* phone pinned left; the four callouts form one evenly-spaced column on the right */
  .mondo-about__features { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding-left: 100px; }
  .mondo-about__col { flex: none; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 8px; min-width: 0; max-width: none; width: auto; }
  .mondo-callout { flex-direction: row-reverse; align-items: center; flex: none; min-width: 0; gap: 8px; }
  .mondo-callout__icon { display: none; }
  .mondo-callout__box { min-height: 0; flex: 1 1 auto; padding: 8px; font-size: 11px; font-weight: 600; text-align: center; justify-content: center; }
  /* speech-bubble tail pointing left (toward the phone) */
  .mondo-callout--l .mondo-callout__box::after,
  .mondo-callout--r .mondo-callout__box::after { display: block; right: 100%; left: auto; border-width: 7px; border-right-color: rgba(218, 225, 238, .5); border-left-color: transparent; }

  /* ---- origin (Figma mobile order: title, photo, text) ---- */
  .mondo-origin { padding: 80px 0; }
  .mondo-origin__inner { gap: 64px; padding: 0 16px; }
  .mondo-origin__group,
  .mondo-origin__text { display: contents; }
  .mondo-origin__person { display: none; }
  .mondo-origin__title { order: 1; font-size: 20px; }
  .mondo-origin__photo { order: 2; border-radius: 50%; width: 160px; height: 160px; max-width: none; }
  .mondo-origin__box { order: 3; padding: 16px; }
  .mondo-origin__box p { font-size: 14px; }

  /* ---- features ---- */
  .mondo-features { padding: 48px 16px; }
  .mondo-features__head { margin-bottom: 40px; }
  .mondo-feat { margin-top: 56px; }
  .mondo-feat__art { max-width: 200px; }
  .mondo-feat__badge { width: 48px; height: 48px; }
  .mondo-feat__badge b { font-size: 16px; }
  .mondo-feat__badge i { font-size: 10px; }
  .mondo-feat__head h3 { font-size: 16px; }
  .mondo-feat__desc { font-size: 14px; }
  .mondo-feat__list > div { gap: 10px; padding: 8px 0; }
  .mondo-feat__list dt { width: 140px; padding: 6px 12px; font-size: 11px; }
  .mondo-feat__list dd { font-size: 12px; }

  /* ---- faq ---- */
  .mondo-faq { padding: 64px 24px; gap: 48px; }
  .mondo-faq__panel { padding: 16px 16px 8px; }
  .mondo-faq__panel,
  .mondo-faq__card { border-radius: calc(24px * var(--mondo-r-scale)); }
  .mondo-faq__card { padding: 24px 16px; }
  .mondo-faq__mark { width: 32px; font-size: 24px; align-self: flex-start; }
  .mondo-faq__q { align-items: center; }
  .mondo-faq__q h3 { font-size: 16px; }
  .mondo-faq__a { padding: 8px 0 0; }
  .mondo-faq__a p { font-size: 14px; }
  .mondo-faq__more { font-size: 14px; padding: 32px 8px; }

  /* ---- contact ---- */
  .mondo-contact { padding: 64px 24px; }
  .mondo-contact__panel { padding: 16px; border-radius: calc(24px * var(--mondo-r-scale)); }
  .mondo-form,
  .mw_wp_form_complete,
  .mw_wp_form_send_error { padding: 24px 16px; }
  .mondo-form__lead { font-size: 14px; margin-bottom: 48px; }
  .mondo-form__row { flex-direction: column; align-items: stretch; gap: 8px; padding: 12px 0; }
  .mondo-form__label { flex: none; padding-top: 0; font-size: 14px; }
  .mondo-form__row > p { flex: none; }
  .mondo-form__input--half { max-width: none; }
  .mondo-form__radios { gap: 12px 16px; }
  .mondo-contact__tel { padding: 24px 16px; }
  .mondo-contact__telnote { font-size: 14px; }
  .mondo-contact__telbox { flex-direction: column; align-items: center; text-align: center; gap: 8px; font-size: 14px; }

  /* ---- footer ---- */
  .mondo-footer-top { padding: 56px 24px; }
  .mondo-footer-top__pill { font-size: 14px; }
  .mondo-footer-top__logo { width: 280px; }
  .mondo-footer-bottom__logo { width: 176px; height: auto; }
  .mondo-footer-bottom__links a { font-size: 12px; font-weight: 400; }
}

/* =========================================================
   responsive — small phones (≤400px): compact hero so the
   お問い合わせ CTA stays within the first view
   ========================================================= */
@media screen and (max-width: 400px) {
  .mondo-hero__inner { padding: 16px 16px 28px; gap: 12px; }
  .mondo-hero__intro { margin: 4px 0; }
  .mondo-hero__app { max-width: 260px; }
  .mondo-hero__people { max-width: 240px; }
}

/* =========================================================
   responsive — tablet/large-phone (480〜1080px) : about__card だけ
   デスクトップ版レイアウトを踏襲し font/space/radius をスケールダウン
   ========================================================= */
@media screen and (min-width: 480px) and (max-width: 1080px) {
  /* about は全幅を使い、デスクトップの col|phone|col 構成に戻す */
  .mondo main > .mondo-about { max-width: none; }
  .mondo-about__card { padding: calc(56px * var(--mondo-sp-scale)) 24px 0; }
  .mondo-about__head { gap: calc(40px * var(--mondo-sp-scale)); }

  /* hero: persons が bubble を挟むデスクトップ配置に */
  .mondo-about__hero { position: static; gap: 16px; align-items: flex-end; }
  .mondo-about__person { display: block; position: static; bottom: auto; left: auto; right: auto; z-index: auto; }
  .mondo-about__person--l { width: 88px; }
  .mondo-about__person--r { width: 70px; }
  .mondo-about__center { flex: 0 1 460px; width: 460px; max-width: 100%; min-width: 0; gap: 24px; }

  .mondo-about__bubble { padding: 20px 28px; border-radius: 999px; }
  .mondo-about__bubble-sub { font-size: var(--mondo-fs-xl); }
  .mondo-about__bubble-main { font-size: var(--mondo-fs-xl); }
  .mondo-about__bubble::after { bottom: -8px; border-left-width: 14px; border-right-width: 14px; border-top-width: 15px; }

  .mondo-about__pills { gap: 12px; }
  .mondo-about__pill { padding: 8px; max-width: 132px; font-size: var(--mondo-fs-md); border-radius: 50%; }
  .mondo-about__times { width: 16px; height: 16px; }
  .mondo-about__lead { max-width: 460px; padding: 0; font-size: var(--mondo-fs-md); }

  .mondo-about__recommend { gap: calc(40px * var(--mondo-sp-scale)); margin-top: calc(84px * var(--mondo-sp-scale)); }
  .mondo-about__rec-title { font-size: var(--mondo-fs-xl); }

  /* features: col | phone | col に戻す */
  .mondo-about__features { position: static; display: flex; flex-direction: row; align-items: stretch; justify-content: center; gap: calc(32px * var(--mondo-sp-scale)); padding-left: 0; }
  .mondo-about__col { flex: 1 1 0; min-width: 0; max-width: 300px; width: auto; flex-direction: column; justify-content: space-between; align-items: stretch; gap: 16px; }
  .mondo-about__phone { position: static; transform: none; top: auto; left: auto; order: 0; align-self: center; width: 140px; margin: 0; }

  /* callout: アイコン上＋box、phone を指す尻尾 */
  .mondo-callout { flex-direction: column; align-items: center; flex: 1 1 auto; gap: 10px; }
  .mondo-callout__icon { display: flex; width: 44px; height: 44px; }
  .mondo-callout__box { min-height: 56px; height: auto; flex: 1 1 auto; padding: 12px; font-size: var(--mondo-fs-sm); font-weight: 600; text-align: center; justify-content: center; }
  .mondo-callout--l .mondo-callout__box::after { display: block; left: 100%; right: auto; border-width: 8px; border-left-color: rgba(218, 225, 238, .5); border-right-color: transparent; }
  .mondo-callout--r .mondo-callout__box::after { display: block; right: 100%; left: auto; border-width: 8px; border-right-color: rgba(218, 225, 238, .5); border-left-color: transparent; }

  /* feature 画像は 640以上では 240px */
  .mondo-feat__art { max-width: 240px; }
}

/* =========================================================
   responsive — large phone (480〜640px) : 上のデスクトップ版aboutを
   さらにスケールダウン(スマホ画像・アイコン・人物などを縮小)
   ========================================================= */
@media screen and (min-width: 480px) and (max-width: 640px) {
  .mondo-about__card { padding: calc(40px * var(--mondo-sp-scale)) 16px 0; }
  .mondo-about__head { gap: calc(28px * var(--mondo-sp-scale)); }

  .mondo-about__hero { gap: 10px; }
  .mondo-about__person--l { width: 52px; }
  .mondo-about__person--r { width: 42px; }
  .mondo-about__center { flex: 0 1 320px; width: 320px; gap: 16px; }

  .mondo-about__bubble { padding: 14px 18px; }
  .mondo-about__bubble-sub { font-size: 13px; }
  .mondo-about__bubble-main { font-size: 13px; }
  .mondo-about__bubble::after { bottom: -6px; border-left-width: 11px; border-right-width: 11px; border-top-width: 12px; }

  .mondo-about__pills { gap: 8px; }
  .mondo-about__pill { max-width: 92px; font-size: 11px; }
  .mondo-about__times { width: 12px; height: 12px; }
  .mondo-about__lead { max-width: 320px; font-size: 12px; }

  .mondo-about__recommend { margin-top: calc(64px * var(--mondo-sp-scale)); }
  .mondo-about__rec-title { font-size: 14px; }

  .mondo-about__features { gap: 12px; }
  .mondo-about__col { max-width: 220px; gap: 12px; }
  .mondo-about__phone { width: 92px; }

  .mondo-callout { gap: 8px; }
  .mondo-callout__icon { width: 32px; height: 32px; }
  .mondo-callout__box { min-height: 44px; padding: 8px; font-size: 12px; }
}

/* =========================================================
   responsive — phone (≤480px) : about recommend を Figma「mobile2」に
   phone を中央上に置き、4 コールアウトを 1 カラム縦積み
   (アイコンを箱の上に中央／箱は全幅・尻尾なし)。col を display:contents
   にして 4 つを直接フレックス子化し、order で Figma 読み順
   L0,R0,L1,R1（生徒のレベル→4技能→JLPT→発音）にインターリーブ。
   ========================================================= */
@media screen and (max-width: 479.98px) {
  .mondo-about__features { position: static; display: flex; flex-direction: column; align-items: center; gap: 16px; padding-left: 0; }
  .mondo-about__col { display: contents; }
  .mondo-about__phone { position: static; transform: none; top: auto; left: auto; width: clamp(140px, 44vw, 160px); margin: 0 0 40px; align-self: center; order: 0; }

  .mondo-callout { flex-direction: column; align-items: center; flex: none; min-width: 0; width: 100%; gap: 24px; }
  .mondo-callout__icon { display: flex; width: 68px; height: 68px; }
  .mondo-callout__box { min-height: 48px; flex: none; padding: 8px 16px; font-size: 14px; font-weight: 600; text-align: center; justify-content: center; }
  .mondo-callout--l .mondo-callout__box::after,
  .mondo-callout--r .mondo-callout__box::after { display: none; }

  .mondo-about__col:first-of-type .mondo-callout:first-child { order: 1; }
  .mondo-about__col:last-of-type  .mondo-callout:first-child { order: 2; }
  /* 2 つ目の Figma グループ前に余白(16px gap + 40 = 56px) */
  .mondo-about__col:first-of-type .mondo-callout:last-child { order: 3; margin-top: 40px; }
  .mondo-about__col:last-of-type  .mondo-callout:last-child { order: 4; }
}