@charset "UTF-8";
/* ════════════════════════════════════
   challenge.css — 学んで咲かせよう（チャレンジページ）
   小学生向け／中学生向け 共通スタイル
════════════════════════════════════ */


/* ============================================================
   中学生向け（page-challenge-middle-school.php）
   Figma: グリーンミッション27関係 / 選択-NPFULL (281:3) 基準
   基準カンバス: 1440px / コンテンツ幅: 1100px
   フォントは common.css で読み込み済みの M PLUS 1p / Noto Sans JP を流用
   （M PLUS Rounded 1c は読み込んでいないため、font-weight 400/500/800/900
     の一部は実際には 700 で表示されます）
   ============================================================ */

/* --------------------------------------------------------------
   1. デザイントークン
   -------------------------------------------------------------- */
:root {
  /* ---- ブランドカラー ---- */
  --ms-blue:         #0068B7;
  --ms-blue-dark:    #1256A5;
  --ms-blue-expo:    #257EC7;
  --ms-text:         #333333;
  --ms-gray:         #595959;
  --ms-video-bg:     #E3E3E3;

  /* ---- 背景グラデーション ---- */
  --ms-bg-start:     #FFFDE4;
  --ms-bg-mid:       #F6FEFD;
  --ms-bg-end:       #EFFAFB;

  /* ---- テーマ：ネイチャーポジティブ（Figma実値） ---- */
  --ms-np-main:    #17AA6C;  /* カード・タブ選択時・キーワード帯 */
  --ms-np-pale:    #D1EEE2;  /* 基礎/発展バッジの背景 */
  --ms-np-on-main: #FFFFFF;  /* 上記 main の上に乗る文字色 */

  /* ---- テーマ：カーボンニュートラル（Figma実値） ---- */
  --ms-cn-main:    #FFD954;
  --ms-cn-pale:    #FFF6D4;
  --ms-cn-on-main: #333333;

  /* ---- テーマ：サーキュラーエコノミー（Figma実値） ---- */
  --ms-ce-main:    #D26E49;
  --ms-ce-pale:    #F9EEEA;
  --ms-ce-on-main: #FFFFFF;

  /* ---- フォント（common.css で読み込み済みのフォントを流用） ---- */
  --ms-font-round: "M PLUS 1p", "Hiragino Maru Gothic ProN", sans-serif;
  --ms-font-noto:  "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;

  /* ---- レイアウト ---- */
  --ms-content: 1100px;
  --ms-radius-panel: 50px;
  --ms-radius-card: 30px;

  /* ---- モーション ---- */
  --ms-ease: cubic-bezier(.22, .61, .36, 1);
  --ms-dur:  .45s;
}

/* テーマ別の変数割り当て（data-theme を持つ要素以下に適用） */
[data-theme="np"] { --t-main: var(--ms-np-main); --t-pale: var(--ms-np-pale); --t-border: var(--ms-np-main); --t-on-main: var(--ms-np-on-main); }
[data-theme="cn"] { --t-main: var(--ms-cn-main); --t-pale: var(--ms-cn-pale); --t-border: var(--ms-cn-main); --t-on-main: var(--ms-cn-on-main); }
[data-theme="ce"] { --t-main: var(--ms-ce-main); --t-pale: var(--ms-ce-pale); --t-border: var(--ms-ce-main); --t-on-main: var(--ms-ce-on-main); }


/* --------------------------------------------------------------
   2. リセット
   （common.css の * リセットは margin/padding/box-sizing のみのため、
     ここでは img / a / button / list-style など未対応分のみ補う）
   -------------------------------------------------------------- */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

.ms-page {
  font-family: var(--ms-font-noto);
  color: var(--ms-text);
  background: #FFFFFF;
  line-height: 1.8;
  overflow-x: hidden;
}

