/* Theme layer for the child-facing Ninja Training landing pages. */
body.ninja-landing {
  --nl-accent:#b44a35;
  --nl-dark:#74291e;
  --nl-soft:#f4dfba;
  --nl-art:url('/assets/images/ninja/kanji-scroll.webp');
  color:#2f281f;
  background:#15283a url('/assets/images/bg-mosaic.png') 0 0/160px;
}
body.ninja-lp-tokei { --nl-accent:#d47b1f;--nl-dark:#81470d;--nl-soft:#f5d89e;--nl-art:url('/assets/images/ninja/tokei-clockwork.webp'); }
body.ninja-lp-kanji { --nl-accent:#b64632;--nl-dark:#72271d;--nl-soft:#efc9a5;--nl-art:url('/assets/images/ninja/kanji-scroll.webp'); }
body.ninja-lp-katakana { --nl-accent:#168c8b;--nl-dark:#0c5960;--nl-soft:#b9dfd3;--nl-art:url('/assets/images/ninja/katakana-infiltration.webp'); }
body.ninja-lp-romaji { --nl-accent:#7652b8;--nl-dark:#452b79;--nl-soft:#d3c0ee;--nl-art:url('/assets/images/ninja/romaji-cipher.webp'); }
body.ninja-lp-phonics { --nl-accent:#4b8e42;--nl-dark:#285d25;--nl-soft:#c5dba2;--nl-art:url('/assets/images/ninja/phonics-listen.webp'); }
body.ninja-lp-kuku { --nl-accent:#2f6ea8;--nl-dark:#1b4670;--nl-soft:#bcd8ef;--nl-art:url('/assets/images/ninja/kuku-groups.webp'); }
.ninja-landing main {
  overflow:hidden;
  background:#fffaf0;
  box-shadow:0 0 46px rgba(0,0,0,.28);
}
.ninja-landing .eal-hero {
  position:relative;
  overflow:hidden;
  color:#fff;
  background:
    linear-gradient(90deg,rgba(15,31,44,.98) 0 54%,rgba(15,31,44,.55) 74%,rgba(15,31,44,.84)),
    repeating-linear-gradient(135deg,#51331f 0 24px,#63402a 25px 27px,#4a2d1c 28px 54px);
  border-bottom:8px solid var(--nl-accent);
}
.ninja-landing .eal-hero::before {
  content:'';
  position:absolute;
  inset:0;
  opacity:.24;
  background:
    radial-gradient(circle at 12% 20%,#fff 0 1px,transparent 2px),
    radial-gradient(circle at 32% 65%,#fff 0 1px,transparent 2px);
  background-size:90px 90px,130px 130px;
}
.ninja-landing .eal-hero .eal-container {
  position:relative;
  z-index:1;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(330px,.78fr)!important;
  align-items:center;
  min-height:500px;
  gap:28px;
}
.ninja-landing .eal-hero .eal-container::after {
  content:'';
  grid-column:2;
  grid-row:1;
  align-self:stretch;
  min-height:420px;
  background:var(--nl-art) center/contain no-repeat;
  filter:drop-shadow(0 18px 16px rgba(0,0,0,.38));
}
.ninja-landing .eal-hero-copy {
  grid-column:1;
  grid-row:1;
  position:relative;
  z-index:2;
}
.ninja-landing .eal-hero-img { display:none!important; }
.ninja-landing .eal-badge {
  color:#fff;
  border:1px solid color-mix(in srgb,var(--nl-accent) 65%,#fff);
  background:color-mix(in srgb,var(--nl-accent) 78%,transparent);
}
.ninja-landing .eal-hero h1,
.ninja-landing .eal-hero h1 span { color:#fff; }
.ninja-landing .eal-hero h1 span { color:#ffd67b; }
.ninja-landing .eal-lead { color:#eef4f4; }
.ninja-landing .eal-btn-primary {
  border-color:var(--nl-accent);
  background:var(--nl-accent);
  box-shadow:0 5px 0 var(--nl-dark);
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);
}
.ninja-landing .eal-btn-primary:hover { background:var(--nl-dark); }
.ninja-landing .eal-btn-ghost {
  color:#fff;
  border-color:#ffffff8f;
  background:#ffffff14;
}
.ninja-landing .eal-checks span::before { color:#ffd67b; }
.ninja-landing .eal-section {
  position:relative;
  background:
    linear-gradient(rgba(255,251,241,.97),rgba(255,251,241,.97)),
    repeating-linear-gradient(0deg,transparent 0 31px,rgba(90,58,31,.11) 32px);
}
.ninja-landing .eal-section-tint {
  background:
    linear-gradient(color-mix(in srgb,var(--nl-soft) 26%,#fff),color-mix(in srgb,var(--nl-soft) 45%,#fff)),
    repeating-linear-gradient(90deg,transparent 0 39px,rgba(90,58,31,.08) 40px);
  border-block:10px solid #5b3722;
}
.ninja-landing .eal-eyebrow { color:var(--nl-dark); }
.ninja-landing .eal-head h2::after {
  content:'';
  display:block;
  width:70px;
  height:5px;
  margin:14px auto 0;
  background:var(--nl-accent);
  clip-path:polygon(0 0,100% 0,92% 100%,8% 100%);
}
.ninja-landing .eal-card {
  position:relative;
  overflow:hidden;
  border:1px solid #d2bc91;
  border-radius:6px;
  background:#fffdf7;
  box-shadow:0 6px 0 #c8ad7b,0 14px 22px rgba(69,43,21,.1);
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);
}
.ninja-landing .eal-card::before {
  content:'修行';
  position:absolute;
  right:-24px;
  top:14px;
  width:90px;
  padding:4px;
  rotate:42deg;
  color:#fff;
  background:var(--nl-accent);
  font-size:10px;
  font-weight:900;
  text-align:center;
}
.ninja-landing .eal-card-num {
  color:#fff;
  background:var(--nl-accent);
  box-shadow:0 3px 0 var(--nl-dark);
}
.ninja-landing .eal-feature>img {
  width:100%;
  max-height:430px;
  padding:18px;
  object-fit:contain;
  border:2px solid color-mix(in srgb,var(--nl-accent) 48%,#c9b48c);
  background:linear-gradient(145deg,#fffdf5,var(--nl-soft));
  box-shadow:0 8px 0 #b89b69;
}
.ninja-landing .eal-point {
  border-left:5px solid var(--nl-accent);
  background:#fffdf7;
}
.ninja-landing .eal-faq details {
  border-color:#d2bc91;
  background:#fffdf7;
}
.ninja-landing .eal-faq summary::after { color:var(--nl-accent); }
.ninja-landing .eal-final {
  position:relative;
  color:#fff;
  border-top:8px solid var(--nl-accent);
  background:
    linear-gradient(110deg,rgba(16,35,49,.96),rgba(45,31,54,.9)),
    url('/assets/images/bg-mosaic.png') center/160px;
}
.ninja-landing .eal-final h2,
.ninja-landing .eal-final p { color:#fff; }
.ninja-landing .eal-footer {
  color:#e9eef1;
  background:#0f1f2d;
}

/* Keep the established space journey, now presented as a space-ninja village. */
body.ninja-lp-space {
  background:#050d22 url('/assets/images/ninja/space-village-bg.webp') center top/cover fixed;
}
.ninja-lp-space .slp-hero {
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(90deg,rgba(5,14,37,.96),rgba(33,20,74,.8)),
    url('/assets/images/ninja/space-village-bg.webp') center/cover;
}
/* 「宇宙忍者の里」のバッジは廃止（2026-09-03）。絶対配置で左端に置いていたため、
   中央ぞろえのキャッチや導線と目線がそろわず、間隔がずれて見えていた。
   ::before を上書きしないことで、sansu-app-lp.css の星の点描がそのまま出る。 */
.ninja-lp-space .slp-hero-visual {
  min-height:410px;
  background:url('/assets/images/ninja/sansu-space.webp') center/contain no-repeat;
  filter:drop-shadow(0 18px 15px rgba(0,0,0,.45));
}
.ninja-lp-space .slp-screen { visibility:hidden; }
.ninja-lp-space .slp-float-card { display:none; }
.ninja-lp-space .slp-section,
.ninja-lp-space .slp-proof {
  background:linear-gradient(rgba(9,20,48,.97),rgba(17,24,63,.97));
  color:#eef2ff;
}
.ninja-lp-space .slp-section.tint { background:linear-gradient(#17133f,#0d2445); }
.ninja-lp-space .slp-section h2,
.ninja-lp-space .slp-section h3,
.ninja-lp-space .slp-section p,
.ninja-lp-space .slp-proof span { color:#eef2ff; }
.ninja-lp-space .slp-calc-card,
.ninja-lp-space .slp-play-card,
.ninja-lp-space .slp-step,
.ninja-lp-space .slp-faq details {
  color:#20213a;
  border-color:#7f65ca;
  background:#f9f6ff;
  box-shadow:0 6px 0 #5a40a7;
}
.ninja-lp-space .slp-calc-card h3,
.ninja-lp-space .slp-calc-card p,
.ninja-lp-space .slp-play-card h3,
.ninja-lp-space .slp-play-card p,
.ninja-lp-space .slp-step h3,
.ninja-lp-space .slp-step p { color:#20213a; }

@media (max-width:767px) {
  .ninja-landing .eal-hero .eal-container {
    grid-template-columns:1fr!important;
    min-height:auto;
    padding-top:48px;
  }
  .ninja-landing .eal-hero-copy { grid-column:1;grid-row:1;text-align:center; }
  .ninja-landing .eal-hero .eal-container::after { grid-column:1;grid-row:2;min-height:260px; }
  .ninja-lp-space .slp-hero-visual { min-height:290px; }
}

/* Ninja landing v2 — match the modern in-app art direction. */
.ninja-landing {
  --nl-deep:#0c202a;
  --nl-deeper:#08161e;
  background:#0a1720 url('/assets/images/bg-mosaic.png') 0 0/160px;
}
.ninja-landing main {
  background:#f4f0e7;
  box-shadow:0 24px 70px rgba(0,0,0,.42);
}
.ninja-landing .eal-hero {
  border-bottom:0;
  background:
    linear-gradient(102deg,var(--nl-deep) 0 60%,transparent 60.3%),
    linear-gradient(135deg,var(--nl-soft),color-mix(in srgb,var(--nl-soft) 60%,#fff));
  box-shadow:inset 0 -6px 0 var(--nl-accent);
}
.ninja-landing .eal-hero::before {
  opacity:.2;
  background:
    radial-gradient(circle at 8% 18%,#fff 0 1px,transparent 2px),
    radial-gradient(circle at 25% 72%,#fff 0 1px,transparent 2px);
  background-size:80px 80px,120px 120px;
}
.ninja-landing .eal-hero .eal-container { min-height:480px; }
.ninja-landing .eal-hero .eal-container::after {
  min-height:400px;
  filter:drop-shadow(0 20px 18px rgba(0,0,0,.3));
}
.ninja-landing .eal-badge {
  border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.1);
}
.ninja-landing .eal-btn-primary {
  border:0;
  border-radius:10px;
  box-shadow:0 5px 0 var(--nl-dark);
  clip-path:none;
}
.ninja-landing .eal-section {
  background:#f8f5ee;
}
.ninja-landing .eal-section-tint {
  border-block:0;
  background:color-mix(in srgb,var(--nl-soft) 30%,#f8f5ee);
}
.ninja-landing .eal-head h2::after {
  height:4px;
  border-radius:99px;
  clip-path:none;
}
.ninja-landing .eal-card {
  border:0;
  border-radius:14px;
  background:#fff;
  box-shadow:0 10px 28px rgba(45,35,25,.1);
  clip-path:none;
}
.ninja-landing .eal-card::before { display:none; }
.ninja-landing .eal-card-num {
  box-shadow:none;
}
.ninja-landing .eal-point {
  border:0;
  border-left:4px solid var(--nl-accent);
  border-radius:10px;
  background:#fff;
  box-shadow:0 6px 18px rgba(45,35,25,.08);
}
.ninja-landing .eal-feature>img {
  border:0;
  border-radius:18px;
  background:linear-gradient(145deg,#fff,var(--nl-soft));
  box-shadow:0 14px 34px rgba(45,35,25,.14);
}
.ninja-landing .eal-faq details {
  overflow:hidden;
  border:0;
  border-radius:10px;
  background:#fff;
  box-shadow:0 4px 14px rgba(45,35,25,.07);
}
.ninja-landing .eal-final {
  border-top:0;
  background:
    radial-gradient(circle at 80% 20%,color-mix(in srgb,var(--nl-accent) 24%,transparent),transparent 35%),
    linear-gradient(120deg,var(--nl-deeper),var(--nl-deep));
}
@media (max-width:767px) {
  .ninja-landing .eal-hero {
    background:
      linear-gradient(var(--nl-deep) 0 58%,transparent 58.3%),
      linear-gradient(135deg,var(--nl-soft),color-mix(in srgb,var(--nl-soft) 60%,#fff));
  }
}

/* Collectible item art for themed landing cards. */
body.ninja-lp-tokei { --nl-items:url('/assets/images/ninja/items/tokei-items.webp'); }
body.ninja-lp-kanji { --nl-items:url('/assets/images/ninja/items/kanji-items.webp?v=20260924'); }
body.ninja-lp-katakana { --nl-items:url('/assets/images/ninja/items/katakana-items.webp'); }
body.ninja-lp-romaji { --nl-items:url('/assets/images/ninja/items/romaji-items.webp'); }
body.ninja-lp-phonics { --nl-items:url('/assets/images/ninja/items/phonics-items.webp'); }
body.ninja-lp-kuku { --nl-items:url('/assets/images/ninja/items/kuku-items.webp'); }
.ninja-landing .eal-hero + .eal-section .eal-head::before {
  content:'';
  display:block;
  width:220px;
  height:64px;
  margin:0 auto 10px;
  background:var(--nl-items) center/contain no-repeat;
  filter:drop-shadow(0 6px 7px rgba(30,25,20,.14));
}
.ninja-landing .eal-grid-3 .eal-card::before {
  content:'';
  position:static;
  display:block;
  width:58px;
  height:58px;
  margin:0 0 14px;
  padding:0;
  rotate:0deg;
  color:transparent;
  background-color:transparent;
  background-image:var(--nl-items);
  background-repeat:no-repeat;
  background-size:400% 100%;
  background-position:0 50%;
}
.ninja-landing .eal-grid-3 .eal-card:nth-child(2)::before { background-position:33.333% 50%; }
.ninja-landing .eal-grid-3 .eal-card:nth-child(3)::before { background-position:66.666% 50%; }
.ninja-landing .eal-grid-3 .eal-card:nth-child(4)::before { background-position:100% 50%; }
.ninja-landing .eal-feature-copy .eal-head { text-align:left; margin:0 0 22px; }
body.ninja-lp-phonics .eal-card-num { display:none; }


/* ランディングのヒーロー画像（.eal-container::after）はモバイルでも400px高のまま
   だったため、本文のあとに大きな画像の塊が入って「改行」したように見えていた。
   幅の3段ルールに合わせ、画面の高さから決めた帯にする。 */
@media (max-width:767px) {
  .ninja-landing .eal-hero .eal-container { min-height:0; }
  .ninja-landing .eal-hero .eal-container::after {
    grid-column:1;
    grid-row:2;
    min-height:clamp(150px,26dvh,230px);
  }
}

/* 明暗の切り分けを「割合」でやると、ヒーローの高さが変わったときに
   切れ目が本文の途中に来て文字が読めなくなる。モバイルでは
   ヒーロー全体を暗くし、明るい面はイラストの箱だけが持つようにする。 */
@media (max-width:767px) {
  .ninja-landing .eal-hero {
    background:linear-gradient(160deg,var(--nl-deep),var(--nl-deeper));
  }
  .ninja-landing .eal-hero .eal-container::after {
    margin-top:6px;
    border-radius:16px;
    background-color:color-mix(in srgb,var(--nl-soft) 72%,#fff);
  }
  .ninja-landing .eal-checks { color:#cbd6d9; }
}

/* カード頭の「アイテム絵 → 番号 → 見出し → 本文」が全部別の行になり、
   1枚のカードで4段も積み上がって縦に伸びていた。
   絵と番号は同じ行に並べ、行数を1つ減らす。 */
.ninja-landing .eal-grid-3 .eal-card {
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  /* 3枚は同じ高さに伸びる。既定の stretch だと余った高さが行に配られ、
     文の短いカードだけ見出しが下がって揃わなかった（2026-09-16）。 */
  align-content:start;
  gap:0 12px;
}
.ninja-landing .eal-grid-3 .eal-card::before {
  grid-column:1;
  grid-row:1;
  margin:0;
}
.ninja-landing .eal-grid-3 .eal-card-num {
  grid-column:2;
  grid-row:1;
  justify-self:start;
  margin:0;
}
.ninja-landing .eal-grid-3 .eal-card h3 {
  grid-column:2;
  grid-row:1;
  margin:0;
}
.ninja-landing .eal-grid-3 .eal-card p {
  grid-row:2;
  margin-top:12px;
  grid-column:1 / -1;
}

/* ステップ番号を忍者道具のアイコンに差し替える（番号は絵の中に描かれている）。
   数字テキストは読み上げのために残し、font-size:0 で見た目だけ消す。
   アイテム絵（::before）と並べると絵が2つで うるさいので、こちらに一本化する。 */
.ninja-landing .eal-grid-3 .eal-card::before { content:none; }
.ninja-landing .eal-grid-3 .eal-card {
  grid-template-columns:auto 1fr;
}
.ninja-landing .eal-grid-3 .eal-card-num {
  display:grid;
  grid-column:1;
  grid-row:1;
  width:52px;
  height:52px;
  border-radius:0;
  background:center/contain no-repeat;
  box-shadow:none;
  font-size:0;
  filter:drop-shadow(0 3px 4px rgba(40,28,16,.18));
}
.ninja-landing .eal-grid-3 .eal-card:nth-child(1) .eal-card-num { background-image:url('/assets/images/ninja/steps/step-1.png'); }
.ninja-landing .eal-grid-3 .eal-card:nth-child(2) .eal-card-num { background-image:url('/assets/images/ninja/steps/step-2.png'); }
.ninja-landing .eal-grid-3 .eal-card:nth-child(3) .eal-card-num { background-image:url('/assets/images/ninja/steps/step-3.png'); }
.ninja-landing .eal-grid-3 .eal-card:nth-child(4) .eal-card-num { background-image:url('/assets/images/ninja/steps/step-4.png'); }

/* 画像まわりの枠（内側の余白＋下地の色）はやめて、そのぶん絵を大きく見せる。
   切り抜きではなく背景ごとの1枚絵なので、額装せず cover で角丸に収める。 */
.ninja-landing .eal-feature>img {
  padding:0;
  max-height:none;
  aspect-ratio:16 / 9;
  object-fit:cover;
  background:none;
  border-radius:18px;
  box-shadow:0 14px 34px rgba(45,35,25,.16);
}

/* アイコンと同じ行に置くぶん、見出しは少し大きくして釣り合いを取る */
.ninja-landing .eal-grid-3 .eal-card h3 { font-size:17.5px; line-height:1.5; }
.ninja-kids :is(.tk-step,.kj-step,.kt-step,.rj-step,.pn-step)>h3 { font-size:15.5px; line-height:1.5; }