@charset "UTF-8";
/* トップのヒーロー 2分割（parts/home/featured-header.php）。functions.php でトップだけ読む。
   左は lp/maipaso2.php、右は lp/pg2.php のトークンを写したもの。値の正本は各 LP 側
   （knowledge/02-領域/デザインシステム.md / デザインシステム-プログラミングLP.md）。
   2つの系統は影・書体・角の考え方が逆なので、部品を行き来させない。
   SANGO と衝突しないよう、変数は --mp- / --pg- を付けて各パネルの中に閉じる。 */

.pk-hero{display:block;overflow:hidden;overflow:clip}
@media (max-width:1029px){.pk-hero{margin:0 0 28px}}

.pk-hero__split{display:grid;grid-template-columns:2fr 1fr}
@media (max-width:768px){.pk-hero__split{grid-template-columns:1fr}}

.pk-hero h2{padding:0;border:0;background:none}
.pk-hero h2::before,.pk-hero h2::after{content:none}
.pk-nb{display:inline-block}
.pk-nowrap{white-space:nowrap}
.pk-ext{width:.8em;height:.8em;flex:none}
.pk-sr{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------- 左: 毎パソ（空色・段差影。ぼかし影は使わない） ---------- */
.pk-mp{
  --mp-sky:#2F9BEE;
  --mp-sky-deep:#1176C6;
  --mp-sky-mist:#EEF6FE;
  --mp-sky-line:#CFE6F9;
  --mp-sky-grid:rgba(255,255,255,.2);
  --mp-sun:#FFC93C;
  --mp-sun-deep:#E0A400;
  --mp-coral:#FF6B4A;
  --mp-ink:#22374F;
  --mp-ink-deep:#142E42;
  --mp-slate:#546A85;
  --mp-paper:#FFFFFF;
  --mp-disp:"Zen Kaku Gothic New",system-ui,sans-serif;
  --mp-body:"Noto Sans JP",system-ui,sans-serif;
  --mp-mono:"JetBrains Mono","Noto Sans JP",monospace;
  position:relative;overflow:hidden;overflow:clip;container-type:inline-size;background:var(--mp-sky);color:var(--mp-paper);
  border:3px solid var(--mp-sky-line);
  font-family:var(--mp-body);font-weight:400;
}
/* 方眼。LP のヒーロー（v1.2）と同じく、空色の面に白の線で引き下へ消す */
.pk-mp::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--mp-sky-grid) 1px,transparent 1px),linear-gradient(90deg,var(--mp-sky-grid) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 88%);
  mask-image:linear-gradient(180deg,#000 0%,transparent 88%);
}
.pk-mp__in{position:relative;padding:clamp(32px,4vw,52px) clamp(20px,4vw,48px) clamp(40px,4.4vw,56px)}
.pk-mp__eyebrow{
  /* 大きさ・形は右パネルの「中学校「情報の技術」」（.pk-pg__tag）に揃える（2026-09-17 指示）。
     色は赤にせず毎パソの系統で塗る。空色の面に紺の塗り＋白文字 */
  display:inline-flex;align-items:center;height:30px;padding:0 13px;
  border:2px solid var(--mp-ink-deep);border-radius:999px;background:var(--mp-ink-deep);color:var(--mp-paper);
  font-family:var(--mp-disp);font-weight:900;font-size:12.5px;letter-spacing:.06em;line-height:1;
}
.pk-mp__title{
  font-family:var(--mp-disp);font-weight:900;
  font-size:clamp(30px,3.7vw,48px);line-height:1.2;letter-spacing:-.01em;margin:18px 0 0;color:var(--mp-ink-deep);
  word-break:auto-phrase;text-wrap:balance;line-break:strict;
}
.pk-mp__title em{font-style:normal;position:relative;display:inline-block;z-index:0}
.pk-mp__title em::after{
  content:"";position:absolute;left:-2%;right:-2%;bottom:.08em;height:.28em;
  background:var(--mp-sun);z-index:-1;
}
.pk-mp__sub{
  font-family:var(--mp-disp);font-weight:900;font-size:clamp(18px,calc(1.7vw + 2px),22px);
  line-height:1.5;color:var(--mp-paper);margin:14px 0 0;
}
/* 副題の前置き（後援）は本体より 4px 小さく */
.pk-mp__sub-s{font-size:calc(1em - 4px)}
.pk-mp__lead{margin:10px 0 0;font-size:15.5px;font-weight:600;line-height:1.9;color:var(--mp-ink-deep)}
/* 文の区切りで3行に組む。1行が収まらない細さ（スマホ等）では区切りを外して自然に折り返す */
.pk-mp__ln{display:block}
@container (max-width:479px){.pk-mp__ln{display:inline}}
/* 主ボタンの右に枠ボタン。2列を同じ幅（長いほうに合わせる）にする。
   2つ並ばない細さのパネルでは、同じ幅のまま縦に積む */