/* :where()でリセット自体の詳細度をゼロにし、.ms-tab・.ms-btn等の
   コンポーネント側の指定（単一クラス）が後勝ちで確実に効くようにする。
   （通常のクラスセレクタ同士だと、リセットの方が要素セレクタ分だけ詳細度が
     高くなり、非activeの.ms-tabなどで背景/枠線が消えるバグが起きていた） */
.ms-page :where(img) { max-width: 100%; height: auto; display: block; border: 0; }
.ms-page :where(ol, ul) { list-style: none; }
.ms-page :where(a) { color: inherit; text-decoration: none; }
.ms-page :where(button) { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.ms-page :where(hr) { border: 0; }
.ms-page :where(ruby) { ruby-align: center; line-height: 2; -webkit-ruby-position: before; ruby-position: over; }
.ms-page :where(ruby rt) { font-size: .55em; line-height: normal; }

/* iOS/Safari(WebKit)は、ルビを含む行の高さを行ごとに自動で
   余分に確保する挙動があり、行によって隙間の大きさがバラつく。
   1行だけのルビ（基礎/発展のバッジ等）まで巻き込むと逆に間延びするため、
   複数行に折り返す「キーワード」欄だけに絞って調整する。 */
.ms-page--elementary .ms-keywords__list ruby {
  line-height: 1.9;
}

.ms-svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* common.cssの.back-btn（白文字想定）が、上のリセット(.ms-page :where(a){color:inherit})に
   詳細度で負けてしまい黒文字になっていたための上書き */
.ms-page .back-btn {
  color: #FFFFFF;
}

/* header.php/footer.phpは変更せず、共通ヘッダー(#site-header)自体を
   このページだけ下部（フッターの位置）に表示するようCSSで調整する。 */
body.is-challenge-page #site-header {
  top: auto;
  bottom: 0;
  background: #0068b7;
  height: auto;
  padding: clamp(4px, .9vw, 7px) 14px;
}
body.is-challenge-page #ruby-toggle {
  display: none;
}
body.is-challenge-page #hamburger {
  border: 2px solid #fff;
}
body.is-challenge-page #nav-drawer {
  padding: 40px 40px 120px;
}
body.is-challenge-page #site-footer {
  padding: 0 10px 10px;
}
/* メニュー展開中（common.jsがbody.menu-openを自動付与）は背面のスクロールを止める。
   overflow:hiddenでスクロールバーが消えてビューポートが広がると、
   left:0;right:0;指定の#site-headerがその分右に伸びてしまうため、
   消えるスクロールバー幅（challenge.js側で計測）をpadding-rightで埋め合わせる。 */
body.is-challenge-page.menu-open {
  /*overflow: hidden;*/
  padding-right: var(--ms-scrollbar-w, 0px);
}

/* --------------------------------------------------------------
   3. HERO
   -------------------------------------------------------------- */
.ms-hero {
  position: relative;
  isolation: isolate;
  /* 基準(1440px幅)で600px。35.5vwのままだと512pxで頭打ちになるため41.7vwに変更 */
  min-height: clamp(240px, 41.7vw, 600px);
  background: var(--ms-bg-start);
}

.ms-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

