/* =========================================================
   製品詳細ページ（Windows 2in1 / aiwa tab Wシリーズ）
   ページ地色 #fafafa。共有クラスは page-business.css / page-usecase.css を流用。
   ========================================================= */

/* ===== KV（.usecase_mv 流用・箱内文字色だけ上書き Figma #0966c5） ===== */
/* ドロップシャドウは共有ルール .usecase_mv .mv_title span に一元化（page-usecase.css） */
.product_mv .mv_title span {
  color: #0966c5;
}

/* ===== バッジ（inch / 無線LAN / SIMフリー）は全て image/business/product/badges/ のSVG（パス化）を使用 ===== */

/* =========================================================
   シリーズ紹介 ＋ ラインアップカード
   ========================================================= */
.product_series {
  background: #fafafa;
  padding: 40px 40px 40px;
  text-align: center;
}

.product_series_title {
  font-size: 36px;
  font-weight: 500;
  font-family: inherit;
  color: #0a63ab;
  line-height: 40px;
  margin: 0;
  height: auto;
  width: auto;
  display: block;
}
.product_series_title::before,
.product_series_title::after { display: none; }

.product_series_desc {
  font-size: 20px;
  font-weight: 600;
  color: #000;
  line-height: 32px;
  margin: 20px 0 0;
}

.product_lineup {
  display: grid;
  grid-template-columns: repeat(4, 232px);
  gap: 17px;
  justify-content: center;
  margin-top: 40px;
}

.product_lineup_card {
  position: relative;
  width: 232px;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid transparent; /* 常時確保しホバー/選択時の枠でレイアウトがずれないように */
  border-radius: 12px;
  box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.04);
  padding: 71px 16px 16px; /* 上=バッジ(19+40=59)＋写真までの隙間12px（Figma: 写真上端71px） */
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, opacity 0.15s;
}
/* ホバー／表示中(選択)のカードは赤縁（Figma Rectangle130: 1px #e60039） */
.product_lineup_card:hover,
.product_lineup_card.is_active {
  border-color: #e60039;
}
/* ホバー時は色を薄く（選択中カードは薄くしない） */
.product_lineup_card:hover {
  opacity: 0.5;
}

/* バッジ（40×40） */
.product_lineup_card .lineup_badges {
  position: absolute;
  top: 19px;
  left: 16px;
  display: flex;
  gap: 4px;
}
.product_lineup_card .lineup_badges .badge_img {
  display: block;
  width: 40px;
  height: 40px;
}

.product_lineup_card .lineup_code {
  position: absolute;
  top: 19px;
  right: 16px;
  margin: 0;
  font-size: 11px;
  line-height: 12px;
  color: #4c4c4c;
}

.product_lineup_card .lineup_photo {
  width: 140px;
  aspect-ratio: 160 / 126;
  margin: 0 auto;
}
.product_lineup_card .lineup_photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.product_lineup_card .lineup_name {
  font-size: 16px;
  font-weight: 600;
  color: #000;
  line-height: 20px;
  margin: 8px 0 12px;
}

.product_lineup_card .lineup_specs {
  list-style: none;
  /* Figma(カード内側200px基準): アイコン列の左端31px=15.5% / テキスト枠の右端169px=右余白15.5%。
     右余白が無いと「カード型コンパクトデジタルカメラ」等がFigmaで折り返す位置で1行に収まってしまう。
     法人TOPの製品カード(.business_lineup_items .spec_list)と同じ式＝同じ部品を同じ値で組む。 */
  padding: 0 15.5%;
  margin: 0;
  text-align: left;
}
.product_lineup_card .lineup_specs li {
  display: flex;
  /* 1項目が2行に折り返してもアイコンは1行目に置く（Figma）。1行の項目では
     アイコン20px＝行高20pxで高さが一致するため center との差は出ない。 */
  align-items: flex-start;
  gap: 4px;
  font-size: 11px;
  /* Figma: 行送りは項目内・項目間とも一律20px（1項目が2行になっても同じ）。
     18pxのままだと折返した2行目だけ詰まる。1行の項目はアイコン20pxが行高を決めるので変化なし。 */
  line-height: 20px;
  color: #000;
}
.product_lineup_card .lineup_specs img {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  object-fit: contain; /* 非正方形アイコンの引き伸ばし防止（下のpaddingと併用） */
}

/* スペックアイコンの縦横比（詳細は css/page-business.css の同名ブロックのコメント参照）。
   このページで使う5種のうち非正方形は無線LANのみ（16x11.3378）。
   20pxセルに対しグリフ外接16px → padding (20-16)/2 = 2px。SPは0.8倍の1.6px。 */
.product_lineup_card .lineup_specs img[src$="icon_wifi.svg"] {
  padding: 2px;
}

/* =========================================================
   製品詳細（タブ ＋ 白カード）
   ========================================================= */
