/* スマホで多列の比較表を読みやすく表示する共通スタイル。 */
@media (max-width: 768px) {
  .mobile-table-scroll {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    margin: 0.9rem 0 1.15rem !important;
    border: 1px solid rgba(26, 107, 58, 0.16);
    border-radius: 8px;
    background: #fff;
  }

  .mobile-table-scroll::after {
    content: "← 横にスワイプして比較できます →";
    display: block;
    width: max-content;
    min-width: 100%;
    padding: 6px 10px;
    color: #52665a;
    background: #f2f8f4;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-align: center;
    white-space: nowrap;
  }

  .mobile-table-scroll > table.mobile-table-wide {
    display: table !important;
    width: max-content !important;
    min-width: 680px !important;
    max-width: none !important;
    margin: 0 !important;
    table-layout: auto !important;
    border-collapse: collapse !important;
  }

  .mobile-table-scroll > table.mobile-table-wide th,
  .mobile-table-scroll > table.mobile-table-wide td {
    min-width: 88px !important;
    padding: 9px 10px !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    line-height: 1.45 !important;
    vertical-align: middle !important;
  }

  .mobile-table-scroll > table.mobile-table-wide th:first-child,
  .mobile-table-scroll > table.mobile-table-wide td:first-child {
    min-width: 142px !important;
    max-width: 142px !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    text-align: left !important;
  }

  .mobile-table-scroll > table.mobile-table-wide th:last-child,
  .mobile-table-scroll > table.mobile-table-wide td:last-child {
    min-width: 92px !important;
  }
}