.ms-hero__bg img {
  max-width: none; /* 共通リセット(.ms-page img { max-width:100% })がこの画像の102%はみ出しを潰すのを防ぐ */
  width: 102%;
  margin-left: -1%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
  /* Figma のマスク（下端の波形）を再現。
     transparentへの遷移幅をほぼ0にして、ぼかしフェードではなく
     楕円の輪郭でくっきり切れるようにしている */
  -webkit-mask-image: radial-gradient(120% 100% at 50% 0%, #000 78%, transparent 78.5%);
          mask-image: radial-gradient(120% 100% at 50% 0%, #000 78%, transparent 78.5%);
}

.ms-hero__card {
  position: relative;
  width: min(661px, calc(70% - 40px));
  margin-inline: auto;
  padding: clamp(22px, 3vw, 40px) 20px clamp(20px, 2.6vw, 34px);
  top: clamp(60px, 8.75vw, 126px);
  background: rgba(255, 255, 255, .9);
  border-radius: clamp(24px, 2.8vw, 40px);
  box-shadow: 0 0 20px rgba(0, 0, 0, .25);
  text-align: center;
}

.ms-hero__badge {
  display: inline-block;
  min-width: min(276px, 80%);
  padding: clamp(6px, .8vw, 10px) 24px;
  margin-bottom: clamp(6px, 1vw, 14px);
  background: var(--ms-blue);
  border-radius: 100px;
  color: #FFFFFF;
  font-family: var(--ms-font-round);
  font-weight: 800;
  font-size: clamp(18px, 2.1vw, 30px);
  letter-spacing: .1em;
  line-height: 1.2;
}

.ms-hero__title {
  color: var(--ms-blue-dark);
  font-family: var(--ms-font-round);
  font-weight: 500;
  font-size: clamp(28px, 3.5vw, 50px);
  letter-spacing: .1em;
  line-height: 1.2;
}

/* 小学生向けページのみ：ルビ表示分の高さを確保するための余白調整 */
.ms-page--elementary .ms-hero__card {
  padding-bottom: clamp(10px, 1.1vw, 16px);
}

.ms-page--elementary .ms-hero__badge {
  padding: clamp(10px, 1.1vw, 16px) 15px 0;
  margin-bottom: clamp(10px, 1.25vw, 18px);
}


/* --------------------------------------------------------------
   4. メイン背景
   -------------------------------------------------------------- */
.ms-main {
  position: relative;
  /* 基準(1440px幅)で-2vw(=-28.8px) */
  margin-top: clamp(-29px, -2vw, -10px);
  /* 基準(1440px幅)で10vw(=144px) */
  padding-bottom: clamp(72px, 20vw, 200px);
  background: linear-gradient(
    to bottom,
    var(--ms-bg-start) 15%,
    var(--ms-bg-mid) 50%,
    var(--ms-bg-end) 100%
  );
}



/* --------------------------------------------------------------
   6. 共通パーツ：見出し・リード文
   -------------------------------------------------------------- */
.ms-h2 {
  color: var(--ms-blue);
  font-family: var(--ms-font-round);
  font-weight: 800;
  font-size: clamp(26px, 2.6vw, 36px);
  line-height: 1.56;
  letter-spacing: .1em;
  text-align: center;
  width: min(950px, calc(100% - 40px));
  margin: auto;
}

.ms-lead {
  width: min(950px, calc(100% - 40px));
  margin: clamp(24px, 3.2vw, 46px) auto 0;
  font-family: var(--ms-font-noto);
  font-weight: 500;
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.82;
  letter-spacing: .1em;
}


/* --------------------------------------------------------------
   7. 動画枠
   -------------------------------------------------------------- */
.ms-video {
  position: relative;
  width: min(776px, calc(100% - 40px));
  margin: clamp(30px, 4.1vw, 59px) auto 0;
  aspect-ratio: 776 / 440;
  background: var(--ms-video-bg);
  border: 2px solid var(--ms-blue);
  overflow: hidden;
}

.ms-video video,
.ms-video__thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ms-video__thumb {
  position: absolute;
  inset: 0;
}

.ms-video__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}

.ms-video__play svg,
.ms-video__play img {
  width: clamp(72px, 12.9vw, 186px);
  height: auto;
  aspect-ratio: 1;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .18));
  transition: transform var(--ms-dur) var(--ms-ease);
}

.ms-video__play:hover svg,
.ms-video__play:hover img,
.ms-video__play:focus-visible svg,
.ms-video__play:focus-visible img { transform: scale(1.08); }


/* --------------------------------------------------------------
   8. テーマセクション
   -------------------------------------------------------------- */
.ms-themes { padding-top: clamp(60px, 9vw, 130px); }


/* --------------------------------------------------------------
   9. 横浜グリーンエクスポ カード
   -------------------------------------------------------------- */
