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

p{
  font-size     : 14px;
}

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

table{
  margin-left:auto;
  margin-right: auto;
}

th,td{
  text-align    : center;
  font-size     : 8px;
}
th {
  background    : #FF4F02;
}
td {
  background    : #FFFFEE;
  color         : #000000;
}

.group_title{
  line-height   :1px;
}

.d_box{
  display:block;
  margin: auto;
  width:450px;
  height:100px;
  padding:10px;
  border:3px solid
}
/* ============レスポンシブ用================ */
.respo_max{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  overflow:hidden;
}

.main{
  margin :10px;

}
.side{
  margin :10px;
}

.group{
  width :95%;
  max-width: 350px;
  background-color: #0033ff;
  min-width: 310px;
  border-radius : 8px;
  border        : 2px solid #ffffff;    /* 枠の指定 */
}
/* ============レスポンシブ用================ */
.menuheder{
  text-align    : center;
  position      : fixed;
  border-bottom : solid;
  z-index: 3;
  box-shadow    : 2px 3px 2px #333333;   / 影の設定 */
}
.content{
  width :100%;
  display :block;
  text-align    : center;
  padding-top   : 90px;
  overflow      : hidden;/* これしないとフッター突き抜ける */
}
.mail_content{
  width :100%;
  display :block;
  text-align    : left;
  padding-top   : 90px;
  overflow      : hidden;/* これしないとフッター突き抜ける */
}

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

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;
}

a.red {
font-size     : 14px;
}
a.red:link {
  color         : red;
  background-color: #ffff00;
  font-weight   : bolder;
  box-shadow:
    inset 0 0 5px #0033ff,
    inset 0 0 5px #0033ff,
    inset 0 0 5px #0033ff,
    inset 0 0 5px #0033ff;
  text-align    : left;
}
a.red:visited {
  color         : red;
  background-color: #ffff00;
}
a.red:hover {
  color         : #ffff99;
  background    : transparent;
}
a{
  cursor        : pointer;
}

a.p{
  font-size:10px;
}

a.p:link {
  color         : #ffff00;
}
a.p:visited {
  color         : #ffff00;
}
a.p:hover {
  color         : #000066;
  background-color: #99ffff;
  box-shadow:
    inset 0 0 4px #000033,
    inset 0 0 4px #000033,
    inset 0 0 4px #000033,
    inset 0 0 4px #000033;
}
.same_a{
  cursor  :pointer;
  text-decoration : underline;
}

.center{
  text-align    : center;
  display         : inline-block;
}


table.white{
  background-color: #ffffff;
}

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

input.shift{
  width         : 80px;
  font-size     : 10px;
}

input.number30{
  width: 30px;
}

input.date120{
  width: 120px;
  font-size: 8px;
}

input.re_title{
  font-size: 9px;
  width: 250px;
}

input.add{
  width: 100px;
}

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

.left_text{
  border-radius : 5px;
  background-color: transparent;
  display         : inline-block;
  padding         : 5px;
  color           : #ffffff;
  text-align    : left;
}

.red{
  color         : red;
  background-color: #ffcc00;
  font-weight   : bolder;
  font-size     : 12px;
}

.error_red{
  color: red;
  font-weight   : bolder;
}

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

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

.pr{
  font-size     : 12px;
}

.pr_tl{
  background-color: #ffcc00;
  font-weight   : bolder;
  font-size     : 12px;
}

.docment_input{
width           : 100%;
display         : inline-block;
padding         : 5px 0px 0px;
color           : #ffffff;
/*text-align    : left;*/
}
/*▼▼▼▼▼▼▼▼▼アニメーション▼▼▼▼▼▼▼▼▼▼▼*/
.box{
  margin-right:30px;
}

.robo1,.robo2,.robo3{
  transition    : .3s;
}

.robo1:hover,.robo2:hover,.robo3:hover{
  background-color: #ffffff;
  color:#000000;
  box-shadow:
    inset 0 0 10px #0033ff,
    inset 0 0 10px #0033ff,
    inset 0 0 10px #0033ff,
    inset 0 0 10px #0033ff;
}

