/* ラインナップ（/lineup/）を階段の順に（2026-11-09。TODO-0048。lineup.php）。トップの階段（build.css の .ascolo-kaidan）と同じ見た目の、くわしい版
   カードの絵は、行き先の商品のページの新しいアイキャッチ（青空＋透明の絵。2026-11-10 きーぼー。それまでは文字だけ）。オレンジは使わない（主役のボタンはヘッダーの右端の診断） */

body.look-on .ascolo-lineup br.sp{display:none}
body.look-on .ascolo-lineup :where(p){margin:0}
body.look-on .ascolo-lineup{max-width:1000px;margin:10px auto 70px}
body.look-on .ascolo-lineup-lead{text-align:center;color:var(--lk-muted);font-size:15px;margin-bottom:30px!important}
body.look-on ol.ascolo-lineup-steps{list-style:none;margin:0;padding:0}
body.look-on ol.ascolo-lineup-steps > li::before, body.look-on ol.ascolo-lineup-steps > li::after{display:none!important;content:none!important}
body.look-on .ascolo-lineup-step{padding:28px 0;border-top:1px solid var(--lk-line);margin:0!important}

/* 段の見出し：番号・名前・小さな説明を1行に */
body.look-on .ascolo-lineup-head{display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px;margin-bottom:18px}
body.look-on .ascolo-lineup-head .num{width:44px;height:44px;border-radius:50%;background:var(--lk-main-deep);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px;flex:0 0 auto}
body.look-on .ascolo-lineup-head .name{font-size:22px;font-weight:700;color:var(--lk-main-deep);line-height:1.3}
body.look-on .ascolo-lineup-head .desc{font-size:14px;color:var(--lk-muted);line-height:1.6}