.ms-expo {
  position: relative;
  display: grid;
  grid-template-columns: 390fr 642fr;
  gap: 0 clamp(20px, 2.2vw, 32px);
  align-items: center;
  width: min(var(--ms-content), calc(100% - 40px));
  margin: clamp(46px, 6vw, 86px) auto 0;
  padding: clamp(20px, 1.9vw, 27px) clamp(18px, 1.6vw, 23px);
  background: var(--ms-blue-expo);
  border-radius: var(--ms-radius-card);
}

.ms-expo__label {
  position: absolute;
  top: clamp(6px, 1vw, 14px);
  left: clamp(8px, 1.2vw, 18px);
  z-index: 2;
  padding: clamp(4px, .6vw, 9px) clamp(14px, 1.6vw, 24px);
  background: var(--ms-blue-expo);
  /* Figma実データ(232x63.68)基準：左上13px・右上0(角)・下2隅31.84px */
  border-radius: clamp(6px, .9vw, 13px) 0 clamp(16px, 2.21vw, 32px) clamp(16px, 2.21vw, 32px);
  color: #FFFFFF;
  font-family: var(--ms-font-round);
  font-weight: 800;
  font-size: clamp(14px, 1.74vw, 25px);
  line-height: 1.3;
  white-space: nowrap;
}

.ms-expo__label::after {
  content: "";
  position: absolute;
  left: 20%;
  bottom: -8px;
  border-width: 8px 6px 0 6px;
  border-style: solid;
  border-color: var(--ms-blue-expo) transparent transparent transparent;
}

.ms-expo__photo {
  aspect-ratio: 390 / 318;
  border-radius: 18px;
  overflow: hidden;
}

.ms-expo__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 30% center;
  transition: transform .6s var(--ms-ease);
}

.ms-expo:hover .ms-expo__photo img { transform: scale(1.04); }

.ms-expo__body { color: #FFFFFF; }

.ms-expo__title {
  font-family: var(--ms-font-noto);
  font-weight: 900;
  font-size: clamp(18px, 1.81vw, 26px);
  line-height: 1.3;
}

.ms-expo__text {
  margin-top: clamp(10px, 1.3vw, 19px);
  font-family: var(--ms-font-noto);
  font-weight: 500;
  font-size: clamp(16px, 1.39vw, 20px);
  line-height: 1.9;
  letter-spacing: .1em;
}

.ms-expo__btn {
  --btn-arrow: var(--ms-blue-expo);
  margin-top: clamp(16px, 2vw, 30px);
  margin-inline: auto;
}


/* --------------------------------------------------------------
   10. 共通ボタン
   -------------------------------------------------------------- */
.ms-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: fit-content;
  min-height: clamp(48px, 4.65vw, 67px);
  padding: 6px clamp(52px, 4.4vw, 63px) 6px clamp(20px, 2vw, 28px);
  background: #FFFFFF;
  border-radius: 999px;
  color: var(--ms-text);
  font-family: var(--ms-font-round);
  font-weight: 800;
  font-size: clamp(18px, 1.32vw, 18px);
  line-height: 1.3;
  text-align: center;
  transition: transform var(--ms-dur) var(--ms-ease), box-shadow var(--ms-dur) var(--ms-ease);
}

.ms-btn:hover,
.ms-btn:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .18);
}

.ms-btn__arrow {
  position: absolute;
  right: clamp(6px, .7vw, 10px);
  top: 50%;
  translate: 0 -50%;
  width: clamp(30px, 2.85vw, 41px);
  aspect-ratio: 1;
  color: var(--btn-arrow, var(--t-main, var(--ms-blue)));
  transition: transform var(--ms-dur) var(--ms-ease);
}

.ms-btn:hover .ms-btn__arrow { transform: translateX(3px); }


/* --------------------------------------------------------------
   11. タブ
   -------------------------------------------------------------- */
