/* =============================================
   ホスメディ Article v2 — Dark Edition
   新index.htmlのデザインシステムに統一
   ============================================= */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=Zen+Kaku+Gothic+New:wght@500;700;900&family=Noto+Sans+JP:wght@400;500;700;900&display=swap');

:root {
  --bg: #06040c;
  --bg-2: #0a0713;
  --panel: #0c0816;
  --panel-2: #140e20;
  --line-soft: rgba(255,255,255,.08);
  --line-mid: rgba(255,255,255,.14);
  --txt: #f6f3fb;
  --txt-soft: #b9b3c7;
  --txt-mute: #7c7690;
  --neon: #b15cff;
  --neon-2: #ff5ca8;
  --gold: #e7c66b;
  --line-green: #06c755;
  --sans: 'Noto Sans JP', sans-serif;
  --en: 'Oswald', sans-serif;
  --grad-neon: linear-gradient(100deg, #b15cff 0%, #c95cd6 45%, #ff5ca8 100%);
}

/* === MASTHEAD 非表示 === */
.masthead { display: none !important; }

/* === BASE RESET === */
body,
body.article-page {
  background: var(--bg) !important;
  color: var(--txt) !important;
  font-family: var(--sans) !important;
  -webkit-font-smoothing: antialiased;
}

/* === HEADER === */
.site-header {
  background: rgba(8,7,13,.88) !important;
  backdrop-filter: blur(14px) !important;
  border-bottom: 1px solid var(--line-soft) !important;
}
.site-header__inner {
  border-bottom: none !important;
}
.brand__name, .brand__est, .brand__romaji {
  color: var(--txt-soft) !important;
}
.brand__name {
  background: var(--grad-neon) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  font-family: var(--en) !important;
  letter-spacing: .16em !important;
}
.pc-nav__list a {
  color: var(--txt-soft) !important;
}
.pill-cta {
  background: var(--line-green) !important;
  color: #fff !important;
  border-radius: 999px !important;
  box-shadow: 0 6px 20px rgba(6,199,85,.3) !important;
}

/* === MASTHEAD === */
.masthead {
  background: var(--bg-2) !important;
  border-top: 1px solid var(--line-soft) !important;
  border-bottom: none !important;
}
.masthead__inner {
  border-bottom: 1px solid var(--line-soft) !important;
}
.masthead__title {
  font-family: var(--en) !important;
  background: var(--grad-neon) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  font-style: normal !important;
  letter-spacing: .18em !important;
}
.masthead__sub,
.masthead__meta-l,
.masthead__meta-r {
  color: var(--txt-mute) !important;
}

/* === ARTICLE HEADER === */
.art-head {
  background: var(--bg) !important;
  border-bottom: 1px solid var(--line-soft) !important;
  padding: 56px 22px 48px !important;
}
.art-head__crumbs,
.art-head__crumbs a {
  color: var(--txt-mute) !important;
}
.art-head__crumbs a:hover {
  color: var(--neon) !important;
}
.art-head__cat {
  background: transparent !important;
  color: var(--neon) !important;
  border: 1px solid var(--neon) !important;
  padding: 4px 14px !important;
  border-radius: 999px !important;
  font-family: var(--en) !important;
  font-style: normal !important;
  letter-spacing: .16em !important;
  font-size: 11px !important;
}
.art-head__title {
  font-family: var(--sans) !important;
  font-weight: 900 !important;
  color: #fff !important;
  font-size: clamp(26px, 5.5vw, 52px) !important;
  line-height: 1.4 !important;
  letter-spacing: .02em !important;
}
.art-head__deck {
  font-family: var(--sans) !important;
  color: var(--txt-soft) !important;
  font-size: clamp(14px, 1.6vw, 16px) !important;
  line-height: 2 !important;
}
.art-head__byline {
  color: var(--txt-mute) !important;
  font-family: var(--sans) !important;
  font-style: normal !important;
}
.art-head__byline b {
  color: var(--gold) !important;
  font-family: var(--sans) !important;
}

/* === ARTICLE BODY === */
.art-body {
  background: var(--bg) !important;
  color: var(--txt) !important;
  font-family: var(--sans) !important;
  font-size: 15px !important;
  line-height: 2.05 !important;
}
.art-body > p {
  color: var(--txt-soft) !important;
}
.art-body > p:first-of-type::first-letter {
  font-family: var(--en) !important;
  color: var(--neon) !important;
  font-size: 52px !important;
  line-height: 1 !important;
  float: left !important;
  padding: 4px 10px 0 0 !important;
}
.art-body h2 {
  font-family: var(--sans) !important;
  font-weight: 900 !important;
  color: #fff !important;
  border-bottom: 1px solid var(--line-soft) !important;
  font-size: clamp(18px, 3vw, 24px) !important;
}
.art-body h2::before {
  font-family: var(--en) !important;
  color: var(--neon) !important;
  font-style: normal !important;
  letter-spacing: .18em !important;
}
.art-body h3 {
  font-family: var(--sans) !important;
  font-weight: 700 !important;
  color: #fff !important;
}
.art-body blockquote {
  border-left: 3px solid var(--neon) !important;
  background: rgba(177,92,255,.06) !important;
  color: var(--txt-soft) !important;
  font-style: normal !important;
  font-family: var(--sans) !important;
  border-radius: 0 8px 8px 0 !important;
}
.art-body blockquote cite {
  color: var(--txt-mute) !important;
  font-family: var(--en) !important;
  font-style: normal !important;
  letter-spacing: .12em !important;
}
.art-body ul li::before {
  color: var(--neon) !important;
}
.art-body a {
  color: var(--neon) !important;
}

/* === PULL QUOTE === */
.pull-quote-art {
  background: var(--panel) !important;
  border: 1px solid var(--line-mid) !important;
  border-radius: 16px !important;
  border-top: none !important;
  border-bottom: none !important;
}
.pull-quote-art__body {
  font-family: var(--sans) !important;
  color: #fff !important;
  font-weight: 700 !important;
}
.pull-quote-art__body em {
  background: var(--grad-neon) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}
.pull-quote-art__attr {
  color: var(--txt-mute) !important;
  font-family: var(--en) !important;
  font-style: normal !important;
  letter-spacing: .14em !important;
}

/* === POINT LIST === */
.point-list .point {
  background: var(--panel) !important;
  border-color: var(--line-mid) !important;
  border-radius: 12px !important;
}
.point__no {
  color: var(--neon) !important;
  font-family: var(--en) !important;
  font-style: normal !important;
  letter-spacing: .16em !important;
}
.point__title {
  color: #fff !important;
  font-family: var(--sans) !important;
}
.point__body {
  color: var(--txt-soft) !important;
  font-family: var(--sans) !important;
}
.point__body b {
  color: #fff !important;
}

/* === CHECKLIST / SALARY BOX === */
.checklist,
.salary-box {
  background: var(--panel) !important;
  border: 1px solid var(--line-mid) !important;
  border-radius: 12px !important;
}
.checklist__title,
.salary-box__title {
  color: var(--neon) !important;
  font-family: var(--en) !important;
  font-style: normal !important;
  letter-spacing: .16em !important;
}
.checklist__item,
.salary-box__row {
  border-bottom-color: var(--line-soft) !important;
  font-family: var(--sans) !important;
  color: var(--txt-soft) !important;
}
.checklist__num,
.salary-box__label {
  color: var(--neon) !important;
}
.salary-box__val {
  color: #fff !important;
}

/* === DISCLAIM === */
.disclaim {
  background: var(--panel) !important;
  border-top: 1px solid var(--line-soft) !important;
  color: var(--txt-mute) !important;
  font-family: var(--sans) !important;
  border-radius: 0 0 8px 8px !important;
  margin: 0 auto !important;
}
.disclaim a {
  color: var(--neon) !important;
}

/* === ART END === */
.art-end__sig {
  color: var(--txt-mute) !important;
  font-family: var(--en) !important;
  font-style: normal !important;
  letter-spacing: .22em !important;
}
.art-end__date {
  color: var(--txt-mute) !important;
  font-family: var(--sans) !important;
}

/* === LINE CTA FINAL === */
.line-cta--final {
  background: var(--panel-2) !important;
  border-top: 1px solid var(--line-soft) !important;
  position: relative !important;
  overflow: hidden !important;
}
.line-cta--final::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 50% at 50% 0%, rgba(177,92,255,.15), transparent 70%);
  pointer-events: none;
}
.line-cta__kicker {
  color: var(--neon) !important;
  font-family: var(--en) !important;
  font-style: normal !important;
  letter-spacing: .22em !important;
}
.line-cta__title {
  font-family: var(--sans) !important;
  color: #fff !important;
  font-weight: 900 !important;
}
.line-cta__body {
  color: var(--txt-soft) !important;
  font-family: var(--sans) !important;
}
.line-cta__id {
  color: var(--txt-mute) !important;
  font-family: var(--en) !important;
  font-style: normal !important;
}

