/* 採用ノウハウ（/column/）ハブ・カテゴリ共通スタイル
   フォントとタイポ設定は v2.css（本体LP）と揃えている。
   自ホストの @font-face はここでは宣言しない: 本体サイトが
   システムフォントスタックで統一されているため、宣言すると
   /column/ 配下だけ別書体になる。 */
:root{
  --blue:#2563EB;--blue-dark:#174EA6;--navy:#0F1E36;
  --ink:#334155;--muted:#52657A;
  --line:#E2E8F0;--line-blue:#DCE7F7;--soft:#F8FAFC;--soft-blue:#F8FBFF;
  --orange:#F59225;--orange-d:#E47C0E;
  --max:1120px;
  --font-jp: system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", "Meiryo", sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:#fff;color:var(--ink);
  font-family:var(--font-jp);
  font-feature-settings:"palt";
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%}

/* ---- header ---- */
.header{position:sticky;top:0;z-index:10;background:#fff;border-bottom:1px solid #E8EEF5}
.header-inner{max-width:var(--max);margin:auto;padding:13px 24px;display:flex;align-items:center;gap:28px}
.brand{margin-right:auto;display:flex;align-items:center}
.brand img{width:205px;height:auto;display:block}
.nav{display:flex;gap:22px;align-items:center}
.nav a{font-size:14px;font-weight:700;white-space:nowrap}
.nav a:hover{color:var(--blue)}
.actions{display:flex;gap:9px}
.btn{padding:10px 16px;border-radius:8px;font-size:13px;font-weight:800;border:1px solid var(--blue);color:var(--blue);background:#fff;transition:.18s}
.btn.primary{background:var(--orange);border-color:var(--orange);color:#fff}
.btn:hover{transform:translateY(-1px)}
.btn.primary:hover{background:var(--orange-d);border-color:var(--orange-d)}

/* ---- layout ---- */
.breadcrumb{max-width:var(--max);margin:auto;padding:24px 24px 0;font-size:13px;color:#64748B}
.breadcrumb a:hover{color:var(--blue)}
.main{max-width:var(--max);margin:auto;padding:34px 24px 86px}
.hero,.section,.case-section,.service-strip,.cat-hero,.list-section,.related{max-width:920px;margin-left:auto;margin-right:auto}
.hero{margin-bottom:56px}
.hero h1{margin:0 0 17px;color:var(--navy);font-size:46px;line-height:1.38;letter-spacing:-.035em}
.hero p,.lead{color:#475569;font-size:15.5px;line-height:1.9}
.section{padding:58px 0 6px}
.section h2,.case-heading h2,.list-section h2{position:relative;margin:0 0 16px;padding-bottom:14px;color:var(--navy);font-size:28px;line-height:1.5;border-bottom:2px solid var(--line-blue)}
.section h2:after,.list-section h2:after{content:"";position:absolute;left:0;bottom:-2px;width:64px;height:2px;background:var(--blue)}

/* ---- 準備中（未公開ページ）: リンクにせず404を出さない ---- */
.is-pending{cursor:default;background:#FCFDFE}
.is-pending strong,.is-pending h3,.basic-row.is-pending .basic-copy strong{color:#7A899B}
.is-pending .arrow,.is-pending b{visibility:hidden}
/* .basic-copy span / .topic-row small 等の display:block より詳細度を上げる */
.is-pending .pending-tag{
  display:inline-block;margin:0 0 0 9px;padding:2px 7px;vertical-align:2px;
  border:1px solid #D8E0EA;border-radius:5px;background:#F3F6FA;
  color:#7A899B;font-size:11px;font-weight:700;letter-spacing:.02em;
}

/* ---- まず押さえたい基本 ---- */
.basic-list{border-top:1px solid var(--line)}
.basic-row{min-height:94px;padding:20px 8px;display:grid;grid-template-columns:1fr 26px;gap:20px;align-items:center;border-bottom:1px solid var(--line);transition:.18s}
a.basic-row:hover{background:#FBFDFF;padding-left:14px}
.basic-copy strong{display:block;color:#172B4D;font-size:18px;line-height:1.6}
.basic-copy span,.topic-row small,.media-card small{display:block;margin-top:7px;color:var(--muted);font-size:14px;line-height:1.65}
.arrow,.topic-row b,.media-card b,.issue-card b,.list-row b{color:var(--blue);font-size:20px}

/* ---- 採用課題から探す / テーマから探す ---- */
.issue-grid,.topic-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.issue-card,.topic-group,.media-card{border:1px solid var(--line);border-radius:14px;background:#fff}
.issue-card{position:relative;min-height:154px;padding:24px 48px 24px 24px;transition:.18s}
a.issue-card:hover,a.media-card:hover{border-color:#C9D9EE;background:#FBFDFF}
.issue-card strong{font-size:18px;color:#172B4D;line-height:1.55}
.issue-card span{display:block;margin-top:10px;color:var(--muted);font-size:14.5px;line-height:1.75}
.issue-card b{position:absolute;right:22px;bottom:20px}
.topic-grid{gap:28px}
.topic-group{padding:22px 24px 8px}
.topic-group h3{margin:0 0 6px;color:var(--navy);font-size:19px}
.topic-row{display:grid;grid-template-columns:1fr 24px;gap:16px;align-items:center;padding:17px 0;border-top:1px solid var(--line);transition:.18s}
a.topic-row:hover strong{color:var(--blue)}
.topic-row strong,.media-card strong{color:#17385E;font-size:16px;line-height:1.55}

/* ---- 媒体別ガイド ---- */
.media-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.media-card{min-height:98px;padding:18px;display:grid;grid-template-columns:1fr 22px;gap:12px;align-items:center;transition:.18s}

/* ---- 導入事例 ---- */
.case-section{margin-top:68px;padding-top:26px;border-top:1px solid #D8E4F2}
.case-heading{display:flex;align-items:center;gap:18px;margin-bottom:12px}
.case-heading h2{margin:0;padding:0;border:0}
.case-heading h2:after{display:none}
.case-index{padding:10px 13px;border:1px solid #BDD3F0;border-radius:8px;color:var(--blue);font-size:13px;font-weight:800;white-space:nowrap}
.case-card{display:grid;grid-template-columns:1.12fr .88fr;overflow:hidden;border:1px solid #DCE7F3;border-radius:16px;background:#fff;box-shadow:0 8px 24px rgba(15,30,54,.045);transition:.18s}
.case-card:hover{transform:translateY(-2px);border-color:#B9CFE9;box-shadow:0 12px 30px rgba(15,30,54,.08)}
.case-image{padding:16px;background:#F6F9FD;border-right:1px solid #DCE7F3;display:flex;align-items:center}
.case-image img{display:block;width:100%;height:auto;object-fit:contain}
.case-copy{padding:28px}
.case-tag{display:inline-flex;padding:6px 9px;background:#EFF5FD;color:#1D5FD1;border-radius:6px;font-size:12px;font-weight:800}
.case-company{margin:12px 0 6px;font-size:14px;font-weight:800;color:#40566E}
.case-copy h3{margin:0 0 12px;font-size:22px;line-height:1.65;color:#102B4E}
.case-copy p{margin:0 0 12px;font-size:15px;line-height:1.9;color:#43566F}
.case-link{color:var(--blue);font-size:14px;font-weight:800}

/* ---- カテゴリページ ---- */
.cat-hero{padding:34px 0 54px}
.cat-hero .back{margin-bottom:24px;font-size:14px;font-weight:700}
.cat-hero .back a{color:var(--blue)}
.cat-hero h1{margin:0 0 16px;color:var(--navy);font-size:46px;line-height:1.38;letter-spacing:-.035em}
.cat-hero p{margin:0;max-width:760px;color:#475569;font-size:16px;line-height:1.95}
.list-section{padding:54px 0 18px;border-top:1px solid #D8E4F2}
.list-section h2{margin-bottom:12px}
.list{border-top:1px solid var(--line)}
.list-row{display:grid;grid-template-columns:1fr 28px;gap:22px;align-items:center;min-height:116px;padding:23px 8px;border-bottom:1px solid var(--line);transition:.18s}
a.list-row:hover{background:#FBFDFF;padding-left:14px}
.list-row h3{margin:0;color:#17385E;font-size:18px;line-height:1.65}
.list-row p{margin:7px 0 0;color:var(--muted);font-size:14.5px;line-height:1.7}
.list-row b{font-size:21px}
.related{padding:58px 0 8px}
.related h2{margin:0 0 16px;font-size:24px;color:var(--navy)}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.related-grid a,.related-grid .is-pending{display:block;padding:22px;border:1px solid var(--line);border-radius:12px;transition:.18s}
.related-grid a:hover{border-color:#C9D9EE;background:#FBFDFF}
.related-grid strong{display:block;color:#17385E;line-height:1.55}
.related-grid span{display:block;margin-top:9px;color:var(--muted);font-size:13.5px;line-height:1.65}

/* ---- サービス訴求 ---- */
.service-strip{margin-top:58px;padding:24px 26px;display:flex;align-items:center;justify-content:space-between;gap:28px;background:var(--soft-blue);border:1px solid #DCE7F3;border-radius:14px}
.service-strip h2{margin:0 0 7px;color:#102B4E;font-size:20px;line-height:1.55}
.service-strip p{margin:0;color:var(--muted);font-size:14px;line-height:1.75}
.service-actions{display:flex;gap:9px;flex:none}
.service-actions a{padding:12px 15px;border-radius:9px;font-size:13px;font-weight:800;white-space:nowrap;transition:.18s}
.service-actions .secondary{border:1px solid #BDD3F0;color:#1D5FD1;background:#fff}
.service-actions .primary{background:var(--orange);color:#fff;border:1px solid var(--orange)}
.service-actions .primary:hover{background:var(--orange-d);border-color:var(--orange-d)}

/* ---- footer ---- */
.footer{border-top:1px solid var(--line);background:var(--soft)}
.footer-inner{max-width:var(--max);margin:auto;padding:36px 24px;display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center}
.footer img{width:190px;height:auto}
.footer-links{display:flex;gap:18px;flex-wrap:wrap}
.footer-links a{font-size:13px;font-weight:700;color:#475569}
.footer-links a:hover{color:var(--blue)}
.footer-meta{grid-column:1/-1;margin:0;font-size:12px;line-height:1.85;color:#64748B}
.footer-meta a{font-weight:700;color:#475569}

@media(max-width:960px){
  .nav{display:none}
  .issue-grid,.topic-grid,.case-card{grid-template-columns:1fr}
  .media-grid{grid-template-columns:repeat(2,1fr)}
  .case-image{border-right:0;border-bottom:1px solid #DCE7F3}
  .related-grid{grid-template-columns:1fr}
}
@media(max-width:680px){
  .header-inner{padding:10px 14px}
  .brand img{width:165px}
  .actions .ghost{display:none}
  .main{padding:26px 15px 58px}
  .breadcrumb{padding:18px 15px 0}
  .hero h1,.cat-hero h1{font-size:31px;line-height:1.5}
  .section h2,.list-section h2,.case-heading h2{font-size:23px}
  .media-grid{grid-template-columns:1fr}
  .list-row h3{font-size:16px}
  .case-copy{padding:22px 20px}
  .service-strip{flex-direction:column;align-items:flex-start}
  .service-actions{width:100%;display:grid;grid-template-columns:1fr 1fr}
  .service-actions a{text-align:center}
  .footer-inner{grid-template-columns:1fr}
}