body {
  /*font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', メイリオ, Meiryo, 'ＭＳ Ｐゴシック', Osaka, sans-serif;*/
  font-family: "lucida grande", tahoma, verdana, arial, sans-serif;
/*background-image: url("../image/bg.png")*/
  background-color: #e0e0e0;
  
}

hr {
  height: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.styled-hr {
  border: none;
  border-top: 2px solid #ccc;
  text-align: center;
  margin-right: 15px;
  margin-left: 15px;
}
.styled-hr::before {
  content: '';
  position: absolute;
  z-index: 3;
  top: 139px;
  width: 36px;
  height: 18px;
  left: 50%;
  /* text-align: center; */
  background: #ebebeb;
  border-bottom-left-radius: 50px;
  border-bottom-right-radius: 50px;
  /* transform: rotate(180deg) translateX(-50%); */
  transform: translateX(-50%);
  border: 2px solid #ccc;
  border-top: none;
}
.styled-hr::after {
  content: '\f1c0';
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  position: absolute;
  z-index: 3;
  top: 120px;
  left: 50%;
  transform: translateX(-50%);
  /* background: #fff; */
  padding: 10px 10px;
  color: #747373;
  font-size: 20px;
  cursor: pointer;
}

h3{
  margin: 10px 0 0;
  /* padding: 0 0 4px; */
  font-size: 24px;
  z-index: 3;
}

h4{
  margin: 0px 0 0;
  font-size: 20px;
  border-bottom: 2px solid #00006638;
  text-align: center;
}

#logo {
  background: -webkit-linear-gradient(left, #000, #565698);
  background:    -moz-linear-gradient(left, #000, #565698);
  background:      -o-linear-gradient(left, #000, #565698);
  background:         linear-gradient(to right, #0b0b33, #565698);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#f5f5f5', GradientType=1)";
  padding: 3px 5px;
  color: white;
  font-size: 40px;
  font-weight: bold;
  line-height: 45px;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
}


/*メニューページのCSS*/
#body_top{
  background-color: #000;
  color: #fff;
}

.field{
  position: absolute;
  width: 80%;
  right: 0;
  top: 50px;
  z-index: 99999;
  margin-left: auto;
  margin-right: auto;
  overflow: scroll;
}

a{
  text-decoration: none;
  /*color: black;*/
  color: #414e5a;
}

#field-title{
  position: fixed;
  z-index: 100000;
  font-weight: bold;
  margin: 0px;
  padding-left: 30px;

  font-size: 30px;
  left: 20%;
  top: 0;
  width: 80%;
  height: 45px;
  background-color: #0d0f2d;
  color: #fff;
}

#field-data{
  position: fixed;
  left: 20%;
  top: 25px;
  width: 80%;
  background-color: #0d0f2d;
}

.field-sub{
  margin: 20px;
}

#menu-left{
  position: fixed;
  width: 20%;
  height: 100%;
  z-index: 99999;
  display: block;
  left: 0;
  top: 0px;
  right: auto;

  font-size: 15px;
  color: #ffffff;
  background-color: #333;
  box-shadow: inset 0 0 5px 5px #222;
}
#menu-left p{
  padding-left: 10px;
  display: block;
  font-size: 1.5em;
  margin-block-start: 0.83em;
  margin-block-end: 0.83em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: bold;
  margin-block: auto;
}
#menu-left ul{
  display: block;
  margin: 0 0 15px;
  padding: 0;
  border-top: 1px solid #1a1a1a;
  border-bottom: 1px solid #4d4d4d;
}
#menu-left ul li {
  display: block;
  margin: 0;
  line-height: 48px;
  border-top: 1px solid #4d4d4d;
  border-bottom: 1px solid #1a1a1a;
}
#menu-left ul li:hover{
  border-top:none;
  line-height:41px
  -webkit-box-shadow:inset 0 0 15px 3px #222;
  -moz-box-shadow:inset 0 0 15px 3px #222;
  box-shadow:inset 0 0 15px 3px #222;
}
#menu-left img{
  width: 100%;
}

#menu-foot{
  width: 100%;
  bottom: 0;
  position: absolute;
  text-align: center;
}
#menu-foot p{
  padding: 5px;
  font-size: 12px;
}

.btn-menu {
  background: #00000000;
  border: 0;
  cursor: pointer;
  color: #ffffff;
  font-size:16px;
  transition: all 0.3s;
  font-weight:700;
  text-align: left;
  margin-left: 5px;
  width: 100%;
}

.hidden-params{
  display: none;
}
/*メニューページのCSS終了*/



/*menuのタブのCSS*/
.tab-index{
  margin-bottom: 0;
}

