/**
 * レスポンシブテーブル - アイリィデザイン
 * 価格表テーブルのモバイル対応
 */

/* スクロールラッパー */
.table-responsive-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1em;
    position: relative;
}

/* テーブル基本レスポンシブ */
@media (max-width: 767px) {
    /* hardcoded width属性のオーバーライド */
    .table-responsive-wrap table th[width],
    .table-responsive-wrap table td[width] {
        width: auto !important;
    }

    /* テーブルが潰れすぎないよう最小幅を確保 */
    .table-responsive-wrap table {
        min-width: 500px;
    }

    /* フォントサイズ縮小 */
    .table-responsive-wrap table th,
    .table-responsive-wrap table td {
        font-size: 12px;
        padding: 4px 3px;
    }

    /* スクロールヒント */
    .table-responsive-wrap::after {
        content: "← スクロールできます →";
        display: block;
        text-align: center;
        font-size: 11px;
        color: #999;
        padding: 6px 0;
        background: linear-gradient(to right, rgba(0,0,0,0.03), transparent 20%, transparent 80%, rgba(0,0,0,0.03));
    }

    /* スクロールインジケーター（右端のグラデーション） */
    .table-responsive-wrap::before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 30px;
        width: 20px;
        background: linear-gradient(to left, rgba(0,0,0,0.08), transparent);
        pointer-events: none;
        z-index: 1;
    }
}

/* タブレット */
@media (min-width: 768px) and (max-width: 991px) {
    .table-responsive-wrap table th,
    .table-responsive-wrap table td {
        font-size: 13px;
        padding: 5px 4px;
    }
}