/* === FOOTER === */
.site-footer {
  background: #030209 !important;
  border-top: 1px solid var(--line-soft) !important;
  color: var(--txt-mute) !important;
}
.site-footer h4 {
  color: var(--txt-soft) !important;
}
.site-footer a {
  color: var(--txt-mute) !important;
}
.site-footer a:hover {
  color: var(--neon) !important;
}
.footer-fine {
  color: var(--txt-mute) !important;
  border-top: 1px solid var(--line-soft) !important;
}

/* === FAB === */
.consult-fab {
  background: var(--panel) !important;
  border: 1px solid var(--line-mid) !important;
  box-shadow: 0 8px 32px rgba(177,92,255,.2) !important;
}
.consult-fab__kicker {
  color: var(--neon) !important;
}
.consult-fab__sub {
  color: var(--txt-mute) !important;
}
.consult-fab__arrow {
  color: var(--neon) !important;
}

/* === WHITE-BACKGROUND BOXES (all articles) === */
.check10__item,
.prep,
.q10__item,
.tpl-intro__box,
.tpl-item,
.chip {
  background: var(--panel) !important;
  border-color: var(--line-mid) !important;
}
.check10__item *,
.prep *,
.q10__item *,
.tpl-intro__box *,
.tpl-item * {
  color: var(--txt-soft) !important;
}
.check10__item b,
.prep b,
.q10__item b,
.tpl-intro__box b,
.tpl-item b,
.check10__item strong,
.prep strong,
.q10__item strong,
.tpl-intro__box strong,
.tpl-item strong {
  color: #fff !important;
}
.q10__item { border-left-color: var(--neon) !important; }
.tpl-intro__box { border-left-color: var(--neon) !important; }
.tpl-item { border-left-color: var(--neon) !important; }
.chip {
  color: var(--txt-mute) !important;
  border-color: var(--line-soft) !important;
  border-radius: 6px !important;
}

