/* =====================================================
   規約変更: 今後はできる限り各ページ専用CSSに書く方針のため、
   このファイルには「standard」を含む共通UIパーツのクラスのみを
   残しています。それ以外の共通クラス(headerCompanyName、text-red、
   width-XX等)は使用している各ページのCSSファイルへ分散済みです。

   属性の記述順について: このファイルのstandardクラス(standardButton等)を
   要素に付与する際は、そのクラスを「下地」として扱うため、可能な限り
   id属性や他のclass属性より先に宣言してください。
   例: <input class="standardButton gridActionButton" id="back" ... />
   （HTML上の見た目・カスケードの挙動自体は変わりませんが、可読性のための
   規約です）
   ===================================================== */

/* 背景色・文字色は.standardButtonBackgroundBlue(紺背景・白文字)と
   反転させ、白背景・紺文字にしています。
   display: inline-flexについて: テキストの上下左右中央ぞろえのため
   flexコンテナにしていますが、displayをflexにすると要素がブロック化して
   隣り合うボタン同士が常に縦積みになってしまうため、inline-flexにして
   従来通りインラインで横並びできるようにしています。 */
.standardButton {
    width: 72px;
    height: 27px;
    font-size: 15px;
    font-weight: bold;
    background-color: White;
    color: #1850a2;
    border-radius: 4px;
    border: 1px solid #1850a2;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* <a>タグに付与した場合でも<input type="button">と同じ見た目になるよう、
       リンクの既定装飾(下線)とテキストカーソルを打ち消す */
    text-decoration: none;
    cursor: pointer;
}

.standardButtonBackgroundBlue {
    width: 72px;
    height: 27px;
    font-size: 15px;
    font-weight: bold;
    background-color: #1850a2;
    color: White;
    border-radius: 4px;
    border: none;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
}

.standardButtonDisabled {
    width: 72px;
    height: 27px;
    font-size: 15px;
    font-weight: bold;
    background-color: #EEEEEE;
    color: #999999;
    border-radius: 4px;
    border: 1px solid #CCCCCC;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
}

.standardTable {
    border-width: 1px;
    border-style: Solid;
    font-size: Medium;
    border-collapse: collapse;
    color: Black;
    background-color: White;
    border-color: #999999;
}

    /* .standardTableを使うテーブルだけに効くth/tdリセット。
   bare th/tdセレクタは全ページに影響するため、あえてクラスで絞っています。 */
    .standardTable th {
        height: 13px;
        line-height: 1.3;
        padding: 0px;
    }

    .standardTable td {
        height: 14px;
        line-height: 1.4;
    }

.standardTableHeaderRow {
    color: White;
    background-color: Black;
    font-weight: bold;
}

.standardTableRowAlt {
    background-color: #CCCCCC;
}

.standardImageButton {
    height: 30px;
    width: 111px;
}

.standardTextArea {
    width: 59.3mm;
    height: 14.6mm;
}

.standardTextBox {
    height: 22px;
    width: 130px;
}

.standardDropdown {
    width: 49mm;
    height: 5.4mm;
    font-size: 10pt;
}

.standardListBox {
    height: 434px;
    width: 347px;
}

/* =====================================================
   レスポンシブ対応の共通部品(車両リスト画面・加盟店選択画面で共通)。
   FHD等の大画面で本文が間延びしないようmax-width: 1200pxで包む
   コンテナと、幅の狭い一覧テーブルを横スクロールさせるラッパー。
   768px/1024pxの2閾値は各ページで共通のため、ここにまとめています。
   ページ固有の調整(ヘッダーの縦積みなど)は各ページのCSSに残しています。
   ===================================================== */
.standardPageContainer {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 0 23px;
}

.standardGridScrollWrapper {
    overflow-x: auto;
}

/* タブレット(769px〜1024px): 左右余白のみ縮小 */
@media (max-width: 1024px) {
    .standardPageContainer {
        padding: 0 16px;
    }
}

/* スマートフォン(768px以下): 左右余白をさらに縮小 */
@media (max-width: 768px) {
    .standardPageContainer {
        padding: 0 12px;
    }
}