/* charset */
@charset "UTF-8"; 

body,td,th,select,input{
	font-size:		100%;
}

body{
    font-family:sans-serif;
}
div.fixed-box-yoko-tate {
  width:100%;
  /*height:228px;*/
  background: #fff;
  border:1px solid #fff;
  overflow:auto;
}
table.yoko-tate {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #ccc;
}
table.yoko-tate th.fixed02,
table.yoko-tate th.fixed03,
table.yoko-tate td {
  width: 90px;
  height: 30px;
  vertical-align: middle;
  padding: 0 15px;
  border: 1px solid #ccc;
}
table.yoko-tate th.fixed01,
table.yoko-tate td.fixed02 {
  width: 100%;
  height: 30px;
  vertical-align: middle;
  padding: 0 15px;
  border: 1px solid #ccc;	
}
table.yoko-tate .fixed01,
table.yoko-tate .fixed02 {
  position: sticky;
  top: 0;
  left: 0;
}
table.yoko-tate .fixed03 {
  position: sticky;
  top: 30px;
  left: 0;
}
table.yoko-tate .fixed01:before,
table.yoko-tate .fixed02:before,
table.yoko-tate .fixed03:before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 100%;
  height: 100%;
  border: 1px solid #ccc;
}
table.yoko-tate .fixed01 {
  z-index: 2;
}
table.yoko-tate .fixed02,
table.yoko-tate .fixed03 {
  z-index: 1;
}  
.scroll-box{
	overflow-x: auto;
}
.scroll-box::-webkit-scrollbar{
	height: 5px;
	background: #b7b7b7;
}
.scroll-box::-webkit-scrollbar-thumb{
	background: #696969;
	border-radius: 2px;
}

.mt05{margin-top:5px !important;}
.mt15{margin-top:15px !important;}
.mt20{margin-top:20px !important;}
.mb05{margin-bottom:5px !important;}
.mb10{margin-bottom:10px !important;}

/* センタリング */
#main *{
	/* margin: 0 auto; */
}

/* 背景色指定 */
body {
	background-color: #ffffff;
}

form {
    display: block;
    margin-top: 0em;
    margin-block-end: 0em;
}

.textControl {
    padding: 8px 10px;
    height: 35px;
    font-size: 16px;
    line-height: 21px;
}
.selectControl{
    height: 35px;
    font-size: 16px;
    line-height: 21px;
}
.btnControl{
    -webkit-appearance: none;
    display: inline-block;
    outline: 0;
    position: relative;
    border: 1px solid;
    border-radius: 4px;
    text-decoration: none;
    text-align: center;
    vertical-align: middle;
    height:40px;
    border-color: #23abdd;
    background-color: #23abdd;
    color:#ffffff;
    width:50%;
}
.btnControl-n{
    -webkit-appearance: none;
    display: inline-block;
    outline: 0;
    position: relative;
    border: 1px solid;
    border-radius: 4px;
    height: auto;
    text-decoration: none;
    text-align: center;
    vertical-align: middle;
    height:40px;
    border-color: #a3a3a3;
    background-color: #a3a3a3;
    color:#ffffff;
    width:50%;
}

/* テーブルのボーダー・パディング指定 */
TABLE {
	padding: 0px;
	vertical-align: middle;
	width:100%;
}

/* 条件選択セル（桃・濃・黒）*/
.SELLABEL1{
	background-color: #feb5a6;
	color: black;
	width:25%;
	margin-top:5px;
}
/* 条件選択セル（桃・淡・黒）*/
.SELINPUT1{
	background-color: #ffffff;
	color: black;
	width:75%;
	margin-top:8px;
}
.SELINPUTBTN{
	background-color: #ffffff;
	color: black;
	width:100%;
	margin-top:25px;
}

