body {
  background    : #000033;
  color         : #ffffff;
  margin-left   : auto;
  margin-right  : auto;
}

body.shift {
  background    : #000033;
  color         : #ffffff;
  min-height    : 100vh;
  flex-flow     : column;
  display:flex;
  margin :0 auto;
}

header{
  width: 100%;
  text-align    : center;
  background    : #000033;
}


p{
  font-size     : 14px;
}

h1{
  font-size  :20px;
  line-height   :1px;
  color         :#ffffff;
}

ul{
  display         : inline-block;
}

a{
  cursor          : pointer;
  font-size     : 14px;
}

a:link {
  color         : #ffffff;
}
a:visited {
  color         : #ffffff;
}
a:hover {
  color         : orange;
}

a.kaisetu:link {
  color         : #000000;
}
a.kaisetu:visited {
  color         : #000000;
}
a.kaisetu:hover {
  color         : orange;
}

form{
  text-align    : center;
}
/*横並び*/
.respo_max{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
}

/*レスポンシブメニュー*/
.respo_pc{
  display         : inline-block;
}
.respo_phone{
  display         : none;
}
/*ボックス*/
.menubox{
  margin:0 auto;
  background-color: #0033ff;
  max-width :400px;
  padding :10px 10px;
  border-radius : 10px;
  border        : 2px solid #ffffff;
}

.menubox_s{
  margin:0 auto;
  color : #000000;
  background-color: #FFFFCC;
  max-width :250px;
  padding :6px 6px;
  border-radius : 6px;
  border        : 2px solid #ffffff;
}

.group{
  margin:0 auto;
  padding :10px;
  width :70%;
  background-color: #0033ff;
  border-radius : 5%;
  border        : 2px solid #ffffff;
}

.lot_panel{
  max-width: 400px;
  margin:0 auto;
  color         : #000000;
  background-color: #ffffcc;
  min-width: 310px;
  border-radius : 25px;
  border        : 5px solid #808000;    /* 枠の指定 */
  box-shadow      : 3px 3px 3px #666666;
}

.profile{
max-width       : 600px;
width           : 80%;
border-radius   : 10px;
background-color: #ffffff;
display         : inline-block;
padding         : 10px;
color           : #000000;
text-align      : left;
}

.SAP_window{
max-width       : 600px;
width           : 80%;
border-radius   : 10px;
background-color: #ffffff;
display         : inline-block;
padding         : 10px;
color           : #000000;
text-align      : left;
}

.Explanation{
max-width: 440px;
margin  :0 auto;
border-radius : 15px;
background-color: #ffffff;
display         :block;
padding         : 8px;
color           : #000000;
text-align    : center;
}

.Explanation_m{
max-width: 440px;
border-radius : 10px;
background-color: #ffffff;
display         :block;
padding         : 8px;
color           : #000000;
}

.lottery_popupwindow{
  position: absolute;
  left:10vh;
  top: 1vh;
  z-index: 3;
  color           : #ffffff;
  margin:0 auto;
  padding :10px;
  width :70%;
  background-color: #0033ff;
  border-radius : 15px;
  border        : 2px solid #ffffff;
  box-shadow    : 4px 4px 4px #000000;  /* 影の設定 */
}

/*ヘッダー*/
.menuheder{
  text-align    : center;
  position      : fixed;
  border-bottom : solid;
  z-index: 3;
  box-shadow    : 2px 3px 2px #333333;   /* 影の設定 */
}
/*
.menuheder{
  text-align    : center;
  width :100%;
  margin:0 auto;
  border-bottom : solid;
  box-shadow    : 2px 3px 2px #333333;
}
*/

/*本文ベース*/
.content_shift{
  width :98%;
  text-align    : center;
  padding-top   : 100px;
  overflow      : hidden;
  margin        : 0 auto;
}
.content_lottery{
  width :100%;
  display :block;
  text-align    : center;
  padding-top   : 400px;
  overflow      : hidden;/* これしないとフッター突き抜ける */
}
.content{
  width :100%;
  display :block;
  text-align    : center;
  padding-top   : 90px;
  overflow      : hidden;/* これしないとフッター突き抜ける */
}

.mail_content{
  width :100%;
  display :inline-block;
  text-align    : left;
  padding-top   : 90px;
  overflow      : hidden;/* これしないとフッター突き抜ける */
}

