@charset "UTF-8";
/* ============================================================
   どらすたブログ UI刷新「モダンメディア」 2026-09-14
   方針: 白地 / 墨色の極太見出し / 青1色(#2C6BF2) / 影とカードを排して罫線と余白で組む
   このファイルを削除すれば旧デザインに戻る(既存CSSは無変更)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800&family=Noto+Sans+JP:wght@400;500;700;900&display=swap');

:root{
  --dm-ink:#14171A;
  --dm-text:#33383D;
  --dm-sub:#75797E;
  --dm-faint:#969CA3;
  --dm-line:#E6E8EB;
  --dm-line-soft:#F1F2F4;
  --dm-accent:#2C6BF2;
  --dm-accent-soft:#D9E5FD;
  --dm-gray:#F6F7F8;
  --dm-latin:"Montserrat","Helvetica Neue",Arial,sans-serif;
}

/* ---------- 1. ベース ---------- */
body{
  background:#FFFFFF !important;
  font-family:"Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  color:var(--dm-text);
}
#main-wrap, #main, .content, #inner-content{ background:#FFFFFF !important; }
h1,h2,h3,h4,h5,h6{ color:var(--dm-ink); }
.entry-content a{ color:var(--dm-accent); }
.entry-content a:hover{ color:#1A50C8; }

/* 影とカード感を全体的に排除 */
.entry, .sidebar .widget, .my-widget, #inner-content, .cta-shindan{
  box-shadow:none !important;
  border-radius:0 !important;
}