.ms-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 350fr));
  gap: clamp(6px, .7vw, 10px);
  width: min(1070px, calc(100% - 40px));
  margin: clamp(46px, 6.2vw, 90px) auto 0;
}

.ms-tab {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.1vw, 16px);
  padding: clamp(10px, 1.45vw, 21px);
  background: #FFFFFF;
  border: 4px solid var(--t-border);
  border-radius: clamp(20px, 2.8vw, 40px);
  color: var(--ms-gray);
  text-align: left;
  transition:
    background-color var(--ms-dur) var(--ms-ease),
    color var(--ms-dur) var(--ms-ease),
    transform var(--ms-dur) var(--ms-ease),
    box-shadow var(--ms-dur) var(--ms-ease);
}

.ms-tab:hover:not(.is-active),
.ms-tab:focus-visible:not(.is-active) {
  transform: translateY(-4px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .12);
}

.ms-tab.is-active {
  background: var(--t-main);
  border-color: var(--t-main);
  color: var(--t-on-main);
}

.ms-tab__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: clamp(46px, 5.7vw, 82px);
  aspect-ratio: 1;
  background: #FFFFFF;
  border-radius: clamp(11px, 1.4vw, 20px);
  overflow: hidden;
}

.ms-tab__icon img {
  width: 81%;
  height: 81%;
  object-fit: contain;
  transition: transform var(--ms-dur) var(--ms-ease);
}

.ms-tab:hover .ms-tab__icon img { transform: scale(1.08) rotate(-3deg); }

.ms-tab__label {
  font-family: var(--ms-font-round);
  font-weight: 800;
  font-size: clamp(18px, 1.81vw, 26px);
  line-height: 1.24;
  letter-spacing: .1em;
}


/* --------------------------------------------------------------
   12. パネル
   -------------------------------------------------------------- */
.ms-panels {
  position: relative;
  width: min(var(--ms-content), calc(100% - 40px));
  margin: clamp(10px, .9vw, 13px) auto 0;
}

.ms-panel {
  padding: clamp(28px, 3.8vw, 55px) clamp(20px, 3.95vw, 57px) clamp(34px, 4.8vw, 69px);
  background: #FFFFFF;
  border: 4px solid var(--t-border);
  border-radius: var(--ms-radius-panel);
}

.ms-panel[hidden] { display: none; }

/* --- 切り替えアニメーション（フェード＋スライド） --- */
.ms-panel.is-entering {
  animation: ms-panel-in var(--ms-dur) var(--ms-ease) both;
}
.ms-panel.is-leaving {
  animation: ms-panel-out .22s ease-in both;
}

@keyframes ms-panel-in {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ms-panel-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-14px); }
}

/* パネル内要素の時差フェードイン */
.ms-panel.is-entering .ms-panel__head,
.ms-panel.is-entering .ms-panel__line,
.ms-panel.is-entering .ms-quizrow:nth-child(1),
.ms-panel.is-entering .ms-quizrow:nth-child(2),
.ms-panel.is-entering .ms-panel__note {
  animation: ms-panel-in .5s var(--ms-ease) both;
}
.ms-panel.is-entering .ms-panel__head          { animation-delay: .06s; }
.ms-panel.is-entering .ms-panel__line          { animation-delay: .12s; }
.ms-panel.is-entering .ms-quizrow:nth-child(1) { animation-delay: .16s; }
.ms-panel.is-entering .ms-quizrow:nth-child(2) { animation-delay: .22s; }
.ms-panel.is-entering .ms-panel__note          { animation-delay: .28s; }


/* --- パネル：ヘッド --- */
.ms-panel__head {
  display: grid;
  grid-template-columns: clamp(110px, 15.3vw, 221px) 1fr;
  gap: clamp(14px, 3vw, 47px);
  align-items: start;
}

.ms-panel__icon { padding-top: clamp(6px, 1.1vw, 16px); }
.ms-panel__icon img { width: 100%; }

