@charset "utf-8";

/* ========色========
青：#0469d0　水色：#12c6e7
薄黄：#f9fceb
 */

html {
    overflow-y: scroll;
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
    text-align: center;
    line-height: 1.6;
    letter-spacing: 1px;
    font: 14px/2 "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro"; /*文字サイズ、行間、フォント指定*/
    color: #333;
    height: 100%;
    padding: 0;
    margin: 0;
}

#bodyin {
    background-color: white;
    width: 96%;
    max-width: 920px;
    min-height: 92%;
    margin: 0 auto;
    padding: 10px 0 20px;
    border-radius: 10px; /* CSS3草案 */
    -webkit-border-radius: 10px; /* Safari,Google Chrome用 */
    -moz-border-radius: 10px; /* Firefox用 */
}

br {
    letter-spacing: normal;
}

a {
    color: #333;
    text-decoration: none;
}

a:hover {
}

a:hover img {
    opacity: 0.8;
    filter: alpha(opacity=80);
    -ms-filter: "alpha( opacity=80 )";
}

img {
    border: 0;
    max-width: 100%;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
}

ul {
    list-style: none;
    margin: 1em 0;
    padding: 0;
}

li {
    text-align: left;
    margin: 0;
}

p {
    text-align: left;
    margin: 0 0 15px;
}

div, li {
    box-sizing: border-box;
}

table {
/ / margin: 10 px 10 px 10 px 10 px;
    margin-left: auto;
    margin-right: auto;
    padding: 0px 0px 0px 0px;
    border-collapse: collapse;
}

th {
    text-align: center;
    background: #ccf0fd;
    padding: 6px;
}

.bordertable tr.cannot_order {
    background-color: #fddfdf;
}

/*.bordertable tr.cannot_order { background-color: #cccccc; }*/
div.cannot_order {
    margin: 1rem 0 0.5rem 0;
}

div.cannot_order p {
    margin: 0;
}

div.cannot_order ul {
    margin: 0;
}

input {
    width: 90%;
    background-color: #f9fceb;
    border: solid 1px #c4cba2;
}


@media print, screen and ( max-width: 767px ) {
    /* ウィンドウサイズが 767px 以下の場合有効 */
    th {
        padding: 4px 0;
        font-size: 90%;
        line-height: 1.4em;
    }

    td {
        padding: 8px 6px;
        font-size: 90%;
        line-height: 1.4em;
    }

}

@media print, screen and ( min-width: 768px ) {
    /* ウィンドウサイズが 768px 以上の場合有効 */
    th {
        padding: 6px 2px;
    }

    td {
        padding: 6px;
    }
}


/* ========汎用======== */
.center {
    text-align: center;
}

.left {
    text-align: left;
}

.right {
    text-align: right;
}

.red {
    color: red;
}

.error_msg {
    color: red;
    font-weight: bold;
}

.space {
    visibility: hidden
}

#goback {
    text-align: left;
}

#new_regist {
    text-align: right;
}

.reletive {
    position: relative;
    zoom: 1;
}

/* --------------- レイアウト ---------------- */
#header {
    position: relative;
}

#contents {
    position: relative;
}


@media print, screen and ( max-width: 767px ) {
    /* ウィンドウサイズが 767px 以下の場合有効 */
    #header {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    #contents {
        width: 100%;
        margin: 0;
        padding: 0 0;
    }

    #contentsin {
        width: 98%;
        margin: 0 auto;
        padding: 0;
    }

    #footer {
        padding: 10px 0 10px;
        width: 100%;
        background-color: #0469d0;
        line-height: 1.2em;
    }

    .s-off {
        display: none;
    }

    .page_numbers_left {
        clear: both;
        text-align: center;
    }

    .page_numbers_right {
        clear: both;
        text-align: center;
    }
}

@media print, screen and ( min-width: 768px ) {
    /* ウィンドウサイズが 768px 以上の場合有効 */
    body {
        background: url(../images/back1.gif);
        padding: 20px 0 0;
    }

    #header {
        width: 96%;
        margin: 0 auto;
        padding: 0;
    }

    #contents {
    }

    #contentsin {
        width: 90%;
        margin: 0 auto;
        padding: 20px 0 40px;
    }

    #footer {
        margin: 20px auto 10px;
        width: 90%;
    }

    .pc-off {
        display: none;
    }

    .page_numbers_left {
        float: left;
        text-align:center;
        margin:20px auto;
    }

    .page_numbers_right {
        float: right;
        text-align:center;
        margin:20px auto;
    }
}


/* ------------　コンテンツ Contents ------------------------- */

/* ページ名下のテキスト */
h2 + p {
    font-size: 90%;
    text-align: center;
}

/* メッセージ */
#messagearea {
    background-color: #f6f9f9;
    border: double 3px #12c6e7;
    box-sizing: border-box;
}

#messagearea h4 {
    color: #e60012;
    width: 90%;
    margin: 0 auto;
    padding: 0;
    text-align: left;
    font-size: 120%;
}

#messagearea ul {
    margin: 0 auto;
    width: 90%;
}

#messagearea li {
    line-height: 1.4em;
}

/* ログイン中アカウント表示 */
#accountname {
}

/* テーブル */
.bordertable {
    border: solid 1px #888;
    border-bottom: none;
    background-color: white;
}