/* ============================================================
   記事ビジュアル部品（全記事共通）— ig-* インフォグラフィック
   ダークテーマ前提。各記事HTMLにマークアップを足すだけで使える。
   ============================================================ */

/* 3秒で結論カード */
.ig-lead{margin:36px 0;padding:26px 24px;border:1px solid #b15cff;border-radius:16px;background:linear-gradient(160deg,#160f24,#0c0816);}
.ig-lead__k{font-family:'Oswald',sans-serif;letter-spacing:3px;font-size:12px;color:#b15cff;margin-bottom:16px;font-weight:600;}
.ig-lead__row{display:flex;align-items:center;gap:16px;padding:15px 0;border-bottom:1px solid rgba(177,92,255,.16);flex-wrap:wrap;}
.ig-lead__row:last-child{border-bottom:none;}
.ig-lead__big{font-family:'Oswald','Noto Sans JP',sans-serif;font-weight:700;font-size:clamp(22px,5.5vw,34px);line-height:1.2;background:linear-gradient(100deg,#b15cff,#ff5ca8);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;flex:1 1 320px;min-width:0;}
.ig-lead__txt{font-size:14px;line-height:1.7;color:#e8e2f5;font-family:'Noto Sans JP',sans-serif;flex:1 1 240px;min-width:0;}
.ig-lead__txt b{color:#fff;font-weight:700;}

/* 縦棒チャート（分布・比較・伸び） */
.ig-chart{margin:38px 0;padding:26px 22px 20px;border-radius:20px;background:radial-gradient(130% 90% at 50% 0,#1c1336 0,#0c0816 68%);border:1px solid rgba(177,92,255,.24);box-shadow:0 0 40px rgba(123,63,214,.12) inset;}
.ig-chart__t{font-size:14.5px;font-weight:700;color:#fff;font-family:'Noto Sans JP',sans-serif;letter-spacing:.3px;}
.ig-chart__note{font-size:11px;color:#8a82a0;margin-top:5px;font-family:'Noto Sans JP',sans-serif;line-height:1.6;}
.ig-cols{display:flex;align-items:flex-end;justify-content:space-around;gap:12px;height:236px;margin-top:26px;padding-top:34px;border-bottom:1px solid rgba(255,255,255,.13);}
.ig-col{flex:1;max-width:96px;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;}
.ig-col__v{font-family:'Oswald',sans-serif;font-weight:700;font-size:clamp(17px,4.6vw,26px);line-height:1;margin-bottom:9px;white-space:nowrap;background:linear-gradient(180deg,#fff,#cdb8ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.ig-col__bar{width:100%;border-radius:11px 11px 0 0;background:linear-gradient(180deg,#a755ff,#6c34c9);box-shadow:0 0 24px rgba(167,85,255,.4),inset 0 1px 0 rgba(255,255,255,.32);}
.ig-col--hot .ig-col__bar{background:linear-gradient(180deg,#ff85c6,#ff349a);box-shadow:0 0 30px rgba(255,92,168,.6),inset 0 1px 0 rgba(255,255,255,.4);}
.ig-col--gold .ig-col__bar{background:linear-gradient(180deg,#ffe7a3,#e0b047);box-shadow:0 0 30px rgba(231,198,107,.5),inset 0 1px 0 rgba(255,255,255,.5);}
.ig-col--hot .ig-col__v{background:linear-gradient(180deg,#ffe1f0,#ff5ca8);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.ig-col--gold .ig-col__v{background:linear-gradient(180deg,#fff6dd,#e7c66b);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.ig-col__lbl{font-size:11.5px;color:#cfc7e3;margin-top:13px;text-align:center;line-height:1.5;font-family:'Noto Sans JP',sans-serif;min-height:32px;}
.ig-col__lbl b{display:block;color:#fff;font-size:12.5px;}
.ig-col__tag{display:inline-block;margin-top:7px;font-size:9.5px;letter-spacing:1px;color:#ff5ca8;border:1px solid rgba(255,92,168,.55);border-radius:20px;padding:2px 9px;font-family:'Oswald',sans-serif;}
.ig-col__tag--gold{color:#e7c66b;border-color:rgba(231,198,107,.55);}

/* 積み上げ／内訳バー */
.ig-stack{margin:38px 0;padding:26px 22px;border-radius:20px;background:radial-gradient(130% 90% at 50% 0,#1c1336 0,#0c0816 68%);border:1px solid rgba(177,92,255,.24);}
.ig-stack__t{font-size:14.5px;font-weight:700;color:#fff;font-family:'Noto Sans JP',sans-serif;margin-bottom:20px;}
.ig-stack__bar{display:flex;flex-direction:column;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.1);}
.ig-stack__seg{padding:15px 18px;display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-family:'Noto Sans JP',sans-serif;}
.ig-stack__seg span{font-size:13px;color:#e8e2f5;}
.ig-stack__seg b{font-family:'Oswald',sans-serif;font-size:15px;color:#fff;white-space:nowrap;}
.ig-seg-hosho{background:linear-gradient(100deg,rgba(231,198,107,.22),rgba(231,198,107,.08));border-left:4px solid #e7c66b;}
.ig-seg-back{background:linear-gradient(100deg,rgba(167,85,255,.26),rgba(167,85,255,.08));border-left:4px solid #a755ff;}
.ig-seg-minus{background:linear-gradient(100deg,rgba(255,80,80,.2),rgba(255,80,80,.05));border-left:4px solid #ff5050;}
.ig-seg-minus b,.ig-seg-minus span{color:#ff9a9a;}
.ig-seg-result{background:linear-gradient(100deg,rgba(6,199,85,.2),rgba(6,199,85,.05));border-left:4px solid #06c755;}
.ig-seg-result b{color:#3ee089;font-size:17px;}
.ig-stack__cap{font-size:12px;color:#a99fc4;line-height:1.7;margin-top:16px;font-family:'Noto Sans JP',sans-serif;}
.ig-stack__cap b{color:#ff85c6;}

/* チェックリスト風（面接・契約・準備系） */
.ig-check{margin:36px 0;padding:24px 22px;border-radius:18px;background:#0c0816;border:1px solid rgba(177,92,255,.2);}
.ig-check__t{font-size:14px;font-weight:700;color:#fff;margin-bottom:16px;font-family:'Noto Sans JP',sans-serif;}
.ig-check__item{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.07);font-family:'Noto Sans JP',sans-serif;font-size:13.5px;color:#e8e2f5;line-height:1.6;}
.ig-check__item:last-child{border-bottom:none;}
.ig-check__item::before{content:"✓";color:#3ee089;font-weight:700;flex-shrink:0;}

/* LINE友だち追加ボタンの中央寄せ修正（imgがglobalでblock化され左寄りになる対策） */
.line-img-btn{display:inline-block !important;}
.line-cta-dark .line-img-btn,
.line-cta--final .line-img-btn{margin-left:auto;margin-right:auto;}

/* 記事ヒーロー画像バンド（全記事共通） */
.art-hero-img{position:relative;width:100%;max-width:1040px;margin:24px auto 0;border-radius:18px;overflow:hidden;aspect-ratio:16/7;background:#0c0816;}
.art-hero-img img{width:100%;height:100%;object-fit:cover;display:block;}
.art-hero-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,4,12,0) 38%,rgba(6,4,12,.82) 100%);pointer-events:none;}
@media(max-width:760px){.art-hero-img{border-radius:0;aspect-ratio:16/10;margin-top:0;}}