/* ===== hero (KV, blue theme) ===== */
.usecase_mv {
  position: relative;
  margin-top: 86px;
}

.usecase_mv .mv_kv_photo {
  display: block;
  width: 100%;
  aspect-ratio: 1440 / 324;
  object-fit: cover;
}

.usecase_mv .mv_kv_text {
  position: absolute;
  left: 16%; /* Figma x=230/1440 */
  top: 20%;
}

.usecase_mv .mv_title span {
  display: table;
  background: #fff;
  color: #00a7ff;
  font-size: 2.907vw; /* Figma 41.865px @1440 */
  font-weight: bold;
  line-height: 1;
  padding: 0.76vw 1.11vw; /* Figma 11px/16px @1440 */
  margin-bottom: 1.11vw; /* Figma 箱間16px */
  /* Figma: 白ボックスのドロップシャドウ 0 4.652px 13.955px #005797（@1440→vw） */
  box-shadow: 0 0.323vw 0.969vw #005797;
}

.usecase_mv .mv_desc {
  position: absolute;
  left: 16%;
  top: 71%;
  color: #fff;
  font-size: 1.615vw; /* Figma 23.258px @1440 */
  line-height: 1.2; /* Figma 28px */
  text-shadow: 0 0.323vw 0.969vw #005797; /* Figma 0 4.652px 13.955px #005797 */
  white-space: nowrap;
  margin: 0;
}

/* ===== lead paragraph (below hero) ===== */
.usecase_lead {
  padding: 40px 40px 89px;
  text-align: center;
}

.usecase_lead p {
  margin: 0;
  font-size: 16px;
  line-height: 2;
  color: #000;
}

/* ===== section head (h2 + red bar + english label) ===== */
.usecase_section_head {
  text-align: center;
  margin-bottom: 40px;
}

.usecase_section_head h2 {
  font-size: 36px;
  font-weight: 500;
  font-family: inherit;
  color: #000;
  line-height: 1.2;
  margin: 0;
  height: auto;
  display: block;
  width: auto;
}

.usecase_section_head h2::before {
  display: none;
}

.usecase_section_head h2::after {
  content: "";
  display: block;
  width: 82px;
  height: 4px;
  background: #e60039;
  margin: 16px auto 0;
}

.usecase_section_head.no_bar h2::after {
  display: none;
}

.usecase_section_head.no_bar h2 {
  color: #004f8f;
  font-size: 32px;
  font-weight: bold;
}

.usecase_section_head .section_label {
  color: #e60039;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 1px;
  display: block;
  margin-top: 8px;
}

/* ===== 選定のポイント ===== */
.usecase_select {
  background: #eaf3fb;
  padding: 0 40px 36px; /* 2列目下端→背景切替（Figma準拠36px） */
  display: flow-root;
}

.usecase_select_head {
  text-align: center;
  margin: -49px auto 40px;
  position: relative;
  z-index: 2;
}

.usecase_select_head .badge {
  display: inline-flex;
  align-items: center;
}

.usecase_select_head .badge_circle {
  width: 98px;
  height: 98px;
  border-radius: 50%;
  background: #00bbff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: -17px;
  position: relative;
  z-index: 2;
}

.usecase_select_head .badge_circle img {
  width: 42px;
  height: 80px;
}

.usecase_select_head .badge_bar {
  width: 364px;
  height: 52px;
  box-sizing: border-box;
  background: #00bbff;
  color: #fff;
  font-size: 32px;
  font-weight: bold;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 40px;
  line-height: 1;
  letter-spacing: 2px;
}

.usecase_select_cols {
  display: grid;
  grid-template-columns: repeat(3, 308px);
  gap: 28px;
  justify-content: center;
  max-width: 1100px;
  margin: 0 auto;
}

.usecase_select_col_head {
  background: #49769f;
  color: #fff;
  height: 92px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

.usecase_select_col_head .main {
  font-size: 28px;
  font-weight: bold;
  line-height: 1.3;
  margin: 0;
}

.usecase_select_col_head .sub {
  font-size: 20px;
  font-weight: bold;
  line-height: 1.2;
  margin: 4px 0 0;
}

.usecase_select_col_head::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -32px;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 25.5px solid transparent;
  border-right: 25.5px solid transparent;
  border-top: 24px solid #49769f;
}

.usecase_select_card {
  background: #fff;
  border: 2px solid #b3d2df;
  margin-top: 16px; /* カード間隔（Figma準拠） */
  padding: 20px 24px 24px;
  text-align: center;
}

/* ヘッダー直後の1枚目だけ、三角の先端との隙間を確保（Figma準拠7px） */
.usecase_select_col_head + .usecase_select_card {
  margin-top: 39px;
}

.usecase_select_card .card_sub {
  font-size: 16px;
  font-weight: bold;
  margin: 0 0 4px;
}

.usecase_select_card .card_label {
  font-size: 28px;
  font-weight: bold;
  margin: 0 0 16px;
  line-height: 1.2;
}

.usecase_select_card .card_photos {
  display: flex;
  gap: 12px;
  justify-content: flex-start; /* 写真1枚のカードは左スロットに左寄せ（Figma準拠） */
  margin-bottom: 16px;
}

/* 各写真は必ずスロット要素で包む（リンク有=<a> / 無=<span>）。スロットが半幅、imgが中身100%。
   一律に包むことで連動退色の :nth-child（スロット位置基準）が壊れない。 */
.usecase_select_card .card_photos > a,
.usecase_select_card .card_photos > span {
  display: block;
  width: calc(50% - 6px); /* 2枚＋gap12px=100%に収める。1枚時は左スロット幅 */
  aspect-ratio: 120 / 60;
}

.usecase_select_card .card_photos img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* 写真リンク自体のホバーではフェードさせない（連動退色はpillホバー起点） */
.usecase_select_card .card_photo_link:hover {
  opacity: 1;
}

.usecase_select_card .card_models {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  min-height: 60px;
}

.usecase_select_card .model_pill {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start; /* 文字は左寄せ（Figma準拠） */
  gap: 8px;
  position: relative;
  width: 180px;
  height: 26px;
  padding-left: 16px; /* Figma: テキスト左端16px */
  background: #fff;
  border: 1px solid #e60039;
  color: #e60039;
  border-radius: 16.5px;
  font-size: 13px;
  font-weight: bold;
  text-decoration: none;
  box-sizing: border-box;
}

