@import url("https://unpkg.com/scroll-hint@latest/css/scroll-hint.css");
@import url("https://js.cybozu.com/jquerygantt/20210106/css/style.css");
@import url("https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/pepper-grinder/jquery-ui.min.css?ver=20240726-6");

/* 一覧Bar ※透明の枠線が表示されるため色設定より前に設定 */
.fn-gantt .bar {
  border-radius:10px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  cursor: default;
}
.fn-gantt .ganttTransparent, .fn-gantt .timebar{
  cursor: default !important;
}

/* 色（背景色） */
.fn-gantt .ganttTransparent {
  background-color: rgba(255,255,255,0);
  border-left:none;
  -webkit-box-shadow:none;
  -moz-box-shadow:none;
  box-shadow:none;
}
.fn-gantt .ganttGray {background-color: #A6A6A6; z-index: 5!important;}
/* 色（背景色）　部屋 */
.fn-gantt .gantt401 {background-color: #ECDC0A; z-index: 5!important;}
.fn-gantt .gantt402 {background-color: #ECDC0A; z-index: 5!important;}
.fn-gantt .gantt403 {background-color: #ECDC0A; z-index: 5!important;}
.fn-gantt .ganttGarden4 {background-color: #DFDDAD; z-index: 5!important;}
.fn-gantt .ganttLobby4 {background-color: #DFDDAD; z-index: 5!important;}
.fn-gantt .ganttHall {background-color: #FCA311; z-index: 5!important;}
.fn-gantt .ganttGarden3 {background-color: #fed797; z-index: 5!important;}
.fn-gantt .ganttLobby3 {background-color: #fed797; z-index: 5!important;}
.fn-gantt .ganttSst2 {background-color: #D90368; z-index: 5!important;}
.fn-gantt .ganttGst2 {background-color: #D90368; z-index: 5!important;}
.fn-gantt .gantt203st {background-color: #CF6596; z-index: 5!important;}
.fn-gantt .ganttLobby2 {background-color: #CF6596; z-index: 5!important;}
.fn-gantt .gantt107st {background-color: #48A9A6; z-index: 5!important;}
.fn-gantt .gantt106st {background-color: #48A9A6; z-index: 5!important;}
.fn-gantt .gantt105st {background-color: #48A9A6; z-index: 5!important;}
.fn-gantt .gantt104st {background-color: #48A9A6; z-index: 5!important;}
.fn-gantt .ganttEntrance1 {background-color: #8CA7A7; z-index: 5!important;}
.fn-gantt .ganttLobby1 {background-color: #8CA7A7; z-index: 5!important;}
.fn-gantt .ganttLHst {background-color: #122E74; z-index: 5!important;}
.fn-gantt .ganttDst {background-color: #8A90A1; z-index: 5!important;}
.fn-gantt .ganttBar {background-color: #B3133D; z-index: 5!important;}
.fn-gantt .ganttRst {background-color: #B2596F; z-index: 5!important;}
.fn-gantt .ganttLobby0 {background-color: #B2596F; z-index: 5!important;}
.fn-gantt .ganttAcoustic {background-color: #548235; z-index: 5!important;}
/* 色（背景色）　スタッフ */
.fn-gantt .ganttStaff {background-color: #A6A6A6; z-index: 5!important;}
/* 色（背景色）　エラー */
.fn-gantt .ganttError {background-color: #dc143c; z-index: 4!important;}
/* 色（背景色）　休日など */
.fn-gantt .holiday {background-color: #ffc0cb;}
.fn-gantt .ganttSunday {background-color: #ffb6c1;}
.fn-gantt .ganttSaturday {background-color: #87cefa;}
.fn-gantt .today {background-color: #fff8da;}

/* 時間bar */
.fn-gantt .oclockbar {background-color: #ddd;box-shadow:none;z-index:2!important;}
/* 部屋区切り線 */
.fn-gantt .roomSeparator {background-color: #ddd;box-shadow:none;z-index:2!important;}
/* 現在時刻bar */
.fn-gantt .timebar {background-color: #dc143c;box-shadow:none;z-index:6!important;}

/* 色（フォント色） */
.fn-gantt .ganttGray, .fn-gantt .ganttGray > div.fn-label, .fn-gantt .ganttGray > div.fn-label > a {color: #000000 !important;}
/* 色（フォント色）　部屋 */
.fn-gantt .gantt401, .fn-gantt .gantt401 > div.fn-label, .fn-gantt .gantt401 > div.fn-label > a {color: #000000 !important;}
.fn-gantt .gantt402, .fn-gantt .gantt402 > div.fn-label, .fn-gantt .gantt402 > div.fn-label > a {color: #000000 !important;}
.fn-gantt .gantt403, .fn-gantt .gantt403 > div.fn-label, .fn-gantt .gantt403 > div.fn-label > a {color: #000000 !important;}
.fn-gantt .ganttGarden4, .fn-gantt .ganttGarden4 > div.fn-label, .fn-gantt .ganttGarden4 > div.fn-label > a {color: #000000 !important;}
.fn-gantt .ganttLobby4, .fn-gantt .ganttLobby4 > div.fn-label, .fn-gantt .ganttLobby4 > div.fn-label > a {color: #000000 !important;}
.fn-gantt .ganttHall, .fn-gantt .ganttHall > div.fn-label, .fn-gantt .ganttHall > div.fn-label > a {color: #000000 !important;}
.fn-gantt .ganttGarden3, .fn-gantt .ganttGarden3 > div.fn-label, .fn-gantt .ganttGarden3 > div.fn-label > a {color: #000000 !important;}
.fn-gantt .ganttLobby3, .fn-gantt .ganttLobby3 > div.fn-label, .fn-gantt .ganttLobby3 > div.fn-label > a {color: #000000 !important;}
.fn-gantt .ganttSst2, .fn-gantt .ganttSst2 > div.fn-label, .fn-gantt .ganttSst2 > div.fn-label > a {color: #ffffff !important;}
.fn-gantt .ganttGst2, .fn-gantt .ganttGst2 > div.fn-label, .fn-gantt .ganttGst2 > div.fn-label > a {color: #ffffff !important;}
.fn-gantt .gantt203st, .fn-gantt .gantt203st > div.fn-label, .fn-gantt .gantt203st > div.fn-label > a {color: #ffffff !important;}
.fn-gantt .ganttLobby2, .fn-gantt .ganttLobby2 > div.fn-label, .fn-gantt .ganttLobby2 > div.fn-label > a {color: #ffffff !important;}
.fn-gantt .gantt107st, .fn-gantt .gantt107st > div.fn-label, .fn-gantt .gantt107st > div.fn-label > a {color: #ffffff !important;}
.fn-gantt .gantt106st, .fn-gantt .gantt106st > div.fn-label, .fn-gantt .gantt106st > div.fn-label > a {color: #ffffff !important;}
.fn-gantt .gantt105st, .fn-gantt .gantt105st > div.fn-label, .fn-gantt .gantt105st > div.fn-label > a {color: #ffffff !important;}
.fn-gantt .gantt104st, .fn-gantt .gantt104st > div.fn-label, .fn-gantt .gantt104st > div.fn-label > a {color: #ffffff !important;}
.fn-gantt .ganttEntrance1, .fn-gantt .ganttEntrance1 > div.fn-label, .fn-gantt .ganttEntrance1 > div.fn-label > a {color: #ffffff !important;}
.fn-gantt .ganttLobby1, .fn-gantt .ganttLobby1 > div.fn-label, .fn-gantt .ganttLobby1 > div.fn-label > a {color: #ffffff !important;}
.fn-gantt .ganttLHst, .fn-gantt .ganttLHst > div.fn-label, .fn-gantt .ganttLHst > div.fn-label > a {color: #ffffff !important;}
.fn-gantt .ganttDst, .fn-gantt .ganttDst > div.fn-label, .fn-gantt .ganttDst > div.fn-label > a {color: #ffffff !important;}
.fn-gantt .ganttBar, .fn-gantt .ganttBar > div.fn-label, .fn-gantt .ganttBar > div.fn-label > a {color: #ffffff !important;}
.fn-gantt .ganttRst, .fn-gantt .ganttRst > div.fn-label, .fn-gantt .ganttRst > div.fn-label > a {color: #ffffff !important;}
.fn-gantt .ganttLobby0, .fn-gantt .ganttLobby0 > div.fn-label, .fn-gantt .ganttLobby0 > div.fn-label > a {color: #ffffff !important;}
.fn-gantt .ganttAcoustic, .fn-gantt .ganttAcoustic > div.fn-label, .fn-gantt .ganttAcoustic > div.fn-label > a {color: #ffffff !important;}
/* 色（フォント色）　スタッフ */
.fn-gantt .ganttStaff, .fn-gantt .ganttStaff > div.fn-label, .fn-gantt .ganttStaff > div.fn-label > a {color: #000000 !important;}
/* 透過設定 */
.fn-gantt .opacity {opacity: 0.2;z-index: 3!important;}

/* ----------------------------------------------------- */
/* 検索など */
/* ----------------------------------------------------- */
.searchDateDisp {
  margin-top: 0px;
  height: 50px;
}
.input-date {
  height:44px; 
  font-size: 18px;
  background: #E7F1FB;
  border-radius: 10px;
}
/* 前日、翌日ボタン */
button.btn {
  padding: 0;
  border: none;
  background: transparent;
}
button.btn img {
  display: block;
  width: 44px;
  height: 44px;
  cursor: pointer;
}
button.btn--circle {
  text-align: center;
  vertical-align: middle;
}
button.btn--prev {
}
button.btn--next {
  margin-left: -110px;
}

/* ----------------------------------------------------- */
/* カレンダー */
/* ----------------------------------------------------- */
.ui-datepicker {
  z-index: 99 !important;
}
.ui-widget.ui-widget-content {
  border: solid 1px #000000 !important;
}
/* 日曜日のカラー設定 */
td.ui-datepicker-week-end:first-child a.ui-state-default,
.holidayDate a{
  background-color: #ffecec;   /* 背景色を設定 */
  color: #f00!important;       /* 文字色を設定 */
}
/* 土曜日のカラー設定 */
td.ui-datepicker-week-end:last-child a.ui-state-default{
  background-color: #eaeaff;   /* 背景色を設定 */
  color: #00f!important;       /* 文字色を設定 */
}
/* 選択日のカラー設定 */
.selectDate a{
  border: 1px solid #339933!important;
  background: #66CC99!important;   /* 背景色を設定 */
  color: #363636!important;       /* 文字色を設定 */
}
/* ホバー時の動作 */
td.ui-datepicker-week-end a.ui-state-hover{
  opacity: 0.8;
}
/* 当日を示す色はそのまま */
td.ui-datepicker-week-end a.ui-state-highlight{
  background-color: #fffa90 !important;
}
img.ui-datepicker-trigger {
  cursor: pointer;
  margin-left: 60px!important;
  margin-right: 5px!important;
  vertical-align: middle;
  width: 44px;
  height: 44px;
}

/* -------------------- */
/* ガントチャート(共通) */
/* -------------------- */
.fn-gantt {
}
.fn-gantt .dataPanel {/* 背景 */
  background-image: none;
  background: #fff!important;   /* 背景色を設定 */
}
.gaia-app-indexview-customview-html {
  position: absolute;
  width: 100%;
}

.fn-gantt .fn-content {
  background-color: #f6f6f6;
  border:solid 1px #ccc;
  /*margin-bottom: 20px;*/
}
.fn-gantt .leftPanel, .fn-gantt .bar{z-index: 0;}

/* 1列の幅調整　※jquery.fn.gantt.jsの修正必要 */
.fn-gantt .day, .fn-gantt .date {
  width: 96px;
}

/* 一覧左側　タイトル部分 */
.fn-gantt .leftPanel {
  /*width: 199px; 幅は@mediaで設定*/
  background-color: #f6f6f6;
  overflow-y: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
  /*height: 600px; ここで設定するとjs側で高さの計算がおかしくなる*/
}
.fn-gantt .leftPanel::-webkit-scrollbar {
  display:none;
}
.fn-gantt .leftPanel .row {
  border-bottom: 3px solid #DDD;
}

#left-headder {
  position: sticky;
  top: 0;
  z-index: 9;
}
.fn-gantt .leftPanel .fn-label{
  margin: 0;
}
.fn-gantt .leftPanel .name .fn-label > span{
  padding-left: 2px !important;
}
.fn-gantt .leftPanel .name {
  /*width: 13%; 幅は@mediaで設定*/
  background-color: #ffffff;
  font-weight: 100 !important;
  border-bottom: 1px solid #ffffff;
}
.fn-gantt .leftPanel .desc {
  /*width: 87%; 幅は@mediaで設定*/
  border-bottom: 1px solid #ffffff;
}
.fn-gantt .leftPanel .name .fn-label {
  width: 98%;
}
.fn-gantt .leftPanel .desc .fn-label {
  width: 100%;
}
.fn-gantt .leftPanel .fn-wide, .fn-gantt .leftPanel .fn-wide .fn-label {
  width: 100%;
}

/* 一覧Bar */
.fn-gantt .bar {
  height: 18px;
}
.fn-gantt .bar .fn-label {
  text-align: left !important;
  padding-left: 10px;
  text-shadow: none;
  font-size: 14px;
  line-height:20px;
  text-decoration: none;
  font-weight: inherit;
  cursor: default;
}
.fn-gantt .bar .fn-label > a {
  cursor: pointer;
}
.fn-gantt .bar .fn-label > a:visited {
  color: inherit;
  cursor: pointer;
}
.fn-gantt .ganttTransparent .fn-label, .fn-gantt .timebar .fn-label {
  cursor: default !important;
}
.fn-gantt .dataPanel {
  overflow-y: none;
  background-position-y: 0px;
//  -ms-overflow-style: none;
//  scrollbar-width: none;
}
.fn-gantt .dataPanel::-webkit-scrollbar {
//  display:none;
}
#right-headder {
  position: sticky;
  top: 0;
  z-index: 9;
}
.fn-gantt .day, .fn-gantt .date {
  text-shadow: none;
  font-weight: bold;
  font-size: 18px;
}
.fn-gantt .date {
  text-align: left !important;
  padding-left: 10px !important;
}
.fn-gantt .day {
  border-bottom: 3px solid #DDD;
}

/* 一覧下側　スクロール部品 */
.fn-gantt .bottom {
  display: none;
}

/* 吹き出し */
.fn-gantt-hint {
  width: 350px;
  height: 100px;
  border: 0px solid #ebe9cb;
  background-color: #ebe9cb;
  padding: 10px;
  font-size: 14px;
  font-weight: bold;
  position: absolute;
  display: none;
  z-index: 999;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: 3px 5px 5px 5px rgb(0 0 0 / 15%);
  -moz-box-shadow: 3px 5px 5px 5px rgba(0,0,0,0.15);
  box-shadow: 3px 5px 5px 5px rgb(0 0 0 / 15%);
}

.fn-gantt-hint > span.title {
  font-size: 16px;
}
.fn-gantt-hint > span.time {
  font-size: 18px;
}
.fn-gantt-hint > span.staff {
  font-size: 14px;
}

/* ----------------------------------------------------- */
/* スクロールバー */
/* ----------------------------------------------------- */
.dataPanel::-webkit-scrollbar, .rightPanel::-webkit-scrollbar {
  width: 10px;
  height: 15px;
}
.dataPanel::-webkit-scrollbar-track, .rightPanel::-webkit-scrollbar-track {
  background-color: #f6f6f6;
}
.dataPanel::-webkit-scrollbar-thumb, .rightPanel::-webkit-scrollbar-thumb {
  background: #b0c4de;
  border-radius: 5px;
}

/* ----------------------------------------------------- */
/* PC設定 */
/* ----------------------------------------------------- */
@media screen and (min-width: 1025px){
  /* ガントチャート */
  .fn-gantt .leftPanel {/* 一覧左側 */
    width: 199px;
  }
  .fn-gantt .leftPanel .spacer {/* タイトル上部 */
    width: 199px;
  }
  .fn-gantt .leftPanel .name {/* 階 */
    width: 13%;
    height: 24px;
  }
  .fn-gantt .leftPanel .desc {/* 部屋名 */
    width: 87%;
    height: 24px;
  }
  .fn-gantt .leftPanel .fn-label > span{
    padding-left: 5px;
    font-size: 15px;
  }
  .fn-gantt .row {/* 階、部屋名の背景の高さ */
    line-height: 23px;
  }
  .fn-gantt .row .date, .fn-gantt .row .day {/* 一覧日付時間ヘッダ */
    line-height: 23px;
  }
  .pc-disp-room {/* 部屋名の表示切替 */
    display: inline-block;
  }
  .sp-disp-room {/* 部屋名の表示切替 */
    display: none;
  }
  .sp-disp-floor {
    display: block;
  }
  /* 一覧右側　スクロール部品を未使用にするため、ここでスクロール表示 */
  .fn-gantt .rightPanel {
    overflow-x: scroll;
    padding-left: 1px;
    max-width: 999px;
  }
  /* 一覧下説明欄 */
  .list-explan {
    font-size:14px; 
  }
  .list-explan-title {
    display: block;
    font-size:16px; 
  }
  #calendarTitle {
    font-size:16px; 
  }
}
/* ----------------------------------------------------- */
/* タブレット設定 */
/* ----------------------------------------------------- */
@media screen and (max-width: 1024px){
  /* ガントチャート */
  .fn-gantt .leftPanel {/* 一覧左側 */
    width: 199px;
  }
  .fn-gantt .leftPanel .spacer {/* タイトル上部 */
    width: 199px;
  }
  .fn-gantt .leftPanel .name {/* 階 */
    width: 13%;
    height: 24px;
  }
  .fn-gantt .leftPanel .desc {/* 部屋名 */
    width: 87%;
    height: 24px;
  }
  .fn-gantt .leftPanel .fn-label > span{
    padding-left: 5px;
    font-size: 15px;
  }
  .fn-gantt .row {/* 階、部屋名の背景の高さ */
    line-height: 23px;
  }
  .fn-gantt .row .date, .fn-gantt .row .day {/* 一覧日付時間ヘッダ */
    line-height: 23px;
  }
  .pc-disp-room {/* 部屋名の表示切替 */
    display: inline-block;
  }
  .sp-disp-room {/* 部屋名の表示切替 */
    display: none;
  }
  .sp-disp-floor {
    display: block;
  }
  /* 一覧右側 */
  .fn-gantt .rightPanel {
    margin: 0 auto;
    padding: 0;
    overflow-x: auto;  /* 横スクロールの指定 */
    white-space: nowrap;  /* 横スクロールの指定 */
    overflow-scrolling: touch;  /* スクロールを滑らかにする */
    -webkit-overflow-scrolling: touch;  /* スクロールを滑らかにする */
  }
  /* 一覧下説明欄 */
  .list-explan {
    font-size:14px; 
  }
  .list-explan-title {
    display: block;
    font-size:16px; 
  }
  #calendarTitle {
    font-size:16px; 
  }
}
/* ----------------------------------------------------- */
/* スマホ設定 */
/* ----------------------------------------------------- */
@media screen and (max-width: 768px){
  /* ガントチャート */
  .fn-gantt .leftPanel {/* 一覧左側 */
    width: 40px;
  }
  .fn-gantt .leftPanel .spacer {/* タイトル上部 */
    width: 40px;
  }
  .fn-gantt .leftPanel .name {/* 階 */
    width: 0%;
    height: 24px;
  }
  .fn-gantt .leftPanel .desc {/* 部屋名 */
    width: 100%;
    height: 24px;
  }
  .fn-gantt .leftPanel .fn-label > span{
    padding-left: 2px;
    font-size: 17px;
  }
  .fn-gantt .row {/* 階、部屋名の背景の高さ */
    line-height: 23px;
  }
  .fn-gantt .row .date, .fn-gantt .row .day {/* 一覧日付時間ヘッダ */
    line-height: 23px;
  }
  .pc-disp-room {/* 部屋名の表示切替 */
    display: none;
  }
  .sp-disp-room {/* 部屋名の表示切替 */
    display: inline-block;
  }
  .sp-disp-floor {/* 階の列非表示 */
    display: none;
  }
  /* 一覧右側 */
  .fn-gantt .rightPanel {
    margin: 0 auto;
    padding: 0;
    overflow-x: auto;  /* 横スクロールの指定 */
    white-space: nowrap;  /* 横スクロールの指定 */
    overflow-scrolling: touch;  /* スクロールを滑らかにする */
    -webkit-overflow-scrolling: touch;  /* スクロールを滑らかにする */
  }
  /* 一覧下説明欄 */
  .list-explan {
    font-size:14px; 
  }
  .list-explan-title {
    display: block;
    font-size:14px; 
  }
  #calendarTitle {
    font-size:12px; 
  }
}
/* ----------------------------------------------------- */
/* スクロールヒント設定 */
/* ----------------------------------------------------- */
.scroll-hint-icon-wrap.is-active .scroll-hint-icon {z-index: 98;}
.scroll-hint-text{ margin-top:0; }

/* ----------------------------------------------------- */
/* ローディング設定 */
/* ----------------------------------------------------- */
#loading {
  position: relative;
  z-index: 9999;
  width: 100%;
  height: 100%;
  background: #999;
  opacity: 0.3;
}
#loading_box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50%;
  text-align: center;
}
.loading-one {
  display: inline-block;
  border-top: 2px solid #000000;
  border-bottom: 2px solid #000000;
}
.loading-one p.loading-txt {
  color: #000000;
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 0.25em;
  line-height: 2.0;
  padding: 0;
}
.animation_loading {
  animation: equalizer_loading 7000ms infinite;
  animation-iteration-count: 10;
}
@keyframes equalizer_loading {
  0% {
    width: 70%;
  }
  10% {
    width: 100%;
  }
  20% {
    width: 70%;
  }
  30% {
    width: 100%;
  }
  40% {
    width: 70%;
  }
  50% {
    width: 100%;
  }
  60% {
    width: 70%;
  }
  70% {
    width: 100%;
  }
  80% {
    width: 70%;
  }
  90% {
    width: 100%;
  }
  100% {
    width: 70%;
  }
}