/* ============================================================================= * Sound Collective — LP(ランディングページ)量産 CSS(GitHub #94) * * スコープは sc-lp-*。デザイントークン(assets/css/sc-design-tokens.css の :root --sc-*) * を使用。SP ブレークは 1024px(方式B定石)。 * * 対象: * - LP マスターページのネイティブ Elementor セクション(css_classes: sc-lp / sc-lp-hero / * sc-lp-pitch / sc-lp-wizard) * - 結果セクション3型ショートコード(sc-lp-result--carousel / --accordion / --pricing) * - Speak to our Team フォーム(sc-lp-contact / sc-lp-form) * ========================================================================== */ /* ---- レイアウト共通 ------------------------------------------------------ */ .sc-lp { --sc-lp-max: 1200px; } .sc-lp-section { width: 100%; } .sc-lp-wrap { max-width: var(--sc-lp-max); margin-inline: auto; padding-inline: 24px; } /* ---- ボタン: 本体 .sc-btn トークンに揃える(#168 1-4) --------------------- * LP 専用だった sc-lp-btn 系を、本体 sc-design-tokens.css の .sc-btn / .sc-btn--outline * と同一の見た目(Figma 547-5694 / #98: padding 7px 20px・L=44px/18px・pill・primary/outline * 配色)へ揃える。生 (結果/料金/カリキュラム/relock CTA)と Elementor 内側 * (hero/final CTA)の両方に効かせ、全 LP テンプレへ CSS で一括反映 * (_elementor_data の再生成=migration 不要)。回答ボタン(.sc-lp-answerbtn)は選択カード * 表示のため対象外にする(下の 3. 診断ウィザードでニュートラライズ済み)。 */ .elementor-widget.sc-lp-btn { background: transparent; box-shadow: none; } .sc-lp-btn:not(.elementor-widget), .elementor-widget.sc-lp-btn:not(.sc-lp-answerbtn) .elementor-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--sc-font); font-weight: var(--sc-fw-bold, 700); font-size: 18px; line-height: var(--sc-lh, 1.4); min-height: 44px; padding: 7px 20px; border: 1px solid transparent; border-radius: var(--sc-radius-pill, 32px); text-decoration: none; cursor: pointer; box-shadow: none; transition: background-color .15s ease, color .15s ease, box-shadow .15s ease; } /* Primary (= .sc-btn--primary) */ .sc-lp-btn--primary:not(.elementor-widget), .elementor-widget.sc-lp-btn--primary:not(.sc-lp-answerbtn) .elementor-button { background: var(--sc-primary, #f04b50); color: #f7f7f7; border-color: transparent; } .sc-lp-btn--primary:not(.elementor-widget):hover, .elementor-widget.sc-lp-btn--primary:not(.sc-lp-answerbtn) .elementor-button:hover { background-image: linear-gradient(rgba(255,255,255,.10), rgba(255,255,255,.10)); color: #f7f7f7; } /* Ghost (= .sc-btn--outline: 白6%塗り + 白枠) */ .sc-lp-btn--ghost:not(.elementor-widget):not(.sc-lp-answerbtn), .elementor-widget.sc-lp-btn--ghost:not(.sc-lp-answerbtn) .elementor-button { background: rgba(255,255,255,.06); color: #eff2f5; border-color: var(--sc-btn-outline, #ffffff); } .sc-lp-btn--ghost:not(.elementor-widget):not(.sc-lp-answerbtn):hover, .elementor-widget.sc-lp-btn--ghost:not(.sc-lp-answerbtn) .elementor-button:hover { background: rgba(255,255,255,.10); color: var(--sc-primary, #f04b50); } /* ---- 赤アンダーライン付き見出し(セクション共通) ------------------------ */ .sc-lp-underline { position: relative; display: inline-block; padding-bottom: 12px; } /* #168(2026-07-22 追いFB): 赤アンダーラインバーは Figma 全所で 76x5・全丸(radius 66px)。 * (Learn In NYC 3603-31748 / Starting Point 3866-96336 / Pricing 3866-97016 いずれも 76x5) */ .sc-lp-underline::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; width: 76px; height: 5px; background: var(--sc-primary, #f04b50); border-radius: 999px; } /* ============================================================================= * 1. Hero(ポスター画像を全部見せる + その下に eyebrow/H1/補足/アイコン行/CTA) * #168(2026-07-23): 旧「全幅画像を背景に敷きテキストを重ねる」方式は縦ポスターだと * 情報が画像に被った。新方式=画像は要素の上に何も重ねずフルで見せ(縦画像は * max-height:80vh・背景は sc-space-single__hero と同じ blur letterbox)、テキストは * 画像の下(sc-lp-hero__body)に置く。マークアップは bin/migrate-lp-168-hero.php が * 全 LP ページの sc-lp-hero コンテナを [media + body] 構造へ再構成する(実描画元=DB)。 * ========================================================================== */ .sc-lp-hero { position: relative; display: flex; flex-direction: column; align-items: center; background-color: #121212; color: var(--sc-fg, #f0f2f4); text-align: center; overflow: hidden; } /* 画像の上に要素を置かない(#168): media(html ウィジェット .sc-lp-hero__mediawrap)を先頭・全幅、 * テキストは body(コンテナ .sc-lp-hero__body)で下に流す。両者を align-self:stretch で全幅化 * (親 hero は align-items:center の縦 flex)。widget-container 層(env パリティ)も全幅パススルー。 */ .sc-lp-hero__mediawrap, .sc-lp-hero__body { align-self: stretch; width: 100%; } .sc-lp-hero__mediawrap .elementor-widget-container { width: 100%; } .sc-lp-hero__media { position: relative; width: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #000; } /* 縦画像の余白は sc-space-single__hero と同方式で blur した拡大コピーで埋める。 */ .sc-lp-hero__media-bg { position: absolute; inset: -40px 0; z-index: 0; background: center / cover no-repeat; filter: blur(24px); opacity: .5; pointer-events: none; } .sc-lp-hero__media-img { position: relative; z-index: 1; display: block; max-width: 100%; max-height: 80vh; width: auto; height: auto; object-fit: contain; } .sc-lp-hero__body { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 40px 24px; } /* 旧 fallback(migration 未適用ページ): 背景が残っている場合はグラデ帯を敷いて可読性維持。 */ .sc-lp-hero:not(:has(.sc-lp-hero__media)) { min-height: 320px; background-size: cover; background-position: center; } .sc-lp-hero:not(:has(.sc-lp-hero__media))::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18,18,18,.35) 0%, rgba(18,18,18,.85) 100%); pointer-events: none; } .sc-lp-hero > .e-con-inner, .sc-lp-hero > * { position: relative; z-index: 1; } .sc-lp-hero__eyebrow { display: inline-block; color: var(--sc-primary, #f04b50); font-weight: 700; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; } .sc-lp-hero__title { font-size: 40px; font-weight: 700; line-height: 1.2; margin: 8px 0; color: var(--sc-fg, #f0f2f4); } .sc-lp-hero__sub { color: var(--sc-fg-secondary, #adb3bb); font-size: 16px; line-height: 1.5; max-width: 720px; margin: 0 auto; } /* Icon row = 本体 disciplines の CardProductType(.sc-disc-ptype)デザインに揃える(#168 2026-07-23)。 * 旧: gray pill 横並び(#168 1-3)。新: 1 枚のグレー枠(rgba(39,39,39,.2)・radius 8)に、各項目を * アイコン(24px)を上・ラベル(Bold 14px)を下の縦積みで並べ、項目間を縦線(border-dim)で区切る * = sc-disciplines.css の .sc-disc-ptype / __item / __sep と同じ見た目。マークアップ * (.sc-lp-hero__icons > span.sc-lp-hero__icon>i+text)は不変なので全 LP テンプレへ CSS で一括反映。 */ .sc-lp-hero__icons { display: inline-flex; align-items: stretch; justify-content: center; margin: 8px auto 0; padding: 16px 0; gap: 0; background: rgba(39,39,39,.2); border: 0; border-radius: 8px; overflow: hidden; } .sc-lp-hero__icon { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-width: 117px; padding: 0 16px; text-align: center; background: none; color: var(--sc-fg, #f0f2f4); font-size: 14px; font-weight: var(--sc-fw-bold, 700); line-height: 1.1; } .sc-lp-hero__icon + .sc-lp-hero__icon { border-left: 1px solid var(--sc-border-dim, #353c45); } .sc-lp-hero__icon i { font-size: 24px; color: var(--sc-fg, #f0f2f4); } /* ---- #209 native 化 bridge: アイコン行を Elementor Icon List ウィジェットで出す ---- * 旧: HTML ウィジェット > div.sc-lp-hero__icons > span.sc-lp-hero__icon > i + text * 新: div.sc-lp-hero__icons(= ウィジェットラッパー) > .elementor-widget-container * > ul.elementor-icon-list-items.elementor-inline-items * > li.elementor-icon-list-item > span.elementor-icon-list-icon>i + span.elementor-icon-list-text * つまり **カード(グレー枠)は従来どおり .sc-lp-hero__icons に当たる**が、その内側に * container と ul の 2 層が挟まる。そこを flex パススルーにし、li を旧 .sc-lp-hero__icon と * 同じ見た目にする(#184/#186 の bridge と同じ考え方)。 * 旧マークアップの規則(:120-132)は STG が旧構造のままでも壊れないよう残置している。 */ .sc-lp-hero__icons.elementor-widget-icon-list > .elementor-widget-container, .sc-lp-hero__icons .elementor-icon-list-items { display: flex; align-items: stretch; justify-content: center; margin: 0; padding: 0; gap: 0; list-style: none; } .sc-lp-hero__icons .elementor-icon-list-item { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-width: 117px; padding: 0 16px; margin: 0; text-align: center; background: none; color: var(--sc-fg, #f0f2f4); font-size: 14px; font-weight: var(--sc-fw-bold, 700); line-height: 1.1; } .sc-lp-hero__icons .elementor-icon-list-item + .elementor-icon-list-item { border-left: 1px solid var(--sc-border-dim, #353c45); } .sc-lp-hero__icons .elementor-icon-list-icon { display: block; } .sc-lp-hero__icons .elementor-icon-list-icon i { font-size: 24px; color: var(--sc-fg, #f0f2f4); } .sc-lp-hero__icons .elementor-icon-list-text { padding: 0; color: inherit; } /* Elementor は inline レイアウトで項目間に区切り疑似要素と margin を入れる。縦線は上の * border-left で出しているので両方消す(二重線・余分な隙間の防止)。 */ .sc-lp-hero__icons .elementor-inline-items .elementor-icon-list-item:not(:last-child):after { content: none; border: 0; margin: 0; } /* ============================================================================= * 2. SoundCollective 訴求ブロック(ダークカード + ロゴロックアップ + 交互行) * ========================================================================== */ .sc-lp-pitch { background: var(--sc-bg-bright, #272727); border: 1px solid var(--sc-border-dim, #353c45); border-radius: var(--sc-radius-card, 12px); } .sc-lp-pitch__brand { text-align: center; color: var(--sc-fg, #f0f2f4); } /* #168(2026-07-22 追いFB): ブランド行の "Sound Collective" テキストを白ロゴ画像へ置換 * (Figma 3603-31739 / 3866-96293)。実描画元は build-lp-master.php の sc_lpm_pitch が出力する * Elementor Heading ウィジェット(テキスト "Sound Collective")。テキストのままだとダミー体に * 見えるため、_elementor_data 再生成(migration)を避けつつ CSS の画像置換で対応する: * 見出し文字を font-size:0 で潰し、テーマ同梱の白ワードマーク(sc-footer-wordmark.png= * sc_asset_map 629546)を background で表示。URL はテーマ相対(../images/…)で env 非依存。 * 全6マスターへ CSS 一括反映(build/migration 不要)。inline の title_color は size に影響しない。 */ .sc-lp-pitch__brand .elementor-widget-heading .elementor-heading-title { display: block; margin: 0 auto; width: 240px; max-width: 72vw; aspect-ratio: 300 / 90; font-size: 0; line-height: 0; background: url("../images/sc-footer-wordmark.png") center / contain no-repeat; } /* #168: "Learn In NYC" 見出しを Figma(Montserrat Bold 20px / #f0f2f4 / lh1.4)に合わせる。 * 旧: 14px・secondary 色(ダミー体に見えていた)。フォントは既定 var(--sc-font)=Montserrat。 */ .sc-lp-pitch__brand .sc-lp-underline { font-size: 20px; font-weight: var(--sc-fw-bold, 700); line-height: 1.4; color: var(--sc-fg, #f0f2f4); padding-bottom: 16px; } .sc-lp-pitch__row-title { color: var(--sc-primary, #f04b50); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; } .sc-lp-pitch__row-body { color: var(--sc-fg, #f0f2f4); font-size: 15px; line-height: 1.65; } /* Alternating image/text rows (Figma "SoundCollective" block). Media is a styled * placeholder the client replaces with a real photo (matches the Figma mock). * Elementor default-sizes flex children, so the 50/50 split needs high specificity. */ .sc-lp-pitch.sc-lp-section { max-width: 1040px; margin-inline: auto; } .sc-lp-pitch .sc-lp-pitch__row { display: flex; flex-direction: row; align-items: stretch; gap: 40px; } .sc-lp-pitch .sc-lp-pitch__row--reverse { flex-direction: row-reverse; } .sc-lp-pitch .sc-lp-pitch__row > .sc-lp-pitch__text, .sc-lp-pitch .sc-lp-pitch__row > .sc-lp-pitch__mediawrap { flex: 1 1 50%; width: 50%; min-width: 0; align-self: stretch; } .sc-lp-pitch .sc-lp-pitch__text { display: flex; flex-direction: column; justify-content: center; gap: 8px; } .sc-lp-pitch__mediawrap { display: flex; } /* #168 1-1: media は Elementor HTML ウィジェット。e_optimized_markup OFF(dev/local パリティ) * では .elementor-widget-container が mediawrap(flex)と .sc-lp-pitch__media の間に挟まり、 * 幅が 0(実測 2px)に潰れてプレースホルダが見えず右側が空白になっていた。中間ラッパを * flex パススルーにして placeholder が 50% カラムを満たすようにする(guardrails §1 参照)。 */ .sc-lp-pitch__mediawrap > .elementor-widget-container { display: flex; flex: 1 1 auto; width: 100%; min-width: 0; } .sc-lp-pitch__media { flex: 1 1 auto; width: 100%; min-height: 260px; border-radius: var(--sc-radius-card, 12px); background: linear-gradient(135deg, #3a3a3a 0%, #242424 100%); border: 1px solid var(--sc-border, #5d6164); box-shadow: inset 0 0 0 1px rgba(255,255,255,.02); /* ダミー画像プレースホルダと分かるよう中央に画像グリフを表示(配置確認用) */ position: relative; display: flex; align-items: center; justify-content: center; } .sc-lp-pitch__media::after { content: "\f03e"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 34px; color: rgba(255,255,255,.16); } /* ---- #207-1 native 化 bridge: pitch 画像を Elementor Image ウィジェットで出す ---- * 旧: HTML ウィジェット(.sc-lp-pitch__mediawrap) > div.sc-lp-pitch__media(空 = 差し替え不可) * 新: コンテナ(.sc-lp-pitch__mediawrap) > Image ウィジェット(.sc-lp-pitch__media) > img * 階層は旧構造と同じ 2 段に保っているので `.sc-lp-pitch__row > .sc-lp-pitch__mediawrap` の * 50/50 ルールはそのまま効く。ここでは内側のウィジェットラッパーを通して img を * カラム全面に敷く。 */ .sc-lp-pitch__media.elementor-widget-image > .elementor-widget-container, .sc-lp-pitch__media.elementor-widget-image .elementor-image, .sc-lp-pitch__media.elementor-widget-image figure { display: flex; flex: 1 1 auto; width: 100%; min-width: 0; height: 100%; margin: 0; } .sc-lp-pitch__media.elementor-widget-image img { width: 100%; height: 100%; min-height: 260px; object-fit: cover; border-radius: var(--sc-radius-card, 12px); display: block; } /* 画像が入るのでダミー用の中央グリフは出さない(画像に重なる)。 */ .sc-lp-pitch__media.elementor-widget-image::after { content: none; } /* ============================================================================= * 3. 診断ウィザード(静的プレースホルダ — 見た目のみ。ロジックは #94 後続) * ========================================================================== */ .sc-lp-wizard { text-align: center; color: var(--sc-fg, #f0f2f4); } .sc-lp-wizard__title { font-size: 32px; line-height: 1.2; font-weight: 700; color: var(--sc-fg, #f0f2f4); } /* 進捗バー(2分割) */ .sc-lp-wizard__progress { display: flex; gap: 8px; max-width: 420px; margin: 0 auto; } .sc-lp-wizard__progress span { flex: 1; height: 4px; border-radius: 2px; background: var(--sc-bg-hover-strong, rgba(255,255,255,.10)); } .sc-lp-wizard__progress span.is-active { background: var(--sc-primary, #f04b50); } /* 質問カード */ .sc-lp-wizard__card { max-width: 620px; margin: 0 auto; text-align: left; background: var(--sc-bg-bright, #272727); border: 1px solid var(--sc-border-dim, #353c45); border-radius: var(--sc-radius-card, 12px); padding: 28px; } .sc-lp-wizard__q { font-size: 26px; line-height: 1.2; font-weight: 700; color: var(--sc-fg, #f0f2f4); } /* #168 1-2: 質問見出しは Elementor Heading。Elementor の inline global * `.elementor-widget-heading .elementor-heading-title { color: var(--e-global-color-primary) }` * (=赤・詳細度 0,2,0)に負けて黒/赤で読めなかった。0,3,0 の指定で白に上書き(!important 不要)。 */ .sc-lp-wizard__q.elementor-widget-heading .elementor-heading-title { color: var(--sc-fg, #f0f2f4); } .sc-lp-wizard__hint { color: var(--sc-fg-secondary, #adb3bb); font-size: 14px; line-height: 1.5; margin-top: 6px; } /* #183 course-a Q3 gut-check の「Still torn? Talk to our team」導線(質問カード内・回答ボタン下)。 */ .sc-lp-wizard__still { margin-top: 12px; color: var(--sc-fg-secondary, #adb3bb); font-size: 14px; line-height: 1.5; } .sc-lp-wizard__still a { color: var(--sc-primary, #f04b50); text-decoration: underline; } .sc-lp-wizard__answers { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; } .sc-lp-wizard__answer { display: flex; flex-direction: column; gap: 2px; text-align: left; width: 100%; background: transparent; color: var(--sc-fg, #f0f2f4); border: 1px solid var(--sc-border, #7d7e80); border-radius: 10px; padding: 14px 18px; cursor: default; } .sc-lp-wizard__answer:hover { border-color: var(--sc-primary, #f04b50); } .sc-lp-wizard__answer .lbl { font-weight: 600; font-size: 15px; } .sc-lp-wizard__answer .sub { color: var(--sc-fg-secondary, #adb3bb); font-size: 12px; } /* ---- Wizard routing (convention-driven; see assets/js/sc-lp-wizard.js) ---- * Panels are hidden ONLY when sc-lp-wizard.js has marked the root with * `sc-lp-has-js`. Without JS every `.sc-lp-panel` stays visible (graceful * fallback) and the `#answer-*` links behave as plain in-page anchors. */ .sc-lp-panel { scroll-margin-top: 90px; } .sc-lp-has-js .sc-lp-panel.sc-lp-hidden { display: none; } /* Picked answer feedback (works on native Elementor buttons and .sc-lp-wizard__answer) */ .sc-lp-picked, .sc-lp-wizard__answer.sc-lp-picked { border-color: var(--sc-primary, #f04b50) !important; } .sc-lp-wizard__answer.sc-lp-picked { background: var(--sc-bg-hover-strong, rgba(240,75,80,.10)); } /* Back / Reset controls */ .sc-lp-wizard__nav { display: flex; gap: 16px; justify-content: center; margin-top: 20px; } .sc-lp-back, .sc-lp-reset { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; background: transparent; border: 0; color: var(--sc-fg-secondary, #adb3bb); font-family: var(--sc-font); font-size: 13px; text-decoration: none; } .sc-lp-back:hover, .sc-lp-reset:hover { color: var(--sc-fg, #f0f2f4); } /* Answer buttons: full-width rounded-rect choice cards (native Elementor Button). * Figma Button_rounded: dark surface, left label, chevron on the right, and a * filled-red state on hover / when picked. The `sc-lp-btn(--ghost)` pill classes * sit on the widget wrapper, so neutralise them and style the inner anchor. */ .sc-lp-wizard__answers .elementor-widget-button, .sc-lp-answerbtn { width: 100%; } .sc-lp-answerbtn.sc-lp-btn { padding: 0; border: 0; border-radius: 0; background: transparent; } .sc-lp-answerbtn .elementor-button { position: relative; display: flex; width: 100%; justify-content: flex-start; text-align: left; align-items: center; padding: 20px 54px 20px 22px; border-radius: var(--sc-radius-card, 12px); background: var(--sc-bg-bright, #272727); border: 1px solid var(--sc-border, #5d6164); color: var(--sc-fg, #f0f2f4); font-family: var(--sc-font); font-weight: 700; font-size: 16px; line-height: 1.35; transition: background .15s ease, border-color .15s ease, color .15s ease; } .sc-lp-answerbtn .elementor-button::after { content: ""; position: absolute; right: 24px; top: 50%; margin-top: -6px; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); opacity: .55; } .sc-lp-answerbtn .elementor-button:hover, .sc-lp-answerbtn .elementor-button.sc-lp-picked, .sc-lp-answerbtn.sc-lp-picked .elementor-button { background: var(--sc-primary, #f04b50); border-color: var(--sc-primary, #f04b50); color: #fff; } .sc-lp-answerbtn .elementor-button:hover::after, .sc-lp-answerbtn .elementor-button.sc-lp-picked::after { opacity: .9; } /* Who it's for — For You / Not For You columns (OneVideo lander) */ /* #215 追いFB(2026-07-27): 添付デザイン(SP/PC)に合わせて刷新。 * 旧: 列ごとに独立カード + 見出し1行(緑チェック/グレーマイナス) * 新: **1 枚のカードに 2 カラム**。列は「小さい色付きラベル + 大きいタイトル」の 2 段見出しで、 * 項目は丸アイコン(For=プラス赤 / NOT=マイナス紫)+ タイトル(+ 説明)。 * PC = 横並び(列間に縦の区切り線)/ SP = 縦積み(間に横の区切り線)。 * ⚠️ issue 本文は「PC は区切り線なし」だが**添付画像には縦線がある**ため画像に合わせた * (Your Path の列と同じ流儀)。線を外す場合は下の border 指定を消すだけ。 */ .sc-lp-fit { display: grid; grid-template-columns: 1fr 1fr; max-width: 900px; margin: 0 auto; background: var(--sc-bg-bright, #272727); border: 1px solid var(--sc-border-dim, #353c45); border-radius: var(--sc-radius-card, 12px); overflow: hidden; } .sc-lp-fit__col { padding: 24px; display: flex; flex-direction: column; } .sc-lp-fit__col + .sc-lp-fit__col { border-left: 1px solid var(--sc-border-dim, #353c45); } .sc-lp-fit__col--yes { --fit-accent: var(--sc-primary, #f04b50); } .sc-lp-fit__col--no { --fit-accent: #8b7cff; } /* 2 段見出し: 小ラベル(色付き)+ 大タイトル */ .sc-lp-fit__label { color: var(--fit-accent); font-size: 14px; font-weight: 700; line-height: 1.4; margin-bottom: 4px; } .sc-lp-fit__title { font-size: 24px; font-weight: 700; line-height: 1.2; color: var(--sc-fg, #f0f2f4); margin: 0 0 16px; } /* タイトルが空のときはラベル下の余白を項目リストで持つ */ .sc-lp-fit__label:last-of-type { margin-bottom: 16px; } .sc-lp-fit__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; } .sc-lp-fit__item { display: flex; flex-direction: row; align-items: flex-start; gap: 8px; } /* 丸アイコン(プラス / マイナス) */ .sc-lp-fit__badge { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%; background: var(--fit-accent); color: #fff; } .sc-lp-fit__badge i { font-size: 11px; color: #fff; } .sc-lp-fit__itembody { display: flex; flex-direction: column; gap: 4px; } .sc-lp-fit__itemtitle { font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--sc-fg, #f0f2f4); } .sc-lp-fit__itemdesc { font-size: 14px; line-height: 1.5; color: var(--sc-fg-secondary, #adb3bb); } @media (max-width: 1024px) { .sc-lp-fit { grid-template-columns: 1fr; } .sc-lp-fit__col + .sc-lp-fit__col { border-left: 0; border-top: 1px solid var(--sc-border-dim, #353c45); } } /* ---- #215 native 化 bridge: For you if / Not for you if を native 要素で組む ---- * 新 DOM(#215 追いFB): * container .sc-lp-fit > container .sc-lp-fit__col--yes/--no * > heading .sc-lp-fit__label / heading .sc-lp-fit__title * + container .sc-lp-fit__list > container .sc-lp-fit__item * > Icon ウィジェット .sc-lp-fit__badge + container .sc-lp-fit__itembody * > heading .sc-lp-fit__itemtitle (+ text-editor .sc-lp-fit__itemdesc) * `.e-con { display:flex }` と同点になる grid/flex 指定は `.e-con` 付きで明示的に勝たせる。 */ .sc-lp-fit.e-con { display: grid; grid-template-columns: 1fr 1fr; } @media (max-width: 1024px) { .sc-lp-fit.e-con { grid-template-columns: 1fr; } } .sc-lp-fit .sc-lp-fit__col.e-con { display: flex; flex-direction: column; } .sc-lp-fit .sc-lp-fit__list.e-con { display: flex; flex-direction: column; gap: 16px; } .sc-lp-fit .sc-lp-fit__item.e-con { display: flex; flex-direction: row; align-items: flex-start; gap: 8px; } .sc-lp-fit .sc-lp-fit__itembody.e-con { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; } /* ラベル/タイトル/項目テキストはウィジェットラッパーにクラスが付くので内側へ継承させる。 */ .sc-lp-fit__label .elementor-heading-title, .sc-lp-fit__title .elementor-heading-title, .sc-lp-fit__itemtitle .elementor-heading-title { font: inherit; color: inherit; margin: 0; } .sc-lp-fit__itemdesc, .sc-lp-fit__itemdesc p { font-size: 14px; line-height: 1.5; color: var(--sc-fg-secondary, #adb3bb); margin: 0; } /* Icon ウィジェットは wrapper > .elementor-icon-wrapper > .elementor-icon > i の 3 層。 * 20px の丸はラッパー(.sc-lp-fit__badge)に当たるので内側をパススルーにする。 */ .sc-lp-fit__badge.elementor-widget-icon > .elementor-widget-container, .sc-lp-fit__badge .elementor-icon-wrapper, .sc-lp-fit__badge .elementor-icon { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; margin: 0; padding: 0; line-height: 1; color: inherit; } /* Course content — curriculum-forward section (一般オンライン動画コース LP・#143) */ .sc-lp-course { color: var(--sc-fg, #f0f2f4); max-width: 820px; margin-inline: auto; padding: 48px 24px; } .sc-lp-course__lead { text-align: center; color: var(--sc-fg-secondary, #adb3bb); font-size: 16px; line-height: 1.6; max-width: 680px; margin: 0 auto 28px; } .sc-lp-course__modules { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; counter-reset: none; } .sc-lp-course__module { display: flex; align-items: flex-start; gap: 18px; background: var(--sc-bg-bright, #272727); border: 1px solid var(--sc-border-dim, #353c45); border-radius: var(--sc-radius-card, 12px); padding: 20px 22px; } .sc-lp-course__num { flex: 0 0 auto; font-size: 18px; font-weight: 700; line-height: 1.2; color: var(--sc-primary, #f04b50); font-variant-numeric: tabular-nums; min-width: 32px; } .sc-lp-course__body { display: flex; flex-direction: column; gap: 4px; } .sc-lp-course__mtitle { font-size: 16px; font-weight: 700; color: var(--sc-fg, #f0f2f4); } .sc-lp-course__mdesc { font-size: 14px; line-height: 1.55; color: var(--sc-fg-secondary, #adb3bb); } .sc-lp-course__outcome { display: flex; align-items: center; gap: 10px; justify-content: center; text-align: center; margin: 28px auto 0; max-width: 640px; padding: 16px 20px; background: var(--sc-bg-hover-strong, rgba(240,75,80,.08)); border: 1px solid var(--sc-primary, #f04b50); border-radius: var(--sc-radius-card, 12px); color: var(--sc-fg, #f0f2f4); font-size: 15px; line-height: 1.5; } .sc-lp-course__outcome i { color: var(--sc-primary, #f04b50); font-size: 18px; } /* Spotify playlist — guest-instructor video-course LP (#143) */ .sc-lp-spotify { color: var(--sc-fg, #f0f2f4); max-width: 820px; margin-inline: auto; padding: 48px 24px; } .sc-lp-spotify__lead { text-align: center; color: var(--sc-fg-secondary, #adb3bb); font-size: 16px; line-height: 1.6; max-width: 640px; margin: 0 auto 24px; } .sc-lp-spotify__embed { max-width: 720px; margin: 0 auto; } .sc-lp-spotify__iframe { display: block; width: 100%; min-height: 152px; border: 0; border-radius: var(--sc-radius-card, 12px); } .sc-lp-spotify__placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; min-height: 240px; padding: 32px 24px; border-radius: var(--sc-radius-card, 12px); background: var(--sc-bg-bright, #272727); border: 1px dashed var(--sc-border, #5d6164); } .sc-lp-spotify__placeholder i { font-size: 40px; color: #1db954; } .sc-lp-spotify__ph-title { font-size: 16px; font-weight: 700; color: var(--sc-fg, #f0f2f4); } .sc-lp-spotify__ph-hint { font-size: 13px; color: var(--sc-fg-secondary, #adb3bb); max-width: 420px; line-height: 1.5; } .sc-lp-spotify__ph-hint code { font-family: monospace; color: var(--sc-fg, #f0f2f4); background: var(--sc-bg-hover-strong, rgba(255,255,255,.08)); padding: 1px 5px; border-radius: 4px; } /* ============================================================================= * 比較カード(DAW/コース選択)+ 選択で分岐(#154 / Component 5) * ========================================================================== */ .sc-lp-compare { color: var(--sc-fg, #f0f2f4); max-width: 880px; margin-inline: auto; padding: 8px 24px 24px; } .sc-lp-compare__lead { text-align: center; color: var(--sc-fg-secondary, #adb3bb); font-size: 15px; line-height: 1.6; max-width: 720px; margin: 0 auto 24px; } .sc-lp-compare__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .sc-lp-compare__card { background: var(--sc-bg-bright, #272727); border: 1px solid var(--sc-border-dim, #353c45); border-radius: var(--sc-radius-card, 12px); padding: 28px 24px; display: flex; flex-direction: column; gap: 8px; } .sc-lp-compare__name { font-size: 24px; font-weight: 700; color: var(--sc-fg, #f0f2f4); } .sc-lp-compare__sub { color: var(--sc-primary, #f04b50); font-size: 15px; font-weight: 700; line-height: 1.4; margin-bottom: 8px; } .sc-lp-compare__features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; } .sc-lp-compare__features li { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; line-height: 1.5; color: var(--sc-fg, #f0f2f4); } .sc-lp-compare__check { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: var(--sc-bg-hover-strong, rgba(255,255,255,.08)); border: 1px solid var(--sc-border, #5d6164); } .sc-lp-compare__check i { font-size: 11px; color: var(--sc-fg, #f0f2f4); } .sc-lp-compare__choose { margin-top: 28px; display: flex; flex-direction: column; align-items: center; gap: 14px; } .sc-lp-compare__prompt { font-size: 18px; font-weight: 700; color: var(--sc-fg, #f0f2f4); text-align: center; } .sc-lp-compare__selects { display: flex; gap: 14px; width: 100%; max-width: 640px; } .sc-lp-compare__select { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 18px 22px; border-radius: var(--sc-radius-card, 12px); text-decoration: none; background: var(--sc-bg-bright, #272727); border: 1px solid var(--sc-border, #5d6164); color: var(--sc-fg, #f0f2f4); font-family: var(--sc-font); font-weight: 700; font-size: 16px; transition: background .15s ease, border-color .15s ease, color .15s ease; } .sc-lp-compare__select i { font-size: 13px; opacity: .6; } .sc-lp-compare__select:hover, .sc-lp-compare__select.sc-lp-picked { background: var(--sc-primary, #f04b50); border-color: var(--sc-primary, #f04b50); color: #fff; } .sc-lp-compare__select:hover i, .sc-lp-compare__select.sc-lp-picked i { opacity: .95; } .sc-lp-compare__still { font-size: 14px; color: var(--sc-fg-secondary, #adb3bb); } .sc-lp-compare__still a { color: var(--sc-primary, #f04b50); text-decoration: none; font-weight: 700; } .sc-lp-compare__still a:hover { text-decoration: underline; } @media (max-width: 1024px) { .sc-lp-compare__cards { grid-template-columns: 1fr; } .sc-lp-compare__selects { flex-direction: column; } } /* ============================================================================= * 「See the honest difference」インライン比較パネル(#185 追加仕様) * DAW 質問カード内の折りたたみ(native
)。summary = リンク風トグル、 * 展開で Ableton Live vs Logic Pro の2列(bg-bright カード)+「ask our team」導線。 * ========================================================================== */ .sc-lp-honest { width: 100%; margin-top: 4px; } .sc-lp-honest__details { width: 100%; } .sc-lp-honest__summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; color: var(--sc-primary, #f04b50); font-size: 14px; font-weight: 700; line-height: 1.4; padding: 4px 0; -webkit-tap-highlight-color: transparent; } .sc-lp-honest__summary::-webkit-details-marker { display: none; } .sc-lp-honest__label { text-decoration: underline; text-underline-offset: 2px; } .sc-lp-honest__chev { font-size: 11px; transition: transform .2s ease; } .sc-lp-honest__details[open] .sc-lp-honest__chev { transform: rotate(180deg); } .sc-lp-honest__panel { margin-top: 16px; text-align: left; } .sc-lp-honest__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .sc-lp-honest__card { background: var(--sc-bg-bright, #272727); border: 1px solid var(--sc-border-dim, #353c45); border-radius: 8px; padding: 20px; display: flex; flex-direction: column; gap: 6px; } .sc-lp-honest__name { font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--sc-fg, #f0f2f4); margin: 0; } .sc-lp-honest__sub { font-size: 13px; font-weight: 700; line-height: 1.4; color: var(--sc-primary, #f04b50); margin: 0 0 4px; } .sc-lp-honest__pts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .sc-lp-honest__pts li { position: relative; padding-left: 18px; font-size: 13.5px; line-height: 1.5; color: var(--sc-fg-secondary, #adb3bb); } .sc-lp-honest__pts li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--sc-border, #5d6164); } .sc-lp-honest__ask { margin: 16px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--sc-fg-secondary, #adb3bb); } .sc-lp-honest__ask a { color: var(--sc-primary, #f04b50); text-decoration: none; font-weight: 700; } .sc-lp-honest__ask a:hover { text-decoration: underline; } @media (max-width: 767px) { .sc-lp-honest__cards { grid-template-columns: 1fr; } } /* ---- #240 native 化 bridge:「See the honest difference」を native 要素で組む ---- * 背景: 箇条書き本文が PHP リテラルで、ディシプリンごとに違う内容をクライアントが * 編集できなかった(#240)。Elementor 要素へ分解して 1 項目ずつ編集可能にした。 * * 新 DOM: * container .sc-lp-honest * container .sc-lp-honest__toggle (旧 の見た目。クリック領域) * heading .sc-lp-honest__label + icon .sc-lp-honest__chev * container .sc-lp-honest__panel * container .sc-lp-honest__cards * container .sc-lp-honest__card * heading h4 .sc-lp-honest__name / heading div .sc-lp-honest__sub * icon-list .sc-lp-honest__pts (1 行 = repeater 1 行 = 個別編集可) * text-editor .sc-lp-honest__ask * * ⛔ 旧
版のセレクタ(上のブロック)は消さない。未移行ページが壊れる。 * 🟡 開閉は JS(Elementor のコンテナでは
を出せない)。**JS が * `.sc-lp-honest--js` を付けて初めて panel を隠す** = JS 無効時は常に開いた状態。 * -------------------------------------------------------------------------- */ .sc-lp-honest__toggle.e-con { display: inline-flex; flex-direction: row; align-items: center; gap: 8px; width: auto; align-self: flex-start; cursor: pointer; color: var(--sc-primary, #f04b50); font-size: 14px; font-weight: 700; line-height: 1.4; -webkit-tap-highlight-color: transparent; } .sc-lp-honest__toggle > .elementor-element { width: auto; } /* 旧 `.sc-lp-honest__summary { padding: 4px 0 }` 相当(タップ領域と全体高さを一致させる)。 * ⚠️ tree 側は padding 0 なので、per-element CSS * (`.elementor- .elementor-element-` = 0,2,0)に勝つ **0,3,0** で当てる。 */ .sc-lp-honest > .sc-lp-honest__toggle.e-con { padding: 4px 0; } .sc-lp-honest__label .elementor-heading-title { font: inherit; color: inherit; margin: 0; text-decoration: underline; text-underline-offset: 2px; } /* Icon ウィジェットは wrapper > .elementor-icon-wrapper > .elementor-icon > i の 3 層。 * Elementor 既定の `.elementor-icon { font-size: 50px }` を上書きして 11px に戻す。 */ .sc-lp-honest__chev { transition: transform .2s ease; } .sc-lp-honest__chev .elementor-icon-wrapper, .sc-lp-honest__chev .elementor-icon { display: block; line-height: 1; margin: 0; padding: 0; } .sc-lp-honest__chev .elementor-icon { font-size: 11px; color: inherit; } .sc-lp-honest__chev .elementor-icon i, .sc-lp-honest__chev .elementor-icon svg { font-size: inherit; color: inherit; width: 1em; height: 1em; } .sc-lp-honest.is-open .sc-lp-honest__chev { transform: rotate(180deg); } /* JS 有効時のみ閉じる。`.sc-lp-honest__panel.e-con`(0,2,0)に確実に勝つよう子結合子で 0,3,0。 */ .sc-lp-honest--js:not(.is-open) > .sc-lp-honest__panel.e-con { display: none; } /* ⚠️ `.e-con` は margin / gap / display を **CSS 変数 + 0,1,0 の宣言**で持つので、 * 素のクラス(0,1,0)では読み込み順次第で負ける。`.e-con` を足して 0,2,0 で当てる。 * padding は per-element CSS(0,2,1)が勝つので **tree 側で明示**する(guardrails §2)。 */ .sc-lp-honest.e-con { display: flex; flex-direction: column; gap: 0; margin-block-start: 4px; } .sc-lp-honest__panel.e-con { display: flex; flex-direction: column; gap: 0; margin-block-start: 16px; } .sc-lp-honest__cards.e-con { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 767px) { .sc-lp-honest__cards.e-con { grid-template-columns: 1fr; } } .sc-lp-honest__card.e-con { display: flex; flex-direction: column; gap: 6px; } .sc-lp-honest__name .elementor-heading-title, .sc-lp-honest__sub .elementor-heading-title { font: inherit; color: inherit; margin: 0; } /* 🔴 旧 markup の見た目に合わせるため **24px / 1.3** を明示する(18px にしない)。 * `.sc-lp-honest__name { font-size: 18px }` は **h4 には当たっていなかった**: * Elementor Kit / テーマ側の `<何か> h4`(0,1,1)がコンポーネントの単一クラス(0,1,0)に * 勝つため、旧 `

` の実測は **24px / line-height 31.2px**。 * native 版の内側も `

` なので、bridge の `font: inherit`(0,2,0)を入れると * 逆に wrapper の 18px を継承して**小さくなる**(= 見た目が変わる)。 */ .sc-lp-honest__name .elementor-heading-title { font-size: 24px; line-height: 1.3; } /* 旧 `.sc-lp-honest__sub { margin: 0 0 4px }` 相当。Elementor の * `.e-con .elementor-widget:not(:last-child) { margin-block-end: 0 }`(0,3,0)に勝つ 0,4,0。 */ .sc-lp-honest__card.e-con > .sc-lp-honest__sub.elementor-widget { margin-bottom: 4px; margin-block-end: 4px; } /* 箇条書き = Icon List ウィジェット。アイコン欄は使わないので隠し、旧 li の丸ポチを再現。 */ .sc-lp-honest__pts .elementor-icon-list-items { display: flex; flex-direction: column; gap: 10px; list-style: none; margin: 0; padding: 0; } .sc-lp-honest__pts .elementor-icon-list-item { display: block; position: relative; padding-left: 18px; font-size: 13.5px; font-weight: 400; line-height: 1.5; color: var(--sc-fg-secondary, #adb3bb); } .sc-lp-honest__pts .elementor-icon-list-item::before { content: ""; position: absolute; left: 2px; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--sc-border, #5d6164); } .sc-lp-honest__pts .elementor-icon-list-icon { display: none; } .sc-lp-honest__pts .elementor-icon-list-text { font: inherit; color: inherit; } /* ⚠️ text-editor ウィジェットは font-weight 500 を継承する(旧 `

` は 400)。 * guardrails §3「native 化で毎回踏む 4 つの罠 (D)」。明示的に 400 に戻す。 */ .sc-lp-honest__ask.elementor-widget-text-editor, .sc-lp-honest__ask.elementor-widget-text-editor p { font-weight: 400; } .sc-lp-honest__ask.elementor-widget-text-editor p { margin: 0; } .sc-lp-honest__panel.e-con > .sc-lp-honest__ask.elementor-widget { margin-top: 16px; margin-block-start: 16px; } /* ============================================================================= * シンプル版 Callout(1枚カード)(#168 2026-07-23 / #148 Component 6b) * Figma PC 3918-73057 / SP 3918-72953。bg #272727・左に紫アクセント枠(8px #8b7cff)・ * drop-shadow・radius 8・PC padding 40/104。ボタンは紫アウトライン・全幅・右にアイコン。 * ========================================================================== */ .sc-lp-callout { --sc-lp-accent: #8b7cff; max-width: 880px; margin-inline: auto; padding: 8px 24px 24px; } .sc-lp-callout__card { display: flex; flex-direction: column; gap: 20px; background: var(--sc-bg-bright, #272727); border-radius: 8px; border-left: 8px solid var(--sc-lp-accent); padding: 40px 104px; box-shadow: 0 4px 26px rgba(0,0,0,.65); color: var(--sc-fg, #f0f2f4); } .sc-lp-callout__title { font-size: 18px; font-weight: var(--sc-fw-bold, 700); line-height: 1.4; color: var(--sc-fg, #f0f2f4); margin: 0; } .sc-lp-callout__body { font-size: 14px; font-weight: var(--sc-fw-medium, 500); line-height: 1.4; color: var(--sc-fg, #f0f2f4); margin: -12px 0 0; } .sc-lp-callout__btns { display: flex; flex-direction: column; gap: 8px; } .sc-lp-callout__btn { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 16px; border-radius: 8px; text-decoration: none; border: 1px solid var(--sc-lp-accent); background: transparent; color: var(--sc-fg, #f0f2f4); font-family: var(--sc-font); font-weight: var(--sc-fw-bold, 700); font-size: 18px; line-height: 1.4; transition: background-color .15s ease, color .15s ease; } .sc-lp-callout__btn-label { flex: 1 1 auto; text-align: center; } .sc-lp-callout__btn i { flex: 0 0 auto; font-size: 16px; } .sc-lp-callout__btn:hover { background: rgba(139,124,255,.14); color: var(--sc-fg, #f0f2f4); } .sc-lp-callout__still { font-size: 14px; font-weight: var(--sc-fw-medium, 500); line-height: 1.4; color: var(--sc-fg, #f0f2f4); margin: 0; } .sc-lp-callout__still a { color: var(--sc-lp-accent); font-weight: var(--sc-fw-bold, 700); text-decoration: underline; } .sc-lp-callout__still a:hover { text-decoration: none; } @media (max-width: 1024px) { .sc-lp-callout { padding: 0 16px 16px; } .sc-lp-callout__card { padding: 24px 16px; gap: 16px; } } /* ============================================================================= * MATCH 結果カード(#184 Task4)= ウィザードの回答結果パネル。 * "Your match" バッジ + 左アクセント枠のカード(eyebrow/title/tag/sections/CTA/price)。 * ========================================================================== */ .sc-lp-match { --sc-lp-match-accent: #c8862a; max-width: 880px; margin-inline: auto; padding: 8px 24px 24px; color: var(--sc-fg, #f0f2f4); } .sc-lp-match__badge { display: inline-block; margin: 0 0 -6px 4px; padding: 6px 14px; border-radius: 8px; background: var(--sc-bg-bright, #272727); border: 1px solid var(--sc-border-dim, #353c45); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--sc-fg, #f0f2f4); } .sc-lp-match__card { position: relative; display: flex; flex-direction: column; gap: 16px; background: var(--sc-bg-bright, #272727); border-radius: 12px; border-left: 8px solid var(--sc-lp-match-accent); padding: 32px 36px; box-shadow: 0 4px 26px rgba(0,0,0,.55); } .sc-lp-match__eyebrow { color: var(--sc-lp-match-accent); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; } .sc-lp-match__title { font-size: 28px; line-height: 1.2; font-weight: 700; margin: -6px 0 0; color: var(--sc-fg, #f0f2f4); } .sc-lp-match__tag { font-size: 15px; line-height: 1.6; color: var(--sc-fg-secondary, #adb3bb); margin: 0; } .sc-lp-match__stages { display: flex; flex-direction: column; } .sc-lp-match__stage { font-size: 14px; line-height: 1.55; color: var(--sc-fg-secondary, #adb3bb); padding: 12px 0; border-top: 1px solid var(--sc-border-dim, #353c45); } .sc-lp-match__stage:first-child { border-top: none; } .sc-lp-match__stage b { color: var(--sc-fg, #f0f2f4); font-weight: 700; } .sc-lp-match__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; } .sc-lp-match__actions .sc-lp-btn { justify-content: center; } .sc-lp-match__actions .sc-lp-btn i { margin-left: 6px; } .sc-lp-match__price { font-size: 13px; font-style: italic; line-height: 1.5; color: var(--sc-fg-secondary, #adb3bb); margin: 4px 0 0; } @media (max-width: 1024px) { .sc-lp-match { padding: 0 16px 16px; } .sc-lp-match__card { padding: 24px 18px; } .sc-lp-match__title { font-size: 24px; } .sc-lp-match__actions .sc-lp-btn { flex: 1 1 auto; } } /* ============================================================================= * All five programs(#184 Task5)= 5 Full Program へのリンクカード一覧。 * ========================================================================== */ .sc-lp-programs { color: var(--sc-fg, #f0f2f4); max-width: 880px; margin-inline: auto; padding: 32px 24px; } .sc-lp-programs .sc-lp-programs__head { text-align: left; margin-bottom: 20px; } .sc-lp-programs__cards { display: flex; flex-direction: column; gap: 14px; } .sc-lp-programs__card { display: flex; align-items: center; gap: 16px; text-decoration: none; background: var(--sc-bg-bright, #272727); border: 1px solid var(--sc-border-dim, #353c45); border-radius: 8px; padding: 20px 22px; color: var(--sc-fg, #f0f2f4); transition: border-color .15s ease, transform .15s ease; } .sc-lp-programs__card:hover { border-color: var(--sc-primary, #f04b50); transform: translateY(-1px); } .sc-lp-programs__body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 6px; } .sc-lp-programs__ctitle { font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--sc-fg, #f0f2f4); } .sc-lp-programs__cbody { font-size: 14px; line-height: 1.55; color: var(--sc-fg-secondary, #adb3bb); } .sc-lp-programs__arrow { flex: 0 0 auto; font-size: 16px; color: var(--sc-fg-secondary, #adb3bb); transition: color .15s ease, transform .15s ease; } .sc-lp-programs__card:hover .sc-lp-programs__arrow { color: var(--sc-primary, #f04b50); transform: translateX(3px); } @media (max-width: 1024px) { .sc-lp-programs { padding: 24px 16px; } .sc-lp-programs__card { padding: 16px 18px; } } /* ----------------------------------------------------------------------------- * #184/#185 native 化 bridge: [sc_lp_match]/[sc_lp_yourprogram]/[sc_lp_programs](#184)+ * [sc_lp_curriculum]/[sc_lp_where](#185・course-b)を * native Elementor 要素(container/heading/text/button)で描画する際の橋渡し。 * CSS クラスが widget ラッパー(.elementor-element)に載り、実テキストは内側の * .elementor-heading-title / text-editor

にあるため、自前クラスの typography/余白を * 内側要素へ継承させる。e_optimized_markup OFF(dev/local 統一・guardrails #1)前提。 * 見た目は shortcode 版と同一(クラスは不変)。編集可能性のための構造変更のみ。 * -------------------------------------------------------------------------- */ .sc-lp-match .elementor-widget-heading .elementor-heading-title, .sc-lp-yourprogram .elementor-widget-heading .elementor-heading-title, .sc-lp-programs .elementor-widget-heading .elementor-heading-title, .sc-lp-curr .elementor-widget-heading .elementor-heading-title, .sc-lp-where .elementor-widget-heading .elementor-heading-title, .sc-lp-yourpath .elementor-widget-heading .elementor-heading-title, .sc-lp-ladder .elementor-widget-heading .elementor-heading-title { color: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; letter-spacing: inherit; margin: 0; } .sc-lp-match .elementor-widget-text-editor p, .sc-lp-yourprogram .elementor-widget-text-editor p, .sc-lp-programs .elementor-widget-text-editor p, .sc-lp-curr .elementor-widget-text-editor p, .sc-lp-where .elementor-widget-text-editor p, .sc-lp-yourpath .elementor-widget-text-editor p, .sc-lp-ladder .elementor-widget-text-editor p { margin: 0; } /* #183 course-a native yourpath: intro/foot は native heading/text、カード列は単一ソース * markup(sc_lp_yourpath_cards_html)を html ウィジェットで包む(