.tab-content {
  display: none;
  overflow: scroll;
}
.tab-content.is_show {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  /*z-index: 2;*/
  background-color: #ebebeb;
  /*position: absolute;*/
}
.tabs {
  display: flex;
  padding: 10px;
  padding-bottom: 0;
  margin-bottom: 0;
}
.tabs li {
  list-style: none;
  padding: 0;
  width: 50%;
}
.tabs li + li a {
  /*margin-left: -5px;*/
}
.tabs a {
  background-color: #ccc;
  border-radius: 4px 4px 0 0;
  width: 93%;
  display: block;
  box-shadow: inset 0 -6px 10px 0px #bbb;
  color: #000;
  top: 6px;
  font-size: 20px;
  padding: 10px 0px;
  padding-left: 20px;
  position: relative;
  text-decoration: none;
  transition: all .3s;
  /*transform-origin: 50% 90%;*/
}
.tabs .is_active {
  /*background-color: #252525;*/
  background-color: #ebebeb;
  box-shadow: none;
  font-weight: bold;
  font-size: 24px;
  top: 0px;
  z-index: 100;
  /*transform: scaleX(1.5);*/
  /*color: #fff;*/
}
.view-switching{
  background-color: #ebebeb;
  display: flex;
  min-width: max-content;
  font-size: 25px;
  padding: 5px;
}
.view-switching-icon.-card{
  border-radius: 8px 0 0 8px;
}
.view-switching-icon.-list{
  border-radius: 0 8px 8px 0;
}
.view-switching-icon{
  color: #333333;
  width: 30px;
  height: 25px;
  justify-content: center;
  align-items: center;
  display: flex;
  padding: 10px;
  border: 1px solid #0d0f2d;
  background-color: #f2f4f7;
  cursor: pointer;
}
.view-switching-icon.-selected{
  font-weight: 700;
  color: #ffffff;
  background-color: #333366;
}
.view-switching-item{
  display: flex;
  margin-right: 25px;
  margin-left: auto;
}



/*menuのタブのCSS終了*/


/*データカードのCSS*/
.data-card{
  position: relative; 
  width: 40%;
  float: left;
  margin: 10px;
  border-radius: 10px;
  background: #e0e0e0;
  box-shadow:  20px 20px 60px #bebebe,
             -20px -20px 60px #ffffff;
  transition: 0.5s;
}
.data-card:hover{
  border: solid 1px #0d0f2d5c;
}
.data-card-evaluation{
  position: relative; 
  width: 95%;
  float: left;
  margin: 10px;
  border-radius: 10px;
  background: #e0e0e0;
  box-shadow:  20px 20px 60px #bebebe,
             -20px -20px 60px #ffffff;
}
.org-circle{
  margin-top: 3px;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  font-size: 20px;
  color: #414e5a;
  flex-shrink: 0;
}
.card-container{
  display: flex;
  flex-direction: row;
  margin: 10px;
}
.card-container-tag{
  display: flex;
  flex-direction: row;
  margin: 10px;
  flex-wrap: wrap;
}
.card-container-tag p{
  cursor: pointer;
  margin: 0px 10px 0px 0px;
  color: #0177a9;
  z-index: 1;
}
.card-container-tag p:hover{
  text-decoration: underline;
  font-weight: bold;
}
.card-container2{
  display: flex;
  flex-direction: column;
  overflow: hidden;
  white-space: nowrap;
  text-overflow:  ellipsis;
  margin-left: 10px;
  margin-right: 10px;
}
.card-container3{
  display: flex;
  flex-direction: row;
  flex-shrink: 0;
  z-index: 1;
  margin-left: auto;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  width: 85px;
  color: #414e5a;
  box-shadow:  5px 5px 11px #d0d0d0,
             -5px -5px 11px #f0f0f0;
}
.card-h1, .card-h1-widen{
  font-weight: bold;
  font-size: 20px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow:  ellipsis; 
  cursor: pointer;
}
.card-h1:hover,
.card-h1-full:hover,
.card-h1-widen:hover{
  text-decoration: underline;
}
.card-h1-full{
  font-weight: bold;
  font-size: 20px;
  white-space: nowrap;
  text-overflow:  ellipsis; 
  cursor: pointer;
}
.card-h2{
  font-size: 16px;
  color: #414e5a;
  overflow: hidden;
  white-space: nowrap;
  text-overflow:  ellipsis; 
}
.card-h3{
  font-size: 30px;
  font-weight: bold;
}
.card-h4 p{
  margin-top: -8px;
  margin-bottom: -8px;
  font-size: 14px;
}

.fadeInLeft{
    opacity: 0;
    transform: translateX(-100px);
    animation-name: fadeIn;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}
.fadeInRight{
    opacity: 0;
    transform: translateX(100px);
    animation-name: fadeIn;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}
@keyframes fadeIn {
    0% {
    }
    100% {
        opacity: 1;
        transform: translate(0);
    }
}
/*データカードのCSS終了*/

