@charset "utf-8";
/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 2017/6/1, 16:37:30
    Author     : syyoda
*/

#has_support {
    display: inline-block;
    width:1px;
    height:1px;
}

:root {
    --base-color: #F9FBFB;
    --main-color: #1C58A7;
    --back-color: #FDFDFD;
    
    --border-color: #DDDDDD;
    
    --important-color: #FF0000;
    --str-color: #666666;
    --str2-color: #505050;
    
    --btn1-color: #2CA6D4;
    --btn2-color: #23b375;
    --btn3-color: #b3233d;
    
    --group-color1:#FAFAFA;
    --group-color2:#F4F4F4;
    
    --bg-color-w1:#F9FBFB;
    --bg-color-g1:#EEEEEE;
    --bg-color-g2:#555555; /** キャンセル系 */
    --bg-color-g3:#CCCCCC; 
    --bg-color-b1:#0D59B6;

    --fg-color-g1:#555555; /** 通常文字 */
    --fg-color-g2:#666666; /** ラベル等 */
    --fg-color-g3:#777777; /** タイトル等 */
    
    --bd-color-g1:#A3A2A2;
    --bd-color-g2:#C3C2C2;
    --bd-color-r1:#FF0000;    
}

/* 共通 */
* {
    padding:0;
    margin: 0;
    border: 0;
    font-family: "メイリオ", "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", Verdana, Arial, Meiryo, "Hiragino Kaku Gothic Pro", Osaka, "MS P Gothic", sans-serif;
    font-weight:normal;
    font-size: 12px;
}

@media screen and (max-width: 380px) {
    * {
        font-size: 11px;
    }
}

/* 全体ボディ部 */
body {
    background: var(--bg-color-w1);
}

input {
    accent-color: var(--fg-color-g3);
}

input::-ms-clear {
    visibility:visible;
}

.non-selectable {
    -ms-user-select: auto;
    -moz-user-select: auto;
    -khtml-user-select: auto;
    -webkit-user-select: auto;
    user-select: auto;
}

.hidden {
    display: none;
}

span.error-msg {
    display: none;
}

div.error {
    font-size: 1.2rem;
    color:#FF0000;
} 

/* エラーバルーン */
div.errorballoon {
    opacity:1 !important;
    padding:6px 15px 6px 15px !important;
    font-size:1.1rem !important;
    background-color: #FFF6F3 !important;
    border-color: #ff4400 !important;
    color: #ff4400 !important;
}


@media screen and (max-width: 940px) {
    .hidden.pdBlock {
        display: inline;
    }
    div.errorballoon {
        font-size:1.3rem !important;
    }
}

@media screen and (max-width: 640px) {
    .hidden.spBlock {
        display: inline;
    }
    div.errorballoon {
        font-size:1.3rem !important;
    }
}

.required {
    position: relative;
}
.required:after {
    position: absolute;
    content: "＊";
    color: #FF3399;
    font-size: inherit;
    top:50%;
    bottom: auto;
    right: -10px;
    transform: translateY(-50%);
}

.important_item {
    font-weight:bold !important;
}


/** START ------------------------------- ヘッダ  */

#header-area {
    position: fixed;
    top: 0px;
    left: 0px;
    right:0px;
    height:40px;
    z-index: 100; 
}

#headders { 
    height: 100%;             
    width:100%; 
    max-width: 1000px;
    background: var(--bg-color-w1);
    box-shadow:0px 2px 8px var(--bd-color-g1);
    margin-left: auto;
    margin-right: auto;
}

#head-title {
    position:relative;
    width:calc(100% - 10px);
    height:100%;
    margin-left: auto;
    margin-right: auto;
}

#head-logo {
    position:absolute;
    left:4px;
    top:6px;
}

#head-title-tel {
    position:absolute;
    top:2px;
    right:38px;
    font-size:0.9rem;
}

#head-title-user-nm {
    position:absolute;
    bottom:3px;
    right:38px;    
}

#head-title-logout-btn {
    position:absolute;
    bottom:7px;
    right:2px;
}

#head-title-logout-btn .btn_logout {
    border:none;
    text-decoration:none;
    text-align:center;
    background-color:var(--bg-color-b1);
    border-radius:2px;
    padding: 6px;
    width:28px;
    height:28px;
}

/** STOP  ------------------------------- ヘッダ  */

/** START ------------------------------- タイトル  */

.title-area {
    width: 100%;
    max-width: 1000px;   
    position: fixed;    
    z-index: 95; 
    top: 40px;
    left: 50%;
    padding: 0px;
    transform: translateX(-50%);     
}

#title-bar {
    background-color: var(--bg-color-w1);
    padding: 0px;
    height: 45px;
}

#function-bar {
    background-color: var(--bg-color-b1);    
    padding: 0px;
    min-height: 20px;
}

#breadcrumbs-area {
    position: absolute;    
    width: calc(100% - 10px);
    height: 35px;
    top: 9px;
    left:10px;
    padding: 0px;
}

#breadcrumbs {
    position: absolute;
    width:100%;
    top:50%;
    left:0px;
    transform: translateY(-50%); 
    height:2rem;
}

#breadcrumbs-button {
    position: absolute;
    width:50%;
    top:50%;
    right:5px;
    height:34px;
    transform: translateY(-50%); 
    text-align: right;
}

#breadcrumbs-button > button {
    width:50px;
    height:30px;
    background-color:var(--bg-color-g1);
    cursor:pointer;
    color:#222222;
    border:solid 1px #666666;
    border-radius:4px;
    margin-left: 5px;
    font-weight: bold;
    font-size: 1.2rem;
}

.rcrumbs {
    height: 30px;
}

.rcrumbs ul, .rcrumbs ul li {
    height: 100%;
}

.rcrumbs a {
}

.rcrumbs a:hover {
    color:var(--fg-color-g3);
}

.rcrumbs > ul > li a, .rcrumbs > ul > li > span.divider {
    height: 30px;
    font-weight: bold;
    font-size: 1.5rem;
    color:var(--fg-color-g3);
    position: relative;
    top:4px;    
}


.child_name {
    color:var(--fg-color-g2);
    font-size: 1.4rem;
    font-weight: bold;
    width: calc(100% - 40px);
    margin-left: auto;
    margin-right: auto;
    margin-top: 15px;
    margin-bottom: 10px;
    text-align: center;
}

.home_guid {
    color:var(--fg-color-g2);
    font-size: 1.2rem;
    width: calc(100% - 40px);
    margin-left: auto;
    margin-right: auto;
    margin-top: 5px;
    margin-bottom: 5px;
    text-align: center;
}

.stop_guid {
    color:#FF0000;
    font-size: 1.2rem;
    width: calc(100% - 40px);
    margin-left: auto;
    margin-right: auto;
    margin-top: 5px;
    margin-bottom: 5px;
    text-align: center;
}

.maintenance_guid {
    color:#FF0033;
    font-size: 1.2rem;
    width: calc(100% - 40px);
    margin-left: auto;
    margin-right: auto;
    margin-top: 5px;
    margin-bottom: 5px;
    text-align: center;
}

/** STOP  ------------------------------- タイトル  */

/** START  ------------------------------- 機能矢羽  */
:root {
    --bg-color:#dae0e5;
    --fg-color: #444;
    --bg-done-color: #dae0e5;
    --fg-done-color: #444;
    --bg-active-color: var(--bg-color-b1);
    --fg-active-color: #fff;

    --padding-left: 1.2rem;
    --padding-right: 0.8rem;
    --padding-y: 0.3rem;
    --margin-left: 1rem;
    --margin-right: 0.2rem;
    --arrow-width: 1rem;
    --arrow-height: 1.5rem;
}

#function-bar:has(.stepper) {
    background-color: #cccccc;
}

#function-bar .stepper {
    display: flex;
    word-break: keep-all;
    overflow: hidden;
    width: 100%;
}

#function-bar .stepper .step {

    margin: 0;
    margin-left: var(--margin-left);
    margin-right: var(--margin-right);
}

#function-bar .stepper .step:first-child {
    margin-left: 0 !important;
}

#function-bar .stepper .step:first-child .clickable:before {
    content: none !important;
}

#function-bar .stepper .step .clickable {
    text-decoration: none;
    border: none;
    outline: none;
    display: block;
    text-align: center;
    position: relative;
    padding: var(--padding-y);
    padding-left: var(--padding-left);
    padding-right: var(--padding-right);
    color: var(--fg-color);
    background-color: var(--bg-color);
}

#function-bar .stepper .step .clickable:before {
    content: '';
    position: absolute;
    top: 50%;
    margin-top: calc(-1 * var(--arrow-height));
    border-width: var(--arrow-height) 0 var(--arrow-height) var(--arrow-width);
    border-style: solid;
    border-color: var(--bg-color) transparent;
    left: calc(-1 * var(--arrow-width));
}

#function-bar .stepper .step .clickable:after {
    content: '';
    position: absolute;
    top: 50%;
    margin-top: calc(-1 * var(--arrow-height));
    border-top: var(--arrow-height) solid transparent;
    border-bottom: var(--arrow-height) solid transparent;
    border-left: var(--arrow-width) solid var(--bg-color);
    right: calc(-1 * var(--arrow-width));
}

#function-bar .stepper .step.done {

}

#function-bar .stepper .step.done .clickable {
    color: var(--fg-done-color);
    background-color: var(--bg-done-color);
}

#function-bar .stepper .step.done .clickable:before {
    content: '';
    position: absolute;
    top: 50%;
    margin-top: calc(-1 * var(--arrow-height));
    border-width: var(--arrow-height) 0 var(--arrow-height) var(--arrow-width);
    border-style: solid;
    border-color: var(--bg-done-color) transparent;
    left: calc(-1 * var(--arrow-width));
}

#function-bar .stepper .step.done .clickable:after {
    content: '';
    position: absolute;
    top: 50%;
    margin-top: calc(-1 * var(--arrow-height));
    border-top: var(--arrow-height) solid transparent;
    border-bottom: var(--arrow-height) solid transparent;
    border-left: var(--arrow-width) solid var(--bg-done-color);
    right: calc(-1 * var(--arrow-width));
}

#function-bar .stepper .step.active {

}

#function-bar .stepper .step.active .clickable {
    color: var(--fg-active-color);
    background-color: var(--bg-active-color);
}

#function-bar .stepper .step.active .clickable:before {
    content: '';
    position: absolute;
    top: 50%;
    margin-top: calc(-1 * var(--arrow-height));
    border-width: var(--arrow-height) 0 var(--arrow-height) var(--arrow-width);
    border-style: solid;
    border-color: var(--bg-active-color) transparent;
    left: calc(-1 * var(--arrow-width));
}

#function-bar .stepper .step.active .clickable:after {
    content: '';
    position: absolute;
    top: 50%;
    margin-top: calc(-1 * var(--arrow-height));
    border-top: var(--arrow-height) solid transparent;
    border-bottom: var(--arrow-height) solid transparent;
    border-left: var(--arrow-width) solid var(--bg-active-color);
    right: calc(-1 * var(--arrow-width));
}

/** STOP  ------------------------------- 機能矢羽  */

/** START ------------------------------- ボディ  */

#contents-area{
    position: relative;
    margin-top: 50px;
    background-color: var(--bg-color-w1);
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;

}

#contents-area.message {
    height: calc(100vh - 100px);
}

#contents-head {
    height: 55px;
}

#contents-body {
    margin-left: auto;
    margin-right: auto;    
    width:100%;
    font-size: 1.5rem;
}

#contents-foot {
    position: fixed;
    bottom:0px;
    left:0px;
    right:0px;
    height:60px;
    text-align: center;
    background-color: rgba(249, 251, 251, 0.6);
    border:none;
    z-index: 5;
}