/* ---------- 2. ヘッダー ---------- */
.header{
  background:#FFFFFF !important;
  border-bottom:1px solid var(--dm-line);
  box-shadow:none !important;
}
#logo{
  font-weight:900 !important;
  letter-spacing:0.01em;
}
#logo a{ color:var(--dm-ink) !important; }
@media only screen and (min-width:481px){
  #logo{ font-size:30px !important; }
}
#logo, #logo img{ height:auto !important; line-height:1.4 !important; }
#logo img{ max-height:44px; vertical-align:middle; }
@media only screen and (min-width:768px){
  #logo, #logo img{ height:auto !important; line-height:1.4 !important; }
  #logo{ padding:18px 0 6px !important; }
}
.desktop-nav{ background:#FFFFFF !important; }
.desktop-nav li a{
  color:var(--dm-text) !important;
  font-weight:700;
  font-size:14px;
  height:56px !important;
  line-height:56px !important;
}
.desktop-nav li a:hover{ color:var(--dm-accent) !important; background:transparent !important; }
.desktop-nav > ul > li:last-child > a{
  background:var(--dm-ink) !important;
  color:#FFFFFF !important;
  border-radius:999px;
  height:auto !important;
  line-height:1 !important;
  padding:12px 22px !important;
  margin-top:8px;
  display:inline-block;
}
.desktop-nav > ul > li:last-child > a:hover{ background:var(--dm-accent) !important; }

/* ---------- 3. 記事ヘッダー ---------- */
#breadcrumb, .breadcrumb{ background:transparent !important; color:var(--dm-faint); font-size:12px; }
#breadcrumb a{ color:var(--dm-faint); }
.entry-title, .single-title{
  font-size:32px !important;
  font-weight:900 !important;
  line-height:1.6 !important;
  color:var(--dm-ink) !important;
}
.entry-meta{ color:var(--dm-faint); font-size:12px; }
.post-categories a{
  background:var(--dm-accent) !important;
  color:#FFFFFF !important;
  border-radius:999px !important;
  font-weight:700;
  padding:4px 14px !important;
  font-size:12px !important;
  border:none !important;
}

/* ---------- 4. 本文の見出し・装飾 ---------- */
.entry-content{ counter-reset:drasec; font-size:16px; line-height:1.95; }
.entry-content h2{
  background:none !important;
  border:none !important;
  border-bottom:2px solid var(--dm-ink) !important;
  border-radius:0 !important;
  color:var(--dm-ink) !important;
  font-size:23px !important;
  font-weight:900 !important;
  line-height:1.6 !important;
  padding:0 0 14px !important;
  margin-top:3.2em !important;
  counter-increment:drasec;
}
.entry-content h2::before{
  content:"SECTION " counter(drasec, decimal-leading-zero);
  display:block;
  font-family:var(--dm-latin);
  font-size:11px;
  font-weight:800;
  letter-spacing:0.16em;
  color:var(--dm-accent);
  margin-bottom:10px;
}
.entry-content h3{
  background:none !important;
  border:none !important;
  border-left:none !important;
  color:var(--dm-ink) !important;
  font-size:19px !important;
  font-weight:900 !important;
  padding:0 !important;
  margin-top:2.4em !important;
}
.entry-content h3::before{ content:none !important; }
.entry-content h4{
  background:none !important; border:none !important;
  color:var(--dm-ink) !important; font-weight:700 !important; padding:0 !important;
}
/* マーカー・強調(SANGOの蛍光マーカーを青系下線に統一) */
.entry-content span.marker, .entry-content .marker,
.keiko_yellow, .keiko_blue, .keiko_pink, .keiko_green,
span[class^="keiko_"]{
  background:linear-gradient(transparent 70%, var(--dm-accent-soft) 70%) !important;
}
.entry-content strong{ color:var(--dm-ink); }
blockquote{
  background:transparent !important;
  border:none !important;
  border-left:2px solid var(--dm-ink) !important;
  border-radius:0 !important;
  color:var(--dm-text) !important;
  padding:4px 0 4px 24px !important;
}
blockquote::before, blockquote::after{ content:none !important; }

/* ---------- 5. 吹き出し(say) ---------- */
.say .faceicon img{
  width:52px !important; height:52px !important;
  border-radius:999px;
  border:1px solid var(--dm-line);
}
.say .faceicon span{ color:var(--dm-faint); font-size:10px; }
.say .chatting .sc{
  background:var(--dm-gray) !important;
  border:none !important;
  border-radius:4px !important;
  box-shadow:none !important;
  color:var(--dm-text) !important;
}
.say .chatting .sc::before, .say .chatting .sc::after{ border:none !important; content:none !important; }
.say.right .chatting .sc{ background:var(--dm-accent-soft) !important; }

/* ---------- 6. ボックス類(sng-box)を罫線スタイルに統一 ---------- */
.sng-box{
  background:#FFFFFF !important;
  border:1.5px solid var(--dm-ink) !important;
  border-radius:0 !important;
  box-shadow:none !important;
  color:var(--dm-text) !important;
  padding:22px 26px !important;
}
.sng-box::before, .sng-box::after,
.sng-box .box-title::before, .sng-box .box-title::after,
.sng-box p::after{
  content:none !important; border:none !important;
}
.sng-box .box-title{
  background:var(--dm-ink) !important;
  color:#FFFFFF !important;
  border-radius:0 !important;
  font-weight:700;
}
/* タイトル専用ボックス(box24等、直後に本体が続くパターン)は黒帯にする */
.sng-box.box24, .sng-box.box26, .sng-box.box28{
  background:var(--dm-ink) !important;
  color:#FFFFFF !important;
  border:1.5px solid var(--dm-ink) !important;
  padding:12px 26px !important;
  margin-bottom:0 !important;
}
.sng-box.box24 p, .sng-box.box26 p, .sng-box.box28 p{ color:#FFFFFF !important; margin:0 !important; font-weight:700; }
.sng-box.box24 + .sng-box, .sng-box.box26 + .sng-box, .sng-box.box28 + .sng-box{ margin-top:0 !important; }

/* ---------- 7. 目次(ez-toc) ---------- */
#ez-toc-container{
  background:#FFFFFF !important;
  border:1.5px solid var(--dm-ink) !important;
  border-radius:0 !important;
  box-shadow:none !important;
  padding:22px 26px !important;
}
#ez-toc-container .ez-toc-title{
  color:var(--dm-ink) !important;
  font-weight:900 !important;
}
#ez-toc-container a, .ez-toc-link{ color:var(--dm-text) !important; }
#ez-toc-container a:hover{ color:var(--dm-accent) !important; }
#ez-toc-container ul li::marker{ color:var(--dm-accent); }

/* ---------- 8. ボタン・CTA ---------- */
.btn2, .btn2 a, .cta-shindan__btn, .cta-shindan__btn a{
  background:var(--dm-accent) !important;
  color:#FFFFFF !important;
  border-radius:999px !important;
  box-shadow:none !important;
  font-weight:700 !important;
  border:none !important;
}
.btn2:hover, .cta-shindan__btn:hover{ opacity:0.85; }

