/* =========================================================
   おすすめ会社ナビ — mock stylesheet
   独立メディアの質感 / AI感を避けた編集的デザイン
   ========================================================= */

:root{
  /* ブランド：ネイビー × ゴールド（権威・認定）。変数名は据え置きで値のみ差替え */
  --ink:        #1b2431;   /* 本文・見出し（墨紺） */
  --ink-soft:   #49515f;   /* 補助テキスト */
  --ink-faint:  #7d8593;   /* キャプション・メタ */
  --line:       #e4e0d7;   /* 罫線 */
  --line-soft:  #efece3;
  --paper:      #eef1f7;   /* 背景（クール青みグレー） */
  --card:       #ffffff;
  --green:      #16233f;   /* 主色＝ネイビー Primary */
  --green-dk:   #0e1830;   /* 濃紺 */
  --green-tint: #e9edf3;   /* 淡紺 tint */
  --ochre:      #a9801f;   /* 金（テキスト用の深め） */
  --ochre-tint: #f6efdd;
  --gold:       #c9a24b;   /* 認定ゴールド */
  --gold-hi:    #e7cd82;   /* ゴールド・ハイライト */
  --shadow:     0 1px 2px rgba(22,35,63,.05);
  --maxw:       1160px;
  --radius:     10px;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;overflow-x:clip;}   /* ページ全体の横スクロール防止 */