.guid  {
    max-width:1000px;
    width:100%;
    margin-left:auto;
    margin-right:auto;
    padding-top:5px;
    margin-bottom:5px;
    font-size:1.4rem;
    font-weight: bold;
    color:var(--bg-color-b1);
}

.guid-confirm  {
    color:#EE0000 !important;
}

#contents-iframe-area {
    width: 100%;
    height:100%;
    padding: 0;
    margin: 0;    
}

#contents-iframe-body {
    width: 100%;
    height: calc(100vh - 8px);
    padding: 0;
    margin: 0;
    overflow: hidden;
}

div.dd-area-attached-body {
    position: relative;
    top:0;
    left:0;
    padding:0;
    margin: 0;
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    border:solid 1px transparent;
    overflow: auto;
}

.dd-area-attached-body-msg {
    position:absolute;
    width: 100%;
    font-size: 1.2em;
    color: var(--bg-color-g3);
    text-align: center;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
}

/** STOP  ------------------------------- ボディ  */

/** START ------------------------------- メッセージ */
#contents-msg {
    width: calc(100% - 36px);
    margin-top: 2px;
    margin-bottom: 0px;
    margin-left:auto;
    margin-right:auto;
    padding: 0px 0px 0px 0px;
    color:#2C7CFF;
    font-weight:bold;
    font-size: 1.3rem;
    line-height: 1.3rem;
    min-height:  1.3rem;
}

div.contents-msg-float-error {
    text-align: center;
    padding:10px;
    border:solid 1px;
    position:absolute;
    font-size:1.5rem;
    color:#FF0033;
    background-color:#FCFCFC;
    max-width: 600px;
    width:calc(100% - 50px);
    border-radius:4px;    
}

div.contents-msg-disp-error {
    color:#FF0033;
    font-size:1.3rem;
    padding-top: 2px;
}


div.contents-msg-float-success {
    text-align: center;
    padding:10px;
    border:solid 1px;
    position:absolute;
    font-size:1.5rem;
    color:var(--bg-color-b1);
    background-color:#FCFCFC;
    max-width: 600px;
    width:calc(100% - 50px);
    border-radius:4px;    
}

div.contents-msg-disp-success {
    color:var(--bg-color-b1);
    font-size:1.3rem;
}

/* 読込み中エリア */
div.loddingarea table {
    width:100%;
}

div.loddingarea table tr td {
    color: #2C7CFF !important;
    font-size: 1.0rem !important;
}

div.loddingarea table tr td.img {
    width:50px !important;
    vertical-align: middle;
}

div.loddingarea table tr td.img img.loadingicon {
    margin: 0px 10px;

}

div.loddingarea table tr td.procmsg div{
    font-size: 1.5rem !important;
}
div.loddingarea table tr td.guid {
    padding-left: 10px;
    padding-top: 5px;
    color:#FF0000 !important;
    font-weight: bold;
    line-height:1.5rem;
}

/* 読込み完了エリア */
div.completegarea table.msglist {
    width:300px;
    display: none;
}

div.completegarea table.msglist thead, div.completegarea table.msglist tbody {
    display: block;
}
div.completegarea table.msglist tbody {
    overflow-x: hidden;
    overflow-y: scroll;
    height: 150px;
}

div.completegarea table.msglist tr:nth-child(odd) {
    background-color:#EFEFEF;
}

div.completegarea table.msglist tr:nth-child(even) {
    background-color:#cceeff;
}

div.completegarea table.msglist tr th {
    background-color:#3377BB;
    color:#FFF;
    font-weight:normal;
    border-radius:3px 3px 0px 0px;
    -moz-border-radius:3px 3px 0px 0px;
    -webkit-border-radius:3px 3px 0px 0px;
    line-height: 1.8rem;
}

div.completegarea table.msglist tr td {
    width:845px;
    line-height: 1.8rem;
}

div.completegarea table.msglist tr td div {
    font-size: 1rem;
    margin-left: 5px;
}

div.completegarea div.completemsg {
    font-size: 1.3rem;
    padding-left:2px;
    padding-top: 5px;
    color:#2C7CFF;
    font-weight: bold;
}

div.completegarea div.msgarea {
    min-height:40px;
}

div.completegarea div.btnarea {
    width:100%;
    text-align: right;
    padding-top: 5px;
    padding-right: 5px;
}

.confirmDialog{
    max-width: calc(100% - 30px);
    border-radius: 10px;
}

.confirmDialog .ui-dialog-titlebar {
    display:none;
}

.confirmDialog .ui-dialog-content {
    font-size: 1.4rem;
    margin-top: 10px;
    text-align: center;
}

.confirmDialog .ui-dialog-buttonset {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    width: fit-content;
    float: none !important;
}

.confirmDialog .ui-dialog-buttonset button {
    text-decoration:none;
    text-align:center;
    background: var(--bg-color-g1);
    cursor: pointer;
    color: #fff;
    border: solid 1px #999999;
    border-radius: 20px;
    font-weight: bold;
    margin-right: 5px;
    margin-left: 5px;
    font-size:1.4rem !important;
    width: fit-content;
    min-width: 110px;
    height: 45px;   
    padding: 0px !important;
}

/** STOP  ------------------------------- メッセージ */

/** START ------------------------------- フッタ  */

#fotter-area {
    position: fixed;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height:45px;
    z-index: 500;
    background-color:rgba(255,255,255,0.9);
}

#fotter-frame {
    position:relative;
    max-width:1150px;
    width:100%;
    height:45px;
    margin-left:auto;
    margin-right:auto;
}

.link-externl {
    position: relative;
    padding-top: 10px;
    padding-left: 10px;
    width:100%;
    max-width: 1000px;
    margin-right: auto;
    margin-left: auto;
}

.link-externl.login {
    position: absolute;
    bottom: 10px;
    padding-left: 5px;
}

.link-externl a {
    display: block;
    text-decoration:none;
    font-size: 1.2rem;
    font-weight: bold;
    color:#0D59B6;
    cursor: pointer;    
    text-align: left;
    width: fit-content;
}

/** STOP  ------------------------------- フッタ  */


/** START ------------------------------- ステータス色  */

.status_bn {
    display: inline-block;
    font-size:inherit;
    padding: 10px 0px;
    border-radius: 10px;
    min-width: 250px;
    text-align: center;
}

.status_tag {
    display: table-cell;
    width:70px;
    height: 30px;
    font-weight: bold;
    vertical-align: middle;
    text-align: center;
    border-radius: 2px;    
}

.status_tag.list_tag {
    display:inline-block;
    height:auto;
    border-radius:2px;
    margin-left:auto;    
    margin-right:5px;  
    padding-top: 0px;
    font-size: 0.88rem;
}

.status_tag.center {
    margin-left: auto;
    margin-right: auto;
}

/** 加配 */
.status_addition {
    display: inline-block;
    width:40px;
    height: auto;
    font-weight: bold;
    vertical-align: middle;
    text-align: center;
    background-color: #cc0000;
    color: #FFFFFF;
}

/** 利用予約：無連絡予約取消 */
.status_nocontact {
    display: table-cell;
    width:40px;
    height: 30px;
    font-weight: bold;
    vertical-align: middle;
    text-align: center;
    background-color: #cc0000;
    color: #FFFFFF;
    font-size: 0.9rem;
}



.status_sep {
    display: table-cell;
    width:5px;
    height: 30px;
    background-color: transparent;
}

/** 面談：リクエスト中 */
.status_interview_req {
    background-color: #25A51C !important;
    color: #FFFFFF !important;
    font-size: 0.8rem;
}

.status_interview_req.status_bn {
    font-size: 3rem;
}

/** 面談：予約完了 */
.status_interview_rsv {
    background-color: var(--bg-color-b1) !important;
    color: #FFFFFF !important;
}

/** 面談：予約不可 */
.status_interview_np {
    background-color: #B90303 !important;
    color: #FFFFFF !important;
}

/** 面談：面談完了 */
.status_interview_cmp {
    background-color: #0D99B6 !important;
    color: #FFFFFF !important;
}

/** 面談：予約取消 */
.status_interview_can {
    background-color: var(--bg-color-g2) !important;
    color: #FFFFFF !important;
}

/** 利用予約：リクエスト中 */
.status_reservation_req {
    background-color: #25A51C !important;
    color: #FFFFFF !important;
    font-size: 0.8rem;
}

.status_reservation_req.status_bn {
    font-size: 3rem;
}

/** 利用予約：リクエスト中-キャンセル待ち */
.status_reservation_req.cancel_waiting {
    background-color: #CC0000 !important;
}

/** 利用予約：予約完了 */
.status_reservation_rsv {
    background-color: var(--bg-color-b1) !important;
    color: #FFFFFF !important;
}

.over_time .status_reservation_rsv  {
    background-color: #CC0000 !important;
}

/** 利用予約：予約不可 */
.status_reservation_np {
    background-color: #B90303 !important;
    color: #FFFFFF !important;
}

/** 利用予約：利用完了 */
.status_reservation_cmp {
    background-color: #0D99B6 !important;
    color: #FFFFFF !important;
}

/** 利用予約：予約取消 */
.status_reservation_can {
    background-color: var(--bg-color-g2) !important;
    color: #FFFFFF !important;
}

.allocation_tag {
    display: table-cell;
    width:70px;
    height: 30px;
    font-weight: bold;
    vertical-align: middle;
    text-align: center;
    border-radius: 2px;    
    color: #FFFFFF;
    background-color: var(--bg-color-b1) !important;
    font-size: 0.95em;
}

table.list-item.comp div.allocation_tag {
    display: none;
}

/** キャンセル待ちタグ　*/
.cancel_waiting_tag::before {
    content: "待";
    color:#FF0033;
    font-weight: bold;
    font-size: 0.9rem;
}
/** STOP  ------------------------------- ステータス色  */

/** START ------------------------------- コントロール  */

input[type=text],input[type=password],input[type=time],textarea{
    border:1px solid  #999;
    padding: 2px 2px;
    background-color: #FFF;
    border-radius:8px;
    font-size: 1.4rem;
}
input[type=text]::placeholder,input[type=password]::placeholder,input[type=time]::placeholder,textarea::placeholder{
  color: #CCCCCC;
  padding-left: 5px;
}

label[for] {
    position: relative;
    font-size: 1.4rem;
    user-select: none;
    display: inline-block;
    position: relative;
    padding-left:calc(1.4rem + 8px);
    padding-right: 10px;
    text-align: left;    
}

label[for].readonly-base {
    pointer-events: none;
}

label[for]:has(input[type=checkbox][readonly]), label[for]:has(input[type=radio][readonly]) {
    pointer-events: none;
}

label[for]:has(input[type=checkbox][readonly]:not(:checked)), label[for]:has(input[type=radio][readonly]:not(:checked)) {
    position: relative;
}


label[for].readonly-noncheck::before {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    content: "";
    width: 1.5rem;
    height: 1.5rem;
    pointer-events: none;
    border: solid 1px #888888;
    border-radius: 2px;
    box-sizing: border-box;
    background-color: #FFFFFF;
    z-index: 1;
}

label[for].readonly-noncheck input[type=checkbox],label[for].readonly-noncheck input[type=radio] {
    display: none;    
}


label[for]:has(input[type=checkbox][readonly]:not(:checked))::before, label[for]:has(input[type=radio][readonly]:not(:checked))::before {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    content: "";
    width: 1.5rem;
    height: 1.5rem;
    pointer-events: none;
    border: solid 1px #888888;
    border-radius: 2px;
    box-sizing: border-box;
    background-color: #FFFFFF;
    z-index: 1;
}

label[for]:has(input[type=checkbox][readonly]:not(:checked)) input[type=checkbox],label[for]:has(input[type=radio][readonly]:not(:checked)) input[type=radio]  {
    display: none;
}

label[for]:has(input[type=checkbox][readonly]:checked), label[for]:has(input[type=radio][readonly]:checked) {
    position: relative;
}