.Annotation{
  font-size     : 8px;
}
.aggregate{
  width         : 20px;
}

/*popupウインドウ*/

.a1_hide,.a2_hide,.a3_hide,.a4_hide{
  position        :absolute;
  color:#000000;
  font-size:18px;
  text-align    : center;
  background-color:#ffffff;
  padding :5px 10px;
  border-radius : 15px;
  border        : 3px solid #ff6600;
  display         : none;
}

.a1_per:hover~.a1_hide,.a2_per:hover~.a2_hide,
.a3_per:hover~.a3_hide,.a4_per:hover~.a4_hide{
  display         : block;
  animation-name : fade-in,move_down;
  animation-duration : 1s;
  transform       :translate(-30px,-110px);/*固定場所　すこし下げる　ズシンという感じ*/
}

@keyframes move_down{
  0%{
    transform       :translate(-30px,-500px);/*出現場所*/
  }
  50%{
    transform :translate(-30px,-250px) rotate(30deg);
  }
  80%{
    transform       :translate(-30px,-108px);/*移動完了*/
  }
  90%{
    transform       :translate(-30px,-110px);/*移動完了*/
  }
  100%{
    transform       :translate(-30px,-108px);/*移動完了*/
  }
}
/*hoverコメント　アニメセット*/

.f1_hide,.f2_hide,.f3_hide,.f4_hide,.f5_hide,.f6_hide,.f7_hide,.f8_hide{
  position        :absolute;
  color:#000000;
  font-size:13px;
  background-color:#ffffff;
  padding :5px;
  border-radius : 5px;
  border        : 1px solid red;
  display         : none;
}

.f1_per:hover~.f1_hide,.f2_per:hover~.f2_hide,
.f3_per:hover~.f3_hide,.f4_per:hover~.f4_hide,
.f5_per:hover~.f5_hide,.f6_per:hover~.f6_hide,
.f7_per:hover~.f7_hide,.f8_per:hover~.f8_hide{
  display         : block;
  animation-name : fade-in,move_window;
  animation-duration : 1s;
  transform       :translate(-10px,-93px);/*固定場所　すこし下げる　ズシンという感じ*/
}

@keyframes fade-in {
      0% {
        opacity: 0;
      }
    100% {
        opacity: 1;
    }
}

@keyframes fade-out {
      0% {
        opacity: 1;
      }
    100% {
        opacity: 0;
    }
}

@keyframes move_window{
  0%{
    transform       :translate(-200px,-40px);/*出現場所*/
  }
  50%{
    transform       :translate(-200px,-95px);/*出現場所*/
  }
  100%{
    transform       :translate(-10px,-95px);/*移動完了*/
  }
}
/*メイン要素*/
.up_margin_0{
  margin:0;
}
.error_red{
  color         : red;
}
.maintitle{
  padding-top   : 50px;
}
.mail_text{
  font-size: 14px;
}
.s_title{
  /*background-color: #ffff00;*/
  font-size     : 1.2em;
  color         : #000000;
  font-weight   : bolder;
  /*border        : 1px solid red;    枠の指定 */
}
/*集計時のあたり表示*/
.hitnumber_red{
  /*background-color: #ffff00;
  font-size     : 8px;*/
  color         : red;
  font-weight   : bolder;
  border        : 1px solid red;    /* 枠の指定 */
}
.admin_color{
  background-color:#006666;
  border-radius : 30px;
}

.same_at{
  font-size:8px;
}

.at_orange{
  color         : orange;
  font-weight   : bolder;
}

.attension{
  margin        : 0 auto;
  display       : block;
  font-size     : 8px;
  text-align    : center;
}

.imagesize{
  width         : 70vw;
  height        : auto;
  max-width: 500px;
}

.imagesize_sub{
  font-size     : 14px;
  width         : 60vw;
  height        : auto;
  max-width: 400px;
  background-color: #000033;
}
.imagesize_sub:hover{
  background-color: #99ffff;
  box-shadow:
    inset 0 0 10px #000033,
    inset 0 0 10px #000033,
    inset 0 0 10px #000033,
    inset 0 0 10px #000033;
}

.center{
  width: 500px;
  margin:0 auto;
  text-align    : center;
}

.left_text{
  /*display:inline-block;*/
  margin:0 auto;
  text-align    : left;
}