/*データセットカードのCSS*/
.dataset-card{
  position: relative;
  width: 40%;
  margin: 10px;
  margin-right: 10px;
  border-radius: 15px;
  background: #e0e0e0;
  box-shadow: 10px 10px 20px #bebebe, -10px -10px 20px #ffffff;
  transition: 0.5s;
}
.dataset-card:hover{
  border: solid 1px #0d0f2d5c;
}
.format-plate{
  margin-top: 3px;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  font-size: 20px;
  color: #972929;
  flex-shrink: 0;
}
.card-container{
  display: flex;
  flex-direction: row;
  margin: 10px;
}
.card-container-tag{
  display: flex;
  flex-direction: row;
  margin: 10px;
  flex-wrap: wrap;
}
.card-container-tag p{
  cursor: pointer;
  margin: 0px 10px 0px 0px;
  color: #0177a9;
  z-index: 1;
}
.card-container-tag p:hover{
  text-decoration: underline;
  font-weight: bold;
}
.card-container2{
  display: flex;
  flex-direction: column;
  overflow: hidden;
  white-space: nowrap;
  text-overflow:  ellipsis;
  margin-left: 10px;
  margin-right: 10px;
}
.card-container3{
  display: flex;
  flex-direction: row;
  flex-shrink: 0;
  z-index: 1;
  margin-left: auto;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  width: 85px;
  color: #414e5a;
  box-shadow:  5px 5px 11px #d0d0d0,
             -5px -5px 11px #f0f0f0;
}
.card-container4{
  display: flex;
  flex-direction: row;
  flex-shrink: 0;
  z-index: 1;
  margin-left: auto;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  width: 150px;
  color: #414e5a;
  box-shadow:  5px 5px 11px #d0d0d0,
             -5px -5px 11px #f0f0f0;
}
.card-container5{
  display: flex;
  flex-direction: row;
  flex-shrink: 0;
  z-index: 1;
  margin-left: auto;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  /*width: 160px;*/
  width: 80px;
  color: #414e5a;
  box-shadow:  5px 5px 11px #d0d0d0,
             -5px -5px 11px #f0f0f0;
}
.card-container5 div{
  margin: 5px;
  font-size: 30px;
  cursor: pointer;
}
.card-h5{
  font-size: 18px;
  font-weight: bold;
}
.card-h4 p{
  margin-top: -8px;
  margin-bottom: -8px;
  font-size: 14px;
}
/*データセットカードのCSS終了*/


/*ロード画面のCSS*/
#loadingScreen {
  position: absolute;
  height: 40%;
  top: 30%;
  width: 100%;
  justify-content: center;
  display: flex;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 1000;
  color: #252c64;
  text-align: center;
  align-items: center;
  font-size: 40px;
}
#loadingScreen p{
  margin: 20px;
}

.loader {
  width: 60px;
  aspect-ratio: 1;
  color: #252c64;
  position: relative;
}
.loader::before,
.loader::after {
  content: "";
  position: absolute;
  inset:0;
  background:
    linear-gradient(currentColor 0 0) 0 calc(var(--s,0)*-100%)/100% calc(100%/3),
    repeating-linear-gradient(90deg,currentColor 0 25%,#0000 0 50%) calc(var(--s,0)*100%) 50%/calc(4*100%/3) calc(100%/3);
  background-repeat: no-repeat;
  animation: l26 2s infinite;
}
.loader::after {
  --s:-1;
}
@keyframes l26 {
    0%,
    10%  {transform:translateY(calc(var(--s,1)*0));   background-position: 0 calc(var(--s,0)*-100%),calc(var(--s,0)*100%) 50%}
    33%  {transform:translateY(calc(var(--s,1)*-20%));background-position: 0 calc(var(--s,0)*-100%),calc(var(--s,0)*100%) 50%}
    66%  {transform:translateY(calc(var(--s,1)*-20%));background-position: 0 calc(var(--s,0)*-100%),calc(var(--s,0)*100% + 100%) 50%}
    90%,
    100%  {transform:translateY(calc(var(--s,1)*0));  background-position: 0 calc(var(--s,0)*-100%),calc(var(--s,0)*100% + 100%) 50%}
}

#more-data{
  margin: auto;
  margin-top: 20px;
  margin-bottom: 100px;
  width: 200px;
  height: 50px;
  cursor: pointer;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #0d0f2d;
  color: #dde2e7;
  font-size: 20px;
  border-radius: 15px;
  font-weight: bold;
  transition: 500ms;
}
/*ロード画面のCSS終了*/




#menu ul{ 
  margin: 0; 
  padding: 0; 
  list-style: none; 
}

#menu li{ 
  display: inline; 
  padding: 0; 
  margin: 0; 
  float: left;
  width: 20%;
}

