/* device-page-redesign.css — /device/ カード型ハブ 2026-06-27
   読み込み順: styles.css → service.css → premium-icon-placement.css → これ(最後)
   すべて .device-page-redesign スコープ。service.css の hero/accordion/faq を流用。 */

/* ===== 端末カテゴリ（最重要・大きめカード） ===== */
.device-page-redesign .device-cat-grid{
  display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin:18px 0 8px;padding:0;list-style:none}
.device-page-redesign .device-cat-grid a{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:20px 12px;border:1px solid #e3d9d7;border-radius:8px;background:#fff;
  text-decoration:none;color:#2b2c2e;font-weight:700;font-size:1.02rem;line-height:1.4;text-align:center;
  transition:border-color .15s,box-shadow .15s,transform .15s}
.device-page-redesign .device-cat-grid a:hover{
  border-color:#a34f4d;box-shadow:0 8px 20px rgba(163,79,77,.13);transform:translateY(-3px)}
.device-page-redesign .device-cat-grid img{width:58px;height:58px}
.device-page-redesign .device-cat-grid small{display:block;font-weight:500;font-size:.82rem;color:#7a6f6d;margin-top:2px}

/* ===== リンクカード（シリーズ/症状/EEAT/見分け方 共通） ===== */
.device-page-redesign .device-link-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:10px 0 4px;padding:0;list-style:none}
.device-page-redesign .device-link-grid.cols3{grid-template-columns:repeat(3,1fr)}
.device-page-redesign .device-link-grid.cols2{grid-template-columns:repeat(2,1fr)}
.device-page-redesign .device-link-grid a{
  display:flex;align-items:center;gap:10px;padding:13px 14px;
  border:1px solid #e3d9d7;border-radius:8px;background:#fff;text-decoration:none;
  color:#2b2c2e;font-weight:700;font-size:.95rem;line-height:1.45;
  transition:border-color .15s,box-shadow .15s,transform .15s}
.device-page-redesign .device-link-grid a:hover{
  border-color:#a34f4d;box-shadow:0 6px 16px rgba(163,79,77,.12);transform:translateY(-2px)}
.device-page-redesign .device-link-grid img{flex:0 0 auto;width:34px;height:34px}
.device-page-redesign .device-link-grid small{display:block;font-weight:500;font-size:.8rem;color:#7a6f6d;margin-top:1px}

/* セクション小見出し */
.device-page-redesign .device-subhead{
  display:flex;align-items:center;gap:10px;margin:22px 0 8px;font-size:1.08rem;font-weight:700;color:#2b2c2e}
.device-page-redesign .device-subhead img{width:30px;height:30px}
.device-page-redesign .device-note{font-size:.84rem;color:#6a5f5d;line-height:1.8;margin:4px 0 0}

/* 信頼バー */
.device-page-redesign .device-trust-bar{
  display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;justify-content:center;
  margin:16px 0;padding:12px 16px;background:#faf6f5;border:1px solid #ece2e0;border-radius:8px}
.device-page-redesign .device-trust-bar li{
  list-style:none;font-size:.88rem;font-weight:700;color:#5a4f4d}
.device-page-redesign .device-trust-bar b{color:#a34f4d}

/* ===== レスポンシブ ===== */
@media (max-width:860px){
  .device-page-redesign .device-cat-grid{grid-template-columns:repeat(3,1fr)}
  .device-page-redesign .device-link-grid,
  .device-page-redesign .device-link-grid.cols3{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .device-page-redesign .device-cat-grid{grid-template-columns:repeat(2,1fr)}
  .device-page-redesign .device-link-grid,
  .device-page-redesign .device-link-grid.cols3,
  .device-page-redesign .device-link-grid.cols2{grid-template-columns:1fr}
  .device-page-redesign .device-cat-grid img{width:48px;height:48px}
}

/* 症状・料金カード等のアイコン位置ずれ修正(2026-06-28): img の margin:auto が flex内で
   余白を食ってアイコンと文字が離れる→margin:0で隣接・左揃え */
.device-link-grid a { justify-content: flex-start !important; gap: 10px; }
.device-link-grid a img { margin: 0 !important; flex: 0 0 auto; }