﻿html, body, form {
    height: auto;
    width: 100%;
    margin: 0px;
    padding: 0px;
    background-color: white;
}
::placeholder {
    color: #cccccc;
}
span.word-block {
    display:inline-block;
}
span.font-red{
    color: #ff0000;
}
input[type="radio"] {
    transform: scale(1.5);
    position: relative;
    top: -2px;
}
input[type="checkbox"] {
    transform: scale(1.5);
    position: relative;
 }
/*共通画面*/
.screen {
    height: auto;
    margin: 30px auto 0px auto;
    background-color: white;
    padding-bottom: 20px;
}
/*規約表示エリア*/
.terms-box {
    height: 600px;
    border: 1px solid;
    overflow-y: scroll;
}
/*画面幅768px以上　（PC・タブレット用）*/
@media screen and (min-width: 768px) {
    .screen {
        width: 768px;
    }
    .disp-pc-none {
        display: none; /*非表示*/
    }
    .disp-pc {
        display: normal; /*表示*/
    }
}
/*画面幅767px以下　（スマホ用）*/
@media screen and (max-width: 767px) {
    .screen {
        width: 360px;
    }
    .disp-pc-none {
        display: normal; /*表示*/
    }
    .disp-pc {
        display: none; /*非表示*/
    }
    /*規約画面の画像で使用*/
    .terms-box {
        height: 400px;
    }
}
/* 変更内容確認画面*/
.old_color {
    background-color: transparent;
}
.new_color {
    background-color: #FFEBCD;
}

/*ロゴ・ログアウトエリア*/
table.layout-table {
    table-layout: fixed;
    width: 100%;
    overflow-wrap: break-word;
    empty-cells: show;
    border-collapse: collapse;
    border:none;
}

/*ロゴイメージ*/
.logo-img {
    vertical-align: bottom; /* 画像の下余白削除*/
}
/*施設名ラベル*/
.facility-name {
    display:inline-block;
    border: 3px double gray;
    font-size: 14px;
    padding: 2px 5px;
}
/*タイトルラベル*/
.title-label {
    font-size: 20pt;
    font-weight: bold;
    text-align: center;
    display: block;
    background-color: #6CBB5A;
    padding: 5px;
    color: #FFFFFF;
    border-radius: 10px;
}
/*必須ラベル*/
.req-label {
    color: red;
    font-weight: bold;
    padding: 0px;
}
/*入力エラーメッセージ*/
.error-msg-area {
    border: 1px solid #ff0000; /*#e95464;*/
    background-color: #ffe4e1;
    padding: 10px;
}
.error-message {
    color: #ff0000;
    font-size: 16px;
}
tr.errorMessageRow {
}
tr.errorMessageRow-margin {
    display: none;
}
tr.errorMessageRow + tr.errorMessageRow-margin {
    display: table-row;
}

/*表*/
table.border-table {
    table-layout: fixed;
    width: 100%;
    overflow-wrap: break-word;
    border: none;
    empty-cells: show;
    border-collapse: separate;
}
.border {
    border: 1px solid #b9b9b9;
}
.border.top-none {
    border-top: none;
}
.border.bottom-none {
    border-bottom: none;
}
.border.left-none {
    border-left: none;
}
.border.right-none {
    border-right: none;
}

/*病衣タイプ表示制御*/
tr.weartype {
    display: none;
}
tr.weartype.show {
    display: table-row;
}
td.weartype {
    display: none;
}
td.weartype.show {
    display: table-cell;
}
td.weartype.show ~ .reversaldisp-weartype {
    display: none;
}

/*病衣サイズ表示制御*/
tr.wearsize {
    display: none;
}
tr.wearsize.show {
    display: table-row;
}
td.wearsize {
    display: none;
}
td.wearsize.show {
    display: table-cell;
}
td.wearsize.show ~ .reversaldisp-wearsize {
    display: none;
}
.border.right-auto.weartype.show + .border {
    border-left: none;
}
.border.right-auto.wearsize.show + .border {
    border-left: none;
}