#menu li a{
  display: block; 
  border-left: 8px solid #8c8c8c;
  background-color: #333366;
  padding: 10px 10px;
  text-decoration: none;
  color: #E1E2CF;
  /*width: 20%; */
  /*margin: 1px 0px;*/
  text-align: left;
  font-size: 20px;
}

#menu li a:hover{
  border-left: 8px solid #990033;
  background-color: #474655;
}


/*モーダル*/
#modal-overlay {
  z-index: 100000;
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.75);
}

.modal-cloud {
  width: 90% ;
  margin: 0;
  border: 2px solid #aaa ;
  /*background: #4d4d4d;*/
  position: fixed ;
  left: 5%;
  top: 5%;
  display: none;
  z-index: 99999999;
  height: 90%;
  /*overflow: scroll;*/
  background-color: #e0e0e0;
}

#explain{
  font-size: 20px;
}

#views{
  float: left;
  width: 94%;
  margin-left: 2%;
  margin-right: 2%;
  margin-top: 10px;
  margin-bottom: 10px;
}

.wrap-chart{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  z-index: 2;
}

.wrap-chart-scroll {
  display: flex;
  align-items: center;
  width: 95%;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  margin-bottom: 45px;
}

.wrap-chart-scroll-container{
    display: flex;
    overflow-x: auto;
    padding: 30px;
    /*scroll-behavior: smooth;*/
    /*width: calc(100% - 60px);*/
}
.wrap-chart-scroll-box{
  width: 100%;
}
.arrow {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;

  cursor: pointer;
  font-size: 2em;
  user-select: none;
  width: 30px;
  height: 100%;
  text-align: center;
  justify-content: center;
  align-items: center;
  background-color: #0f2b46bd;
  color: #fff;
}
.left-arrow {
  left: 0;
}
.right-arrow {
  right: 0;
}

.Hide {
  display: none;
}

.chart-container{
  position: relative; 
  width: 40%;
  float: left;
  margin: 10px;
  border-radius: 10px;
  background: #e0e0e0;
  box-shadow:  20px 20px 60px #bebebe,
             -20px -20px 60px #ffffff;
   transition: 0.5s;
}

.modal-chart-container{
    position: relative;
    width: 35%;
    float: left;
    margin: 10px;
    border-radius: 10px;
    background: #e0e0e0;
    box-shadow: 20px 20px 60px #bebebe, -20px -20px 60px #ffffff;
   transition: 0.5s;
   padding: 20px;
}

.chart-container-w-modal{
  /*position: relative; 
  width: 25%;
  float: left;*/
  height: 48%;
  margin: 10px;
  border-radius: 10px;
  background: #d0d0d0f2;
  box-shadow:  20px 20px 60px #bebebe,
             -20px -20px 60px #ffffff;
}

#modal-title{
  position: absolute;
  display: flex;
  flex-direction: row;
  z-index: 1;
  top: 0px;
  font-weight: bold;
  margin: 0px;
  /*padding: 10px;*/
  width: 100%;
  font-size: 30px;
  background-color: #0d0f2d;
  color: #fff;
  align-items: center;
}
#modal-title-name{
  margin-left: 10px;
  width: 55%;
}
#modal-close{
  /*margin-left: auto;*/
  
  font-size: 45px;
  cursor: pointer;
}
.org-modal{
  margin: 10px;
}
.modal-function-container{
  display: flex;
  margin-left: auto;
  margin-right: 17px;
  text-align: center;
}
#modal-function-active{
  flex-direction: column;
  font-size: 18px;
  margin-right: 50px;
  margin-left: auto;
  cursor: pointer;
}
.evaluation input[type="submit"], .favorite{
  background: #00000000;
  border: 0;
  font-weight:700;
  cursor: pointer;
  color: #ffffff;
  font-size: 18px;
  padding-right: 0px;
}
.evaluation input[type="submit"]:hover,
.favorite:hover{
  text-decoration: underline;
}

#modal-function-close{
  font-size: 45px;
  cursor: pointer;
}


.modal-data-card{
  position: relative; 
  width: 45%;
  float: left;
  margin: 10px;
  border-radius: 10px;
  background: #e0e0e0;
  box-shadow: 10px 10px 20px #bebebe, -10px -10px 20px #ffffff;
  transition: 0.5s;
}
.modal-data-card:hover{
  border: solid 1px #0d0f2d5c;
}
.modal-data-card-active{
  width: 100%;
}
.modal-data-card table, .data-card-evaluation table{
  margin: 10px;
}

.modal_element-tag{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 10px;
}
.modal_element-tag p{
  cursor: pointer;
  margin: 0px 10px 0px 0px;
  color: #0177a9;
  z-index: 1;
}
.modal_element-tag p:hover{
  text-decoration: underline;
  font-weight: bold;
}