.pw_detail {
  background: #fafafa;
  padding: 0 40px;
}

/* タブ（980px・4分割）。非アクティブは4px短く、選択タブだけが赤枠パネルに密着（間に隙間） */
.product_tabs {
  display: flex;
  gap: 17px;
  max-width: 980px;
  margin: 0 auto;
  align-items: flex-start; /* 上端揃え：非アクティブ(56px)は下端が4px上＝赤枠との隙間、アクティブ(60px)は枠に密着 */
}
.product_tab {
  flex: 1;
  height: 56px;
  box-sizing: border-box;
  padding: 0 8px;            /* 文字がタブの左右端に接触しないよう確保。
                                タブレット谷間の最小端(751px=タブ155px)では 12px にすると
                                「aiwa tabWS10L-2」が3行になり24px溢れるため 8px が上限側の安全値 */
  background: #ffacc1;
  border-radius: 20px 20px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s;
  /* justify-content:center はテキスト塊ごと中央に置くだけで、折返した行同士は既定の左揃えのまま。
     タブレット谷間ではタブが縮んで折返すので行そのものも中央に揃える（PCは1行なので無影響）。 */
  text-align: center;
}
.product_tab.is_active {
  height: 60px; /* 4px高くしてカードの赤枠に密着 */
  background: #e60039;
}
/* 非選択タブのホバー：少し濃いピンク（選択中タブは変えない） */
.product_tab:not(.is_active):hover {
  background: #ee436d;
}
/* テーマの a:hover{opacity:.5} を打ち消す（タブは半透明にしない） */
.product_tab:hover {
  opacity: 1;
}
/* 下部タブ：カード下に下向き。下端揃えで非アクティブは上端が4px下＝赤枠との隙間 */
.product_tabs_bottom {
  align-items: flex-end;
}
.product_tabs_bottom .product_tab {
  border-radius: 0 0 20px 20px;
}

.product_card {
  max-width: 980px;
  margin: 0 auto;
  box-sizing: border-box;
  background: #fff;
  border: 2px solid #e60039; /* Figma Rectangle125: 表示パネルの赤枠 */
  padding: 40px;
}

/* 上段：メイン画像 ＋ 情報 */
.product_top {
  display: flex;
  gap: 38px;
  align-items: flex-start;
}
.product_main_photo {
  flex: 0 0 450px;
  width: 450px;
  height: 340px;
  box-sizing: border-box;
  border: 1px solid #828282;
  display: flex;
  align-items: center;
  justify-content: center;
}
.product_main_photo img {
  width: 410px;
  height: 300px;
  object-fit: contain; /* 枠内に画像全体を収める（切り取らない） */
  display: block;
}

.product_info {
  flex: 1;
  min-width: 0;
}
.product_info_head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #828282; /* Figma Vector11: 製品名/バッジと説明文の区切り罫線 */
  margin-bottom: 12px;
}
.product_info_head .pw_product_name {
  font-size: 24px;
  font-weight: 600;
  font-family: inherit;
  color: #000;
  line-height: 32px;
  margin: 0;
  height: auto;
  width: auto;
  display: block;
}
.product_info_head .pw_product_name::before,
.product_info_head .pw_product_name::after { display: none; }
.product_info_head .product_code {
  font-size: 12px;
  color: #4c4c4c;
  margin: 6px 0 0;
}
.product_badges {
  display: flex;
  gap: 6px;
  flex: 0 0 auto;
}
.product_badges .badge_img {
  display: block;
  width: 56px;
  height: 56px;
}

.product_features {
  list-style: none;
  padding: 0;
  margin: 0;
}
.product_features li {
  position: relative;
  padding-left: 1em;
  font-size: 13px;
  line-height: 24px; /* Figma: 説明文の行送り24px */
  color: #000;
}
.product_features li::before {
  content: "・";
  position: absolute;
  left: 0;
}

/* サムネイルギャラリー（900px・6枚） */
.product_thumbs {
  display: flex;
  gap: 15px;
  margin-top: 24px;
}
.product_thumb {
  flex: 1;
  aspect-ratio: 137 / 99;
  box-sizing: border-box;
  border: 1px solid #828282;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
  transition: opacity 0.3s;
}
.product_thumb.is_active {
  border: 2px solid #0966c5;
}
/* ホバー時は薄く（サイト共通の a:hover{opacity:.5} に合わせる） */
.product_thumb:hover {
  opacity: 0.5;
}
.product_thumb img {
  width: 92%;
  height: 92%;
  object-fit: contain;
  display: block;
}