.td-label {
    font-size: 15px;
    font-weight: bold;
    background-color: #EEEEEE;
    text-align: center;
    vertical-align: middle;
    padding: 10px 5px 10px 5px;
}
.td-label.no-padding{
    padding: 0px;
}
.td-label.req-label {
    color: red;
    font-weight: bold;
    padding: 0px;
}
.td-data {
    font-size: 15px;
    padding: 10px;
    vertical-align: middle;
}
.td-data.no-padding {
    padding: 0px;
}
.td-data.input-error {
    background-color: #ffe4e1;
}
.td-label .text-sub, .td-data .text-sub {
    font-weight: normal;
    font-size: 13px;
}

td.center, th.center {
    text-align: center;
    vertical-align: middle;
}
td.right, th.right {
    text-align: right;
    vertical-align: middle;
}
td.left, th.left {
    text-align: left;
    vertical-align: middle;
}
span.zipcode:not(:empty):before {
    content: "〒";
}
/*補足説明関連*/
.normal-comment {
    font-weight: normal;
    color: black;
}
.strong-comment {
    font-weight: bold;
    color: black;
}
.normal-red-comment {
    font-weight: normal;
    color: red;
}
.strong-red-comment {
    font-weight: bold;
    color: red;
}
/*テキストボックス*/
input[type="text"].text, input[type="password"].text {
    border-radius: 10px;
    border: 1px solid #767676;
    width: 80%;
    font-size: 16px;
    padding: 10px;
}
input[type="text"].text.half {
    width: 37%;
}
input[type="text"].text.zipcode {
    width: 70px;
}
textarea.text {
    border: 1px solid #767676;
    width: calc(100% - 22px);
    font-size: 16px;
    padding: 5px;
    margin: 5px;
}

input[type="text"].text:focus, input[type="password"].text:focus, textarea.text:focus {
    background-color: #ffffcc;
}

/*セレクトボックス*/
select.select {
    height: 40px;
    font-size: 16px;
    border-radius: 0px;
    width: 85%;
}
/*年*/
select.select.year {
    width: auto;
}
@media screen and (max-width: 767px) {
    /*年*/
    select.select.year {
        width: 72px;
    }
}
/*月*/
select.select.month {
    width: auto;
}
/*日*/
select.select.day {
    width: auto;
}
/*その他*/
select.select.normal {
    width: auto;
}
select.listbox {
    font-size: 16px;
    border-radius: 0px;
    width: 85%;
    height: auto;
    max-height: 300px;
}
@media screen and (max-width: 767px) {
    select.listbox {
        height: 40px;
    }
}

/*ボタン*/
a.button {
    display: inline-block;
    border: 0;
    border-radius: 10px;
    background-color: #F39938; /*#e19f30;/*#FFA500;*/
    color: #FFFFFF;
    font-size: 20px;
    font-weight: bold;
    padding: 10px;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    cursor: pointer;
}

#lblBtnCopy {
    display: inline-block;
    border: 0;
    border-radius: 10px;
    background-color: #F39938; /*#e19f30;/*#FFA500;*/
    color: #FFFFFF;
    font-size: 20px;
    font-weight: bold;
    padding: 10px;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    cursor: pointer;
    padding-top: 5px;
    padding-bottom: 5px;
}

a.button.accept {
    background-color: #FF3300;
}
/*ボタン非活性*/
a.aspNetDisabled.button, a.aspNetDisabled.button:hover {
    background-color: gray !important;
    cursor: default !important;
}
/*メニューボタン*/
a.button.menu-btn {
    padding: 15px 0px;
    margin: 0px 10px;
    width: 40%;
}
/*確認内容ボタン*/
a.button.confirmation-btn {
    padding: 15px 0px;
    margin: 0px 10px;
    width: 26%;
}
/*項目内ボタン*/
a.button.inline-btn {
    padding-top: 5px;
    padding-bottom: 5px;
}
a.button.inline-btn.next-spacing + a.button.inline-btn:before {
    display: inline-block;
    width: 20px;
}
/*申込進度ラベル*/
.step-line {
    padding-bottom: 24px;
}