/* 条件選択セル（紫・濃・黒）*/
.SELLABEL2{
	background-color: #a194ff;
	color: black;
	width:25%;
	margin-top:5px;
}
/* 条件選択セル（紫・淡・黒）*/
.SELINPUT2{
	background-color: #dae3f5;
	color: black;
	width:75%;
	margin-top:5px;
}
/* 条件選択セル（桃・濃・青）*/
.SELLABEL3{
	background-color: #feb5a6;
	color: blue;
}
/* 条件選択セル（桃・淡・青）*/
.SELINPUT3{
	background-color: #ffffff;
	color: blue;
	width:100%;
	margin-top:8px;
}
/* 条件選択セル（紫・濃・白）*/
.SELLABEL4{
	background-color: #a194ff;
	color: white;
}
/* 条件選択セル（紫・淡・白）*/
.SELINPUT4{
	background-color: #dae3f5;
	color: white;
}
/* 条件選択セル（桃・濃・赤）*/
.SELLABEL5{
	background-color: #feb5a6;
	color: red;
}
/* 条件選択セル（桃・淡・赤）*/
.SELINPUT5{
	background-color: #ffffff;
	color: red;
	width:100%;
	margin-top:5px;

}
/* ボタンセル（桃・淡・黒）*/
.SELINPUT6{
	background-color: #ffffff;
	color: black;
	width:75%;
    margin-top: 10px;

}
/* 条件選択セル(利用面)（桃・淡・黒）*/
.SELINPUT7{
	background-color: #ffeee1;
	color: black;
	width:75%;
	margin-top:8px;
}
/* 入力欄ラベル（桃・濃・黒）*/
.INPUTLABEL1{
	background-color: #feb5a6;
	color: black;
	width:100%;
	margin-top:8px;
	padding: 6px 8px;
}
/* 条件選択セル（紫・濃・黒）*/
.INPUTLABEL2{
	background-color: #a194ff;
	color: black;
	width:100%;
	margin-top:5px;
	padding: 6px 8px;
}
/* 条件選択セル（紫・淡・黒）*/
.INPUTINPUT2{
	background-color: #ffffff;
	color: black;
	width:100%;
	margin-top:8px;
}

/* 結果表示セル（桃・濃・黒）*/
.RESLABEL1{
	background-color: #feb5a6;
	color: black;
	width:25%;
}
/* 結果表示セル（桃・淡・黒）*/
.RESOUTPUT1-BTN{
	background-color: #ffeee1;
	color: black;
	width:75%;
	text-align:center;
}
/* 結果表示セル（桃・淡・黒）*/
.RESOUTPUT1{
	background-color: #ffeee1;
	color: black;
	width:75%;
}
/* 結果表示セル（紫・濃・黒）*/
.RESLABEL2{
	background-color: #a194ff;
	color: black;
	width:25%;
}
/* 結果表示セル（紫・淡・黒）*/
.RESOUTPUT2{
	background-color: #dae3f5;
	color: black;
	width:75%;
}
/* 結果表示セル（紫・淡・黒）*/
.RESOUTPUT2-BTN{
	background-color: #dae3f5;
	color: black;
	width:75%;
	text-align:center;
}
/* 結果表示セル（桃・淡・黒）*/
.RESOUTPUT3-BTN{
	background-color: #ffffff;
	color: black;
	width:75%;
	text-align:center;
}

.RESOUTPUT-BTN-UNDER{
	margin-top:8px;
}

/* 結果表示セル（黄・濃・黒）*/
.RESOUTPUT3{
	background-color: #ffff00;
	color: black;
}
/* 結果表示セル（桃・濃・黒）*/
.RESOUTPUT4{
	background-color: #feb5a6;
	color: black;
	width:75%;
}
/* 結果表示セル（桃・濃・黒）*/
.RESOUTPUT5{
	background-color: #a194ff;
	color: black;
	width:75%;
}
/* 結果表示セル（白・淡・黒）*/
.RESOUTPUT6-BTN{
	background-color: #ffffff;
	color: black;
	width:75%;
	text-align:center;
}
/* 空き検索結果　マージン */
.AKIKEKKA1{
	margin-top: 5px;
}
/* 空き検索結果　マージン */
.AKIKEKKALABEL{
	background-color: #a194ff;
	color: black;
	width:50px;
}

/* ガイダンステーブル */
.GUIDANCE{
	background-color: #a194ff;
	color: black;
}
/* ガイダンス・通番セル */
.GUINUM{
	background-color: #dae3f5;
	color: black;
}
/* ガイダンス・通常文字（黒） */
.GUIINFO{
	background-color: #ffffff;
	color: black;
}
/* ガイダンス・強調文字（青）*/
.GUIINFO1{
	background-color: #ffffff;
	color: blue;
}
/* ガイダンス・強調文字（赤）*/
.GUIINFO2{
	background-color: #ffffff;
	color: red;
}
/* ガイダンス・強調文字（紫）*/
.GUIINFO3{
	background-color: #ffffff;
	color: purple;
}