/*　tableの　要素配置用　*/
.down_t{
  vertical-align: bottom; /*下寄せ　インライン要素、テーブル要素のみ*/
}
.up_t{
  vertical-align: top; /*上寄せ　インライン要素、テーブル要素のみ*/
}
.h_mod_t{
  vertical-align: middle;/*縦位置の中央そろえ*/
}
.sukima_L{
  background    : transparent;
  text-align    : left;
  font-size     : 10pt;
  color         : #ffffff;
}

.sukima_R{
  background    : transparent;
  text-align    : right;
  font-size     : 10pt;
  color         : #ffffff;
}

.sukima{
  background    : transparent;
  text-align    : center;
  font-size     : 10px;
  color         : #ffffff;
}

.sukima_l{
  background    : transparent;
  text-align    : center;
  font-size     : 11pt;
  color         : #000033;
}

.sukima_col_wide{
  width         : 40vw;
  max-width     : 300px;
  background    : transparent;
  text-align    : center;
  font-size     : 10px;
  color         : #ffffff;
}

.sukima_row_wide{
  background    : transparent;
  height:20px;
}

.sukima_row{
  background    : transparent;
  height:6px;
}

.sukima_red{
  background    : transparent;
  text-align    : center;
  font-size     : 10pt;
  color         : red;
}

.sukima_left_red{
  background    : transparent;
  text-align    : left;
  font-size     : 10pt;
  font-weight   : bold;
  color         : #cc6633;
}

.sukima_right{
  background    : transparent;
  text-align    : right;
  font-size     : 10pt;
  color         : #ffffff;
}

.sukima_left{
  background    : transparent;
  text-align    : left;
  font-size     : 10pt;
  color         : #ffffff;
}

.sukima_up_right{
  background    : transparent;
  text-align    : right;
  vertical-align: top;
  font-size     : 10pt;
  color         : #ffffff;
}

.sukima_up_left{
  background    : transparent;
  vertical-align: top;
  text-align    : left;
  font-size     : 10pt;
  color         : #ffffff;
}

.sukima_left_s{
  background    : transparent;
  text-align    : left;
  font-size     : 10px;
  color         : #ffffff;
}

.sukima_right_s{
  background    : transparent;
  text-align    : right;
  font-size     : 9px;
  color         : #ffffff;
}

.sukimared_right_s{
  background    : transparent;
  text-align    : right;
  font-size     : 9px;
  color         : red;
}

.sukima_right_l{
  width         :120px;
  background    : transparent;
  font-size     : 11pt;
  text-align    : right;
  color         : #000033;
}

.sukima_left_l{
  background    : transparent;
  text-align    : left;
  font-size     : 8pt;
  color         : #000033;
}

.sukima_left_contents{
  border-radius : 5px;
  max-width     : 450px;
  width         : 90vw;
  text-align    : left;
  font-size     : 9pt;
  box-shadow    : 2px 3px 2px #666666;   /* 影の設定 */
}

.sukima_left_year{
  width         : 120px;
  background    : transparent;
  text-align    : left;
  font-size     : 10pt;
  color         : #ffffff;
}

.sukima_left_big{
  background    : transparent;
  text-align    : left;
  font-weight   : bold;
  font-size     : 12px;
  color         : #ffff00;
}

.sukima_title{
  background    : transparent;
  text-align    : center;
  line-height   :1em;
  vertical-align: bottom;
  font-size     : 20pt;
  color         : #ffffff;
}

.sukima_margin{
  background    : transparent;
  width         : 30px;
}

.sukima_subtitle{
  background    : transparent;
  text-align    : center;
  line-height   :1em;
  vertical-align: bottom;
  font-size     : 15pt;
  color         : #ffffff;
}

.sukima_ruby{
  background    : transparent;
  text-align    : center;
  vertical-align:top;
  font-size     : 5pt;
  color         : #ffffff;
}

table{
  margin-left:auto;
  margin-right: auto;
  border        : 1px;
}

th,td{
  min-width     : 15px;
  text-align    : center;
  font-size     : 12px;
}
th {
  background    : #FF9900;
}
td {
  background    : #ffffff;
  color         : #000000;
}

th {
  background    : #FF6347;
}
td {
  background    : #FFFFEE;
  color         : #000000;
}

thead,tbody.add{
  display       : block;
}
tbody.add{
  overflow-x    : hidden;
  overflow-y    : scroll;
  height        : 150px;
}

