/* EQU-Glass テーマ（2026-10-13 導入）
   LANGX 本体サイト（www.langx.ai）の EQU-Glass を、LANGX for 英検® の LP に重ねる上書きCSS。
   - 土台は equ-glass.css（LANGX_top/equ-glass.css と同一）。ここでは LP の既存クラスへ当てはめるだけ。
   - 影・内側の光・縁は本体サイトより2〜3割弱めている（LP は文字や価格が主役なので）。
   - <html class="theme-glass"> のときだけ効く。styles.css の後に読み込む。
   - 方針：濃紺・紙白・ガラスの面は本体サイトに合わせる。「購入する」の赤とセクション見出しの赤は LFE のアクセントとして残す。 */

/* ---------- 1. 色と背景 ---------- */
html.theme-glass {
  --navy: var(--eg-navy);            /* #182F57 → 本体サイトの濃紺 #0E2A47 */
  --ink: var(--eg-ink);
  --line: var(--eg-line);
  --inset-bg: transparent;           /* 凹みパネルはやめて、ガラスに置き換える */
  --inset-shadow: none;
}
html.theme-glass body {
  background:
    radial-gradient(1100px 700px at 88% -8%, rgba(143,185,222,.22), transparent 60%),
    radial-gradient(900px 640px at -10% 38%, rgba(62,78,149,.08), transparent 60%),
    radial-gradient(1000px 700px at 110% 72%, rgba(143,185,222,.16), transparent 60%),
    var(--eg-paper);
  background-attachment: fixed;
  font-family: Inter, 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic UI', sans-serif;
}
/* セクションの塗り（ピンク・グレー・白）は外して、背景のにじみを見せる。見出しの赤は残す */
html.theme-glass section { background: transparent !important; }
html.theme-glass .section-divider { display: none; }   /* ドット模様の区切りはガラスと合わないので使わない */
html.theme-glass .container { padding-top: clamp(48px, 6.5vw, 88px); padding-bottom: clamp(48px, 6.5vw, 88px); }

/* ---------- 2. ヘッダー（すりガラス） ---------- */
html.theme-glass #site-nav {
  background: rgba(250,251,253,.45) !important;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border-bottom: .5px solid rgba(143,185,222,.32) !important;
  box-shadow: inset 0 -4px 7px -2px rgba(255,255,255,.7) !important;   /* app.js がスクロールで付ける影も上書き */
}
html.theme-glass .nav-link { color: var(--eg-navy); font-weight: 500; }

/* ---------- 3. カード類 → クリアなガラス（equ-glass の .eg-glass .eg-card と同じ値） ---------- */
html.theme-glass .hero-badge,
html.theme-glass .panel,
html.theme-glass .pair,
html.theme-glass .plan,
html.theme-glass .voice-bubble,
html.theme-glass .gap-step:not(.gap-step-final) {
  position: relative;
  border: none;
  background: rgba(143,185,222,.045);
  box-shadow:
    inset 0 0 5px 2px rgba(255,255,255,.55), inset 0 0 12px rgba(143,185,222,.14),
    0 1px 0 rgba(143,185,222,.24), 0 2px 4px rgba(14,42,71,.045), 0 14px 24px -16px rgba(62,78,149,.15);
  backdrop-filter: blur(3px) saturate(115%); -webkit-backdrop-filter: blur(3px) saturate(115%);
}
html.theme-glass .hero-badge, html.theme-glass .panel, html.theme-glass .pair,
html.theme-glass .plan, html.theme-glass .voice-bubble { border-radius: 14px; }
/* 縁の細い光（左上が明るく右下がやや濃い 0.5px の線）。equ-glass の .eg-glass::before と同じ */
html.theme-glass .hero-badge::before,
html.theme-glass .panel::before,
html.theme-glass .pair::before,
html.theme-glass .plan::before,
html.theme-glass .voice-bubble::before,
html.theme-glass .gap-step:not(.gap-step-final)::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: .5px; pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,.95) 0%, rgba(143,185,222,.34) 28%, rgba(143,185,222,.22) 68%, rgba(92,122,163,.34) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: .75;   /* 本体サイトより少し控えめに */
}
/* 面の質感（白と空色のにじみ・下辺の光）。equ-glass の .eg-glass::after と同じ */
html.theme-glass .hero-badge::after,
html.theme-glass .panel::after,
html.theme-glass .pair::after,
html.theme-glass .plan::after,
html.theme-glass .voice-bubble::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background:
    radial-gradient(60% 80% at 16% 10%, rgba(255,255,255,.07), transparent 70%),
    radial-gradient(55% 70% at 86% 82%, rgba(143,185,222,.07), transparent 70%),
    radial-gradient(38% 46% at 62% 34%, rgba(255,255,255,.035), transparent 70%),
    linear-gradient(to top, rgba(255,255,255,.26), transparent 5px);
  box-shadow: inset 2px 2px 4px -2px rgba(62,78,149,.10), inset 1.5px 1.5px 4px -2px rgba(255,255,255,.3),
    inset -1.5px -2px 2px -2px rgba(255,255,255,.3), inset 0 -1px 0 0 rgba(255,255,255,.5);
  opacity: .75;
}