.ms-panel__title {
  font-family: var(--ms-font-noto);
  font-weight: 700;
  font-size: clamp(22px, 1.81vw, 26px);
  line-height: 1.3;
  letter-spacing: .1em;
}

[data-theme="cn"] .ms-panel__title,
[data-theme="ce"] .ms-panel__title { font-weight: 900; }

.ms-panel__text {
  margin-top: clamp(10px, 1.2vw, 18px);
  font-family: var(--ms-font-noto);
  font-weight: 500;
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.89;
  letter-spacing: .1em;
}

/* --- キーワード --- */
.ms-keywords { margin-top: clamp(14px, 2.2vw, 32px); }

.ms-keywords__label {
  display: inline-block;
  padding: 1px clamp(12px, 1.5vw, 22px);
  background: var(--t-main);
  border-radius: 999px;
  color: var(--t-on-main);
  font-family: var(--ms-font-round);
  font-weight: 800;
  font-size: clamp(16px, 1.32vw, 19px);
  line-height: 1.55;
  letter-spacing: .1em;
}

.ms-keywords__list {
  margin-top: clamp(6px, .9vw, 12px);
  font-family: var(--ms-font-noto);
  font-weight: 500;
  font-size: clamp(16px, 1.6vw, 18px);
  line-height: 1.6;
  letter-spacing: .1em;
}

/* 「#」と単語の間で改行されないよう、1つのキーワードをまとめて折り返す */
.ms-keywords__tag {
  display: inline-block;
  white-space: nowrap;
}

/* --- 区切り線 --- */
.ms-panel__line {
  height: 0;
  margin: clamp(22px, 3.3vw, 48px) 0 0;
  border-top: 1px dashed var(--t-main);
}


/* --------------------------------------------------------------
   13. クイズカード
   -------------------------------------------------------------- */
.ms-quizgrid {
  display: grid;
  gap: clamp(38px, 4.7vw, 68px);
  margin-top: clamp(34px, 4.8vw, 69px);
}

.ms-quizrow {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 1.4vw, 20px);
  padding: 0 4vw;
}

/* 基礎 → 発展 の矢印 */
.ms-quizrow__step {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  z-index: 2;
  width: clamp(42px, 7vw, 77px);
  height: clamp(42px, 7vw, 77px);
  border: 6px solid var(--t-main);
  border-radius: 50%;
  color: var(--t-main);
  pointer-events: none;
}
.ms-quizrow__step svg {
  display: block;
  width: 100%;
  height: 100%;
}

.ms-quiz {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(30px, 3.3vw, 48px) clamp(12px, 1.4vw, 20px) clamp(14px, 1.25vw, 18px);
  background: var(--t-main);
  border-radius: var(--ms-radius-card);
  color: var(--t-on-main);
  transition: transform var(--ms-dur) var(--ms-ease), box-shadow var(--ms-dur) var(--ms-ease);
}

/* 小学生向けページ(page-challenge-elementary.php)だけの上書き。
   中学生向けページには影響しない。 */
.ms-page--elementary .ms-quiz {
  padding: clamp(52px, 3.9vw, 56px) clamp(12px, 1.4vw, 20px) clamp(14px, 1.25vw, 18px);
}

.ms-quiz:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, .14);
}

/* 基礎 / 発展 バッジ（カード上端にまたがる） */
.ms-quiz__level {
  position: absolute;
  top: clamp(-20px, -1.4vw, -14px);
  left: 50%;
  translate: -50% 0;
  z-index: 1;
  min-width: clamp(124px, 12.1vw, 174px);
  padding: clamp(6px, .8vw, 11px) 10px;
  background: var(--t-pale);
  border: 6px solid var(--t-main);
  border-radius: 999px;
  color: var(--ms-text);
  font-family: var(--ms-font-round);
  font-weight: 800;
  font-size: clamp(20px, 1.81vw, 26px);
  line-height: 1.23;
  letter-spacing: .1em;
  text-align: center;
}