td.number{
  text-align    : right;
  background    : #FFFFEE;
  color         : #000000;
}
/*DB　form用*/
table.white{
  background-color: #ffffff;
}

table.white_s{
  max-width:700px;
  margin:0 auto;
  display       :block;
  overflow-x    : scroll;
  width :95%;
  background-color: #ffffff;
  border          :1px #000000 solid;
}

td.shift{
  background-color: #00ff3b;
}

th.shift{
  font-size : 10px;
  background-color: #333333;
  color           : #FFFFFF;
}

input.shift{
  width: 100px;
}
/*シフト用*/
input.shift_AP{
  font-size     : 8px;
  width: 50px;
}
input.per_hour{
  font-size     : 8px;
  width: 40px;
}
/*シフト用ここまで*/

input.number30{
  width: 30px;
  font-size: 11px;
}
input.number50{
  width: 50px;
  font-size: 11px;
}
input.date120{
  width: 120px;
  font-size: 11px;
}
input.add{
  width: 100px;
}

input.add_s{
  width: 150px;
}

/*チェックボックス　image/robo_on.png*/

.robo_on{
  display    : none;        /* カーソル時の影消去 */
}

.robo_on,.robo_off{
cursor          : pointer;
}

#all_con:checked~.robo_off,#cnsd0:checked~.robo_off,
#cnsd1:checked~.robo_off,#cnsd2:checked~.robo_off,
#cnsd3:checked~.robo_off,#cnsd4:checked~.robo_off,
#cnsd5:checked~.robo_off,#cnsd6:checked~.robo_off,
#cnsd7:checked~.robo_off,#cnsd8:checked~.robo_off,
#cnsd9:checked~.robo_off,#cnsd10:checked~.robo_off,
#cnsd11:checked~.robo_off{
  display    : none;
}
#all_con:checked~.robo_on,#cnsd0:checked~.robo_on,
#cnsd1:checked~.robo_on,#cnsd2:checked~.robo_on,
#cnsd3:checked~.robo_on,#cnsd4:checked~.robo_on,
#cnsd5:checked~.robo_on,#cnsd6:checked~.robo_on,
#cnsd7:checked~.robo_on,#cnsd8:checked~.robo_on,
#cnsd9:checked~.robo_on,#cnsd10:checked~.robo_on,
#cnsd11:checked~.robo_on{
  display       : inline-block;
}

/*ボタン*/

.menubutton {
  margin:5px;
  display       : block;
  border-radius : 5px;          /* 角丸       */
  font-size     : 9pt;        /* 文字サイズ */
  text-align    : center;      /* 文字位置   */
  cursor        : pointer;     /* カーソル   */
  padding       : 10px 10px;   /* 余白       */
  background    : #0066FF;     /* 背景色     */
  color         : #ffffff;     /* 文字色     */
  line-height   : 0.7em;         /* 1行の高さ  */
  transition    : .3s;         /* なめらか変化 */
  border        : 2px solid #003399;    /* 枠の指定 */
}
.menubutton:hover {
  color         : #000033;     /* 文字色     */
  background    : #99FFFF;     /* 背景色     */
  border        : 2px solid #00ffff;    /* 枠の指定 */
}