label[for].readonly-checked::before {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    content: "";
    width: 1.5rem;
    height: 1.5rem;
    pointer-events: none;
    border: solid 1px #666666;
    background-color: #666666;
    border-radius: 2px;
    box-sizing: border-box;
    z-index: 1;
}

label[for].readonly-checked input[type=checkbox],label[for].readonly-checked input[type=radio] {
    display: none;    
}


label[for]:has(input[type=checkbox][readonly]:checked)::before, label[for]:has(input[type=radio][readonly]:checked)::before {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    content: "";
    width: 1.5rem;
    height: 1.5rem;
    pointer-events: none;
    border: solid 1px #666666;
    background-color: #666666;
    border-radius: 2px;
    box-sizing: border-box;
    z-index: 1;
}

label[for]:has(input[type=checkbox][readonly]:checked) input[type=checkbox],label[for]:has(input[type=radio][readonly]:checked) input[type=radio]  {
    display: none;
}    

label[for]:has(input[type=checkbox]), label[for]:has(input[type=radio]) {
    font-size: 1.4rem;
    user-select: none;
    display: inline-block;
    position: relative;
    padding-left:calc(1.4rem + 8px);
    padding-right: 10px;
    text-align: left;
}


input[type=checkbox], input[type=radio]{
    width: 1.6rem;
    height: 1.6rem;
}

label[for] input[type=checkbox], label[for] input[type=radio]{
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    margin:auto;
}


select {
    border: solid 1px #888;
    padding: 2px 2px;
    border-radius:2px;
    font-size: 1.4rem;
    font-family: "メイリオ", "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", Verdana, Arial, Meiryo, "Hiragino Kaku Gothic Pro", Osaka, "MS P Gothic", sans-serif !important;    
}

.select-frame {
    position: relative;
    display: inline-block;

    border:1px solid  #999;
    padding: 2px 8px;
    background-color: #FFF;
    border-radius:6px;
    font-size: inherit;
    
    width:fit-content;
    height:fit-content;
}

.select-frame select {
    width: 100%;
    height: 100%;

    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    background-color: #FFF;
    border: none;
    padding: 0 15px;
    font-size: inherit;
    color: inherit;

    cursor: pointer;
}

.select-frame select.no-pd {
    padding: 0 18px 0 2px;
}
.select-frame select::-ms-expand {
    display: none;
}

.select-frame select option {
    font-size: inherit;        
}

.select-frame::before {
    position: absolute;
    top: 50%;
    right: 3px;
    transform: translateY(-50%);
    content: "▼";

    pointer-events: none;
}

.select-frame.read-only { 
    border: dashed 1px #DDDDDD !important;
    background: #FFFFFF !important;
}

.select-frame.read-only select {
    pointer-events: none;
}

.select-frame.read-only::before {
    color: #CCCCCC;
}
    
.non-drop .select-frame.read-only { 

}

.non-drop .select-frame.read-only select {
    padding: 0 5px 0 25px;
}

.non-drop .select-frame.read-only::before {
    content: "";
}
    
input[type=button],button {
    cursor:pointer;
}

/* ヘルプボタン */
button.imgbtn {
    margin:0px;
    padding:0px;
    vertical-align: middle;
    border:none;
    background-color: transparent;
    cursor: pointer;
}

button:focus, input[type=text]:focus,input[type=password]:focus,input[type=time]:focus,input[type=number]:focus,textarea:focus,select:focus {
    outline: none;
}


.foot-button-frame {
    margin-top: 10px;
}


.foot-button-frame .notcancel {
    display: inline-block;
    font-size: 1.2rem;
    color: #FF0000;
    width: calc(100% - 20px);
}

.foot-button-frame button {

}


.btn_base {
    text-decoration:none;
    text-align:center;
    background: var(--bg-color-g1);
    cursor: pointer;
    color: var(--fg-color-g2);
    border: solid 1px #999999;
    border-radius: 20px;
    font-weight: bold;
    margin-right: 5px;
    margin-left: 5px;
    font-size: 1.4rem;
    height: 45px;    
}

/* ボタン（極小） */
.btn_mini {
    width:45px;
    height: 26px;
}

/* ボタン（小） */
.btn_ss {
    width:45px;
}

/* ボタン（小） */
.btn_s {
    width:110px;
}

/* ボタン（中） */
.btn_m {
    width:160px;
}

/* ボタン（中） */
.btn_l {
    width:200px;
}

/* ボタン（大） */
.btn_mst {
    width:300px;
}

.btn_dialogok {
    background: #2CA6D4 !important;
    color: #FCFCFC;
}

.btn_dialogcancel {
    background: var(--bg-color-g1) !important;
    color: #222222 !important;
}

.btn_login {
    background: var(--bg-color-b1) !important;
    color: #FCFCFC;
}

.btn_ss:disabled,.btn_ss2:disabled,.btn_s:disabled,.btn_m:disabled,.btn_mst:disabled {
    background-color:#999999;
}

.btn_detail {
    background: #2CA6D4  !important;
    color: #FCFCFC;    
    font-weight: normal;
    border: none;
    font-size: 0.9rem;
    padding: 4px 4px 3px 4px;
    margin: auto auto auto auto;
    border-radius: 2px 2px 2px 2px;
    
}

.btn_delete {
    background: #DB4D4D  !important;
    color: #FCFCFC;    
}

.btn_register {
    background: var(--bg-color-b1) !important;
    color: #FCFCFC;    
}

.btn_notpossible {
    background: #B90303 !important;
    color: #FCFCFC;    
}
.btn_complete {
    background: #0D99B6 !important;
    color: #FCFCFC;    
}

.btn_completeadditional {
    background: #cc0000 !important;
    color: #FCFCFC;    
}

.btn_cancel {
    background: var(--bg-color-g2) !important;
    color: #FCFCFC;    
}

.btn_cancelnocontact {
    background: #CC0000 !important;
    color: #FCFCFC;  
    font-size: 1.3rem;
}

.btn_dayba {
    color: var(--fg-color-g3);
    width:70px;
    height: 35px;
    border-radius: 8px;
    margin: 0px 10px;
}

.btn_close {
    color: var(--fg-color-g3);
    font-size: 2.2rem !important;
    background: transparent;
}

.label {
    font-size:1.3rem;
    font-weight:bold;
    color: #114c9f;
}

.labelw {
    font-size:1.3rem;
    font-weight:bold;
    color: #FCFCFC;
}

.labelb {
    font-size:1.3rem;
    font-weight:bold;
    color: var(--fg-color-g1);
}

.labelr {
    font-size:1.3rem;
    font-weight:bold;
    color: #FF0000;
}

div.disp.checkbox {
    font-size:2.5rem;
    cursor: pointer;
}

.labelmark {
    font-size:2.5rem;
}

/* テキストボックスIME制御：IMEON */
input[type=text].imeactive, textarea.imeactive {
    ime-mode: active;
}

/* テキストボックスIME制御：IMEOFF */
input[type=text].imeinactive, textarea.imeinactive {
    ime-mode: inactive;
}

/* テキストボックスIME制御：IME無効 */
input[type=text].imedisabled, textarea.imedisabled {
    ime-mode: disabled;
}

/* テキストボックスエラー装飾 */
input[type=text].form-error:enabled,input[type=number].form-error:enabled {
    border-color: #FF0000 !important;
    border-style: solid !important;
}
/* テキストボックスエラー装飾 */
input[type=text].form-error:enabled:read-only,input[type=number].form-error:enabled:read-only {
   border-width: 1px !important;
}

/* パスワードエラー装飾 */
input[type=password].form-error {
    border-color: #FF0000;
    border-style: solid;
    border-width: 1px;
}


input[type=radio].form-error:enabled {
    background: #FF0000 !important;
    border-bottom-color: red;
}

input[type=time].form-error:enabled {
    border-color: #FF0000 !important;
    border-style: solid !important;
}
/* テキスト左 */
input[type=text].text_l, textarea.text_l {
    text-align:left !important;
    padding-left: 5px;
}

/* テキスト中央 */
input[type=text].text_c, textarea.text_c {
    text-align:center !important;
}

/* テキスト右 */
input[type=text].text_r, textarea.text_r {
    text-align:right !important;
    padding-right: 5px;
}

/* セレクトボックスエラー装飾 */
select.form-error {
/*    border-color: #FF0000;
    border-style: solid;
    border-width: 1px;*/
}

/* テキストエリアエラー装飾 */
textarea.form-error {
    border-color: #FF0000 !important;
    border-style: solid !important;
    border-width: 1px !important;
}

/* エラー装飾(ラジオボタン) */
span.form-error {
    border-color: #FF0000;
    border-style: solid;
    border-width: 1px;
}

/* エラー装飾(チェックボックス) */
span.form-error-frame {
    border-color: #EE0000 !important;
    border-style: solid !important;
    border-width: 1px;
    border-radius: 3px;
    padding: 5px 3px 0px 3px;
    display: inline-block;    
}

/* エラー装飾(セレクトボックス) */
div.form-error {
    border-color: #FF0000;
    border-style: solid;
    border-width: 1px;
}

.datepicker {
    -ms-user-select: none; /* IE 10+ */
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    user-select: none;   
    width:7rem;
    text-align:center;
}

.datepicker_ro {
    width:7rem;
    text-align:center;
}
.timepicker {
    -ms-user-select: none; /* IE 10+ */
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    user-select: none;   
    width:4rem;
    text-align:center;
}
.timepicker_ro {
    width:4rem;
    text-align:center;
}

span.checkbox {

}

span.checkbox span.form-error-frame {
   display: inline-block; 
   padding: 0;
}

span.checkbox span.checkboxitem {
    display: inline-block;
}

span.checkbox span.checkboxitem span.tickets {
    display: inline-block;
    
}


input[type=checkbox].listedcheck {
    width: 1.6rem !important;
    height: 1.6rem !important;
}

span.radiogroup {
    padding: 4px 6px 3px 0px;
}

span.radiogroup.radiogroup_hide label {
    margin-left: 0px;
}

span.radiogroup.radiogroup_hide input[type=radio] {
    display: none;
    left:50px;
}

.formDialog.ui-dialog {
   border-radius: 2px 2px 2px 2px  !important;
}

.formDialog .ui-dialog-titlebar {
    background: #0861A7;
    border:solid 1px #0861A7;
    border-radius: 2px 2px 2px 2px;
    
}

.formDialog.notitle .ui-dialog-titlebar {
   display: none;
    
}

.formDialog .ui-dialog-title {
    font-size: 1.3rem;
}

.formDialog .ui-dialog-titlebar-close {
    margin: -10px 5px 0 0;
}

.formDialog .ui-dialog-content {
}

.formDialog .ui-dialog-buttonset button {
    border:none;
    width:100px;
    height: 30px;
    text-decoration:none;
    text-align:center;
    padding:4px 0 4px;
    color:#fff;
    background-color:#49A9D4;
    border-radius:2px;
    box-shadow:2px 2px 2px var(--bd-color-g1);    
}

.formDialog.alocations {
    max-width: 600px;
}

.formDialog .btn_close {
    position: absolute;
    top:5px;
    right:10px;
}

.formDialog .dialog-title-frame {
    text-align: center;
    font-size:1.5rem;
    font-weight: bold;
    margin-top: 20px;
}

.formDialog .dialog-btn-frame {
    text-align: center;
    height: 50px;
    font-size:1.4rem;
}


.no-spin::-webkit-inner-spin-button,
.no-spin::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
    -moz-appearance:textfield;
}

span.ib {
    display: inline-block;
}

.search-box {
    margin: 0;
    padding: 0;
    display: inline;
    position: relative;
}

.search-box input[type="text"] {
}

.search-box img.input___clear {
    position: absolute;
    top: 50%;
    right: 8px;
    cursor: pointer;
    padding:0;
    border: none;
    background: none;
    color: #333;
    font-size: 1rem;
    transform: translate(0, -50%);	
    z-index: 10;
    width:10px;
    height:10px;    
}

