/* ==========================================================================
   年度別 資格講座LP（/shikaku/<年度>/）の追加部品
   --------------------------------------------------------------------------
   course-lp.css の .sy-lp を土台にして、LP のテンプレートだけが使う部品を足す。
   トークン（--sy-ink / --sy-accent / --sy-mincho …）は course-lp.css が
   .sy-lp に定義済みなので、このファイルは値を持たない。

   ■ course-lp.css に足さない理由
     course-lp.css は CKEDITOR_5_CUSTOM_CSS（settings.py）で CKEditor の
     編集エリアにも読み込まれている。ここの部品はテンプレートが出すもので、
     編集者が本文に手書きしても管理画面のプレビューには出ない。
     混ぜると WYSIWYG が嘘になるため、ファイルを分けている。

   ■ 詳細度の注意
     このファイルは course-lp.css の後に読まれる。course-lp.css の
     @media (max-width: 575.98px) にある .sy-lp .sy-phase{...}（詳細度 0,2,0）を
     うっかり上書きしないよう、修飾子は .sy-lp .sy-phase.sy-phase-3（0,3,0）の
     ように書き、狭い画面の指定はこのファイル末尾にも書く。
   ========================================================================== */

/* --- 読み幅（.sy-wrap） -------------------------------------------------
   Bootstrap の .container は広い画面で 1140px まで伸びる。明朝の本文には
   広すぎるので、LP の中身はここで抑える。

   セクションの背景を画面幅いっぱいの帯にするため、landing.html から .container を
   外し、.sy-wrap を各 <section> の内側へ移した。.sy-wrap の役割は「ページを包む箱」
   から「セクションの中の読み幅カラム」に変わっている。.container が持っていた
   左右のガターはここで引き継ぐ。
   -------------------------------------------------------------------------- */

.sy-lp .sy-wrap {
    max-width: 62rem;
    margin: 0 auto;
    padding: 0 1rem;
}

/* --- 旧年度の告知帯（.sy-archive） --- */

.sy-lp .sy-archive {
    margin: 0 0 1.5rem;
    padding: .85rem 1.1rem;
    border-left: 3px solid var(--sy-accent);
    background: var(--sy-tint);
    font-size: .86rem;
    line-height: 1.8;
    color: var(--sy-ink-2);
}

.sy-lp .sy-archive a {
    color: var(--sy-accent);
    font-weight: 700;
}

/* --- ヒーローの画像（.sy-hero-media） --- */

.sy-lp .sy-hero-media {
    margin: 1.5rem 0 0;
    border: 1px solid var(--sy-rule);
}

.sy-lp .sy-hero-media img {
    display: block;
    width: 100%;
    height: auto;
}

/* --- 明るい背景で使う副ボタン（.sy-btn-outline） -------------------------
   .sy-btn-ghost は .sy-cta の黒背景専用（border-color が白の半透明）。
   白背景のヒーローで使うと枠も文字も消えるため、別に用意する。
   -------------------------------------------------------------------------- */

.sy-lp .sy-btn-outline {
    background: transparent;
    border-color: var(--sy-accent);
    color: var(--sy-accent);
}

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

/* --- お悩みカード（.sy-cards） -------------------------------------------
   .sy-counts と同じく「1px の隙間＋罫色の背景」でヘアラインを作る。
   枚数が変わっても崩れないよう auto-fit にしている。
   -------------------------------------------------------------------------- */

.sy-lp .sy-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 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-card {
    padding: 1.25rem 1.2rem;
    background: var(--sy-paper);
}

.sy-lp .sy-card .sy-card-icon {
    display: block;
    margin: 0 0 .6rem;
    font-size: 1.6rem;
    line-height: 1;
    color: var(--sy-accent);
}

/* .sy-k は各コンテナの中でしか定義されていないので、新しい入れ物には自前で書く */
.sy-lp .sy-card .sy-k {
    display: block;
    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-card h3 {
    margin: 0 0 .5rem;
    font-size: 1.05rem;
}

.sy-lp .sy-card p {
    margin: 0;
    font-size: .88rem;
}

/* --- お悩みからの転換（.sy-turn） --- */

.sy-lp .sy-turn {
    position: relative;
    margin: 2rem 0 0;
    padding: 1.1rem 1rem;
    border: 1px solid var(--sy-accent);
    background: var(--sy-paper);
    font-family: var(--sy-mincho);
    font-size: clamp(1.05rem, .95rem + .6vw, 1.3rem);
    font-weight: 600;
    line-height: 1.6;
    text-align: center;
    color: var(--sy-accent);
}

/* --- 3列の局面説明（.sy-phase-3） --- */

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

/* --- 写真と説明（.sy-figure） --- */

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

.sy-lp .sy-figure img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--sy-rule);
}