.m_menubutton {
  margin:5px;
  width         : 220px;
  display       : block;
  border-radius : 5px;          /* 角丸       */
  font-size     : 9pt;        /* 文字サイズ */
  text-align    : center;      /* 文字位置   */
  cursor        : pointer;     /* カーソル   */
  padding       : 10px 10px;   /* 余白       */
  background    : #0066FF;     /* 背景色     */
  color         : #ffffff;     /* 文字色     */
  line-height   : 0.7em;         /* 1行の高さ  */
  transition    : .3s;         /* なめらか変化 */
  border        : 2px solid #003399;    /* 枠の指定 */
}
.m_menubutton:hover {
  color         : #000033;     /* 文字色     */
  background    : #99FFFF;     /* 背景色     */
  border        : 2px solid #00ffff;    /* 枠の指定 */
}
.menubtn_g {
  display       : inline-block;
  border-radius : 30%;          /* 角丸       */
  font-size     : 9pt;        /* 文字サイズ */
  text-align    : center;      /* 文字位置   */
  cursor        : pointer;     /* カーソル   */
  padding       : 10px 10px;   /* 余白       */
  background    : #009900;     /* 背景色     */
  color         : #ffffff;     /* 文字色     */
  line-height   : 0.7em;         /* 1行の高さ  */
  transition    : .3s;         /* なめらか変化 */
  border        : 2px solid #003300;    /* 枠の指定 */
}
.menubtn_g:hover {
  color         : #003300;     /* 文字色     */
  background    : #99FF33;     /* 背景色     */
  border        : 2px solid #99ff99;    /* 枠の指定 */
}
.lotobutton {
  margin:5px;
  display       : block;
  border-radius : 5px;          /* 角丸       */
  font-size     : 9pt;        /* 文字サイズ */
  text-align    : center;      /* 文字位置   */
  cursor        : pointer;     /* カーソル   */
  padding       : 10px 10px;   /* 余白       */
  background    : #999900;     /* 背景色     */
  color         : #ffffff;     /* 文字色     */
  line-height   : 0.7em;         /* 1行の高さ  */
  transition    : .3s;         /* なめらか変化 */
  border        : 2px solid #666600;    /* 枠の指定 */
}
.lotobutton:hover {
  color         : #666600;     /* 文字色     */
  background    : #cccc99;     /* 背景色     */
  border        : 2px solid #cccc99;    /* 枠の指定 */
}

.smplebutton {
  margin        : 5px;
  display       : inline-block;
  border-radius : 3px;          /* 角丸       */
  font-size     : 9pt;        /* 文字サイズ */
  text-align    : center;      /* 文字位置   */
  cursor        : pointer;     /* カーソル   */
  background    : #666666;     /* 背景色     */
  color         : #ffffff;     /* 文字色     */
  padding       : 5px 5px;   /* 余白       */
  line-height   : 0.7em;         /* 1行の高さ  */
  transition    : .3s;         /* なめらか変化 */
  box-shadow    : 3px 3px 2px #666666;  /* 影の設定 */
}
.smplebutton:hover {
  box-shadow    : none;        /* カーソル時の影消去 */
  color         : #000000;     /* 文字色     */
  background    : #DDDDDD;     /* 背景色     */
}

.normal_button {
  display       : inline-block;
  border-radius : 30%;          /* 角丸       */
  font-size     : 9px;        /* 文字サイズ */
  text-align    : center;      /* 文字位置   */
  cursor        : pointer;     /* カーソル   */
  padding       : 5px 5px;   /* 余白       */
  background    : #aaaaaa;     /* 背景色     */
  border        : 2px solid #999999;    /* 枠の指定 */
  line-height   : 0.7em;         /* 1行の高さ  */
  transition    : .3s;         /* なめらか変化 */
  box-shadow    : 2px 2px 2px #666666;  /* 影の設定 */
}
.normal_button:hover {
  border        : 2px solid #dddddd;    /* 枠の指定 */
  background    : #dddddd;     /* 背景色     */
  color         : #333333;     /* 文字色     */
  box-shadow    : none;        /* カーソル時の影消去 */
}
.normal_button_red {
  display       : inline-block;
  border-radius : 30%;          /* 角丸       */
  font-size     : 9px;        /* 文字サイズ */
  color         : #ffffff;     /* 文字色     */
  text-align    : center;      /* 文字位置   */
  cursor        : pointer;     /* カーソル   */
  padding       : 5px 5px;   /* 余白       */
  background    : #cc0033;     /* 背景色     */
  border        : 2px solid #990000;    /* 枠の指定 */
  line-height   : 0.7em;         /* 1行の高さ  */
  transition    : .3s;         /* なめらか変化 */
  box-shadow    : 2px 2px 2px #333333;  /* 影の設定 */
}
.normal_button_red:hover {
  border        : 2px solid #ff9999;    /* 枠の指定 */
  background    : #ff9966;     /* 背景色     */
  color         : #220000;     /* 文字色     */
  box-shadow    : none;        /* カーソル時の影消去 */
}

.button {
  display       : inline-block;
  border-radius : 5%;          /* 角丸       */
  font-size     : 10pt;        /* 文字サイズ */
  text-align    : center;      /* 文字位置   */
  cursor        : pointer;     /* カーソル   */
  padding       : 10px 10px;   /* 余白       */
  background    : #990000;     /* 背景色     */
  color         : #ffffff;     /* 文字色     */
  line-height   : 0.7em;         /* 1行の高さ  */
  transition    : .3s;         /* なめらか変化 */
  box-shadow    : 2px 2px 2px #666666;  /* 影の設定 */
  border        : 2px solid #660000;    /* 枠の指定 */
}
.button:hover {
  box-shadow    : none;        /* カーソル時の影消去 */
  color         : #000000;     /* 文字色     */
  background    : #ff3366;     /* 背景色     */
  border        : 2px solid #ff6666;    /* 枠の指定 */
}