.search-box img.input___clear_r {
    right: auto;
    left: 5px;
}

.search-box img.input___clear_d {
    right: 26px;
}

.search-box img.input___clear_a {
    top: auto;
    bottom: 10px;
    transform: none;    
}

.search-box img.input___clear_t {
    right: 24px;   
}

.search-box img.input___clear_p {
}

.search-box img.input___clear_s {
    width: 10px;
    height: 10px;
}

/** STOP  ------------------------------- コントロール  */
/** START ------------------------------ フォーム項目関連  */

.ctl_contents {

}

.ctl_contents[type=text],input.ctl_contents[type=time] {

}

.ctl_contents:not(select):not(.dateconvert):not(.timeconvert):read-only{
    border: dashed 1px #DDDDDD;
    background: #FFFFFF;
}

.dateconvert_none:read-only{
    border: dashed 1px #DDDDDD;
    background: #FFFFFF;
}

.ctl_label_contents {
    font:inherit;
    color: inherit;
    background: inherit;
}

.ctl_contents_comments {
    
}

.ctl_contents_usage_fee {
    width:99px;
}

.ctl_contents_tickets {
    direction: rtl;
    font-size: inherit;
    width:90px !important;
}

.ctl_contents_tickets option {
    font-size: inherit;
}

.ctl_contents_day {
    width:2.1rem;
}

.ctl_contents_date {
    width:12.0rem;
    margin:4px
}
.ctl_contents_allocation {
    direction: rtl;    
    width:80px;
}

.ctl_contents_service_note {
    width:80px;
}

.dd-area-attached-tab-del-imp {
    color: red;
    font-weight: bold;
    font-size: 1.4rem;
}

/** END   ------------------------------ フォーム項目関連  */
/** START ------------------------------ 検索項目関連  */

.ctl_conditions {
    
}

input.ctl_conditions[type=text],input.ctl_conditions[type=time] {
}

button.check {
    cursor: pointer;
    background-color: transparent;
    border: none;
    width:22px;
    height:22px;
    margin: 0px;
    padding: 0px 0px 0px 2px;
    vertical-align: middle;
}

input[type="file"] {
    display: none;
}

input[disabled]{
    background: #eee;
}

button[disabled]{
    background: #CCCCCC!important;
    cursor: not-allowed;
    color: var(--fg-color-g2);
}

label.file {
    margin-left: 15px;
    padding: 5px 20px;
    color:#fff;
    background-color:var(--bg-color-b1);
    cursor: pointer;
    border-radius:2px;
    box-shadow:2px 2px 2px var(--bd-color-g1);    
    border:none;     

}

label.title {
    color:var(--fg-color-g2);    
}

p.file {
    margin: 10px 0 0 20px;    
}

input[type=text].textbox_m{
    width: 6rem;
}

input[type=text].textbox_l{
    width: 18rem;
}

input[type=text].textbox_s{
    width: 3rem;
}

input[type=text].textbox_xl{
    width: 25rem;
}

input[type=text].textbox_create_m{
    width: 13rem;
}

input[type=text].textbox_create_xl{
    width: 45rem;
}

input[type=text].textbox_r{
    text-align: right;
}

input[type=text].textbox_c{
    text-align: center;
}

/** 編集不可テキスト */
.uneditable {
    border:none!important;
    outline: none!important;   
    background-color: transparent!important;
}

/** STOP ------------------------------ 検索項目関連  */

/** START ------------------------------- 日付コントロール  */

.date-year-area-frame-label {
    vertical-align: 12px;
    font-size: 1.15rem !important;  
    font-weight: bold;
    color: var(--fg-color-g2);    
    margin-right: 8px;
}

.date-type-area {

}

.date-year-area {
    display: inline-block;
    margin-top: 5px;
    margin-right: 5px;
    width:115px;
    white-space: nowrap;
    height: 30px;
    text-align: right;
}

.date-jcyear-area {
    position: relative;
    display: inline-block;
    margin-top: 5px;
    margin-right: 5px;
    width:115px;
    white-space: nowrap;
    height: 30px;
    text-align: right;
}

.date-month-area {
    display: inline-block;
    margin-right: 5px;
    white-space: nowrap;
    height: 30px;
}

.date-day-area {
    display: inline-block;
    white-space: nowrap;
    height: 30px;
}

.date-year-area-ac {
    display: inline-block;
    margin-top: 5px;
    width:165px;
    white-space: nowrap;
    height: 36px;
    text-align: left;
}


.date-year-area-ac.date-year-area-ac-withtime {
    width:100%;
}

.date-year-area-withtime-frame {
    display: inline-block;    
    position: relative;
    width:280px;
    padding: 0px;
}

.date-year-area-withtime-frame .dateconvert {
    position: absolute;
    left:0px;
    top:50%;
    transform: translateY(-50%);
}

.date-year-area-withtime-frame .ui-datepicker-trigger {
    position: absolute;
    left: 128px;
    top:50%;
    transform: translateY(-50%);
}

.date-year-area-withtime-frame .timeconvert {
    position: absolute;
    right:28px;
    top:50%;
    transform: translateY(-50%);
}

.date-year-area-withtime-frame .timeconvert_icon {
    position: absolute;
    right:0px;
    top:50%;
    transform: translateY(-50%);
    cursor: pointer;
}


.date-year-area-ac.date-year-area-ac-timeonly {
    width:100%;
}

.date-year-area-timeonly-frame {
    display: inline-block;        
    position: relative;
    width:110px;
    padding: 0px;
}

.date-year-area-timeonly-frame .timeconvert {
    position: absolute;
    left:0px;
    top:50%;
    transform: translateY(-50%);
}

.date-year-area-timeonly-frame .timeconvert_icon {
    position: absolute;
    left:80px;
    top:50%;
    transform: translateY(-50%);
    cursor: pointer;
}

.date-year-area-f {

}

.date-year-area-t {

}

.date-year-area-sign {
    display: inline-block;
    width:30px;
    text-align: center;
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--fg-color-g1);
}

.date-year-area-sign.date-year-area-sign-withtime {
   vertical-align: 10px;
}


.ctl_date_ymd {

}

/** 西暦年 */
.ctl_date_year {
     width: 6.3rem;
}

/** 元号 */
.ctl_date_era {
    position: absolute;
    height: 26px;
    padding:0px;
    left:2px;
}

.ctl_date_era option {
    border-radius: 0px;
}

/** 和暦年 */
.ctl_date_jcyear {
     width: 2.3rem;
     margin-left:2px;
}

/** 月 */
.ctl_date_month {
     width: 2.3rem;
}

/** 日 */
.ctl_date_day {
     width: 2.3rem;
}

/** 時刻 */
.ctl_time {
     width:5.5rem;
}

.ui-datepicker{
  width: 19rem;
  padding: .2rem .2rem 0;
  display: none;
}

.ui-datepicker th span,
.ui-datepicker th a,
.ui-datepicker td span,
.ui-datepicker td a {
  display: block;
  font-size: 1.2rem; /*任意な値を追加して調整*/
  padding: .2rem;
  text-align: right;
  text-decoration: none; 
}

.ui-datepicker-header {
    font-size:1.3rem;
    background: #0861A7;
    color: #FCFCFC;
}

.ui-datepicker-year, .ui-datepicker-month {
    background: var(--main-color);
    border: none;
    color: var(--base-color);
    text-align: center;
}

.ui-datepicker-year option, .ui-datepicker-month option {
    background: var(--base-color);
    color: var(--str2-color);
}

.ui-datepicker-header * {
    font-size:inherit;
}

.ui-datepicker-trigger {
    margin-left: 8px;
    vertical-align: -5px;
    width: 24px;
    height: 24px;
    cursor: pointer;
}

.ui-datepicker-buttonpane button {
    font-size: 1.2rem;
}

.ui-datepicker-clear {
    position: absolute;
    left:5px;
}

.ui-datepicker-current {
    display: none;
}

.custom-calendar-sunday a.ui-state-default {
    background: #ffc1c1 !important;
}

.custom-calendar-saturday a.ui-state-default {
    background: #c1e0ff !important;
}

.dateconvert {
    width:125px;
    height: 30px !important;
    color: var(--fg-color-g3);
    font-weight: bold;
}


.dateconvert::placeholder {
    padding-left: 0px !important;
    font-size:1.2rem;
}

.timeconvert {
    width:70px;
    height: 30px !important;
    color: var(--fg-color-g3);
    font-weight: bold;
    text-align: center;
}

.ui-timepicker-viewport {
    padding-right: 20px !important;
}

.timeconvert::placeholder {
    padding-left: 0px !important;
    font-size:1.2rem;
}


.ui-timepicker-container {
    padding-left: 0px;
}

.ui-timepicker-container .ui-timepicker .ui-menu-item  a {
    font-size: 1.3rem;
}


/** STOP  ------------------------------- 日付コントロール  */

/** START ------------------------------ 検索エリア関連  */

.search-frame {
    border: none;
    height: 100%;    
    width:100%;
    background-color: var(--bg-color-w1)    
}

.search-frame-title {
    width: calc(100% - 20px);
    margin-top:10px;
    margin-right: auto;
    margin-left: auto;
    font-size: 1.3rem;
}

.search-bar {
    position: relative;
    width:100%;
    height:30px;
    display:flex;   
    background-color: var(--bg-color-w1);
    margin-left: auto;
    margin-right: auto;
    padding: 0px;
}

.search-title {
    position: absolute;
    top:50%;
    left:10px;
    transform: translate(0, -50%);
    font-size: 1.5rem;
    color: var(--fg-color-g3);
    font-weight: bold;
    width: calc(100% - 20px);
    height:20px;    
}

.search-count {
    position: absolute;
    top:50%;
    right:10px;
    transform: translate(0, -50%);
    font-size: 1.3rem;
    color: var(--fg-color-g3);
    font-weight: bold;
    height: 16px;   
}

.search-condition-area {
    padding: 5px 0px;
}

.search-condition-check {
    white-space: nowrap;
    background-color: #EFEFEF;
    padding: 10px 5px;
    text-align: center;
}

.search-condition-check span.title {
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--fg-color-g1)
}

.search-condition-cal {
    white-space: nowrap;
    text-align: center;
    padding: 5px 0px;   
}

.search-condition-word {
    width:calc(100% - 60px);
    margin-left: 10px;
    position: relative;
}

.search-condition-word input {
    width: 100% !important;
    font-size: 1.5em;
}    
    
div.search-condition-word_icon {
    position: absolute;
    top:5px;
    right:-40px;
    z-index: 5;
    cursor: pointer;
}
div.search-condition-word_icon img {
    width:22px;
    opacity: 0.9;
}

div.search-condition-word_input {
    height: 2.8rem !important;
}
div.search-condition-word_input .search-box {
    display: inline-block;
    height: 2.8rem !important;
    width: 100%;
}

.search-condition-cnt {
    color: var(--fg-color-g3);
    white-space: nowrap;
    padding: 2px 5px;
    text-align: right;
    font-size: 1.1rem;
    font-weight: bold;
}

.list-frame {
    padding-bottom: 100px;
}

.list-frame-nodata-msg {
    width: fit-content;
    font-size: 1.5rem;
    color: #FF0033;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
}

.list-table {
    border-collapse:collapse;
    background-color:#FEFEFE;
    border-radius:2px;
    box-shadow:2px 2px 2px var(--bd-color-g1);
    width:calc(100% - 10px);
    margin: 10px auto 10px auto;
    empty-cells: show;
}



table.list-item td:not(.list-table-nob) {
    cursor: pointer;
}

.list-table-nob {
    background-color: var(--bg-color-b1);
    width:30px;
    text-align: center;
}

.list-table-nob input[type=checkbox] {
    width: 1.8rem !important;
    height: 1.8rem !important;
}


