/* 勉強チェックの入口（販売ページ）だけの見た目（2026-09-29 深夜 ゴンザレス・ろっく「デザインは学ばなかった？」）
   学習サービスの販売ページ10個を頭から最後まで見て、多かった物から取った（数と出どころ＝memory/shared/lp-research-education-2026-09-29.md）:
     帯の塗り分け 10/10・大きい数字 10/10・色つきの太字 10/10・真ん中の見出し＋上に小さい札 8/10・ボタンの中に矢印 9/10・
     丸いボタン 6/10・「＼…／」の一言 6/10・下に張りつくボタン 6/10・作った人の顔 4/10・困りごと→解決の矢印 4/10・Q&A 4/10
   札の字（英語・明朝）は ろっく家庭教師のHP（katekyorock.com の .en）と同じ。
   ★トウカの決まり（memory/shared/promo-design-rules-2026-09-27.md の B）も当てた: 色は4色まで（地・紺・オレンジ・黄）／強調は色だけ／影で飾らない／部品を傾けない／大きい見出しは palt／人物は切り抜いて大きく★ほかのページ（f/k/s/o/tokushoho）は study.css だけ */
.lp { --navy:#1d3557; --sky:#eef5fc; --sky2:#d6e5f5; --cream:#fff8ec; --accent:#e76f51; --accent-d:#c2472d; --em:#c8472b; --yellow:#ffd166; --marker:#ffe28a;
  font-family:"Noto Sans JP","Hiragino Sans","Yu Gothic","YuGothic","Meiryo",sans-serif; background:#fff; color:#1f2733; line-height:1.8; padding-bottom:104px; }
.lp main { max-width:none; margin:0; padding:0; }
.lp .in { max-width:560px; margin:0 auto; padding:0 16px; }
.lp em { font-style:normal; color:var(--em); }
.lp .mk { background:linear-gradient(transparent 58%, var(--marker) 58%); }

/* 頭の帯（ロゴ＝10個とも） */
.lp-top { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 16px; background:#fff; border-bottom:1px solid #e8edf3; }
.lp-top .brand { display:flex; align-items:center; gap:8px; color:var(--navy); line-height:1.25; min-width:0; }
.lp-top .brand img { width:30px; height:30px; flex:none; }
.lp-top .brand b { display:block; font-size:15px; font-weight:900; }
.lp-top .brand small { display:block; font-size:11px; color:#5b6778; }
.lp-top .top-cta { flex:none; padding:7px 14px; border-radius:999px; background:var(--accent); color:#fff; font-size:13px; font-weight:700; text-decoration:none; line-height:1.4; }

/* 最初の1画面（濃い紺の帯＝進研ゼミ・Z会・STRUX・トライ） */
.lp .hero { position:relative; overflow:hidden; background:linear-gradient(165deg,#1d3557 0%,#23466f 62%,#2d5a8a 100%); color:#fff; padding:16px 16px 22px; text-align:center; }
.lp .hero::before, .lp .hero::after { content:""; position:absolute; border-radius:50%; background:rgba(255,255,255,.06); pointer-events:none; }
.lp .hero::before { width:260px; height:260px; right:-100px; top:-80px; }
.lp .hero::after { width:190px; height:190px; left:-80px; top:300px; }
.lp .hero > * { position:relative; z-index:1; }
.hero-tag { display:inline-block; margin:0 0 6px; padding:2px 14px; border-radius:999px; background:#fff; color:var(--navy); font-size:13px; font-weight:700; }
.lp .hero-q { font-size:31px; font-weight:900; line-height:1.3; margin:0 0 6px; color:#fff; }
.lp .hero-q em { color:var(--yellow); font-weight:900; }
.lp .hero h1 { font-size:21px; font-weight:900; margin:0 0 4px; line-height:1.45; }
.lp .hero h1 small { display:block; font-size:13px; font-weight:700; opacity:.85; }
.lp .hero-lead { font-size:14px; line-height:1.7; margin:0 0 10px; opacity:.95; }
.lp .hero-lead b { color:var(--yellow); }
/* 本物の画面を2つ重ねる（写真の代わり＝保護者に届く報告＋子どもが毎晩入れる画面） */
.hero-dev { position:relative; height:236px; max-width:330px; margin:0 auto 12px; }
.hero-dev .phone { position:absolute; margin:0; border-width:6px; border-radius:20px; box-shadow:none; }
.hero-dev .dev-main { right:0; top:0; width:62%; }
.hero-dev .dev-sub { left:0; bottom:0; width:41%; height:176px; }
.hero-dev .dev-sub img { height:100%; object-fit:cover; object-position:top; }
.hero-dev .dl { position:absolute; z-index:2; background:var(--yellow); color:var(--navy); font-size:11px; font-weight:900; line-height:1.35; padding:4px 8px; border-radius:8px; text-align:left; }
.hero-dev .dl1 { right:6px; bottom:14px; }
.hero-dev .dl2 { left:4px; top:22px; }
/* 4つの約束（KATECO の4つのます目の形） */
.hero-tiles { list-style:none; margin:0 auto 12px; padding:0; max-width:420px; display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.hero-tiles li { display:flex; align-items:center; gap:7px; background:#fff; color:var(--navy); border-radius:10px; padding:6px 8px; text-align:left; font-size:11.5px; line-height:1.35; font-weight:700; }
.hero-tiles li b { display:block; font-size:14.5px; font-weight:900; }
.hero-tiles li svg { width:26px; height:26px; flex:none; color:var(--accent); }
.hero-tiles li.t-free { background:var(--accent); color:#fff; }
.hero-tiles li.t-free svg { color:#fff; }
/* 「＼…／」の一言（10個のうち6個） */
.lp .slash { font-size:14px; font-weight:900; margin:0 0 7px; text-align:center; }
.lp .slash::before { content:"＼ "; } .lp .slash::after { content:" ／"; }
/* ボタン＝丸い形・中に矢印・下に厚み（丸 6/10・矢印 9/10・厚み＝トライ・明光・すらら） */
.lp .hero-cta, .lp .go, .lp .sticky-cta a { position:relative; display:block; width:100%; max-width:440px; margin:0 auto; padding:16px 52px 16px 22px; border:0; border-radius:999px; background:var(--accent); color:#fff; font-family:inherit; font-size:19px; font-weight:900; line-height:1.4; text-align:center; text-decoration:none; cursor:pointer; }
.lp .hero-cta::after, .lp .go::after, .lp .sticky-cta a::after { content:"›"; position:absolute; right:13px; top:50%; transform:translateY(-50%); width:28px; height:28px; border-radius:50%; background:#fff; color:var(--accent); font-size:22px; font-weight:900; line-height:25px; text-align:center; }
.lp .hero-cta:active, .lp .go:active, .lp .sticky-cta a:active { background:var(--accent-d); }
.lp .go { margin:8px auto 6px; font-size:18px; }
.lp .go:disabled { opacity:.55; cursor:default; }
.lp .hero-note { font-size:12px; opacity:.88; margin:12px 0 0; line-height:1.7; } .lp .hero-note a { color:#fff; }

/* 帯（白・薄い水色・クリームを交互に＝10個とも・薄い水色 8/10） */
.band { padding:34px 0 36px; }
.band-sky { background:var(--sky); }
.band-cream { background:var(--cream); }
/* 見出し＝真ん中・太い・上に小さい札（英語・明朝・金＝HPと同じ）・下に短い線（ウィズスタディ） */
.lp .lab { text-align:center; font-family:"Shippori Mincho",serif; color:var(--navy); opacity:.6; font-size:13px; font-weight:700; letter-spacing:.3em; margin:0 0 2px; }
.lp h2 { text-align:center; font-size:24px; font-weight:900; color:var(--navy); line-height:1.45; margin:0 0 18px; }
.lp h2::after { content:""; display:block; width:40px; height:4px; border-radius:2px; background:var(--accent); margin:10px auto 0; }
.lp .cap { text-align:center; font-size:12.5px; color:#5b6778; margin:-6px 0 14px; }
/* お悩み（白い箱＋チェック＝KATECO・すらら） */
ul.worries { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
ul.worries li { position:relative; background:#fff; border:2px solid var(--sky2); border-radius:12px; padding:12px 14px 12px 48px; font-size:15px; font-weight:700; line-height:1.6; }
ul.worries li::before { content:"✓"; position:absolute; left:13px; top:50%; transform:translateY(-50%); width:24px; height:24px; border-radius:6px; background:var(--accent); color:#fff; font-size:15px; text-align:center; line-height:24px; }
/* 困りごと→解決 の矢印（KATECO・STRUX・スマイルゼミ・トライ） */
.arrow-down { width:0; height:0; margin:0 auto; border-left:40px solid transparent; border-right:40px solid transparent; border-top:26px solid var(--navy); }
.solve { padding:22px 0 34px; text-align:center; }
.solve .pre { font-size:18px; font-weight:900; color:var(--navy); margin:0; }
.solve h2 { margin-bottom:14px; }
.solve .t { font-size:15px; margin:0; }
/* できること＝POINT のカード（スマイルゼミ「POINT 01」・スタサプ「理由 その1」） */
.pt { background:#fff; border:1px solid #dfe7f1; border-radius:16px; padding:16px 16px 14px; margin:0 0 14px; }
.pt:last-child { margin-bottom:0; }
.pt-h { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.pt-n { display:inline-block; background:var(--navy); color:#fff; font-size:12px; font-weight:700; letter-spacing:.08em; padding:3px 12px; border-radius:999px; }
.pt-ic { width:46px; height:46px; flex:none; border-radius:50%; background:var(--sky); color:var(--navy); display:flex; align-items:center; justify-content:center; }
.pt-ic svg { width:26px; height:26px; }
.pt h3 { font-size:19px; font-weight:900; color:var(--navy); line-height:1.45; margin:2px 0 8px; }
.pt h3 .num { font-size:36px; color:var(--accent); line-height:1; margin:0 2px; }
.pt p { font-size:14.5px; margin:0; color:#374151; line-height:1.75; }
/* 使い方＝STEP のカード（KATECO・ウィズスタディ・トライ・STRUX） */
.lp ol.guide > li { background:#fff; border:1px solid #dfe7f1; border-radius:16px; padding:16px 14px 18px; margin:0 0 14px; }
.lp .phone { box-shadow:none; }
.lp ol.guide > li:first-child { padding-top:16px; border-top:1px solid #e3e8ef; }
.lp .guide .gh { flex-direction:column; gap:6px; text-align:center; font-size:17px; font-weight:900; color:var(--navy); margin:0 0 10px; }
.lp .guide .gn { width:auto; height:auto; padding:2px 14px; border-radius:999px; background:var(--navy); font-size:12px; font-weight:700; letter-spacing:.08em; line-height:1.7; }
.lp .guide p { font-size:14.5px; line-height:1.75; }
/* つくった人（顔＝KATECO・ウィズスタディ・STRUX・トライ／写真＝トウカの切り抜き・大きく／文＝HPの「教材を決めない理由」から） */
.maker { background:#fff; border:1px solid #efe3cf; border-radius:16px; overflow:hidden; text-align:left; }
.maker-top { position:relative; height:250px; background:var(--sky); overflow:hidden; }
.maker-ph { position:absolute; right:4px; bottom:0; height:250px; width:auto; }
.maker-nm { position:absolute; left:16px; top:50%; transform:translateY(-50%); margin:0; color:var(--navy); line-height:1.3; }
.maker-nm small { display:block; font-size:12px; font-weight:700; opacity:.8; }
.maker-nm b { display:block; font-size:27px; font-weight:900; margin:2px 0; }
.maker-nm span { display:block; font-size:14px; font-weight:700; }
.maker-body { padding:16px 16px 18px; }
.maker-area { font-size:13.5px; color:#5b6778; margin:0 0 12px; line-height:1.7; }
/* コースを選ぶ（2026-09-30） */
.cl { display:grid; gap:10px; }
.ci { display:flex; align-items:center; gap:12px; background:#fff; border:2px solid #dfe7f1; border-radius:14px; padding:12px 14px; cursor:pointer; }
.ci:has(input:checked) { border-color:var(--accent); background:#fff8f5; }
.ci input { width:22px; height:22px; flex:none; accent-color:var(--accent); }
.ci .ct { flex:1; min-width:0; line-height:1.4; word-break:keep-all; overflow-wrap:anywhere; } .ci .ct b { display:block; font-size:15.5px; } .ci .ct small { display:block; font-size:12.5px; color:var(--sub); margin-top:2px; }
.ci .cp { flex:none; font-weight:900; color:var(--navy); font-size:15px; white-space:nowrap; text-align:right; } .ci .cp small { display:block; font-size:11px; font-weight:700; color:var(--sub); }
.ctotal { text-align:center; font-size:16px; margin:14px 0 0; } .ctotal b { font-size:24px; color:var(--accent); font-weight:900; margin:0 4px; } .ctotal span { font-size:13px; color:var(--sub); }
.maker blockquote { margin:0 0 4px; padding:14px 14px 12px; background:var(--cream); border-radius:12px; font-size:14.5px; line-height:1.85; }
.maker blockquote b { display:block; font-family:"Shippori Mincho",serif; font-size:16px; color:var(--navy); line-height:1.6; margin:0 0 6px; }
.maker-src { font-size:11.5px; color:#8a94a3; margin:0 0 10px; text-align:right; }
.maker .more { font-size:14px; margin:0; }
/* 料金＝大きい数字（10個とも）・丸い札（KATECO・スマイルゼミ） */
.price { background:#fff; border:3px solid var(--accent); border-radius:18px; overflow:hidden; text-align:center; }
.pr-top { margin:0; background:var(--accent); color:#fff; font-weight:900; font-size:16px; padding:7px; }
.pr-free { font-size:60px; font-weight:900; color:var(--accent); line-height:1.1; margin:8px 0 0; }
.pr-then { font-size:14px; color:#5b6778; margin:10px 0 0; font-weight:700; }
.pr-row { display:flex; align-items:center; justify-content:center; gap:12px; margin:0 0 4px; }
.pr-main { display:flex; align-items:baseline; color:var(--navy); font-weight:900; margin:0; }
.pr-main .m { font-size:20px; } .pr-main b { font-size:56px; line-height:1.15; } .pr-main .y { font-size:22px; }
.pr-main small { font-size:12px; color:#5b6778; font-weight:700; margin-left:2px; }
.pr-day { flex:none; width:72px; height:72px; border-radius:50%; background:var(--yellow); color:var(--navy); font-size:12px; font-weight:900; line-height:1.15; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.pr-day b { font-size:24px; line-height:1; }
ul.okl { list-style:none; margin:8px 0 0; padding:14px 16px 16px; border-top:1px dashed #efcabd; text-align:left; display:grid; gap:8px; }
ul.okl li { position:relative; padding-left:30px; font-size:14.5px; line-height:1.65; }
ul.okl li::before { content:"✓"; position:absolute; left:0; top:1px; width:21px; height:21px; border-radius:50%; background:var(--navy); color:#fff; font-size:12px; font-weight:900; text-align:center; line-height:21px; }
/* 申し込み */
.lp .form { background:#fff; border:1px solid #dfe7f1; border-radius:16px; padding:18px 16px 16px; }
.lp .form label.f:first-child { margin-top:0; }
.lp .form .slash { color:var(--navy); margin:18px 0 6px; }
/* よくある質問（Q の札・開く＋＝KATECO・ウィズスタディ・トライ・明光） */
details.qa { background:#f6f9fc; border:1px solid #e3e8ef; border-radius:12px; margin:0 0 10px; }
details.qa summary { list-style:none; position:relative; padding:14px 44px 14px 48px; font-size:15px; font-weight:700; line-height:1.55; color:var(--navy); cursor:pointer; }
details.qa summary::-webkit-details-marker { display:none; }
details.qa summary::before { content:"Q"; position:absolute; left:12px; top:12px; width:26px; height:26px; border-radius:6px; background:var(--navy); color:#fff; font-size:14px; font-weight:900; text-align:center; line-height:26px; }
details.qa summary::after { content:"+"; position:absolute; right:12px; top:50%; transform:translateY(-50%); width:24px; height:24px; border-radius:50%; background:#fff; color:var(--navy); font-size:18px; font-weight:700; text-align:center; line-height:23px; }
details.qa[open] summary::after { content:"−"; }
details.qa p { position:relative; margin:0; padding:2px 16px 14px 48px; font-size:14.5px; line-height:1.75; }
details.qa p::before { content:"A"; position:absolute; left:12px; top:0; width:26px; height:26px; box-sizing:border-box; border:2px solid var(--accent); border-radius:6px; background:#fff; color:var(--accent); font-size:14px; font-weight:900; text-align:center; line-height:22px; }
/* 下に張りつく帯（10個のうち6個・紺の帯＝スタサプ・トライ） */
.lp .sticky-cta { position:fixed; left:0; right:0; bottom:0; z-index:50; padding:7px 12px calc(12px + env(safe-area-inset-bottom)); background:rgba(29,53,87,.96); transform:translateY(120%); transition:transform .25s; }
.lp .sticky-cta.on { transform:none; }
.lp .sticky-cta p { margin:0 0 6px; color:#fff; font-size:12px; font-weight:700; text-align:center; line-height:1.4; }
.lp .sticky-cta a { font-size:17px; padding:12px 50px 12px 20px; }
.lp footer { padding:22px 16px 30px; }
/* 日本語は言葉の切れ目（文節＝本文の <wbr>）でだけ折る（見出し・短い文）。長すぎる時だけ どこでも折る */
.lp .hero-q, .lp .hero-lead, .lp h2, .lp h3, ul.worries li, .solve .t, .hero-tiles li, .hero-dev .dl, .lp .guide .gh, details.qa summary, .lp .slash, .maker-area { word-break:keep-all; overflow-wrap:anywhere; }
.hero-tiles li b small { font-size:11px; font-weight:700; white-space:nowrap; }
/* 大きい見出しは かなを詰める（トウカの決まり 8） */
.lp .hero-q, .lp .hero h1, .lp h2, .lp h3, .pr-free, .pr-main, .maker-nm b, .lp .hero-cta, .lp .go, .lp .sticky-cta a { font-feature-settings:"palt"; }