/* あすコロの組み上げ（2026-11-09〜。TODO-0048）。トップの一番上より後に組んだ所。
   色は june.css の変数（--lk-*）を使う。押す所だけオレンジ（--lk-cta） */

/* ---------- 差し替えの印（TODO-0160 で言葉を直す所）：?swap=1 のときだけ点線の枠 ---------- */
body.show-swap .ascolo-swap{outline:2px dashed #d0021b!important;outline-offset:4px;position:relative}
body.show-swap .ascolo-swap::before{
  content:"差し替え：TODO-0160";position:absolute;top:-12px;left:0;z-index:5;
  background:#d0021b;color:#fff;font-size:11px;line-height:1;padding:3px 6px;border-radius:2px;letter-spacing:.04em;
}

/* ---------- ロゴ：今のマーク＋丸ゴシックの文字（2026-11-09 決定） ---------- */
/* ロゴの画像（マーク＋文字の1枚）の左の正方形だけを見せ、文字は字体で組む。本番でも新しい画像は要らない */
body.look-on.logo-mark #header_logo .logo a{flex-direction:row!important;align-items:center!important;gap:10px;text-decoration:none}
body.look-on.logo-mark #header_logo img{
  width:50px!important;height:54px!important;max-height:none!important;margin:0!important;
  object-fit:cover;object-position:0 50%;flex:0 0 auto;
}
body.look-on.logo-mark #header_logo .logo a::after{
  content:"あすとろサイコロ";font-family:var(--lk-sans);font-weight:700;font-size:23px;letter-spacing:.06em;
  color:var(--lk-main-deep);white-space:nowrap;line-height:1;
}
body.look-on.logo-mark #header_logo .logo a:hover::after{color:var(--lk-main)}

/* ---------- ヘッダーの並び（PC）：ロゴ｜メニュー6つ｜右端のボタン ---------- */
@media (min-width:1252px){
  body.look-on #header_bottom_inner{
    width:auto!important;max-width:1280px;padding:0 28px;box-sizing:border-box;
    display:flex;align-items:center;justify-content:space-between;gap:20px;
  }
  body.look-on #header_logo{position:static!important;transform:none!important;height:80px;flex:0 0 auto}
  body.look-on #global_menu{flex:0 1 auto}
  body.look-on #global_menu > ul{display:flex;align-items:center;justify-content:flex-end}
  /* SNS のアイコンは、メニューの幅を取るので外す（フッターに SNS の案内がある） */
  body.look-on #header_sns{display:none!important}
}

/* メニューの項目：大きい字（動詞）＋小さい字（中身） */
body.look-on #global_menu > ul > li > a{
  height:80px!important;line-height:1.25!important;padding:0 14px!important;
  display:flex!important;flex-direction:column;justify-content:center;align-items:center;gap:4px;
  letter-spacing:.06em!important;
}
body.look-on #global_menu .menu-main{font-size:15.5px;font-weight:700;color:var(--lk-main-deep);letter-spacing:.06em}
body.look-on #global_menu .menu-sub{font-size:11px;font-weight:500;color:var(--lk-muted);letter-spacing:.04em;white-space:nowrap}
body.look-on #global_menu > ul > li > a:hover .menu-main,
body.look-on #global_menu > ul > li.active_button > a .menu-main{color:var(--lk-main)}
/* 今いるページの印：小さな下線 */
body.look-on #global_menu > ul > li.current-menu-item:not(.menu-cta) > a::after,
body.look-on #global_menu > ul > li.current-menu-ancestor > a::after{
  content:"";position:absolute;left:50%;bottom:14px;width:22px;height:2px;background:var(--lk-main);transform:translateX(-50%);
}

/* 開くメニュー：濃い紺の地。右の方の項目は、右にそろえて開く（画面の外にはみ出さないように） */
body.look-on #global_menu ul ul{min-width:290px;box-shadow:0 10px 24px rgba(10,45,89,.18)}
body.look-on #global_menu ul ul a{font-size:14px!important;padding:13px 18px 12px!important;border-bottom:1px solid rgba(245,241,232,.12)}
body.look-on #global_menu ul ul a:hover{background:var(--lk-main)!important}
body.look-on #global_menu ul ul li.menu-all a{font-size:13px!important;color:var(--lk-gold)!important}
body.look-on #global_menu > ul > li:nth-last-child(-n+3) > ul{left:auto!important;right:0}

/* 右端のボタン（オレンジ。ヘッダーの中で1つだけ） */
body.look-on #global_menu > ul > li.menu-cta{margin-left:12px}
body.look-on #global_menu > ul > li.menu-cta > a{
  height:auto!important;padding:12px 20px!important;border-radius:6px;background:var(--lk-cta)!important;
  box-shadow:0 2px 0 #c45500;flex-direction:row;
}
body.look-on #global_menu > ul > li.menu-cta > a,
body.look-on #global_menu > ul > li.menu-cta > a:hover{color:#fff!important;font-size:14.5px!important;font-weight:700!important;letter-spacing:.08em!important}
body.look-on #global_menu > ul > li.menu-cta > a:hover{filter:brightness(1.06)}

/* PC の幅が狭いとき（1252〜1320px。テーマは 1251px 以下で引き出しのメニューに切り替わる。2026-11-10 に境目を直した）：字と余白を少し詰める */
@media (min-width:1252px) and (max-width:1320px){
  body.look-on #header_bottom_inner{padding:0 18px;gap:12px}
  body.look-on.logo-mark #header_logo img{width:43px!important;height:46px!important}
  body.look-on.logo-mark #header_logo .logo a::after{font-size:19px}
  body.look-on #global_menu > ul > li > a{padding:0 9px!important}
  body.look-on #global_menu .menu-main{font-size:14px}
  body.look-on #global_menu .menu-sub{font-size:10px}
  body.look-on #global_menu > ul > li.menu-cta{margin-left:6px}
  body.look-on #global_menu > ul > li.menu-cta > a{padding:11px 14px!important;font-size:13.5px!important}
}