.list-table.comp {
    background-color: #DDDDDD;
}

.list-table.comp .list-table-nob {
    background-color: var(--bg-color-g1);
}


.list-table.over_time .list-table-nob {
    background-color: #CC0000 !important;
}


.list-table-head {
    position: relative;
    width:calc(100% - 5px);
    height:40px;
    display:flex;   
    margin-left: auto;
    margin-right: auto;
    padding: 0px;
    border-bottom: solid 2px #EFEFEF;
    margin-top:4px;
    margin-bottom:4px;
}

.list-table-head.multirow {
    border: none;
    margin-top:0px;
    margin-bottom:0px;
}

.list-table-head.multirow.firstrow {
    margin-top:4px;
}
.list-table-head.multirow.lastrow {
    border-bottom: solid 2px #EFEFEF;
    margin-bottom:4px;
}

.list-table-head-title {
    position: absolute;
    top:50%;
    left:5px;
    transform: translate(0, -50%);
    font-size: 1.4rem;
    color: var(--fg-color-g1);
    font-weight: bold;
    width: calc(100% - 10px);
}

.list-table-head-title-reserver, .form-table-head-title-reserver{
    transform: translate(0, -75%) !important;
}

.list-table-head-kana, .form-table-head-kana{
    position: absolute;
    bottom:0px;
    left:5px;
    font-size: 0.8rem;
}

.list-table-head-status {
    position: absolute;
    top:50%;
    right:10px;
    transform: translate(0, -50%);
    white-space: nowrap;
}

.list-table-body {
    padding-left:10px;
    padding-top: 5px;
    padding-bottom: 10px;
}

.list-table-body-contents {
    font-size: 1.3rem;
    color: var(--fg-color-g1);
    margin-top: 5px;
    margin-bottom: 5px;
}

.list-table-body-contents-sp {
    height: 10px;
}

.list-table-body-contents label, .list-table-body-contents span {
    font-size: inherit;
}

.list-table-body-contents-tag {
    position: relative;
    height: 30px;
}

.list-table-body-contents-tag-frame {
    position: absolute;
    top:50%;
    right:10px;
    transform: translate(0, -50%);
}

.list-table-body-contents-title {
    display: inline-block;
    font-size: 1.15rem !important;
    min-width: 5.75rem;
    text-align: right;
    font-weight: bold;
    color: var(--fg-color-g2);
}

.list-table-body-hour {
    font-size: 1.3rem;
    color: var(--fg-color-g1);
    margin-top: 5px;
    margin-bottom: 5px;
}
.list-table-body-titlelabel {
    font-size: 1.15rem;
    font-weight: bold;
    color: var(--fg-color-g2);
}

.list-table-body-hourlabel {
    font-size: inherit;
    white-space: nowrap;
}

.list-table.over_time .list-table-body-hourlabel  {
    color: #CC0000 !important;
    font-weight: bold !important;
}

.list-table-body-comment-frame {
    width:calc(100% - 10px);
    margin-left: 0px;
    margin-right: auto;
    margin-top: 10px;
    margin-bottom: 10px;    
}

.list-table-body-comment-frame .list-table-body-comment-title {
    font-size: 1.3rem;
    color: var(--fg-color-g1);
    padding: 5px 0px;
}


.list-table-body-comment-frame .list-table-body-comment-data {
    font-size: inherit;
}

.list-table-body-comment-frame .list-table-body-comment-data textarea {
    font-size: 1.2rem;
    width: calc(100% - 10px);
    border-radius: unset;
    min-height: 200px;
    color: var(--fg-color-g1);    
}

.list-table-body-comment-frame .list-table-body-comment-data textarea:read-only {

}



.foot-botton-right{
    border: none;
    right:0;
    text-align: right;
    padding-right: 10px;
}

/** 虫眼鏡ボタン */
img.condition-src-ico-img {
    background-color: transparent;
    width:26px;
    height:26px;
    vertical-align:middle;
}

/** 詳細ボタン */
img.listdetail-src-ico-img {
    background-color: transparent;
    width:16px;
    height:16px;
    vertical-align:-4px;
}

/** 削除ボタン */
img.clear-src-ico-img {
    background-color: transparent;
    width:20px;
    height:20px;
    vertical-align:middle;
}


.list-break {
    white-space: normal !important;
    width:100% !important;
    overflow-wrap:break-word !important;
    word-break: keep-all !important;   
}

/** STOP  ------------------------------ 検索エリア関連  */

/** START ------------------------------- PAGER  */

.pager-area {
    position: fixed;
    bottom:60px;
    height:24px;
    border: none;
    background-color: rgba(249, 251, 251, 0.6);
    width:100%;    
    max-width: 1000px;    
    margin-left:auto;
    margin-right:auto;
    color:var(--fg-color-g3);
}

.pager-frame {
    position:relative;
    max-width:910px;
    width:calc(100% - 32px);
    height:20px;
    margin-left:auto;
    margin-right:auto;
    background-color:transparent;    
}

.pager-item {
    position:absolute;
    display:inline-block;
    font-size: 1.3rem;
    font-weight: bold;
    background-color:transparent;    
}

.pager-left {
    top:50%;
    left:0px;
    transform: translate(0, -50%);
    background-color:transparent;    
}

.pager-center {
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    background-color:transparent;    
}

.pager-item > span.first > a, .pager-item > span.last > a, .pager-item > span.next > a, .pager-item > span.prev > a, .pager-item > span.num > a {
    color:#114c9f;
    text-decoration: none;
}

.pager-center > span.disabled {
    display: none;
}

.pager-center > span.current {
    font-weight: bold;
}

.pager-item span.first, .pager-item span.last, .pager-item span.prev, .pager-item span.next, .pager-item span.num, .pager-item span.current {
    font-size:inherit;
    font-weight: inherit;
}

.pager-item span.first a, .pager-item span.last a, .pager-item span.prev a, .pager-item span.next a, .pager-item span.num a, .pager-item span.current a {
    font-size:inherit; 
}
    
.pager-item span.current{
    padding:1px 5px;
    font-weight: bold;
    cursor: default;
}

.pager-item span.num{
    padding:1px 5px;
    font-weight: bold;    
}

.pager-item span.num a {
    font-size:inherit;
    font-weight: inherit;    
    text-decoration: none;
    vertical-align: baseline;
}

.pager-item span.num a:hover {
    text-decoration: none;
}

.pager-item span.num a:link {
    color:#2C7CFF;
}
.pager-item span.num a:visited {
    color:#2C7CFF;
}

.pager-right {
    top:50%;
    right:0px;
    transform: translate(0, -50%);
    cursor:pointer;
}

span.sortedhead a {
    text-decoration: none;
    font-size:1.0rem;
}

span.sortedhead a:hover {
    text-decoration: underline;
}

span.sortedhead a:link {
    color:#FdFdFd;
}

span.sortedhead a:visited {
    color:#FdFdFd;
}

.pager-item-count {
    
}

/** STOP  ------------------------------- PAGER  */

/** START ------------------------------ フォームエリア関連  */

.form-frame {
    position: relative;
    border: none;
    width: 100%;
    height: 100%;
    padding-bottom: 100px;    
    background-color: var(--bg-color-w1)
}

.form-title {
    width: calc(100% -5px);
    padding-left: 5px;
}

.form-title.right {
    text-align: right;
    padding-right: 5px;
}

.form-frame-menu {
    border: none;
    width: 100%;
}

.form-frame-menu-herf {
    width: 50%;
    float: left;
}

.form-frame-menu button {
    display: block;
    margin: 2rem auto 2rem auto;
    
    width:calc(100% - 20px);
    max-width: 500px;
    
    font-size: 2rem;
    height: 80px;
}

.form-frame-title {
    width: calc(100% - 20px);
    margin-top:10px;
    margin-right: auto;
    margin-left: auto;
    font-size: 1.3rem;
}
.form-table {
    table-layout: fixed;    
    border-collapse:collapse;
    background-color:#FEFEFE;
    border-radius:2px;
    box-shadow:1px 1px 4px 1px var(--bd-color-g1);
    width:calc(100% - 10px);
    margin: 10px auto 10px auto;
    empty-cells: show;
}

.form-table-head {
    position: relative;
    width:calc(100% - 5px);
    height:40px;
    display:flex;   
    margin-left: auto;
    margin-right: auto;
    padding: 0px;
    border-bottom: solid 2px #EFEFEF;
    margin-top:4px;
    margin-bottom:4px;
}

.form-table-head.multirow {
    border: none;
    margin-top:0px;
    margin-bottom:0px;
}

.form-table-head.multirow.firstrow {
    margin-top:4px;
}
.form-table-head.multirow.lastrow {
    border-bottom: solid 2px #EFEFEF;
    margin-bottom:4px;
}

.form-table-head-title {
    position: absolute;
    top:50%;
    left:5px;
    transform: translate(0, -50%);
    font-size: 1.4rem;
    color: var(--fg-color-g1);
    font-weight: bold;
    width: calc(100% - 10px);
}
.form-table-head-title.form-table-head-title-reserver {
    transform: translate(0, -75%) !important;
}

.form-table-head-status {
    position: absolute;
    top:50%;
    right:10px;
    transform: translate(0, -50%);
    white-space: nowrap;
}

.form-table-body {
    padding-left: 10px;
    padding-top: 5px;
    padding-bottom: 10px;
}

.form-table-body-contents {
    font-size: 1.3rem;
    color: var(--fg-color-g1);
    margin-top: 5px;
    margin-bottom: 5px;
}

.form-table-body-contents-sp {
    height: 10px;
}

.form-table-body-contents-sp.underline {
    width:calc(100% - 18px);
    border-bottom: dotted 2px #EFEFEF;
    margin-left: 5px;
    margin-bottom: 10px;
}

.form-table-body-contents-input-frame {
    width: fit-content;    
    margin-top: 5px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 5px;
}
.form-table-body-contents-input-frame.tickets_frame {
    width: calc(100% - 10px);    
    margin-top: 5px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 5px;
}

 
.form-table-body-contents.input {
    width: fit-content;
    margin-right: 10px;
}

.form-table-body-contents.tickets {
    text-align: right;
    margin-right: 10px;
    margin-top: 30px;
}

.form-table-body-contents.children {

}

.form-table-body-contents.children .child_name {
    display: inline-block;
    color:var(--fg-color-g2);
    font-size: 1.3rem;;
    font-weight: normal;
    width: fit-content;
    text-align: left;
    min-width: 15rem;
    margin: 0 0 0 0;
}

.form-table-body-contents.children .complete-info {
    display: inline-block;
    font-size: inherit;
}
.form-table-body-contents.children .complete-info .complete-info-contents {
    display: inline-block;
    font-size: inherit;
    margin-left: 10px;
}

.form-table-body-contents.children .complete-info .complete-info-contents .complete-info-contents-title {
    display: inline-block;
    font-size: 1.0rem;
    font-weight: bold;
    width:3rem;
    text-align: right;
}

.form-table-body-contents.children .complete-info .complete-info-contents .complete-info-contents-val {
    display: inline-block;
    font-size: inherit;
}

.form-table-body-contents.children .complete-info .complete-info-contents .complete-info-contents-val .sign {
    margin-left: 5px;
}

.form-table-body-contents.children span.tickets {
    display: inline-block;
    margin-left: 10px;
}

.form-table-body-contents.children span.tickets input.tickets {
    width:2.5rem;
    border: none;
}

.form-table-body-contents.verticalcheckbox {
    width: fit-content;
}

.form-table-body-contents.verticalcheckbox .child_name {
    display: inline-block;
    color:var(--fg-color-g2);
    font-size: inherit;
    font-weight: normal;
    width: fit-content;
    text-align: left;
    min-width: 20rem;
    margin: 0 0 0 0;
}