.pk-mp__acts{display:inline-grid;grid-template-columns:1fr 1fr;align-items:center;gap:18px 14px;margin-top:24px}
@container (max-width:559px){.pk-mp__acts{grid-template-columns:1fr}}
.pk-mp__btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--mp-sun);color:var(--mp-ink);text-decoration:none;
  font-family:var(--mp-body);font-weight:900;font-size:16px;line-height:1.4;
  padding:16px 28px;border-radius:10px;
  box-shadow:0 7px 0 var(--mp-sun-deep);transition:transform .12s,box-shadow .12s;
}
.pk-mp__btn:hover{transform:translateY(4px);box-shadow:0 3px 0 var(--mp-sun-deep);color:var(--mp-ink)}
.pk-mp__ghost{
  display:inline-flex;cursor:pointer;-webkit-appearance:none;appearance:none;align-items:center;justify-content:center;gap:8px;
  color:var(--mp-sky-deep);text-decoration:none;font-family:var(--mp-body);font-weight:900;font-size:15px;line-height:1.4;
  padding:14px 24px;border:2px solid var(--mp-sky);border-radius:10px;background:var(--mp-paper);
}
.pk-mp__ghost:hover{background:var(--mp-sky);color:var(--mp-paper);border-color:var(--mp-paper)}
.pk-mp__btn:focus-visible,.pk-mp__ghost:focus-visible{outline:4px solid var(--mp-coral);outline-offset:3px}