.usecase_select_card .model_pill img {
  position: absolute;
  right: 5px;
  width: 14px;
  height: 14px;
  transform: rotate(-90deg);
}

/* ===== モデルpillのホバー（Figma card-select バリアント2/3） =====
   ホバーしたpillを赤ベタ塗り＋白矢印で強調し、同カード内のもう一方のpillと、
   それに対応する写真を退色させる（pillと写真はindex連動: 上pill↔左写真 / 下pill↔右写真）。 */
.usecase_select_card .model_pill {
  transition: background-color 0.3s, color 0.3s, opacity 0.3s;
}

.usecase_select_card .model_pill img {
  transition: filter 0.3s, opacity 0.3s;
}

.usecase_select_card .card_photos > a,
.usecase_select_card .card_photos > span {
  transition: opacity 0.3s;
}

/* 矢印は2枚（デフォルト=赤丸白三角 / ホバー=白丸赤三角）をdisplayトグル。
   丸と三角がSVG内で同一 var(--fill-0) 共有のため<img>のCSS着色は不可→別アセット切替。
   デフォルトはホバー用（白丸赤三角）を隠す。 */
.usecase_select_card .model_pill .pill_arrow_hover {
  display: none;
}

/* pillと写真は index 連動（上pill↔左写真 / 下pill↔右写真）。
   モデルi の pill か写真の「どちらをホバーしても」同じアクティブ状態にするため、
   :has(A, B)（pill_i:hover または 写真_i:hover）で拾う。
   アクティブ: pill_i を赤ベタ＋白矢印、もう一方の pill と写真を退色。 */

/* --- index1（上pill / 左写真）アクティブ --- */
.usecase_select_card:has(.card_models > .model_pill:nth-child(1):hover, .card_photos > :nth-child(1):hover) .card_models > .model_pill:nth-child(1) {
  background: #e60039;
  color: #fff;
  opacity: 1; /* <a>pillのグローバル a:hover{opacity:.5} 打消し */
}
.usecase_select_card:has(.card_models > .model_pill:nth-child(1):hover, .card_photos > :nth-child(1):hover) .card_models > .model_pill:nth-child(1) .pill_arrow_default {
  display: none;
}
.usecase_select_card:has(.card_models > .model_pill:nth-child(1):hover, .card_photos > :nth-child(1):hover) .card_models > .model_pill:nth-child(1) .pill_arrow_hover {
  display: block;
}
.usecase_select_card:has(.card_models > .model_pill:nth-child(1):hover, .card_photos > :nth-child(1):hover) .card_models > .model_pill:nth-child(2),
.usecase_select_card:has(.card_models > .model_pill:nth-child(1):hover, .card_photos > :nth-child(1):hover) .card_photos > :nth-child(2) {
  opacity: 0.2;
}

/* --- index2（下pill / 右写真）アクティブ --- */
.usecase_select_card:has(.card_models > .model_pill:nth-child(2):hover, .card_photos > :nth-child(2):hover) .card_models > .model_pill:nth-child(2) {
  background: #e60039;
  color: #fff;
  opacity: 1;
}
.usecase_select_card:has(.card_models > .model_pill:nth-child(2):hover, .card_photos > :nth-child(2):hover) .card_models > .model_pill:nth-child(2) .pill_arrow_default {
  display: none;
}
.usecase_select_card:has(.card_models > .model_pill:nth-child(2):hover, .card_photos > :nth-child(2):hover) .card_models > .model_pill:nth-child(2) .pill_arrow_hover {
  display: block;
}
.usecase_select_card:has(.card_models > .model_pill:nth-child(2):hover, .card_photos > :nth-child(2):hover) .card_models > .model_pill:nth-child(1),
.usecase_select_card:has(.card_models > .model_pill:nth-child(2):hover, .card_photos > :nth-child(2):hover) .card_photos > :nth-child(1) {
  opacity: 0.2;
}

/* ===== こんな課題はありませんか (problem cards) ===== */
.usecase_problem {
  padding: 72px 40px 0;
  text-align: center;
}

.usecase_problem_list {
  display: grid;
  grid-template-columns: repeat(4, 230px);
  gap: 20px;
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

.usecase_problem_list li {
  background: transparent;
  text-align: left;
  border: 2px solid #00bbff;
  display: flex;
  flex-direction: column;
}

.usecase_problem_list .problem_top {
  position: relative;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 24px 16px 20px;
  box-sizing: border-box;
}

.usecase_problem_list .problem_top::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -11px;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 13px solid transparent;
  border-right: 13px solid transparent;
  border-top: 12px solid #fff;
  z-index: 2;
}

