/* ==========================================================================
   講座ランディング（.sy-lp）
   --------------------------------------------------------------------------
   Course.courseremark（CKEditor5）に入れる講座紹介用のスタイル。
   建築図面の表記（寸法線・斜線端末・明朝の見出し・朱書きの指示色）を下敷きにしている。

   読み込み場所は2か所。
     - user/base.html      … 公開ページの表示用
     - CKEDITOR_5_CUSTOM_CSS … 管理画面の編集エリア用（settings.py）

   ■ HTML を書くときの制約（CKEditor5 の正規化に合わせるため）
     1. inline 要素を inline 要素の中に入れない。
        NG: <span class="sy-v">4<span class="sy-u">月</span></span>
        OK: <span class="sy-v">4</span><span class="sy-u">月</span>
        入れ子にすると保存時に兄弟へ分解され、class が合成される（sy-v sy-u）。
     2. block 要素と inline 要素が混在するコンテナでは、全ての子を block にする。
        NG: <div><span class="sy-k">…</span><h3>…</h3></div>
        OK: <div><p class="sy-k">…</p><h3>…</h3></div>
        裸の inline は保存時に <p> で包まれる。
     3. 子が全て inline のコンテナ（.sy-specs > div、.sy-counts > li、
        .sy-price-row、.sy-seg）は、裸の span のままでよい。

   数値の組は --sy-fig でまとめて拡縮する。コンテナ側で値を決め、
   .sy-v / .sy-t が本体、.sy-u が単位を担当する。
   ========================================================================== */

.sy-lp {
    --sy-ink: #17212b;
    --sy-ink-2: #55636f;
    --sy-rule: #d2dae1;
    --sy-tint: #f3f6f8;
    --sy-paper: #ffffff;
    --sy-accent: #b3382c;
    --sy-accent-dark: #8f2b22;
    --sy-mincho: "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "Noto Serif JP", "Source Han Serif JP", "MS PMincho", serif;
    --sy-num: "Helvetica Neue", Arial, "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;

    /* 数値の基準サイズ。各コンテナで上書きする */
    --sy-fig: 1.5rem;

    /* 寸法線の段組み。斜線端末の位置計算に使うのでまとめて定義する */
    --sy-dim-num-h: 2.1rem;
    --sy-dim-gap: .55rem;

    color: var(--sy-ink);
    line-height: 1.9;
    font-feature-settings: "palt" 1;
}

/* --- セクションと基本タイポグラフィ --- */

.sy-lp .sy-sec {
    padding: 2.75rem 0;
    border-top: 1px solid var(--sy-rule);
}

.sy-lp .sy-sec:first-child {
    padding-top: .25rem;
    border-top: 0;
}

.sy-lp .sy-sec:last-child {
    padding-bottom: .25rem;
}

.sy-lp h2 {
    margin: 0 0 1rem;
    font-family: var(--sy-mincho);
    font-size: clamp(1.45rem, 1.15rem + 1.2vw, 2rem);
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: .01em;
    color: var(--sy-ink);
}

.sy-lp h3 {
    margin: 1.75rem 0 .6rem;
    font-family: var(--sy-mincho);
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.6;
    color: var(--sy-ink);
}

.sy-lp p {
    margin: 0 0 1rem;
    color: var(--sy-ink-2);
}

.sy-lp p:last-child {
    margin-bottom: 0;
}

/* セクション符号。図面のシート番号にならって細い罫を頭に引く */
.sy-lp .sy-eyebrow {
    display: flex;
    align-items: center;
    gap: .6em;
    margin: 0 0 .9rem;
    font-family: var(--sy-num);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .14em;
    line-height: 1.6;
    color: var(--sy-accent);
}

.sy-lp .sy-eyebrow::before {
    content: "";
    flex: 0 0 1.75rem;
    height: 1px;
    background: currentColor;
}

/* --- 数値と単位の組 -------------------------------------------------------
   .sy-u は .sy-v / .sy-t と同じ詳細度なので、必ず後に書いて勝たせる。
   CKEditor が class を合成して <span class="sy-v sy-u"> になった場合も
   単位として表示される。
   -------------------------------------------------------------------------- */