.form-table-body-contents.verticalcheckbox span.checkbox {
    display: block;
}

.form-table-body-contents.verticalcheckbox span.checkbox span.checkboxitem {
    display: block;
}

.form-table-body-contents.verticalcheckbox span.checkbox span.checkboxitem .child_name {
    display: inline-block;
    color:var(--fg-color-g2);
    font-size: inherit;
    font-weight: normal;
    width: fit-content;
    text-align: left;
    min-width: 20rem;
    margin: 0 0 0 0;
}

.form-table-body-contents.verticalcheckbox span.checkbox span.checkboxitem span.tickets {
    display: inline-block;
    margin-left: 10px;
}
.form-table-body-contents.verticalcheckbox span.checkbox span.checkboxitem span.tickets input.tickets {
    width:2.5rem !important;
    border: none;
}

.form-table-body-contents label, .form-table-body-contents span {
    font-size: inherit;
}

.form-table-body-contents-title {
    display: inline-block;
    font-size: 1.15rem !important;
    min-width: 5.75rem;
    text-align: right;
    font-weight: bold;
    color: var(--fg-color-g2);
}

.form-table-body-contents-title.imp{
    text-align: left;    
    color: #FF0000;
}

.form-table-body-contents-data {
    display: inline-block;
    font-size: inherit;
}

.form-table-body-contents.tickets .form-table-body-contents-data span.sign {
    display: inline-block;
    font-size: 1.3rem !important;
    margin-left: 5px;
}

.form-table-body-contents.tickets_frame {
    position: relative;
    font-size: 1.3rem !important;
    width: 100%;
    max-width: 600px;
    height: 26px;
    margin-left: auto;
    margin-right: auto;
    
}

.form-table-body-contents.tickets_frame .tickets_name {
    display: inline-block;
    position: absolute;
    left:0;
    text-align: left;
    font-size: inherit;
}

.form-table-body-contents.tickets_frame .tickets_cnt {
    display: inline-block;
    position: absolute;
    right:0;
    text-align: right;
    font-size: inherit;
}

.over_time .form-table-body-contents-data-hour {
    color:#CC0000 !important;
}

.form-table-body-hourlabel {
    font-size: inherit;
}

.form-table-body-target-hour {
    text-align: center;
    width:calc(100% - 10px);
    margin: 10px 0px;
}

.form-table-body-target-hour > div {
    margin-left: auto;
    margin-right: auto;
} 

.form-table-timestamp {
    margin-left: auto;
    margin-right: auto;
    width:calc(100% - 20px);
    font-size: 1.15rem;
    color: var(--fg-color-g2);
    text-align: right;
}

.form-table-timestamp .form-table-timestamp-title {
    font-size: inherit;
}

.form-table-timestamp .form-table-timestamp-time {
    font-size: inherit;
}

.form-content-sp {
    width:calc(100% - 20px);
    height: 2px;
}

.form-content-sp-l {
    width:calc(100% - 20px);
    height: 10px;
}

.form-content-frame {
    width:calc(100% - 20px);
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    margin-bottom: 10px;    
}

.form-content-frame .form-content-title{
    font-size: 1.4rem;
    font-weight: bold;
    color: var(--fg-color-g1);
    padding: 5px 0px;
}

 .form-content-frame .form-content-title span {
    font-size: 1.4rem;
    font-weight: bold;
    color: var(--fg-color-g1);
    padding: 2px 0px;
}

.form-content-frame .form-content-title-guid {
    font-size: 1.3rem;
    color: var(--fg-color-g1);
    padding: 5px 0px;
    margin-left: 1.4rem;
    margin-top:-10px;

}

.form-content-frame .form-content-title-guid.imp {
    color: #FF0000;
    font-weight: bold;
}

.form-content-frame .form-content-data {
    font-size: 1.3rem;
    margin-left: 1.4rem;   
}

.form-content-frame .form-content-data .days {
    margin-top:10px;
}

.form-content-frame .form-content-data .days label {
    width: 1.3rem;
}

.form-content-frame .form-content-data.sub_title {
    padding-bottom: 3px;
}

.form-content-frame .form-content-data.sub_title div {
    color:var(--bg-color-b1);
}

.form-content-frame .form-content-data textarea {
    font-size: 1.3rem;
    width: calc(100% - 10px);
    border-radius: unset;
    min-height: 200px;
}

.form-content-frame .form-content-data textarea:read-only {
    min-height: unset;
}

.form-comment-frame {
    width:calc(100% - 20px);
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    margin-bottom: 10px;    
}

.form-comment-frame .form-comment-title {
    font-size: 1.4rem;
    font-weight: bold;
    color: var(--fg-color-g1);
    padding: 5px 0px;
}

.form-comment-frame .form-comment-title-guid {
    font-size: 1.3rem;
    color: var(--fg-color-g1);
    padding: 5px 0px;
    margin-left: 1.3rem;
    margin-top:-10px;
    text-indent: -1em;
    padding-left: 1em;    
}

.form-comment-frame .form-comment-data {
    font-size: inherit;
}

.form-comment-frame .form-comment-data textarea {
    font-size: 1.3rem;
    width: calc(100% - 10px);
    border-radius: unset;
    min-height: 200px;
}

.form-comment-frame .form-comment-data textarea:read-only {
    min-height: unset;
}

.form-message {
    position: relative;
    width:calc(100% - 20px);
    min-height: 150px;
    margin-top: 50px;
    margin-left: auto;
    margin-right: auto;
    background-color:#FEFEFE;
    border-radius:2px;
    box-shadow:0px 0px 4px var(--bd-color-g1);    
    padding: 50px 0px;
}

.form-message .form-message-title {
    position: relative;
    font-size: 3.5rem;
    font-weight: bold;
    color: var(--bg-color-b1);
    width: calc(100% - 2px);
    min-height: 8rem;
    margin-left: auto;
    margin-right: auto;
    height: 8rem;
}

.form-message .form-message-title .form-message-title-val {
    position: absolute;
    font-size: inherit;
    font-weight: inherit;
    top:50%;
    left: 50%;
    width: fit-content;
    transform: translate(-50%, -50%);
}

.form-message .form-message-body {
    font-size: 1.5rem;
    color: var(--fg-color-g3);
    font-weight: bold;
    width: calc(100% - 2px);
    min-height: 1rem;
    text-align: center;
    margin-top: 30px;
    margin-left: auto;
    margin-right: auto;
}

.form-message .form-message-body .addmessage {
    font-size: inherit;
    font-weight: bold;
    margin-top: 5px;
    color: #cc0000;
}

.form-message .form-message-body .fileupmessage {
    font-size: inherit;
    font-weight: bold;
    margin-top: 5px;
    color:var(--fg-color-g3);
}

.form-message .form-message-body .fileupmessage .move {
    font-size:1.1em;
    font-weight:inherit;
    color:#cc0000;
    cursor: pointer;
}

.over_time_msg, .additional_reservation_msg {
    color: #cc0000;
    font-size: 1.4rem;
    font-weight: bold;
    margin-left: 10px;
    margin-top: 10px;
    text-indent: -1em;
    padding-left: 1em;    
}

.form-allocation-table {
    table-layout: fixed;    
    border-collapse:collapse;
    width:100%;
    empty-cells: show;
    margin-left: auto;
    margin-right: auto;    
}

.form-allocation-table th.form-genmen-kubun-sel {
    font-size: 1.2rem;   
}

.form-allocation-table td.form-genmen-kubun-sel {
    font-size: 1.2rem;   
}

.form-allocation-table td {
    height: 35px;
}

.form-allocation-table td.form-allocation-sel {
    font-size: 1.4rem;   
}

.form-allocation-table td.form-allocation-age {
    font-size: 1.4rem;    
}

.form-allocation-table td.form-allocation-num {
    font-size: 1.4rem;
}

.form-allocation-table .radiogroup {
    display: inline-block;
    width: fit-content;
}

.form-allocation-table span.sign {
    display: inline-block;
    font-size: inherit;
    margin-left: 5px;    
}

.droparea {
    position:relative;
    color:#999;
    border:dashed #999 1px;
    border-radius: 2px;
    padding: 4px 4px 4px 4px;
    width:calc(100% - 10px); 
    margin-top:10px;
}

.addfileframe {
    position:relative;
    width:calc(100% - 10px);
    margin-top:5px;    
}

.addfileframe .addfileitems{
    display: inline-block;
    float:left;
    box-shadow:3px 2px 4px var(--bd-color-g1);
    border-radius: 2px;
    color:var(--bg-color-b1);
    filter:hue-rotate(-30deg);
    padding:4px 10px;
    margin: 1px;    
}

.form-content-title-guid span.move {
    font-size:1.3rem;
    font-weight:bold;
    color:#cc0000;
    cursor: pointer;
}

/** STOP  ------------------------------ フォームエリア関連  */

/** START ------------------------------- テーブル  */
th.td_l, td.td_l {
    text-align:left !important;
    padding-left: 0.5rem !important;
}

th.td_c, td.td_c {
    text-align:center !important;
}

th.td_r, td.td_r {
    text-align:right !important;
    padding-right: 0.5rem !important;
}

th.td_vt, td.td_vt {
    vertical-align: top !important;
}
th.td_vm, td.td_vm {
    vertical-align: middle !important;
}
th.td_vb, td.td_vb {
    vertical-align: bottom !important;
}

div.condition-area-condition-group, div.condition-area-condition-group-disp {
    position: relative;
    border: dashed 1px #DDDDDD;
    width: calc(100% - 16px);
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    margin-bottom: 15px;
    padding-bottom: 4px;
}

div.condition-area-condition-group-title {
    position: absolute;
    font-size: 1rem;
    top:-8px;
    left:5px;
    color: #0D59B6;
    font-weight: bold;
    padding-left: 5px;
    padding-right: 5px;
    background-color: #F9FBFB;
}

div.condition-area-condition-group.notitle table.condition-area-condition {
    margin-top: 0;
}

.submit_arr_table {
    width: 100%
}

.submit_arr_table tr td.title {
    font-weight: bold;
    color: var(--fg-color-g1);
}

/** STOP  ------------------------------- テーブル  */

/** START ------------------------------ カレンダー  */

.reservations-cal-frame {
    margin-top: 10px;
}

.reservations-cal-frame-title {
    width: calc(100% - 18px);
    max-width: 602px;
    background-color: #EFEFEF; 
    margin-left: auto;
    margin-right: auto;  
    margin-bottom: 10px;
    font-size: 1.3rem;
    padding: 10px 20px;
    box-sizing:border-box;
    text-align: center;
}

.reservations-cal-frame-title span.imp {
    font-weight: bold;
    color: #FF0000;
    font-size: inherit;
}

.reservations-cal-frame-condition {
    width: calc(100% - 5px);
    max-width: 602px;
    margin-left: auto;
    margin-right: auto;  
    margin-bottom: 10px;
    font-size: 1.3rem;
    padding: 10px 0px;
    box-sizing:border-box;
    text-align: center;
}

.reservations-cal-frame-condition.small {
    padding: 5px 0px 0px 0px;
}

.reservations-cal-frame-condition .contents_val {
    font-size: 1.5rem;
    font-weight: bold;
}

.reservations-cal-frame-title span.title {
    font-weight: bold;
    font-size: inherit;
}

.reservations-cal {
    table-layout: fixed;
    width: calc(100% - 20px);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    border-collapse:collapse;    
    background-color:#FEFEFE;    
}

.reservations-cal .cal_time {
    width: 60px;
    text-align: center;
    background-color:#F3F3F3;
}

.reservations-cal .cal_day {
    vertical-align: middle;
}

.reservations-cal .cal_day .sign, .reservations-cal .cal_day .sign .checkbox, .reservations-cal .cal_day .sign .checkbox .checkboxitem, .reservations-cal .cal_day .sign .checkbox .checkboxitem label, .reservations-cal .cal_day .sign .checkbox .checkboxitem span[data-error_frame]{
    border:none;
    display: inline-block !important;
    padding: 0 !important;
    margin: 0 !important;
    vertical-align: middle !important;
    width:fit-content;
}