/* スペック表（759px・9行） */
.product_spec {
  width: 759px;
  margin: 60px auto 0;
  border-collapse: collapse;
  table-layout: fixed;
}
.product_spec th,
.product_spec td {
  height: 36px;
  box-sizing: border-box;
  border: 1px solid #828282;
  font-size: 13px;
  font-weight: 400;
  color: #000;
  padding: 0 9px;
}
.product_spec th {
  width: 152px;
  background: #f0f0f0;
  text-align: right;
}
.product_spec td {
  background: #fff;
  text-align: left;
}
/* テーマ共通の tr td:first-of-type/last-of-type{padding:10px 0 10px 15px; width:70%; border-top:1px solid #ccc}
   を打ち消す（1行に td が1つだけなので first/last 両方に該当し全セルが被弾する）。
   詳細度は (0,1,2) なので .product_spec th,td (0,1,1) では勝てず、擬似クラス形 (0,2,1) で上書きする。
   行高36px・枠線#828282 をFigma通りに保つ */
.product_spec th:first-of-type,
.product_spec th:last-of-type,
.product_spec td:first-of-type,
.product_spec td:last-of-type {
  padding: 0 9px;
  border-top: 1px solid #828282;
}
/* width:70%(531px) が td に効くと table-layout:fixed の余りがラベル列に加算され th が152px→227.4pxに膨らむ。
   auto にすれば th の152pxを引いた残り全部が値列に入り、Figma通り 152 / 606 になる
   （759-152-罫線共有1px。SP側と同じ処方） */
.product_spec td:first-of-type,
.product_spec td:last-of-type {
  width: auto;
}

/* 仕様詳細ボタン（赤ピル） */
.product_spec_btn {
  text-align: center;
  margin-top: 20px;
}
/* 遷移先(specurl)が未設定の機種ではボタンを枠ごと隠す。PHPの初期表示もJSのタブ切替も
   hidden 属性で出し分ける。現状ここに display を書いていないのでUA既定の
   [hidden]{display:none} だけでも消えるが、後から display を足したときに
   静かに効かなくなるので明示しておく。 */
.product_spec_btn[hidden] {
  display: none;
}
.product_spec_btn a,
.product_spec_btn span {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  background: #e60039;
  color: #fff;
  border-radius: 100px;
  padding: 6px 8px 6px 36px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}
.product_spec_btn a:hover {
  opacity: 1; /* <a>化に伴うグローバル a:hover{opacity:.5} を打消し＝ソリッド赤維持(Figmaはホバーバリアント無し) */
}
.product_spec_btn img {
  width: 16px;
  height: 16px;
  /* rotate(-90deg) は初期実装(2b6a83aa)の旧アイコン用補正の名残。d0d103d5でSVG自体を
     正しい↗向き(クライアント支給版)に差し替え済みなので、この回転は↗を↖に反転させる過剰補正だった。
     PCで指定した本ルールはSP(@media)にもカスケードするため、削除でPC/SP同時に正しい↗へ戻る（先方指摘 2026-07-24 #2）。 */
}

/* おすすめ用途見出し（.usecase_section_head 流用） */
.product_usecase_head {
  margin-top: 100px;
}

/* おすすめ用途カード（212×185.5・4枚）
   ★カードの中身（背景・角丸・写真枠・タイトル・グレーの膜・赤い矢印・hover）は
     法人TOP「用途別に探す」と共有＝ css/page-business.css に1箇所だけ定義してある。
     このページはそちらを読み込み済み（page-business-windows.php の <link>）。
     ここに書くのは「4枚を横一列に並べる外枠」だけにすること。
   ★カードの縦横比は TOP 224:196 と 212:185.5 が同じ 1.142857（0.946倍の相似形）なので、
     共有定義の aspect-ratio をそのまま使って寸法も一致する。 */
.product_usecase {
  display: flex;
  gap: 17px;
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 0;
}
.product_usecase > li {
  flex: 1;
  min-width: 0;   /* flexアイテムの既定 min-width:auto だと中身の写真幅で下限が決まり縮まない */
  /* ★枚数が4枚未満でも1枚の大きさは4枚のときと同じにする。
     flex:1 だけだと余った幅を分け合って1枚が太るため、上限を「4枚ぶんの1枚分」に固定する。
     余った幅は既にある justify-content:center が左右へ振り分ける＝中央寄せになる。
     4枚のときは上限と実寸が一致するので表示は変わらない（gap 17px × 3 を引いて4等分）。 */
  max-width: calc((100% - 51px) / 4);
}

/* =========================================================
   安心の理由 / CTA（ページ地色に合わせる）
   ========================================================= */
.product_reliability {
  background: #fafafa;
}
.product_cta {
  background: #fafafa;
}

/* =========================================================
   カテゴリ遷移ボタン（全幅・2枚）
   ========================================================= */