.sy-lp .sy-v,
.sy-lp .sy-t {
    font-family: var(--sy-num);
    font-size: var(--sy-fig);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--sy-ink);
}

.sy-lp .sy-u {
    margin: 0 .05em 0 .1em;
    font-family: var(--sy-num);
    font-size: calc(var(--sy-fig) * .6);
    font-weight: 500;
    color: var(--sy-ink-2);
}

/* --- 導入（.sy-hero） --- */

.sy-lp .sy-hero h2 {
    font-size: clamp(1.7rem, 1.2rem + 2vw, 2.4rem);
}

.sy-lp .sy-specs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 1.75rem;
    border-top: 2px solid var(--sy-ink);
}

.sy-lp .sy-specs > div {
    --sy-fig: 1.55rem;
    padding: .9rem 1rem;
    border-right: 1px solid var(--sy-rule);
    line-height: 1.45;
}

.sy-lp .sy-specs > div:first-child {
    padding-left: 0;
}

.sy-lp .sy-specs > div:last-child {
    border-right: 0;
}

.sy-lp .sy-specs .sy-k {
    display: block;
    margin-bottom: .2rem;
    font-size: .72rem;
    font-weight: 400;
    letter-spacing: .08em;
    line-height: 1.6;
    color: var(--sy-ink-2);
}

/* --- 寸法線（1コマの時間配分） ---------------------------------------------
   区間の幅＝分数。--sy-w は全体を 100 とした割合で、60/20/10 分 →
   66.7/22.2/11.1。配分を変えるときはここも直す。
   寸法線は .sy-l の上罫で引き、端末の斜線だけ絶対配置で重ねる。
   -------------------------------------------------------------------------- */

.sy-lp .sy-dim {
    margin: 1.5rem 0 0;
}

.sy-lp .sy-dim-track {
    position: relative;
    display: flex;
    align-items: flex-start;
}

.sy-lp .sy-seg {
    --sy-fig: 1.6rem;
    position: relative;
    flex: var(--sy-w) 1 0;
    min-width: 0;
    line-height: var(--sy-dim-num-h);
    text-align: center;
}

.sy-lp .sy-seg-a { --sy-w: 66.7; }
.sy-lp .sy-seg-b { --sy-w: 22.2; }
.sy-lp .sy-seg-c { --sy-w: 11.1; }

.sy-lp .sy-seg .sy-l {
    display: block;
    margin-top: var(--sy-dim-gap);
    padding: .5rem .3rem 0;
    border-top: 1px solid var(--sy-ink);
    font-size: .75rem;
    line-height: 1.65;
    color: var(--sy-ink-2);
}

/* 端末の斜線。区間ごとに左端へ、最終区間の右端は track 側で足す */
.sy-lp .sy-seg::before,
.sy-lp .sy-dim-track::after {
    content: "";
    position: absolute;
    top: calc(var(--sy-dim-num-h) + var(--sy-dim-gap));
    width: 1px;
    height: 15px;
    background: var(--sy-ink);
    transform: translateY(-50%) rotate(45deg);
}

.sy-lp .sy-seg::before {
    left: 0;
    margin-left: -.5px;
}

.sy-lp .sy-dim-track::after {
    right: 0;
    margin-right: -.5px;
}

.sy-lp .sy-dim-cap {
    margin: 1.1rem 0 0;
    font-size: .8rem;
    color: var(--sy-ink-2);
}

/* --- 数値の一覧（.sy-counts） --- */

.sy-lp .sy-counts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
    background: var(--sy-rule);
    border: 1px solid var(--sy-rule);
}

.sy-lp .sy-counts > li {
    --sy-fig: 1.45rem;
    padding: 1rem 1.1rem;
    background: var(--sy-paper);
    line-height: 1.4;
}

.sy-lp .sy-counts .sy-k {
    display: block;
    margin-top: .3rem;
    font-size: .78rem;
    font-weight: 400;
    line-height: 1.7;
    color: var(--sy-ink-2);
}

/* --- 2段組みの局面説明（.sy-phase） --- */

.sy-lp .sy-phase {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.75rem;
    margin-top: 1.5rem;
}