.reservations-cal .cal_day .sign .checkbox .checkboxitem input[type=checkbox] {
    padding: 0 !important;
    margin: 0 !important;
    position: static !important;
    vertical-align: middle !important;
}

.reservations-cal .cal_day .sign .checkbox .checkboxitem label[for]:has(input[type=checkbox][readonly])::before {
    position: static !important;
    display: inline-block !important;
    transform: none !important;
    vertical-align: middle !important;    
    content: "";
    font-size: 1.2rem;
}


.reservations-cal .cal_day.cal_day_ctl {
    position: relative;
    padding: 0;
}

.reservations-cal .cal_day.cal_day_ctl input[type=checkbox] {
    border-radius: 0 !important;
    position: absolute;
    padding: 0;
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: solid 1px #888888;
    width: 2.5rem;
    height: 2.5rem;
}

.reservations-cal thead th.cal_day {
    cursor: pointer;
    position: relative;
}

.reservations-cal thead th.cal_day span.cal_day {
    position: absolute;
    display: inline-block;
    font-size: inherit;
    font-weight: inherit;
    top:3px;
    left:50%;
    transform: translateX(-50%);
}

.reservations-cal thead th.cal_day span.cal_week {
    position: absolute;    
    display: inline-block;
    font-size: 0.9rem;
    bottom:0px;
    left:50%;
    transform: translateX(-50%);    
}

.reservations-cal thead th.cal_day_sun {
    color:#FF0000;
}

.reservations-cal thead th.cal_day_sat {
    color:#0000FF;
}

.reservations-cal .cal_day_sun {
    background-color: #FFC5C5;
}

.reservations-cal .cal_day_disabled {
    background-color: #CCCCCC !important;
}

.reservations-cal .cal_day_sat {
    background-color:#CBDCFF;
}


span.cal_day_bar {
    display: inline-block;
    width:2rem;
    height: 1rem;
}

.reservations-cal td.cal_day.cal_day_def, span.cal_day_bar.cal_day_def {
    background-color:#00cccc;
}

.reservations-cal th.cal_day.cal_day_def {
    background-color: transparent;
    background-image: radial-gradient(circle, #00cccc 1px, transparent 1px);
    background-position: 0 0;
    background-size: 3px 3px;
}

.reservations-cal td.cal_day.cal_day_ind, span.cal_day_bar.cal_day_ind {
    background-color:#ff6666;
}

.reservations-cal th.cal_day.cal_day_ind {
    background-color: transparent;
    background-image: radial-gradient(circle, #ff6666 1px, transparent 1px);
    background-position: 0 0;
    background-size: 3px 3px;
}

.reservations-cal th.cal_day.cal_day_base, td.cal_day.cal_day_base, span.cal_day_bar.cal_day_base  {
    border: solid 2px #3300cc;
    box-sizing: border-box;
}

.reservations-cal thead th.cal_day {

}

.reservations-cal tbody td.cal_day input[type=checkbox] {
    cursor: pointer;
}

.reservations-cal tbody td.cal_time {
    cursor: pointer;
}


.reservations-cal td.cal_day_sel {
    cursor: pointer;
}

.reservations-cal thead th {
    text-align: center;
    font-size: 1.3rem;
    font-weight: bold;
    height: 40px;    
    border: solid 1px #888888;
    background-color: #FFFFFF;    
}

.reservations-cal tbody td {
    text-align: center;
    font-size: 1.2rem;
    height: 40px;
    border: solid 1px #888888;
    background-color: #FFFFFF;
}

.reservations-cal span.sign {
    font-size: 1.8rem;
}

.reservations-week {
    table-layout: fixed;
    width: calc(100% - 20px);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    border-collapse:collapse;    
    background-color:#FEFEFE;    
}

.reservations-week .cal_day {
    padding: 5px 2px 5px 5px;
    font-size: inherit;
    border: solid 1px var(--bd-color-g2);
    color:var(--fg-color-g2);
    height: 1.8rem;
    position: relative;
}

.reservations-week .cal_day div.remaining-frame {
    position: relative;
    width: 100%;
    font-size: inherit;
    font-weight: inherit;
}

.reservations-week .cal_day.cal_day_sun {
    background-color: #FFC5C5;
}

.reservations-week .cal_day.cal_day_sat {
    background-color:#CBDCFF;
}

.reservations-week .cal_day div.day {
    display: inline-block;
    position: absolute;
    width: 5.8rem;
    font-size: inherit;
    font-weight: inherit;
    top:50%;
    left:0;
    transform: translateY(-50%);
}

.reservations-week .cal_day div.remaininglb {
    display: inline-block;
    position: absolute;
    width: 1rem;
    font-size: 0.9rem;
    font-weight: inherit;
    top:50%;
    transform: translateY(-50%);
}

.reservations-week .cal_day div.remaininglb.start {
    left:6.0rem;
    width: 0.6rem;
}

.reservations-week .cal_day div.remaininglb.end {
    left:7.5rem;
    width: 0.6rem;
}

.reservations-week .cal_day div.remaining {
    display: inline-block;
    position: absolute;
    font-size: 0.9rem;
    font-weight: inherit;
    top:50%;
    left:6.4rem;
    width: 1.1rem;
    transform: translateY(-50%);
    text-align: center;
}

.reservations-week .cal_day div.ages-frame {
    display: inline-block;
    position: absolute;
    left:8.2rem;    
    top:50%;
    transform: translateY(-50%);
}

.reservations-week .cal_day div.ages {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: inherit;
    width: 2.2rem;
    text-align: center;
    margin-left: 2px;
}

.reservations-week .cal_day div.reserv {
    display: inline-block;
    position: absolute;
    font-size: 0.8rem;
    font-weight: inherit;
    top:50%;
    right:1.0rem;
    width: fit-content;
    transform: translateY(-50%);
}

.reservations-week .cal_day div.reserver {
    padding: 0;
    height:16px;
}

.reservations-week .cal_day div.reserver div.name {
    display: inline-block;
    text-align: right;
    font-weight: bold;
    font-size: 0.8rem;
    margin-right: 5px;
    padding: 2px 0px 0px 0px;
    float: left;
}
.reservations-week .cal_day div.reserver div.status_tag {
    font-size: 0.6rem;
    width:48px;
    float: right;
    margin-top: 3px;
}

.reservations-week .cal_day div.move {
    display: inline-block;
    position: absolute;
    font-size: 0.95rem;
    font-weight: inherit;
    top:50%;
    right:0px;
    width: 1rem;
    transform: translateY(-50%);
    text-align: right;
}

.reservations-week .cal_day.cal_day_alloc {
}

.reservations-week .cal_day.cal_day_move {
    border-left: none;
    width: 50px;
    text-align: right;
    font-weight: bold;
}

.reservations-week .cal_day.cal_day_ok {
    font-weight: bold;
    cursor: pointer;
}

.reservations-week .cal_day.cal_day_ng {
   background-color: var(--bg-color-g1);
}

.reservations-week .cal_day.cal_day_disabled {
    background-color: var(--bg-color-g3);
}

.reservations-week .cal_day .day_cover {
    position: absolute;
    left:0;
    right:0;
    top:0;
    bottom: 0;
    background-color: transparent;
    z-index: 1;
}

.reservations-week tfoot tr td {
    font-weight: bold;
    padding: 5px;
    font-size: 0.9rem;
}

.reservations-hour {
    table-layout: fixed;
    width: calc(100% - 20px);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    border-collapse:collapse;    
    background-color:#FEFEFE;  
}

.reservations-hour .cal_time {
    padding: 5px 2px 5px 10px;
    font-size: inherit;
    border: solid 1px var(--bd-color-g2);
    color:var(--fg-color-g2);
    height: 1.8rem;
    position: relative;
}

.reservations-hour .cal_time div.remaining-frame {
    position: relative;
    width: 100%;
    font-size: inherit;
    font-weight: inherit;
}

.reservations-hour .cal_time div.time {
    display: inline-block;
    position: absolute;
    width: 12rem;
    font-size: inherit;
    font-weight: inherit;
    top:50%;
    left:0;
    transform: translateY(-50%);
}

.reservations-hour .cal_time div.time span.checkbox {
    border: none;
    background: transparent;
    font-size: inherit;
}

.reservations-hour .cal_time div.time span.checkbox * {
    font-size: inherit;
}

.reservations-hour .cal_time div.remaininglb {
    display: inline-block;
    position: absolute;
    width: 1rem;
    font-size: 0.9rem;
    font-weight: inherit;
    top:50%;
    transform: translateY(-50%);
}

.reservations-hour .cal_time div.remaininglb.start {
    left:10.2rem;
    width: 0.6rem;
}

.reservations-hour .cal_time div.remaininglb.end {
    left:12.0rem;
    width: 0.6rem;
}

.reservations-hour .cal_time div.remaining {
    display: inline-block;
    position: absolute;
    font-size: 0.9rem;
    font-weight: inherit;
    top:50%;
    left:10.8rem;
    width: 1.1rem;
    transform: translateY(-50%);
    text-align: center;
}

.reservations-hour .cal_time div.reserv {
    display: inline-block;
    position: absolute;
    font-size: 0.8rem;
    font-weight: inherit;
    top:50%;
    right:1.0rem;
    width: fit-content;
    transform: translateY(-50%);
}

.reservations-hour .cal_day div.reserver {
    padding: 0;
    height:16px;
}

.reservations-hour .cal_time div.reserver div.name {
    display: inline-block;
    text-align: right;
    font-weight: bold;
    font-size: 0.8rem;
    margin-right: 5px;
    padding: 2px 0px 0px 0px;
    float: left;
}

.reservations-hour .cal_time div.reserver div.status_tag {
    font-size: 0.6rem;
    width:48px;
    float: right;
    margin-top: 3px;
}

.reservations-hour .cal_time.cal_time_alloc {
}

.reservations-hour .cal_time.cal_time_ok {
    font-weight: bold;
    cursor: pointer;
}

.reservations-hour .cal_time.cal_time_ok div.time label {
    font-weight: bold;
}

.reservations-hour .cal_time.cal_time_ng {
   background-color: var(--bg-color-g1);
}

.reservations-hour .cal_time.cal_time_disabled {
    background-color: var(--bg-color-g3);
}

.reservations-hour .cal_time.cal_time_reserv {
    background-color: #ffdddd;
}

.reservations-hour .cal_time .time_cover {
    position: absolute;
    left:0;
    right:0;
    top:0;
    bottom: 0;
    background-color: transparent;
    z-index: 1;
}

.reservations-hour tfoot tr td {
    font-weight: bold;
    padding: 5px;
    font-size: 0.9rem;
}
    
/** STOP  ------------------------------ カレンダー  */

/** START  ------------------------------ その他  */

.rubi {
    font-size: 0.9rem;
}

.table_reports .rubi {
    font-size: 0.9rem !important;
    height: 10px;
    margin-bottom: 0;
    padding-bottom: 0;
}

.none_display {
    display: none;
}

.noTitleDialog .ui-dialog-titlebar {display:none;}

.printed {
    font-size: 1.3rem;
}

.color-red {
    color: red;
}

th .disp_target_month{
    font-weight: bold;
    font-size: 1.1rem;
}

th .disp_target_day{
    font-weight: bold;
    font-size: 1.1rem;
}

.backgroundcolor-red {
    border:solid 1px red;
    padding: 1px 10px;
}

.tooltip{
    position: relative;
    cursor: pointer;
    width: 30px;
    left: 45px;    
}

.description {
    display: none;
    position: absolute;
    text-align: left;
    padding: 10px;
    font-size: 1.0rem;
    line-height: 1.6rem;
    color: #000;
    border-radius: 5px;
    border: 2px solid;
    border-color: #000;
    background: #fff;
    width: 200px;
    z-index: 300;
}

.tooltip:hover .description{
    display: inline-block;
    top: 40px;
    left: 30px;
}     

   
.clearfix::after{
    content: "";
    display: block;
    clear: both;
}

.heart {
    position: absolute;
    width: 25px;
    height: 20px;
    left: 50%;
    margin-top: 0px;
    margin-left: 0px;
}
.heart:before,
.heart:after {
    position: absolute;
    content: "";
    left: 12px;
    top: 0;
    width: 12px;
    height: 20px;
    border-radius: 12px 12px 0 0;
    transform: rotate(-45deg);
    transform-origin: 0 100%;
}
.heart:after {
    left: 0;
    transform: rotate(45deg);
    transform-origin :100% 100%;
}

.heart-on:before,
.heart-on:after {
    background: #FF0000;
}

.heart-off:before,
.heart-off:after {
    background: #BBBBBB;
}

.ui-menu {
    min-width: 100px;
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
    z-index:999;
}
.ui-menu-item {
    border: solid 1px #FCFCFC;
}

.ui-menu-item div {
    white-space: nowrap;    
}

#page-top {
    position: fixed;
    bottom: 50px;
    right: 20px;
    font-size: 77%;
}
#page-top a {
    background: #114c9f;
    background-color:rgba(102,102,102,0.8);
    text-decoration: none;
    color: #fff;
    width: 80px;
    padding: 20px 0;
    text-align: center;
    display: block;
    border-radius: 5px;
}
#page-top a:hover {
    text-decoration: none;
    background-color:rgba(153,153,153,0.8);
}

