/* あすコロの見た目（2026-11-06 版）。色は 2026-06 の決まりで固定：
   メイン #1455a8・濃い色 #0a2d59・パールホワイト #f0ece4・金 #e8d5a3、押す所（申し込み・診断のボタン）だけオレンジ #ff6f00。
   比べるのは 字体（font-*）・宇宙の出し方（cosmos-*）・ロゴ（logo-*）の3つ（世界観の下書き 7章） */

body.look-on{
  --lk-main:#1455a8; --lk-main-deep:#0a2d59; --lk-gold:#e8d5a3;
  --lk-bg:#f0ece4; --lk-paper:#faf8f4; --lk-ink:#1d2533; --lk-muted:#5f6470; --lk-line:#e2dbcd; --lk-line-strong:#cbbfa9;
  --lk-accent:#1455a8; --lk-link:#1455a8; --lk-marker:rgba(232,213,163,.8);
  --lk-dark:#0a2d59; --lk-on-dark:#f5f1e8; --lk-on-dark-line:rgba(245,241,232,.38);
  --lk-top:#1455a8; --lk-top-ink:#ffffff; --lk-top-line:#1455a8;
  --lk-head:#faf8f4; --lk-head-ink:#0a2d59;
  --lk-cta:#ff6f00; --lk-cta-ink:#ffffff; --lk-badge:#e8d5a3;
  --lk-card:#faf8f4; --lk-card-line:#e2dbcd; --lk-card-ink:#0a2d59; --lk-card-muted:#5f6470;
  --lk-photo-filter:none; --lk-hero-overlay:rgba(0,0,0,.3);
  --lk-night:linear-gradient(160deg,#0a2d59 0%,#123f7f 100%);
  --lk-stars:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 620' preserveAspectRatio='xMidYMid slice'%3E%3Cpath d='M90 110 L170 70 L250 120 L230 200 L320 230' fill='none' stroke='%23e8d5a3' stroke-opacity='.42' stroke-width='1'/%3E%3Ccircle cx='90' cy='110' r='2.4' fill='%23e8d5a3' fill-opacity='.85'/%3E%3Ccircle cx='170' cy='70' r='2.4' fill='%23e8d5a3' fill-opacity='.85'/%3E%3Ccircle cx='250' cy='120' r='2.4' fill='%23e8d5a3' fill-opacity='.85'/%3E%3Ccircle cx='230' cy='200' r='2.4' fill='%23e8d5a3' fill-opacity='.85'/%3E%3Ccircle cx='320' cy='230' r='2.4' fill='%23e8d5a3' fill-opacity='.85'/%3E%3Cpath d='M1180 80 L1250 140 L1340 120 L1300 210' fill='none' stroke='%23e8d5a3' stroke-opacity='.42' stroke-width='1'/%3E%3Ccircle cx='1180' cy='80' r='2.4' fill='%23e8d5a3' fill-opacity='.85'/%3E%3Ccircle cx='1250' cy='140' r='2.4' fill='%23e8d5a3' fill-opacity='.85'/%3E%3Ccircle cx='1340' cy='120' r='2.4' fill='%23e8d5a3' fill-opacity='.85'/%3E%3Ccircle cx='1300' cy='210' r='2.4' fill='%23e8d5a3' fill-opacity='.85'/%3E%3Cpath d='M1050 520 L1130 470 L1210 510 L1280 450 L1360 500' fill='none' stroke='%23e8d5a3' stroke-opacity='.42' stroke-width='1'/%3E%3Ccircle cx='1050' cy='520' r='2.4' fill='%23e8d5a3' fill-opacity='.85'/%3E%3Ccircle cx='1130' cy='470' r='2.4' fill='%23e8d5a3' fill-opacity='.85'/%3E%3Ccircle cx='1210' cy='510' r='2.4' fill='%23e8d5a3' fill-opacity='.85'/%3E%3Ccircle cx='1280' cy='450' r='2.4' fill='%23e8d5a3' fill-opacity='.85'/%3E%3Ccircle cx='1360' cy='500' r='2.4' fill='%23e8d5a3' fill-opacity='.85'/%3E%3Cpath d='M140 470 L210 540 L300 500' fill='none' stroke='%23e8d5a3' stroke-opacity='.42' stroke-width='1'/%3E%3Ccircle cx='140' cy='470' r='2.4' fill='%23e8d5a3' fill-opacity='.85'/%3E%3Ccircle cx='210' cy='540' r='2.4' fill='%23e8d5a3' fill-opacity='.85'/%3E%3Ccircle cx='300' cy='500' r='2.4' fill='%23e8d5a3' fill-opacity='.85'/%3E%3Ccircle cx='420' cy='60' r='1.4' fill='%23e8d5a3' fill-opacity='.55'/%3E%3Ccircle cx='980' cy='40' r='1.4' fill='%23e8d5a3' fill-opacity='.55'/%3E%3Ccircle cx='700' cy='580' r='1.4' fill='%23e8d5a3' fill-opacity='.55'/%3E%3Ccircle cx='560' cy='520' r='1.4' fill='%23e8d5a3' fill-opacity='.55'/%3E%3Ccircle cx='1400' cy='300' r='1.4' fill='%23e8d5a3' fill-opacity='.55'/%3E%3Ccircle cx='40' cy='330' r='1.4' fill='%23e8d5a3' fill-opacity='.55'/%3E%3Ccircle cx='880' cy='560' r='1.4' fill='%23e8d5a3' fill-opacity='.55'/%3E%3C/svg%3E");
}
/* 見出しは濃い色。押す所以外にオレンジを使わない */
body.look-on .cb_catch, body.look-on .nls-lineup-section-title, body.look-on h2.headline,
body.look-on #post_title_area .title, body.look-on .post_content .styled_h2, body.look-on .post_content .styled_h3{color:var(--lk-main-deep)!important}
body.look-on .cb_catch::after, body.look-on .nls-lineup-section-title::after, body.look-on h2.headline::after{background:var(--lk-main)!important;width:40px!important;height:2px!important}
body.look-on .post_content .styled_h2{border-top:2px solid var(--lk-main)!important}
body.look-on .post_content .styled_h3{border-left:3px solid var(--lk-main)!important}
body.look-on .nls-lineup-entry-badge, body.look-on .nls-shindan-hero-badge, body.look-on .nls-svcgrid-tag{background:var(--lk-main-deep)!important;color:var(--lk-gold)!important;border-color:var(--lk-main-deep)!important}
body.look-on .nls-lineup-entry-sub, body.look-on .nls-lineup-entry-eyebrow{color:var(--lk-main)!important}
/* 文字を写真の上に置くカードは、濃い色の地のまま */
body.look-on .nls-shindan-hero, body.look-on .nls-svcgrid-card{background:var(--lk-dark)!important;border-color:var(--lk-dark)!important}
body.look-on .nls-shindan-hero *, body.look-on .nls-svcgrid-card-text, body.look-on .nls-svcgrid-card-text *{color:var(--lk-on-dark)!important}
body.look-on .nls-shindan-hero .nls-lineup-entry-cta, body.look-on .nls-svcgrid-cta{color:#fff!important}
body.look-on #footer, body.look-on #footer_bottom{background:var(--lk-main-deep)!important}

/* ---------- 字体（3通り） ---------- */
body.look-on.font-kosugi{
  --lk-sans:"Kosugi Maru","Hiragino Maru Gothic ProN",sans-serif; --lk-serif:"Kosugi Maru","Hiragino Maru Gothic ProN",sans-serif;
}
body.look-on.font-zenmaru{
  --lk-sans:"Zen Maru Gothic","Hiragino Maru Gothic ProN",sans-serif; --lk-serif:"Zen Maru Gothic","Hiragino Maru Gothic ProN",sans-serif;
}
body.look-on.font-mincho{
  --lk-sans:"Zen Maru Gothic","Hiragino Maru Gothic ProN",sans-serif; --lk-serif:"Shippori Mincho","Hiragino Mincho ProN",serif;
}
body.look-on.font-zenmaru .post_content, body.look-on.font-zenmaru .post_content p, body.look-on.font-mincho .post_content, body.look-on.font-mincho .post_content p{font-weight:500}
body.look-on.font-zenmaru h1, body.look-on.font-zenmaru h2, body.look-on.font-zenmaru h3, body.look-on.font-zenmaru .catch, body.look-on.font-zenmaru .cb_catch{font-weight:700!important}
body.look-on.font-kosugi h1, body.look-on.font-kosugi h2, body.look-on.font-kosugi h3, body.look-on.font-kosugi .catch, body.look-on.font-kosugi .cb_catch{font-weight:700!important}
body.look-on.font-mincho h1, body.look-on.font-mincho h2, body.look-on.font-mincho h3, body.look-on.font-mincho .catch, body.look-on.font-mincho .cb_catch{font-weight:600!important}
body.look-on.font-kosugi .post_content, body.look-on.font-kosugi .post_content p{font-weight:400}

/* ---------- 宇宙の出し方（3通り） ---------- */
/* 今の銀河：写真と動画をそのまま使う */
/* 診断の枠は、今のサイトと同じ紺の地に光 */
body.look-on.cosmos-galaxy .nls-tph{background:radial-gradient(ellipse at 70% 20%,#1a4a8c 0%,#0a2d59 55%,#061c3a 100%)!important}
body.look-on.cosmos-galaxy .nls-tph-glow{display:block!important}

/* 細い星座の線だけ：写真をやめ、紺の地に金の細い線 */
body.look-on.cosmos-line #index_video, body.look-on.cosmos-line #page_header .bg_image{display:none!important}
body.look-on.cosmos-line #header_slider, body.look-on.cosmos-line #page_header, body.look-on.cosmos-line .nls-tph{
  background:var(--lk-stars) center/cover no-repeat, var(--lk-night)!important;
}
body.look-on.cosmos-line #header_slider .bg_overlay, body.look-on.cosmos-line #page_header .overlay{background:transparent!important}

/* なし：パールホワイトの地に濃い色の文字。星も写真も使わない */
body.look-on.cosmos-none #index_video, body.look-on.cosmos-none #page_header .bg_image{display:none!important}
body.look-on.cosmos-none #header_slider, body.look-on.cosmos-none #page_header{background:var(--lk-paper)!important;border-bottom:1px solid var(--lk-line)}
body.look-on.cosmos-none #header_slider .bg_overlay, body.look-on.cosmos-none #page_header .overlay{background:transparent!important}
body.look-on.cosmos-none #header_slider .caption, body.look-on.cosmos-none #header_slider .caption .desc, body.look-on.cosmos-none #header_slider .caption .desc p,
body.look-on.cosmos-none #page_header .caption, body.look-on.cosmos-none #page_header .caption *{color:var(--lk-ink)!important;text-shadow:none!important}
body.look-on.cosmos-none #header_slider .caption .catch, body.look-on.cosmos-none #page_header .catch{color:var(--lk-main-deep)!important}
body.look-on.cosmos-none #header_slider .caption .button, body.look-on.cosmos-none #header_slider .caption .button span{color:#fff!important}
body.look-on.cosmos-none .slick-dots li button{border-color:var(--lk-muted)!important}
body.look-on.cosmos-none .nls-tph{background:var(--lk-paper)!important;border:1px solid var(--lk-line)!important;border-top:3px solid var(--lk-main)!important}
body.look-on.cosmos-none .nls-tph-title{color:var(--lk-main-deep)!important}
body.look-on.cosmos-none .nls-tph-eyebrow{color:var(--lk-main)!important}
body.look-on.cosmos-none .nls-tph-sub, body.look-on.cosmos-none .nls-tph label, body.look-on.cosmos-none .nls-tph p{color:var(--lk-ink)!important}
body.look-on.cosmos-none .nls-tph-select, body.look-on.cosmos-none .nls-tph select{color:var(--lk-ink)!important;border-color:var(--lk-line-strong)!important;background:#fff!important}
body.look-on.cosmos-none .nls-tph button, body.look-on.cosmos-none .nls-tph input[type="submit"]{color:#fff!important}

/* ---------- ロゴ ---------- */
/* 変える：丸に星座の線のマーク＋字体に合わせた「あすとろサイコロ」＋小さな ascolo.jp */
body.look-on.logo-new #header_logo .logo img{opacity:0!important;position:absolute!important;width:1px!important;height:1px!important}
body.look-on.logo-new #header_logo .logo a{
  display:flex!important;flex-direction:column;justify-content:center;text-decoration:none;line-height:1.2;
  padding-left:50px;min-height:42px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='18.6' fill='none' stroke='%231455a8' stroke-width='1.5'/%3E%3Cpath d='M9.5 25.5 L15.5 15 L23 19.5 L29.5 11 M23 19.5 L26.5 29' fill='none' stroke='%231455a8' stroke-width='1.2'/%3E%3Ccircle cx='9.5' cy='25.5' r='1.9' fill='%231455a8'/%3E%3Ccircle cx='15.5' cy='15' r='1.9' fill='%231455a8'/%3E%3Ccircle cx='23' cy='19.5' r='1.9' fill='%231455a8'/%3E%3Ccircle cx='26.5' cy='29' r='1.7' fill='%231455a8'/%3E%3Ccircle cx='29.5' cy='11' r='2.9' fill='%231455a8'/%3E%3C/svg%3E") left center/40px 40px no-repeat;
}
body.look-on.logo-new #header_logo .logo a::before{
  content:"あすとろサイコロ";font-family:var(--lk-serif);font-weight:700;font-size:23px;letter-spacing:.08em;color:var(--lk-main-deep);
}
body.look-on.logo-new #header_logo .logo a::after{
  content:"ascolo.jp";font-family:var(--lk-sans);font-size:11px;letter-spacing:.22em;color:var(--lk-muted);margin-top:2px;
}

/* スマホの幅では星座の線が切れて見えなくなるので、絵を小さめにして左右の星座を残す */
@media (max-width:767px){
  body.look-on.cosmos-line #header_slider, body.look-on.cosmos-line #page_header, body.look-on.cosmos-line .nls-tph{
    background:var(--lk-stars) left -30px top 10px/640px auto no-repeat, var(--lk-stars) right -30px bottom 10px/640px auto no-repeat, var(--lk-night)!important;
  }
}

/* ---------- 日の出（2026-11-09 きーぼー決定）：トップの一番上は日の出の動画＋言葉1枚 ---------- */
/* 字は白。読みやすさのために、左から薄い紺の幕を重ねる（太陽は右寄りに昇るので、字は左に置く） */
body.look-on.cosmos-sunrise #header_slider .bg_overlay{
  background:linear-gradient(90deg,rgba(10,45,89,.62) 0%,rgba(10,45,89,.38) 45%,rgba(10,45,89,0) 75%)!important;
}
body.look-on.cosmos-sunrise #header_slider .caption{text-align:left!important}
body.look-on.cosmos-sunrise #header_slider .caption_inner{max-width:820px;margin-left:max(6vw,40px)!important;margin-right:auto!important;text-align:left!important}
body.look-on.cosmos-sunrise #header_slider .caption .catch{
  font-size:clamp(30px,3.4vw,46px)!important;line-height:1.55!important;letter-spacing:.06em;color:#fff!important;
  text-shadow:0 1px 18px rgba(6,24,52,.45);text-wrap:balance;
}
body.look-on.cosmos-sunrise #header_slider .caption .desc,
body.look-on.cosmos-sunrise #header_slider .caption .desc p{
  font-size:clamp(15px,1.25vw,18px)!important;line-height:2!important;color:#fff!important;text-shadow:0 1px 10px rgba(6,24,52,.5);font-weight:500;
}
body.look-on.cosmos-sunrise #header_slider .caption .button{
  display:inline-flex!important;align-items:center;gap:10px;min-width:0!important;width:auto!important;height:auto!important;
  padding:14px 34px!important;font-size:17px!important;line-height:1.4!important;border-radius:6px!important;box-shadow:0 2px 0 #c45500!important;
}
body.look-on.cosmos-sunrise #header_slider .caption .button span{color:#fff!important;font-family:var(--lk-sans)!important;font-weight:700!important;letter-spacing:.08em}
body.look-on.cosmos-sunrise #header_slider .caption .button::before,
body.look-on.cosmos-sunrise #header_slider .caption .button::after{display:none!important}
body.look-on.cosmos-sunrise #header_slider .slick-dots{display:none!important}

/* スマホ：字は下に寄せ、下から幕を重ねる（縦長に切り取ると太陽が真ん中を通るため） */
@media (max-width:767px){
  body.look-on.cosmos-sunrise #header_slider .bg_overlay{
    background:linear-gradient(0deg,rgba(10,45,89,.72) 0%,rgba(10,45,89,.45) 50%,rgba(10,45,89,.1) 85%)!important;
  }
  body.look-on.cosmos-sunrise #header_slider .caption_inner{margin-left:0!important;padding:0 20px!important;max-width:none}
  body.look-on.cosmos-sunrise #header_slider .caption .catch{font-size:26px!important;line-height:1.6!important;letter-spacing:.04em}
  body.look-on.cosmos-sunrise #header_slider .caption .desc,
  body.look-on.cosmos-sunrise #header_slider .caption .desc p{font-size:15px!important;line-height:1.95!important}
  body.look-on.cosmos-sunrise #header_slider .caption .button{display:flex!important;justify-content:center;width:100%!important;padding:13px 16px!important;font-size:16px!important}
}