/* ---------- 右: プログラミング教材（平坦な色面・黒枠・柔らかい影） ---------- */
.pk-pg,.pk-pick{
  --pg-red:#D33F27;
  --pg-yellow:#FFC22E;
  --pg-hero-bg:#FCE8BC;
  --pg-mint:#45BFA8;
  --pg-ink:#2A2724;
  --pg-paper:#FAF4E6;
  --pg-white:#FFFCF5;
  --pg-pure:#FFFFFF;
  --pg-bd:3px;
  --pg-bd-thin:2px;
  --pg-r-pill:999px;
  --pg-sh:0 6px 18px rgba(42,39,36,.16);
  --pg-sh-lg:0 14px 34px rgba(42,39,36,.22);
  --pg-disp:"Archivo","Zen Kaku Gothic New","Noto Sans JP",sans-serif;
  --pg-body:"Archivo","Noto Sans JP",sans-serif;
}
/* 標的がパネルの外まではみ出すので、hidden だとフォーカス等で中身がずれる。clip はスクロール自体を起こさない */
.pk-pg{
  position:relative;overflow:hidden;overflow:clip;isolation:isolate;container-type:inline-size;background:var(--pg-hero-bg);color:var(--pg-ink);
  /* LP の輪郭は --ink だが、トップでは毎パソを主にするため地になじむ山吹で弱める（2026-09-15 指示） */
  border:var(--pg-bd) solid var(--pg-yellow);
  font-family:var(--pg-body);font-weight:600;letter-spacing:.02em;
}
/* 標的（同心円）。右下の角から覗かせる。ボタンの後ろに掛かるのは可（2026-09-17 指示）。本文には敷かない */
.pk-pg::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  right:-120px;bottom:-120px;width:240px;aspect-ratio:1;border-radius:50%;
  background:repeating-radial-gradient(circle at center,
    var(--pg-red) 0 26px,var(--pg-paper) 26px 52px,
    var(--pg-mint) 52px 78px,var(--pg-paper) 78px 104px);
  opacity:.26;
}
/* 左右の余白はパネル幅（cqi）で決める。画面幅で決めると細いパネルで余白が勝つ */
.pk-pg__in{position:relative;padding:clamp(32px,4vw,52px) clamp(20px,8cqi,40px) clamp(40px,4.4vw,56px)}
.pk-pg__tag{
  display:inline-flex;align-items:center;height:30px;padding:0 13px;
  border:var(--pg-bd-thin) solid var(--pg-ink);border-radius:var(--pg-r-pill);
  background:var(--pg-red);color:var(--pg-pure);
  font-family:var(--pg-disp);font-weight:900;font-size:12.5px;letter-spacing:.06em;
}
.pk-pg__title{
  font-family:var(--pg-disp);font-weight:900;color:var(--pg-ink);
  font-size:clamp(28px,3.4vw,44px);line-height:1.22;letter-spacing:.01em;margin:18px 0 0;
  word-break:auto-phrase;text-wrap:balance;line-break:strict;overflow-wrap:normal;
  /* 2行目（約11.2字分）がパネルの内幅に収まる大きさ。パネル幅は画面幅に比例しないので cqi で測る */
  font-size:clamp(26px,calc((100cqi - 2 * clamp(20px,8cqi,40px)) / 11.6),42px);
}
.pk-pg__title em{
  font-style:normal;background:var(--pg-ink);color:var(--pg-hero-bg);
  padding:0 .12em;display:inline-block;white-space:nowrap;
}
/* 2行目は「動く。」だけ落とさない（balance が3行に割るため）。
   26px でも収まらない細さのパネルでは「チャットボット／が動く。」で折る */
.pk-pg__line{white-space:nowrap}
@container (max-width:349px){.pk-pg__line{white-space:normal}}
.pk-pg__sub{font-weight:900;font-size:clamp(16px,1.7vw,20px);line-height:1.5;margin:14px 0 0}
.pk-pg__lead{margin:10px 0 0;font-size:.9375rem;line-height:1.9;max-width:26em}
/* 主ボタンの下に「無料で試す」。幅を揃えて縦に積む */
.pk-pg__acts{display:inline-flex;flex-direction:column;align-items:stretch;gap:14px;margin-top:24px}
.pk-pg__btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;margin:0;cursor:pointer;-webkit-appearance:none;appearance:none;
  min-height:60px;padding:0 30px;border:var(--pg-bd) solid var(--pg-ink);border-radius:var(--pg-r-pill);
  background:var(--pg-red);color:var(--pg-pure);text-decoration:none;
  font-family:var(--pg-disp);font-weight:900;font-size:1.0625rem;line-height:1.3;letter-spacing:.03em;
  box-shadow:var(--pg-sh);transition:transform .16s ease,box-shadow .16s ease;
}
.pk-pg__btn:hover{transform:translateY(-2px);box-shadow:var(--pg-sh-lg);color:var(--pg-pure)}
.pk-pg__btn:active{transform:translateY(1px);box-shadow:none}
.pk-pg__btn:focus-visible{outline:4px solid var(--pg-ink);outline-offset:3px}
/* 黄・ミントの地は黒文字（白は AA を割る） */
.pk-pg__btn--yellow,.pk-pg__btn--yellow:hover{background:var(--pg-yellow);color:var(--pg-ink)}
.pk-pg__btn--mint,.pk-pg__btn--mint:hover{background:var(--pg-mint);color:var(--pg-ink)}