/* ---------- スマホ・タブレット（〜1050px。テーマがメニューを右から出る引き出しに切り替える） ---------- */
@media (max-width:1251px){
  body.look-on.logo-mark #header_logo .logo a{gap:8px}
  body.look-on.logo-mark #header_logo img{width:39px!important;height:42px!important;position:static!important;transform:none!important}
  body.look-on.logo-mark #header_logo .logo a::after{font-size:19px}

  body.look-on #drawer_menu{background:var(--lk-main-deep)!important}
  body.look-on #mobile_menu a{
    color:var(--lk-on-dark)!important;background:transparent!important;font-family:var(--lk-sans)!important;
    border-bottom:1px solid rgba(245,241,232,.14)!important;
  }
  body.look-on #mobile_menu .menu-main{font-size:16px;font-weight:700;letter-spacing:.06em}
  body.look-on #mobile_menu .menu-sub{font-size:12px;color:rgba(245,241,232,.7);margin-left:10px;letter-spacing:.02em}
  body.look-on #mobile_menu ul ul a{font-size:14px!important;background:rgba(0,0,0,.14)!important}
  body.look-on #mobile_menu li.menu-all a{color:var(--lk-gold)!important}
  body.look-on #mobile_menu .child_menu_button .icon:before{color:var(--lk-on-dark)!important;border-color:rgba(245,241,232,.5)!important}
  body.look-on #drawer_menu #footer_search{background:rgba(245,241,232,.08)!important;border:1px solid rgba(245,241,232,.35);border-radius:6px}
  body.look-on #mobile_menu li.menu-cta{padding:22px 20px 26px}
  body.look-on #mobile_menu li.menu-cta > a{
    background:var(--lk-cta)!important;color:#fff!important;border:0!important;border-radius:6px;text-align:center;
    font-weight:700;letter-spacing:.08em;box-shadow:0 2px 0 #c45500;padding:15px 10px!important;
  }
}

/* ---------- フッター（新しいメニュー12項目。PC では2行に折り返す） ---------- */
@media (min-width:1051px){
  body.look-on #footer_bottom{height:auto!important;padding:22px 150px 22px 0;box-sizing:border-box}
  body.look-on #footer_menu li{margin:0 13px!important}
  body.look-on #footer_menu li a{height:auto!important;line-height:2.4!important}
  body.look-on #footer_bottom #footer_sns, body.look-on #footer_bottom .footer_sns{top:50%!important;transform:translateY(-50%)}
}

/* ======================================================================
   トップの一番上より下（[ascolo_top]。2026-11-09）
   ====================================================================== */
body.look-on .ascolo-top br.sp{display:none}
@media (max-width:767px){
  body.look-on .ascolo-top br.pc{display:none}
  body.look-on .ascolo-top br.sp{display:inline}
}
body.look-on .ascolo-top{max-width:1000px;margin:0 auto}
body.look-on .ascolo-top p{margin:0}