.product_category {
  display: flex;
  gap: 4px;
  margin-top: 40px;
}
.product_category_btn {
  position: relative;
  overflow: hidden;
  flex: 1;
  height: 332px;
  box-sizing: border-box;
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #fff;
}
/* 背景は1枚（明るい版）。非ホバーは黒を乗せて暗く／ホバーで晴らす */
.product_category_btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0.5; /* 非ホバー：暗くする */
  transition: opacity 0.3s;
  z-index: 0;
}
.product_category_btn > * {
  position: relative;
  z-index: 1;
}
/* テーマの a:hover{opacity:.5} を打ち消す */
.product_category_btn:hover {
  opacity: 1;
}
.product_category_btn:hover::before {
  opacity: 0.08; /* ホバー：薄い黒のみ（Figma 8%） */
}
.product_category_btn .cat_title {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 48px;
  line-height: 44px;
  color: #fff;
}
.product_category_btn .cat_sub {
  font-size: 20px;
  font-weight: 500;
  line-height: 25px;
  color: #fff;
  margin-top: 14px;
}
.product_category_btn .cat_link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 400px;
  height: 52px;
  background: #fff;
  color: #000;
  border-radius: 60px;
  font-size: 16px;
  font-weight: 500;
  margin-top: 20px;
}
.product_category_btn .cat_link .cat_arrow_svg {
  position: absolute;
  right: 16px;
  width: 16px;
  height: 16px;
  transform: rotate(-90deg);
}
.product_category_btn .cat_link .cat_arrow_circle { fill: #828282; }
.product_category_btn .cat_link .cat_arrow_tri { fill: #fff; }
/* ホバー時の矢印：白丸＋中は赤三角 */
.product_category_btn:hover .cat_link .cat_arrow_circle { fill: #fff; }
.product_category_btn:hover .cat_link .cat_arrow_tri { fill: #e60039; }
/* ホバー時：ボタンを赤に・文字白／タイトル・サブに視認性用シャドウ */
.product_category_btn:hover .cat_link {
  background: #e60039;
  color: #fff;
}
.product_category_btn:hover .cat_title {
  text-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}
.product_category_btn:hover .cat_sub {
  text-shadow: 0 0 20px rgba(0, 0, 0, 0.8), 0 0 12px rgba(0, 0, 0, 0.4);
}

/* =========================================================
   法人TOPへ戻る（.usecase_back_btn 流用）
   ========================================================= */
.product_back {
  background: #fafafa;
  text-align: center;
  padding: 78px 40px 78px;
}

/* ===== レスポンシブ ===== */
@media (max-width: 1024px) {
  .product_lineup {
    grid-template-columns: repeat(2, 232px);
  }

  /* おすすめ用途: 法人TOP「用途別に探す」と同じBP(1024px)・同じ指定で2列へ。
     4列のままだとカードが幅に比例して縮む一方タイトルは16px固定なので、
     1000pxで「現場作業報告（工事・保守）」が2行になり、bottom基準の絶対配置ゆえ
     上（写真側）へ伸びて15.28px食い込んでいた（実測）。
     ★列指定とgapはTOPの値をそのまま使う（同じ部品は同じ見え方にする）。 */
  .product_usecase {
    display: grid;
    grid-template-columns: repeat(2, minmax(160px, 224px));
    gap: 28px 28px;
    justify-content: center;
  }
  /* ★PCで入れた「4枚ぶんの1枚分」の上限をここで解除する。
     グリッドの中では % の基準が親ではなく【グリッドセルの幅】になるため、
     残しておくと列幅224pxをさらに4等分して43.25pxまで潰れる。幅は列が決めればよい。 */
  .product_usecase > li {
    max-width: none;
  }
  /* ★枚数が奇数のとき、最後の1枚は左の列に取り残されて左寄りに見える。
     2列ぶんに広げたうえで justify-self で中央へ置く。カード自身の幅は列と同じ式で
     縛るので大きさは変わらない（列は minmax(160px,224px)＝余裕があれば224px）。
     偶数枚のときは :nth-child(odd) が外れるので何も起きない。 */
  .product_usecase > li:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: min(224px, calc((100% - 28px) / 2));
  }
  .product_top {
    flex-direction: column;
  }
  .product_main_photo {
    flex: 0 0 auto;
    width: 100%;
  }
  .product_spec {
    width: 100%;
  }
  .product_category {
    flex-direction: column;
  }
}

/* SP専用のカルーセルページャ（PCでは非表示） */
.product_lineup_dots { display: none; }

/* =========================================================
   モバイル（SP）対応  Figma「製品詳細ページ：Windows 2in1」393×5161
   BP=750px（テーマ全体で統一）。PCは無改変。
   KV（.usecase_mv）／共通見出し（.usecase_section_head）／CTA（.usecase_cta）は
   page-usecase.css のSP定義をそのまま流用するため、ここでは再定義しない。
   ========================================================= */
@media (max-width: 750px) {

  /* ===== KV =====
     共有の .usecase_mv SP定義（page-usecase.css）を流用するが、このページは2つの白箱で
     文字サイズが違う（Figma: 1箱目「aiwa」28px/leading28＝箱44px ／ 2箱目23px/leading29.952＝箱46px）。
     共有定義は kintai 由来で両方28pxなので、2箱目だけ23pxに戻す。
     28pxのままだと「Windows 2in1タブレットPC」が1行に392.8px必要で枠373pxに収まらず
     2行に折り返し、箱が46→76pxになって画面右へはみ出す＋副コピーに重なる */
  .product_mv .mv_title span:last-child {
    font-size: 23px;
    white-space: nowrap; /* Figmaも nowrap。折り返すと箱が2行になり副コピーに重なる */
  }

  /* ===== シリーズ紹介（Figma y491-669） ===== */
  .product_series {
    /* 下は0。カード下端(1034)→セクション下端(1042)の8pxは横スクロール帯の padding-bottom が持つ */
    padding: 40px 0 0; /* 上=写真下端491→タイトル531 */
  }

  .product_series_title {
    font-size: 28px;  /* Figma 28px W5（PC36） */
    line-height: 32px;
    font-weight: bold; /* 修正依頼#3: SP見出しは細く見えるためBold（PCは500のまま） */
  }

  .product_series_desc {
    font-size: 16px;  /* Figma 16px W6（PC20） */
    line-height: 28px;
    margin-top: 20px; /* タイトル下端563 → リード583 */
    padding: 0 20px;
  }

  /* ===== ラインアップ＝横スクロールのカルーセル（Figma "Lineup - scroll" 954×293） =====
     954 = 左右113 + カード167×4 + gap20×3。113は167pxカードを393pxに中央寄せする値＝
     各カードが画面中央にスナップする設計。 */
  .product_lineup_dots {
    display: flex;
    justify-content: center;
    gap: 8px;                  /* Figma ドットx=161/181/201/221（12px＋8px） */
    /* Figmaはリード下端669→ドット729の60px。実レンダリングのリード文ボックスは
       Figmaの枠より2px低い（3行×28=84 / Figma86）ので62pxでドットの絶対位置を合わせる */
    margin-top: 62px;
  }

  .lineup_dot {
    width: 12px;
    height: 12px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #ffacc1;       /* Figma Ellipse31/32 */
    cursor: pointer;
    appearance: none;
  }

  .lineup_dot.is_active {
    background: #e60039;       /* Figma Ellipse30 */
  }

  .product_lineup {
    display: flex;             /* 1024pxブロックの grid を打ち消す */
    grid-template-columns: none;
    /* PCの justify-content:center を必ず打ち消す。はみ出したflex行を中央寄せすると
       左へのはみ出し分（=280px）が scrollLeft では到達できない領域になり1枚目が見られなくなる */
    justify-content: flex-start;
    gap: 20px;
    margin-top: 8px;           /* ドット下端741 → 帯上端749（カード757は帯のpadding-top 8pxぶん） */
    /* 縦8pxはカードの影(blur8/spread4)の見切れ防止＝Figmaの上下8px。
       左右はカードを画面中央にスナップさせる余白＝(画面幅-カード幅)/2。
       393pxでちょうどFigmaの113pxになり、狭い/広い端末でも中央スナップが保たれる */
    padding: 8px calc((100vw - 167px) / 2);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;     /* 自前ドットを出すのでスクロールバーは隠す */
  }
  .product_lineup::-webkit-scrollbar { display: none; }

  .product_lineup_card {
    flex: 0 0 167px;           /* Figma カード167×277 */
    width: 167px;
    min-height: 277px;
    /* Figmaの内容位置（上64/左12/右11/下16）から border:1px ぶんを引く */
    padding: 63px 10px 15px 11px;
    scroll-snap-align: center;
  }

  /* バッジ40×40（Figma x12 / y16・gap4）。絶対配置の基準はpadding box＝枠の内側なので1px引く */
  .product_lineup_card .lineup_badges {
    top: 15px;
    left: 11px;
  }

  /* 型番は51px幅で2行に折り返す（Figma「JA4-」「TBW1002」） */
  .product_lineup_card .lineup_code {
    top: 15px;
    right: 10px;
    width: 51px;
    font-size: 10px;   /* Figma 10px（PC11） */
    line-height: 12px;
    text-align: left;
  }

  /* 内側144×197ブロック＝/business/ TOPの製品カードと同一コンポーネント */
  .product_lineup_card .lineup_photo {
    width: 102px;      /* Figma 写真102×80 */
    aspect-ratio: 102 / 80;
  }

  .product_lineup_card .lineup_name {
    font-size: 14px;   /* Figma 14px（PC16） */
    line-height: 13px; /* 既定1.5だと箱が高くなりspecの開始が下がる */
    margin: 6px 0 10px; /* 写真下端80→名前86 ／ 名前下端99→spec 109 */
  }

  /* specは font11/padding-left15 がPCのままFigma一致。アイコンだけ縮める
     （テキスト左端 = 15 + 16 + gap4 = 35px＝Figma値）。
     ★PCで入れた左右15.5%はSP幅では余白が狂うので、ショートハンドで明示的に戻す。 */
  .product_lineup_card .lineup_specs {
    padding: 0 0 0 15px;
  }
  .product_lineup_card .lineup_specs img {
    width: 16px;
    height: 16px;
  }

  /* セルが16px（PCの0.8倍）になるので、グリフの余白も0.8倍にする */
  .product_lineup_card .lineup_specs img[src$="icon_wifi.svg"] {
    padding: 1.6px;
  }

  /* 行ピッチはFigma18px（行高16＋2）。行高18のままだと最終行が2px高くなり内側ブロックが
     197→199pxになるので「16＋margin2・最終行は0」で組む（/business/ TOPの製品カードと同方式） */
  .product_lineup_card .lineup_specs li {
    line-height: 16px;
    min-height: 16px;
    margin-bottom: 2px;
  }
  .product_lineup_card .lineup_specs li:last-child {
    margin-bottom: 0;
  }

  /* 1スペック=1行（PC・Figmaとも各行1行組み）。実データ最長の「Intel Celeron N4020」が
     109.9px必要／枠109.0pxで0.9pxだけ足りず折り返し、カード高が16px膨らむため折返しを止める。
     はみ出す1px弱はカードのpadding-right(10px)の内側なので見た目には出ない。
     ※FigmaのSPモックはこの行が「Intel N100」（他機種のプレースホルダ）で1行に収まっている */
  .product_lineup_card .lineup_specs li span {
    white-space: nowrap;
  }
  /* ただし行ごとにアイコンを指定した機種（カメラ・ウェアラブル）は、Figmaが元から
     「1項目＝折返し2行」で組まれている。nowrapのままだとカード幅を大きく超えるため戻す。 */
  .product_lineup_card .lineup_specs--wrap li span {
    white-space: normal;
  }

  /* タッチ端末では :hover がタップ後に張り付くため、半透明も赤枠も無効化する。
     SPでは「赤い縁取り＝選択中の機種」だけを意味させ、タップした別カードに赤枠が残らないようにする
     （.is_active を後に置いて同詳細度(0,2,0)で勝たせる） */
  .product_lineup_card:hover {
    opacity: 1;
    border-color: transparent;
  }
  .product_lineup_card.is_active {
    border-color: #e60039;
  }
}

/* SP専用：製品タブ（横スクロール）の位置インジケータ */
.product_tabs_bar { display: none; }

/* =========================================================
   モバイル（SP）: 製品タブ ＋ 詳細パネル（Figma Group 337 y1162-2845）
   ========================================================= */
@media (max-width: 750px) {

  /* ===== 製品タブ＝横スクロール（Figma「製品 タブ」672×60・x20起点） ===== */
  .pw_detail {
    padding: 60px 0 0; /* シリーズ下端1042 → タブ1102。左右はパネルを全幅にするため0 */
  }

  .product_tabs {
    max-width: none;
    gap: 4px;                  /* Figma タブpitch164 － 幅160 */
    padding: 0 20px;           /* 帯の中身は x20 から。右も20pxの余白を持つ（合計692px） */
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .product_tabs::-webkit-scrollbar { display: none; }

  .product_tab {
    flex: 0 0 160px;           /* Figma タブ160×56（選択中のみ60） */
    font-size: 16px;           /* Figma 16px W6（PC20） */
    line-height: 21px;
    /* SPは <br class="sp-br"> で「aiwa tab」／型番の2行組み。行の中央揃えは base に移設済み
       （タブレット谷間でも折返すため）。SPはタブ幅160px固定なので左右paddingは不要 */
    padding: 0;
  }

  /* ===== 詳細パネル（Figma Rectangle119 393×1683・白地/赤1px枠・全幅） ===== */
  .product_card {
    max-width: none;
    margin: 0;
    border-width: 1px;         /* Figma 1px（PC2px） */
    padding: 0 19px 39px;      /* 内容 x20 = 枠1 + 19。下=カード下端2805→パネル下端2845 */
  }

  /* タブの位置インジケータ（Figma「バー」白353×5 / つまみ #49769f 3px） */
  .product_tabs_bar {
    display: block;
    position: relative;
    height: 5px;
    border-radius: 2.5px;
    background: #fff;
    margin-bottom: 20px;       /* バー下端1168 → 製品名1188 */
  }
  .product_tabs_bar_thumb {
    position: absolute;
    top: 1px;
    left: 1px;
    height: 3px;
    border-radius: 1.5px;
    background: #49769f;
    width: 0;                  /* 実幅はJSで可視/全体比から算出 */
  }

  /* ===== 上段：Figmaは「型番・バッジ → 特徴 → メイン写真」の縦順 ===== */
  .product_top {
    gap: 32px;                 /* 特徴文の下端1472 → 写真枠1504 */
  }
  /* PCは写真左・情報右。SPは情報が先に来るのでDOMを触らず order で入れ替える */
  .product_info {
    order: -1;
    width: 100%;               /* product_top は flex-direction:column; align-items:flex-start のため、
                                  指定しないと product_info は内容幅に縮み、製品名の長さでモデルごとに
                                  見出し罫線(product_info_head の border-bottom)の長さが変わる（先方指摘 2026-07-24）。
                                  写真と同じ353px幅に固定し、罫線を全モデルで一定＝Figma（Vector11=パネル全幅）に一致させる。 */
  }

  .product_info_head {
    padding-bottom: 8px;       /* 型番下端1228 → 罫線1236 */
    margin-bottom: 19px;       /* 罫線1237 → 特徴文1256 */
    gap: 8px;
  }

  .product_info_head .pw_product_name {
    line-height: 24px;         /* Figma 24px W6・leading24（PCはleading32） */
  }

  .product_info_head .product_code {
    font-size: 11px;           /* Figma 11px W4 / leading11（PC12px） */
    line-height: 11px;
    color: #000;
    margin: 4px 0 0;           /* 製品名下端1212 → 型番1216 */
  }

  .product_badges {
    gap: 4px;
  }
  .product_badges .badge_img {
    width: 40px;               /* Figma 40×40（PC56） */
    height: 40px;
  }

  /* 特徴文は 13px / leading24 がPCのままFigma一致（9行=216px） */

  /* ===== メイン写真（Figma 枠353×266.711・画像321.622×235.333＝内側15.69px） ===== */
  .product_main_photo {
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    aspect-ratio: 353 / 266.711;
  }
  .product_main_photo img {
    width: 91.11%;             /* 321.622 / 353 */
    height: 88.24%;            /* 235.333 / 266.711 */
  }

  /* ===== サムネイル6枚（Figma 353×39・1枚53.7・gap6.2） ===== */
  .product_thumbs {
    gap: 6.2px;
    margin-top: 15.8px;        /* 写真枠下端1770.7 → サムネ1786.5 */
  }
  .product_thumb {
    aspect-ratio: auto;
    height: 39px;
  }

  /* ===== スペック表（Figma 353幅・ラベル71/値283・行36） ===== */
  .product_spec {
    width: 100%;
    /* 列幅は71+282の固定なので狭い端末では100%を超える。autoで中央に寄せ、
       右だけに溢れて横スクロールが出るのを防ぐ（393pxでは内寸353とほぼ同幅＝見た目不変） */
    margin: 32.5px auto 0;     /* サムネ下端1825.5 → 表1858 */
  }
  .product_spec th,
  .product_spec td,
  .product_spec th:first-of-type,
  .product_spec th:last-of-type,
  .product_spec td:first-of-type,
  .product_spec td:last-of-type {
    /* 枠1+7+行20+7+枠1 = 36px＝Figmaの行高。2行になる行は56pxへ自動で伸びる（cellのheightは最小値） */
    height: 36px;
    padding: 7px 4px;
    line-height: 20px;
    vertical-align: middle;    /* 既定のbaselineだと11px/13px混在で行が膨らむ */
  }
  .product_spec th {
    width: 71px;               /* Figma ラベル列71px（テキスト幅63） */
    font-size: 11px;
    letter-spacing: -0.55px;   /* Figma tracking -0.55 */
  }
  /* グローバル style.css の tr td:first-of-type{width:30%} / :last-of-type{width:70%} 打ち消し。
     1行にtdが1つだけなので両方に該当し70%(247px)が適用され、table-layout:fixed の余りが
     ラベル列に加算されて71px→105.6pxに膨らんでいた。擬似クラス形(0,2,1)で打ち消す。
     auto にすると table-layout:fixed が「ラベル71pxを引いた残り全部」を値列に割り当てるので、
     393pxではFigma通り282px、狭い端末では自動で縮んで表が画面外に出ない（固定282pxだと
     テーブルのボックスは100%でも列だけ右に溢れ、margin:autoでは中央にも寄せられない） */
  .product_spec td,
  .product_spec td:first-of-type,
  .product_spec td:last-of-type {
    width: auto;
  }

  /* ===== 仕様詳細ボタン（Figma「button - 新規タブ」256×36） ===== */
  .product_spec_btn {
    margin-top: 24px;          /* 表下端 → ボタン */
  }
  .product_spec_btn a,
  .product_spec_btn span {
    gap: 24px;
    padding: 8px 16px 8px 52px;
    font-size: 18px;
    line-height: 20px;
    border-radius: 40px;
  }
  .product_spec_btn img {
    width: 20px;
    height: 20px;
  }

  /* ===== おすすめ用途（h2は .usecase_section_head のSP定義を流用） ===== */
  .product_usecase_head {
    margin-top: 80px;          /* ボタン下端 → h2 */
  }

  /* PC4列 → 2列（166px×2 + gap21px = 353px） */
  .product_usecase {
    display: grid;
    /* #4: 166px固定だと2列(=353px)が320/360pxで画面外へ。上限166で狭端末は縮小可に
       （名前は絶対配置left0/right0で折返すためカード幅に自動追従）。
       #4続き: 上限166だと広幅端末で左右余白が肥大→minmax(0,1fr)で幅追従（393px=166px設計維持）。 */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 19.74px 21px;         /* Figma 行2495/2660・列20/207 */
    /* 393pxではパネル内寸(393-枠2-padding38=353)とグリッド幅353が一致するのでstartでもcenterでも
       同じ結果。狭い端末(360px等)で右だけに溢れて横スクロールが出るのを避けるためcenterにする
       （/business/ TOPの同型グリッドと同じ方式） */
    justify-content: center;
  }
  .product_usecase > li {
    flex: none;                /* PCのflex:1を解除。SPはグリッドが幅を決める */
    max-width: none;           /* PCで入れた4枚基準の上限を解除（幅はグリッドが決める） */
  }
  /* ★奇数枚のときの最後の1枚。PC側と同じ理由だが、列が minmax(0,1fr) なので
     列幅は「(グリッド幅 − 列gap21px) ÷ 2」。この式でカード幅を縛って中央へ置く。 */
  .product_usecase > li:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc((100% - 21px) / 2);
  }
  /* ★タイトルの見え方（1行nowrap＋カード幅に比例して縮むcqw）は法人TOPと共通定義。
     以前ここにあった font-size:11.86px 固定は、TOPと揃える指示（2026-08-13）により削除した。 */

  /* ===== 下部タブ ===== */
  .product_tabs_bottom {
    margin-top: 0;
  }
}

/* =========================================================
   モバイル（SP）: カテゴリ遷移ボタン ／ 法人TOPへ戻る
   ========================================================= */
@media (max-width: 750px) {

  /* CTA下端3785 → カテゴリ3846 の61pxを作る。共有 .usecase_cta のSP padding-bottom:80px を打ち消す */
  .product_cta {
    padding-bottom: 0;
  }

  /* ===== カテゴリ遷移ボタン（Figma 393×252・全幅2枚を縦積み・間4px） ===== */
  .product_category {
    margin-top: 61px;
  }

  .product_category_btn {
    /* 1024pxブロックで縦積みになるとPCの flex:1 が「主軸=高さ」を可変にしてしまい
       height:252px が無視される（内容なりの192pxになる）ので固定に戻す */
    flex: 0 0 auto;
    height: 252px;
    justify-content: flex-start;
    padding-top: 60px;         /* ボタン上端3846 → タイトル3906 */
  }

  .product_category_btn .cat_title {
    font-size: 32px;           /* Figma Poppins SemiBold 32px（PC48） */
    line-height: 36px;
  }

  .product_category_btn .cat_sub {
    font-size: 14px;           /* Figma 14px W5（PC20） */
    line-height: 16px;
    margin-top: 12px;          /* タイトル下端3942 → サブ3954 */
  }

  /* Figma「button - ページ内リンク」168×36。テキストは中央でなく左26pxから（矢印は右8px） */
  .product_category_btn .cat_link {
    width: 168px;
    height: 36px;
    border-radius: 40px;
    justify-content: flex-start;
    padding-left: 26px;
    font-size: 14px;
    font-weight: 600;
    line-height: 14px;
    margin-top: 32px;          /* サブ下端3970 → ボタン4002 */
  }
  .product_category_btn .cat_link .cat_arrow_svg {
    right: 8px;
    width: 20px;               /* Figma 20px（PC16） */
    height: 20px;
  }

  /* ===== 法人TOPへ戻る（Figma 315×36） =====
     PCのpadding 40pxだと内寸313pxしか無く「法人のお客様TOPへ戻る」(18px)が
     2行に折り返してボタンが56pxになるため、SPは左右20pxにして自然幅315pxを確保する */
  .product_back {
    padding: 60px 20px 80px;   /* カテゴリ下端4354 → ボタン4414 ／ ボタン下端4450 → footer 4530 */
  }
}

/* KVの2箱目は Figma 393px 設計で右端367px＝余裕が26pxしかない。
   360px幅などの狭い端末では箱が画面外へ出るため、設計幅より狭い時だけ文字を幅に追従させる
   （6.133vw は 375px でちょうど23px＝固定値と連続するので375px以上と見た目が変わらない）。
   これが無いと nowrap のぶん箱が画面外へはみ出して横スクロールが発生する。 */
@media (max-width: 374px) {
  .product_mv .mv_title span:last-child {
    font-size: 6.133vw;
  }
}