.shift_samplebutton {
  display       : inline-block;
  background-color: ButtonFace;
  color         : #000000;     /* 文字色     */
  border-radius : 5px;          /* 角丸       */
  font-size     : 9pt;        /* 文字サイズ */
  text-align    : center;      /* 文字位置   */
  cursor        : pointer;     /* カーソル   */
  padding       : 5px 5px;   /* 余白       */
  line-height   : 0.7em;         /* 1行の高さ  */
  border        : 1px solid #000066;    /* 枠の指定 */
  transition    : .3s;         /* なめらか変化 */
  box-shadow    : 3px 3px 2px #666666;  /* 影の設定 */
}
.shift_samplebutton:hover {
  box-shadow    : none;        /* カーソル時の影消去 */
}

.hide {
  display:none;
  transition    : .5s;         /* なめらか変化 */
  animation-name : fade-out;
  animation-duration : 1s;
}

.show {
  display:block;
  transition    : .5s;         /* なめらか変化 */
  animation-name : fade-in;
  animation-duration : .8s;
}

footer{
  justify-content: space-between;
  background-color: #808000;
  color: #ffffff;
  height:60px;
  text-align    : center;
}

/*------ロボ移動処理--------*/

/*スプライト処理*/
.box{
  margin: 0 auto;
}

.robo_sp{
animation-name    : robo_sprite;
animation-duration: 10s;
animation-timing-function: steps(41);
animation-iteration-count: infinite;
}

@keyframes robo_sprite {
  100%{
    transform: translate(-2050px,0);
  }
}

/*移動処理*/
.robo_move{
  position          :absolute;
/*top:35vh;
  left:35vw;*/
  overflow          : hidden;
  width             : 50px;
  height            : 50px;
  /*移動用*/
  animation-name    : robo_x;
  animation-duration: 10s;
  animation-timing-function: linear;;/*タイミング*/
  animation-iteration-count: infinite;
}


@keyframes robo_x{
    0%{
    left :15%;
  }
  41%{
    left:75%;
  }
   50%{
    left :75%;
  }
  91%{
    left:15%;
  }
  100%{
    left :15%;
  }
}
/*========================== Shiftページ　用==================================*/
.sheet_title{
  font-size: 17px;
  font-weight: bolder;
  line-height   :1px;
}
.red{
  color         : red;
  background-color: #ffcc00;
  font-weight   : bolder;
  font-size     : 12px;
}
.leftset{
  float         : left;
}
.subheading{
  font-weight   : bolder;
  text-decoration: underline;
}
.pr{
  font-size     : 12px;
}
.pr_tl{
  background-color: #ffcc00;
  font-weight   : bolder;
  font-size     : 12px;
}

.main{
  margin :10px;
}
.side{
  margin :10px;
}
.shift_group{
  font-size: 14px;
  max-width: 300px;
  padding:5px;
  background-color: #0033ff;
  border-radius : 10px;
  border        : 2px solid #ffffff;    /* 枠の指定 */
}
.shift_group2{
  font-size: 14px;
  max-width: 400px;
  margin :0 auto;
  background-color: #0033ff;
  border-radius : 10px;
  border        : 2px solid #ffffff;    /* 枠の指定 */
}
.n_font{
  font-size :14px;
}
.pc_window{
  display:block;
}
.phone_window{
  display:none;
}
/*入力フォーマットのヘッダー固定*/
.p_spread{
  max-width:670px;
  width:90%;
  max-height:350px;
  margin:0 auto;
  display       :block;
  overflow-x    : scroll;
  overflow-y    : scroll;
}
.key_cell{
  position      : sticky;
  left:0;
  top:0;
  z-index: 2;
}
.left_header{
  position      : sticky;
  left:0;
  z-index:1;
}
.top_header{
  position      : sticky;
  top:0;
}
.top_header2{
  position      : sticky;
  top:1.2rem;
}
.top_header3{
  position      : sticky;
  top:2.4rem;
}
.ta_name{
  font-size     : 8px;
  width: 58px;
}
.ta_perhour{
  font-size     : 8px;
  width:48px;
}