/* 小学生向けページ(page-challenge-elementary.php)だけの上書き。
   中学生向けページには影響しない。基準(1440px幅)で 12px 10px 3px。 */
.ms-page--elementary .ms-quiz__level {
  padding: clamp(5px, .8vw, 10px) 10px clamp(1px, .1vw, 1px);
}

.ms-quiz__title {
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(46px, 4.7vw, 68px);
  margin-bottom: clamp(12px, 1.4vw, 20px);
  font-family: var(--ms-font-noto);
  font-weight: 500;
  font-size: clamp(20px, 1.53vw, 22px);
  line-height: 1.55;
  letter-spacing: .05em;
  text-align: center;
}


.ms-quiz__btn { width: min(289px, 100%); }

/* --- パネル下部の注記 --- */
.ms-panel__note {
  margin-top: clamp(30px, 3.4vw, 49px);
  font-family: var(--ms-font-noto);
  font-weight: 700;
  font-size: clamp(20px, 1.81vw, 26px);
  line-height: 1.73;
  letter-spacing: .05em;
  text-align: center;
}


/* --------------------------------------------------------------
   14.5 グリーンタイピングチャレンジ 導線カード
   -------------------------------------------------------------- */
.ms-typing { padding-top: clamp(40px, 5vw, 70px); }

.ms-typing__card {
  width: min(var(--ms-content), calc(100% - 40px));
  margin: 0 auto;
  padding: clamp(28px, 3.5vw, 48px) clamp(20px, 3vw, 40px);
  background: #FFFFFF;
  border-radius: var(--ms-radius-panel);
  border: 4px solid var(--ms-blue);
  text-align: center;
}

.ms-typing__title {
  color: var(--ms-blue);
  font-family: var(--ms-font-round);
  font-weight: 800;
  font-size: clamp(24px, 2.2vw, 32px);
  letter-spacing: .05em;
}

.ms-typing__list {
  margin-top: clamp(16px, 1.8vw, 24px);
  list-style: none;
  font-family: var(--ms-font-noto);
  font-weight: 500;
  font-size: clamp(16px, 1.39vw, 20px);
  line-height: 1.9;
  letter-spacing: .05em;
}

.ms-typing__lead {
  margin-top: clamp(16px, 1.8vw, 24px);
  color: var(--ms-text);
  font-family: var(--ms-font-round);
  font-weight: 800;
  font-size: clamp(18px, 1.6vw, 24px);
  letter-spacing: .05em;
}

.ms-typing__btn {
  margin: clamp(20px, 2.2vw, 32px) auto 0;
  border: 2px solid var(--ms-blue);
}

.ms-typing__note {
  color: var(--ms-gray);
  font-family: var(--ms-font-noto);
  font-weight: 500;
  font-size: clamp(13px, 1.1vw, 15px);
  line-height: 1.7;
  letter-spacing: .03em;
}


/* --------------------------------------------------------------
   15. スクロール表示アニメーション
   -------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s var(--ms-ease), transform .7s var(--ms-ease);
  will-change: opacity, transform;
}

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* JS 無効時のフォールバック */
.no-js [data-reveal] { opacity: 1; transform: none; }


/* --------------------------------------------------------------
   17. レスポンシブ：スマートフォン
   -------------------------------------------------------------- */