.robo1:hover~.robo_move1,.robo2:hover~.robo_move2,.robo3:hover~.robo_move3{
  display:block;
}

.robo_move2{
  position          :absolute;
  top:35vh;
  left:35vw;
  background-image  : url(../s_manage/image/robo2.png);
  background-repeat : no-repeat;
  display           : none;
  width             : 130px;
  height            : 150px;

  animation-name    : robo2_m,robo_x;
  animation-duration: 1.5s,5s;/*変化スピード*/
  animation-timing-function: steps(8),linear;;/*タイミング*/
  animation-iteration-count: infinite,infinite;/*アニメの回数　infiniteは無限*/
}

@keyframes robo2_m {
    100%{
      background-position: -1040px 0;/*スプライト画像の右端*/
    }
}

/*イメージを指定して動かす方法*/
.robo_move1,.robo_move3{
  position          :absolute;
  top:35vh;
  left:35vw;
  overflow          : hidden;
  width             : 130px;
  height            : 150px;
  display           : none;
  /*移動用*/
  animation-name    : robo_x;
  animation-duration: 5s;
  animation-timing-function: linear;;/*タイミング*/
  animation-iteration-count: infinite;
}

.robo_img{
animation-name    : robo_m;
animation-duration: 1.5s;
animation-timing-function: step-end;
animation-iteration-count: infinite;
}

@keyframes robo_m {
  0%{
    transform: translate(0px,0);
  }
  14%{
    transform: translate(-130px,0);
  }
  28%{
    transform: translate(-260px,0);
  }
  42%{
    transform: translate(-390px,0);
  }
  56%{
    transform: translate(-520px,0);
  }
  70%{
    transform: translate(-650px,0);
  }
  84%{
    transform: translate(-780px,0);
  }
  98%{
    transform: translate(-910px,0);
  }
}

/*イメージを順番に動かす方法*/
.robo2_img{
animation-name    : robo3_m;
animation-duration: 1.5s;
animation-timing-function: steps(8);
animation-iteration-count: infinite;
}

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

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

@keyframes robo_x {
  0%{
    transform: translate(-350%,0%);
  }
  25%{
    transform: translate(-200%,100%);
  }
  50%{
    transform: translate(0%,0%);
  }
  75%{
      transform: translate(150%,100%);
    }
  100%{
    transform: translate(500%,0);
  }
}

/*▲▲▲▲▲▲▲▲アニメーション▲▲▲▲▲▲▲▲▲▲*/

/*===============map処理================*/

.img_parent{
  position:relative;/* parent */
  width           : 100%;
}
.img_parent:before{
  content:"";
  display:block;
  padding-top: 64.7%
}

.img_child{
display         : block;
position:absolute;/* parent */
top:0;
left:0;
bottom:0;
right:0;
}

img.number{
  width : 90%;
}

.img_box1,.img_box2,.img_box3,.img_box4{
  position        : absolute;
  background      : transparent;
  display         : block;
}

.b1_hide,.b2_hide,.b3_hide,.b4_hide{
  border-radius   : 20px;
  text-align      : left;
  background      : #ffffff;
  border          : 2px solid #CC3300;
  color           : #000000;
  position        : absolute;
  padding         : 5px;
  line-height     : 1em;
  display         : none;
}
.img_box1:hover~.b1_hide,.img_box2:hover~.b2_hide,
.img_box3:hover~.b3_hide,.img_box4:hover~.b4_hide{
  display         : block;
}

/*==========ウインドウ==============*/
table.contents {
width: 90%;
margin-left: 50%;
transform:translate(-50%);
text-align: center;

padding: 2px 2px;
background    : #ffffff;
border: 1px solid #aaa;
box-shadow: 2px 2px 4px #888;
color : #000000;
max-width: 450px;
}

.Explanation{
max-width: 600px;
width : 80%;
margin-left   : auto;
margin-right  : auto;
border-radius : 15px;
background-color: #ffffff;
display         :block;
padding         : 8px;
color           : #000000;
text-align    : left;
}

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

.propa{
width           : 450px;
border-radius   : 30px;
background-color: #ffffff;
padding         : 3px;
text-align      : center;
}
.btncenter{
  width: 100%;
  display       : inline-block;
  text-align    : center;
}