.ta_shift{
  font-size     : 8px;
  width:36px;
}
.ta_time{
  font-size     : 8px;
  width:32px;
}
.ta_css_p{
line-height   : 2px;
font-size     : 12px;
}
.ta_time_val{
  font-size     : 6px;
  border:1px;
}
/*header固定ここまで*/

.sb_dummy{
  border-radius   : 5%;
  border          :1px #000000 solid;
  background-color: ButtonFace;
  box-shadow      : 1px 1px 1px #666666;
}
.b_dummy{
  border-radius   : 5%;
  border          :1px #660000 solid;
  color           : #ffffff;
  background-color: #990000;
  box-shadow      : 1px 1px 1px #666666;
}

/* 　========シフト表の表記========　　*/

.shift1 {
  width         : 20px;
  background    : #333333;
}
.shift2{
  width :25px;
  background    : #333333;
}
.ss_font{
  font-size :8px;
}
.shift1,.shift2 {
   font-size :11px;
 }
.red1,.blue1,.green1,.yellow1,.purple1{
  font-size :11px;
}
.red2,.blue2,.green2,.yellow2,.purple2{
  font-size :11px;
}
.shift_popup_parent{
  position :relative;
}
.shift_popup{
  position: absolute;
  background    : transparent;
  font-size: 6px;
  width :25px;
  color : #000000;
  top:3px;
  left:0px;
}


.red1{
  background-color: #FF3333;
}
.blue1{
  background-color: #0000FF;
  color           : #ffffff;
}
.green1{
  background-color: #008000;
  color           : #ffffff;
}
.yellow1{
  background-color: #FFFF00;
}
.purple1{
  background-color: #800080;
  color           : #ffffff;
}
.red2{
  background-color: #FF0066;
}
.blue2{
  background-color: #3399FF;
}
.green2{
  background-color: #00cc66;
}
.yellow2{
  background-color: #FF9933;
}
.purple2{
  background-color: #663399;
  color           : #ffffff;
}


.kaisetu_left{
  background    : transparent;
  text-align    : left;
  font-size     : 12px;
  color         : #000000;
}

.box_parent{
  position : relative;
}

.window_1{
  position: absolute;
  left:20vh;
  top: 30vh;
  z-index: 3;
}

.window_2{
  position: absolute;
  margin-left: 50%;
  margin-top: -10vh;
  transform:translate(-50%,-50%);
  z-index: 3;
}

.dialog {
width: 90%;
max-width: 600px;
border-radius : 10px;
padding: 10px 10px;
text-align: center;
background-color:rgb(255,255,255,0.9);
border: 1px solid #aaa;
box-shadow: 2px 2px 4px #888;
color : #000000;
}

/*▼▼▼▼▼▼▼▼説明ウインドウ操作▼▼▼▼▼▼▼▼*/
.window_parent{
  position       :relative;
}

.window1_switch,.window2_switch,
.window3_switch,.window4_switch,
.window5_switch,.window6_switch
{
  cursor: pointer;
}

.window1_switch:hover~.window1,.window2_switch:hover~.window2,
.window3_switch:hover~.window3,.window4_switch:hover~.window4,
.window5_switch:hover~.window5,.window6_switch:hover~.window6
{
  display:block;
  animation-name: faid-in;
  animation-duration: .8S;
}

.window1,.window2,.window3,.window4,.window5,.window6{
  position        :absolute;
  top             :20px;
  left            :0px;
  max-width       :400px;
  color:#000000;
  display         :none;
  border-radius   : 10px;
  padding         : 5px;
  text-align      : left;
  background-color:rgb(255,255,255,0.9);
  border          : 2px solid red;
  box-shadow      : 2px 2px 4px #333333;
  z-index: 4;
}

/*========================== Shiftページ　ここまで=============================*/
@media only screen and (max-width:810px){
  p{
    font-size      : 11px;
  }

    .shift_group{
      font-size: 14px;
      max-width: 450px;
      margin :0 auto;
    }
    .window_1{
      position: absolute;
      left:10px;
      top: 40vh;
      z-index: 3;
    }

    #dialog3 {
    position: absolute;
    margin :0 auto;
    top:-10vh;
    left: -10vw;
    *transform:translate(-50%,-50%);
    z-index: 3;

    width: 600px;
    border-radius : 10%;
    padding: 2px 2px;
    display: none;
    text-align: center;
    background    : #ffffff;
    border: 1px solid #aaa;
    box-shadow: 2px 2px 4px #888;
    color : #000000;
    }
