/* 業界・用途別（page-industries.php）
   デザイン: build_a_sub4.py industries_page()。業界の写真は本番の業界画像 */

/* ページタイトル帯: 見出しを写真窓の手前で1行に収める（デザイン 54px） */
@media (min-width: 901px) {
  .rn-hero__title { font-size: clamp(34px, 3.75vw, 54px); }
}

/* 01 対応業界: 60° に傾けたタイル（高さ・上端を揃える） */
.rn-ind__tiles {
  --tile-h: 260px;
  --tile-over: calc(var(--tile-h) * var(--rn-slope)); /* 傾きによる上下端の横ずれ（150px） */
  display: flex; gap: 10px; margin-top: 44px; padding: 0 calc(var(--tile-over) / 2);
}
.rn-ind__tiles > li { flex: 1 1 0; min-width: 0; }
.rn-ind__tile { position: relative; display: block; height: var(--tile-h); overflow: hidden; background: var(--rn-ink2); transform: skewX(-30deg); color: #fff; }
.rn-ind__tile-img { position: absolute; top: 0; left: calc(var(--tile-over) / -2 - 10px); width: calc(100% + var(--tile-over) + 20px); max-width: none; height: 100%; object-fit: cover; transform: skewX(30deg); transition: transform .5s; }
.rn-ind__tile:hover .rn-ind__tile-img { transform: skewX(30deg) scale(1.05); }
.rn-ind__tile-band { position: absolute; left: 0; right: 0; bottom: 0; height: 122px; background: rgba(17, 18, 20, 0.9); }
.rn-ind__tile-body { position: absolute; left: 0; right: 0; bottom: 0; height: 122px; padding: 16px 0 0 69px; box-sizing: border-box; transform: skewX(30deg); transform-origin: left bottom; }
.rn-ind__tile-body h3 { margin-top: 8px; font-size: 21px; line-height: 1.4; color: #fff; white-space: nowrap; }
.rn-ind__tile-body .rn-mono { display: block; font-size: 10.5px; color: var(--rn-gold-on-dark); }
.rn-ind__badge { display: inline-block; padding: 2px 10px; background: var(--rn-gold); color: var(--rn-ink); font-size: 11.5px; font-weight: 700; line-height: 1.6; }
.rn-ind__badge--ink { background: var(--rn-ink); color: #fff; }

/* 02 業界別の課題と解決策
   見出し（タグ＋業界名）の下端に「主な課題」「解決アプローチ」の注記を揃え、表と箇条書きの上端を揃える */
.rn-ind__details { margin-top: 36px; border-bottom: 1px solid var(--rn-line-light); }
.rn-ind__detail {
  display: grid;
  grid-template-columns: 190px 320px minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "photo head issues-h approach-h"
    "photo spec issues approach";
  grid-template-rows: auto 1fr;
  column-gap: 36px;
  padding: 30px 0;
  border-top: 1px solid var(--rn-line-light);
}
.rn-ind__detail-photo { grid-area: photo; height: 170px; align-self: start; --rn-tombo: #fff; }
.rn-ind__detail-photo.rn-tombo::before { left: 10px; top: 8px; width: 14px; height: 14px; }
.rn-ind__detail-photo.rn-tombo::after { right: 10px; bottom: 8px; width: 14px; height: 14px; }
.rn-ind__detail-head { grid-area: head; }
.rn-ind__detail-tagrow { display: flex; align-items: center; gap: 10px; }
.rn-ind__detail-tagrow .rn-mono { font-size: 11px; color: rgba(17, 18, 20, 0.6); }
.rn-ind__detail-head h3 { margin-top: 10px; font-size: 26px; line-height: 1.3; color: var(--rn-ink); }
.rn-ind__spec { grid-area: spec; margin-top: 12px; align-self: start; }
.rn-ind__spec .rn-spec__row { gap: 0; padding: 10px 0; }
.rn-ind__spec .rn-spec__key { width: 90px; }
.rn-ind__spec .rn-spec__key b { display: block; }
.rn-ind__spec .rn-spec__val { font-size: 14px; line-height: 1.8; }
.rn-ind__block-head { align-self: end; font-family: var(--rn-font-mono); font-size: 11px; font-weight: 400; letter-spacing: .08em; line-height: 1.6; color: var(--rn-ink); }
.rn-ind__block-head--issues { grid-area: issues-h; }
.rn-ind__block-head--approach { grid-area: approach-h; }
.rn-ind__marks { margin-top: 12px; align-self: start; }
.rn-ind__marks--issues { grid-area: issues; }
.rn-ind__marks--approach { grid-area: approach; }
.rn-ind__marks li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--rn-line-light); font-size: 13.5px; line-height: 1.7; color: var(--rn-ink); }
.rn-ind__marks .rn-mark { width: 10px; height: 10px; }

/* 03 方式 × 用途 早見表 */
.rn-ind__matrix { margin-top: 40px; padding: 30px 36px; background: #fff; }
.rn-ind__matrix-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.rn-ind__matrix-table thead th { padding: 0 0 12px; font-size: 18px; text-align: center; color: var(--rn-ink); }
.rn-ind__matrix-table thead th:first-child { width: 320px; font-family: var(--rn-font-mono); font-size: 11px; font-weight: 400; letter-spacing: .08em; text-align: left; color: rgba(17, 18, 20, 0.65); }
.rn-ind__matrix-table tbody th, .rn-ind__matrix-table tbody td { height: 64px; border-top: 1px solid var(--rn-line-light); }
.rn-ind__matrix-table tbody tr:last-child th, .rn-ind__matrix-table tbody tr:last-child td { border-bottom: 1px solid var(--rn-line-light); }
.rn-ind__matrix-table tbody th { padding-right: 16px; font-size: 15px; font-weight: 700; text-align: left; color: var(--rn-ink); }
.rn-ind__matrix-table tbody td { font-size: 22px; text-align: center; color: rgba(17, 18, 20, 0.45); }
.rn-ind__matrix-table td[data-rating="◎"] { color: var(--rn-ink); }
.rn-ind__matrix-table td[data-rating="○"] { color: rgba(17, 18, 20, 0.75); }
.rn-ind__matrix-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-top: 18px; }
.rn-ind__legend { display: flex; gap: 24px; }
.rn-ind__legend li { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--rn-ink); }
.rn-ind__legend b { font-size: 18px; }
.rn-ind__note { font-size: 13px; color: var(--rn-sub-light); }

/* タブレット: 傾けたタイルは文字が収まらないので、まっすぐの3列に組み替える */
@media (max-width: 1240px) {
  .rn-ind__tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0; }
  .rn-ind__tile { transform: none; }
  .rn-ind__tile-img { left: 0; width: 100%; transform: none; }
  .rn-ind__tile:hover .rn-ind__tile-img { transform: scale(1.05); }
  .rn-ind__tile-body { padding-left: 24px; transform: none; }
  .rn-ind__detail {
    grid-template-columns: 190px minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "photo head head"
      "photo spec spec"
      "issues-h issues-h approach-h"
      "issues issues approach";
    grid-template-rows: auto auto auto auto;
    row-gap: 0;
  }
  .rn-ind__detail-head { padding-left: 0; }
  .rn-ind__block-head { margin-top: 24px; }
  .rn-ind__detail { grid-template-columns: 190px minmax(0, 1fr) minmax(0, 1fr); }
  .rn-ind__detail-photo, .rn-ind__detail-head, .rn-ind__spec { margin-left: 0; }
}
@media (max-width: 900px) {
  .rn-ind__tiles { --tile-h: 200px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 28px; }
  .rn-ind__tiles > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .rn-ind__tile-band, .rn-ind__tile-body { height: 104px; }
  .rn-ind__tile-body { padding: 14px 0 0 14px; }
  .rn-ind__tile-body h3 { font-size: 17px; white-space: normal; }
  .rn-ind__details { margin-top: 28px; }
  .rn-ind__detail {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "photo" "head" "spec" "issues-h" "issues" "approach-h" "approach";
    padding: 24px 0 28px;
  }
  .rn-ind__detail-photo { height: auto; aspect-ratio: 16 / 9; margin-bottom: 16px; }
  .rn-ind__detail-head h3 { font-size: 22px; }
  .rn-ind__spec .rn-spec__row { flex-direction: row; gap: 0; }
  .rn-ind__spec .rn-spec__key { width: 90px; }
  .rn-ind__block-head { margin-top: 22px; }
  .rn-ind__marks { margin-top: 8px; }
  .rn-ind__matrix { margin-top: 28px; padding: 18px 14px; }
  .rn-ind__matrix-table thead th { font-size: 14px; }
  .rn-ind__matrix-table thead th:first-child { width: 36%; font-size: 10px; }
  .rn-ind__matrix-table thead th:first-child span { display: none; }
  .rn-ind__matrix-table tbody th { padding-right: 8px; font-size: 12.5px; line-height: 1.5; }
  .rn-ind__matrix-table tbody th, .rn-ind__matrix-table tbody td { height: 56px; }
  .rn-ind__matrix-table tbody td { font-size: 17px; }
  .rn-ind__legend { gap: 16px; }
}