/* エラー表示セル（紫・濃・黒）*/
.ERRLABEL1{
	background-color: #a194ff;
	color: black;
	height: 33px;
}
/* エラー表示セル（紫・淡・黒）*/
.ERRLABEL2{
	background-color: #dae3f5;
	color: black;
}
/* エラー表示セル（紫・淡・黒）高さ指定付 */
.ERRLABEL3{
	background-color: #dae3f5;
	color: black;
	height: 33px;
}
/* エラー表示セル（紫・淡・赤）*/
.ERRLABEL4{
	background-color: #dae3f5;
	color: red;
}

/* 空きコマ一覧テーブル */
.AKITABLE{
    margin-bottom:5px;
}
/* 空きコマ一覧・月日 */
.AKIDAYS{
	color: black;
	background-color: #a194ff;
	width: 25px;
}
/* 空きコマ一覧・曜日（平日）*/
.AKIWEEKDAY{
	color: black;
	background-color: #dae3f5;
}
/* 空きコマ一覧・曜日（土曜）*/
.AKISATURDAY{
	color: blue;
	background-color: #dae3f5;
}
/* 空きコマ一覧・曜日（日祝）*/
.AKISUNDAY{
	color: red;
	background-color: #dae3f5;
}
/* 空きコマ一覧・供用名称 */
.AKIKYOYO{
	color: black;
	background-color: #dae3f5;
}
/* 空きコマ一覧・コマ数 */
.AKIKOMA{
	color: black;
	background-color: #ffffff;
}
/* 空きコマ一覧・非公開 */
.AKICLOSE{
	color: red;
	background-color: #ffffff;
}

/* カレンダー・年月*/
.CALMONTH{
	background-color: #ffffff;
    border: 1px solid #ddd;
    height:35px;
}
/* カレンダー・曜日（平日）*/
.CALWEEKDAY{
	background-color: #ffffff;
	width: 30px;
    border: 1px solid #ddd;
}
/* カレンダー・曜日（土曜）*/
.CALSATURDAY{
	background-color: #bbbbff;
	width: 30px;
    border: 1px solid #ddd;
}
/* カレンダー・曜日（日祝）*/
.CALSUNDAY{
	background-color: #ffbbbb;
	width: 30px;
    border: 1px solid #ddd;
}
/* カレンダー・年月*/
.CALENDAR{
	margin-top:5px;
}
/* カレンダー・日付*/
.CALDAY{
    height:50px;
}
.CALTABLE{
    border-spacing: 0;
    border-collapse: collapse;
}
.CALGUIDE{
    margin-top: 10px;
    margin-bottom: 10px;
}
/* 通常文字（黒） */
.INFO{
	color: black;
}
/* 強調文字（青）*/
.INFO1{
	color: blue;
}
/* 強調文字（赤）*/
.INFO2{
	color: red;
}
/* 強調文字（紫）*/
.INFO3{
	color: purple;
}
/* 強調文字（茶）*/
.INFO4{
	color: maroon;
}

/* 強調文字（青）*/
*.WORD1{
	color: blue;
}
/* 強調文字（赤）*/
*.WORD2{
	color: red;
}
/* 強調文字（紫）*/
*.WORD3{
	color: purple;
}
/* 強調文字（茶）*/
*.WORD4{
	color: maroon;
}

/* 予約内容照会　枠の高さ */
*.TD1{
	height: 33px;
	white-space: nowrap; 
}

/* 予約内容照会　枠の高さ（背景黄）*/
*.TD2{
	background-color: #ffff00;
	height: 33px;
	white-space: nowrap; 
}
/* 通知バーの表示/非表示を制御するスタイル */
        .notification-bar {
            display: flex; /* flex */
            position: sticky; /* sticky */
            top: 0; /* top-0 */
            left: 0; /* left-0 */
            width: 100%; /* w-full */
            z-index: 999; /* z-999 */
            transition: transform 0.3s ease-out; /* transition transform 0.3s ease-out */
            background-color: #dc2626; /* bg-red-600 */
            color: #fff; /* text-white */
            padding-top: 0.75rem; /* p-3 */
            padding-bottom: 0.75rem; /* p-3 */
            align-items: center; /* items-center */
            justify-content: center; /* justify-center */
        }

.notification-large {
    font-size: 14pt;
}
.notification-middle {
    font-size: 12pt;
}
.notification-small {
    font-size: 10pt;
}