/* レスポンシブ用　*/
@media only screen and (max-width:600px){
  body {
    background    : #000055;
    color         : #ffffff;
    margin-left   : auto;
    margin-right  : auto;
  }
  header{
    width: 100%;
    text-align    : center;
    background    : #000055;
    z-index: 4;
  }
  footer{
    justify-content: space-between;
    background-color: #808000;
    color: #ffffff;
    height:130px;
    text-align    : center;
  }
  /*レスポンシブメニュー*/
  .respo_pc{
    display         : none;
  }
  .respo_phone{
    display         : inline-block;
  }
  .imagesize_sub{
    font-size     : 12px;
    background-color: #000055;
  }
  .imagesize_sub:hover{
    width         : 60vw;
    height        : auto;
    background-color: #99ffff;
    box-shadow:
      inset 0 0 10px #000055,
      inset 0 0 10px #000055,
      inset 0 0 10px #000055,
      inset 0 0 10px #000055;
    max-width: 400px;
  }

  .center{
    width: 400px;
    margin:0 auto;
    text-align    : center;
  }
  .content{
      padding-top :140px;
  }
.content_lottery{
  padding-top   : 430px;

}
.pc_window{
  display:none;
}
.phone_window{
  display:block;
}
.Explanation{
  width:320px;
  font-size :9px;
}
 p{
   font-size      : 8px;
 }

 .left_text{
   font-size      : 13px;
 }
 .same_at{
   font-size:8px;
 }
 .group{
   padding :10px;
   width :70%;
 }
 h1{
   font-size  :20px;
 }
 .ss_font,.red1,.blue1,.green1,.yellow1,.purple1{
   font-size :6px;
 }
 .red2,.blue2,.green2,.yellow2,.purple2{
   font-size :6px;
 }
 .p_spread{
   width:90%;
   max-height:300px;
   margin-left: auto;
   margin-right: auto;
   display       : block;
   overflow-x    : scroll;
   overflow-y    : scroll;
 }
 .main{
    width: 100%;
    float:none;
    padding-left   : 0px;
 }
 .side{
    width: 100%;
    float:none;
    padding-left   : 0px;
    padding-right   : 0px;
 }
 .small_text{
   font-size :8px;
 }
.Annotation{
    font-size      : 6px;
}
.aggregate{
    width         : 10px;
}
.shift_group{
    font-size: 8px;
    max-width: 320px;
}
.shift_group2{
   font-size: 8px;
   max-width: 320px;
}
.window_1{
  position: absolute;
  left:10px;
  top: 40vh;
  z-index: 3;
}
.shift1,.shift2 {
   font-size :6px;
 }
 .shift1 {
   width         : 15px;
 }
 .shift2{
   width :20px;
 }

 th.shift{
   font-size :6px;
 }
 dt{
   font-size      : 8px;
 }
 dd{
   font-size      : 8px;
 }
 caption{
   font-size      : 8px;
 }
 th,td{
   text-align    : center;
   font-size     : 6px;
 }
 input.shift{
   font-size     : 6px;
   width: 44px;
 }
 input.per_hour{
   font-size     : 6px;
   width: 36px;
 }
 .n_font{
   font-size :6px;
 }
 .top_header2{
   position      : sticky;
   top:0.8rem;
 }
 .top_header3{
   position      : sticky;
   top:1.7rem;
 }
 .same_p{
   font-size :10px;
 }

 .a1_hide,.a2_hide,.a3_hide,.a4_hide{
   position        :absolute;
   color:#000000;
   font-size:10px;
   background-color:#ffffff;
   padding :5px 10px;
   border-radius : 15px;
   border        : 3px solid #ff6600;
   display         : none;
 }
 .a1_per:hover~.a1_hide,.a2_per:hover~.a2_hide,
 .a3_per:hover~.a3_hide,.a4_per:hover~.a4_hide{
   display         : block;
   animation-name : fade-in;
   animation-duration : 1s;
   transform       :translate(80px,-90px);/*固定場所　すこし下げる　ズシンという感じ*/
 }