.step {
    color: #FFFFFF;
    background-color: #7BAECE;
    border: 1px solid;
    border-radius: 10px;
    padding: 5px 0px;
    height: 30px;
    text-align: center;
    vertical-align: middle;
}

.step.current {
    background-color: #006DAD;
    font-weight: bold;
}

.step-sub {
    font-weight: bold;
    font-size: 12px;
    text-align: center;
    vertical-align: middle;
    transform: scaleY(2);
}

/* 利用状況テーブル */
div.usage-table {
    display: inline-block;
    overflow-x: auto;
    overflow-y: auto;
    max-width: 768px;
    max-height: 640px;
}
table.usage-table {
    border: none;
    empty-cells: show;
    border-collapse: separate;
}

table.usage-table > * > tr {
    height: 40px;
    min-height: 40px;
}
table.usage-table > * > tr > td {
    width: 62px;
    min-width: 62px;
    max-width: 62px;
}
@media screen and (max-width: 767px) {
    div.usage-table {
        max-width: 360px;
        max-height: 500px;
    }
    table.usage-table > * > tr > td {
        width: 50px;
        min-width: 50px;
        max-width: 50px;
    }
}

div.daily-usage-table {
    display: block;
    overflow-x: auto;
    overflow-y: auto;
    max-width: 768px;
    max-height: 780px;
}
table.daily-usage-table {
    table-layout: fixed;
    box-sizing: border-box;
    border: none;
    empty-cells: show;
    border-collapse: separate;
}

@media screen and (max-width: 767px) {
    div.daily-usage-table {
        max-width: 360px;
        max-height: 500px;
    }
}

div.product-history-table {
    display: block;
    overflow-x: auto;
    overflow-y: auto;
    max-width: 768px;
    max-height: 460px;
}

table.product-history-table {
    table-layout: fixed;
    box-sizing: border-box;
    border: none;
    empty-cells: show;
    border-collapse: separate;
}

.vertical-write {
    -webkit-writing-mode: vertical-lr;
    -moz-writing-mode: vertical-lr;
    writing-mode: vertical-lr;
    -webkit-text-orientation: upright;
    -moz-text-orientation: upright;
    text-orientation: upright;
}
td > .vertical-stretch {
    display: block;
    width: 100%;
}
th.w116, td.w106 {
    width: 106px;
    min-width: 106px;
    max-width: 106px;
}
th.w117, td.w107 {
    width: 107px;
    min-width: 107px;
    max-width: 107px;
}
th.w120, td.w120 {
    width: 120px;
    min-width: 120px;
    max-width: 120px;
}
th.w150, td.w150 {
    width: 150px;
    min-width: 150px;
    max-width: 150px;
}
th.w240, td.w240 {
    width: 240px;
    min-width: 240px;
    max-width: 240px;
}
.usage-check-cell {
    width: 62px;
    min-width: 62px;
    max-width: 62px;
}
@media screen and (max-width: 767px) {
    th.w116, td.w106 {
        width: 38px;
        min-width: 38px;
        max-width: 38px;
    }
    th.w117, td.w107 {
        width: 39px;
        min-width: 39px;
        max-width: 39px;
    }
    th.w120, td.w120 {
        width: 80px;
        min-width: 80px;
        max-width: 80px;
        word-break: break-all;
    }
    th.w150, td.w150 {
        width: 100px;
        min-width: 100px;
        max-width: 100px;
        word-break: break-all;
    }
    th.w240, td.w240 {
        width: 180px;
        min-width: 180px;
        max-width: 180px;
        word-break: break-all;
    }
    .usage-check-cell {
        width: 50px;
        min-width: 50px;
        max-width: 50px;
    }
}

.header-fixed-row > th,
.header-fixed-row > td {
    position: sticky;
    top: 0;
    z-index: 1;
}

.header-fixed-rows > th,
.header-fixed-rows > td {
    position: sticky;
    /*top: script calc;*/
    z-index: 1;
}

.footer-fixed-row > th,
.footer-fixed-row > td {
    position: sticky;
    bottom: 0;
    z-index: 1;
}

