/* ============================================================
   Tempura OS — 業界別ページ（/industries, /industries/<slug>）専用CSS
   ------------------------------------------------------------
   assets/css/ep.css のトークン（--ink --text --text-sub --line --base-2
   --navy --blue-500 --blue-600 --card-2 --shadow --r-card 等）と
   ユーティリティ（.wrap .sec .shead .btn .ctapair .cback 等）に相乗りする。
   新規パーツのクラスは ind- 接頭辞。ep.css の既存クラスは上書きしない。
   ============================================================ */

/* ---------- パンくず ---------- */
.ind-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.04em;color:var(--text-sub);
  margin-bottom:20px}
.ind-crumb a:hover{color:var(--blue-600)}
.ind-crumb i{font-style:normal;opacity:.5}

/* ---------- ヒーロー（一覧・業界ページ共通） ---------- */
.ind-hero{padding-top:clamp(104px,13vh,140px);padding-bottom:clamp(40px,4.4vw,60px)}
.ind-hero h1{font-size:clamp(28px,22px + 1.8vw,44px);font-weight:900;line-height:1.5}
.ind-hero__lead{margin-top:14px;font-size:clamp(15px,14.5px + .3vw,17.5px);line-height:2;
  color:var(--text-sub);max-width:38em}

/* 業界ページのヒーロー：左に見出し、右にその業界の服装と持ち物で描いた人物（2026-09-27） */
.ind-hero--art .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,500px);align-items:center;gap:clamp(24px,4vw,64px)}
.ind-hero__art{display:block;width:100%;height:auto}
@media(max-width:900px){
  .ind-hero--art .wrap{grid-template-columns:1fr}
  .ind-hero__art{max-width:420px}
}

/* ---------- 一覧ページ：3グループ×3カード ---------- */
.ind-group + .ind-group{margin-top:clamp(48px,5vw,72px)}
.ind-group__h{font-family:var(--f-mono);font-size:12px;letter-spacing:.16em;color:var(--blue-600);
  margin-bottom:16px}
.ind-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,22px)}
.ind-card{
  display:grid;gap:10px;align-content:start;background:#fff;color:var(--ink);
  border:1px solid var(--line);border-radius:var(--r-card);padding:clamp(20px,2.2vw,26px);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease);
}
.ind-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.ind-card__art{display:block;width:132px;height:auto;margin:-6px 0 2px -8px}
.ind-card b{font-size:17px;font-weight:900;line-height:1.5}
.ind-card p{font-size:13.5px;line-height:1.9;color:var(--text-sub)}
.ind-card__go{margin-top:2px;font-size:13px;font-weight:700;color:var(--blue-600)}
.ind-card:hover .ind-card__go{text-decoration:underline;text-underline-offset:3px}
@media(max-width:1023px){.ind-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.ind-grid{grid-template-columns:1fr}}

/* ---------- 業界ページ：Tempura OSでの進め方（左テキスト・右スクショ） ---------- */
.ind-steps{display:grid;gap:clamp(16px,2vw,24px);max-width:1080px;margin-inline:auto}
.ind-step{
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(18px,2.6vw,40px);
  align-items:center;background:#fff;color:var(--ink);border:1px solid var(--line);
  border-radius:var(--r-card);padding:clamp(20px,2.6vw,32px);
}
.ind-step__no{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.18em;color:var(--blue-600)}
.ind-step__agent{display:flex;align-items:center;gap:9px;margin:12px 0 14px}
.ind-step__agent .dia{width:20px;height:20px;flex:none;background:var(--mark) center/contain no-repeat}
.ind-step__agent a{font-size:12.5px;font-weight:700;color:var(--blue-600)}
.ind-step__agent a:hover{text-decoration:underline;text-underline-offset:3px}
.ind-step__tx h3{margin:0 0 10px;font-size:clamp(17px,16px + .5vw,21px);text-wrap:balance}
.ind-step__tx > p:last-child{font-size:14px;line-height:1.95;color:var(--text-sub)}
.ind-step__shot{background:var(--card-2);border-radius:12px;padding:14px}
.ind-step__shot img{width:100%;height:auto;display:block;border-radius:8px}
@media(max-width:768px){
  .ind-step{grid-template-columns:1fr}
  .ind-step__shot{order:2}
}

/* ---------- 業界ページ：ほかの業界（名前だけのコンパクトな並び） ---------- */
.ind-more{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;
  max-width:1080px;margin-inline:auto}
.ind-more a{
  display:block;background:#fff;color:var(--text);border:1px solid var(--line);border-radius:2px;
  padding:13px 16px;font-size:13.5px;font-weight:700;text-align:center;
  transition:background .18s var(--ease),border-color .18s var(--ease);
}
.ind-more a:hover{background:var(--base-2);border-color:var(--blue-200)}
@media(max-width:900px){.ind-more{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.ind-more{grid-template-columns:1fr}}