.sy-lp .sy-figure-cap {
    margin: .5rem 0 0;
    font-size: .78rem;
    line-height: 1.8;
    color: var(--sy-ink-2);
}

/* --- 講座ラインナップ（.sy-lineup） --------------------------------------
   資格区分ごとに .sy-lineup-group を並べ、その中を1行1講座のヘアラインで組む。
   -------------------------------------------------------------------------- */

.sy-lp .sy-lineup-group {
    margin-top: 2rem;
}

.sy-lp .sy-lineup-group:first-child {
    margin-top: 1.25rem;
}

.sy-lp .sy-lineup {
    margin: .6rem 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--sy-rule);
}

.sy-lp .sy-lineup-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: .5rem 1.25rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--sy-rule);
}

.sy-lp .sy-lineup-title {
    margin: 0;
    font-family: var(--sy-mincho);
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.6;
    color: var(--sy-ink);
}

.sy-lp .sy-lineup-lead {
    margin: .25rem 0 0;
    font-size: .85rem;
    line-height: 1.7;
    color: var(--sy-ink-2);
}

.sy-lp .sy-lineup-meta {
    margin: .35rem 0 0;
    font-family: var(--sy-num);
    font-size: .78rem;
    font-variant-numeric: tabular-nums;
    line-height: 1.8;
    color: var(--sy-ink-2);
}

.sy-lp .sy-lineup-meta span + span {
    margin-left: .9rem;
}

.sy-lp .sy-lineup-actions {
    text-align: right;
    white-space: nowrap;
}

.sy-lp .sy-lineup-actions .sy-btn {
    margin: 0;
    padding: .5rem 1.1rem;
    font-size: .85rem;
}

/* --- 申込状況のバッジ（.sy-badge） ---------------------------------------
   判定は shikaku/services.py::application_status（＝ user/course.html と
   同じ条件）。ここは見た目だけを持つ。
   -------------------------------------------------------------------------- */

.sy-lp .sy-badge {
    display: inline-block;
    margin: 0 0 .35rem;
    padding: .18rem .6rem;
    border: 1px solid var(--sy-rule);
    font-family: var(--sy-num);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1.6;
    color: var(--sy-ink-2);
}

.sy-lp .sy-badge-open {
    border-color: var(--sy-accent);
    background: var(--sy-accent);
    color: #fff;
}

.sy-lp .sy-badge-closed {
    border-color: var(--sy-rule);
    background: var(--sy-tint);
    color: var(--sy-ink-2);
}

/* --- 受講開始までの流れ（.sy-steps） --- */

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

.sy-lp .sy-steps > li {
    counter-increment: sy-step;
    padding: 1.25rem 1.2rem;
    background: var(--sy-paper);
}

/* ラベル未入力の行だけ「STEP n」を自動で振る。テンプレートが
   .sy-step-auto を付ける（:has() を使うと未対応ブラウザで二重に出るため） */
.sy-lp .sy-steps > li.sy-step-auto::before {
    content: "STEP " counter(sy-step);
    display: block;
    margin: 0 0 .5rem;
    font-family: var(--sy-num);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--sy-accent);
}

.sy-lp .sy-steps .sy-step-k {
    display: block;
    margin: 0 0 .5rem;
    font-family: var(--sy-num);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--sy-accent);
}

.sy-lp .sy-steps h3 {
    margin: 0 0 .45rem;
    font-size: 1rem;
}

.sy-lp .sy-steps p {
    margin: 0;
    font-size: .85rem;
}

/* 電話番号のリンク。Bootstrap の既定色（青）だと明朝・朱の設計から浮く */
.sy-lp .sy-specs a.sy-t {
    color: var(--sy-ink);
    text-decoration: none;
}

.sy-lp .sy-specs a.sy-t:hover,
.sy-lp .sy-specs a.sy-t:focus {
    color: var(--sy-accent);
}

/* --- 地図（.sy-map） --- */

.sy-lp .sy-map {
    margin: 1.5rem 0 0;
    border: 1px solid var(--sy-rule);
    aspect-ratio: 16 / 9;
}

