/* ============================================================
   事業・サービス（課題別4カテゴリ）用の追加スタイル  2026-10-20
   読み込み先：service.html / service-cat-*.html / service-*.html（ids.css の後）
   色・余白は ids.css のトークン（--red, --yellow, --line, --s1〜--s7 など）だけを使う
   ============================================================ */
:root{
  --cat-text:#52565c;   /* 本文の補足色（ids.css の .lead と同じ値） */
  --cat-no-bg:var(--red);
  --cat-no-fg:#fff;
}

/* --- カテゴリ番号（メガメニューの h6 .bg と同じ見せ方） --- */
.cat-no{
  display:inline-block;font-family:var(--en);font-size:11px;font-weight:700;letter-spacing:.12em;line-height:1;
  padding:5px 10px;color:var(--cat-no-fg);background:var(--cat-no-bg);
}

/* --- サービスカードのグリッド（枚数で列数を変える。高さは中身なり） --- */
.svc-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s3);align-items:stretch;}
.svc-cards.n5{grid-template-columns:repeat(5,minmax(0,1fr));}
.svc-cards.n2{grid-template-columns:repeat(2,minmax(0,1fr));}
.svc-cards .stp{min-width:0;}
.svc-cards .stp h3{overflow-wrap:anywhere;}
.svc-cards .stp p{overflow-wrap:anywhere;}
.svc-cards .stp .more .arr{display:inline-block;transition:transform .3s var(--ease-sweep);}
.svc-cards .stp:hover .more .arr{transform:translateX(4px);}
@media (max-width:1180px){
  .svc-cards{grid-template-columns:repeat(2,minmax(0,1fr));}
  .svc-cards.n5{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (max-width:980px){
  .svc-cards.n5{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:640px){
  .svc-cards,.svc-cards.n5,.svc-cards.n2{grid-template-columns:1fr;gap:var(--s2);}
  /* スマホは縦に長くなるので、アイコンを見出しの左に置いて詰める */
  .svc-cards .stp{display:grid;grid-template-columns:34px 1fr;column-gap:var(--s2);row-gap:8px;align-items:center;}
  .svc-cards .stp .ico{width:34px;height:34px;margin:0;}
  .svc-cards .stp p,.svc-cards .stp .more{grid-column:1 / -1;}
}

/* --- 一覧ページ：上部の課題インデックス --- */
.cat-index{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s2);}
.cat-index a{
  display:flex;flex-direction:column;gap:6px;height:100%;background:#fff;border:1px solid var(--line);
  padding:var(--s3);color:var(--ink);
}
.cat-index b{font-size:17px;font-weight:900;line-height:1.5;}
.cat-index small{font-size:13px;color:var(--cat-text);line-height:1.7;flex:1;}
.cat-index .go{font-family:var(--en);font-weight:700;font-size:13px;color:var(--red);}
.cat-index .cat-no{align-self:flex-start;}
@media (max-width:1180px){.cat-index{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:640px){.cat-index{grid-template-columns:1fr;}}

/* アンカーで飛んだとき、固定ヘッダーの下に隠れないように */
main [id]{scroll-margin-top:var(--hd-h,110px);}

/* --- 一覧ページ：カテゴリのブロック --- */
.cat-head{
  display:grid;grid-template-columns:auto 1fr auto;gap:var(--s2) var(--s3);align-items:center;
  padding-bottom:var(--s3);margin-bottom:var(--s4);border-bottom:1px solid var(--line);
}
.cat-head h2{margin:0;font-size:clamp(22px,2.4vw,30px);}
.cat-head .cat-issue{margin-top:4px;font-size:15px;color:var(--cat-text);line-height:1.7;}
.cat-head .btn{white-space:nowrap;}
@media (max-width:720px){
  .cat-head{grid-template-columns:1fr;}
  .cat-head .cat-no{justify-self:start;}
  .cat-head .btn{justify-self:start;}
}

/* --- 外部ブランドへの誘導（SunnyCloud / IDS ベトナムオフショア開発） --- */
.ext-brand{
  display:grid;grid-template-columns:1fr auto;gap:var(--s3) var(--s4);align-items:center;
  background:#fff;border:1px solid var(--line);border-left:3px solid var(--yellow);padding:var(--s3) var(--s4);
}
.ext-brand .eb-kicker{font-family:var(--en);font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--gold);}
.ext-brand h3{font-family:var(--en);font-size:22px;font-weight:800;margin-top:4px;}
.ext-brand h3 small{font-family:var(--en);font-size:12px;font-weight:600;color:var(--gray);margin-left:.4em;}
.ext-brand p{font-size:14px;color:var(--cat-text);margin-top:6px;}
.cat-sec .ext-brand{margin-top:var(--s4);}
.ext-brand-lg{padding:var(--s4) var(--s5);}
@media (max-width:720px){
  .ext-brand,.ext-brand-lg{grid-template-columns:1fr;padding:var(--s3);}
  .ext-brand .btn{justify-self:start;}
}

/* --- 一覧ページ：AIで、事業を伸ばす（ステップ別のリンク） --- */
.ai-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3);}
.ai-step{background:#fff;border:1px solid var(--line);padding:var(--s3);}
.ai-step .st-no{font-family:var(--en);font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--red);}
.ai-step h3{font-size:17px;font-weight:900;line-height:1.5;margin-top:4px;}
.ai-step ul{margin-top:var(--s2);}
.ai-step li{border-top:1px solid var(--line);}
.ai-step li a{display:flex;justify-content:space-between;gap:var(--s2);padding:10px 0;font-size:14.5px;font-weight:700;transition:color .3s var(--ease-sweep);}
.ai-step li a span{color:var(--red);}
.ai-step li a:hover{color:var(--red);}
@media (max-width:980px){.ai-steps{grid-template-columns:1fr;}}

