/* ===================================================================
   responsive-common.css
   E-POST Web管理コンソール 共通レスポンシブ補正スタイル

   方針:
   - 色(color / background-color / bgcolor 属性)には一切触れない
   - 既存のTABLEレイアウト・CGIプレースホルダ(%s 等)・data-i18n属性・
     form の action/name はそのまま維持できるよう、構造は変更せず
     CSSのみでスマホ/タブレット幅でも崩れないようにする
   =================================================================== */

* {
    box-sizing: border-box;
}

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

body {
    font-size: 15px;
    line-height: 1.6;
    -webkit-text-size-adjust: 100%;
}

/* 画像・iframeがコンテナ幅を超えないように */
img, iframe {
    max-width: 100%;
    height: auto;
}

/* レイアウト用テーブルは常に幅いっぱいに */
table {
    max-width: 100%;
    width: 100%;
    border-collapse: collapse;
}

/* セルに余白を持たせて読みやすく(色は変更しない) */
table td, table th {
    padding: 6px 8px;
}

/* 文字・数値入力欄はSIZE属性で幅がはみ出さないよう上限をつける */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="tel"],
input[type="search"],
select,
textarea {
    max-width: 100%;
    font-size: 1em;
    padding: 4px 6px;
    box-sizing: border-box;
}

/* ボタン類は押しやすいサイズに(色はブラウザ/既存指定を継承) */
input[type="submit"],
input[type="button"],
input[type="reset"],
button {
    padding: 8px 18px;
    font-size: 1em;
    border-radius: 4px;
    cursor: pointer;
    min-height: 40px;
}

/* チェックボックス・ラジオボタンをタップしやすく */
input[type="checkbox"],
input[type="radio"] {
    width: 16px;
    height: 16px;
    transform: scale(1.25);
    margin-right: 8px;
    vertical-align: middle;
}

/* デスクトップでは中央寄せの読みやすい最大幅に収める */
body > center > table,
body > table {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

/* ============ タブレット/スマホ幅での調整 ============ */
@media (max-width: 700px) {

    body {
        font-size: 14px;
        padding: 0 4px;
    }

    /* レイアウト用の入れ子TABLEを縦積みにしてはみ出しを防ぐ */
    table, tbody, tr, td, th {
        display: block;
        width: 100% !important;
    }

    table {
        margin-bottom: 4px;
    }

    /* WIDTH指定されたラベルセルの固定幅を解除 */
    td[width], th[width] {
        width: 100% !important;
    }

    td, th {
        text-align: left !important;
    }

    /* COLSPANの中央揃え見出し等は引き続き中央に */
    td[align="center" i], th[align="center" i] {
        text-align: center !important;
    }

    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="number"],
    input[type="tel"],
    input[type="search"],
    select,
    textarea {
        width: 100%;
    }

    input[type="submit"],
    input[type="button"],
    input[type="reset"],
    button {
        width: 100%;
        margin: 4px 0;
    }

    /* FONTタグの大きい見出しをスマホでも収まるように */
    font[size="6"] { font-size: 1.5em !important; }
    font[size="5"] { font-size: 1.3em !important; }
    font[size="4"] { font-size: 1.15em !important; }
}