.sy-lp .sy-map iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ==========================================================================
   ページ内ナビ（.sy-nav）
   --------------------------------------------------------------------------
   親の navbar（user/base.html の69行目）は sticky でも fixed でもないので、
   このナビ単体を sticky にすれば画面上端に付く。全ページ共通の base.html を
   触らずに済むよう、追従はここだけで完結させている。

   sticky は祖先に overflow / transform があると効かないが、祖先は <body> と
   .sy-lp だけでどちらも素の block。
   ========================================================================== */

:root {
    /* ナビとバーの高さ。scroll-margin-top と body の下余白の基準になるので、
       .sy-lp ではなく :root に置く（body にも使うため）。
       .sy-band-ink がトークンを再束縛しても、この2つは巻き込まれない */
    --sy-nav-h: 3rem;
    --sy-bar-h: 4.25rem;
}

.sy-lp .sy-nav {
    position: sticky;
    top: 0;
    z-index: 20;
    background: #fff;
    border-bottom: 1px solid var(--sy-rule);
}

.sy-lp .sy-nav-wrap {
    display: flex;
    align-items: stretch;
    max-width: 62rem;
    height: var(--sy-nav-h);
    margin: 0 auto;
    padding: 0 1rem;
}

.sy-lp .sy-nav-list {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    /* 狭い画面では横スクロール。折り返すとナビの高さが変わって
       scroll-margin-top がずれるので、必ず1行に保つ */
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}

.sy-lp .sy-nav-list::-webkit-scrollbar {
    display: none;
}

.sy-lp .sy-nav-list a {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 .85rem;
    border-bottom: 2px solid transparent;
    font-family: var(--sy-num);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .04em;
    white-space: nowrap;
    text-decoration: none;
    color: var(--sy-ink-2);
}

.sy-lp .sy-nav-list a:hover,
.sy-lp .sy-nav-list a:focus-visible {
    color: var(--sy-ink);
}

/* 現在地。shikaku-lp.js が aria-current を付け外しする。独自の class ではなく
   aria-current を状態の正にしておくと、支援技術への通知と見た目が必ず一致する */
.sy-lp .sy-nav-list a[aria-current] {
    border-bottom-color: var(--sy-accent);
    color: var(--sy-accent);
}

.sy-lp .sy-nav .sy-nav-cta {
    flex: 0 0 auto;
    align-self: center;
    margin: 0 0 0 .75rem;
    padding: .45rem 1rem;
    font-size: .8rem;
}

/* スクロール箱は html なので、この2つだけ .sy-lp 接頭辞を外す。
   このファイルは landing.html の extra_style からしか読まれないので、
   影響は LP ページに閉じる（course-lp.css には書けない類の規則） */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

/* ==========================================================================
   セクションの色帯（.sy-band-*）
   --------------------------------------------------------------------------
   帯を全幅にするために landing.html から .container を外し、.sy-wrap を各
   <section> の内側へ移した。<section> が <body> 直下の .sy-lp の子になるので、
   background がそのまま画面幅いっぱいに出る。

   100vw で外へはみ出させる手（margin-left: calc(50% - 50vw); width: 100vw）は
   採らない。100vw が縦スクロールバーの幅を含むぶん右へあふれ、横スクロールバーが
   出る。塞ぐには body{overflow-x:hidden} が要り、そうすると .sy-nav の
   position:sticky が効かなくなる。
   ========================================================================== */

.sy-lp .sy-notices {
    padding-top: 1.25rem;
    background: var(--sy-paper);
}

/* 既定は紙色。body の背景（snow = #FFFAFA の暖色）が透けると、寒色の
   --sy-tint と並べたときに濁って見える */
.sy-lp .sy-sec {
    background: var(--sy-paper);
    /* アンカーの着地位置。sticky なナビの下に潜らせない */
    scroll-margin-top: var(--sy-nav-h);
}

.sy-lp .sy-sec.sy-band-tint {
    background: var(--sy-tint);
}

/* --- 濃色帯 ---------------------------------------------------------------
   反転はトークンの再束縛でやる。course-lp.css の規則はすべて var() を見ているので、
   ここを差し替えるだけで見出し・本文・罫が一括で付いてくる。course-lp.css は触らない。

   ■ --sy-accent は再束縛しない
     .sy-btn が地色に使っている。薄い色に変えると白文字とのコントラストが落ちる。
     #b3382c は白文字に対して 5.97:1 で AA を満たすので濃色帯でもそのまま使える。
     文字色として使っている .sy-eyebrow だけ個別に明るくする（#17212b 上では
     #b3382c は 2.95:1 しか出ず AA に届かない）。

   ■ .sy-cta を入れ子にしないこと
     .sy-cta は background: var(--sy-ink)。ここで --sy-ink を白にしているので、
     濃色帯の中に置くと白い箱になる。事故防止に打ち消しも書いてある。
   -------------------------------------------------------------------------- */