.usecase_problem_list .problem_top .headline {
  color: #004f8f;
  font-weight: 900;
  font-size: 20px;
  line-height: 1.4;
  text-align: center;
  margin: 0 0 8px;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.usecase_problem_list .problem_top .illust_circle {
  position: relative;
  width: 80px;
  height: 80px;
  margin-top: 12px;
  margin-bottom: 0;
}

.usecase_problem_list .problem_top .illust_circle .circle_bg {
  position: absolute;
  inset: 0;
  width: 80px;
  height: 80px;
}

.usecase_problem_list .problem_top .illust_circle .person {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 80px;
  width: auto;
}

.usecase_problem_list .problem_bottom {
  position: relative;
  background: #00bbff;
  color: #fff;
  padding: 44px 18px 24px;
  min-height: 200px;
  box-sizing: border-box;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.usecase_problem_list .problem_bottom .catch {
  font-weight: 900;
  font-size: 24px;
  line-height: 1.3;
  text-align: center;
  margin: 0 0 20px;
  min-height: 94px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.usecase_problem_list .problem_bottom .desc {
  font-size: 13px;
  line-height: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.6);
  padding-top: 12px;
  text-align: left;
  margin: 0;
}

/* 右から2枚目（シンプル設計）だけ、Figma同様に字詰めして2行に収める */
.usecase_problem_list li:nth-child(3) .problem_bottom .desc {
  letter-spacing: -0.39px;
}

/* ===== 解決バナー ===== */
.usecase_solve_banner {
  margin: 0 auto 72px;
  padding: 0 40px;
}

.usecase_solve_banner p {
  max-width: 980px;
  margin: 0 auto;
  box-sizing: border-box;
  background: #fff;
  border: 6px solid #00bbff;
  color: #004f8f;
  font-size: 32px;
  font-weight: bold;
  text-align: center;
  padding: 30px 20px;
}

/* ===== CTAボタン(オレンジ地・赤枠・封筒アイコン) ===== */
.usecase_cta {
  text-align: center;
  padding: 0 40px 72px;
}

.usecase_cta a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  background: #dd7e0f;
  border: 4px solid #dc3509;
  color: #fff;
  min-width: 600px;
  min-height: 94px;
  border-radius: 20px;
  text-decoration: none;
  font-size: 32px;
  font-weight: bold;
  box-sizing: border-box;
}

/* ホバー: 透過をやめて背景色・枠色を薄くする
   （修正依頼#10。詳細は css/page-business.css の .business_side の項を参照） */
.usecase_cta a:hover {
  opacity: 1;
  background: #eebf87;   /* #dd7e0f + 白50% */
  border-color: #ee9a84; /* #dc3509 + 白50% */
}

.usecase_cta a img {
  width: 39px;
  height: 28px;
}

/* ===== 活用イメージ ===== */
.usecase_activity {
  padding: 0 40px 72px;
  text-align: center;
}

.usecase_activity_list {
  display: grid;
  grid-template-columns: repeat(3, 308px);
  gap: 28px;
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 0;
}

.usecase_activity_list li {
  background: #fff;
  border: 2px solid #b3d2df;
  border-radius: 8px;
  overflow: hidden;
  text-align: left;
}

.usecase_activity_list .activity_photo {
  aspect-ratio: 308 / 220;
}

.usecase_activity_list .activity_photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.usecase_activity_list .activity_body {
  padding: 12px 16px 16px;
  text-align: center;
}

.usecase_activity_list .activity_category {
  font-size: 16px;
  font-weight: bold;
  margin: 0 0 4px;
}

.usecase_activity_list .activity_headline {
  font-size: 13px;
  margin: 0;
}

/* ===== 推奨モデル ===== */
.usecase_recommend {
  background: #ddeaf6;
  padding: 72px 40px 80px;
}

.usecase_recommend_group {
  position: relative;
  background: #fff;
  border: 1px solid #e60039;
  padding: 32px 42px;
  margin: 0 auto 40px;
  max-width: 980px;
  box-sizing: border-box;
}

.usecase_recommend_group::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 46px;
  height: 46px;
  background: #e60039;
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

.usecase_recommend_group_head {
  border-bottom: 1px solid #e60039;
  padding-bottom: 6px;
  margin-bottom: 24px;
}

.usecase_recommend_group_head h3 {
  color: #e60039;
  font-size: 20px;
  font-weight: bold;
  margin: 0;
  text-align: center;
}

/* 修正依頼#9: 「（キーボード付属・着脱式）」だけ小さく（Figma SP=10px/主文18px＝比0.556）。
   emで指定しPC(20px→約11px)/SP(18px→10px)を1ルールで両対応。Figmaは主文と別行なのでblock。 */
.usecase_recommend_group_head h3 small {
  display: block;
  font-size: 0.556em;
  font-weight: inherit;
  line-height: 1.6;
}

.usecase_recommend_group_desc {
  font-size: 14px;
  line-height: 1.8;
  margin-bottom: 28px;
  text-align: center;
}

.usecase_recommend_items {
  display: grid;
  grid-template-columns: repeat(2, 200px);
  gap: 100px;
  justify-content: center;
}

/* ホバー: カード全体に白50%ベール1枚を重ねて退色（Figma recommended-model バリアント2）。
   リンク付き(Windows機種=is_linked)だけに適用。ボタンも含め一様に退色する。 */
.usecase_recommend_items .usecase_recommend_item {
  position: relative;
  display: block; /* カードは<a>（リンク付き）or<div>。ブロック化して従来の縦積みを維持 */
  text-decoration: none;
  color: inherit;
}

.usecase_recommend_items .usecase_recommend_item.is_linked {
  cursor: pointer;
}

.usecase_recommend_items .usecase_recommend_item.is_linked::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.5);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
  z-index: 2; /* 写真/名前/バッジ/ボタンの上に被さり一様退色 */
}

.usecase_recommend_items .usecase_recommend_item.is_linked:hover::after {
  opacity: 1;
}

/* カード全体が<a>なのでグローバル a:hover{opacity:.5} を打消し（退色は白ベールに一任、二重退色を防止） */
.usecase_recommend_items .usecase_recommend_item.is_linked:hover {
  opacity: 1;
}

.usecase_recommend_items .item_photo {
  aspect-ratio: 200 / 110;
  margin-bottom: 8px;
}

.usecase_recommend_items .item_photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.usecase_recommend_items .item_name {
  text-align: center;
  font-weight: bold;
  font-size: 16px;
  margin: 0 0 4px;
}

.usecase_recommend_items .item_code {
  text-align: center;
  font-size: 12px;
  color: #333;
  margin: 0 0 8px;
}

.usecase_recommend_items .item_tags {
  display: flex;
  justify-content: center;
  gap: 4px; /* Figma: inchバッジ右端98→通信バッジ左端102 */
  margin-bottom: 8px;
}

/* スペックバッジは他ページ流用のパス化SVG画像（40×40・環境非依存） */
.usecase_recommend_items .item_tags .item_badge {
  display: block;
  width: 40px;
  height: 40px;
}