.remainderComment{
  width : 80%;
  border: 1px solid;
  margin-left   : auto;
  margin-right  : auto;
  padding         : 4px;
  font-size     : 1em;
}

.label{
  font-weight   : bolder;
  text-decoration : underline;
  margin-left     : 5%;
  padding         : 4px;
  font-size       : 1em;
}
.subheading{
  font-size     : 15px;
  font-weight   : bolder;
  text-decoration: underline;
}

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

.white_cf{
border-radius : 15px;
background-color: #ffffff;
padding         : 8px;
font-size     : 8px;
color           : #444444;
box-shadow:
  inset 0 0 8px #000033,
  inset 0 0 8px #000033,
  inset 0 0 8px #000033,
  inset 0 0 8px #000033;
}

.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;
}

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

.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;        /* カーソル時の影消去 */
}

.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;    /* 枠の指定 */
}

.menubutton {
  display       : inline-block;
  border-radius : 10px;          /* 角丸       */
  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 #000066;    /* 枠の指定 */
}
.menubutton:hover {
  color         : #000033;     /* 文字色     */
  background    : #99FFFF;     /* 背景色     */
  border        : 2px solid #00ffff;    /* 枠の指定 */
}

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

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

.dialog {
position:relative;
margin-left: 50%;
margin-top: -15vw;
transform:translate(-50%,-50%);

width: 90%;
max-width: 600px;
border-radius : 15px;
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;
}

.hide {
  display:none;
}

.show {
  display:block;
  animation-name : fade-in;
  animation-duration : 1s;
}


@media only screen and (max-width:600px){
 body, header {
  background-color: #000055;
 }

 h1{
   padding-top    : 50px;
   font-size      : 20px;
 }
 h2{
   font-size      : 15px;
   color          : #ffffff;
 }

 p,dt,dd,caption{
   font-size      : 9px;
 }

 th,td{
   text-align    : center;
   font-size     : 7px;
 }

 footer{
   height:150px;

 }

 img.number{
   width : 45%;
 }

 /* ============レスポンシブ用================ */

.main{
   width: 100%;
   float:none;
   padding-left   : 0px;
}
.side{
   width: 100%;
   float:none;
   padding-left   : 0px;
   padding-right   : 0px;

}
.group{
   width :100vw;
   max-width: 250px;
   min-width: 0px;
   border-radius : 10px;
}

.content{
    padding-top :140px;
}

.propa{
    width           : 350px;
}

 /* ============レスポンシブ用================ */
 .subheading{
   font-size     : 13px;
 }

 .Explanation{
 font-size        : 9px;
 }

 .Annotation{
   font-size      : 7px;
 }
 .aggregate{
   width         : 10px;
 }

.sukima_col_wide,.sukima,.sukima_right,
.sukima_left,.sukima_left_red,.sukima_up_right,
.sukima_up_left
 {
   font-size     : 9px;
 }


.sukima_left_s,.sukima_right_s,
.sukimared_right_s,.kaisetu_left
{
   font-size     : 8px;
}


 .white_cf{
 border-radius : 10px;
 padding         : 9px;
 background-color: #ffffff;
 font-size     : 6px;
 color           : #000000;
 }

 a.red {
   border-radius : 15%;
   font-size     : 6px;
 }
 a.red:visited {
   color         : red;
   box-shadow:
     inset 0 0 5px #000033,
     inset 0 0 5px #000033,
     inset 0 0 5px #000033,
     inset 0 0 5px #000033;
 }

 .normal_button {
   display       : inline-block;
   border-radius : 30%;          /* 角丸       */
   font-size     : 6px;        /* 文字サイズ */
   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     : 6px;        /* 文字サイズ */
   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;        /* カーソル時の影消去 */
 }

 a.p,.sukima_l,.sukima_left_contents,.sukima_left_l{
   font-size     : 6pt;
}

.sukima_left_year{
  font-size     : 8pt;
}
.sukima_left_big{
  width         : 350px;
  font-size     : 8pt;
}

.sukima_right_l{
   width         :80px;
   font-size     : 8pt;
 }