.sy-lp .sy-sec.sy-band-ink {
    --sy-ink: #ffffff;
    --sy-ink-2: rgba(255, 255, 255, .78);
    --sy-rule: rgba(255, 255, 255, .28);
    --sy-tint: rgba(255, 255, 255, .07);
    --sy-paper: transparent;

    /* 上で --sy-ink を潰したので var() は使えない。course-lp.css の28行目と同値 */
    background: #17212b;
    color: #fff;

    /* course-lp.css の :first-child / :last-child の詰め（0,3,0）を打ち消す。
       同点だがこのファイルが後に読まれるので勝つ */
    padding: 3.25rem 0;
    border-top: 0;
}

.sy-lp .sy-sec.sy-band-ink .sy-eyebrow {
    color: #e8b0a7;
}

/* 原稿を直し忘れて .sy-cta が濃色帯の中に残っても白い箱にならないようにする */
.sy-lp .sy-sec.sy-band-ink .sy-cta {
    padding: 0;
    background: transparent;
}

/* .sy-btn-outline は白地用（朱の枠・朱の字）。濃色帯では消えるので、
   取り違えても読めるように ghost と同じ見た目へ落とす */
.sy-lp .sy-sec.sy-band-ink .sy-btn.sy-btn-outline {
    border-color: rgba(255, 255, 255, .5);
    color: #fff;
}

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

/* 電話リンクのホバー色は朱。濃色帯では沈む */
.sy-lp .sy-sec.sy-band-ink .sy-specs a.sy-t:hover,
.sy-lp .sy-sec.sy-band-ink .sy-specs a.sy-t:focus {
    color: #e8b0a7;
}

/* 07 の結び。.sy-cta の代わりで、濃色帯の地の上に罫だけで置く */
.sy-lp .sy-closing {
    margin-top: 2rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--sy-rule);
}

.sy-lp .sy-closing h3 {
    margin: 0 0 .65rem;
    font-size: 1.35rem;
}

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

/* 04 は色地なので、.sy-badge-closed の地色（--sy-tint）が背景と同化する */
.sy-lp .sy-sec.sy-band-tint .sy-badge-closed,
.sy-lp .sy-sec.sy-band-tint .sy-badge-before {
    background: var(--sy-paper);
}

/* --- 見出しのブランド色アクセント -----------------------------------------
   h2 に縦バーを新設すると .sy-eyebrow::before（見出し符号の横罫）と L 字に重なり、
   符号の行と見出しの行で行頭が 1.75rem ずれる。既にある横罫を太らせて
   バーに育てるほうが衝突しない。background は currentColor のままなので、
   濃色帯では .sy-eyebrow の色に追従する。
   -------------------------------------------------------------------------- */

.sy-lp .sy-eyebrow::before {
    flex-basis: 2.25rem;
    height: 3px;
}

/* --- 申込開始前のバッジ（.sy-badge-before） -------------------------------
   「申込期間外」（終わった）と区別するため、閉じている色ではなく枠だけにする。
   -------------------------------------------------------------------------- */

.sy-lp .sy-badge-before {
    border-color: var(--sy-ink-2);
    background: transparent;
    color: var(--sy-ink);
}

/* ==========================================================================
   中間CTA（.sy-cta-band / .sy-cta-inline）
   --------------------------------------------------------------------------
   全幅の黒帯にはしない。MV と 07 が既に濃色なので、ここも帯にすると濃色が4枚に
   なって「白→薄グレー→白」の交互リズムが読めなくなる。前後と同じ白地の上に
   黒い箱を置き、リズムの拍ではなく句読点として使う。
   ========================================================================== */

.sy-lp .sy-cta-band {
    padding: 0 0 2.75rem;
    background: var(--sy-paper);
}

.sy-lp .sy-cta.sy-cta-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem 1.5rem;
    padding: 1.5rem 1.6rem;
}

.sy-lp .sy-cta-inline .sy-cta-lead {
    margin: 0;
    font-family: var(--sy-mincho);
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.5;
    color: #fff;
}