.sy-lp .sy-phase > div {
    padding-top: .9rem;
    border-top: 2px solid var(--sy-ink);
}

.sy-lp .sy-phase .sy-k {
    margin: 0 0 .3rem;
    font-family: var(--sy-num);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1.6;
    color: var(--sy-accent);
}

.sy-lp .sy-phase h3 {
    margin: 0 0 .5rem;
    font-size: 1.15rem;
}

.sy-lp .sy-phase p {
    margin: 0;
    font-size: .9rem;
}

/* --- 箇条書き（.sy-list） --- */

.sy-lp .sy-list {
    margin: 1.25rem 0 0;
    padding: 0;
    list-style: none;
}

.sy-lp .sy-list > li {
    position: relative;
    padding: .7rem 0 .7rem 1.6rem;
    border-top: 1px solid var(--sy-rule);
}

.sy-lp .sy-list > li:last-child {
    border-bottom: 1px solid var(--sy-rule);
}

/* 行頭記号は寸法線の斜線端末と同じ形をとる */
.sy-lp .sy-list > li::before {
    content: "";
    position: absolute;
    left: .35rem;
    top: 1.65rem;
    width: 1px;
    height: .8rem;
    background: var(--sy-accent);
    transform: translateY(-50%) rotate(45deg);
}

/* --- 受講料（.sy-price） --- */

.sy-lp .sy-price {
    margin-top: 1.25rem;
    border-top: 2px solid var(--sy-ink);
}

.sy-lp .sy-price-row {
    --sy-fig: 1.55rem;
    display: flex;
    align-items: baseline;
    padding: .85rem 0;
    line-height: 1.4;
    border-bottom: 1px solid var(--sy-rule);
}

.sy-lp .sy-price-row .sy-k {
    margin-right: auto;
    padding-right: 1rem;
    font-size: .95rem;
    font-weight: 600;
}

/* --- よくあるご質問（.sy-faq） --- */

.sy-lp .sy-faq {
    margin-top: 1.25rem;
    border-top: 1px solid var(--sy-rule);
}

.sy-lp .sy-faq .sy-q,
.sy-lp .sy-faq .sy-a {
    position: relative;
    margin: 0;
    padding-left: 1.9rem;
}

.sy-lp .sy-faq .sy-q {
    padding-top: 1.05rem;
    padding-bottom: .3rem;
    font-family: var(--sy-mincho);
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--sy-ink);
}

.sy-lp .sy-faq .sy-a {
    padding-bottom: 1.05rem;
    border-bottom: 1px solid var(--sy-rule);
    font-size: .92rem;
}

.sy-lp .sy-faq .sy-q::before,
.sy-lp .sy-faq .sy-a::before {
    position: absolute;
    left: 0;
    font-family: var(--sy-num);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .04em;
}

.sy-lp .sy-faq .sy-q::before {
    content: "Q";
    top: 1.05rem;
    color: var(--sy-accent);
}

.sy-lp .sy-faq .sy-a::before {
    content: "A";
    top: 0;
    color: var(--sy-ink-2);
}

/* --- 受講者の声（.sy-voice） --- */

.sy-lp .sy-voice {
    margin-top: 1.25rem;
    padding: 1.25rem 1.4rem;
    background: var(--sy-tint);
    border-left: 2px solid var(--sy-accent);
}

.sy-lp .sy-voice p {
    margin: 0;
    font-family: var(--sy-mincho);
    font-size: 1rem;
    color: var(--sy-ink);
}

.sy-lp .sy-voice .sy-by {
    margin-top: .75rem;
    font-family: var(--sy-num);
    font-size: .78rem;
    color: var(--sy-ink-2);
}

/* --- 編集メモ（.sy-todo）。公開前に差し替える箇所を画面上で明示する --- */

.sy-lp .sy-todo {
    margin-top: 1.25rem;
    padding: .95rem 1.1rem;
    border: 1px dashed var(--sy-accent);
    background: rgba(179, 56, 44, .045);
    font-size: .82rem;
    line-height: 1.85;
    color: var(--sy-ink-2);
}

