/* LEARN v4: スマホを基本に、内容を増やさずPCで列だけ広げる。 */
.lp{--lp-acc:#C6F91F;font-size:15.5px;line-height:1.8;overflow-wrap:anywhere;color:var(--ink)}
.lp .lp-sec{padding-block:56px}
.lp-f,.lp-g,.lp-a,.lp-b,.lp-w,.lp-d{background:var(--white)}
.lp-q,.lp-e{background:var(--page)}
.lp .h2{margin:0 0 28px}
.lp .h2 .en{font-size:26px;line-height:1.2}
.lp .h2 .sub{color:var(--ink-soft);font-size:15.5px;line-height:1.8}
.lp [id]{scroll-margin-top:calc(var(--nav-h,72px) + 24px)}
.lp-lead{margin:0 0 28px;color:var(--ink-soft)}
.lp-k{display:block;font:800 12px/1.5 var(--en-nav);letter-spacing:.08em;color:var(--ink-soft)}
.lp :is(a,summary):focus-visible{outline:3px solid currentColor;outline-offset:5px}
.lp .pill{min-height:44px;max-width:100%;line-height:1.5;text-align:center}
.lp-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.lp-cta .pill{width:100%;justify-content:center}

/* 3つの事実だけは横並び。短い文で入口を見せる。 */
.lp-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;list-style:none;padding:0;margin:0}
.lp-facts li{min-width:0;padding:18px 8px;border:1px solid var(--line);border-radius:8px;text-align:center}
.lp-facts b{display:block;font-size:19px;line-height:1.5;font-weight:900}
.lp-facts span{display:block;margin-top:8px;font-size:13px;line-height:1.7;color:var(--ink-soft)}
.lp-check{list-style:none;padding:0;margin:0;display:grid;gap:20px}
.lp-check li{display:flex;align-items:flex-start;gap:12px;font-weight:700}
.lp-check svg{flex:0 0 24px;width:24px;height:24px;margin-top:2px}
.lp-check-end{margin:28px 0 0;font-weight:900}
.lp-get{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr;gap:16px}
.lp-get li{min-width:0}
.lp-get a{height:100%;display:grid;grid-template-columns:32px 32px minmax(0,1fr);gap:8px 12px;align-items:center;padding:24px 20px;border:1px solid var(--line);border-radius:8px;color:inherit;text-decoration:none;transition:background .25s,border-color .25s}
.lp-get a:hover,.lp-get a:active{background:var(--page);border-color:var(--ink)}
.lp-get-no{font:800 20px/1 var(--en-nav);color:var(--ink-soft)}
.lp-get svg{width:28px;height:28px}
.lp-get b{font-size:19px;line-height:1.5}
.lp-get-copy{grid-column:2/-1;color:var(--ink-soft)}

/* 既存カードの構造を保持。番号行の高さを固定し、札を表紙右上へ。 */
.lp-course-grid{display:grid;grid-template-columns:1fr;gap:40px 24px}
.lp-course{position:relative;display:flex;flex-direction:column;gap:10px;min-width:0}
.lp-course .lp-no{display:flex;align-items:center;gap:10px;height:24px;font:800 20px/24px var(--en-nav)}
.lp-course .lp-no em{font-size:12px;line-height:1;font-style:normal;letter-spacing:.08em;color:var(--ink-soft)}
.lp-cv{display:block;aspect-ratio:16/10;border-radius:8px;overflow:hidden;background:var(--page)}
.lp-cv img{display:block;width:100%;height:100%;object-fit:contain}
.lp-course>b{margin-top:6px;font-size:20px;line-height:1.5;font-weight:900}
.lp-benefit{display:block;font-size:15.5px;line-height:1.8;font-weight:800}
.lp-course p{margin:0;font-size:15.5px;line-height:1.8;color:var(--ink-soft)}
.lp-course .lp-st{position:absolute;top:44px;right:10px;padding:4px 8px;border-radius:4px;background:var(--white);color:var(--ink);font-size:11px;line-height:1.5;font-weight:800;box-shadow:0 1px 6px #0002}
.lp-cv-words{display:flex;flex-direction:column;justify-content:center;padding:24px}
.lp-cv-words .en{font:800 12px/1.5 var(--en-nav);margin-bottom:10px}
.lp-cv-words strong{font-size:24px;line-height:1.4}

/* 各ツールは見出し、説明、動画、できること、利用条件の順。 */
.lp-tool-grid{display:grid;grid-template-columns:1fr;gap:48px}
.lp-tool{min-width:0;display:flex;flex-direction:column;align-items:stretch;gap:20px}
.lp-tool-head h3{font-size:24px;font-weight:900;line-height:1.4;margin:8px 0 12px}
.lp-tool-head p{margin:0;color:var(--ink-soft)}
.lp-video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;border-radius:8px;background:var(--page)}
.lp-makes,.lp-tool-list{padding:0 0 0 1.4em;margin:0;display:grid;gap:8px}
.lp-makes-more{margin:0;color:var(--ink-soft)}
.lp-cond-badge{margin:0;padding:14px 16px;border-radius:8px;background:var(--page);font-weight:700}