/* ---------- 9. サイドバー ---------- */
.sidebar .widget{
  background:transparent !important;
  padding:0 !important;
  margin-bottom:40px !important;
}
.widgettitle{
  background:transparent !important;
  color:var(--dm-ink) !important;
  border:none !important;
  border-bottom:1px solid var(--dm-line) !important;
  border-radius:0 !important;
  font-size:14px !important;
  font-weight:900 !important;
  letter-spacing:0.06em;
  padding:0 0 12px !important;
  margin-bottom:18px !important;
}
.widgettitle::before{ content:none !important; }
/* 人気記事ランキング */
.my-widget li{ border-bottom:1px solid var(--dm-line-soft); padding:14px 0; }
.my-widget .rank{
  background:transparent !important;
  color:var(--dm-ink) !important;
  font-family:var(--dm-latin) !important;
  font-size:20px !important;
  font-weight:800 !important;
  border-radius:0 !important;
  width:auto !important;
  height:auto !important;
  line-height:1.4 !important;
}
.my-widget li:first-child .rank{ color:var(--dm-accent) !important; }
.my-widget__img img{ border-radius:4px !important; }
.my-widget__text{ font-weight:700; color:var(--dm-ink); }
/* プロフィール */
.yourprofile{ border-top:2px solid var(--dm-ink); padding-top:18px !important; }
.profile-img img{ border-radius:999px; }
.profile-content{ font-size:13px; color:var(--dm-sub); }
/* カテゴリ一覧 */
.widget_categories li a{ color:var(--dm-text); font-weight:500; }

/* ---------- 10. フッター ---------- */
.footer, .inner-footer, .footer-contents{
  background:#FFFFFF !important;
  color:var(--dm-sub) !important;
}
.footer{ border-top:1px solid var(--dm-line); }
.footer a, .footer-menu a, .footer-nav a, .ft_title{ color:var(--dm-sub) !important; }
.footer a:hover{ color:var(--dm-ink) !important; }
.footer-meta, .footer-meta_title{ color:var(--dm-faint) !important; }

/* ---------- 11. トップページ(hero-a 上書き) ---------- */
.hero-a{
  background:#FFFFFF !important;
  border-radius:0 !important;
  border-bottom:1px solid var(--dm-line);
  box-shadow:none !important;
  padding:72px 24px 64px !important;
}
.hero-a__eyebrow{
  color:var(--dm-accent) !important;
  background:transparent !important;
  border:none !important;
  font-family:var(--dm-latin);
  font-weight:800 !important;
  letter-spacing:0.14em;
  font-size:12px !important;
}
.hero-a__title{
  color:var(--dm-ink) !important;
  font-size:42px !important;
  font-weight:900 !important;
  line-height:1.55 !important;
}
.hero-a__lead{ color:var(--dm-sub) !important; text-align:center; margin-left:auto !important; margin-right:auto !important; }
.hero-a__btn--primary{
  background:var(--dm-ink) !important;
  color:#FFFFFF !important;
  border-radius:999px !important;
  border:none !important;
  box-shadow:none !important;
  font-weight:700 !important;
}
.hero-a__btn--primary:hover{ background:var(--dm-accent) !important; }
.hero-a__btn--ghost{
  background:transparent !important;
  border:1.5px solid var(--dm-ink) !important;
  color:var(--dm-ink) !important;
  border-radius:999px !important;
  font-weight:700 !important;
}
.hero-a__btn--ghost:hover{ border-color:var(--dm-accent) !important; color:var(--dm-accent) !important; }

/* トップの回遊カード類: 影を消して罫線に */
.home .textwidget > div:not(.hero-a){ box-shadow:none !important; }
.home [class*="card"], .home [class*="Card"]{
  box-shadow:none !important;
  border:1px solid var(--dm-line) !important;
  border-radius:4px !important;
}

/* ---------- 12. 記事下CTA(運営会社)・関連記事 ---------- */
.cta-shindan{
  background:var(--dm-ink) !important;
  border:none !important;
}
.cta-shindan__title{ color:#FFFFFF !important; font-weight:900 !important; }
/* 記事末の内部リンクカード(pz-linkcard等) */
.lkc-external-wrap, .linkcard, .blogcard{
  border:1px solid var(--dm-line) !important;
  border-radius:4px !important;
  box-shadow:none !important;
}

/* ---------- 13. モバイル調整 ---------- */
@media only screen and (max-width:767px){
  .entry-title, .single-title{ font-size:24px !important; }
  .entry-content h2{ font-size:20px !important; }
  .hero-a__title{ font-size:28px !important; }
  #logo{ font-size:22px !important; }
}

/* ---------- 14. QA修正(2026-09-14) ---------- */
/* job-change-consultの運営会社CTAリンクをピルボタン化 */
body.postid-2504 .entry-content p > a[href*="worklife-agent.com"]:only-child{
  display:inline-block;
  background:var(--dm-accent) !important;
  color:#FFFFFF !important;
  font-weight:700;
  padding:13px 28px;
  border-radius:999px;
  text-decoration:none !important;
}
body.postid-2504 .entry-content p > a[href*="worklife-agent.com"]:only-child:hover{ opacity:0.85; }
/* ページ上部へ戻るボタンを墨色に */
.totop, .totop a{
  background:var(--dm-ink) !important;
  color:#FFFFFF !important;
  border-radius:999px !important;
  box-shadow:none !important;
}