@charset "UTF-8";

*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* IE対策 */
main {
    display: block;
}

body {
    margin: 0;
    font-family: "Meiryo", "メイリオ", "MS UI Gothic", "Tahoma", "Lucida Grande", "ヒラギノ丸ゴ Pro W4", "Osaka", "ＭＳ Ｐゴシック", sans-serif;
    color: #414141;
    /*background-color: #c7ecff;*/
}

.content {
    /*background-color: #e2e6e8;*/
    margin: 0 auto;
    width: 1050px;
}

.login-form-wrap {
    background-color: #fff;
    border-radius: 30px;
    margin: 5em auto;
    padding: 2em;
    width: 50%;
}

.message.success {
    border: 2px #87d891 solid;
    border-radius: 5px;
    background-color: #c7d8ae;
    color: #444444;
}

.message.error {
    border: 2px #ff5042 solid;
    border-radius: 5px;
    background-color: #ff8273;
    color: #444444;
}

.error-message {
    border: 2px #ff5042 solid;
    border-radius: 5px;
    background-color: #ff8273;
    color: #444444;
}

.mg-top10 {
    margin-top: 10px;
}

.mg-bottom10 {
    margin-bottom: 10px;
}

.mg-left10 {
    margin-left: 10px;
}

.mg-right10 {
    margin-right: 10px;
}

.mg-top20 {
    margin-top: 20px;
}

.mg-bottom20 {
    margin-bottom: 20px;
}

.mg-left20 {
    margin-left: 20px;
}

.mg-right20 {
    margin-right: 20px;
}

.width100 {
    width: 100px;
}

.width200 {
    width: 200px;
}

.width300 {
    width: 300px;
}

.width400 {
    width: 400px;
}

.center {
    text-align: center;
}

.right {
    text-align: right;
}

.left {
    text-align: left;
}

.button-submit,
.button-ok,
.button-login,
.button-download {
    color: #fff;
    font-size: 1.2em;
    padding: 5px 10px;
    background-color: #106cac;
    border: none;
    border-radius: 5px;
    width: 150px;
    cursor: pointer;
}

.button-cancel,
.button-back,
.button-unset,
.button-logout {
    color: #414141;
    font-size: 1.2em;
    padding: 5px 10px;
    background-color: #cccecc;
    border: none;
    border-radius: 5px;
    width: 150px;
    cursor: pointer;
}

.display-flex {
    display: flex;
}

.display-flex-center {
    justify-content: center;
}

/* スクロール */
#pageTop {
    position: fixed;
    bottom: 20px;
    right: 20px;
}

#pageTop i {
    padding-top: 6px;
}

#pageTop a {
    display: block;
    z-index: 999;
    border-radius: 3em;
    width: 3em;
    height: 3em;
    background-color: #9FD6D2;
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
}

#pageTop a:hover {
    text-decoration: none;
    opacity: 0.7;
}

.notice {
    border: 2px solid #7c7c7c;
    border-radius: 5px;
    padding: 10px 5px;
    text-align: center;
}

.i-warning {
    color: #ff4e5e;
}

.i-caution {
    color: #ffcc72;
}

.i-notice {
    color: #414141;
}


/* === ボタンを表示するエリア ============================== */
.switchArea {
    line-height: 30px; /* 1行の高さ          */
    letter-spacing: 0; /* 文字間             */
    text-align: center; /* 文字位置は中央     */
    font-size: 13.5px; /* 文字サイズ         */

    position: relative; /* 親要素が基点       */
    margin: auto; /* 中央寄せ           */
    width: 75px; /* ボタンの横幅       */
    display: inline-block;
    background: #fff; /* デフォルト背景色   */
}

.switchArea:not(:last-child) {
    margin: auto 5% auto auto;
}

/* === チェックボックス ==================================== */
.switchArea input[type="checkbox"] {
    display: none; /* チェックボックス非表示 */
}

/* === チェックボックスのラベル（標準） ==================== */
.switchArea label {
    display: block; /* ボックス要素に変更 */
    box-sizing: border-box; /* 枠線を含んだサイズ */
    height: 30px; /* ボタンの高さ       */
    border: 1px solid #999999; /* 未選択タブのの枠線 */
    border-radius: 15px; /* 角丸               */
    cursor: pointer;
}

/* === チェックボックスのラベル（ONのとき） ================ */
.switchArea input[type="checkbox"]:checked + label {
    border-color: #78bd78; /* 選択タブの枠線     */
}

/* === 表示する文字（標準） ================================ */
.switchArea label span:after {
    content: "OFF"; /* 表示する文字       */
    padding: 0 0 0 18px; /* 表示する位置       */
    color: #999999; /* 文字色             */
}

/* === 表示する文字（ONのとき） ============================ */
.switchArea input[type="checkbox"]:checked + label span:after {
    content: "ON"; /* 表示する文字       */
    padding: 0 18px 0 0; /* 表示する位置       */
    color: #78bd78; /* 文字色             */
}

.switch input[type="checkbox"]:checked + label {
    border-color: #78bd78;
}

/* === 丸部分のSTYLE（標準） =============================== */
.switchArea .swImg {
    position: absolute; /* 親要素からの相対位置*/
    width: 26px; /* 丸の横幅           */
    height: 26px; /* 丸の高さ           */
    background: #999999; /* カーソルタブの背景 */
    top: 2px; /* 親要素からの位置   */
    left: 2px; /* 親要素からの位置   */
    border-radius: 13px; /* 角丸               */
    transition: .2s; /* 滑らか変化         */
    cursor: pointer;
}

/* === 丸部分のSTYLE（ONのとき） =========================== */
.switchArea input[type="checkbox"]:checked ~ .swImg {
    transform: translateX(45px); /* 丸も右へ移動       */
    background: #78bd78; /* カーソルタブの背景 */
}

.color-red {
    color: red;
}