#nodata_info{
  position: absolute;
  border-radius: 10px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  font-size: 60px;
  color: #0f2b46;
  background-color: #8684848f;
  text-align: center;
  z-index: 2;
}
#nodata_info div{
  top: 40%;
  /* margin-top: 50%; */
  position: relative;
  background: #707070b8;
  width: 100%;
}

.modal-content{
  overflow: scroll;
  position: relative;
  top: 70px;
  height: 90%;
}

#csvWindow{
  color: #363636;
  font-size: 12px;
  overflow: scroll;
  margin: 10px;
  transition: 0.5s;
}
#csvWindow div{
  display: flex;
}
#csvWindow table{
  border: solid 1.5px darkgray;
  border-collapse: collapse;
  border-spacing: 0;
  background-color: #fff;
  text-align: center;
}
#csvWindow table thead{
  background-color: #0080802e;
}
#csvWindow table td, #csvWindow table th {
  border: 1px solid #dbdbdb;
  border-width: 0 0 1px;
  padding: 0.1em 0.1em;
  width: 60px;
  vertical-align: middle;
}
#csvWindow-dataset-name{
  font-weight: bold;
  font-size: 20px;
}
#closeCsvWindow{
  margin-left: auto;
  margin-right: 0px;
  font-size: 14px;
  text-decoration: underline;
  flex-direction: column;
  justify-content: center;
  cursor: pointer;
}



#modal-table{
  width: 45%;
  margin-top: 10px;
  z-index: 10;
}

.chart-container-wraper{
  width: 50%;
}

.wrap-cloud {
  width: 48%;
  margin: 10px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  border-radius: 10px;
  background: #d0d0d0f2;
  box-shadow:  20px 20px 60px #bebebe,
             -20px -20px 60px #ffffff;

}

/*モーダルのCSS終了*/



#hidden-username{
  display: none;
}

#hidden-dataid{
  display: none;
}

#datanameid{
  display: none;
}

#dataid{
  display: none;
}

.dataid{
  display: none;
}

#cy-area {
  float: left;
  width: 50%;
  margin-right: 2%;
  background-color: whitesmoke;
}

#cy {
  float: left;
  width: 100%;
  margin-right: 2%;
  height: 450px;
  /*z-index: 999;*/
  background-color: whitesmoke;
}

#cloud-area {
  float: left;
  /*width: 50%;*/
  margin-right: 2%;
  background-color: whitesmoke;
}

#cloud{
  float: left;
  height: 450px;
  background-color: whitesmoke;
}


#cloud img{
  height: 450px;
}


#evaluation-field{
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
}
.evaluation-container{
  position: relative;
}
.evaluation-container p{
  font-size: 24px;
  margin-left: 30px;
  margin-bottom: 10px;
  font-weight: bold;
  display: flex;
  align-items: center;
}
.evaluation-comment{
  width: 90%;
  margin: auto;  
}
.evaluation-comment textarea{
  resize: none;
}
#evaluation-input{
  display: flex;
  justify-content: center;
  margin: auto;
  margin-top: 20px;
  margin-bottom: 100px;
}
#evaluation-input, #evaluation-input input[type="submit"], #evaluation-field input[type="submit"]{
  width: 200px;
  height: 50px;
  cursor: pointer;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #7f5a83;
  background-size: 200% 100%;
  background-position: left;
  background-repeat: no-repeat;
  color: #dde2e7;
  font-size: 20px;
  border-radius: 15px;
  font-weight: bold;
  background-image: linear-gradient(315deg, #1b2845 0%, #274060 74%);
  transition: 500ms;
}

#evaluation-field input[type="submit"]:hover {
  background-position: right;
}

#evaluation-field input[type="submit"]:hover:before {
  color: rgba(255,255,255,0.8);
}

#evaluation-field input[type="submit"]:focus {
  outline: none;
}
.input-mark{
  border-radius: 12px;
  padding: 3px;
  color: aliceblue;
  font-size: 18px;
  margin-left: 5px;
}
.input-optional{
  border: solid #6c0000;
  background: #6c0000;  
}
.input-required{
  border: solid #000066;
  background: #000066;  
}


.result-message p{
  color: #b70404;
  font-size: 20px;
  font-weight: bold;
  animation-name:fadeIn;
  animation-duration:2s;
  animation-fill-mode:forwards;
  opacity:0;
  margin-left: 30px;
}



.logouts{  
    position: absolute;
    right: 5px;
    top: 95px;
}


.canvas-chart{
  padding: 20px;
}
.canvas-container{
  position: relative;
  top: -25px;
}

.eval-editor{
  position: absolute;
  top: 75px;
  right: 10px;
  z-index: 1;
}

.showcase-icons{
  position: absolute;
  right: 1px;
  bottom: 1px;
}

.showcase-icons-place{
  display: flex;
  justify-content: space-around; /* 子要素の間隔を調整 */
  position: relative; /* 必要に応じて相対位置を設定 */
  width: 100%;
  z-index: 2;
}