/* --- カテゴリページ：課題の見出し --- */
.cat-intro{max-width:52em;margin-bottom:var(--s5);}
.cat-intro h2{font-size:clamp(24px,2.8vw,34px);}
.cat-intro .lead{max-width:none;}

/* --- ほかのカテゴリへ --- */
.cat-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3);}
.cat-nav a{
  display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto 1fr;column-gap:var(--s2);row-gap:6px;
  height:100%;background:#fff;border:1px solid var(--line);padding:var(--s3);color:var(--ink);
}
.cat-nav .cat-no{grid-column:1;justify-self:start;}
.cat-nav b{grid-column:1;font-size:18px;font-weight:900;line-height:1.5;}
.cat-nav small{grid-column:1;font-size:13.5px;color:var(--cat-text);line-height:1.7;}
.cat-nav .go{grid-column:2;grid-row:1 / span 3;align-self:center;font-family:var(--en);font-weight:700;font-size:18px;color:var(--red);transition:transform .3s var(--ease-sweep);}
.cat-nav a:hover .go{transform:translateX(4px);}
@media (max-width:980px){.cat-nav{grid-template-columns:1fr;}}

/* --- 詳細ページ：同じカテゴリの他のサービス --- */
.same-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--s2) var(--s3);margin-bottom:var(--s3);}
.same-head h2{font-size:clamp(20px,2.2vw,26px);margin-top:6px;}
.same-head .lx{white-space:normal;}

/* ids.css の .rel は3列固定なので、文字量・画面幅に合わせて折り返す（サービス系ページだけに効く） */
.rel{grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));}
.rel a{gap:var(--s2);min-width:0;line-height:1.6;}
.rel-ico a .ico{width:34px;height:34px;}

/* 詳細ページの FV：長い見出しでもはみ出さない */
.page-hero h1{overflow-wrap:anywhere;}
.c h3,.c p{overflow-wrap:anywhere;}