.additional {
    cursor:cell;
    width:100%;
    height:100%;   
}

.nowrap {
    white-space: nowrap;
}

.text_ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

div.tickets-title {
    width: calc(100% - 10px); 
    text-align: center;
    font-size: 1.6rem;
    font-weight: bold;
    margin-top: 20px;
    margin-bottom: 20px;
}
div.tickets-title.small {
    font-size: 1.3rem;
    text-align: right;
    margin-top: 5px;
    margin-bottom: 5px;
}

div.tickets-title.small input.tickets {
    width: 5rem;
}

div.tickets-title.small .sign {
    display: inline-block;
    font-size: inherit;
    margin-left: 5px;   
}

div.ages-area div.ages-frame {
    display: inline-block;
    width:fit-content;
    margin-right: 5px;
}

div.ages-area div.ages-title {
    display: inline-block;
    width:fit-content;
    text-align: right;
    font-weight: bold;
    margin-right: 5px;
}

div.ages-area div.ages-frame div.ages {
    display: inline-block;
    width:fit-content;
    text-align: center;
    font-weight: bold;
    margin-right: 5px;
}

div.ages-area div.ages-frame div.ages .ages-class{
    font-weight: bold;
}
div.ages-area div.ages-frame div.ages .ages-cnt {
    font-weight: bold;
}

div.ages-area div.ages-frame div.ages .ages-alloc {
    font-weight: bold;
}

div.ages-area div.ages-frame div.ages .ages-reserve {
    font-weight: bold;
}
div.ages-area div.ages-frame div.ages .ages-reserve.over {
    color: #FF0000;
}

div.qr_code-frame {
    position: relative;
    width: 250px; 
    height: 250px;
    margin-right: auto;
    margin-left: auto;
}

div.qr_code {
    position:absolute;
    width:228px;
    height: 228px;
    left:50%;
    transform: translateX(-50%);
}

div.qr_code img {
}

div.qr_code-none {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    font-size: 1.3rem;
    color:#FF0000;
}


#qr_reader_wrapper{
    margin: 0px auto 0px auto;
    width: 320px; height: auto;
}

#qr_reader_msg{
    margin: 0px; padding: 10px;
    background-color: lightgray;
    text-align: center;
}

#qr_reader_canvas{
    width: 100%; height: auto;
    background-color: silver;
}

div.child_input_text_regist {
    width: calc(100% - 10px);
    margin-left: auto;    
    margin-right: auto;    
    position: relative;
}


/** STOP ------------------------------ その他  */
/** START ------------------------------ ローディング  */
.is-hide{
    display:none; 
}
.loading{
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    left:0;
    background:rgba(255,255,255,0.5);
    z-index: 9000;
}
.loading_icon:before{
    content:"";
    display:block;
    position:fixed;
    left:50%;
    top:50%;
    width:50px;
    height:50px;
    border-radius:5px;
    margin-top:-15px;
    margin-left:-15px;
    background:transparent;
}
.loading_icon {
    z-index: 1001;
    display:block;
    position:fixed;
    left:50%;
    top:50%;
    width:32px;
    height:32px;
    border-radius:20px;
    margin-top:-10px;
    margin-left:-10px;
    border:4px solid #60ABB9;
    border-right:4px solid white;
    animation: rotate 0.5s infinite linear;
}
@keyframes rotate {
    0%    { transform: rotate(0deg); }
    100%  { transform: rotate(360deg); }
}
.loading_dlg{
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    background:rgba(255,255,255,0.5);
    z-index: 9000;
}
.loading_dlg_icon:before{
    content:"";
    display:block;
    position:absolute;
    left:50%;
    top:50%;
    width:50px;
    height:50px;
    border-radius:5px;
    margin-top:-15px;
    margin-left:-15px;
    background:transparent;
}
.loading_dlg_icon {
    z-index: 1001;
    display:block;
    position:absolute;
    left:30%;
    top:40%;
    width:32px;
    height:32px;
    border-radius:20px;
    margin-top:-10px;
    margin-left:-10px;
    border:4px solid #60ABB9;
    border-right:4px solid white;
    animation: rotate 0.5s infinite linear;
}

/* 読込み中エリア */
div.loddingarea table {
    width:100%;
}

div.loddingarea table tr td {
    /*color:#000000 !important;*/
    color: #2C7CFF !important;
    font-size: 0.9rem !important;
}

div.loddingarea table tr td.img {
    width:28px;
    vertical-align: top;
}

div.loddingarea table tr td.img img.loading {
}

div.loddingarea table tr td.procmsg div{
    font-size: 1.5rem !important;
}
div.loddingarea table tr td.guid {
    padding-left: 10px;
    padding-top: 5px;
    color:#FF0000 !important;
    font-weight: bold;
    line-height:1.5rem;
}
/** STOP ------------------------------ ローディング  */


div.selectlist, div.selectlist-title {
    width:calc(100% - 5px);
    margin-left: auto;
    margin-right: auto;
    padding: 0px;
}

div.selectlist-title div.selectlist-left,div.selectlist-title div.selectlist-right {
    background-color:#114c9f;
    color: #FCFCFC;
    margin-bottom: 2px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 10px;
    width: calc(46% - 10px);
}

div.selectlist-left, div.selectlist-right {
    width:46%;
    float: left;
    margin: 0px;
    padding: 0px;
}

div.selectlist-left select, div.selectlist-right select {
    width:100%;
    height:100%;
    padding: 5px;
    border-radius: 2px;
}

div.selectlist-button {
    width:8%;
    float: left;    
    margin: 0px;
    padding: 0px;
    display: table;
}
div.selectlist-button-in {
    display: table-cell;
    vertical-align: middle;    
    text-align: center;
}

.tab_enter_target {
    background-color: #fff3cd !important;
}

/** START ------------------------------- タイルメニュー  */

#tile-menuframe {
    width:calc(100% - 20px);
    height: 100%;
    margin-left:auto;
    margin-right:auto;
    overflow-x: auto;
}

#tile-menu {
    padding:5px 5px;
    margin-right:auto;
    margin-left:auto;
}  

.tile-menu-itme {
    float:left;
    position:relative;
    width:calc(100% / 2 - 10px);
    height:130px;
    margin:5px;
    background-color : var(--bg-color-w1);
    box-shadow:0px 0px 10px 2px var(--bd-color-g1);
    border-radius: 8px;
    cursor:pointer;
}

.tile-menu-itmedb {
    float:left;
    position:relative;
    width:calc((100% / 2 - 5px) * 2);
    height:130px;
    margin:5px;
    background-color : var(--bg-color-w1);
    box-shadow:0px 0px 10px 2px var(--bd-color-g1);
    border-radius: 8px;
    cursor:pointer;
}

.tile-menu-itme_gen {
    float:left;
    position:relative;
    width:calc(100% / 2 - 10px);
    height:130px;
    margin:5px;
    background-color : var(--bg-color-w1);
    box-shadow:0px 0px 10px 2px var(--bd-color-g1);
    border-radius: 8px;
    cursor:pointer;
}

.tile-menu-itme-frame {
    float:left;
    position:relative;
    width:300px;
    height:250px;
    margin:10px;
}

.tile-menu-itme-icon {
    position:absolute;
    display:inline-block;
    width:100%;
    height:100%;
    background-size:contain;
    background-repeat:no-repeat;
    left:50%;
    transform: translate(-50%, 0);
}

.tile-menu-itme-icon img {
    position:absolute;
    height: 65%;
    top:50%;
    left:50%;
    transform: translate(-50%, -65%);
}

.tile-menu-itme_gen .tile-menu-itme-icon img {
    position:absolute;
    height: 65%;
    top:50%;
    left:50%;
    transform: translate(-38%, -65%);
}

.tile-menu-itme-title {
    position:relative;
    color: var(--fg-color-g3);
    background-color: transparent;
    position:absolute;
    bottom: 10px;
    width: 100%;
    height: 20px;
}

.tile-menu-itme-title div {
    position:absolute;
    display: inline-block;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    font-size: 1.5rem;
    font-weight: bold;    
    white-space: nowrap;
}


.tile-menu-itme-dummy {
   float:left;
   width: 100%;
   height: 80px;
}
/** STOP ------------------------------- メニュー  */

/** START ------------------------------- お知らせ  */
.message-title {
    position:relative;
    padding-left:1rem;
    font-size:1.5rem;
    width:95%;
    height:30px;
    background-color:#0861A7;
    color:#FCFCFC;
    margin-top:5px;
    margin-left:auto;
    margin-right:auto;
}

.message-title-showall {
    position:absolute;

    top:50%;
    right:10px;
    transform: translate(0, -50%);
    cursor:pointer;
    font-size:0.55rem;
}

.message-title-wd {
    position:absolute;
    display:inline-block;
    font-size:0.8rem;
    top:50%;
    left:10px;
    transform: translate(0, -50%);
}

.message-body-frame {
    margin-top:5px;
    height:204px;
    overflow-y:scroll;
}

.message-body {
    font-size:1.2rem;
    margin:6px 6px 6px 6px;
    padding:10px 10px 5px 10px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
}

.message-body-frame div.message-body:nth-child(odd){ 
    background-color:#FAFAFA;
    
}
.message-body-odd {
}

.message-date {
    font-size:1.0rem;
}

.message-word {

}

.message-word a {
    text-decoration:none;
    color:#114c9f;
}

/** STOP  ------------------------------- お知らせ  */

/** START ------------------------------- QRコードリーダー  */
#loadingMessage {
    text-align: center;
    padding: 40px;
    background-color: #eee;
}

#canvas {
    width: calc(100% - 10px);
    height: calc(100vh - 300px);
}

#output {
    margin-top: 20px;
    background: #eee;
    padding: 10px;
    padding-bottom: 0;
}

#output div {
    padding-bottom: 10px;
    word-wrap: break-word;
}

#noQRFound {
    text-align: center;
}

#qrtitle {
    font-size:1.4rem;
    font-weight: bold;
    color: var(--fg-color-g2);
    text-align: center;
    width: 100%;
    margin-bottom: 5px;
}
/** STOP  ------------------------------- QRコードリーダー  */


@supports selector(:has(+ *)){
    #has_support {
        display:none;
    }
}