/* 理由→解決カード：上半分の凹みは、ごく薄い空色の面に置き換える。下へ流れる三角も同じ色で残す */
html.theme-glass .reason { background: rgba(143,185,222,.09); box-shadow: none; }
html.theme-glass .pair-arrow::before { border-top-color: rgba(143,185,222,.09); }

/* 利用者の声：吹き出しの尾は、カードと同じ白いすりガラスの三角にする。
   カードと重なる上半分は切り落とす（重なると白が濃くなって菱形が見えるため） */
html.theme-glass .voice-tail {
  border: none; background: rgba(255,255,255,.72);
  border-right: .5px solid rgba(143,185,222,.4); border-bottom: .5px solid rgba(143,185,222,.4);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
html.theme-glass .voice-quote { display: none; }   /* 吹き出しの角の星は外す */

/* 料金のプラン選択：選択中は赤の太い縁で示す（レイアウトがずれないよう枠線ではなく内側の影で描く） */
html.theme-glass .plan.is-selected {
  background: rgba(62,78,149,.04);
  box-shadow:
    inset 0 0 0 3px var(--red), inset 0 0 14px rgba(143,185,222,.18),
    0 1px 0 rgba(143,185,222,.24), 0 2px 4px rgba(14,42,71,.045), 0 14px 24px -16px rgba(62,78,149,.2);
}
html.theme-glass .plan-badge { box-shadow: 0 6px 14px -6px rgba(237,47,26,.5); }

/* タイムライン「二次試験 本番」：赤は残し、ボタンと同じつやを足す */
html.theme-glass .gap-step-final {
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 30%), var(--red);
  box-shadow: inset 0 0 4px rgba(255,255,255,.18), 0 1px 0 rgba(255,255,255,.2), 0 10px 18px -10px rgba(237,47,26,.55);
}
html.theme-glass .gap-arrow::before { background: var(--eg-navy); }

/* FAQ：区切り線を本体サイトの線色に */
html.theme-glass .faq { border-top-color: rgba(143,185,222,.4); }

/* ---------- 4. ボタン ---------- */
html.theme-glass .btn { border-radius: 12px; }
/* 購入ボタン：www.langx.ai の紺の主ボタン（.eg-glass + .eg-btn--primary）と同じ数値で、色だけ赤に置き換える。
   紺のときの濃い影 --sh rgba(3,10,22,.5) は、赤の濃い影に置き換えている */
html.theme-glass .btn-buy {
  position: relative; isolation: isolate;   /* ガラスの層（::before/::after）を文字の下・背景の上に置く */
  background: linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,0) 30%), var(--red);
  box-shadow: inset 0 0 4px rgba(255,190,175,.22), 0 1px 0 rgba(143,185,222,.19), 0 2px 4px rgba(14,42,71,.075), 0 10px 16px -10px rgba(150,20,8,.32) !important;   /* ヘッダーの「購入」の box-shadow:none も上書き */
}
html.theme-glass .btn-buy:hover { background: linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,0) 30%), var(--red-hover); }
html.theme-glass .btn-buy::before {   /* 縁の線（左上が明るく、右下がやや濃い 0.5px）。.eg-glass::before と同じ */
  content: ""; position: absolute; z-index: -1; inset: 0; border-radius: inherit; padding: .5px; pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,.95) 0%, rgba(143,185,222,.34) 28%, rgba(143,185,222,.22) 68%, rgba(92,122,163,.34) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
