@charset "utf-8";

/**
 *   @main color: PB/S るり色（#36608d）rgba(54, 96, 141, 1)
 *   @sub color:  RP/S 紅梅色（#ba4583）rgba(186, 69, 131, 1)
 *   @sub color:  Y/P  淡黄色（#ffe57a）rgba(255, 229, 122, 1)
 *
 *   @option color: RP/V 赤紫・マゼンタ（#c00070）rgba(192, 0, 112, 1)
 */

* {
    font-family: "メイリオ", Meiryo, Osaka, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    color: #000000;

    margin: 0;
    padding: 0;

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

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    font-size: 75%;
}


/* region for login.php */
    input[type='button'], input[type='submit'], input[type='reset'] {
        padding: 5px 10px;
    }

    div#login_form_dwrapper {
        width: 100%;
        height: 100%;

        display: table;
    }

    div#login_form_wrapper {
        text-align: center;
        vertical-align: middle;

        display: table-cell;
    }

    div#login_form {
        width: 80%;
        max-width: 500px;

        margin: 0 auto;
        padding: 10px 40px 20px 40px;

        border: 2px solid rgba(220, 220, 220, 1);
        border-radius: 5px;

        /*background-color: rgba(235, 235, 235, .5);
        background-image: repeating-linear-gradient(-45deg, transparent, transparent 3px, rgba(255, 255, 255, 3) 2px, rgba(255, 255, 255, 1) 6px);*/
        background: #ffffff;
    }

    div#login_form p#error_message {
        color: #ff0000;
        font-weight: bold;
        margin: 10px auto;
        padding: 10px;
        background: rgba(255, 255, 255, 0.8);
        border-radius: 4px;
    }
    div#login_form ul {
        list-style: none;
        margin: 0 auto;
        padding: 0;
    }
    div#login_form ul li {
        text-align: center;
        margin: 10px auto;
    }
    div#login_form ul li label {
        font-size: 120%;
        text-align: left;
        width: 100%;
        display: inline-block;
        padding: 0;
    }

    div#login_form ul li label span.arrow {
        text-indent: 12px;
        display: inline-block;
        position: relative;
    }
    div#login_form ul li label span.arrow:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        margin: auto;
        width: 7px;
        height: 7px;
        border-top: 2px solid #7a0;
        border-right: 2px solid #7a0;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }
    div#login_form ul li label input {
        font-size: 120%;
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 5px;
    }

    div#login_form ul li input[type='submit'],
    div#login_form ul li input[type='reset'],
    div#login_form ul li button {
        width: 80%;
        margin: 0 auto;
    }

/* end region */



/*===============================================
  画面の横幅が640pxまで
===============================================*/
@media screen and (max-width:780px){

    input[type='button'], input[type='submit'], input[type='reset'] {
        border: 4px double #f5f5f5;
        border-radius: 18px;
        background: #f5f5f5;
        padding: 5px;
    }
    input {
        max-width: 85%;
    }
    div#login_form {
        width: 100%;
        max-width: 100%;

        margin: 0 auto;
        padding: 5px 0;

    }
}