/* 学習アプリ ガイド /lp-apps/（2026-10-26・Sana「画像をリッチメッセージにして、押すとアプリの詳しい説明があるページ」「より使い方とかできることがぱっとわかる」
   「検定前で、ちょっとした時間に練習したい。そろばん練習ルーム！とかね」）。公式LINE の リッチメッセージの 行き先・検索には 出さない（noindex）。
   このページだけの CSS（inc/nyugaku-check.php の「このページだけの CSS」で 読む・site.src.css は さわらない）。LP の 部品（lp-hero・lp-sec・lp-head・lp-cta・lp-why）は site.css の まま。
   にぎやか v4：白い 角丸・色の ふち・線の 影・わくま。かたむけない・箱の 片側だけの 線なし。スマホは html{zoom:.75} → 下の @media で 大きめに */
.lp-apps { --so: #F07A28; --so-l: #FFEBDA; --so-d: #B9520E; --ka: #2F9C6A; --ka-l: #E2F4EA; --ka-d: #1D7049; --en: #6C5CE7; --en-l: #ECE9FF; --en-d: #4A3DB0;
  --ar: #E9578A; --ar-l: #FDE6EE; --ar-d: #B83063; --vn: #D8302A; --vn-l: #FDE5E3; --vn-d: #A8231C; --gold: #E2A400; --gold-d: #A87400; }
.lp-apps .so { --c: var(--so); --cl: var(--so-l); --cd: var(--so-d); } .lp-apps .ka { --c: var(--ka); --cl: var(--ka-l); --cd: var(--ka-d); }
.lp-apps .en { --c: var(--en); --cl: var(--en-l); --cd: var(--en-d); } .lp-apps .ar { --c: var(--ar); --cl: var(--ar-l); --cd: var(--ar-d); }
.lp-apps .vn { --c: var(--vn); --cl: var(--vn-l); --cd: var(--vn-d); }
/* 2026-10-27 プログラミング（わくまの プログラミング工房・2026年11月中 公開予定）＝ロゴの 青（仮）。リンクは なし（.la-soon の 札だけ） */
.lp-apps .pg { --c: #0096DB; --cl: #E3F4FC; --cd: #00679E; }
.la-subj li small { margin-left: 6px; font-size: .78em; color: var(--ink2); }
.la-soon { display: inline-flex; align-items: center; min-height: 44px; margin-top: 12px; padding: 0 18px; border-radius: 999px; background: #FFF4A3; color: #6E4A00; border: 2.5px dashed #E2C640; font-family: var(--maru); font-weight: 900; font-size: 15px; white-space: nowrap; }
@media (max-width: 680px) { .la-soon { min-height: 60px; font-size: 18px; padding: 0 18px; } }
/* 2026-10-27 2.16.82 プレイルーム（[ks_play_room]・見た目は site.css の .hub-play の まま）。カードの 列と 同じ 幅に */
.lp-apps .ks-play-only { max-width: 920px; margin: 0 auto; }
@media (max-width: 980px) { .lp-apps .ks-play-only { max-width: 640px; } }

/* iPhone 風の 枠：site.css の 枠の 本体と 画像は .hub-shot・.nk-shots の 中だけ → このページでも 同じに（ふち・影・ノッチは site.css の .ph.ip の まま） */
.lp-apps .ph.ip { position: relative; display: block; aspect-ratio: 1350 / 2760; container-type: inline-size; border: 0; border-radius: 0; padding: 0; background: none; box-shadow: none; overflow: visible; }
.lp-apps .ph.ip img { position: absolute; left: 0; top: 7.1%; width: 100%; height: 92.9%; object-fit: cover; object-position: top; display: block; border-radius: 0; aspect-ratio: auto; background: #FFF8EA; }

/* ---- 上 ---- */
.la-hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 28px; align-items: center; }
.la-pre { margin: 18px 0 -8px; font-family: var(--maru); font-weight: 900; font-size: 26px; line-height: 1.35; color: var(--ink2); }
.la-subj { list-style: none; margin: 16px 0 22px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.la-subj li { padding: 6px 16px 7px; border-radius: 999px; background: var(--cl); color: var(--cd); border: 2.5px solid color-mix(in srgb, var(--c) 45%, #fff); font-family: var(--maru); font-weight: 900; font-size: 15px; }
.la-hero-r { position: relative; max-width: 330px; margin: 0 auto; padding: 18px 10px 10px 40px; }
.la-phone { width: 240px; margin-left: auto; }
.la-wk { position: absolute; left: -6px; bottom: -6px; width: 118px; height: auto; z-index: 3; }
.la-medal { position: absolute; left: 0; top: 0; z-index: 4; display: flex; align-items: center; gap: 10px; padding: 7px 16px 7px 7px; border-radius: 999px; background: #fff; border: 4px solid var(--gold); box-shadow: 0 5px 0 #E9CF7A; }
.la-medal i { flex: none; width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; text-align: center; font-style: normal; font-family: var(--maru); font-weight: 900; font-size: 17px; line-height: 1.05; color: #fff;
  background: radial-gradient(circle at 35% 30%, #FFE98A, var(--gold) 70%); border: 3px solid #fff; box-shadow: 0 0 0 3px var(--gold); }
.la-medal b { font-family: var(--maru); font-weight: 900; font-size: 17px; line-height: 1.25; color: var(--gold-d); }

/* ---- こんなときに ---- */
.la-scenes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.la-sc { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 18px; align-items: start; padding: 18px 20px 18px 18px; border-radius: 26px; background: #fff;
  border: 3px solid color-mix(in srgb, var(--c) 32%, #fff); box-shadow: 0 6px 0 color-mix(in srgb, var(--c) 18%, #fff); }
.la-shot { width: 116px; }
.la-when { margin: 0; font-family: var(--maru); font-weight: 900; font-size: 21px; line-height: 1.35; color: var(--ink); }
.la-app { margin: 10px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-family: var(--maru); font-weight: 900; font-size: 15px; line-height: 1.35; color: var(--cd); }
.la-b { padding: 3px 11px 4px; border-radius: 999px; background: var(--c); color: #fff; font-size: 12.5px; }
.la-do { margin: 8px 0 0; font-size: 14.5px; line-height: 1.65; color: var(--ink2); }
.la-do b { color: var(--ink); }
.la-go { display: inline-flex; align-items: center; min-height: 44px; margin-top: 12px; padding: 0 18px; border-radius: 999px; background: var(--cl); color: var(--cd); border: 2.5px solid color-mix(in srgb, var(--c) 45%, #fff);
  font-family: var(--maru); font-weight: 900; font-size: 15px; text-decoration: none; }
.la-go:hover { background: #fff; }

/* ---- はじめかた ---- */
.la-steps { list-style: none; margin: 0 auto 26px; padding: 0; max-width: 920px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.la-steps li { position: relative; padding: 22px 18px 18px; border-radius: 24px; background: #fff; border: 3px solid var(--line); box-shadow: 0 6px 0 var(--line); text-align: center; }
.la-steps .n { display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 10px; border-radius: 50%; background: var(--yellow); box-shadow: 0 5px 0 #D9C800; font-family: var(--maru); font-weight: 900; font-size: 26px; color: var(--ink); }
.la-steps b { display: block; font-family: var(--maru); font-weight: 900; font-size: 18px; line-height: 1.35; color: var(--ink); }
.la-steps small { display: block; margin-top: 6px; font-size: 13.5px; line-height: 1.55; color: var(--ink2); }
.la-note { text-align: center; margin-top: 18px; }

/* ---- まんなかの 幅 ---- */
@media (max-width: 980px) {
  .la-scenes { grid-template-columns: 1fr; max-width: 640px; margin: 0 auto; }
}
/* ---- スマホ（〜680px・サイトは zoom .75 → ここの px は 0.75 倍で 見える。押す ところは 見えて 44px 以上＝59px 以上） ---- */
@media (max-width: 680px) {
  .la-hero { grid-template-columns: 1fr; gap: 10px; }
  .la-pre { font-size: 30px; }
  .la-hero-r { max-width: 400px; padding: 26px 10px 10px 54px; }
  .la-phone { width: 270px; }
  .la-wk { width: 140px; }
  .la-medal i { width: 78px; height: 78px; font-size: 21px; }
  .la-medal b { font-size: 21px; }
  .la-subj li { font-size: 19px; padding: 7px 18px 8px; }
  .la-sc { grid-template-columns: 132px minmax(0, 1fr); gap: 16px; padding: 18px 16px 18px 14px; }
  .la-shot { width: 132px; }
  .la-when { font-size: 27px; }
  .la-app { font-size: 19px; }
  .la-b { font-size: 16px; }
  .la-do { font-size: 18.5px; }
  .la-go { min-height: 60px; font-size: 19px; padding: 0 22px; }
  .la-steps { grid-template-columns: 1fr; }
  .la-steps b { font-size: 23px; }
  .la-steps small { font-size: 17.5px; }
}
/* 折り返しは 字の あいだの 空白で（「練／習したい」「きれい／に」の ような 切れ方を しない）・ボタンは 1行 */
.la-when, .la-app, .la-do, .la-steps b, .la-steps small, .la-pre, .lp-apps .lp-h1 { word-break: keep-all; overflow-wrap: anywhere; }
.la-go { white-space: nowrap; }
@media (max-width: 680px) { .la-when { font-size: 25px; } .la-go { font-size: 18px; padding: 0 18px; } }