html.theme-glass .btn-buy::after {    /* 面の質感・左上の内側の影・下辺の光。.eg-glass::after に主ボタンの値（--bl .6）を入れたもの */
  content: ""; position: absolute; z-index: -1; inset: 0; border-radius: inherit; pointer-events: none;
  background:
    radial-gradient(60% 80% at 16% 10%, rgba(255,255,255,.07), transparent 70%),
    radial-gradient(55% 70% at 86% 82%, rgba(143,185,222,.07), transparent 70%),
    radial-gradient(38% 46% at 62% 34%, rgba(255,255,255,.035), transparent 70%),
    linear-gradient(to top, rgba(255,255,255,.156), transparent 5px);
  box-shadow: inset 2px 2px 4px -2px rgba(60,4,0,.5), inset 1.5px 1.5px 4px -2px rgba(255,255,255,.3),
    inset -1.5px -2px 2px -2px rgba(255,255,255,.18), inset 0 -1px 0 0 rgba(255,255,255,.3);
}
/* LINE ボタンと寸法をそろえるための 2px の透明枠は、内側の影が枠の内側に出て二重の縁に見えるので、余白に置き換える */
html.theme-glass .cta-pair .btn-buy { border-width: 0; padding: 18px 10px; }
/* LINEで共有・白ボタン：本体サイトの副ボタン（透明ガラス）。LINE は緑の文字で区別する */
html.theme-glass .btn-line, html.theme-glass .btn-white {
  border: none;
  background: rgba(143,185,222,.045);
  box-shadow: inset 0 0 4px 1px rgba(255,255,255,.28), inset 0 0 8px rgba(143,185,222,.08), inset 0 0 0 .5px rgba(143,185,222,.4),
    0 1px 0 rgba(143,185,222,.15), 0 2px 4px rgba(14,42,71,.03), 0 8px 12px -8px rgba(62,78,149,.11);
  backdrop-filter: blur(3px) saturate(115%); -webkit-backdrop-filter: blur(3px) saturate(115%);
}
html.theme-glass .btn-line:hover, html.theme-glass .btn-white:hover { background: rgba(234,240,248,.7); }

/* ---------- 5. フッター：本体サイトの紺の帯 ---------- */
html.theme-glass footer { background: linear-gradient(8deg, var(--eg-navy-900) 0%, var(--eg-navy) 100%) !important; }

/* ---------- 6. 退避（backdrop-filter 非対応） ---------- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html.theme-glass .panel, html.theme-glass .pair, html.theme-glass .plan,
  html.theme-glass .voice-bubble, html.theme-glass .hero-badge, html.theme-glass .gap-step:not(.gap-step-final),
  html.theme-glass .btn-line, html.theme-glass .btn-white { background: rgba(244,246,250,.85); }
  html.theme-glass #site-nav { background: rgba(250,251,253,.94) !important; }
}

/* ---------- 7. 白背景のイラスト ---------- */
/* 理由カード・合格イラストは白い背景つきの画像なので、ガラスの上で白い四角が浮く。乗算でなじませる */
html.theme-glass .solution-img,
html.theme-glass img[src*="illust_success2"] { mix-blend-mode: multiply; }

/* ---------- 8. セクションの区切り ---------- */
/* 元の LP でピンクだったセクションに、ごく薄い青みの帯を敷いて白いセクションと交互にする。
   帯の上下には、ガラスの縁と同じトーンの細い線（上は白い光、下は空色）を入れる */