/* 申し込み先を選ぶダイアログ（lp/pg2.php の .pick の写し） */
.pk-pick{
  border:var(--pg-bd) solid var(--pg-ink);border-radius:26px;padding:0;
  background:var(--pg-white);color:var(--pg-ink);
  max-width:min(540px,92vw);box-shadow:var(--pg-sh-lg);overflow:hidden;
  font-family:var(--pg-body);font-weight:600;letter-spacing:.02em;
}
.pk-pick::backdrop{background:rgba(20,20,20,.62)}
.pk-pick__in{padding:clamp(22px,4vw,30px)}
.pk-pick__t{font-family:var(--pg-disp);font-weight:900;font-size:1.25rem;line-height:1.5;margin:0;color:var(--pg-ink)}
.pk-pick__d{margin:12px 0 0;font-size:.9375rem;line-height:1.95}
.pk-pick__acts{display:grid;gap:12px;margin-top:22px}
.pk-pick__acts .pk-pg__btn{width:100%;text-align:center;flex-wrap:wrap;gap:0;padding-block:8px}
.pk-pick__close{
  margin-top:20px;width:100%;min-height:44px;border:var(--pg-bd-thin) solid var(--pg-ink);
  background:var(--pg-white);color:var(--pg-ink);font-family:var(--pg-disp);font-weight:900;
  font-size:.9375rem;cursor:pointer;border-radius:var(--pg-r-pill);
}
.pk-pick__close:hover{background:var(--pg-paper)}
.pk-pick__close:focus-visible{outline:4px solid var(--pg-ink);outline-offset:3px}

@media (prefers-reduced-motion:reduce){
  .pk-mp__btn,.pk-pg__btn{transition:none}
}

/* 新規登録の説明モーダル（毎パソ側。地は白、枠と段差影は空色。ぼかし影は使わない） */
.pk-signup{
  --mp-sky:#2F9BEE;
  --mp-sky-deep:#1176C6;
  --mp-sky-pale:#E0EFFC;
  --mp-sky-line:#CFE6F9;
  --mp-sun:#FFC93C;
  --mp-sun-deep:#E0A400;
  --mp-coral:#FF6B4A;
  --mp-ink:#22374F;
  --mp-slate:#546A85;
  --mp-paper:#FFFFFF;
  --mp-disp:"Zen Kaku Gothic New",system-ui,sans-serif;
  --mp-body:"Noto Sans JP",system-ui,sans-serif;
  padding:0;border:3px solid var(--mp-sky-line);border-radius:16px;
  background:var(--mp-paper);color:var(--mp-ink);
  max-width:min(680px,92vw);box-shadow:0 14px 0 var(--mp-sky-pale);
  font-family:var(--mp-body);font-weight:400;
}
.pk-signup::backdrop{background:rgba(20,40,60,.62)}
.pk-signup__in{padding:clamp(22px,4vw,32px)}
.pk-signup__t{font-family:var(--mp-disp);font-weight:900;font-size:clamp(20px,3vw,26px);line-height:1.4;margin:0;color:var(--mp-ink)}
.pk-signup__d{margin:10px 0 0;font-size:14.5px;line-height:1.9;color:var(--mp-slate)}
.pk-signup__cols{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:20px}
@media (max-width:560px){.pk-signup__cols{grid-template-columns:1fr}}
.pk-signup__col{background:var(--mp-sky-pale);border-radius:12px;padding:16px 18px}
.pk-signup__h{font-family:var(--mp-disp);font-weight:900;font-size:16px;line-height:1.5;margin:0;color:var(--mp-sky-deep)}
.pk-signup__note{display:block;font-family:var(--mp-body);font-weight:400;font-size:12.5px;color:var(--mp-slate)}
.pk-signup__list{margin:10px 0 0;padding-left:1.2em;font-size:14px;line-height:1.85;list-style:disc outside}
.pk-signup__list li::marker{color:var(--mp-sky)}
.pk-signup__list li{margin:2px 0}
.pk-signup__go{width:100%;margin-top:22px}
.pk-signup__close{
  margin-top:20px;width:100%;min-height:44px;border:2px solid var(--mp-sky);
  background:var(--mp-paper);color:var(--mp-sky-deep);font-family:var(--mp-body);font-weight:900;
  font-size:15px;cursor:pointer;border-radius:10px;
}
.pk-signup__close:hover{background:var(--mp-sky);color:var(--mp-paper)}
.pk-signup__close:focus-visible{outline:4px solid var(--mp-coral);outline-offset:3px}