@media (max-width: 600px) {

  body.is-challenge-page #site-header {
    padding: clamp(6px, 2.5vw, 10px) 10px;
  }

  .ms-expo__label {
    top: clamp(10px, 1vw, 14px);
    font-size: clamp(18px, 1.74vw, 25px);
  }

  .ms-hero { min-height: 320px; }
  .ms-hero__card { top: 52px; width: min(661px, calc(100% - 40px)); }
  .ms-hero__bg img {
    object-position: left;
  }
  .ms-main { padding-bottom: 45vw;}
  .ms-lead { font-size: 16px; line-height: 1.9; }

  .ms-h2 { text-align: left; }
  .ms-h2 br { display: none; }

  .ms-quizgrid { gap: 60px; }

  .ms-expo {
    grid-template-columns: 1fr;
    gap: 20px;
    padding-top: 34px;
  }

  .ms-expo__photo { aspect-ratio: 16 / 9; }
  .ms-expo__btn { margin-inline: auto; }

  .ms-panel__head {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .ms-panel__icon { width: min(180px, 45vw); }
  .ms-panel__text { text-align: left; }
  .ms-keywords { width: 100%; text-align: left; }

  /* タブ：3列 → 縦積み */
  .ms-tabs {
    grid-template-columns: 1fr;
    gap: 8px;
    width: calc(100% - 32px);
  }

  .ms-tab { border-width: 3px; }
  .ms-tab__label { font-size: 17px; }
  .ms-tab__label br { display: none; }

  .ms-panels { width: calc(100% - 16px); }
  .ms-panel { border-width: 3px; padding: 26px 16px 32px; }

  /* クイズ：2列 → 縦積み。矢印は下向きに。
     .ms-quizrow__stepをposition:staticに戻し、グリッドの自然な並び順
     （基礎カード → step → 発展カード）でそのまま3行目として配置することで、
     基礎/発展それぞれの文章量でカードの高さが変わっても、stepは常に
     2枚のカードのちょうど中間に来る（%指定の絶対配置だと高さが揃わない時に
     ずれてしまうため）。gapを20pxにしたうえで、stepに高さの半分(-23px)の
     負のマージンを付けて、見た目の間隔は元の40px相当を維持している。 */
  .ms-quizrow {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 0 0 50px;
    border-bottom: 1px dashed var(--t-main);
  }
  .ms-quizgrid .ms-quizrow:last-of-type {
    padding: 0;
    border-bottom: none;
  }

  .ms-quizrow__step {
    position: relative;
    left: auto;
    top: auto;
    translate: none;
    width: 46px;
    height: 46px;
    margin: -13px auto 2px;
    border-width: 4px;
    rotate: 90deg;
  }

  .ms-quiz__level { border-width: 4px; }
  .ms-quiz__title { min-height: 0; }

  .ms-btn { padding-right: 46px; padding-left: 16px; }

}

/* iOS Safari(WebKit)はルビを含む行の高さを自動で余分に確保する挙動があり、
   これはビューポート幅とは無関係に起こる（iPadOSは既定で「デスクトップ用
   Webサイトを表示」になっており、その場合 innerWidth がデスクトップ相当
   まで広がるため、幅で判定しようとすると機種次第で条件から漏れる）。
   -webkit-touch-callout はiOS版WebKit（Safari・iOS版Chrome等）でのみ
   認識されるプロパティなので、@supportsでの判定に使うことで、デスクトップ
   ブラウザでウィンドウ幅を縮めただけのケースを除外しつつ、iOS実機
   （「デスクトップ表示」設定の有無や画面幅に関わらず）だけに絞る。 */
@supports (-webkit-touch-callout: none) {
  .ms-page :where(ruby rt) { margin-bottom: -0.4vw; }
  .ms-page--elementary .ms-quiz__level {
    padding: clamp(5px, .5vw, 10px) 10px clamp(1px, .1vw, 1px);
  }
}

@supports (-webkit-touch-callout: none) {
  @media (max-width: 600px){
    .ms-page :where(ruby rt) { margin-bottom: -0.8vw; }
    .ms-page--elementary .ms-quiz__level { padding: clamp(5px, .5vw, 10px) 10px 0; min-width: clamp(130px, 12.1vw, 174px); }
  }
}


/* --------------------------------------------------------------
   18. モーション軽減設定への配慮
   -------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .ms-page *,
  .ms-page *::before,
  .ms-page *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  [data-reveal] { opacity: 1; transform: none; }
}