html.theme-glass section[style*="#FEF0F0"]:not(#top) {   /* #top は背景の指定に同じ色が入っているので除く */
  background: linear-gradient(180deg, rgba(234,240,248,.85) 0%, rgba(240,244,250,.6) 50%, rgba(234,240,248,.85) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),           /* 上辺の光 */
    inset 0 1.5px 0 rgba(143,185,222,.38),        /* 上辺の線 */
    inset 0 -1px 0 rgba(143,185,222,.38),         /* 下辺の線 */
    inset 0 18px 24px -18px rgba(62,78,149,.08);  /* 上辺の内側のごく弱い影（帯が一段沈んで見える） */
}
/* 帯が2つ続く所（利用者の声 → 合格イラスト）は、間の線を出さず1つの帯に見せる */
html.theme-glass section[style*="#FEF0F0"] + section[style*="#FEF0F0"] {
  box-shadow: inset 0 -1px 0 rgba(143,185,222,.38) !important;
}
/* 帯の中のカードは、透明のままだと帯と同じ色に沈むので、白いすりガラスにして浮かせる */
html.theme-glass section[style*="#FEF0F0"]:not(#top) :is(.panel, .pair, .voice-bubble, .gap-step:not(.gap-step-final)) {
  background: rgba(255,255,255,.72);
  box-shadow:
    inset 0 0 5px 2px rgba(255,255,255,.65), inset 0 0 12px rgba(143,185,222,.1),
    0 1px 0 rgba(143,185,222,.28), 0 2px 5px rgba(14,42,71,.05), 0 18px 28px -18px rgba(62,78,149,.22);
}
/* 帯が続く所の手前（利用者の声）は下辺の線を出さない */
html.theme-glass section[style*="#FEF0F0"]:not(#top):has(+ section[style*="#FEF0F0"]) {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 1.5px 0 rgba(143,185,222,.38), inset 0 18px 24px -18px rgba(62,78,149,.08) !important;
}

/* ---------- 9. ヘッダーのロゴ：PC では少し大きく（スマホは 30px のまま） ---------- */
@media (min-width: 768px) {
  html.theme-glass #site-nav a[href="#top"] img { height: 38px !important; }
}

/* ---------- 10. 3つの理由：本体サイトの紺の帯 ---------- */
/* 薄い青の帯（実は・利用者の声）と白（5つの特長・料金）の間に紺を1つ挟み、同じ色が続かないようにする */
html.theme-glass section#merits { background: linear-gradient(8deg, var(--eg-navy-900) 0%, var(--eg-navy) 100%) !important; }
html.theme-glass #merits .section-title { color: #fff; }
html.theme-glass #merits .hl { background: linear-gradient(transparent 62%, rgba(242,99,83,.45) 62%); }
html.theme-glass #merits .num-accent { color: #FF6A55; }   /* 紺の上で読める明るさの赤 */
/* カードは本体サイトの紺の帯の中の暗いガラス（.eg-dark-card と同じ値）。文字は白系にする */
html.theme-glass #merits .pair {
  background: rgba(255,255,255,.015);
  box-shadow: inset 0 0 6px 2px rgba(255,255,255,.04), inset 0 0 14px rgba(143,185,222,.05),
    0 1px 0 rgba(143,185,222,.14), 0 2px 5px rgba(0,0,0,.12), 0 14px 24px -14px rgba(0,0,0,.45);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
html.theme-glass #merits .pair::before { opacity: .5; }
html.theme-glass #merits .pair::after {
  box-shadow: inset 2px 2px 4px -2px rgba(3,10,22,.35), inset 1.5px 1.5px 4px -2px rgba(255,255,255,.3),
    inset -1.5px -2px 2px -2px rgba(255,255,255,.15), inset 0 -1px 0 0 rgba(255,255,255,.25);
  background:
    radial-gradient(60% 80% at 16% 10%, rgba(255,255,255,.07), transparent 70%),
    radial-gradient(55% 70% at 86% 82%, rgba(143,185,222,.07), transparent 70%),
    linear-gradient(to top, rgba(255,255,255,.13), transparent 5px);
}
html.theme-glass #merits .reason { background: rgba(143,185,222,.08); }
html.theme-glass #merits .pair-arrow::before { border-top-color: rgba(143,185,222,.08); }
html.theme-glass #merits .reason-title, html.theme-glass #merits .solution-text { color: #fff; }
html.theme-glass #merits .reason-text { color: rgba(238,242,248,.72); }
html.theme-glass #merits .reason-no, html.theme-glass #merits .pair-arrow > span { color: #FF6A55; }
/* イラストは黒い線画で暗いガラスに沈むので、白い小窓に載せる（乗算はやめる） */
html.theme-glass #merits .solution-img {
  mix-blend-mode: normal; box-sizing: content-box; width: calc(100% - 28px); object-fit: contain; padding: 10px 14px 0; border-radius: 12px;   /* 3枚の小窓の幅をそろえる */
  background: rgba(250,251,253,.94);
  box-shadow: 0 1px 0 rgba(143,185,222,.2), 0 8px 16px -10px rgba(0,0,0,.4);
}