/* 黒地はLiveのみ。過去の開催内容は開いた時だけ表示。 */
.lp-c{background:var(--black);color:var(--white)}
.lp-c .h2 .en{color:var(--lp-acc)}
.lp-c .h2 .sub,.lp-c .lp-lead{color:#c8c8c8}
.lp-timeline{counter-reset:lp-live;list-style:none;padding:0;margin:0 0 28px}
.lp-timeline li{position:relative;margin-left:18px;padding:0 0 28px 38px;border-left:1px solid #555;counter-increment:lp-live}
.lp-timeline li:last-child{padding-bottom:0;border-left-color:transparent}
.lp-timeline li::before{content:counter(lp-live,decimal-leading-zero);position:absolute;left:-18px;top:0;width:36px;height:36px;display:grid;place-items:center;border:1px solid #777;border-radius:50%;background:var(--black);color:var(--lp-acc);font:800 12px/1 var(--en-nav)}
.lp-timeline b{display:block;font-size:19px;line-height:1.8}
.lp-timeline span{display:block;margin-top:6px;color:#c8c8c8}
.lp-past{border-block:1px solid #555}
.lp-past summary,.lp-faq summary{cursor:pointer;padding:18px 0;min-height:44px;font-weight:800}
.lp-past ul{list-style:none;padding:0 0 20px;margin:0;display:grid;gap:20px}
.lp-past b,.lp-past span{display:block}
.lp-past span,.lp-live-note{color:#c8c8c8}
.lp-live-note{margin:18px 0 0}

/* 作品は切らず、高さだけを揃える。スクロールはこの帯の中だけ。 */
.lp-works{display:flex;gap:16px;max-width:100%;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:14px;margin-bottom:24px}
.lp-work{display:block;flex:none;height:180px;scroll-snap-align:start;border-radius:8px;overflow:hidden}
.lp-work img{display:block;height:100%;width:auto;max-width:none;object-fit:contain}
.lp-gift-grid{display:grid;grid-template-columns:1fr;gap:20px}
.lp-gift{position:relative;min-width:0;padding:24px;border:1px solid var(--line);border-radius:8px}
.lp-gift-no{font:800 20px/1 var(--en-nav)}
.lp-gift-status{float:right;font-size:13px;line-height:1.5;padding:4px 10px;background:var(--page);border-radius:4px}
.lp-gift-en{display:block;margin:24px 0 10px;font:800 26px/1.2 var(--en)}
.lp-gift b{display:block;font-size:19px;line-height:1.5}
.lp-gift p{margin:12px 0 0;color:var(--ink-soft)}
.lp-go-link{display:inline-flex;align-items:center;gap:8px;margin-top:24px;min-height:44px;color:inherit;font-weight:800;text-decoration:none}
.lp-go-link i{font-style:normal}
.lp-steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr;gap:28px}
.lp-steps li{min-width:0;border-top:1px solid var(--line);padding-top:20px}
.lp-steps .lp-no{font:800 30px/1 var(--en-nav)}
.lp-steps b{display:block;margin-top:12px;font-size:19px;line-height:1.5}
.lp-steps p{margin:8px 0 0;color:var(--ink-soft)}
.lp-faq{margin-top:40px;border-top:1px solid var(--line)}
.lp-faq details{border-bottom:1px solid var(--line)}
.lp-faq p{margin:0;padding:0 0 20px;color:var(--ink-soft)}
/* JOIN の帯は Learn でも出す（2026-09-24 STΛCK「JOIN セクション入れた方がいい」） */
@media (min-width:641px){
 .lp-course-grid,.lp-get,.lp-gift-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .lp-cta .pill{width:auto}
 .lp-facts{gap:20px}
 .lp-facts li{padding:24px}
 .lp-facts span{font-size:15.5px}
 .lp-steps{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:1024px){
 .lp .lp-sec{padding-block:80px}
 .lp-course-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
 .lp-tool-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px}
}

/* v4.3 落ち着いたリズム（2026-09-24 STΛCK「これはさすがに派手だし分かりづらすぎる」→ v4.1/v4.2 の色と太い枠を全部やめる）
   色は 白／薄灰／黒（ツールの帯 1 か所）だけ。単調さは「形」で切る: 大きな一言 → チェック → 横に流れる札 → 1 枚大きく＋3 行 → 黒の帯（動画）→ 時間軸 → 札 2 つ → 手順 → 質問 */
.lp .h2 .en{font-size:32px;line-height:1.05}
.lp .h2 .sub{font-weight:800;color:var(--ink)}
/* 入口: 白地に大きな一言。事実は細い線の丸札 */
.lp-f{background:var(--white);padding-block:40px 36px}
.lp-f .h2{display:none}
.lp-statement{margin:0 0 22px;font-size:clamp(28px,7.6vw,46px);line-height:1.25;font-weight:900;letter-spacing:-.01em;color:var(--ink)}
.lp-statement em{font-style:normal;color:var(--ink);border-bottom:4px solid var(--ink)}
.lp-f .lp-facts{display:flex;flex-wrap:wrap;gap:8px}
.lp-f .lp-facts li{border:1px solid #cfcfcf;border-radius:999px;padding:8px 14px;display:flex;align-items:baseline;gap:8px;text-align:left;background:var(--white)}
.lp-f .lp-facts b{font-size:14px}
.lp-f .lp-facts span{font-size:12px;color:var(--ink-soft);margin:0}
.lp-f .lp-cta{margin-top:20px}
/* こんな人へ: 薄灰の面。チェックは黒 */
.lp-q{background:var(--page)}
.lp-check{background:var(--white);padding:22px 20px;border-radius:14px;gap:16px;border:1px solid #e3e3e3}
.lp-check li{font-size:16px;line-height:1.7}
.lp-check svg{color:var(--ink)}
.lp-check-end{font-size:17px;line-height:1.7;margin-top:22px;font-weight:900}
/* メンバーになると: 白地。スマホは横に流れる札（細い線） */
.lp-g{background:var(--white)}
.lp-get a{border:1px solid #d6d6d6;border-radius:14px;background:var(--white)}
.lp-get-no{font:800 18px/1 var(--en);color:var(--ink-soft)}
.lp-get svg{color:var(--ink)}
.lp-get b{font-size:19px;font-weight:900}
.lp-get a:hover,.lp-get a:active{background:var(--page);border-color:var(--ink)}
@media (max-width:640px){
 .lp-get{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 0 14px;margin-inline:calc(-1 * var(--gutter,16px));padding-inline:var(--gutter,16px)}  /* 端まで広げる幅は左右の余白（--gutter）と同じにする。-20px 固定だと余白 16〜17px の画面で 3〜4px はみ出す（2026-09-25 幅検査） */
 .lp-get li{flex:0 0 76%;scroll-snap-align:start}
 .lp-get a{grid-template-columns:auto auto;grid-template-rows:auto auto auto;align-content:start;gap:12px;padding:20px 18px 22px;min-height:170px}
 .lp-get b{grid-column:1/-1}
 .lp-get-copy{grid-column:1/-1}
}
/* 教材: 薄灰の面。1 枚目を大きく、残り 3 つは表紙を左に置く行 */
.lp-a{background:var(--page)}
.lp-course .lp-no{font:800 22px/24px var(--en);height:auto;align-items:baseline}
.lp-course .lp-no em{font:800 11px/1 var(--en-nav);letter-spacing:.08em;color:var(--ink-soft);background:none;padding:0}
.lp-cv{border-radius:12px;box-shadow:none;background:#e6e6e6}
.lp-cv img{object-fit:cover}
.lp-course>b{font-size:21px}
.lp-course .lp-st{top:auto;right:auto;position:static;justify-self:start;margin-top:4px;background:var(--white);border:1px solid #cfcfcf;color:var(--ink-soft);box-shadow:none}
@media (max-width:1023px){
 .lp-course-grid{grid-template-columns:1fr;gap:22px}
 .lp-course:not(:first-child){display:grid;grid-template-columns:112px minmax(0,1fr);gap:4px 16px;align-items:start;padding-top:22px;border-top:1px solid #dcdcdc}
 .lp-course:not(:first-child) .lp-no{grid-column:2;font-size:18px}
 .lp-course:not(:first-child) .lp-cv{grid-column:1;grid-row:1/6}
 .lp-course:not(:first-child)>b{grid-column:2;font-size:18px;margin-top:0}
 .lp-course:not(:first-child) .lp-benefit{grid-column:2;font-size:14.5px}
 .lp-course:not(:first-child) p{grid-column:2;font-size:14px}
 .lp-course:not(:first-child) .lp-st{grid-column:2}
 .lp-course:first-child>b{font-size:24px}
}
/* ツール: ここだけ黒の帯（斜めの切れ目は無し）。動画はスマホで端まで */
.lp-b{background:var(--black);color:#fff}
.lp-b .h2 .sub{color:#fff}
.lp-b .lp-k{color:#bdbdbd}
.lp-tool-head h3{font-size:26px;color:#fff}
.lp-tool-head p,.lp-makes-more{color:#cfcfcf}
.lp-video{border-radius:12px;background:#111}
@media (max-width:640px){.lp-b .lp-video{border-radius:0;margin-inline:-20px;width:calc(100% + 40px)}}
.lp-cond-badge{background:transparent;border:1px solid #666;color:#fff;border-radius:10px;font-weight:700}
/* ライブ: 白地。番号は黒丸に白 */
.lp-c{background:var(--white);color:var(--ink)}
.lp-c .h2 .en{color:var(--ink)}
.lp-c .h2 .sub{color:var(--ink)}
.lp-c .lp-lead{color:var(--ink-soft)}
.lp-timeline li{border-left:1px solid #cfcfcf}
.lp-timeline li:last-child{border-left-color:transparent}
.lp-timeline li::before{background:var(--black);color:#fff;border:0;font:800 13px/1 var(--en)}
.lp-timeline b{font-size:19px;font-weight:900}
.lp-timeline span,.lp-past span,.lp-live-note{color:var(--ink-soft)}
.lp-past{border-block:1px solid #e3e3e3}
/* プレゼント: 薄灰。札は細い線 */
.lp-d{background:var(--page);color:var(--ink)}
.lp-gift{border:1px solid #d6d6d6;border-radius:14px;background:var(--white)}
.lp-gift-no{font:800 18px/1 var(--en);color:var(--ink-soft)}
.lp-gift-status{background:var(--page);color:var(--ink);font-weight:700;border-radius:6px}
.lp-gift-en{font-size:28px}
/* はじめ方: 白。大きな番号と細い線 */
.lp-e{background:var(--white)}
.lp-steps li{border-top:1px solid #dcdcdc}
.lp-steps .lp-no{font:800 38px/1 var(--en);color:var(--ink)}
.lp-steps b{font-size:19px;font-weight:900}
.lp-faq{border-top:1px solid #dcdcdc}
.lp-faq summary{font-size:16px;display:flex;align-items:center;gap:12px;list-style:none}
.lp-faq summary::-webkit-details-marker{display:none}
.lp-faq summary::before{content:"Q";flex:none;width:28px;height:28px;display:grid;place-items:center;background:var(--black);color:#fff;border-radius:6px;font:800 13px/1 var(--en)}
.lp-faq p{padding-left:40px}
@media (min-width:641px){
 .lp .h2 .en{font-size:44px}
 .lp-check{padding:30px 34px}
 .lp-check li{font-size:17px}
}
/* v4.3 補足（STΛCK「これくらいで使うならいいよ」= はじめ方の節の見せ方）: 見出し下の短いライムの線・太い黒線と大きな番号・黒地にライムの Q だけ残す */
.lp{--lp-acc:#C6F91F}
.lp .h2::after{content:"";display:block;width:48px;height:5px;background:var(--lp-acc);margin-top:14px}
.lp-b .h2::after{background:var(--lp-acc)}
.lp-steps li{border-top:3px solid var(--black)}
.lp-steps .lp-no{font:800 44px/1 var(--en);color:var(--black)}
.lp-faq{border-top:2px solid var(--black)}
.lp-faq summary::before{color:var(--lp-acc)}
/* v4.4 色で節を切り替える（STΛCK「さっきのが、セクションの移り変わりで色で分かりやすかった」）: 入口は黒の帯、以降 白→薄灰→白→黒→白→薄灰→白。太い枠とライムの帯は戻さない */
.lp-f{background:var(--black);color:#fff;padding-block:48px 40px}
.lp-statement{color:#fff}
.lp-statement em{color:var(--lp-acc);border-bottom:0}
.lp-f .lp-facts li{background:transparent;border-color:#3a3a3a}
.lp-f .lp-facts b{color:#fff}
.lp-f .lp-facts span{color:#9a9a9a}
.lp-q{background:var(--white)}
.lp-check{background:var(--page);border-color:transparent}
.lp-g{background:var(--page)}
.lp-get a{background:var(--white)}
.lp-a{background:var(--white)}
.lp-course:not(:first-child){border-top-color:#e3e3e3}
.lp-c{background:var(--white)}
.lp-d{background:var(--page)}
.lp-e{background:var(--white)}
/* ツール: 2 軸（クリエイティブ／業務効率化）と悩み 1 行（2026-09-24 STΛCK） */
.lp-tool-pain{margin:0 0 8px;font-weight:800;color:#fff;font-size:15.5px;line-height:1.7}
.lp-b .lp-k{color:var(--lp-acc)}
/* FAQ: 右端に「＋」。開くと「－」（STΛCK「ここはプラスボタン必要」） */
.lp-faq summary{position:relative;padding-right:44px}
.lp-faq summary::after{content:"";position:absolute;right:4px;top:50%;width:26px;height:26px;margin-top:-13px;border:1.5px solid var(--black);border-radius:50%;background:
 linear-gradient(var(--black),var(--black)) center/12px 2px no-repeat,
 linear-gradient(var(--black),var(--black)) center/2px 12px no-repeat}
.lp-faq details[open] summary::after{background:linear-gradient(var(--black),var(--black)) center/12px 2px no-repeat}
/* 入口: About と同じ中央揃え（2026-09-24 STΛCK「中央揃えで、学ぶ機会を平等に、のようなコピー」） */
.lp-f{text-align:center;padding-block:56px 48px}
.lp-f .wrap{display:flex;flex-direction:column;align-items:center}
.lp-statement{margin:0 0 18px;font-size:clamp(28px,7.4vw,46px)}
.lp-f-copy{margin:0 0 26px;max-width:560px;font-size:15px;line-height:2;color:#d6d6d6}
.lp-f .lp-cta{margin-top:0;justify-content:center}
@media (max-width:640px){.lp-f-copy br{display:none}.lp-f-copy{font-size:14.5px}}
@media (min-width:641px){.lp-f-copy{font-size:16.5px}}