/* 診断の入力：見出しを大きく。ボタンはオレンジ（この画面の主役） */
body.look-on .ascolo-top-shindan .nls-tph{padding:44px 24px!important}
body.look-on .ascolo-top-shindan .nls-tph-eyebrow{font-size:13px!important;letter-spacing:.12em!important}
body.look-on .ascolo-top-shindan .nls-tph-title{font-size:clamp(23px,2.6vw,30px)!important;font-weight:700!important;letter-spacing:.06em;margin:10px 0 14px!important;line-height:1.5!important}
body.look-on .ascolo-top-shindan .nls-tph-sub{font-size:15px!important;line-height:1.95!important;color:var(--lk-on-dark)!important;opacity:.92}
body.look-on .ascolo-top-shindan .nls-tph-btn{font-size:17px!important;font-weight:700!important;padding:15px 40px!important;border-radius:6px!important;box-shadow:0 2px 0 #c45500!important}

/* こんな気持ち */
body.look-on .ascolo-top-kimochi .pain-list{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:920px;margin:0 auto}
body.look-on .ascolo-top-kimochi .pain-item{padding:20px 22px!important;font-size:15.5px;line-height:1.9;margin:0!important}
body.look-on .ascolo-top-close{margin:0 0 14px!important}
@media (max-width:767px){
  body.look-on .ascolo-top-kimochi .pain-list{grid-template-columns:1fr;gap:10px}
  body.look-on .ascolo-top-kimochi .pain-item{font-size:15px;padding:16px 18px!important}
}

/* あすとろサイコロとは＋3D のきーぼー */
/* 版8：絵は「誰やねん」へ移し、ここは締めと同じ幅の1列の文にする */
body.look-on .ascolo-about{max-width:760px;margin:0 auto 64px;text-align:center}
/* 締めから「場所です」までは中央寄せ（2026-11-09 きーぼー） */
body.look-on .ascolo-about-body p{text-align:center}
body.look-on .ascolo-about-body p{font-size:16.5px;line-height:2.05;margin:0 0 14px!important;color:var(--lk-ink)}
body.look-on .ascolo-about-body .ascolo-about-lead{font-size:clamp(20px,2vw,24px);font-weight:700;line-height:1.7;color:var(--lk-main-deep);margin-bottom:22px!important}
body.look-on .ascolo-about-body .ascolo-about-last{font-weight:700;color:var(--lk-main-deep);margin-top:22px!important}
body.look-on .ascolo-about-body p + .ascolo-about-lead{margin-top:26px!important;margin-bottom:0!important}
body.look-on .ascolo-kiibo-who{text-align:center;margin:0 0 28px!important;padding-top:44px;border-top:1px solid var(--lk-line)}
body.look-on .ascolo-kiibo-who p{font-size:clamp(18px,1.8vw,21px);font-weight:700;line-height:1.8;color:var(--lk-main-deep);margin:0!important}
body.look-on .ascolo-kiibo-who-img{max-width:300px;margin:0 auto 14px}
body.look-on .ascolo-kiibo-who p.ascolo-kiibo-name{margin:0 0 22px!important;line-height:1.4}
body.look-on .ascolo-kiibo-name .name{display:block;font-size:clamp(24px,2.4vw,30px);font-weight:700;color:var(--lk-main-deep);letter-spacing:.08em}
body.look-on .ascolo-kiibo-name .role{display:block;margin-top:6px;font-size:14px;font-weight:500;color:var(--lk-muted);letter-spacing:.06em}
body.look-on .ascolo-kiibo-who-img img{width:100%;height:auto;display:block}
body.look-on .ascolo-top-kiibo .tb-section{background:transparent!important;padding:0!important}
@media (max-width:767px){
  body.look-on .ascolo-about{margin-bottom:44px}
  body.look-on .ascolo-kiibo-who-img{max-width:240px}
  body.look-on .ascolo-about-body p{font-size:15.5px}
  body.look-on .ascolo-kiibo-who{padding-top:34px}
  body.look-on .ascolo-kiibo-who p{font-size:17px}
}

/* あすコロの使い方（階段） */
body.look-on .ascolo-kaidan-lead{text-align:center;color:var(--lk-muted);font-size:15px;margin-bottom:34px!important}
body.look-on ol.ascolo-kaidan{list-style:none;margin:0;padding:0;counter-reset:none}
body.look-on .ascolo-kaidan-step{display:grid;grid-template-columns:230px minmax(0,1fr);gap:24px;padding:24px 0;border-top:1px solid var(--lk-line);margin:0!important}
body.look-on .ascolo-kaidan-step::before{display:none!important}
body.look-on .ascolo-kaidan-head{display:grid;grid-template-columns:44px 1fr;column-gap:12px;align-content:start}
body.look-on .ascolo-kaidan-head .num{grid-row:span 2;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}
body.look-on .ascolo-kaidan-head .name{font-size:21px;font-weight:700;color:var(--lk-main-deep);line-height:1.3}
body.look-on .ascolo-kaidan-head .desc{font-size:13.5px;color:var(--lk-muted);line-height:1.6;margin-top:4px}
body.look-on .ascolo-kaidan-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
body.look-on a.ascolo-kaidan-item{position:relative;display:flex;flex-direction:column;gap:6px;padding:18px 18px 16px;background:var(--lk-paper);border:1px solid var(--lk-line);border-radius:6px;text-decoration:none!important;color:var(--lk-ink)!important;transition:border-color .2s,box-shadow .2s}
body.look-on a.ascolo-kaidan-item:hover{border-color:var(--lk-main);box-shadow:0 4px 14px rgba(10,45,89,.08)}
body.look-on .ascolo-kaidan-item .badge{align-self:flex-start;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}
body.look-on .ascolo-kaidan-item .title{font-size:16.5px;font-weight:700;color:var(--lk-main-deep);line-height:1.5}
body.look-on .ascolo-kaidan-item .note{font-size:13.5px;line-height:1.75;color:var(--lk-muted)}
body.look-on .ascolo-kaidan-item .price{font-size:14px;font-weight:700;color:var(--lk-ink);margin-top:auto;padding-top:6px}
body.look-on .ascolo-kaidan-item .more{font-size:13px;color:var(--lk-main);font-weight:700}
body.look-on .ascolo-kaidan-item .more::after{content:" →"}
/* ここまで無料・ここから有料の線 */
body.look-on .ascolo-kaidan-line{display:flex;justify-content:center;gap:0;position:relative;margin:8px 0!important;padding:0!important;height:34px;align-items:center}
body.look-on ol.ascolo-kaidan > li::before, body.look-on ol.ascolo-kaidan > li::after{display:none!important;content:none!important}
body.look-on .ascolo-kaidan-line{background:repeating-linear-gradient(90deg,#c9a85a 0 8px,transparent 8px 14px) center/100% 2px no-repeat}
body.look-on .ascolo-kaidan-line span{position:relative;background:var(--lk-bg);font-size:12.5px;font-weight:700;letter-spacing:.08em;color:var(--lk-muted);padding:0 12px}
body.look-on .ascolo-kaidan-line span:first-child::after{content:"↑";margin-left:4px}
body.look-on .ascolo-kaidan-line span:last-child::after{content:"↓";margin-left:4px}
body.look-on .ascolo-kaidan-all{text-align:center;margin-top:30px!important;border-top:1px solid var(--lk-line);padding-top:26px}
body.look-on .ascolo-kaidan-all a{font-weight:700}
@media (max-width:767px){
  body.look-on .ascolo-kaidan-step{grid-template-columns:1fr;gap:14px;padding:20px 0}
  body.look-on .ascolo-kaidan-items{grid-template-columns:1fr;gap:10px}
}

/* ブログの新着：3つの束 */
body.look-on .ascolo-blog-bundles{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:16px}
body.look-on .ascolo-blog-bundles a{display:inline-block;padding:7px 16px;border:1px solid var(--lk-line-strong);border-radius:999px;font-size:13.5px;color:var(--lk-main-deep)!important;text-decoration:none!important;background:#fff}
body.look-on .ascolo-blog-bundles a:hover{border-color:var(--lk-main);color:var(--lk-main)!important}
body.look-on .index_post_slider .cb_desc br{display:block}

/* よくある疑問 */
body.look-on .ascolo-top-faq .faq-list{max-width:900px;margin:0 auto}
body.look-on .ascolo-top-faq .faq-q{font-weight:700;color:var(--lk-main-deep)}

/* いちばん下の診断の案内 */
body.look-on .ascolo-top-shindan_end{text-align:center}
body.look-on .ascolo-end-msg{font-size:clamp(18px,1.8vw,21px);font-weight:700;line-height:1.85;color:var(--lk-main-deep);margin:0 0 18px!important}
body.look-on .ascolo-end-lead{font-size:14px;color:var(--lk-muted);margin-bottom:16px!important}
body.look-on .ascolo-end-btn a{display:inline-block;background:var(--lk-cta);color:#fff!important;font-weight:700;font-size:17px;letter-spacing:.08em;padding:15px 44px;border-radius:6px;box-shadow:0 2px 0 #c45500;text-decoration:none!important}
@media (max-width:767px){ body.look-on .ascolo-end-btn a{display:block;font-size:16px;letter-spacing:.02em;padding:15px 12px} }

/* 主役でないボタン（ブログ・お客様の声）は紺。オレンジは診断のボタンだけ */
body.look-on .index_post_slider .link_button a, body.look-on .index_post_slider a[class^="button_animation"],
body.look-on a.footer-banner-cta{
  background:transparent!important;color:var(--lk-main-deep)!important;border:1.5px solid var(--lk-main-deep)!important;border-radius:6px!important;
  box-shadow:none!important;font-weight:700!important;letter-spacing:.08em;
}
/* お客様の声（固定ページ共通の部品 id 40）のボタンは、部品の CSS が古い字体（Kosugi Maru）を決め打ちしている（2026-11-10 きーぼー「フォントファミリーが違う」）。トップだけでなく全部のページで紺の枠に */
body.look-on a.footer-banner-cta{font-family:var(--lk-sans)!important}
body.look-on .index_post_slider .link_button a:hover, body.look-on .index_post_slider a[class^="button_animation"]:hover,
body.look-on a.footer-banner-cta:hover{background:var(--lk-main-deep)!important;color:#fff!important}

/* 階段：カードの中を「名前と説明」「値段とリンク」に分ける。1枚だけの段（知る・受け取る・続ける）は、PC では横に長い1枚にして右を空けない */
body.look-on .ascolo-kaidan-item .main, body.look-on .ascolo-kaidan-item .side{display:flex;flex-direction:column;gap:6px}
body.look-on .ascolo-kaidan-item .main{flex:1 1 auto}
body.look-on .ascolo-kaidan-item .side{margin-top:auto}
@media (min-width:768px){
  body.look-on .ascolo-kaidan-items.single{grid-template-columns:1fr}
  body.look-on .ascolo-kaidan-items.single a.ascolo-kaidan-item{flex-direction:row;align-items:center;gap:28px;padding:20px 24px}
  body.look-on .ascolo-kaidan-items.single .ascolo-kaidan-item .badge{position:absolute;top:-10px;left:24px}
  body.look-on .ascolo-kaidan-items.single .ascolo-kaidan-item .side{flex:0 0 240px;margin-top:0;padding-left:24px;border-left:1px solid var(--lk-line);align-self:stretch;justify-content:center}
  body.look-on .ascolo-kaidan-items.single .ascolo-kaidan-item .price{padding-top:0;margin-top:0}
}

/* 文節の塊（[ascolo_top] の .nw）：塊の中では折らず、塊の切れ目でだけ折る（2026-11-09 きーぼー「言葉の切れ目の変なところで改行されている」） */
body.look-on .nw{display:inline-block}

/* ロゴ：名前の下に小さく ascolo.jp（2026-11-09 きーぼー） */
body.look-on.logo-mark #header_logo .logo a{display:grid!important;grid-template-columns:auto auto;grid-template-rows:auto auto;column-gap:10px;row-gap:4px;align-content:center;justify-content:start}
body.look-on.logo-mark #header_logo .logo a img{grid-column:1;grid-row:1 / 3;align-self:center}
body.look-on.logo-mark #header_logo .logo a::after{grid-column:2;grid-row:1;align-self:end}
body.look-on.logo-mark #header_logo .logo a::before{
  content:"ascolo.jp";grid-column:2;grid-row:2;align-self:start;
  font-family:var(--lk-sans);font-weight:500;font-size:11px;letter-spacing:.2em;color:var(--lk-muted);line-height:1;text-transform:none!important;
}
@media (max-width:1251px){
  body.look-on.logo-mark #header_logo .logo a{column-gap:8px;row-gap:3px}
  body.look-on.logo-mark #header_logo .logo a::before{font-size:10px;letter-spacing:.16em}
}

/* スマホ：きーぼーのプロフィールの文は左寄せ（真ん中寄せだと長い文が読みにくい） */
@media (max-width:767px){
  body.look-on .ascolo-top-kiibo .nls-profile-full-body p{text-align:left!important}
}

/* ======================================================================
   診断の結果のあと（/lineup/type-test/。type_test.php。2026-11-09）
   主役1つ（オレンジ）＋目的別の道3つ（紺の枠。オレンジにしない）
   ====================================================================== */
body.look-on .nls-shindan br.sp{display:none}
@media (max-width:767px){
  body.look-on .nls-shindan br.pc{display:none}
  body.look-on .nls-shindan br.sp{display:inline}
}
body.look-on.show-swap .ascolo-swap-inline{outline:2px dashed #d0021b;outline-offset:2px}

/* 2-4：診断の説明に足す一段小さい字の1行 */
body.look-on .nls-shindan-intro p.ascolo-tt-note{font-size:13.5px!important;line-height:1.9!important;color:var(--lk-muted)!important;border-left:3px solid var(--lk-gold);padding:4px 0 4px 14px!important;margin:6px 0 18px!important;text-align:left}

/* 2-1：橋渡しの文 */
body.look-on .ascolo-tt-bridge{max-width:720px;margin:44px auto 26px;text-align:center}
body.look-on .ascolo-tt-bridge p{font-size:16.5px;line-height:2;color:var(--lk-ink);margin:0 0 12px!important}
body.look-on .ascolo-tt-bridge p.ascolo-tt-q{font-size:18px;font-weight:700;color:var(--lk-main-deep);margin:22px 0 18px!important}
body.look-on .ascolo-tt-sun, body.look-on .ascolo-tt-moon{white-space:nowrap}

/* 2-2：主役 */
body.look-on .ascolo-tt-main{max-width:720px;margin:0 auto 40px;background:var(--lk-paper);border:1px solid var(--lk-line);border-top:4px solid var(--lk-cta);border-radius:8px;padding:30px 32px 32px;text-align:center;box-shadow:0 6px 20px rgba(10,45,89,.07)}
body.look-on .ascolo-tt-main p{margin:0!important}
body.look-on .ascolo-tt-main .ascolo-tt-label{display:inline-block;font-size:12.5px!important;font-weight:700;letter-spacing:.08em;background:var(--lk-main-deep);color:var(--lk-gold)!important;padding:4px 12px;border-radius:3px;line-height:1.6!important}
body.look-on .ascolo-tt-eyebrow{font-size:13px;color:var(--lk-muted);line-height:1.8;margin-top:14px!important}
body.look-on .ascolo-tt-name{font-size:clamp(24px,2.6vw,30px);font-weight:700;color:var(--lk-main-deep);line-height:1.4;margin-top:6px!important}
body.look-on .ascolo-tt-books{display:block;font-size:17px;margin-top:6px;color:var(--lk-main)}
body.look-on .ascolo-tt-desc{font-size:15px;line-height:1.95;color:var(--lk-ink);margin-top:14px!important}
body.look-on .ascolo-tt-btn{margin-top:22px!important}
body.look-on .ascolo-tt-btn a{display:inline-block;background:var(--lk-cta);color:#fff!important;font-weight:700;font-size:17px;letter-spacing:.08em;padding:15px 48px;border-radius:6px;box-shadow:0 2px 0 #c45500;text-decoration:none!important}
body.look-on .ascolo-tt-btn a:hover{filter:brightness(1.06)}

/* 2-3：目的別の道。結果の枠（幅 約720px）の中なので、横長の行を縦に3つ（左：何をしたい人か／右：説明とリンク） */
body.look-on .ascolo-tt-paths{max-width:720px;margin:0 auto 20px;display:flex;flex-direction:column;gap:12px}
body.look-on .ascolo-tt-path{display:grid;grid-template-columns:210px minmax(0,1fr);column-gap:24px;background:#fff;border:1px solid var(--lk-line);border-radius:6px;padding:20px 24px;text-align:left}
body.look-on .ascolo-tt-path p{margin:0!important}
body.look-on .ascolo-tt-path-tag{grid-column:1;font-size:12px!important;font-weight:700;letter-spacing:.1em;color:var(--lk-main)!important}
body.look-on .ascolo-tt-path-head{grid-column:1;font-size:16.5px!important;font-weight:700;color:var(--lk-main-deep)!important;line-height:1.6!important;margin-top:4px!important}
body.look-on .ascolo-tt-path-desc, body.look-on .ascolo-tt-path-small, body.look-on .ascolo-tt-path-links{grid-column:2}
body.look-on .ascolo-tt-path-desc{grid-row:1 / 3;font-size:14px!important;line-height:1.85!important;color:var(--lk-ink)!important}
body.look-on .ascolo-tt-path-small{font-size:12px!important;color:var(--lk-muted)!important;margin-top:4px!important}
body.look-on .ascolo-tt-path-links{padding-top:12px;display:flex;flex-wrap:wrap;gap:8px}
body.look-on .ascolo-tt-path-links a{display:inline-block;border:1.5px solid var(--lk-main-deep);color:var(--lk-main-deep)!important;border-radius:6px;padding:8px 16px;font-size:13.5px;font-weight:700;text-decoration:none!important;background:transparent}
body.look-on .ascolo-tt-path-links a:hover{background:var(--lk-main-deep);color:#fff!important}
@media (max-width:767px){
  body.look-on .ascolo-tt-bridge{margin-top:34px;text-align:left;padding:0 4px}
  body.look-on .ascolo-tt-bridge p{font-size:15.5px}
  body.look-on .ascolo-tt-bridge p.ascolo-tt-q{font-size:16.5px}
  body.look-on .ascolo-tt-main{padding:24px 18px 24px}
  body.look-on .ascolo-tt-desc{font-size:14.5px}
  body.look-on .ascolo-tt-btn a{display:block;padding:15px 10px}
  body.look-on .ascolo-tt-path{grid-template-columns:1fr;padding:18px 18px}
  body.look-on .ascolo-tt-path-tag, body.look-on .ascolo-tt-path-head, body.look-on .ascolo-tt-path-desc, body.look-on .ascolo-tt-path-small, body.look-on .ascolo-tt-path-links{grid-column:1;grid-row:auto}
  body.look-on .ascolo-tt-path-desc{margin-top:8px!important}
  body.look-on .ascolo-tt-path-links a{flex:1 1 auto;text-align:center}
}

/* 版8（2026-11-09）：こんな気持ちの締め →「あすとろサイコロとは」を一続きに読ませる。間の段の余白を詰める。スマホでは 3D のきーぼーを文の後ろに */
body.look-on .cb_contents:has(.ascolo-top-kimochi){padding-bottom:20px!important}
body.look-on .cb_contents:has(.ascolo-top-kiibo){padding-top:24px!important}
/* FAQ と一番下の診断の案内のあいだを詰める（2026-11-09 きーぼー「余白が大きい」。前は 72px＋72px） */
body.look-on .cb_contents:has(.ascolo-top-faq){padding-bottom:0!important}
body.look-on .cb_contents:has(.ascolo-top-shindan_end){padding-top:8px!important}
@media (max-width:767px){
  body.look-on .cb_contents:has(.ascolo-top-faq){padding-bottom:16px!important}
  body.look-on .cb_contents:has(.ascolo-top-shindan_end){padding-top:28px!important}
}

/* ---------- 開くメニューの項目の一言（0.12.0。2026-11-09 きーぼー「項目名が短すぎてよくわからない」） ---------- */
body.look-on #global_menu ul ul a .menu-main{display:block;line-height:1.5;font-size:14px;font-weight:700;color:#fff;letter-spacing:.04em}
body.look-on #global_menu ul ul a:hover .menu-main{color:#fff}
body.look-on #global_menu ul ul a .menu-note{display:block;margin-top:3px;font-size:11.5px;font-weight:500;line-height:1.5;letter-spacing:.02em;color:rgba(245,241,232,.72)}
body.look-on #global_menu ul ul{min-width:390px}
body.look-on #global_menu ul ul a{height:auto!important;line-height:1.5!important}
@media (max-width:1251px){
  body.look-on #mobile_menu ul a .menu-main{display:block;line-height:1.5}
  body.look-on #mobile_menu ul a .menu-note{display:block;margin-top:2px;font-size:12px;font-weight:500;line-height:1.5;color:rgba(245,241,232,.7)}
  body.look-on #mobile_menu ul a{height:auto!important;line-height:1.5!important;padding-top:12px!important;padding-bottom:12px!important}
}
/* スマホの引き出しの一番上の段も、PC と同じ2段（名前の下に小さい字。2026-11-10 きーぼー「スマホも2行にできるとすごい見た目がスッキリする」） */
@media (max-width:1251px){
  body.look-on #mobile_menu > li > a .menu-main{display:block;line-height:1.45}
  body.look-on #mobile_menu > li > a .menu-sub{display:block;margin:3px 0 0;line-height:1.45}
  body.look-on #mobile_menu > li:not(.menu-cta) > a{height:auto!important;line-height:1.45!important;padding-top:13px!important;padding-bottom:13px!important}
}
/* スマホの引き出しの中の項目（開いたときに出るもの）は、上の段にぶら下がっているとわかる見た目に：
   背景を一段明るく・字下げ・左に金色の細い線・名前は一回り小さく（2026-11-10 きーぼー「読むの下にぶら下がってるものなのかよくわからない」） */
@media (max-width:1251px){
  body.look-on #mobile_menu ul.sub-menu, body.look-on #mobile_menu > li > ul{background:#1d3b68!important;box-shadow:inset 3px 0 0 var(--lk-gold)}
  body.look-on #mobile_menu ul ul a, body.look-on #mobile_menu > li > ul a{background:transparent!important;padding-left:38px!important;border-bottom-color:rgba(245,241,232,.10)!important}
  body.look-on #mobile_menu > li > ul a .menu-main{font-size:14.5px;font-weight:700}
  body.look-on #mobile_menu > li.open > a{border-bottom-color:transparent!important}
}

/* ---------- ブログの3つの束の帯（0.12.0。blog_bundle.php） ---------- */
body.look-on .ascolo-bundle-bar{margin:0 auto;padding:60px 20px 4px;max-width:1000px;box-sizing:border-box}
body.look-on .ascolo-bundle-now{margin:0 0 16px!important;text-align:center}
body.look-on .ascolo-bundle-now .name{display:block;font-size:24px;font-weight:700;color:var(--lk-main-deep);letter-spacing:.06em}
body.look-on .ascolo-bundle-now .desc{display:block;margin-top:4px;font-size:14px;color:var(--lk-muted)}
body.look-on .ascolo-bundle-bar ul{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0!important;padding:0!important;list-style:none!important}
body.look-on .ascolo-bundle-bar li{margin:0!important;padding:0!important;list-style:none!important}
body.look-on .ascolo-bundle-bar li::before{display:none!important}
body.look-on .ascolo-bundle-bar a{display:inline-block;padding:8px 18px;border:1px solid var(--lk-main);border-radius:999px;font-size:14px;font-weight:700;color:var(--lk-main)!important;text-decoration:none!important;background:#fff}
body.look-on .ascolo-bundle-bar li.on a{background:var(--lk-main-deep);border-color:var(--lk-main-deep);color:#fff!important}
@media (max-width:767px){
  body.look-on .ascolo-bundle-bar{padding:36px 16px 14px}
  body.look-on .ascolo-bundle-now .name{font-size:20px}
  body.look-on .ascolo-bundle-now .desc{font-size:13px}
  body.look-on .ascolo-bundle-bar a{padding:7px 14px;font-size:13px}
}

/* 学ぶの中の形の札（無料動画・PDF・動画講座など。ascolo-look.php の nav_menu_item_title） */
body.look-on .menu-main .menu-badge{display:inline-block;margin-left:8px;padding:1px 7px;border:1px solid var(--lk-gold);border-radius:3px;font-size:10.5px;font-weight:500;line-height:1.5;letter-spacing:.04em;color:var(--lk-gold);vertical-align:2px;white-space:nowrap}
body.look-on .menu-main .menu-badge.is-own-line{display:table;margin:4px 0 1px}

/* 右端のオレンジのボタンを2行に（大きい字「30秒で自分を知る」・小さい字「（無料性格タイプ診断）」。2026-11-10 きーぼー） */
body.look-on #global_menu > ul > li.menu-cta > a{flex-direction:column!important;justify-content:center;padding:8px 18px 9px!important;line-height:1.3!important}
body.look-on #global_menu > ul > li.menu-cta > a .menu-main{display:block;color:#fff;font-size:14.5px;letter-spacing:.06em}
body.look-on #global_menu > ul > li.menu-cta > a .menu-sub{display:block;margin-top:2px;color:rgba(255,255,255,.92)!important;font-size:10.5px!important;font-weight:500;letter-spacing:.02em}
@media (max-width:1251px){
  body.look-on #mobile_menu li.menu-cta > a .menu-main{display:block;font-size:16px}
  body.look-on #mobile_menu li.menu-cta > a .menu-sub{display:block;margin:4px 0 0!important;color:rgba(255,255,255,.92)!important;font-size:12px}
  body.look-on #mobile_menu li.menu-cta > a{padding:11px 10px 12px!important;line-height:1.4!important;height:auto!important}
}

/* トップのプロフィール：アプリの実績から後ろを「続きを読む」でたたむ（top.php。2026-11-10） */
body.look-on .ascolo-prof-more{margin:0 0 1em}
body.look-on .ascolo-prof-more > summary{list-style:none;cursor:pointer;display:inline-block;margin:.2em 0 .4em;color:#1455a8;font-weight:700;font-size:15px;border-bottom:1px solid currentColor;line-height:1.6}
body.look-on .ascolo-prof-more > summary::-webkit-details-marker{display:none}
body.look-on .ascolo-prof-more > summary::after{content:" ▼";font-size:.8em}
body.look-on .ascolo-prof-more[open] > summary::after{content:" ▲"}
body.look-on .ascolo-prof-more > summary .close{display:none}
body.look-on .ascolo-prof-more[open] > summary .open{display:none}
body.look-on .ascolo-prof-more[open] > summary .close{display:inline}

/* G：一番上のボタンの下の小さい字（js/top.js。2026-11-10） */
body.look-on #header_slider .ascolo-hero-cta{display:inline-flex;flex-direction:column;align-items:center;max-width:100%}
body.look-on #header_slider .ascolo-hero-note{text-align:center;margin:10px 0 0;font-size:13px;color:rgba(255,255,255,.85);letter-spacing:.05em;line-height:1.6}
@media (max-width:767px){
  body.look-on #header_slider .ascolo-hero-cta{display:flex;align-items:stretch}
  body.look-on #header_slider .ascolo-hero-note{font-size:12px;text-align:center}
}
/* F：よくある疑問の開け閉め（js/top.js が .is-acc を付けたときだけ。JS が動かないときは全部開いたまま） */
body.look-on .faq-list.is-acc .faq-q{cursor:pointer;position:relative;padding-right:44px}
body.look-on .faq-list.is-acc .faq-q::after{content:"＋";position:absolute;right:14px;top:50%;transform:translateY(-50%);font-size:18px;color:var(--lk-accent,#1455a8);font-weight:700}
body.look-on .faq-list.is-acc .faq-item.is-open .faq-q::after{content:"－"}
body.look-on .faq-list.is-acc .faq-item:not(.is-open) .faq-a{display:none}
body.look-on .faq-list.is-acc .faq-q:focus-visible{outline:2px solid var(--lk-accent,#1455a8);outline-offset:2px}

/* 古い字体の決め打ちを、新しい字体に（2026-11-10 きーぼー「記事の下の前の記事と後の記事の所、フォントファミリーが違う」）。
   サイトの追加 CSS（外観 → カスタマイズ）が Kosugi Maru を !important で付けている一覧（.title・.nav・button・input など）と、
   目次（#toc-n）・診断の入力・PMPro のフォームの決め打ちを、look=on のときだけ上書きする。追加 CSS そのものは書き換えない */
body.look-on :is(.rich_font,.rich_font_type1,.rich_font_type2,.rich_font_type3,.styled_h2,.styled_h3,.styled_h4,.custom_h5,.p-vertical,button,input,select,textarea,.well,.ez-toc-title-container,.post_content.clearfix,.nav,.title,.widget_headline,.rich_font_1,.rich_font_2,.styled_h3_product,.ac_title_class,.wpsm_panel-body,.wpcf7-form-control,[id^="toc-"],#text,.nls-form-input,.nls-tph-select,.nls-tph-btn,.nls-lineup-wrap,.pmpro_form,.pmpro_btn){font-family:var(--lk-sans)!important}

/* ---------- 2026-11-11 切り替えの前の直し（release/FIXES_20261111.md） ---------- */
/* トップ「すべての商品・サービスを見る」：「お客様の声をもっと見る」「あすコロ公式ブログを読む」と同じ紺の枠のボタンに（b1） */
body.look-on .ascolo-kaidan-all a.ascolo-btn-outline{display:inline-block;min-width:300px;box-sizing:border-box;text-align:center;background:transparent;color:var(--lk-main-deep)!important;border:1.5px solid var(--lk-main-deep);border-radius:6px;padding:17px 32px;font-size:15px;font-weight:700;letter-spacing:.08em;line-height:1.5;text-decoration:none!important;transition:background .2s,color .2s}
body.look-on .ascolo-kaidan-all a.ascolo-btn-outline:hover{background:var(--lk-main-deep);color:#fff!important}
@media (max-width:767px){ body.look-on .ascolo-kaidan-all a.ascolo-btn-outline{display:block;min-width:0;padding:14px 12px} }

/* マイページの札（Q4。ascolo-look.php）：PC はヘッダーの上の青い帯の右端、スマホは引き出しの一番下。四角い札の形で、押せるとわかるように */
body.look-on #header_top_inner{position:relative}
body.look-on #ascolo-mypage{position:absolute;right:312px;top:50%;transform:translateY(-50%);display:inline-block;padding:2px 12px;border:1px solid rgba(255,255,255,.75);border-radius:4px;font-size:12px;font-weight:700;letter-spacing:.08em;line-height:1.7;color:#fff!important;text-decoration:none!important;background:rgba(255,255,255,.08)}
body.look-on #ascolo-mypage::before{content:"";display:inline-block;width:.9em;height:.9em;margin-right:6px;vertical-align:-1px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='4.2'/%3E%3Cpath d='M3.5 21c0-4.7 3.8-7.6 8.5-7.6s8.5 2.9 8.5 7.6z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='4.2'/%3E%3Cpath d='M3.5 21c0-4.7 3.8-7.6 8.5-7.6s8.5 2.9 8.5 7.6z'/%3E%3C/svg%3E") center/contain no-repeat}
body.look-on #ascolo-mypage:hover{background:#fff;color:var(--lk-main-deep)!important}
@media (max-width:1251px){ body.look-on #ascolo-mypage{display:none} }
body.look-on #mobile_menu li.menu-mypage{padding:18px 20px 4px;border:0}
body.look-on #mobile_menu li.menu-mypage > a{display:block;padding:0!important;border:0!important;background:transparent!important;height:auto!important;line-height:1!important;text-align:center}
body.look-on #mobile_menu li.menu-mypage .ascolo-mypage-badge{display:inline-block;padding:9px 22px;border:1px solid rgba(245,241,232,.75);border-radius:4px;font-size:14px;font-weight:700;letter-spacing:.08em;line-height:1.5;color:var(--lk-on-dark)}

/* ブログの一覧：ヘッダーとボタンの間を狭め、ボタンと記事の一覧の間を広げる（2026-11-11 きーぼー b5・r4。テーマの本文の上の余白 100px に帯の上の 60px が重なっていた） */
body.look-on .ascolo-bundle-bar{margin-top:-50px;padding:0 20px 44px}
@media (max-width:767px){ body.look-on .ascolo-bundle-bar{margin-top:-20px;padding:0 16px 30px} }

/* 2回目の直し（2026-11-11 昼 きーぼー s1）：階段のセミナーのサブタイトル */
body.look-on .ascolo-kaidan-item .sub{font-size:13.5px;font-weight:700;color:var(--lk-main);line-height:1.5;margin-top:-4px}

/* マイページの札を右上の端に（2026-11-11 昼 きーぼー s2「位置は右上の端っこ」）。上の帯は flex なので、札を検索の欄の右の並びに入れる（絶対位置をやめる）。
   検索の欄はマウスを乗せると左に伸びる（テーマの作り）ので、札とは重ならない */
body.look-on #ascolo-mypage{position:static;transform:none;align-self:center;flex:0 0 auto;margin-left:14px}

/* よくある疑問の開け閉めを商品のページにも（2026-11-11 昼 きーぼー s5。js/faq.js が問い・答えに acc-q・acc-a を付ける） */
body.look-on .is-acc .acc-q{cursor:pointer;position:relative;padding-right:44px!important}
body.look-on .is-acc .acc-q::after{content:"＋";position:absolute;right:14px;top:50%;transform:translateY(-50%);font-size:18px;color:var(--lk-accent,#1455a8);font-weight:700}
body.look-on .is-acc .acc-item.is-open .acc-q::after{content:"－"}
body.look-on .is-acc .acc-item:not(.is-open) .acc-a{display:none!important}
body.look-on .is-acc .acc-q:focus-visible{outline:2px solid var(--lk-accent,#1455a8);outline-offset:2px}
body.look-on .ascolo-kaidan-item .price .coupon{font-size:12px;letter-spacing:0;white-space:nowrap}

/* マイページの札の追従（2026-11-11 昼 きーぼー u2）：スクロールして上の帯が消えたら（body.header_fix）、ヘッダーの右端のすぐ下にぶら下がる札を出す */
body.look-on #ascolo-mypage-fix{display:none}
body.look-on.header_fix #ascolo-mypage-fix{display:inline-block;position:absolute;right:0;top:100%;transform:none;margin:0;padding:3px 14px 4px;border:0;border-radius:0 0 6px 6px;background:var(--lk-main-deep);color:#fff!important;font-size:12px;box-shadow:0 3px 8px rgba(10,45,89,.18);z-index:5}
body.look-on.header_fix #ascolo-mypage-fix:hover{background:var(--lk-main);color:#fff!important}
@media (max-width:1251px){ body.look-on.header_fix #ascolo-mypage-fix{display:none} }
/* APDEL の「（教科書をご購入いただいた方は59,800円）」も1行に（2026-11-11 昼 きーぼー u1）：1枚だけの段の右の欄を少し広げる */
@media (min-width:768px){ body.look-on .ascolo-kaidan-items.single .ascolo-kaidan-item .side{flex-basis:290px} }
/* 診断の結果のあとの「受け取る」：表題・サブタイトル・説明に字の差をつける（2026-11-11 午後 きーぼー v3） */
body.look-on .ascolo-tt-path-desc .tt-sem-title{display:block;font-size:16px;font-weight:700;color:var(--lk-main-deep);line-height:1.6}
body.look-on .ascolo-tt-path-desc .tt-sem-sub{display:block;font-size:13.5px;font-weight:700;color:var(--lk-main);line-height:1.6;margin-bottom:6px}
body.look-on .ascolo-tt-path-desc .tt-sem-lead{display:block;font-size:14px;color:var(--lk-ink)}
@media (max-width:767px){ body.look-on .ascolo-tt-path-desc .tt-sem-title{margin-top:10px} }

/* 診断の入力（[nls_tph]）の選ぶ欄の高さ（0.13.3。TODO-0226）：行の高さが「normal」のままだと、丸ゴシックが最初の表示に間に合うかで
   38px と 46px に分かれていた（本番の 11/11 は PC 38px）。字体を早く読むようにしたら 46px になったので、PC は本番と同じ 38px に決める。スマホ（42px）は前後で同じなので触らない */
@media (min-width:768px){body.look-on .nls-tph-select{line-height:1!important}}