.usecase_recommend_items .item_copy {
  text-align: center;
  font-size: 13px;
  line-height: 20px;
  margin: 0 0 12px;
  min-height: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.usecase_recommend_items .item_link {
  text-align: center;
}

.usecase_recommend_items .item_link a,
.usecase_recommend_items .item_link span {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  background: #e60039;
  color: #fff;
  border-radius: 100px;
  padding: 6px 8px 6px 24px;
  font-size: 15px;
  font-weight: bold;
  text-decoration: none;
}

.usecase_recommend_items .item_link img {
  width: 16px;
  height: 16px;
}

/* ===== 比較表 ===== */
.usecase_compare {
  max-width: 980px;
  margin: 0 auto;
  border-collapse: separate;
  border-spacing: 10px 0; /* 列間10px・行間0（Figma準拠） */
  width: 100%;
  table-layout: fixed; /* データ2列を等幅に */
}

.usecase_compare th,
.usecase_compare td {
  padding: 16px;
  text-align: center;
}

/* ヘッダー行（Android / Windows） */
.usecase_compare thead th {
  background: #3d6183;
  color: #fff;
  font-size: 24px;
  font-weight: 800;
  border-radius: 8px 8px 0 0;
}

.usecase_compare thead th:first-child {
  background: transparent;
  width: 200px;
}

/* 本文セル：各列を#3d6183で囲む（内部の横罫線は出さない） */
.usecase_compare tbody th,
.usecase_compare tbody td {
  color: #000;
  font-size: 18px;
  font-weight: 500;
  border-left: 1px solid #3d6183;
  border-right: 1px solid #3d6183;
}

.usecase_compare tbody tr:first-child th,
.usecase_compare tbody tr:first-child td {
  border-top: 1px solid #3d6183;
}

.usecase_compare tbody tr:last-child th,
.usecase_compare tbody tr:last-child td {
  border-bottom: 1px solid #3d6183;
}

/* ラベル列 */
.usecase_compare tbody th {
  width: 200px;
  font-size: 16px;
  white-space: nowrap;
}

/* ゼブラ：行ごとに白／#b6cfe6（ラベル列・データ列とも同色） */
.usecase_compare tbody tr:nth-child(odd) th,
.usecase_compare tbody tr:nth-child(odd) td {
  background: #fff;
}

.usecase_compare tbody tr:nth-child(even) th,
.usecase_compare tbody tr:nth-child(even) td {
  background: #b6cfe6;
}

/* 横スクロール用ラッパーとインジケータはSP専用。
   PCでは display:contents でラッパーを無かったことにし、バーは非表示にする。 */
.usecase_compare_scroll {
  display: contents;
}

.usecase_compare_bar {
  display: none;
}

/* ===== よくあるご質問 ===== */
.usecase_faq {
  padding: 120px 40px 72px;
  background: #fff;
}

.usecase_faq_list {
  max-width: 980px;
  margin: 0 auto;
  list-style: none;
  padding: 0;
}

.usecase_faq_list li {
  border-bottom: 1px dashed #9fb6c4;
  padding-bottom: 20px;
  margin-bottom: 20px;
}

.usecase_faq_list li:last-child {
  border-bottom: none;
}

.usecase_faq_list .qa_row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.usecase_faq_list .qa_row.q_row {
  background: #f45e6f;
  padding: 16px 20px;
}

.usecase_faq_list .qa_row.a_row {
  align-items: flex-start;
  padding: 20px 20px 0;
}

.usecase_faq_list .q_row .qa_badge {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fff;
  color: #f45e6f;
  font-weight: 600;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.usecase_faq_list .a_row .qa_badge {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #f45e6f;
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.usecase_faq_list .q_row .qa_text {
  font-size: 15px;
  font-weight: bold;
  color: #fff;
  line-height: 1.5;
  margin: 0;
}

.usecase_faq_list .a_row .qa_text {
  font-size: 14px;
  line-height: 24px;
  color: #000;
  margin: 0;
  padding-top: 2px;
}

/* ===== 安心の理由 背景色上書き ===== */
.usecase_reliability {
  background: #ddeaf6 !important;
  padding-bottom: 147px !important; /* 青がお問い合わせCTAの中心まで伸びる */
}

/* 安心の理由直後のCTAだけ、青/白の境界にボタン中心が来るよう跨がせる */
.usecase_reliability + .usecase_cta {
  position: relative;
  margin-top: -47px; /* ボタン高さ94pxの半分。中心を青の下端に合わせる */
  padding-bottom: 48px;
}

/* ===== ほかの用途を見る (usecase card 再利用) ===== */
.usecase_related {
  padding: 72px 40px 100px;
  text-align: center;
  background: #fff;
}

.usecase_related_list {
  display: grid;
  grid-template-columns: repeat(3, 224px);
  gap: 28px;
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 0 0 160px;
}

.usecase_related_list .usecase_card {
  position: relative;
  background: #e7eff4;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 224 / 196;
}

.usecase_related_list .usecase_thumb {
  position: absolute;
  inset: 0 0 24.49% 0;
  overflow: hidden;
}

.usecase_related_list .usecase_thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.usecase_related_list p {
  position: absolute;
  bottom: 6.6%;
  left: 0;
  right: 0;
  margin: 0;
  font-size: 16px;
  color: #000;
  text-align: center;
}

.usecase_related_list .usecase_mark {
  position: absolute;
  right: 3.5%;
  bottom: 4%;
  width: 10px;
  height: 10px;
}

.usecase_related_list .usecase_mark img {
  width: 100%;
  height: 100%;
}

/* ほかの用途カード: リンク付き(is_linked)のみ クリック可＋ホバー白50%ベール＋影＋枠(TOP用途カードと同挙動) */
.usecase_related_list .usecase_card.is_linked {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: box-shadow .3s;
}

.usecase_related_list .usecase_card.is_linked::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.5);
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
  z-index: 2;
}

.usecase_related_list .usecase_card.is_linked:hover {
  opacity: 1; /* グローバル a:hover{opacity:.5} を打消し(退色はベール担当) */
  box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.16), 0 0 0 1px #ddeaf6;
}

.usecase_related_list .usecase_card.is_linked:hover::after {
  opacity: 1;
}

.usecase_back_btn a {
  display: inline-flex;
  align-items: center;
  gap: 40px;
  background: #e60039;
  color: #fff;
  border-radius: 100px;
  padding: 11px 16px 11px 72px;
  font-size: 20px;
  font-weight: bold;
  text-decoration: none;
}

.usecase_back_btn img {
  width: 20px;
  height: 20px;
  transform: rotate(-90deg);
}