.showcase-comment{
  background: #0000001f;
  position: absolute;
  bottom: 0px;
  left: 0px;
  right: 0px;
  padding: 5px;
  height: 40px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.showcase-comment p{
  font-size: 12px;
  margin: 0px;
}

.btns{
  color: #000;
  /*background: #fff;*/
  width: 35px;
  height: 35px;
  cursor: pointer;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  border-radius: 0.5rem;
  font-size     : 14pt;     
  text-align    : center; 
  color         : #ffffff;
  line-height   : 1em;       
  transition    : .3s;
  border: none;   
}
.btns:hover{
  color: #fff;
  background: #000;
}

.edit-btn {
  background    : #b70303;
}
.edit-btn:hover {
  box-shadow    : none;
  color         : #ffffff; 
  background    : #4c0000;
}

.delete-btn {
  background    : #065a85;
}
.delete-btn:hover {
  box-shadow    : none;
  color         : #ffffff; 
  background    : #0f2b46;
}

.info-btn {
  background    : #037171;
}
.info-btn:hover {
  box-shadow    : none;
  color         : #ffffff; 
  background    : #004a4a;
}



.submitter{
  width:150px;
  display:inline-block; /*送信とリセットを横並び*/
  font-size:16px;
  text-align:center;
  padding:10px;
  background:#11543f; /*ボタンのカラー（背景色）*/
  color:#fff;　/*ボタンのフォントカラー*/
  line-height:1em;
  border-radius: 8px;
  border        : 2px solid #11543f;    /* 枠の指定 */
  cursor: pointer;
}

.submitter:hover {　/*マウスを合わせた時の処理（hover）*/
  color: #000;
  background:#b3c9c2;
  border        : 2px solid #11543f;    /* 枠の指定 */
}

table.input-table{
  width: 100%;
}





table.catalog-table.resource-table{
  font-size: 14px;
  width: 45%;
}
table.catalog-table.resource-table th,td {
    padding: 5px 10px;          /* 余白指定 */
}
table.catalog-table th {
    background-color: #0f2b46;  /* 背景色指定 */
    color:  #fff;               /* 文字色指定 */
    font-weight:  normal;       /* 文字の太さ指定 */
    position:  relative;        /* 位置指定 */
    z-index: 10;                /* 重なり調整 */
    width: 130px;
}
table.catalog-table td {
    background-color:  #a1afbd; /* 背景色指定 */
    padding-left: 25px;         /* 余白指定 */
}
table.catalog-table.resource-table tr {
    border-bottom:  solid #fff; /* 線指定 */
}
table.resource-table th {
    background-color: #065a85;  /* 背景色指定 */
    color:  #fff;               /* 文字色指定 */
    font-weight:  normal;       /* 文字の太さ指定 */
    position:  relative;        /* 位置指定 */
    z-index: 10;                /* 重なり調整 */
    width: 100px;
}
table.resource-table td {
    background-color: #9fbfcf; /* 背景色指定 */
    padding-left: 25px;         /* 余白指定 */
}

.catalog-tag{
  border: solid #0f2b46;
  border-radius: 5px;
  padding: 3px;
  background: #0f2b46bf;
  color: aliceblue;
}


table#evaluation-table{
  width: 90%;
  margin: auto;
}

table#evaluation-table th {
    background-color: #000066;  /* 背景色指定 */
    color:  #fff;               /* 文字色指定 */
    font-weight:  normal;       /* 文字の太さ指定 */
    position:  relative;        /* 位置指定 */
    z-index: 10;                /* 重なり調整 */
}

table#evaluation-table td {
    background-color:  #bcbcda; /* 背景色指定 */
    /*padding-left: 25px;*/
    vertical-align: middle;
}

.radio_center{
  text-align-last: center;
}


.cp_iptxt {
  position: relative;
  width: 50%;
  /*margin: -13px 1%;*/
}
.cp_iptxt input[type=text] {
  font: 15px/24px sans-serif;
  box-sizing: border-box;
  width: 100%;
  margin: 8px 0;
  padding: 0.3em;
  transition: 0.3s;
  border: 1px solid #1b2538;
  border-radius: 4px;
  outline: none;
}
.cp_iptxt input[type=text]:focus {
  border-color: #11543f;
}
.cp_iptxt input[type=text] {
  padding-left: 40px;
}
.cp_iptxt i {
  position: absolute;
  top: 15px;
  left: 0;
  padding: 9px 8px;
  transition: 0.3s;
  color: #aaaaaa;
}
.cp_iptxt input[type=text]:focus + i {
  color: #11543f;
}