/* 商品：左に中身、右に値段とボタン */
body.look-on .ascolo-lineup-items{display:flex;flex-direction:column;gap:14px}
body.look-on .ascolo-lineup-item{position:relative;display:flex;gap:28px;padding:22px 26px;background:var(--lk-paper);border:1px solid var(--lk-line);border-radius:6px}
body.look-on .ascolo-lineup-item .main{flex:1 1 auto;min-width:0}
body.look-on .ascolo-lineup-item .badge{display:inline-block;margin-bottom:8px;font-size:11.5px;font-weight:700;letter-spacing:.06em;background:var(--lk-main-deep);color:var(--lk-gold);padding:3px 8px;border-radius:3px;line-height:1.5}
body.look-on .ascolo-lineup-item .title{font-size:18px;font-weight:700;color:var(--lk-main-deep);line-height:1.5}
body.look-on .ascolo-lineup-item .note{font-size:14px;line-height:1.75;color:var(--lk-muted);margin-top:4px!important}
body.look-on .ascolo-lineup-item .for-title{font-size:13px;font-weight:700;color:var(--lk-main);margin-top:14px!important;letter-spacing:.04em}
body.look-on .ascolo-lineup-item ul.for{list-style:none;margin:6px 0 0!important;padding:0!important}
body.look-on .ascolo-lineup-item ul.for li{position:relative;padding-left:1.1em;font-size:14px;line-height:1.8;color:var(--lk-ink);margin:0!important;list-style:none}
body.look-on .ascolo-lineup-item ul.for li::before{content:"・";position:absolute;left:0;color:var(--lk-main)}
body.look-on .ascolo-lineup-item .text{font-size:14px;line-height:1.9;color:var(--lk-ink);margin-top:12px!important}
body.look-on .ascolo-lineup-item .tags{font-size:12.5px;line-height:1.7;color:var(--lk-muted);margin-top:10px!important}
body.look-on .ascolo-lineup-item .side{flex:0 0 250px;display:flex;flex-direction:column;justify-content:center;gap:12px;padding-left:26px;border-left:1px solid var(--lk-line)}
body.look-on .ascolo-lineup-item .price{font-size:15px;font-weight:700;color:var(--lk-ink);line-height:1.6}
body.look-on .ascolo-lineup-item .btn a{display:block;text-align:center;border:2px solid var(--lk-main-deep);color:var(--lk-main-deep)!important;background:#fff;font-weight:700;font-size:15px;letter-spacing:.02em;padding:10px 8px;white-space:nowrap;border-radius:6px;text-decoration:none!important;transition:background .2s,color .2s}
body.look-on .ascolo-lineup-item .btn a:hover{background:var(--lk-main-deep);color:#fff!important}

/* カードの絵：PC は左に小さく（2026-11-10） */
body.look-on .ascolo-lineup-item .thumb{flex:0 0 190px;align-self:flex-start;display:block;border-radius:4px;overflow:hidden;line-height:0}
body.look-on .ascolo-lineup-item .thumb img{width:100%;height:auto;aspect-ratio:1400/880;object-fit:cover;display:block}

/* 背景なしの絵（?cardimg=layer。比べるとき用）：絵を切らずに枠の中に収める */
body.look-on .ascolo-lineup-item.thumb-layer .thumb{border-radius:0}
body.look-on .ascolo-lineup-item.thumb-layer .thumb img{object-fit:contain}

/* 「ここまで無料／ここから有料」の線は、トップの階段（build.css .ascolo-kaidan-line）と同じ */
body.look-on .ascolo-lineup .ascolo-kaidan-line{margin:4px 0!important}

/* 階段の外：そのほか。小さいカード（絵＋名前＋一言）を横に4つ・スマホは2つずつ。階段のカードより目立たない大きさ（2026-11-11 きーぼー Q6） */
body.look-on .ascolo-lineup-other{margin-top:8px!important;padding-top:24px;border-top:1px solid var(--lk-line);text-align:center}
body.look-on .ascolo-lineup-other .tag{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--lk-main);border:1px solid var(--lk-line-strong);border-radius:3px;padding:0 8px;line-height:1.8;margin:0 0 14px!important}
body.look-on .ascolo-lineup-other ul{list-style:none!important;margin:0!important;padding:0!important;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
body.look-on .ascolo-lineup-other li{margin:0!important;padding:0!important;list-style:none!important}
body.look-on .ascolo-lineup-other li::before{display:none!important;content:none!important}
body.look-on .ascolo-lineup-other a{display:flex;flex-direction:column;align-items:center;gap:4px;height:100%;box-sizing:border-box;padding:12px 10px 14px;background:var(--lk-paper);border:1px solid var(--lk-line);border-radius:6px;text-decoration:none!important;transition:border-color .2s}
body.look-on .ascolo-lineup-other a:hover{border-color:var(--lk-main)}
body.look-on .ascolo-lineup-other .pic{display:block;width:100%;aspect-ratio:16/10;border-radius:4px;overflow:hidden;line-height:0;margin-bottom:6px;background:#0a2d59}
body.look-on .ascolo-lineup-other .pic img{width:100%;height:100%;object-fit:cover;display:block}
/* アプリのアイコン（正方形）は切らずに、紺の地の真ん中に */
body.look-on .ascolo-lineup-other .pic.is-icon{display:flex;align-items:center;justify-content:center}
body.look-on .ascolo-lineup-other .pic.is-icon img{width:auto;height:100%;object-fit:contain}
body.look-on .ascolo-lineup-other .name{font-size:14.5px;font-weight:700;color:var(--lk-main-deep);line-height:1.5}
body.look-on .ascolo-lineup-other .ext{font-size:11px;margin-left:3px;color:var(--lk-main);font-weight:500}
body.look-on .ascolo-lineup-other .one{font-size:12px;line-height:1.6;color:var(--lk-muted)}
@media (max-width:767px){
  body.look-on .ascolo-lineup-other ul{grid-template-columns:repeat(2,1fr);gap:10px}
  body.look-on .ascolo-lineup-other a{padding:10px 8px 12px}
  body.look-on .ascolo-lineup-other .name{font-size:13.5px}
  body.look-on .ascolo-lineup-other .one{font-size:11.5px}
}

/* 各カードの「こんな方におすすめ」：線の枠ではなく、薄い色の地で囲む（2026-11-11 きーぼー Q5。白い箱を増やさない） */
body.look-on .ascolo-lineup-item .for-box{margin-top:14px;padding:12px 16px 12px;background:rgba(20,85,168,.06);border-radius:6px}
body.look-on .ascolo-lineup-item .for-box .for-title{margin-top:0!important}

/* 一番下の診断：すぐ上のよくあるご質問との間をあける（2026-11-11 きーぼー b2） */
body.look-on .ascolo-lineup-end{margin-top:64px}
@media (max-width:767px){ body.look-on .ascolo-lineup-end{margin-top:44px} }

@media (max-width:767px){
  body.look-on .ascolo-lineup br.sp{display:inline}
  body.look-on .ascolo-lineup{margin:0 auto 50px}
  body.look-on .ascolo-lineup-step{padding:22px 0}
  body.look-on .ascolo-lineup-head{margin-bottom:14px}
  body.look-on .ascolo-lineup-head .name{font-size:20px}
  body.look-on .ascolo-lineup-head .desc{flex-basis:100%}
  body.look-on .ascolo-lineup-item{flex-direction:column;gap:14px;padding:20px 18px}
  body.look-on .ascolo-lineup-item .title{font-size:17px}
  body.look-on .ascolo-lineup-item .side{flex:none;padding:14px 0 0;border-left:0;border-top:1px solid var(--lk-line)}
  /* スマホは絵をカードの上に横長で（高さを抑えるため 2:1 に切る） */
  body.look-on .ascolo-lineup-item .thumb{flex:none;align-self:stretch;margin:-20px -18px 0;border-radius:6px 6px 0 0}
  body.look-on .ascolo-lineup-item .thumb img{aspect-ratio:2/1}
  body.look-on .ascolo-lineup-item.thumb-layer .thumb{margin:0 0 -4px}
  body.look-on .ascolo-lineup-item.thumb-layer .thumb img{height:150px;aspect-ratio:auto}
}
/* 1051〜1250px：カードの中が狭くなるので、絵を少し小さく */
@media (min-width:768px) and (max-width:1100px){
  body.look-on .ascolo-lineup-item .thumb{flex-basis:150px}
}

/* 目的から選ぶ（2026-11-10。試し。?goal=off で外した形） */
body.look-on .ascolo-lineup-goal{margin:0 0 34px;padding:22px 24px 24px;background:var(--lk-paper);border:1px solid var(--lk-line);border-radius:6px}
body.look-on .ascolo-lineup-goal .goal-title{text-align:center;font-size:15px;font-weight:700;color:var(--lk-main-deep);letter-spacing:.1em;margin-bottom:14px!important}
body.look-on .ascolo-lineup-goal ul{list-style:none;margin:0!important;padding:0!important;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
body.look-on .ascolo-lineup-goal li{margin:0!important;list-style:none}
body.look-on .ascolo-lineup-goal li::before{display:none!important;content:none!important}
body.look-on .ascolo-lineup-goal a{position:relative;display:flex;flex-direction:column;gap:4px;height:100%;box-sizing:border-box;padding:12px 30px 12px 14px;background:#fff;border:1px solid var(--lk-line);border-radius:6px;text-decoration:none!important;transition:border-color .2s,background .2s}
body.look-on .ascolo-lineup-goal a::after{content:"↓";position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--lk-main);font-size:14px}
body.look-on .ascolo-lineup-goal a:hover{border-color:var(--lk-main-deep)}
body.look-on .ascolo-lineup-goal .want{font-size:14.5px;font-weight:700;line-height:1.6;color:var(--lk-ink)}
body.look-on .ascolo-lineup-goal .to{font-size:12.5px;line-height:1.5;color:var(--lk-main)}
body.look-on .ascolo-lineup-item[id]{scroll-margin-top:110px}
html:has(body.look-on .ascolo-lineup-goal){scroll-behavior:smooth}
@media (max-width:900px){ body.look-on .ascolo-lineup-goal ul{grid-template-columns:repeat(2,1fr)} }
@media (max-width:600px){
  body.look-on .ascolo-lineup-goal{padding:18px 14px}
  body.look-on .ascolo-lineup-goal ul{grid-template-columns:1fr;gap:8px}
  body.look-on .ascolo-lineup-item[id]{scroll-margin-top:76px}
}
/* 2つに分かれる行き先（きくやん・ナビるやん：Lite とふつう） */
body.look-on .ascolo-lineup-goal li.split .goal-box{display:flex;flex-direction:column;gap:8px;height:100%;box-sizing:border-box;padding:12px 14px;background:#fff;border:1px solid var(--lk-line);border-radius:6px}
body.look-on .ascolo-lineup-goal .to-split{display:flex;flex-direction:column;gap:6px}
body.look-on .ascolo-lineup-goal .to-split a{flex-direction:row;align-items:baseline;flex-wrap:wrap;gap:2px 10px;padding:7px 28px 7px 10px;background:var(--lk-paper);border-color:var(--lk-line);height:auto}
body.look-on .ascolo-lineup-goal .to-split .how{font-size:12.5px;font-weight:700;color:var(--lk-ink);line-height:1.5}
body.look-on .ascolo-lineup-goal .to-split a::after{right:10px}
body.look-on .ascolo-lineup-goal .to-split a{flex-direction:column;align-items:flex-start;gap:1px}
body.look-on .ascolo-lineup-goal li:not(.split) > a::after{top:14px;transform:none}
body.look-on .ascolo-lineup-goal .to-split a::after{top:50%;transform:translateY(-50%)}
/* PC：上の段に行き先1つの4つ、下の段に分かれる2つ（行き先は横並び）。高さをそろえて空きを作らない */
@media (min-width:601px){
  body.look-on .ascolo-lineup-goal ul{grid-template-columns:repeat(4,1fr)}
  body.look-on .ascolo-lineup-goal li.split{grid-column:span 2;order:1}
  body.look-on .ascolo-lineup-goal .to-split{flex-direction:row}
  body.look-on .ascolo-lineup-goal .to-split a{flex:1 1 0;min-width:0}
}
@media (min-width:601px) and (max-width:900px){
  body.look-on .ascolo-lineup-goal ul{grid-template-columns:repeat(2,1fr)}
}

/* 2回目の直し（2026-11-11 昼 きーぼー s3）：セミナーのサブタイトル・「そのほか」の説明と真ん中寄せ */
body.look-on .ascolo-lineup-item .sub{font-size:14px;font-weight:700;color:var(--lk-main);line-height:1.5;margin-top:2px!important}
body.look-on .ascolo-lineup-other a{text-align:center}
body.look-on .ascolo-lineup-other .name, body.look-on .ascolo-lineup-other .one{text-align:center;justify-content:center}
body.look-on .ascolo-lineup-other .about{display:block;font-size:12px;line-height:1.7;color:var(--lk-ink);text-align:left;margin-top:4px}
@media (max-width:767px){ body.look-on .ascolo-lineup-other .about{font-size:11.5px} }
body.look-on .ascolo-lineup-item .price .coupon{font-size:13px;letter-spacing:0;white-space:nowrap}
/* 値段の欄：APDEL の「（教科書をご購入いただいた方は59,800円）」を1行に収めるため、少し広げる（2026-11-11 昼 きーぼー u1） */
@media (min-width:768px){ body.look-on .ascolo-lineup-item .side{flex-basis:290px} }