@media (max-width: 1100px) {
  .usecase_select_cols,
  .usecase_activity_list,
  .usecase_related_list {
    grid-template-columns: repeat(2, 1fr);
  }

  .usecase_problem_list {
    grid-template-columns: repeat(2, 1fr);
  }

  .usecase_recommend_items {
    grid-template-columns: 1fr;
  }

  .usecase_cta a,
  .business_cta a {
    min-width: 0;
    width: 100%;
  }
}

/* =========================================================
   モバイル(SP)対応
   Figma「用途別ページ：勤怠・受付」node 23624:5415（393×10053）
   BP=750px（テーマ全体で統一）。PCは無改変（全て本メディア内）。
   座標は frame 基準。要素相対値はコメントに換算根拠を記す。
   ========================================================= */
@media (max-width: 750px) {

  /* ===== KV（Figma y71-491） ===== */
  .usecase_mv {
    margin-top: 70px; /* SP固定ヘッダー70px（style.css header{height:70px}） */
  }

  /* SP専用画像 kv_kintai_sp.png（393×420）。PC版 kv_kintai.png は1920×432で別物 */
  .usecase_mv .mv_kv_photo {
    aspect-ratio: 393 / 420;
  }

  .usecase_mv .mv_kv_text {
    left: 20px;
    top: 132px; /* Figma y203 − 写真上端71 */
  }

  .usecase_mv .mv_title span {
    font-size: 28px;
    line-height: 28px; /* 箱高 8+28+8=44px */
    padding: 8px 12px;
    margin-bottom: 14px; /* 箱1下端247 → 箱2上端261 */
    box-shadow: 0 3.317px 9.952px #005797;
  }

  .usecase_mv .mv_title span:last-child {
    line-height: 30px; /* Figma 29.952px → 箱高46px */
    margin-bottom: 0;
  }

  .usecase_mv .mv_desc {
    left: 20px;
    top: 248px; /* Figma y319 − 71 */
    font-size: 16px;
    line-height: 20px; /* Figma 19.968px */
    text-shadow: 0 3.317px 9.952px #005797;
  }

  /* ===== リード文（Figma y531-706 / x20 w353） ===== */
  .usecase_lead {
    padding: 40px 20px; /* 写真下端491→531 ／ 下端706→H2 746 */
    text-align: left;
  }

  .usecase_lead p {
    line-height: 25px; /* Figma leading 25px（7行=175px） */
  }

  /* ===== 選定のポイント（青 Figma y784-3052） ===== */
  .usecase_select {
    margin-top: 39px; /* リード下端745 → 青上端784 */
    padding: 0 20px 40px; /* 最終カード下端3012 → 青下端3052 */
  }

  /* バッジ見出し（青上端を跨ぐ）: Figma y746-818、全体305px幅 */
  .usecase_select_head {
    margin: -38px auto 32px; /* 青上端784 − バッジ上端746 ／ バッジ下端818 → 列見出し850 */
  }

  .usecase_select_head .badge_circle {
    width: 72px;
    height: 72px;
    margin-right: -36px; /* 円右端116 → バー左端80 の重なり */
  }

  .usecase_select_head .badge_circle img {
    width: 31px;
    height: 58px;
  }

  .usecase_select_head .badge_bar {
    /* #4: 269px固定だと 円36px＋バー269px=305px が 320/360pxの内容幅(280/320)を超え、
       inline-flexの.badgeごと画面外へ。バーを viewport 追従で上限269pxに（393px=269維持）。
       76px = 左padding20 ＋ 円36 ＋ 右余白20。テキスト196px＋padding27は244px幅に収まる。 */
    width: min(269px, calc(100vw - 76px));
    font-size: 28px;
    line-height: 30px;
    letter-spacing: 0; /* Figma 7字×28px=196px ちょうど */
    padding-left: 27px; /* テキスト左端をFigma x130 に合わせる */
  }

  /* 3列 → 縦積み。列間はFigma 40px（前列カード下端→次列見出し） */
  .usecase_select_cols {
    grid-template-columns: 1fr;
    gap: 40px;
    max-width: none;
  }

  /* 列見出し（353×92）。三角(::after 51×24 #49769f)はPC値がFigma SPと同一のため据置 */
  .usecase_select_col_head .main {
    line-height: 32px;
  }

  .usecase_select_col_head .sub {
    line-height: 20px;
    margin-top: 8px; /* 本文ブロック 32+8+20=60px を92px内で中央 */
  }

  /* カード 353×277。写真120px列＋pill180px列の2カラム構成 */
  .usecase_select_card {
    min-height: 277px;
    box-sizing: border-box;
    margin-top: 8px; /* カード1下端 → カード2上端 */
    padding: 26px 22px 0; /* 内容上端28px。写真x24/pill右端329に一致 */
    display: grid;
    /* #4: 120px 180px固定だとカード最小幅が349pxになり、1fr列(=col_head/card)が
       320/360pxで画面外へはみ出す。pill列を上限180pxで縮小可にしカードを幅追従させる。 */
    grid-template-columns: 120px minmax(0, 180px);
    grid-template-rows: auto auto 1fr;
    column-gap: 5px;
  }

  /* 三角の先端との隙間（Figma: バー下端942 → カード上端982） */
  .usecase_select_col_head + .usecase_select_card {
    margin-top: 40px;
  }

  .usecase_select_card .card_sub {
    grid-column: 1 / -1;
    font-size: 16px;
    line-height: 16px;
    margin: 0 0 12px;
  }

  .usecase_select_card .card_label {
    grid-column: 1 / -1;
    font-size: 28px;
    line-height: 25px;
    margin: 0 0 2px; /* 残り領域(83-275)の中心=179 をFigmaの写真/pill中心に一致させる */
  }

  /* 写真とpillは別ブロックだが、どちらも同じ行を上下中央寄せするため
     各アイテムの中心が自動的に揃う（写真60+20+60=140 ／ pill26+54+26=106、共に中心対称） */
  .usecase_select_card .card_photos {
    grid-column: 1;
    grid-row: 3;
    flex-direction: column;
    gap: 20px; /* 写真中心の間隔80px */
    align-self: center;
    margin-bottom: 0;
  }

  /* 縦flexアイテムになるため min-height:auto が効き、中の画像の実寸まで
     スロットが膨らむ（80px/86.9px と画像ごとにバラつく）→ min-height:0 で解除し120×60に固定 */
  .usecase_select_card .card_photos > a,
  .usecase_select_card .card_photos > span {
    width: 120px;
    height: 60px;
    min-height: 0;
  }

  .usecase_select_card .card_models {
    grid-column: 2;
    grid-row: 3;
    align-self: center;
    gap: 54px; /* pill26+54=80 で写真の中心間隔と一致 */
    min-height: 0; /* PCの min-height:60px を解除（単一pillの中央寄せが崩れるため） */
  }

  /* ===== こんな課題はありませんか（Figma y3112-4444） ===== */
  .usecase_problem {
    padding: 60px 20px 0; /* 青下端3052 → 見出し3112 */
  }

  .usecase_section_head.no_bar {
    margin-bottom: 24px; /* 見出し下端3148 → カード1 3172 */
  }

  .usecase_section_head.no_bar h2 {
    font-size: 24px;
    line-height: 36px; /* Figma 312×36（13字×24px） */
  }

  .usecase_problem_list {
    grid-template-columns: 1fr;
    gap: 24px;
    max-width: none;
  }

  /* 白上部（カード内 y2-112）: PCの縦積み → 円80px左＋見出し右の横並びに再構成 */
  .usecase_problem_list .problem_top {
    flex-direction: row;
    align-items: center; /* 見出し56pxが円80pxに対し上下中央 → Figma y28 */
    gap: 12px; /* 円右端104 → 見出し左端116 */
    padding: 14px 22px 16px; /* 円 x24/y16、白下端112 */
  }

  /* DOM順は「見出し→円」（PCの縦積み用）。SPは円が左なので order で入れ替える */
  .usecase_problem_list .problem_top .illust_circle {
    order: -1;
    margin-top: 0;
    flex-shrink: 0;
  }

  .usecase_problem_list .problem_top .headline {
    flex: 1;
    font-size: 20px;
    line-height: 28px;
    margin: 0;
  }

  /* 青下部（カード内 y112-298）。左右padding22pxで罫線をFigma x24-329(305px)に一致させる */
  .usecase_problem_list .problem_bottom {
    padding: 28px 22px 9px;
    min-height: 0;
  }

  .usecase_problem_list .problem_bottom .catch {
    font-size: 24px;
    line-height: 27px;
    min-height: 81px; /* 1行/2行/3行を同高に固定＝罫線位置を4枚で揃える */
    margin: 0 0 15px;
  }

  /* 罫線は305px幅、本文は297px幅（Figmaで4pxずつ内側） */
  .usecase_problem_list .problem_bottom .desc {
    padding: 12px 4px 0;
  }

  /* PC専用の字詰めはSP幅(297px)では不要 */
  .usecase_problem_list li:nth-child(3) .problem_bottom .desc {
    letter-spacing: normal;
  }

  /* ===== 解決バナー（Figma y4468-4600 353×132・枠4px） ===== */
  .usecase_solve_banner {
    margin: 24px auto 60px; /* カード下端4444→4468 ／ 下端4600→活用イメージ見出し4660 */
    padding: 0 20px;
  }

  .usecase_solve_banner p {
    border-width: 4px; /* PCは6px */
    font-size: 24px;
    line-height: 36px;
    padding: 26px 8px; /* 本文2行72pxを132px内で中央、幅329px */
  }

  /* ===== 共通セクション見出し（Figma "h2" 305×66・活用/推奨/FAQ/ほかの用途で共通） =====
     内訳: 上7px + タイトル28px + 16px + 赤線4px + ラベル14px = 69px
     （ラベルはFigmaフレーム下端を3px超える設計） */
  .usecase_section_head {
    padding-top: 7px;
    margin-bottom: 37px;
  }

  .usecase_section_head h2 {
    font-size: 28px;
    line-height: 28px;
    font-weight: bold; /* 修正依頼#3: SPは細く見えるためBold指定（PCは36px/500のまま） */
  }

  .usecase_section_head h2::after {
    width: 80px; /* PCは82px */
    margin-top: 12px; /* タイトル下端35 → 赤線47（Figma） */
  }

  .usecase_section_head .section_label {
    font-size: 10px;
    line-height: 14px;
    margin-top: 4px; /* 赤線下端51 → ラベル55（Figma。0だと赤線に密着する） */
  }

  /* no_bar（こんな課題）は赤線もラベルも無いので上7pxを打ち消す */
  .usecase_section_head.no_bar {
    padding-top: 0;
  }

  /* ===== 活用イメージ（Figma y4660-5123） ===== */
  .usecase_activity {
    padding: 0 20px 40px; /* カード下端5123 → CTA 5163 */
  }

  /* PC3列 → 2列（166px×2 + gap21px = 353px）。3枚目は2行目左に自然配置 */
  .usecase_activity_list {
    /* #4: 166px固定だと2列が320/360pxで画面外へ。上限166で狭端末は縮小可に。
       #4続き: 上限166だと広幅端末で2列が中央に取り残され左右余白が肥大→minmax(0,1fr)で幅追従
       （393px=166px設計維持・広幅は余白なし・狭端末は縮小維持）。 */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 21px;
  }

  /* カードはPC版(308px幅)の0.539倍スケール＝枠1.078px/角丸4.312px */
  .usecase_activity_list li {
    border-width: 1.078px;
    border-radius: 4.312px;
  }

  .usecase_activity_list .activity_body {
    padding: 10.78px 8px;
  }

  .usecase_activity_list .activity_category {
    font-size: 13px;
    line-height: 8.623px; /* Figma実値（font-sizeより小さい詰め組み） */
    margin: 0 0 8.63px;
  }

  .usecase_activity_list .activity_headline {
    font-size: 11px;
    line-height: 10.779px;
  }

  /* ===== CTA（Figma "button - contact" 353×60）=====
     /business/ の .business_cta と同一コンポーネント */
  .usecase_cta {
    padding: 0 20px 80px; /* CTA下端5223 → 青セクション上端5303 */
  }

  .usecase_cta a {
    min-height: 60px;
    gap: 12px;
    border-width: 2.353px;
    border-radius: 11.767px;
    font-size: 20px;
  }

  .usecase_cta a img {
    width: 28px;
    height: 20px;
  }

  /* ===== 推奨モデル（青 Figma y5303-7081） ===== */
  .usecase_recommend {
    padding: 60px 20px; /* 青上端5303→見出し5363 ／ 表下端7021→青下端7081 */
  }

  .usecase_recommend_group {
    padding: 27px 23px; /* 枠線1pxと合わせて外枠から28px（Figmaの内容開始位置） */
    max-width: none;
  }

  .usecase_recommend_group::before {
    width: 40px; /* PCは46px */
    height: 40px;
  }

  /* 見出しはFigmaで下端揃え（justify-end）＝1行(Android)でも2行(Windows)でも
     罫線がグループ内 rel69.23px に来る。36pxの箱に下寄せで再現。 */
  .usecase_recommend_group_head {
    display: flex;
    align-items: flex-end;
    min-height: 42.23px; /* border-box: タイトル枠36px + padding5.23 + 罫線1px */
    padding-bottom: 5.23px;
    margin-bottom: 0;
  }

  .usecase_recommend_group_head h3 {
    width: 100%;
    font-size: 18px;
    line-height: 18px;
  }

  .usecase_recommend_group_desc {
    font-size: 13px;
    line-height: 20px;
    margin: 19.77px 0 0; /* 罫線69.23 → 本文89 */
  }

  /* カード306×167: 写真左156px＋右カラム(x164)、最下段にフル幅の赤ボタン */
  .usecase_recommend_items {
    grid-template-columns: 1fr;
    gap: 41px;
    margin-top: 40px; /* desc下端149 → カード1上端189 */
  }

  .usecase_recommend_items .usecase_recommend_item {
    display: grid;
    grid-template-columns: 156px 1fr;
    column-gap: 8px;
  }

  .usecase_recommend_items .item_photo {
    grid-column: 1;
    grid-row: 1 / 5; /* 型番〜コピーの4行分にまたがる */
    align-self: start;
    aspect-ratio: 160 / 126; /* PCは200/110 */
    margin-bottom: 0;
  }

  .usecase_recommend_items .item_name {
    grid-column: 2;
    grid-row: 1;
    text-align: left;
    font-size: 14px;
    line-height: 16px;
    margin: 0;
  }

  .usecase_recommend_items .item_code {
    grid-column: 2;
    grid-row: 2;
    text-align: left;
    font-size: 10px;
    line-height: 13px;
    margin: 3px 0 0; /* y19 */
  }

  .usecase_recommend_items .item_tags {
    grid-column: 2;
    grid-row: 3;
    justify-content: flex-start;
    margin: 7px 0 0; /* y39 */
  }

  .usecase_recommend_items .item_copy {
    grid-column: 2;
    grid-row: 4;
    text-align: left;
    margin: 4px 0 0; /* y83 */
  }

  .usecase_recommend_items .item_link {
    grid-column: 1 / -1;
    grid-row: 5;
    margin-top: 12px; /* y135 */
  }

  /* ボタンはカード幅いっぱい。修正依頼#11: Figmaは pl90/gap72 で文字が右に寄る設計だが
     クライアント指摘により中央寄せへ変更（テキストはボタン中央）。
     追加修正: 矢印アイコンはFigmaどおりボタン右端(pr:8px)へ。テキストは中央のまま維持するため
     矢印をabsoluteでフローから外し、justify-content:centerでテキストだけを中央に置く。 */
  .usecase_recommend_items .item_link a,
  .usecase_recommend_items .item_link span {
    display: flex;
    justify-content: center;
    padding: 6px 8px;
    line-height: 20px;
    white-space: nowrap;
    position: relative;        /* 矢印の絶対配置の基準 */
  }
  .usecase_recommend_items .item_link img {
    position: absolute;
    right: 8px;                /* Figma: ボタン右端から8px */
    top: 50%;
    transform: translateY(-50%);
  }

  /* ===== 比較表（Figma y6753-7009）=====
     ラベル列116pxを sticky で固定し、データ2列(202px)を横スクロール。
     負のmarginでセクションのpadding(20px)を打ち消し、表示域を x12〜393 に広げる。 */
  .usecase_compare_scroll {
    display: block;
    overflow-x: auto;
    margin: 60px -20px 0 -8px; /* Windowsグループ下端6693 → 表上端6753 */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* インジケータを自前描画するので既定バーは隠す */
  }

  .usecase_compare_scroll::-webkit-scrollbar {
    display: none;
  }

  .usecase_compare {
    width: 552px; /* 116+202+202 ＋ border-spacing 8px×4 */
    max-width: none;
    margin: 0;
    border-spacing: 8px 0; /* 列位置がFigma x144-346 / x354-556 に一致 */
  }

  /* padding: グローバル style.css の `tr td:first-of-type/last-of-type{padding:10px 0 10px 15px}`
     が詳細度(0,1,2)で効いてしまう（上下10pxで行高+20px、左15pxで内容幅194→187px）。
     擬似クラス形(0,2,1)で打ち消す。各行は th+td×2 なので全セルが該当する。
     vertical-align: 既定の baseline だと th(12px1行)とtd(16px2行)の最初のベースラインを
     揃えるために行が膨らむ（52→65px）。middle にして行高を max(セル高) に戻す。 */
  .usecase_compare th,
  .usecase_compare td,
  .usecase_compare th:first-of-type,
  .usecase_compare th:last-of-type,
  .usecase_compare td:first-of-type,
  .usecase_compare td:last-of-type {
    padding: 0 4px;
    vertical-align: middle;
  }

  .usecase_compare thead th {
    height: 48px;
    width: 202px;
  }

  .usecase_compare thead th:first-child {
    width: 116px;
    /* 角セルは空だがPCの transparent のままだと、横スクロール時に
       裏を通る Android/Windows ヘッダーが透けて見える。セクション背景
       #ddeaf6 で不透明化し「空に見えるがヘッダーは隠す」を両立する。 */
    background: #ddeaf6;
    /* 角セルは角丸にしない（正解=四角）。データ見出しから継承する border-radius:8px 8px 0 0 を打消す。
       角丸のままだと右上の丸カット部分から、裏を流れる Android/Windows ヘッダーが透けて見えてしまう。 */
    border-radius: 0;
  }

  /* ラベル列はスクロールしても左端(x20)に留まる。border-spacing分だけ left:8px。
     角セル・ラベルセルとも z-index:2 でデータ列(static)より前面に置き、
     スクロールしてくるデータ列がラベル列の裏に潜るようにする。 */
  .usecase_compare th:first-child {
    position: sticky;
    left: 8px;
    z-index: 2;
    /* コンテナ左margin(-8px)＋border-spacing により、sticky列の左に8pxの隙間ができ、
       横スクロール時にそこへ裏のAndroid/Windowsヘッダーが透けて見える。sticky列と一緒に動く
       box-shadowでその8pxをセクション背景色(#ddeaf6)で常時覆い、透けを塞ぐ（左＝空に見せる）。 */
    box-shadow: -8px 0 0 0 #ddeaf6;
  }

  .usecase_compare tbody th,
  .usecase_compare tbody td {
    height: 52px;
    font-size: 16px;
    line-height: 22px;
  }

  .usecase_compare tbody th,
  .usecase_compare tbody th:first-of-type {
    width: 116px;
    padding: 0 2px; /* 「（受付＋資料閲覧）」108px を余裕を持って収める */
    font-size: 12px;
    line-height: 16px;
    white-space: normal; /* 「兼用（受付＋資料閲覧）」を2行に折り返す */
  }

  /* 記号（◎◯△）の直後で改行する（Figma準拠）。PCではinlineのまま=1行 */
  .usecase_compare .cmp_note {
    display: block;
  }

  /* 「◯（柔軟だが設定はやや多め）」は括弧内208px＞セル幅194pxで3行に割れる。
     Figmaは このセルだけ tracking -1.12px で詰めて2行(=行高52px)に収めている。 */
  .usecase_compare tbody tr:nth-child(2) td:last-child {
    letter-spacing: -1.12px;
  }

  /* インジケータ: 白トラック229×5(x144〜373)＋#49769fのつまみ3px。つまみ幅/位置はJSが更新 */
  .usecase_compare_bar {
    display: block;
    /* #4: 229px固定だと x144+229=373 で 320/360pxの内容右端(300/340)を超える。
       内容幅に追従（393px=353-124=229 で Figma一致・狭端末は右端で揃う）。 */
    width: calc(100% - 124px);
    height: 5px;
    margin: 7px 0 0 124px; /* 表下端7009 → バー7016 ／ x20+124=144 */
    background: #fff;
    border-radius: 2.5px;
  }

  .usecase_compare_bar span {
    display: block;
    height: 3px;
    margin: 1px 0 0 1px;
    background: #49769f;
    border-radius: 1.5px;
  }

  /* ===== よくあるご質問（Figma y7141-7828） ===== */
  .usecase_faq {
    padding: 60px 20px; /* 青下端7081→見出し7141 ／ 最終罫線7828→青上端7888 */
  }

  .usecase_faq_list {
    max-width: none;
  }

  .usecase_faq_list li {
    padding-bottom: 0;
    margin-bottom: 12px; /* 罫線 → 次のQ行 */
  }

  /* Figmaは最終項目にも罫線がある（Line 10 @y7828） */
  .usecase_faq_list li:last-child {
    border-bottom: 1px dashed #9fb6c4;
    margin-bottom: 0;
  }

  .usecase_faq_list .qa_row {
    gap: 12px; /* バッジ右端74 → テキスト左86 */
  }

  .usecase_faq_list .qa_row.q_row {
    min-height: 68px;
    padding: 0 24px; /* バッジ x44 */
    box-sizing: border-box;
  }

  .usecase_faq_list .qa_row.a_row {
    align-items: center; /* Figmaはバッジが本文の上下中央（PCは上寄せ） */
    padding: 12px 24px;
  }

  .usecase_faq_list .q_row .qa_badge,
  .usecase_faq_list .a_row .qa_badge {
    font-size: 20px;
  }

  .usecase_faq_list .q_row .qa_text {
    font-size: 16px;
    line-height: 22px;
  }

  .usecase_faq_list .a_row .qa_text {
    font-size: 13px;
    line-height: 20px;
    padding-top: 0;
  }

  /* ===== 安心の理由（青 Figma y7888-8740）=====
     カード等は共有クラス .business_reliability のSP定義（page-business.css）を流用。
     ここでは青の下端をCTA中心に合わせる跨ぎ配置だけを上書きする。 */
  .usecase_reliability {
    padding-bottom: 76px !important; /* ボタン下端8664 → 青下端8740 */
  }

  .usecase_reliability + .usecase_cta {
    margin-top: -32px; /* CTA(60px)の中心を青下端8740に合わせる＝CTA上端8708 */
    padding-bottom: 60px; /* CTA下端8768 → ほかの用途見出し8828 */
  }

  /* ===== ほかの用途を見る（Figma y8828-9342） ===== */
  .usecase_related {
    padding: 0 20px 80px; /* 戻るボタン下端9342 → footer 9422 */
  }

  .usecase_related_list {
    /* #4: 166px固定だと2列(=352px)が320/360pxで画面外へ。上限166で狭端末は縮小可に。
       #4続き: 上限166だと広幅端末で左右余白が肥大→minmax(0,1fr)で幅追従（393px=166px設計維持）。 */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 21.4px 20px;
    justify-content: start; /* 166×2+20=352 で1px余るためcenterだと0.5pxずれる（1fr化で実質無効） */
    margin-bottom: 60px; /* カード下端9245.9 → ボタン9306 */
  }

  .usecase_related_list .usecase_mark {
    width: 7px;
    height: 7px;
  }

  /* card-usecaseコンポーネント(224px・16px)がインスタンスで166pxに0.741倍縮小配置されている。
     get_design_contextは素の16pxを返すが、見た目は 16×166/224≒11.86px。同率で縮める。 */
  .usecase_related_list p {
    font-size: 11.86px;
    line-height: 18.5px; /* Figma leading25×0.741 */
  }

  /* 戻るボタン 315×36（Figma button - ページ遷移） */
  .usecase_back_btn a {
    gap: 24px;
    padding: 8px 16px 8px 52px;
    border-radius: 40px;
    font-size: 18px;
    line-height: 20px;
  }
}