.sy-lp .sy-todo::before {
    content: "編集メモ / 公開前に差し替え";
    display: block;
    margin-bottom: .3rem;
    font-family: var(--sy-num);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--sy-accent);
}

/* --- 行動喚起（.sy-cta） --- */

.sy-lp .sy-cta {
    padding: 2rem 1.75rem;
    background: var(--sy-ink);
    color: #fff;
}

.sy-lp .sy-cta h3 {
    margin: 0 0 .65rem;
    font-size: 1.35rem;
    color: #fff;
}

.sy-lp .sy-cta p {
    color: rgba(255, 255, 255, .78);
}

.sy-lp .sy-cta .sy-note {
    color: rgba(255, 255, 255, .6);
}

.sy-lp .sy-cta .sy-todo {
    border-color: rgba(255, 255, 255, .55);
    background: rgba(255, 255, 255, .07);
    color: rgba(255, 255, 255, .8);
}

.sy-lp .sy-cta .sy-todo::before {
    color: rgba(255, 255, 255, .85);
}

.sy-lp .sy-btn {
    display: inline-block;
    margin: .4rem .5rem 0 0;
    padding: .72rem 1.6rem;
    border: 1px solid var(--sy-accent);
    background: var(--sy-accent);
    color: #fff;
    font-size: .92rem;
    font-weight: 700;
    line-height: 1.5;
    text-decoration: none;
    transition: background-color .18s ease, border-color .18s ease;
}

.sy-lp .sy-btn:hover,
.sy-lp .sy-btn:focus {
    background: var(--sy-accent-dark);
    border-color: var(--sy-accent-dark);
    color: #fff;
}

.sy-lp .sy-btn-ghost {
    background: transparent;
    border-color: rgba(255, 255, 255, .5);
}

.sy-lp .sy-btn-ghost:hover,
.sy-lp .sy-btn-ghost:focus {
    background: rgba(255, 255, 255, .12);
    border-color: #fff;
}

.sy-lp .sy-cta a:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* --- 補足・注記 --- */

.sy-lp .sy-note {
    margin-top: .9rem;
    margin-bottom: 0;
    font-size: .78rem;
    line-height: 1.85;
    color: var(--sy-ink-2);
}

/* --- 狭い画面 --- */

@media (max-width: 575.98px) {
    .sy-lp .sy-sec {
        padding: 2.25rem 0;
    }

    .sy-lp .sy-specs {
        grid-template-columns: minmax(0, 1fr);
    }

    .sy-lp .sy-specs > div {
        padding: .75rem 0;
        border-right: 0;
        border-bottom: 1px solid var(--sy-rule);
    }

    .sy-lp .sy-specs > div:last-child {
        border-bottom: 0;
    }

    /* 寸法線は縦積みに。分数の比率は帯の長さで保つ */
    .sy-lp .sy-dim-track {
        display: block;
    }

    .sy-lp .sy-seg {
        --sy-fig: 1.25rem;
        padding: .6rem 0 1.15rem;
        border-top: 1px solid var(--sy-rule);
        line-height: 1.5;
        text-align: left;
    }

    .sy-lp .sy-seg:last-child {
        border-bottom: 1px solid var(--sy-rule);
    }

    .sy-lp .sy-seg .sy-l {
        display: inline;
        margin: 0 0 0 .7rem;
        padding: 0;
        border-top: 0;
        font-size: .8rem;
    }

    .sy-lp .sy-seg::before {
        top: auto;
        bottom: .5rem;
        left: 0;
        width: calc(var(--sy-w) * 1%);
        height: 2px;
        margin-left: 0;
        transform: none;
    }

    .sy-lp .sy-dim-track::after {
        display: none;
    }

    .sy-lp .sy-counts,
    .sy-lp .sy-phase {
        grid-template-columns: minmax(0, 1fr);
    }

    .sy-lp .sy-phase {
        gap: 1.4rem;
    }

    .sy-lp .sy-cta {
        padding: 1.6rem 1.25rem;
    }

    .sy-lp .sy-btn {
        display: block;
        margin-right: 0;
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sy-lp .sy-btn {
        transition: none;
    }
}