.footer-fixed-rows > th,
.footer-fixed-rows > td {
    position: sticky;
    /*bottom: script calc;*/
    z-index: 1;
}

.left-fixed-col {
    position: sticky;
    left: 0;
    z-index: 1;
}

.left-fixed-cols {
    position: sticky;
    /*left: script calc;*/
    z-index: 1;
}

.right-fixed-col {
    position: sticky;
    right: 0;
    z-index: 1;
}

.right-fixed-cols {
    position: sticky;
    /*right: script calc;*/
    z-index: 1;
}

.header-fixed-row .left-fixed-col,
.header-fixed-row .left-fixed-cols,
.header-fixed-row .right-fixed-col,
.header-fixed-row .right-fixed-cols,
.header-fixed-rows .left-fixed-col,
.header-fixed-rows .left-fixed-cols,
.header-fixed-rows .right-fixed-col,
.header-fixed-rows .right-fixed-cols,
.footer-fixed-row .left-fixed-col,
.footer-fixed-row .left-fixed-cols,
.footer-fixed-row .right-fixed-col,
.footer-fixed-row .right-fixed-cols,
.footer-fixed-rows .left-fixed-col,
.footer-fixed-rows .left-fixed-cols,
.footer-fixed-rows .right-fixed-col,
.footer-fixed-rows .right-fixed-cols {
    z-index: 2;
}

.non-fixed-row:first-child > .border {
    border-top: none !important;
}

.left-fixed-col + .non-fixed-col,
.left-fixed-cols + .non-fixed-col {
    border-left: none !important;
}

.alternate-row-style > tr:nth-child(odd) {
    background-color: #ffffff;
}

.alternate-row-style2 > tr:nth-child(4n+1), .alternate-row-style2 > tr:nth-child(4n+2) {
    background-color: #ffffff;
}

.alternate-row-style > tr:nth-child(even) {
    background-color: #f6f6f6;
}

.alternate-row-style2 > tr:nth-child(4n), .alternate-row-style2 > tr:nth-child(4n-1) {
    background-color: #f6f6f6;
}

.alternate-row-style > tr > th,
.alternate-row-style > tr > td,
.alternate-row-style2 > tr > th,
.alternate-row-style2 > tr > td {
    background-color: inherit;
}

/** {
font-family: "ＭＳ ゴシック", "MS Gothic", "Osaka-等幅", monospace;
font-size: 11pt;
zoom: 1;
word-break: break-all;
-webkit-text-size-adjust: none;
}*/

.ui-widget * {
    font-family: "ＭＳ ゴシック", "MS Gothic", "Osaka-等幅", monospace !important;
}

a img {
    border-style: none;
}

/*入力欄:通常時*/
input[type=text], input[type=password], select, textarea {
    border: 1px solid #7A9DDE;
    margin-bottom: 0px;
}

/*入力欄:フォーカス取得時*/
input[type=text]:focus, input[type=password]:focus, select:focus, textarea:focus, .ark-input-focus {
    background-color: #FFFFB0;
    color: Black !important;
}

input[type=radio], input[type=checkbox] {
    vertical-align: middle;
}

input[type=radio] + label, input[type=checkbox] + label {
    vertical-align: middle;
}

/*CheckBox,Radioの周りのspan,table*/
[ark-span-table] {
    /*display: table-cell;*/
    display: inline-block;
    vertical-align: middle;
    border: 1px solid transparent;
}

[ark-span-table] * {
    vertical-align: middle;
}

/*入力欄:入力エラー時*/
[ark-input-error] {
    /*border: 1px solid Red !important;*/
    border-color: red !important;
}

input[readonly=readonly], textarea[readonly=readonly] {
    background-color: #EAEAEA !important;
    border: 1px solid gray !important;
}

select.aspNetDisabled {
    background-color: #EAEAEA !important;
}

.ui-datepicker .ui-datepicker-header, .ui-dialog .ui-dialog-titlebar {
    /*background-image: url(../../Image/dialog_head.gif) !important;*/
    background-image: none !important;
    background-repeat: repeat-x !important;
    background-position: top center !important;
    background-color: #2AAC4C !important;
    color: white;
}