.sy-lp .sy-cta-inline p {
    margin: 0;
}

.sy-lp .sy-cta-inline .sy-btn {
    margin: 0;
}

/* ==========================================================================
   スマホ用の固定CTA（.sy-bar）
   ========================================================================== */

.sy-lp .sy-bar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 30;
    /* 既定は出さない。狭い画面だけ grid にする */
    display: none;
    grid-template-columns: 1fr 1fr auto;
    align-items: stretch;
    gap: .5rem;
    padding: .5rem .75rem;
    /* iOS のホームバー。base.html の viewport メタに viewport-fit=cover が無いので
       env() は現状 0 を返すが、そのとき iOS 側がセーフエリアぶん描画領域を狭めて
       くれるのでバーは隠れない。将来 cover を足しても崩れないよう fallback 付きで書く */
    padding-bottom: calc(.5rem + env(safe-area-inset-bottom, 0px));
    background: rgba(23, 33, 43, .97);
    border-top: 1px solid rgba(255, 255, 255, .2);
    transition: transform .2s ease;
}

/* 07 問合せが画面に入っている間は引っ込める（同じ導線の二重表示を避ける）。
   class は shikaku-lp.js が付け外しする */
.sy-lp.is-contact-visible .sy-bar {
    transform: translateY(110%);
}

/* course-lp.css の @media (max-width: 575.98px) にある
   .sy-lp .sy-btn{display:block; margin-right:0}（0,2,0）を、
   .sy-lp .sy-bar .sy-btn（0,3,0）で上書きする。ファイル冒頭の作法どおり */
.sy-lp .sy-bar .sy-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    /* 44px。指で押せる下限 */
    min-height: 2.75rem;
    margin: 0;
    padding: .5rem .35rem;
    font-size: .8rem;
    line-height: 1.3;
    text-align: center;
}

.sy-lp .sy-bar .sy-bar-tel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 3.75rem;
    min-height: 2.75rem;
    padding: .35rem .5rem;
    border: 1px solid rgba(255, 255, 255, .5);
    font-family: var(--sy-num);
    font-size: .62rem;
    line-height: 1.3;
    text-decoration: none;
    color: #fff;
}

.sy-lp .sy-bar .sy-bar-tel i {
    font-size: 1rem;
    margin-bottom: .15rem;
}

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

/* ==========================================================================
   FAQ のアコーディオン（.sy-faq-acc）
   --------------------------------------------------------------------------
   course-lp.css の .sy-faq 一式は編集できない（CKEditor の編集エリアに読まれる
   ため）。幸い .sy-q / .sy-a はタグ名ではなくクラスで当たっているので、
   <p> → <summary> の置き換えだけで「Q」「A」の符号・明朝・左の 1.9rem インデントは
   全部引き継げる。

   打ち消すのは2点だけ。
     1. <summary> の既定マーカー（▶）
     2. .sy-a の border-bottom … 閉じている行では .sy-a が描画されず区切り罫が
        消えるので、罫は <details> 側へ移す。

   詳細度は .sy-faq.sy-faq-acc（.sy-lp と合わせて 0,3,0）で書く。
   course-lp.css の .sy-lp .sy-faq .sy-a も 0,3,0 で同点だが、このファイルが
   後に読まれるので勝つ。曖昧にしないため必ず .sy-faq.sy-faq-acc と連結して書くこと。
   ========================================================================== */

.sy-lp .sy-faq.sy-faq-acc .sy-faq-item {
    border-bottom: 1px solid var(--sy-rule);
}

.sy-lp .sy-faq.sy-faq-acc summary.sy-q {
    /* display:block で ::marker（▶）が消える。list-style と
       ::-webkit-details-marker は Safari 15 以前への保険 */
    display: block;
    list-style: none;
    /* 右端の開閉符号のぶん */
    padding-right: 2.25rem;
    /* 閉じている行は .sy-a の下余白が無いのでここで持つ */
    padding-bottom: 1.05rem;
    cursor: pointer;
}

.sy-lp .sy-faq.sy-faq-acc summary.sy-q::-webkit-details-marker {
    display: none;
}

.sy-lp .sy-faq.sy-faq-acc .sy-faq-item[open] > summary.sy-q {
    padding-bottom: .3rem;
}

.sy-lp .sy-faq.sy-faq-acc summary.sy-q:hover {
    color: var(--sy-accent);
}

/* .sy-lp には .sy-cta の中にしかフォーカス指定が無い。
   キーボード操作でどの質問にいるか分かるようにする */