.cp_iptxt2 {
  position: relative;
  width: 100%;
  margin: -13px 1%;
}
.cp_iptxt2 input[type=text] {
  font: 15px/24px sans-serif;
  box-sizing: border-box;
  width: 100%;
  margin: 8px 0;
  padding: 0.3em;
  transition: 0.3s;
  border: 1px solid #1b2538;
  border-radius: 4px;
  outline: none;
}
.cp_iptxt2 input[type=text]:focus {
  border-color: #11543f;
}
.cp_iptxt2 input[type=text] {
  padding-left: 40px;
}
.cp_iptxt2 i {
  position: absolute;
  top: 8px;
  left: 0;
  padding: 9px 8px;
  transition: 0.3s;
  color: #aaaaaa;
}
.cp_iptxt2 input[type=text]:focus + i {
  color: #11543f;
}


.btn,
a.btn,
button.btn {
  /*font-size: 1.6rem;*/
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  /*padding: 1rem 4rem;*/
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #212529;
  border-radius: 0.5rem;
}

a.btn-flat {
  overflow: hidden;
  padding: 1.01rem 2rem;
  /*padding: 1.5rem 6rem;*/

  color: #fff;
  border-radius: 0;
  background: #000;
}

a.btn-flat span {
  position: relative;
}

a.btn-flat:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: '';
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
  -webkit-transform: translateX(-96%);
  transform: translateX(-96%);
  background: #11543f;
}

a.btn-flat:hover:before {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
}


.room-form{
  float: left;
  margin: 10px;
}

.room-select {
  display       : inline-block;
  border-radius : 5%;          /* 角丸       */
  font-size     : 18pt;        /* 文字サイズ */
  text-align    : center;      /* 文字位置   */
  cursor        : pointer;     /* カーソル   */
  padding       : 12px 12px;   /* 余白       */
  color         : #ffffff;     /* 文字色     */
  line-height   : 1em;         /* 1行の高さ  */
  transition    : .3s;         /* なめらか変化 */
  /*box-shadow    : 7px 7px 29px #666666; */
  border        : 2px solid #000066;    /* 枠の指定 */
}

.room-select:hover {
  box-shadow    : none;        /* カーソル時の影消去 */
  color         : #000066;     /* 背景色     */
  background    : #11543f;     /* 文字色     */
}

.room-select1{
  background    : #000066;     /* 背景色     */
}

.room-select2{
  background    : #990033;     /* 背景色     */
}

.room-select3{
  background    : #474655;     /* 背景色     */
}

.room-select4{
  background    : #11543f;
}

.return-btn {
  position: absolute;
  right: 5px;
  top: 140px;
  border-radius : 5%;
  font-size     : 14pt;     
  text-align    : center;   
  cursor        : pointer;  
  padding       : 12px 12px;
  color         : #ffffff;
  line-height   : 1em;       
  transition    : .3s;    
  background    : #000066;
  border        : 2px solid #000066; 
}

.return-btn:hover {
  box-shadow    : none;
  color         : #000066; 
  background    : #11543f; 
}



.subcontainer{
  position: relative;
  float: left;
  background: #000;
  margin-top: 100px;
  padding: auto;
}



h7 {
    background: -webkit-linear-gradient(left, #000, #fff);
    background:    -moz-linear-gradient(left, #000, #fff);
    background:      -o-linear-gradient(left, #000, #fff);
    background:         linear-gradient(to right, #0b0b33, #fff);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff', GradientType=1)";
    padding: 1px 0;
    color: white;
    /*margin:0px 0px;*/
    width: 100%;
    font-size: 20px;
}

.select{
  position: relative;
  float: left;
  background: #000;
  margin: 15px;
  padding: auto;
  width: 400px;
  height: 300px;
  border: solid 3px;
  border-color: #333333;
  border-radius: 10px;
  text-align: center;
}

.select_logo{
  width: 350px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  cursor : pointer;
}


.input_field{
  float: left;
}


.subfield p{
  margin-left: 10px;
  margin-top: 5px;
  font-size: 20px;
}

#minus-icon, #plus-icon{
  cursor: pointer;
  position: absolute;
  right: 5px;
  top: 5px;
}

#plus-icon{
  display: none;
}

.box1{
  float: left;
  width:50%;
}

input#dj_tl{
  width: 50%;
}

input#vl_num{
  /*width: 20%;*/
}

input#dj_vl{
  width: 30%;
  margin: 2px;
}

textarea{
  width: 100%;
  line-height: 1.5em;
  resize: none;
}


.gomiinfo {
  width: 96%;
  margin: 2%;
  white-space: pre;
  /*overflow: hidden;*/
  /*word-wrap:break-word;*/
  -webkit-animation: ozDq 10s steps(70, end);
  /* プロパティは順に name, duration, timing-function です */
  }
.gomiinfo:after {
  content: '▶';
  -webkit-animation: ozPulse 1s infinite ease;
  /* プロパティは順に name, duration, iteration-count, timing-function です */
}