.ui-datepicker td span, .ui-datepicker td a {
    background-image: none !important;
    background-color: #2AAC4C;
}

.ui-datepicker-title {
    white-space: nowrap !important;
}

.ui-datepicker-year {
    width: 5em !important;
}

.ui-datepicker-month {
    width: 5em !important;
}

.ui-datepicker-trigger {
    height: 23px !important;
    width: 23px !important;
}

.ui-widget-overlay {
    /*filter: Alpha(Opacity=50) !important;*/
    opacity: 0.5 !important;
}

.ui-dialog {
    border: 1px solid black !important;
}

.ui-datepicker {
    border: 1px solid black !important;
    z-index: 5 !important;
}

.ui-dialog .ui-dialog-buttonpane button, .ui-datepicker-trigger {
    text-align: center;
    text-decoration: none;
    background-color: lightgray;
    vertical-align: middle;
    border: 1px solid black;
    font-weight: bold;
    color: Black;
    line-height: 1em;
    border-radius: 2px;
    display: inline-block;
    cursor: pointer;
    padding: 2px 2px 1px 2px;
}

input[type="text"].aspNetDisabled, select.aspNetDisabled, textarea.aspNetDisabled {
    background-color: #EAEAEA !important;
    color: black !important;
}

.ui-dialog-buttonset button {
    padding: 0px 10px 0px 10px !important;
    height: 25px !important;
}

.ui-dialog-titlebar-close {
    display: none;
}

#dvLoading {
    opacity: 0.5;
    opacity: 0.1;
    position: fixed;
    top: 0px;
    left: 0px;
    background-color: #000000;
    z-index: 99999998;
    height: 100%;
    width: 100%;
    /*background-image: url(../../Image/loading.gif);*/
    background-attachment: scroll;
    background-position: center center;
    background-repeat: no-repeat;
}

.LOADING_HIDDEN {
    display: none;
    visibility: hidden;
}

.VISIBLE_HIDDEN {
    display: none;
    visibility: hidden;
}

/***************************** ↓GRID関連 **************************/
.GRID {
    background-color: darkgray;
    /*border: 1px solid black;*/
    /*border-collapse: separate !important;*/
}

.GRID_HEAD > th, .COL_HEAD {
    background-color: #2AAC4C;
    font-weight: normal;
    color: white;
    border: 1px solid gray;
    font-weight: bold;
    top: -1px;
    height: 20px;
}

.GRID_ROW1 > td,
.GRID_ROW2 > td,
.GRID_ROW_DEL > td {
    border: 1px solid gray;
}

.GRID_ROW1 {
    background-color: white;
}

.GRID_ROW2 {
    background-color: ghostwhite;
}

.GRID_ROW_DEL {
    background-color: silver !important;
}

.GRID_CELL {
    background-color: #F5FFEB;
    border-style: none !important;
    text-align: left;
}

.GRID_PAGER {
    background-color: #d3d3e0;
}

.GRID_SELECT {
    background-color: Yellow;
}

div.GRID_BACK {
    /*border-right: darkgray 1px solid;
    border-top: darkgray 1px solid;
    border-left: darkgray 1px solid;
    border-bottom: darkgray 1px solid;*/
    overflow: auto;
    /*background-color: gainsboro;*/
}

div.GRID_BACK_Y {
    overflow-x: auto;
    overflow-y: scroll;
}

.GRID_TEXT {
    background-color: #e6e6ff;
    border: 1px solid black;
    vertical-align: middle;
    padding: 3px 3px 3px 3px;
}

.GRID_LINQ_ROW {
    background-color: transparent;
    vertical-align: middle;
    font-weight: bold;
    color: blue;
    line-height: 1em;
    border-radius: 2px;
    display: inline-block;
    cursor: pointer;
    padding: 2px 2px 1px 2px;
    width: fit-content;
}

.GRID_ICON {
    background-repeat: no-repeat;
    border: 0px;
    background-size: contain;
    background-position: center;
}

/***************************** ↑GRID関連 **************************/