/* flex/grid の子が min-content で幅を押し広げるのを防ぐ */
.feed-layout>div,.article-list,.arow .info,.tabs,.trustbar .logos,.feat .body{min-width:0;}
body{
  margin:0;
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.75;
  font-size:15px;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
h1,h2,h3,h4{
  font-family:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;
  font-weight:600;
  line-height:1.4;
  letter-spacing:.02em;
  margin:0;
  word-break:normal;           /* 日本語は文字境界で折返し（横あふれしない） */
  overflow-wrap:anywhere;
  line-break:strict;
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}

/* テーマCSSとのクラス名衝突対策：記事の中央寄せ・画像位置を堅牢化（.cn-body/.cn-single で優先度を上げる） */
.cn-body .wrap{margin-left:auto !important;margin-right:auto !important;padding-left:24px !important;padding-right:24px !important;float:none !important;box-sizing:border-box;}
.cn-body img:not(.ph-img){max-width:100%;height:auto;}
.cn-single .ph-img{position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;margin:0 !important;float:none !important;object-fit:cover;object-position:center;}
.cn-single .article-head,
.cn-single .article-hero,
.cn-single .article-body,
.cn-single .bc-entry,
.cn-single .summary-box,
.cn-single .gl-note,
.cn-single .author-box{margin-left:auto !important;margin-right:auto !important;float:none;}
.cn-single .bc-entry .visual{float:none;width:100%;margin-left:0;margin-right:0;}
.cn-single .visual .ph-img,.cn-single .article-hero .ph-img{left:0;right:0;margin:0;object-position:center;}

/* ---------- 実写画像（読み込み失敗時は背後のグラデにフォールバック） ---------- */
.ph-img{position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;object-fit:cover !important;display:block;z-index:1;margin:0 !important;}
.tagpin{position:absolute;left:12px;top:12px;z-index:2;background:rgba(24,38,36,.82);color:#fff;
  font-size:11px;font-weight:600;letter-spacing:.03em;padding:4px 10px;border-radius:5px;}
.scrim{position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg,rgba(20,32,30,0) 40%,rgba(18,30,28,.72) 100%);}
.on-photo{position:absolute;left:16px;bottom:14px;z-index:3;color:#fff;}
.on-photo b{display:block;font-family:"Noto Serif JP",serif;font-size:15px;letter-spacing:.06em;}
.on-photo small{font-size:11px;color:#d6e2de;letter-spacing:.04em;}

/* ---------- ラベル（小見出し・メタ） ---------- */
.eyebrow{
  font-family:"Noto Sans JP",sans-serif;
  font-size:11px;
  font-weight:700;
  letter-spacing:.18em;
  color:var(--green);
  text-transform:uppercase;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.eyebrow::before{
  content:"";width:22px;height:1px;background:var(--green);display:inline-block;
}

/* =========================================================
   トップの告知ストリップ
   ========================================================= */
.topstrip{
  background:var(--green-dk);
  color:#e9f0ed;
  font-size:12px;
  letter-spacing:.04em;
  text-align:center;
  padding:7px 16px;
}
.topstrip b{color:#fff;font-weight:600;}

/* =========================================================
   ヘッダー
   ========================================================= */
.site-header{
  background:rgba(238,241,247,.9);
  backdrop-filter:saturate(1.1) blur(6px);
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:50;
}
.header-inner{
  display:flex;align-items:center;gap:28px;
  height:70px;
}
.brand{display:flex;align-items:center;gap:11px;flex-shrink:0;}
.brand .mark{width:34px;height:34px;flex-shrink:0;}
.brand .name{
  font-family:"Noto Serif JP",serif;font-weight:700;font-size:20px;
  letter-spacing:.06em;color:var(--ink);
}
.brand .name small{
  display:block;font-family:"Noto Sans JP",sans-serif;
  font-size:9.5px;letter-spacing:.28em;color:var(--ink-faint);font-weight:500;
  margin-top:1px;
}
.main-nav{display:flex;gap:22px;margin-left:8px;}
.main-nav a{
  font-size:13.5px;font-weight:500;color:var(--ink-soft);
  padding:6px 0;position:relative;white-space:nowrap;
}
.main-nav a:hover{color:var(--green);}
.main-nav a.is-active{color:var(--ink);font-weight:700;}
.main-nav a.is-active::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--green);
}
.header-tools{margin-left:auto;display:flex;align-items:center;gap:12px;}
.search-pill{
  display:flex;align-items:center;gap:8px;
  border:1px solid var(--line);background:var(--card);
  border-radius:999px;padding:8px 14px;color:var(--ink-faint);
  font-size:13px;cursor:pointer;min-width:180px;
}
.search-pill:hover{border-color:var(--green);color:var(--green);}
.btn-ghost{
  font-size:13px;font-weight:600;color:var(--green);
  border:1px solid var(--green);border-radius:999px;padding:8px 16px;background:transparent;
  cursor:pointer;
}
.btn-ghost:hover{background:var(--green);color:#fff;}
.nav-toggle{display:none;}

/* =========================================================
   モバイルメニュー（ドロワー）— SPのみ
   ========================================================= */
.mobile-menu{
  position:fixed;inset:0;z-index:200;background:var(--paper);
  display:flex;flex-direction:column;
  visibility:hidden;opacity:0;transform:translateY(-6px);
  transition:opacity .22s ease,transform .22s ease,visibility .22s;
}
.mobile-menu.is-open{visibility:visible;opacity:1;transform:none;}
.mm-head{display:flex;align-items:center;justify-content:space-between;
  height:60px;padding:0 16px;border-bottom:1px solid var(--line);}
.mm-logo{font-family:"Noto Serif JP",serif;font-size:18px;font-weight:700;letter-spacing:.06em;}
.mm-close{width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:9px;background:var(--card);color:var(--ink);cursor:pointer;}
.mm-body{flex:1;overflow-y:auto;padding:22px 20px 44px;}
.mm-search{display:flex;gap:8px;margin-bottom:26px;}
.mm-search input{flex:1;min-width:0;border:1px solid var(--line);border-radius:10px;
  padding:13px 14px;font-size:15px;font-family:inherit;background:var(--card);color:var(--ink);}
.mm-search input:focus{outline:none;border-color:var(--green);}
.mm-search button{display:flex;align-items:center;justify-content:center;background:var(--green);
  color:#fff;border:none;border-radius:10px;padding:0 18px;cursor:pointer;}
.mm-sec{margin-bottom:24px;}
.mm-label{display:block;font-size:10.5px;font-weight:700;letter-spacing:.16em;
  color:var(--ink-faint);text-transform:uppercase;margin-bottom:4px;}
.mm-sec a{display:flex;align-items:center;justify-content:space-between;
  font-family:"Noto Serif JP",serif;font-size:18px;color:var(--ink);
  padding:13px 2px;border-bottom:1px solid var(--line-soft);}
.mm-sec a:last-child{border-bottom:none;}
.mm-sec a::after{content:"";width:7px;height:7px;border-right:1.5px solid var(--ink-faint);
  border-bottom:1.5px solid var(--ink-faint);transform:rotate(-45deg);}
.mm-sec a:active{color:var(--green);}
/* ドロワーはPCでも「検索」ボタンから開けるようにする（既定は非表示のまま） */

/* =========================================================
   ヒーロー
   ========================================================= */
.hero{padding:56px 0 40px;}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center;}
.hero h1{
  font-size:34px;line-height:1.5;margin:16px 0 18px;letter-spacing:.02em;
}
.hero h1 .ph{display:block;}   /* 文節ごとに改行（どの幅でも語中で切れない） */
.hero h1 em{font-style:normal;color:var(--green);
  background:linear-gradient(transparent 68%,var(--green-tint) 0);padding:0 .1em;}
.hero p{color:var(--ink-soft);font-size:15px;max-width:34em;margin:0 0 26px;}
.hero-search{
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:10px;box-shadow:var(--shadow);display:flex;gap:8px;
}
.hero-search input{
  flex:1;border:none;background:transparent;font-size:15px;color:var(--ink);
  padding:12px 14px;font-family:inherit;
}
.hero-search input:focus{outline:none;}
.hero-search button{
  background:var(--green);color:#fff;border:none;border-radius:9px;
  padding:0 26px;font-weight:600;font-size:14px;cursor:pointer;font-family:inherit;
}
.hero-search button:hover{background:var(--green-dk);}
.hero-tags{margin-top:16px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.hero-tags .ht-more{display:contents;}   /* 中のタグを親flexに直接並べgapを効かせる（スマホでは非表示） */
.hero-tags span{font-size:12px;color:var(--ink-faint);margin-right:2px;}
.hero-tags a{
  font-size:12.5px;color:var(--ink-soft);border:1px solid var(--line);
  border-radius:999px;padding:5px 13px;background:var(--card);
}
.hero-tags a:hover{border-color:var(--green);color:var(--green);}

.hero-visual{
  border-radius:var(--radius);overflow:hidden;position:relative;isolation:isolate;
  background:
    radial-gradient(130% 80% at 82% 6%, rgba(201,162,75,.20), transparent 52%),
    linear-gradient(158deg,#294269 0%,#182a4b 45%,#0d1730 100%);
  aspect-ratio:4/3.4;box-shadow:var(--shadow);
  display:flex;flex-direction:column;
  padding:30px 32px 28px;color:#eef4f1;
}
.hero-visual::before{           /* エディトリアルな金のヘアライン枠 */
  content:"";position:absolute;inset:13px;z-index:1;pointer-events:none;
  border:1px solid rgba(201,162,75,.30);border-radius:calc(var(--radius) - 9px);
}
.hero-visual>*{position:relative;z-index:2;}
.hero-visual .hv-wm{        /* 星の透かし（右下コーナーの装飾／文字と干渉させない） */
  position:absolute;right:-42px;bottom:-46px;width:180px;height:180px;z-index:0;
  fill:rgba(231,205,130,.07);
}
.hv-head{display:flex;align-items:center;gap:11px;}
.hv-mark svg{width:26px;height:26px;fill:var(--gold-hi);display:block;}
.hv-kick{display:flex;flex-direction:column;font-family:"Noto Sans JP",sans-serif;
  font-size:12px;font-weight:700;letter-spacing:.14em;color:#dfe9f2;line-height:1.25;}
.hv-kick small{font-size:9.5px;font-weight:600;letter-spacing:.22em;color:#b4c6dd;margin-top:1px;}
/* .hero p の既定（グレー・15px）に負けないよう .hero-visual で詳細度を上げる */
.hero-visual .hv-title{font-family:"Noto Serif JP",serif;font-size:19px;line-height:1.75;
  color:#ffffff !important;font-weight:700;margin:24px 0 auto;max-width:none;}
.hero-visual .hv-title em{font-style:normal;color:var(--gold-hi) !important;}
.hero-visual .stat{display:flex;margin-top:22px;
  border-top:1px solid rgba(255,255,255,.14);padding-top:18px;}
.hero-visual .stat div{flex:1;}
.hero-visual .stat div + div{border-left:1px solid rgba(255,255,255,.12);padding-left:18px;}
.hero-visual .stat div span{display:block;
  font-family:"Noto Serif JP",serif;font-size:34px;font-weight:700;
  color:var(--gold-hi);line-height:1;letter-spacing:.01em;}
.hero-visual .stat div small{display:block;font-size:11.5px;color:#d2ddec;
  letter-spacing:.06em;margin-top:6px;}
.hero-visual .cap{font-size:12px;color:#d2ddec;margin-top:18px;line-height:1.7;letter-spacing:.02em;}

/* =========================================================
   掲載企業ロゴ帯（信頼バー）
   ========================================================= */
.trustbar{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#f3f6fb;}
.trustbar .wrap{display:flex;align-items:center;gap:28px;padding-top:20px;padding-bottom:20px;flex-wrap:wrap;}
.trustbar .tb-label{font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--ink-faint);
  white-space:nowrap;text-transform:uppercase;}
.trustbar .logos{display:flex;align-items:center;gap:34px;flex-wrap:wrap;flex:1;}
.trustbar .logos span{font-family:"Noto Serif JP",serif;font-size:16px;font-weight:600;color:#9aa6a2;
  letter-spacing:.06em;white-space:nowrap;filter:grayscale(1);}
@media(max-width:640px){
  .trustbar .logos{gap:20px;}
  .trustbar .logos span{font-size:13.5px;}
}

/* =========================================================
   4つの検索導線
   ========================================================= */
.section{padding:52px 0;}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:26px;gap:16px;}
.section-head h2{font-size:24px;letter-spacing:.04em;}
.section-head .more{font-size:13px;color:var(--green);font-weight:600;white-space:nowrap;}
.section-head .more:hover{text-decoration:underline;}
.section-head .lead{color:var(--ink-soft);font-size:14px;margin:8px 0 0;}

.finder{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.finder-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px 22px;box-shadow:var(--shadow);position:relative;overflow:hidden;
  transition:transform .15s ease,border-color .15s ease;
}
.finder-card:hover{transform:translateY(-3px);border-color:var(--green);}
.finder-card .ic{
  width:40px;height:40px;border-radius:10px;background:var(--green-tint);
  display:flex;align-items:center;justify-content:center;color:var(--green);margin-bottom:16px;
}
.finder-card h3{font-size:17px;margin-bottom:6px;}
.finder-card p{font-size:12.5px;color:var(--ink-faint);margin:0 0 16px;line-height:1.6;}
.finder-card .go{font-size:12.5px;font-weight:600;color:var(--green);}
.finder-card:nth-child(4) .ic{background:var(--ochre-tint);color:var(--ochre);}
.finder-card:nth-child(4):hover{border-color:var(--ochre);}
.finder-card:nth-child(4) .go{color:var(--ochre);}

/* チップ列（エリア/職種等のプレビュー） */
.chip-row{display:flex;flex-wrap:wrap;gap:7px;margin-top:2px;}
.chip-row span{
  font-size:11.5px;color:var(--ink-soft);background:var(--paper);
  border:1px solid var(--line-soft);border-radius:6px;padding:4px 9px;
}

/* =========================================================
   特集（ピックアップ）
   ========================================================= */
.pickup{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:20px;}
.feat{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;}
.feat:hover{border-color:var(--green);}
.feat .thumb{aspect-ratio:16/9;position:relative;overflow:hidden;}
.feat.lead .thumb{aspect-ratio:16/10;}
.feat .thumb .tag{
  position:absolute;left:12px;top:12px;background:rgba(28,43,42,.82);color:#fff;
  font-size:11px;font-weight:600;letter-spacing:.04em;padding:4px 10px;border-radius:5px;
}
.feat .body{padding:18px 20px 22px;display:flex;flex-direction:column;gap:8px;flex:1;}
.feat .kicker{font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--green);}
.feat h3{font-size:16px;line-height:1.5;}
.feat.lead h3{font-size:23px;line-height:1.55;}
.feat p{font-size:13px;color:var(--ink-soft);margin:0;}
.feat .meta{margin-top:auto;font-size:12px;color:var(--ink-faint);display:flex;gap:12px;align-items:center;padding-top:6px;}
.feat .meta .co{font-weight:600;color:var(--ink-soft);}

/* サムネのダミー配色（画像無しでも成立させる） */
.th1{background:linear-gradient(135deg,#2a7a63,#164e40);}
.th2{background:linear-gradient(135deg,#c99a3c,#93692a);}
.th3{background:linear-gradient(135deg,#3f6f86,#274a5c);}
.th4{background:linear-gradient(135deg,#7a5c8a,#4d3a5a);}
.th5{background:linear-gradient(135deg,#b05f45,#7c3f2c);}
.th6{background:linear-gradient(135deg,#4c8471,#2c5a4b);}
.feat .thumb.th-txt{display:flex;align-items:center;justify-content:center;}
.feat .thumb.th-txt span{
  font-family:"Noto Serif JP",serif;color:rgba(255,255,255,.9);font-size:15px;
  letter-spacing:.14em;font-weight:600;
}

/* =========================================================
   ジャンル別フィード（タブ + 本文/サイド 2カラム）
   ========================================================= */
.feed-layout{display:grid;grid-template-columns:1fr 320px;gap:44px;align-items:start;}

.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:24px;overflow-x:auto;}
.tabs button{
  font-family:inherit;font-size:14px;font-weight:600;color:var(--ink-faint);
  background:none;border:none;padding:12px 16px;cursor:pointer;position:relative;white-space:nowrap;
}
.tabs button:hover{color:var(--ink);}
.tabs button.is-active{color:var(--green);}
.tabs button.is-active::after{
  content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:2px;background:var(--green);
}

.article-list{display:flex;flex-direction:column;}
.arow{
  display:grid;grid-template-columns:180px 1fr;gap:20px;
  padding:22px 0;border-bottom:1px solid var(--line-soft);
}
.arow:first-child{padding-top:0;}
.arow .thumb{aspect-ratio:16/10;border-radius:8px;overflow:hidden;position:relative;}
.arow .thumb.th-txt{display:flex;align-items:center;justify-content:center;}
.arow .thumb.th-txt span{font-family:"Noto Serif JP",serif;color:rgba(255,255,255,.92);font-size:12px;letter-spacing:.1em;text-align:center;padding:0 10px;}
.arow .info{display:flex;flex-direction:column;gap:7px;}
.arow .cats{display:flex;gap:7px;flex-wrap:wrap;}
.arow .cats span{font-size:11px;font-weight:600;color:var(--green);background:var(--green-tint);
  padding:3px 9px;border-radius:5px;}
.arow h3{font-size:17px;line-height:1.55;}
.arow:hover h3{color:var(--green);}
.arow p{font-size:13px;color:var(--ink-soft);margin:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.arow .meta{font-size:12px;color:var(--ink-faint);display:flex;gap:12px;align-items:center;margin-top:2px;}
.arow .meta .co{font-weight:600;color:var(--ink-soft);}

.loadmore{margin-top:28px;text-align:center;}
.loadmore button{
  font-family:inherit;font-size:13.5px;font-weight:600;color:var(--ink);
  background:var(--card);border:1px solid var(--line);border-radius:999px;
  padding:12px 34px;cursor:pointer;
}
.loadmore button:hover{border-color:var(--green);color:var(--green);}

/* ---------- サイドバー ---------- */
.side-block{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 20px;box-shadow:var(--shadow);margin-bottom:22px;}
.side-block h4{font-size:15px;margin-bottom:16px;display:flex;align-items:center;gap:9px;letter-spacing:.05em;}
.side-block h4 .rk{color:var(--ochre);font-family:"Noto Serif JP",serif;}

.rank-list{display:flex;flex-direction:column;}
.rank-item{display:flex;gap:13px;padding:12px 0;border-top:1px solid var(--line-soft);align-items:flex-start;}
.rank-item:first-child{border-top:none;padding-top:0;}
.rank-item .num{
  font-family:"Noto Serif JP",serif;font-size:20px;font-weight:700;color:var(--ink-faint);
  width:24px;flex-shrink:0;line-height:1.3;
}
.rank-item:nth-child(1) .num,.rank-item:nth-child(2) .num,.rank-item:nth-child(3) .num{color:var(--ochre);}
.rank-item .rk-body h5{font-family:"Noto Sans JP",sans-serif;font-size:13.5px;font-weight:600;
  line-height:1.5;margin:0 0 3px;}
.rank-item:hover .rk-body h5{color:var(--green);}
.rank-item .rk-body span{font-size:11.5px;color:var(--ink-faint);}

.side-tags{display:flex;flex-wrap:wrap;gap:8px;}
.side-tags a{font-size:12px;color:var(--ink-soft);border:1px solid var(--line);
  border-radius:999px;padding:6px 13px;}
.side-tags a:hover{border-color:var(--green);color:var(--green);}

.side-cta{background:var(--green-dk);color:#eef4f1;border:none;}
.side-cta h4{color:#fff;}
.side-cta p{font-size:12.5px;color:#cfe3db;margin:0 0 16px;line-height:1.7;}
.side-cta a.b{display:inline-block;background:#fff;color:var(--green-dk);font-weight:700;font-size:13px;
  padding:10px 20px;border-radius:8px;}

/* =========================================================
   会社ナビとは（編集方針＝信頼性・AIO）
   ========================================================= */
.about{background:var(--green-tint);}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;}
.about h2{font-size:26px;line-height:1.5;margin:14px 0 16px;}
.about p{color:var(--ink-soft);font-size:14.5px;margin:0 0 14px;}
.about ul{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:14px;}
.about li{display:flex;gap:12px;font-size:14px;}
.about li b{display:block;font-family:"Noto Serif JP",serif;font-size:15px;margin-bottom:2px;}
.about li .ic{width:26px;height:26px;flex-shrink:0;color:var(--green);}
.about-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:30px;box-shadow:var(--shadow);}
.about-card .n{font-family:"Noto Serif JP",serif;font-size:40px;font-weight:700;color:var(--green);line-height:1.1;}
.about-card .stat-row{display:grid;grid-template-columns:1fr 1fr;gap:24px 20px;margin-top:8px;}
.about-card .stat-row small{display:block;font-size:12.5px;color:var(--ink-faint);margin-top:2px;}

/* =========================================================
   フッター
   ========================================================= */
.site-footer{background:var(--ink);color:#c3ccc9;padding:52px 0 30px;margin-top:20px;}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:34px;margin-bottom:36px;}
.footer-grid .brand .name{color:#fff;}
.footer-grid .brand .name small{color:#8fa39d;}
.footer-about{font-size:12.5px;color:#98a7a3;margin:16px 0 0;line-height:1.8;max-width:26em;}
.fcol h5{font-family:"Noto Sans JP",sans-serif;font-size:12px;letter-spacing:.14em;color:#8fa39d;
  font-weight:700;margin:0 0 14px;text-transform:uppercase;}
.fcol a{display:block;font-size:13px;color:#c3ccc9;padding:5px 0;}
.fcol a:hover{color:#fff;}
.footer-bottom{border-top:1px solid #2f3f3c;padding-top:20px;display:flex;justify-content:space-between;
  align-items:center;font-size:11.5px;color:#7f8f8b;flex-wrap:wrap;gap:10px;}
.footer-bottom .powered{color:#9fb0ab;}
.footer-bottom .powered b{color:#fff;font-weight:600;}

/* =========================================================
   記事詳細（article.html）
   ========================================================= */
.breadcrumb{font-size:12px;color:var(--ink-faint);padding:18px 0;}
.breadcrumb a:hover{color:var(--green);}
.breadcrumb span{margin:0 7px;color:var(--line);}
.article-head{max-width:760px;margin:0 auto;padding:8px 0 20px;text-align:center;}
.article-head .cats{justify-content:center;display:flex;gap:8px;margin-bottom:16px;}
.article-head .cats a{font-size:11.5px;font-weight:600;color:var(--green);background:var(--green-tint);padding:4px 11px;border-radius:5px;}
.article-head h1{font-size:32px;line-height:1.55;letter-spacing:.03em;}
.article-head .amet{margin-top:20px;font-size:13px;color:var(--ink-faint);display:flex;gap:16px;justify-content:center;align-items:center;}
.article-hero{aspect-ratio:16/9;border-radius:12px;margin:24px auto 0;max-width:900px;position:relative;overflow:hidden;}
.article-body{max-width:720px;margin:44px auto 0;}
.article-body h2{font-size:23px;margin:44px 0 16px;padding-left:14px;border-left:4px solid var(--green);}
.article-body h3{font-size:18px;margin:32px 0 12px;}
.article-body p{margin:0 0 20px;font-size:15.5px;line-height:2;color:#293241;}
.article-body .lead-p{font-size:16.5px;color:var(--ink);}
.article-body blockquote{margin:26px 0;padding:20px 24px;background:var(--green-tint);border-radius:10px;
  font-size:15px;color:var(--green-dk);font-family:"Noto Serif JP",serif;line-height:1.9;}
.company-card{border:1px solid var(--line);border-radius:12px;padding:26px;margin:40px auto;max-width:720px;background:var(--card);box-shadow:var(--shadow);}
.company-card .lbl{font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--ochre);}
.company-card h4{font-size:19px;margin:8px 0 10px;}
.company-card dl{display:grid;grid-template-columns:auto 1fr;gap:8px 20px;font-size:13.5px;margin:16px 0 0;}
.company-card dt{color:var(--ink-faint);}
.company-card a.visit{display:inline-block;margin-top:18px;color:var(--green);font-weight:600;font-size:13.5px;}

/* =========================================================
   レスポンシブ
   ========================================================= */
@media(max-width:960px){
  .hero-grid{grid-template-columns:1fr;gap:32px;}
  .hero-visual{max-width:480px;}
  .feed-layout{grid-template-columns:1fr;gap:36px;}
  .pickup{grid-template-columns:1fr 1fr;}
  .finder{grid-template-columns:1fr 1fr;}
  .about-grid{grid-template-columns:1fr;gap:28px;}
  .footer-grid{grid-template-columns:1fr 1fr;gap:26px;}
}
@media(max-width:640px){
  body{font-size:14px;}
  .wrap{padding:0 16px;}
  .main-nav,.search-pill,.btn-ghost{display:none;}
  .nav-toggle{display:inline-flex;margin-left:auto;background:none;border:1px solid var(--line);
    border-radius:8px;width:38px;height:38px;align-items:center;justify-content:center;cursor:pointer;color:var(--ink);}
  .header-inner{height:60px;}
  .brand .name{font-size:18px;}

  /* 告知バー：詳細はSPで隠して1行に */
  .topstrip{font-size:11px;padding:6px 14px;line-height:1.5;}
  .ts-detail{display:none;}

  /* ヒーロー */
  .hero{padding:24px 0 20px;}
  .hero .eyebrow{font-size:10px;}
  .hero h1{font-size:clamp(15px,5.3vw,22px);line-height:1.5;margin:10px 0 14px;}
  .hero h1 .ph{white-space:nowrap;}   /* スマホで各文節を1行に収め「が、」の孤立を防ぐ */
  .hero p{font-size:13px;margin-bottom:18px;}
  .hero-search{flex-direction:column;padding:7px;gap:6px;}
  .hero-search input{padding:11px 12px;font-size:13px;}
  .hero-search button{padding:12px;}
  .hero-tags{margin-top:12px;gap:6px;flex-wrap:nowrap;}   /* スマホは1行固定 */
  .hero-tags .ht-more{display:none;}                       /* 長い年代タグはスマホで隠す */
  .hero-tags a{font-size:11.5px;padding:4px 11px;white-space:nowrap;}
  .hero-visual{max-width:none;aspect-ratio:16/13;padding:22px 22px 20px;}
  .hero-visual .hv-title{font-size:16px;margin-top:16px;}
  .hero-visual .stat{margin-top:16px;padding-top:14px;}
  .hero-visual .stat div span{font-size:28px;}
  .hero-visual .stat div + div{padding-left:14px;}
  .hero-visual .hv-wm{width:150px;right:-26px;top:-30px;}
  .hero-visual .cap{font-size:11px;margin-top:14px;}

  /* ロゴ帯：ラベルを上に、ロゴは折返し（横あふれ防止） */
  .trustbar .wrap{flex-direction:column;align-items:flex-start;gap:9px;padding-top:14px;padding-bottom:14px;}
  .trustbar .logos{flex-wrap:wrap;width:100%;min-width:0;gap:12px 20px;}
  .trustbar .logos span{font-size:12.5px;}

  /* セクション余白を圧縮 */
  .section{padding:30px 0;}
  .section-head{margin-bottom:18px;}
  .section-head h2{font-size:20px;}
  .eyebrow{font-size:10px;}

  /* 検索導線：2カラム・コンパクト（説明文は省略） */
  .finder{grid-template-columns:1fr 1fr;gap:10px;}
  .finder-card{padding:15px 13px;}
  .finder-card .ic{width:32px;height:32px;margin-bottom:10px;border-radius:8px;}
  .finder-card .ic svg{width:18px;height:18px;}
  .finder-card h3{font-size:14.5px;margin-bottom:8px;}
  .finder-card p{display:none;}
  .chip-row{gap:5px;}
  .chip-row span{font-size:10.5px;padding:3px 7px;}

  /* 特集 */
  .pickup{grid-template-columns:1fr;gap:16px;}
  .feat.lead .thumb{aspect-ratio:16/9;}
  .feat.lead h3{font-size:18px;}
  .feat h3{font-size:16px;}
  .feat .body{padding:15px 16px 18px;gap:6px;}

  /* ジャンル別リスト */
  .tabs{margin-bottom:18px;}
  .tabs button{font-size:13px;padding:10px 12px;}
  .arow{grid-template-columns:120px 1fr;gap:13px;padding:16px 0;}
  .arow h3{font-size:14.5px;}
  .arow p{display:none;}
  .arow .meta{font-size:11px;gap:8px;}

  /* サイド */
  .side-block{padding:18px 16px;margin-bottom:16px;}

  /* About */
  .about h2{font-size:21px;}
  .about-card{padding:22px;}
  .about-card .n{font-size:32px;}

  /* ロゴ帯はSPでは隠す（クラッター削減／メニューに集約） */
  .trustbar{display:none;}

  /* フッター：リンク列はメニューへ集約、ここは超ミニマル＆中央寄せ */
  .site-footer{padding:34px 0 24px;text-align:center;}
  .footer-grid{grid-template-columns:1fr;gap:0;margin-bottom:18px;}
  .fcol{display:none;}
  .footer-grid .brand{justify-content:center;}
  .footer-about{margin:12px auto 0;font-size:12px;max-width:26em;}
  .footer-bottom{flex-direction:column;gap:7px;justify-content:center;text-align:center;}

  /* 記事詳細 */
  .article-head{padding:4px 0 12px;}
  .article-head h1{font-size:21px;line-height:1.55;}
  .article-head .amet{flex-wrap:wrap;gap:6px 14px;font-size:12px;margin-top:14px;}
  .article-hero{aspect-ratio:16/9;margin-top:18px;}
  .article-body{margin-top:28px;}
  .article-body .lead-p{font-size:15px;}
  .article-body p{font-size:14.5px;line-height:1.95;}
  .article-body h2{font-size:19px;margin:32px 0 12px;}
  .toc{padding:18px 18px;}
  .rank-entry{padding:26px 0;}
  .rank-entry .no b{font-size:26px;}
  .rank-entry .rk-title h3{font-size:17px;}
  .rank-entry .visual{aspect-ratio:16/9;}
  .spec{grid-template-columns:auto 1fr;gap:6px 12px;padding:14px 15px;font-size:12.5px;}
  .summary-box{padding:22px 20px;}
  .summary-box h2{font-size:18px;}
}


/* ===== 記事詳細（single-cn_matome）用 ===== */
/* 目次 */
  .toc{border:1px solid var(--line);border-radius:12px;background:var(--card);padding:22px 26px;margin:0 auto 8px;max-width:720px;box-shadow:var(--shadow);}
  .toc .toc-h{font-family:"Noto Serif JP",serif;font-size:15px;font-weight:700;margin-bottom:12px;display:flex;align-items:center;gap:8px;}
  .toc ol{margin:0;padding-left:0;list-style:none;counter-reset:t;display:grid;gap:9px;}
  .toc li{counter-increment:t;font-size:13.5px;color:var(--ink-soft);display:flex;gap:11px;line-height:1.5;}
  .toc li::before{content:counter(t);font-family:"Noto Serif JP",serif;font-weight:700;color:var(--green);
    width:22px;flex-shrink:0;text-align:right;}
  .toc li a:hover{color:var(--green);}

  /* 企業ブロック（順位ではなく“11社のうちの1社”という並び） */
  .rank-entry{max-width:720px;margin:0 auto;padding:36px 0;border-top:1px solid var(--line);}
  .rank-entry .rk-head{display:flex;gap:16px;align-items:baseline;margin-bottom:16px;}
  .rank-entry .no{flex-shrink:0;display:flex;align-items:baseline;gap:3px;color:var(--green);line-height:1;}
  .rank-entry .no small{font-size:11px;letter-spacing:.05em;color:var(--ink-faint);}
  .rank-entry .no b{font-family:"Noto Serif JP",serif;font-size:30px;font-weight:600;}
  .rank-entry .rk-title{padding-top:4px;}
  .rank-entry .rk-title h3{font-size:20px;line-height:1.5;}
  .rank-entry .rk-title .sub{font-size:12.5px;color:var(--ink-faint);margin-top:5px;display:flex;gap:10px;flex-wrap:wrap;}
  .rank-entry .rk-title .sub b{color:var(--green);font-weight:600;}
  .rank-entry .rk-title .sub .pick{display:inline-flex;align-items:center;gap:4px;
    color:#8a6a15;background:var(--ochre-tint);border:1px solid var(--gold);
    border-radius:5px;padding:1px 8px;font-weight:700;letter-spacing:.02em;}
  .rank-entry .visual{aspect-ratio:16/7;border-radius:10px;margin:6px 0 18px;position:relative;overflow:hidden;}
  .rank-entry p{font-size:15px;line-height:2;color:#293241;margin:0 0 16px;}
  .spec{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;font-size:13.5px;background:var(--paper);
    border:1px solid var(--line-soft);border-radius:10px;padding:16px 18px;margin:6px 0 14px;}
  .spec dt{color:var(--ink-faint);white-space:nowrap;}
  .spec dd{margin:0;color:var(--ink);}
  .pt{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 14px;}
  .pt span{font-size:11.5px;font-weight:600;color:var(--green);background:var(--green-tint);padding:4px 10px;border-radius:5px;}
  .entry-cta{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;color:#fff;
    background:var(--green);padding:10px 20px;border-radius:8px;}
  .entry-cta:hover{background:var(--green-dk);}

  .summary-box{max-width:720px;margin:44px auto 0;background:var(--green-tint);border-radius:12px;padding:28px 30px;}
  .summary-box h2{border:none;padding:0;font-size:21px;margin:0 0 14px;}
  .summary-box p{font-size:14.5px;line-height:1.9;margin:0;color:var(--ink-soft);}

  .related{background:var(--paper);}
  .rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
  .rel-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);}
  .rel-card:hover{border-color:var(--green);}
  .rel-card .thumb{aspect-ratio:16/9;position:relative;overflow:hidden;}
  .rel-card .thumb .tagpin{font-size:10.5px;}
  .rel-card .body{padding:14px 16px 16px;}
  .rel-card .body span{font-size:11px;font-weight:600;color:var(--green);}
  .rel-card h3{font-size:14.5px;line-height:1.55;margin-top:6px;}
  .rel-card:hover h3{color:var(--green);}
  @media(max-width:640px){.rel-grid{grid-template-columns:1fr;}.rank-entry .rk-title h3{font-size:17px;}}

/* ===== 一覧（archive-cn_matome）用 ===== */
.cat-hero{background:var(--green-tint);padding:40px 0 34px;border-bottom:1px solid var(--line);}
  .cat-hero h1{font-size:30px;margin:12px 0 8px;}
  .cat-hero p{color:var(--ink-soft);font-size:14px;margin:0;}
  .filterbar{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
    padding:18px 20px;box-shadow:var(--shadow);margin:26px 0 8px;display:grid;gap:14px;}
  .filter-row{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;}
  .filter-row .lbl{font-size:12px;font-weight:700;color:var(--ink-faint);letter-spacing:.08em;width:64px;flex-shrink:0;}
  .filter-row .opts{display:flex;flex-wrap:wrap;gap:7px;}
  .filter-row .opts a{font-size:12.5px;color:var(--ink-soft);border:1px solid var(--line);
    border-radius:999px;padding:5px 13px;}
  .filter-row .opts a.on{background:var(--green);color:#fff;border-color:var(--green);}
  .filter-row .opts a:hover{border-color:var(--green);color:var(--green);}
  .filter-row .opts a.on:hover{color:#fff;}
  .result-head{display:flex;justify-content:space-between;align-items:baseline;margin:28px 0 18px;}
  .result-head .cnt{font-size:14px;color:var(--ink-faint);}
  .result-head .cnt b{color:var(--ink);font-family:"Noto Serif JP",serif;font-size:20px;}
  .result-head select{font-family:inherit;font-size:13px;padding:8px 12px;border:1px solid var(--line);
    border-radius:8px;background:var(--card);color:var(--ink);}
  .grid-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
  .gcard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
    box-shadow:var(--shadow);display:flex;flex-direction:column;}
  .gcard:hover{border-color:var(--green);}
  .gcard .thumb{aspect-ratio:16/9;position:relative;overflow:hidden;}
  .gcard .body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px;flex:1;}
  .gcard .cats{display:flex;gap:6px;flex-wrap:wrap;}
  .gcard .cats span{font-size:10.5px;font-weight:600;color:var(--green);background:var(--green-tint);padding:3px 8px;border-radius:4px;}
  .gcard h3{font-size:15.5px;line-height:1.55;}
  .gcard:hover h3{color:var(--green);}
  .gcard .meta{margin-top:auto;font-size:11.5px;color:var(--ink-faint);display:flex;gap:10px;padding-top:4px;}
  .gcard .meta .co{font-weight:600;color:var(--ink-soft);}
  .pager{display:flex;justify-content:center;gap:6px;margin:40px 0 0;}
  .pager a{min-width:40px;height:40px;display:flex;align-items:center;justify-content:center;
    border:1px solid var(--line);border-radius:8px;font-size:13.5px;background:var(--card);color:var(--ink-soft);}
  .pager a.on{background:var(--green);color:#fff;border-color:var(--green);}
  .pager a:hover{border-color:var(--green);color:var(--green);}
  .pager a.on:hover{color:#fff;}
  @media(max-width:960px){.grid-cards{grid-template-columns:1fr 1fr;}}
  @media(max-width:640px){.grid-cards{grid-template-columns:1fr;}.filter-row .lbl{width:100%;}}

/* ===== 固定ページ本文（編集方針/運営会社/お問い合わせ等） ===== */
.article-body ul{margin:0 0 20px;padding-left:1.2em;}
.article-body li{margin:0 0 8px;font-size:15px;line-height:1.9;color:#293241;}
.cn-dl{display:grid;grid-template-columns:8em 1fr;gap:10px 18px;margin:6px 0 22px;font-size:14.5px;}
.cn-dl dt{color:var(--ink-faint);font-weight:600;}
.cn-dl dd{margin:0;}
.cn-box{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px 22px;margin:6px 0 22px;box-shadow:var(--shadow);}
.cn-404{max-width:640px;margin:0 auto;text-align:center;padding:80px 20px;}
.cn-404 .big{font-family:"Noto Serif JP",serif;font-size:64px;color:var(--green);line-height:1;}
.cn-404 h1{font-size:22px;margin:16px 0 10px;}
.cn-404 p{color:var(--ink-soft);font-size:14px;margin:0 0 24px;}
.cn-404 a.home{display:inline-block;background:var(--green);color:#fff;font-weight:700;padding:13px 30px;border-radius:9px;}
@media(max-width:640px){.cn-dl{grid-template-columns:1fr;gap:2px 0;}.cn-dl dt{margin-top:10px;}}

/* TOPの「もっと読む」リンク（aタグ版） */
.loadmore a.button-more{display:inline-block;font-family:inherit;font-size:13.5px;font-weight:600;
  color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:999px;
  padding:12px 34px;text-decoration:none;}
.loadmore a.button-more:hover{border-color:var(--green);color:var(--green);}

/* ===== 記事下部：BEST COMPANY 評価・編集ガイドライン導線 ===== */
.gl-note{max-width:720px;margin:40px auto 0;display:flex;gap:18px;align-items:center;
  background:var(--card);border:1px solid var(--line);border-left:4px solid var(--gold);
  border-radius:12px;padding:20px 22px;box-shadow:var(--shadow);}
.gl-note .gl-badge{flex-shrink:0;width:64px;height:64px;border-radius:10px;
  background:var(--green);color:var(--gold-hi);display:flex;align-items:center;justify-content:center;
  text-align:center;font-family:"Noto Serif JP",serif;font-weight:700;font-size:11px;letter-spacing:.06em;line-height:1.3;}
.gl-note .gl-body p{margin:0 0 8px;font-size:13px;color:var(--ink-soft);line-height:1.75;}
.gl-note .gl-link{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:700;color:var(--green);}
.gl-note .gl-link:hover{color:var(--gold);}
@media(max-width:640px){.gl-note{flex-direction:column;align-items:flex-start;gap:12px;padding:18px;}}

/* =========================================================
   BEST COMPANY スコア型ランキング
   ========================================================= */
.bc-disclosure{background:var(--ochre-tint);border:1px solid var(--gold);border-radius:10px;
  padding:14px 18px;margin:0 0 24px;font-size:13px;color:#6b5518;line-height:1.8;}
.bc-disclosure b{display:block;color:#8a6a15;margin-bottom:2px;}

/* テーブル共通 */
.bc-table{width:100%;border-collapse:collapse;margin:8px 0 14px;font-size:14px;
  border:1px solid var(--line);border-radius:10px;overflow:hidden;}
.bc-table thead th{background:var(--green);color:#fff;font-family:"Noto Sans JP",sans-serif;
  font-weight:600;font-size:13px;padding:11px 14px;text-align:left;}
.bc-table td{padding:11px 14px;border-top:1px solid var(--line-soft);}
.bc-table td.c{text-align:center;white-space:nowrap;font-weight:600;}
.bc-table tbody tr:nth-child(even){background:#fafbfd;}
.bc-rank td.rk{font-family:"Noto Serif JP",serif;font-weight:700;color:var(--green);white-space:nowrap;width:64px;}
.bc-rank td.c{color:var(--ochre);font-family:"Noto Serif JP",serif;}
.bc-rank a{color:var(--green);font-weight:600;}
.bc-rank a:hover{text-decoration:underline;}
.bc-sumtab thead th{background:var(--green-dk);}
.bc-note{font-size:12px;color:var(--ink-faint);margin:0 0 6px;}

/* 各社ブロック（スコア型）＝1社1カード */
.bc-entry{max-width:720px;margin:0 auto 22px;background:var(--card);border:1px solid var(--line);
  border-radius:16px;padding:30px 32px;box-shadow:0 2px 10px rgba(22,35,63,.06);}
.bc-entry .bc-ehead{display:flex;gap:16px;align-items:flex-start;margin-bottom:16px;}
.bc-medal{flex-shrink:0;width:58px;height:58px;border-radius:50%;background:var(--green);color:#fff;
  display:flex;align-items:center;justify-content:center;gap:1px;line-height:1;}
.bc-medal small{font-size:10px;}
.bc-medal b{font-family:"Noto Serif JP",serif;font-size:22px;}
.bc-medal.top{background:linear-gradient(150deg,var(--gold-hi),var(--gold));color:var(--green-dk);
  box-shadow:0 2px 8px rgba(201,162,75,.4);}
.bc-etitle{padding-top:2px;}
.bc-etitle h3{font-size:21px;line-height:1.4;}
.bc-rate{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:8px;}
.bc-rate .stars{color:var(--gold);font-size:16px;letter-spacing:1px;}
.bc-rate .pts{font-weight:700;font-size:13px;color:var(--green);}
.bc-rate .meta{font-size:12.5px;color:var(--ink-faint);}
.bc-entry .visual{aspect-ratio:16/7;border-radius:10px;margin:6px 0 18px;position:relative;overflow:hidden;}
.bc-h{font-family:"Noto Sans JP",sans-serif;font-size:14px;font-weight:700;color:var(--green);
  margin:20px 0 8px;padding-left:11px;border-left:3px solid var(--gold);}
.bc-entry p{font-size:15px;line-height:1.95;color:#293241;margin:0 0 14px;}
.bc-fit{margin:0 0 14px;padding-left:1.2em;}
.bc-fit li{font-size:14.5px;line-height:1.85;color:#293241;margin:0 0 4px;}
.bc-score{font-size:15px;color:var(--ink);border-top:1px dashed var(--line);padding-top:12px;}
.bc-score b{font-family:"Noto Serif JP",serif;font-size:20px;color:var(--ochre);}

/* FAQ・調査概要セクション */
.bc-section{max-width:none;}
.bc-section>.bc-h2,.bc-section>.bc-faq,.bc-section>.bc-survey{max-width:720px;margin-left:auto;margin-right:auto;}
.bc-h2{font-size:22px;margin:0 auto 18px;padding-left:14px;border-left:4px solid var(--green);}
.bc-faq{display:flex;flex-direction:column;gap:12px;}
.bc-qa{background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden;box-shadow:var(--shadow);}
.bc-qa .q,.bc-qa .a{display:flex;gap:12px;padding:15px 18px;}
.bc-qa .q{border-bottom:1px solid var(--line-soft);}
.bc-qa .q span,.bc-qa .a span{flex-shrink:0;width:24px;height:24px;border-radius:6px;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;font-family:"Noto Serif JP",serif;}
.bc-qa .q span{background:var(--green);color:#fff;}
.bc-qa .a span{background:var(--ochre-tint);color:var(--ochre);}
.bc-qa .q p{margin:0;font-weight:600;font-size:15px;color:var(--ink);}
.bc-qa .a p{margin:0;font-size:14px;color:var(--ink-soft);line-height:1.85;}
.bc-survey{background:var(--green-tint);border-radius:12px;padding:22px 26px;margin-top:8px;}
.bc-survey h4{font-size:15px;margin-bottom:8px;}
.bc-survey p{font-size:13px;color:var(--ink-soft);line-height:1.85;margin:0;}
@media(max-width:640px){
  /* 各社カード：SPは端まで詰めず、読みやすい内側余白に */
  .bc-entry{padding:22px 18px;border-radius:14px;margin-bottom:16px;}
  .bc-entry .bc-ehead{gap:13px;align-items:center;margin-bottom:14px;}
  .bc-medal{width:48px;height:48px;}
  .bc-medal b{font-size:19px;}
  .bc-etitle h3{font-size:18px;line-height:1.5;}
  .bc-rate{gap:4px 10px;margin-top:6px;}
  .bc-rate .stars{font-size:15px;}
  .bc-rate .pts{font-size:12.5px;}
  .bc-rate .meta{width:100%;font-size:12px;}
  .bc-entry .visual{aspect-ratio:16/9;margin:4px 0 16px;}
  .bc-h{font-size:14px;margin:18px 0 8px;}
  .bc-entry p{font-size:15px;line-height:1.95;margin:0 0 14px;}
  .bc-fit li{font-size:15px;line-height:1.85;}
  .bc-num{width:44px;}
  .bc-num b{font-size:24px;}
  /* 表：文字は折り返して読みやすく（潰れず端まで使う） */
  .bc-table{font-size:13.5px;}
  .bc-table thead th,.bc-table td{padding:11px 12px;}
  .bc-rank td.rk{width:52px;}
  /* 本文の読みやすさ（サイズ＋行間＋段落間） */
  .article-body .lead-p{font-size:15.5px;line-height:1.95;}
  .article-body p{font-size:15px;line-height:1.95;margin:0 0 18px;}
  .article-body h2{font-size:19px;margin:34px 0 12px;}
  .bc-h2{font-size:19px;}
  .bc-qa .q p{font-size:15px;}
  .bc-qa .a p{font-size:14.5px;line-height:1.9;}
  .summary-box p{font-size:15px;line-height:1.9;}
  /* セクション間の余白を少し広げてリズムを出す */
  .cn-single .bc-section{margin:32px 0;}
  .cn-lead{margin:40px auto 40px;}
}

/* ===== ランキング記事：本文・タイトルを画像幅に統一（cn-single のみ） ===== */
.cn-single .article-head,
.cn-single .article-hero,
.cn-single .article-body,
.cn-single .bc-entry,
.cn-single .summary-box,
.cn-single .gl-note,
.cn-single .author-box,
.cn-single .bc-section > .bc-h2,
.cn-single .bc-section > .bc-faq,
.cn-single .bc-section > .bc-survey{max-width:880px !important;}

/* .wrap の外に出る要素は、どの画面幅でも左右16pxの余白を必ず確保（SPの端切れ防止） */
.bc-entry,
.cn-single .summary-box,
.cn-single .gl-note,
.cn-single .author-box{width:min(880px, 100% - 32px);margin-left:auto;margin-right:auto;}

/* ===== 記事末尾：監修者ボックス ===== */
.author-box{max-width:880px;margin:40px auto 0;background:var(--card);border:1px solid var(--line);
  border-radius:14px;padding:26px 28px 24px;box-shadow:var(--shadow);position:relative;}
.author-box .ab-label{position:absolute;top:-11px;left:24px;background:var(--green);color:var(--gold-hi);
  font-size:11px;font-weight:700;letter-spacing:.16em;padding:4px 14px;border-radius:6px;}
.author-box .ab-inner{display:flex;gap:22px;align-items:flex-start;margin-top:4px;}
.author-box .ab-photo{flex-shrink:0;width:80px;height:80px;border-radius:50%;overflow:hidden;
  background:var(--green-tint);border:2px solid var(--gold);position:relative;
  display:flex;align-items:center;justify-content:center;}
.author-box .ab-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:90% 45%;}
.author-box .ab-photo span{font-family:"Noto Serif JP",serif;font-weight:700;color:var(--green);font-size:22px;}
.author-box .ab-name{font-family:"Noto Serif JP",serif;font-size:18px;font-weight:700;color:var(--ink);}
.author-box .ab-name span{font-family:"Noto Sans JP",sans-serif;font-size:11px;color:var(--ink-faint);
  font-weight:500;margin-left:9px;letter-spacing:.06em;}
.author-box .ab-role{font-size:12px;color:var(--green);font-weight:700;margin:4px 0 10px;letter-spacing:.02em;}
.author-box .ab-bio{font-size:13px;color:var(--ink-soft);line-height:1.9;margin:0;}
@media(max-width:640px){
  .author-box{padding:22px 20px 20px;}
  .author-box .ab-inner{gap:16px;}
  .author-box .ab-photo{width:64px;height:64px;}
}

/* =========================================================
   各社ビジュアル：ブランドプレート（写真なし・人物なし・企業ごとにユニーク）
   ========================================================= */
.cn-plate{position:relative;aspect-ratio:16/6.4;border-radius:12px;margin:6px 0 20px;overflow:hidden;
  background:linear-gradient(var(--pa,140deg),#20325a,#0e1830);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:24px 20px;}
.cn-plate::before{content:"";position:absolute;inset:0;z-index:0;
  background:radial-gradient(130% 150% at 84% -12%,rgba(201,162,75,.16),transparent 58%);}
.cn-plate::after{content:"";position:absolute;z-index:0;width:190px;height:190px;border-radius:20px;
  border:1.5px solid rgba(201,162,75,.12);right:-54px;bottom:-72px;transform:rotate(var(--ra,18deg));}
.cn-plate.has-photo::before,.cn-plate.has-photo::after{display:none;}
.cn-plate .ph-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
.cn-plate-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(rgba(14,24,48,.5),rgba(14,24,48,.72));}
.cn-plate-rank{position:relative;z-index:2;font-family:"Noto Sans JP",sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.2em;color:var(--gold-hi);}
.cn-plate.top .cn-plate-rank{background:linear-gradient(150deg,var(--gold-hi),var(--gold));color:var(--green-dk);
  border-radius:999px;padding:3px 13px;letter-spacing:.14em;}
.cn-plate-name{position:relative;z-index:2;font-family:"Noto Serif JP",serif;font-size:24px;font-weight:600;
  letter-spacing:.06em;color:#fff;line-height:1.4;}
.cn-plate-stars{position:relative;z-index:2;color:var(--gold-hi);font-size:16px;letter-spacing:2px;}
.cn-plate-meta{position:relative;z-index:2;font-size:12px;color:#c7d3e6;letter-spacing:.05em;}
@media(max-width:640px){
  .cn-plate{aspect-ratio:16/8;padding:20px 16px;gap:6px;}
  .cn-plate-name{font-size:20px;}
  .cn-plate-stars{font-size:15px;}
}

/* =========================================================
   各社ブロック：評価内訳バー（総合点の内訳＝まだ出していない情報）
   ========================================================= */
.bc-breakdown{position:relative;overflow:hidden;margin:8px 0 18px;border-radius:12px;padding:18px 22px;
  background:linear-gradient(150deg,#20325a,#0e1830);}
.bc-breakdown::after{content:"";position:absolute;width:170px;height:170px;border-radius:20px;
  border:1.5px solid rgba(201,162,75,.10);right:-52px;bottom:-66px;transform:rotate(16deg);}
.bc-breakdown h5{position:relative;z-index:1;margin:0 0 13px;font-family:"Noto Sans JP",sans-serif;
  font-size:11px;font-weight:700;letter-spacing:.16em;color:var(--gold-hi);}
.bc-bd-row{position:relative;z-index:1;display:grid;grid-template-columns:140px 1fr 54px;gap:14px;
  align-items:center;margin-bottom:10px;}
.bc-bd-row:last-child{margin-bottom:0;}
.bc-bd-row .lb{font-size:12px;color:#c7d3e6;line-height:1.35;}
.bc-bd-row .track{height:8px;border-radius:4px;background:rgba(255,255,255,.13);overflow:hidden;}
.bc-bd-row .track i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,#c9a24b,#e7cd82);}
.bc-bd-row .vv{font-family:"Noto Serif JP",serif;font-size:14px;font-weight:700;color:#fff;text-align:right;white-space:nowrap;}
.bc-bd-row .vv small{font-family:"Noto Sans JP",sans-serif;font-size:10px;color:#9fb0cd;font-weight:400;}
@media(max-width:640px){
  .bc-breakdown{padding:15px 16px;}
  .bc-bd-row{grid-template-columns:92px 1fr 48px;gap:9px;}
  .bc-bd-row .lb{font-size:11px;}
}

/* =========================================================
   記事タイプ：シリーズchip／各社ボタン（求人＋HP横並び）
   ========================================================= */
.article-head .cats .cat-series{font-size:11.5px;font-weight:700;letter-spacing:.06em;color:#fff;
  background:var(--green);padding:4px 12px;border-radius:5px;}
.article-head .cats .cat-series.list{background:var(--ochre);}

/* 各社ブロックの行動ボタン（求人＝ソリッド／HP＝ライン） */
.bc-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px;}
.entry-cta.ghost{background:transparent;color:var(--green);border:1.5px solid var(--green);}
.entry-cta.ghost:hover{background:var(--green);color:#fff;}
.entry-cta.ghost svg{stroke:currentColor;}
.bc-actions .entry-cta{margin:0;}
@media(max-width:640px){
  .bc-actions{flex-direction:column;align-items:stretch;}
  .bc-actions .entry-cta{justify-content:center;}
}

/* おすすめ企業◯選（list型）の番号バッジ・目次 */
.bc-num{flex-shrink:0;width:58px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  line-height:1;color:var(--green);border-right:2px solid var(--gold);padding-right:8px;}
.bc-num b{font-family:"Noto Serif JP",serif;font-size:30px;font-weight:600;}
.bc-num small{font-size:10.5px;color:var(--ink-faint);margin-top:4px;letter-spacing:.04em;}
.list-index{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--gold);
  border-radius:12px;padding:20px 24px;margin:24px 0 8px;box-shadow:var(--shadow);}
.list-index .li-label{display:block;font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--ink-faint);
  text-transform:uppercase;margin-bottom:12px;}
.list-index ol{margin:0;padding-left:0;list-style:none;counter-reset:li;
  display:grid;grid-template-columns:1fr 1fr;gap:9px 24px;}
.list-index li{counter-increment:li;font-size:14px;color:var(--ink-soft);display:flex;gap:11px;line-height:1.5;}
.list-index li::before{content:counter(li,decimal-leading-zero);font-family:"Noto Serif JP",serif;font-weight:700;
  color:var(--gold);width:24px;flex-shrink:0;}
.list-index a:hover{color:var(--green);}
@media(max-width:640px){.list-index ol{grid-template-columns:1fr;}.bc-num{width:48px;}.bc-num b{font-size:26px;}}

/* =========================================================
   記事内リード獲得フォーム（掲載相談）
   ========================================================= */
.cn-lead{max-width:880px;margin:56px auto 52px;padding:0 24px;}
/* 記事内セクションの縦リズム（フォーム↔FAQ↔まとめ↔調査概要が詰まらないように） */
.cn-single .bc-section{margin:44px 0;}
.cn-single .summary-box{margin-top:44px;}
.cn-lead-inner{background:linear-gradient(150deg,#1c2c4d,#0e1830);border-radius:16px;
  padding:34px 36px 32px;color:#eef4fb;position:relative;overflow:hidden;box-shadow:0 8px 30px rgba(14,24,48,.22);}
.cn-lead-inner::before{content:"";position:absolute;right:-40px;top:-40px;width:180px;height:180px;
  background:radial-gradient(circle,rgba(201,162,75,.28),transparent 70%);}
.cn-lead-eyebrow{position:relative;font-size:11px;font-weight:700;letter-spacing:.16em;color:var(--gold-hi);text-transform:uppercase;}
.cn-lead h2{position:relative;font-size:24px;line-height:1.5;color:#fff;margin:10px 0 12px;}
.cn-lead-desc{position:relative;font-size:14px;color:#c7d3e6;line-height:1.85;margin:0 0 22px;}
.cn-lead-badge{display:inline-block;margin-top:10px;font-size:12px;font-weight:600;color:var(--green-dk);
  background:var(--gold-hi);border-radius:6px;padding:4px 12px;letter-spacing:.02em;}
.cn-lead-thanks{position:relative;background:rgba(255,255,255,.12);border:1px solid var(--gold);
  border-radius:10px;padding:14px 18px;margin:0 0 20px;font-size:14px;color:#fff;line-height:1.7;}
.cn-lead-thanks b{color:var(--gold-hi);}
.cn-lead-form{position:relative;}
.cn-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.cn-lead-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px;}
.cn-lead-grid label{display:flex;flex-direction:column;font-size:12.5px;font-weight:600;color:#cdd8ea;gap:6px;}
.cn-lead-grid label.full{grid-column:1 / -1;}
.cn-lead-grid label span{color:var(--gold-hi);margin-left:3px;}
.cn-lead-grid input,.cn-lead-grid select,.cn-lead-grid textarea{
  font-family:inherit;font-size:14px;color:var(--ink);background:#fff;border:1px solid transparent;
  border-radius:9px;padding:11px 13px;width:100%;}
.cn-lead-grid input:focus,.cn-lead-grid select:focus,.cn-lead-grid textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,162,75,.25);}
.cn-lead-submit{display:inline-flex;align-items:center;gap:8px;margin-top:18px;
  background:linear-gradient(150deg,var(--gold-hi),var(--gold));color:var(--green-dk);
  font-family:inherit;font-size:15px;font-weight:700;letter-spacing:.02em;
  border:none;border-radius:10px;padding:14px 30px;cursor:pointer;box-shadow:0 3px 12px rgba(201,162,75,.35);}
.cn-lead-submit:hover{filter:brightness(1.05);transform:translateY(-1px);}
.cn-lead-note{font-size:11.5px;color:#9db0cd;margin:14px 0 0;line-height:1.7;}
.cn-lead-note a{color:var(--gold-hi);text-decoration:underline;}
/* WP Form（Contact Form 7 / WPForms 等）を埋め込んだ時の見た目調整 */
.cn-lead-embed{position:relative;}
.cn-lead-embed label{display:block;font-size:12.5px;font-weight:600;color:#cdd8ea;margin-bottom:12px;}
.cn-lead-embed input:not([type=submit]):not([type=button]):not([type=checkbox]):not([type=radio]),
.cn-lead-embed textarea,.cn-lead-embed select{
  width:100%;font-family:inherit;font-size:14px;color:var(--ink);background:#fff;border:1px solid transparent;
  border-radius:9px;padding:11px 13px;margin-top:5px;}
.cn-lead-embed input:focus,.cn-lead-embed textarea:focus,.cn-lead-embed select:focus{
  outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,162,75,.25);}
.cn-lead-embed input[type=submit],.cn-lead-embed .wpcf7-submit,.cn-lead-embed button[type=submit]{
  width:auto;background:linear-gradient(150deg,var(--gold-hi),var(--gold));color:var(--green-dk);
  font-weight:700;border:none;border-radius:10px;padding:13px 30px;cursor:pointer;margin-top:8px;box-shadow:0 3px 12px rgba(201,162,75,.35);}
.cn-lead-embed .wpcf7-not-valid-tip{color:#ffd98a;font-size:12px;}
.cn-lead-embed .wpcf7-response-output{color:#fff;border-color:rgba(201,162,75,.5)!important;border-radius:8px;margin:12px 0 0;font-size:13px;}
@media(max-width:640px){
  .cn-lead{padding:0 16px;}
  .cn-lead-inner{padding:26px 20px 24px;border-radius:14px;}
  .cn-lead h2{font-size:20px;}
  .cn-lead-grid{grid-template-columns:1fr;}
  .cn-lead-submit{width:100%;justify-content:center;}
}

/* =========================================================
   BEST COMPANY シリーズ（まとめ一覧）ページ
   ========================================================= */
.series-hero{background:linear-gradient(150deg,#1c2c4d,#0e1830);color:#eef4fb;padding:52px 0 46px;
  position:relative;overflow:hidden;}
.series-hero::before{content:"";position:absolute;right:-60px;top:-60px;width:260px;height:260px;
  background:radial-gradient(circle,rgba(201,162,75,.22),transparent 70%);}
.series-hero .wrap{position:relative;}
.series-hero .sh-mark{font-size:12px;font-weight:700;letter-spacing:.28em;color:var(--gold-hi);text-transform:uppercase;}
.series-hero h1{font-size:34px;color:#fff;margin:12px 0 14px;letter-spacing:.04em;}
.series-hero p{font-size:15px;color:#c7d3e6;line-height:1.9;max-width:44em;margin:0 0 22px;}
.series-hero p strong{color:var(--gold-hi);font-weight:600;}
.series-hero .sh-gl{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:700;
  color:var(--green-dk);background:var(--gold-hi);border-radius:9px;padding:11px 22px;}
.series-hero .sh-gl:hover{filter:brightness(1.05);}
.series-main{padding:48px 24px 8px;}
.series-empty{color:var(--ink-faint);font-size:14px;padding:20px 0;}
@media(max-width:640px){
  .series-hero{padding:34px 0 30px;}
  .series-hero h1{font-size:26px;}
  .series-hero p{font-size:13.5px;}
  .series-main{padding:30px 16px 8px;}
}