@-webkit-keyframes ozDq {from {width: 0;}} /* 開始地点の指定 */
@-moz-keyframes ozDq {from {width: 0;}}
@-webkit-keyframes ozPulse { /* 透明度の指定 */
  from { opacity: 1; }
  to { opacity: 0; }
}
@-moz-keyframes ozPulse {
  from { opacity: 1; }
  to { opacity: 0; }
}

span.strong{
  font-size: 20px;
  color: red;
  font-weight: bold;
}

.gomicomment{
  font-size: 20px;
  /*color: red;*/
  font-weight: bold;

}

/*iconのCSS*/
.trash {
  float: left;
  cursor : pointer;
  font-size: 35px;
  position: relative;
  width: 0.9em;
  height: 1.2em;
  border-left: 0.1em solid #333366;
  border-right: 0.1em solid #333366;
  border-bottom: 0.1em solid #333366;
  border-radius: 0 0 0.1em 0.1em;
  background:
    linear-gradient(to bottom, #333366 0%, #39a9d6 100%) 0.15em 0.2em,
    linear-gradient(to bottom, #333366 0%, #39a9d6 100%) 0.38em 0.2em,
    linear-gradient(to bottom, #333366 0%, #39a9d6 100%) 0.6em 0.2em
  ;
  background-size: 0.1em 0.8em;
  background-repeat: no-repeat;
}
/* 蓋 */
.trash::before {
  content: "";
  position: absolute;
  top: -0.1em;
  left: -0.2em;
  width: 1.3em;
  height: 0.1em;
  background-color: #333366;
}
/* 取っ手 */
.trash::after {
  content: "";
  position: absolute;
  top: -0.3em;
  left: 0.1em;
  width: 0.5em;
  height: 0.2em;
  border-top: 0.1em solid #333366;
  border-left: 0.1em solid #333366;
  border-right: 0.1em solid #333366;
  border-radius: 0.1em 0.1em 0 0;
}

.rotate::before{
  transform: rotate(145deg);
  top: -0.4em;
  left: -0.3em;
}

.rotate::after{
  transform: rotate(-35deg);
  top: -0.6em;
  left: -0.05em;
}

.balloon {
  background-color: #ddd;
  padding: 5px;
  width: 350px;
  position: relative;
  margin-left: 60px;
  margin-top: -24px;
  visibility: hidden;

}
.balloon:after {
  border-right: 12px solid #ddd;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  content: '';
  margin-top: -10px;
  position: absolute;
  left: -12px;
  top: 50%;
}


/*トップページのCSS*/
.menu{
  width: 50%;
  margin: 20px auto;
  align-self: center;
  padding: 10px 20px;
  z-index: 99999;
}

.square-content{
  width: 100%;
  height: 235px;
  color: white;
  float: left;
  margin: 3px;
  background: #2f373df2;
  padding: 10px;
  position: relative;
  /*padding-left: 5px;*/
}


#create-account{
  text-align: center;
  margin-top: 10px;
}
#create-account input{
  text-align: center;
  font-size: 14px;
  color: #ffffff;
  cursor: pointer;
  text-decoration: underline;
  border: none;
  background-color: #00000000;
  border-radius: 30px;
}

.title{
  position: relative;
  padding: .75em 1em .75em .9em;
  margin-bottom: 3px;
  margin-top: -10px;
  margin-left: -6px;
  font-weight: bold;
  font-size: 20px;
}
.title:after {
  position: absolute;
  top: .5em;
  left: .3em;
  content: '';
  width: 6px;
  height: -webkit-calc(100% - 1em);
  height: calc(100% - 1em);
  background-color: #ff8000;
  border-radius: 4px;
}

#table-login{
  width: 100%;
}

.submit{
  width: 100%;
  position: absolute;
  bottom: 0px;
  left: 0px;
  height: 45px;
  color: white;
  background-color: #ff7f0099;
  cursor: pointer;
}


#toppage-foot{
  position: fixed;
  float: left;
  z-index: -1;
  left: 0;
  bottom: 0;
  width: 100%;
}

.input-userinfo {
  position: relative;
  width: 100%;
}
.input-userinfo input {
  font: 15px/24px sans-serif;
  box-sizing: border-box;
  width: 100%;
  padding: 0.3em;
  transition: 0.3s;
  border: 1px solid #1b2538;
  border-radius: 4px;
  outline: none;
  padding-left: 40px;
}
.input-userinfo input:focus {
  border-color: #da3c41;
}
.input-userinfo i {
  position: absolute;
  top: 8px;
  padding: 9px 8px;
  transition: 0.3s;
  color: #aaaaaa;
}
.input-userinfo .fa-user{
  left: 0;
}
.input-userinfo .fa-lock{
  left: 3px;
}
.input-userinfo input:focus + i {
  color: #ff7f0099;
}