.bordertable th, .bordertable td {
    border-bottom: solid 1px #888;
    border-left: dotted 1px #ccc;
}

.bordertable th:first-child, .bordertable td:first-child {
    border-left: none;
}

@media print, screen and ( max-width: 767px ) {
    /* ウィンドウサイズが 767px 以下の場合有効 */
    h2 {
        width: 100%;
        text-align: center;
        font-size: 100%;
        line-height: 1em;
        background-color: #0469d0;
        color: white;
        padding: 10px 0;
    }


    .pagebacklink {
        margin: 10px auto 0 10px;
        font-size: 80%;
    }

    #accountname {
    }

    #accountname li {
        text-align: center;
    }

    .bordertable {
        box-sizing: border-box;
    }

    .bordertable tbody, .bordertable thead {
        border-bottom: solid 1px #888;
    }

    .bordertable tr {
        border-bottom: dotted 1px #ccc;
    }

    .bordertable th, .bordertable td {
        border-bottom: none;
    }

    #messagearea {
        margin: 0 auto 10px;
        padding: 4px 0 8px;
    }

    #messagearea h4 {
        margin: 0 auto 0;
    }

}

@media print, screen and ( min-width: 768px ) {
    /* ウィンドウサイズが 768px 以上の場合有効 */
    h2 {
        position: absolute;
        top: 0;
        left: 50px;
        width: 260px;
        text-align: center;
        background-color: #0469d0;
        color: white;
        padding: 10px 0;
    }

    #accountname {
        margin: 20px 0 20px auto;
        width: 44%;
    }

    #accountname li {
        margin: 4px 0;
        padding: 0;
        line-height: 1.4em;
    }

    #messagearea {
        padding: 10px 0 16px;
        margin: 10px auto;
    }

    #messagearea h4 {
        color: #e60012;
        padding: 0;
        width: 90%;
        margin: 0 auto;
        text-align: left;
    }

    #messagearea ul {
        margin: 0 auto;
        width: 90%;
    }

    #messagearea + #toparea {
        margin-top: 30px;
    }
}


/* ------------　ヘッダー Header ------------------------- */
#header {
}

#logoarea {
    padding: 0;
}

#logoarea h3 {
    font-size: 100%;
    margin: 0 0 0;
}

#headmenu {
    z-index: 999;
}

#headmenu li {
    text-align: center;
    margin: 0;
}

#headmenu li.on {
}

#headmenu a {
    display: block;
    padding: 100px 0 10px;
    background-color: #f0eded;
}

#headmenu a:hover {
    text-decoration: underline;
    color: #0469d0;
}

#headmenu li.list a {
    background: url(../images/header/menu-list.gif) no-repeat center 20px;
    background-size: 60px;
}

#headmenu li.regist a {
    background: url(../images/header/menu-regist.gif) no-repeat center 20px;
    background-size: 60px;
}

#headmenu li.home a {
    background: url(../images/header/menu-home.gif) no-repeat center 20px;
    background-size: 60px;
}

#headmenu li.logout a {
    background: url(../images/header/menu-logout.gif) no-repeat center 20px;
    background-size: 60px;
}


@media print, screen and ( max-width: 767px ) {
    /* ウィンドウサイズが 767px 以下の場合有効 */
    #logoarea {
        margin: 0 auto 0 2%;
        width: 45%;
        min-width: 180px;
        padding: 0;
    }

    #logoarea h3 {
        display: none;
    }

    #smartmenu {
        position: absolute;
        width: 50px;
        height: 50px;
        top: 15px;
        right: 0;
        background: url(../images/header/smart.gif) no-repeat top right;
        background-size: 50px;
        text-indent: -9999px;
    }

    #smartmenu a {
        width: 100%;
        height: 100%;
        display: block;
    }

    #headmenu {
        overflow: hidden;
        padding: 0;
        margin: 0;
        display: none;
    }

    #headmenu li {
        width: 50%;
        float: left;
        background-color: white;
        margin: 0 0 10px;
    }

    #headmenu a {
        display: block;
        width: 94%;
        margin: 0 auto;
        border: solid 1px #ddd;
    }

    #headmenu li.on a {
        background-color: white;
    }

}

@media print, screen and ( min-width: 768px ) {
    /* ウィンドウサイズが 768px 以上の場合有効 */
    #logoarea {
        width: 260px;
        margin: 20px auto 0 20px;
    }

    #logoarea img {
        width: 240px;
    }

    #headmenu {
        display: flex;
        -webkit-justify-content: space-between; /* Safari */
        justify-content: space-between;
        -webkit-flex-wrap: nowrap; /* Safari */
        flex-wrap: nowrap;
        position: absolute;
        top: -15px;
        right: 10px;
        width: 56%;
    }

    #headmenu li {
        width: 24%;
        -webkit-flex-grow: 1;
        flex-grow: 1;
    }

    #headmenu li.on a {
    }

    #headmenu li.on a:hover {
        border-color: white;
    }


}


/* ------------　フッター Footer ------------------------- */

address {
    font-size: 11px;
    text-align: center;
    font-style: normal;
}

@media print, screen and ( max-width: 767px ) {
    /* ウィンドウサイズが 767px 以下の場合有効 */
    address {
        color: #f2fcf5;
    }

}