.sy-lp .sy-faq.sy-faq-acc summary.sy-q:focus-visible {
    outline: 2px solid var(--sy-accent);
    outline-offset: -2px;
}

.sy-lp .sy-faq.sy-faq-acc .sy-a {
    padding-bottom: 1.05rem;
    /* 罫は .sy-faq-item へ移した */
    border-bottom: 0;
}

/* 開閉の符号。::before は「Q」に使われていて同じ擬似要素に2つ目は作れないので
   ::after を使う。図面の細い罫に合わせて 1px の十字／横棒を背景で描く。
   position: absolute の基準は course-lp.css の .sy-faq .sy-q { position: relative } */
.sy-lp .sy-faq.sy-faq-acc summary.sy-q::after {
    content: "";
    position: absolute;
    top: 1.5rem;
    right: .3rem;
    width: .85rem;
    height: .85rem;
    background:
        linear-gradient(var(--sy-accent), var(--sy-accent)) center / 100% 1px no-repeat,
        linear-gradient(var(--sy-accent), var(--sy-accent)) center / 1px 100% no-repeat;
}

/* 開いたら縦棒を落として「−」にする */
.sy-lp .sy-faq.sy-faq-acc .sy-faq-item[open] > summary.sy-q::after {
    background:
        linear-gradient(var(--sy-accent), var(--sy-accent)) center / 100% 1px no-repeat;
}

/* --- 狭い画面 -------------------------------------------------------------
   course-lp.css のモバイル指定（.sy-lp .sy-phase = 詳細度 0,2,0）は
   このファイルの .sy-lp .sy-phase.sy-phase-3（0,3,0）に負ける。
   3列を1列に戻す指定をここにも書かないとスマホで潰れる。
   -------------------------------------------------------------------------- */

@media (max-width: 767.98px) {
    .sy-lp .sy-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

    /* 2.75rem = 44px。指で押せる下限 */
    :root {
        --sy-nav-h: 2.75rem;
    }

    .sy-lp .sy-nav-wrap {
        padding: 0;
    }

    .sy-lp .sy-nav-list {
        padding: 0 .75rem;
    }

    /* 右端の常設CTAは画面下部の .sy-bar が担う */
    .sy-lp .sy-nav .sy-nav-cta {
        display: none;
    }

    .sy-lp .sy-bar {
        display: grid;
    }

    /* 固定バーがフッターに重ならないよう足元を空ける。フッターは .sy-lp の外
       （base.html）にあるので body に効かせる。JS が動かない環境でも効くよう
       CSS だけで完結させる。このファイルは LP からしか読まれないので影響は閉じる */
    body {
        padding-bottom: calc(var(--sy-bar-h) + env(safe-area-inset-bottom, 0px));
    }
}

@media (max-width: 575.98px) {
    .sy-lp .sy-phase.sy-phase-3 {
        grid-template-columns: minmax(0, 1fr);
    }

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

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

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

    .sy-lp .sy-lineup-actions {
        text-align: left;
    }

    .sy-lp .sy-cta-band {
        padding-bottom: 2.25rem;
    }

    .sy-lp .sy-cta.sy-cta-inline {
        display: block;
        padding: 1.25rem 1.1rem;
    }

    .sy-lp .sy-cta-inline p + p {
        margin-top: .5rem;
    }
}


/* --- 印刷 -----------------------------------------------------------------
   濃色帯はインクを食うので、印刷ではトークンを元に戻す。
   FAQ は shikaku-lp.js が beforeprint で全部開く（open は属性なので CSS では
   立てられず、::details-content は使えるブラウザが限られる）。
   -------------------------------------------------------------------------- */

@media print {
    .sy-lp .sy-nav,
    .sy-lp .sy-bar {
        display: none !important;
    }

    body {
        padding-bottom: 0;
    }

    .sy-lp .sy-sec.sy-band-ink {
        --sy-ink: #17212b;
        --sy-ink-2: #55636f;
        --sy-rule: #d2dae1;
        --sy-tint: #f3f6f8;
        --sy-paper: #ffffff;
        background: #fff;
        color: #17212b;
    }

    .sy-lp .sy-sec.sy-band-ink .sy-eyebrow {
        color: #b3382c;
    }

    .sy-lp .sy-sec.sy-band-tint {
        background: #fff;
    }

    .sy-lp .sy-faq.sy-faq-acc summary.sy-q::after {
        display: none;
    }
}