/*---------------------------------*/
  /* 基本のスタイル */
  /*---------------------------------*/

  html, body {
    padding: 0;
    margin: 0;
    height: 100%;
  }

  body {
    font-family: 'Arial',YuGothic,'Yu Gothic','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','メイリオ', Meiryo,'ＭＳ ゴシック',sans-serif;
    font-family: "Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;
    background : #fff;
    background-image: url("../images/background.png"); /* �lj� �w�i�摜�w�� */
    background-size:  cover;
    min-height: 100%;
    position: relative;
    -webkit-text-size-adjust: none;
    overflow: hidden;
    margin:0;
    font-size:14px;
  }

  body * {
    text-shadow: none;
  }
  footer {  /*<footer class="footer">*/
    text-align:center;
		position: absolute;
		bottom: 0;
		width: 100%;
		/* Set the fixed height of the footer here */
		/*height: 50px;*/
	}

  /*---------------------------------*/
  /* メニューのスタイル */
  /*---------------------------------*/

  #menu {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 260px;
    left: -260px;
    height: 100%;
    -webkit-transform: translate(0px, 0px);
    -moz-transform: translate(0px, 0px);
    -o-transform: translate(0px, 0px);
    -ms-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
    -webkit-transition: 0.30s ease;
    -moz-transition: 0.30s ease;
    -o-transition: 0.30s ease;
    transition: 0.30s ease;
    background-color:#fff;
    z-index: 1;
  }
    
  #menu.active {
    -webkit-transform: translate(260px, 0px);
    -moz-transform: translate(260px, 0px);
    -o-transform: translate(260px, 0px);
    -ms-transform: translate(260px, 0px);
    transform: translate(260px, 0px);
  }
    
  .container {
    width: 100%;
    -webkit-transform: translate(0px, 0px);
    -moz-transform: translate(0px, 0px);
    -o-transform: translate(0px, 0px);
    -ms-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
    -webkit-transition: 0.30s ease;
    -moz-transition: 0.30s ease;
    -o-transition: 0.30s ease;
    transition: 0.30s ease;  
  }
    
  .container.active {
    -webkit-transform: translate(260px, 0px);
    -moz-transform: translate(260px, 0px);
    -o-transform: translate(260px, 0px);
    -ms-transform: translate(260px, 0px);
    transform: translate(260px, 0px);
  }
    
  ul, ol {
    list-style: none;
    text-decoration: none;
    margin: 0;
    padding: 0;
  }
    
  #menu ul.mobile-nav > li > a {
    background: #3C4858;
    color: #FFFFFF;
    font-size: 14px;
  }
    
  .sub-menu {
    text-transform: uppercase;
  }
    
  .sub-menu li a {
    display: block;
    color: #777779;
    padding: 15px 30px;
    border-top: 1px solid #fff;
    text-decoration: none;
  }
    
  .sub-menu li a:hover{
    background: #004BA5;
    color: #FFFFFF;
    font-weight:bold;
  }

  /*---------------------------------*/
  /* ヘッダーアイコン */
  /*---------------------------------*/
    
  #nav-icon {
    width: 30px;
    height: 20px;
    display: block;
    position: absolute;
    top: 20px;
    left: 20px;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    cursor: pointer;
    display: block;
  }
    
  #nav-icon span {
    display: block;
    position: absolute;
    height: 3px;
    width: 100%;
    background: #fff;
    opacity: 1;
    left: 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
  }
    
  #nav-icon {
    text-decoration: none;
    color: #fff;
    font-family: 'PT Sans';
  }
    
  /*#nav-icon:after {
    content: "SMART-G Expert";
    margin-left: 40px;
    font-family: "Arial";*/
    /*font-weight:bold;*/
    /*white-space:nowrap;
    font-size: 24px;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 0.95em;
  }*/

  /*----------20220704漁協名追加----------*/

  #JFK-img{
    margin-top: -0.32em;
    margin-right: 0.3em;
    width: 50px;
    height: 50px;
  }
  #top-titleKF{
    padding-left: 1.85em;
    margin-top: -0.35em;
    position: absolute;
    font-family: "Arial";
    color: white;
    white-space:nowrap;
    font-size: 24px;
    text-transform: uppercase;
    text-decoration: none;
  }
  /*----------20220704追加終了----------*/
    
  #nav-icon span:nth-child(1) {
    top: 0px;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
  }
    
  #nav-icon span:nth-child(2) {
    top: 8px;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
  }
    
  #nav-icon span:nth-child(3) {
    top: 16px;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
  }
    
  /* ヘッダーアイコンのアニメーション */
    
  .active #nav-icon span:nth-child(1) {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    top: -3px;
    left: 8px;
  }
    
  .active #nav-icon span:nth-child(2) {
    width: 0%;
    opacity: 0;
  }
    
  .active #nav-icon  span:nth-child(3) {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    top: 19px;
    left: 8px;
  }
    
  #menu.active {
    overflow-y: hidden;
    overflow-x: hidden;
  }

  /*---------------------------------*/
  /* カードのスタイル */
  /*---------------------------------*/

  .card {
    background: #fff;
    border-radius: 2px;
    height: 300px;
    margin: 1rem;
    width: 300px;
  }

  .card-1 {
    /*box-shadow: 0 1px 3px #F5F5F5, 0 1px 3px #F5F5F5;*/
    /*transition: all 0.3s cubic-bezier(.25,.8,.25,1);*/
  }

  .card-1:hover {
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
  }
  .card-2 {
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  }
  .card-3 {
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
  }
  .card-4 {
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
  }
  .card-5 {
    box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
  }
  .opacity {
    opacity: 0.5;
  }

  /*---------------------------------*/
  /* テーブルのスタイル */
  /*---------------------------------*/

  table.table01 {
    width:100%;
    /*border-right:#3EB1C6 solid 1px;*/
    border-collapse: collapse;
  }
  table.table01 thead th {
    background:#222B35;
    color:#FFF;
    padding:8px 8px;
    border-left:#FFF solid 1px;
    border-right:#FFF solid 1px;
    border-bottom:#FFF solid 1px;
    border-top:#fff solid 1px;
  }
  table.table01 thead th:last-child {
    border-right:#fff solid 1px;
  }
  table.table01 tbody th {
    background:#222B35;
    color:#FFF;
    padding:8px 8px;
    border-bottom:#FFF solid 1px;
    vertical-align:top;
  }
  table.table01 tbody tr:last-child th {
    border-bottom:#808080 solid 1px;
    border-right:#808080 solid 1px;
  }
  table.table01 tbody tr:last-child td {
    border-bottom:#808080 solid 1px;
    border-right:#808080 solid 1px;
  }
  table.table01 tbody td {
    /*background:#00796B;*/
    background:#E6E9EE;
    padding:8px 8px;
    /*
    border-left:#fff solid 1px;
    border-bottom:#fff solid 1px;
    border-right:#fff solid 1px;
    */
    border-left:#808080 solid 1px;
    border-bottom:#808080 solid 1px;
    border-right:#808080 solid 1px;
    vertical-align:top;
    cursor:pointer;
    /*color:#fff;*/
    color:#222B35;
  }
  table.table01 tbody tr:nth-child(odd) td {
    /*background: #1D594E;*/
    background: #fff;
  }
 
  @media screen and (max-width: 640px) {
    table.table01 thead {
      display:none;
    }
    table.table01 tbody th {
      display:block;
    }
    table.table01 tbody td {
      display:block;
    }
    table.table01 tbody td::before {
      content: attr(label);
      float: left;
      clear:both;
      font-weight:bold;
    }
    table.table01 tbody td p {
      padding-left:6em;
    }
  }

  /*---------------------------------*/
  /* inputのスタイル */
  /*---------------------------------*/

  input {
    font-size:14px;
    padding:10px 10px 10px 5px;
    display:block;
    color: #000;

    border:none;
    border-bottom:1px solid #757575;
  }
  input:focus         { outline:none; }

  input::placeholder {
    color: #757575;
  }


  /* テキストボックスのフォカース時アニメーション */
  .bar    { position:relative; display:block;  }
  .bar:before, .bar:after     {
    content:'';
    height:2px; 
    width:0;
    bottom:1px; 
    position:absolute;
    background:#5264AE; 
    transition:0.2s ease all; 
    -moz-transition:0.2s ease all; 
    -webkit-transition:0.2s ease all;
  }
  .bar:before {
    left:50%;
  }
  .bar:after {
    right:50%; 
  }

  /* active state */
  input:focus ~ .bar:before, input:focus ~ .bar:after {
    width:50%;
  }

  /* ハイライトのアニメーション */
  .highlight {
    position:absolute;
    height:60%; 
    width:100px; 
    top:25%; 
    left:0;
    pointer-events:none;
    opacity:0.5;
  }
  input:focus ~ .highlight {
    -webkit-animation:inputHighlighter 0.3s ease;
    -moz-animation:inputHighlighter 0.3s ease;
    animation:inputHighlighter 0.3s ease;
  }

  /* ANIMATIONS ================ */
  @-webkit-keyframes inputHighlighter {
    from { background:#5264AE; }
    to    { width:0; background:transparent; }
  }
  @-moz-keyframes inputHighlighter {
    from { background:#5264AE; }
    to    { width:0; background:transparent; }
  }
  @keyframes inputHighlighter {
    from { background:#5264AE; }
    to    { width:0; background:transparent; }
  }

  /*---------------------------------*/
  /*チェックボックス*/
  /*---------------------------------*/

  .checkbox{
    margin-bottom: 1.5em;
  }
  .checkbox-input{
    display: none;
  }
  .checkbox-parts{
    padding-left: 23px;
    position:relative;
  }
  .checkbox-parts::before{
    content: "";
    display: block;
    position: absolute;
    top: 0px;
    left: 0;
    width: 15px;
    height: 15px;
    border: 1px solid #999;
    border-radius: 4px;
  }
  /*.checkbox-input:checked + .checkbox-parts{
    color: #009a9a;
  }*/
  .checkbox-input:checked + .checkbox-parts::after{
    content: "";
    display: block;
    position: absolute;
    top: -3px;
    left: 5px;
    width: 7px;
    height: 14px;
    animation: check .1s forwards;
    transform: rotate(40deg);
    border-bottom: 3px solid #00A99A;
    border-right: 3px solid #00A99A;
  }
  @keyframes check {
    0% {
      width: 0px;
      height: 0px;
      top: 9px;
      left: 5px;
    }
    20% {
      width: 7px;
      height: 0px;
      top: 9px;
      left: 2px;
    }
    50% {
      top: 9px;
      left: 2px;
      width: 7px;
      height: 0px;
    }
    100% {
      width: 7px;
      height: 14px;
    }
  }

  /*---------------------------------*/
  /* タブ のスタイル */
  /*---------------------------------*/
  .radio {
    display: none;
  }
  .radio + label{
    display: block;
    float: left;
    cursor: pointer;
    width: 65px;
    margin: 0;
    padding: 12px 5px;
    border-right: 1px solid #abb2b7;
    background: #bdc3c7;
    color: #555e64;
    font-size: 14px;
    text-align: center;
    line-height: 1;
    transition: .2s;
  }
  .radio + label:first-of-type{
    border-radius: 3px 3px 03px 3px;
  }
  .radio + label:last-of-type{
    border-right: 0px;
    border-radius: 3px 3px 3px 3px;
  }
  .radio:checked + label {
    background-color: #009688;
    color: #fff;
  }

/*
  .radio {
    display: none;
  }
  .radio + label {
    position: relative;
    padding-top:2px;
    padding-left: 20px;
    font-weight:normal;
    color:#808080;
    margin-right:2px;
  }
  .radio + label::before {
    content: "";
    display: block;
    box-sizing: border-box;
    position: absolute;
    top: 4px;
    left: 2px;
    width: 16px;
    height: 16px;
    border: 2px solid #9E9E9E;
    border-radius: 50%;
    transition: .2s;
  }
  .radio:checked + label::before {
      border: 2px solid #3EB1C6;
  }
  .radio + label::after {
      content: "";
      display: block;
      box-sizing: border-box;
      position: absolute;
      top: 8px;
      left: 6px;
      width: 8px;
      height: 8px;
      background-color: #3EB1C6;
      border-radius: 50%;
      transform: scale(0);    
      transition: .175s;
  }
  .radio:checked + label::after {
      transform: scale(1);
  }
  */

  /*---------------------------------*/
  /* ボタンのスタイル */
  /*---------------------------------*/

  .button {
    display: inline-block;
    /*margin: 0.3em;*/
    padding: 1.2em 4em;
    overflow: hidden;
    position: relative;
    text-decoration: none;
    text-transform: uppercase;
    border-radius: 3px;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
    box-shadow: 0 2px 2px rgba(0,0,0,0.5);
    border: none; 
    font-size: 15px;
    text-align: center;
    outline:none;
  }
  .button:hover {
    box-shadow: 1px 6px 15px rgba(0,0,0,0.5);
  }
  .button-mini {
    display: inline-block;
    /*mind 20210201 Start*/
    /*margin: 0.3em;*/
    margin: 15px 2px;
    /*mind 20210201 end*/
    padding: 1em 4em 1em 4em;
    overflow: hidden;
    position: relative;
    text-decoration: none;
    text-transform: uppercase;
    border-radius: 3px;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
    box-shadow: 0 2px 6px rgba(0,0,0,0.5);
    border: none; 
    font-size: 25px;
    text-align: center;
    /*mind 20210201 Start*/
        outline:none;
    /*mind 20210201 end*/
  }
  .button-mini:hover {
    box-shadow: 1px 6px 15px rgba(0,0,0,0.5);
  }
  .green {
    background-color: #005159;
    border:1px solid #005159;
    font-size: 25px;
    color: white;
  }
   /*mind 20210201 Start*/
   .green:active{
    background-color:#3d8c40;
    color:#e3f2e1;
    -webkit-box-shadow:inset 0px 0px 2px #334c66;
    -moz-box-shadow:inset 0px 0px 2px #3a6da0;
    box-shadow:inset 0px 0px 2px #3a6da0;
}
  .green2 {
    background-color: #02A99A;
    border:1px solid #02A99A;
    font-size: 25px;
    color: white;
  }
  /*mind 20210201 Start*/
    .green2:active{
      background-color:#02A99A;
      color:#e3f2e1;
      -webkit-box-shadow:inset 0px 0px 2px #334c66;
      -moz-box-shadow:inset 0px 0px 2px #3a6da0;
      box-shadow:inset 0px 0px 2px #3a6da0;
  }
  /*mind 20210201 end*/
  .red {
    background-color: #F44336;
    color: white;
  }
  /*mind 20210201 Start*/
    .red:active{
      background-color:#e21b0c;
      color:#ffded4;
      -webkit-box-shadow:inset 0px 0px 2px #334c66;
      -moz-box-shadow:inset 0px 0px 2px #3a6da0;
      box-shadow:inset 0px 0px 2px #3a6da0;
  }
  /*mind 20210201 end*/
  .blue {
    background-color: #004BA0;
    color: white;
  }
  /*mind 20210201 Start*/
    .blue:active{
      background-color:#0287c3;
      color:#dfeaf5;
      -webkit-box-shadow:inset 0px 0px 2px #334c66;
      -moz-box-shadow:inset 0px 0px 2px #3a6da0;
      box-shadow:inset 0px 0px 2px #3a6da0;
  }
  /*mind 20210201 end*/
  .blue2:active{
    background-color:#0097A7;
    color:#e0ebf5;
    -webkit-box-shadow:inset 0px 0px 2px #334c66;
    -moz-box-shadow:inset 0px 0px 2px #3a6da0;
    box-shadow:inset 0px 0px 2px #3a6da0;
}
  .blue2 {
    background-color: #3EB1C6;
    color: white;
  }
  .white {
    background-color: #fff;
    border:1px solid #616161;
    color: #616161;
  }
  /*mind 20210201 Start*/
    .white:active{
      background-color:#f5f5f5;
      -webkit-box-shadow:inset 0px 0px 2px #334c66;
      -moz-box-shadow:inset 0px 0px 2px #3a6da0;
      box-shadow:inset 0px 0px 2px #3a6da0;
  }
  /*mind 20210201 end*/
  .grey {
    background-color: #808080;
    border:1px solid #808080;
    color: #fff;
  }
  .grey:active{
    background-color:#666;
    color:#fff !important;
    -webkit-box-shadow:inset 0px 0px 2px #334c66;
    -moz-box-shadow:inset 0px 0px 2px #3a6da0;
    box-shadow:inset 0px 0px 2px #3a6da0;
  }
  /*mind 20210201 end*/
  .ripple {
    position: absolute;
    background: rgba(0,0,0,.25);
    border-radius: 100%;
    transform: scale(0.2);
    opacity:0;
    pointer-events: none;
    -webkit-animation: ripple .75s ease-out;
    -moz-animation: ripple .75s ease-out;
    animation: ripple .75s ease-out;
  }
  @-webkit-keyframes ripple {
    from {
      opacity:1;
    }
    to {
      transform: scale(2);
      opacity: 0;
    }
  }
  @-moz-keyframes ripple {
    from {
      opacity:1;
    }
    to {
      transform: scale(2);
      opacity: 0;
    }
  }
  @keyframes ripple {
    from {
      opacity:1;
    }
    to {
      transform: scale(2);
      opacity: 0;
    }
  }

  /*mind 20210201 Start*/
    .tenkey-style {
      width:120px;
      height:120px;
      margin-top:10px;
      margin-left:30px;
      padding:18px;
      border-radius:100%;
    }
    .tenkey-mini-style {
      width:115px;
      height:115px;
      margin-top:10px;
      margin-left:10px;
      padding:15px;
      border-radius:100%;
    }
    .tenkey-mini-style-s {
      width:125px;
      height:115px;
      margin-top:10px;
      margin-left:10px;
      padding:15px;
      border-radius:12px;
    }
  /*mind 20210201 end*/

  /*---------------------------------*/
  /* ナビゲーションボタン のスタイル */
  /*---------------------------------*/

  .button-Nav {
    position: absolute;
    width: 55px;
    height: 55px;
    background: #CC2A41;
    top: 90%;
    left: 95%;
    transform: translate(-50%, -50%) rotate(0deg);
    border-radius: 50%;
    cursor: pointer;
    z-index: 100;
    transition: 0.4s cubic-bezier(0.2, 0.6, 0.3, 1.1);
  }
  
  .button-Nav:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 2px;
    width: 50%;
    background: white;
  }
  
  .button-Nav:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 50%;
    width: 2px;
    background: white;
  }
  
  .button-Nav.clicked {
    transform: translate(-50%, -50%) rotate(360deg);
    background: #70975B;
  }
  
  .button-Nav.clicked:before {
    width: 0;
  }

  /*---------------------------------*/
  /* セレクトボックス のスタイル */
  /*---------------------------------*/

  select{
    border:none;
    outline:none;
    display: inline-block;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    cursor:pointer;

    /* mind 20210204 Start */
    /*font-size:14px !important;*/
    font-size:16px !important;
    /* mind 20210204 End */
    font-weight:normal;
    color:#000;
    border-radius:0;
    width:275px;
    z-index:2;
    background:transparent;
  }
  .label{
    box-shadow:0 1px 2px rgba(0,0,0,.2);
    border:1px solid #c0c0c0;
    padding:8px;
    background:white;
    
    /* mind 20210204 Start */
    /*width:260px;*/
    width:300px;
    /* mind 20210204 End */
    display:inline-block;
    position:relative;
    margin-top:px;
  }
  .label:after{
    content:"\25bc";
    font-size:12px;
    color:white;
    background:#0078DB;
    width:32px;
    text-align:center;
    line-height:2.7em;
    top:0;
    right:0;
    bottom:0;
    position:absolute;
    pointer-events:none;
  }
  option{
    border-bottom:1px solid #eaeaea;
    border-left:3px solid white;
    appearance:none;
  }
  option:hover{
    background-color:white;
    border-left:3px solid #f3a1a1;
  }

  /* mind 20210204 Start */
  .syozoku{
    
  }
  /* mind 20210204 End */

  /*---------------------------------*/
  /* タブ のスタイル */
  /*---------------------------------*/

  .nav-tabs-extend-tabMenu li a {
    height:30px;
    color:#00A99A;padding:2px 20px;
    height:30px;padding:5px;color:#00A99A;font-weight:bold;
  }
  .nav li a:hover, .nav li a:focus {
    text-decoration: none;
    background-color: #ebccd1;
  }
  /*
  .nav-extend-menu li.active a, .nav-extend-menu li.active a:hover, .nav-extend-menu li.active a:focus {
    color: #fff;
    background-color:#d69090;padding:2px 20px;
    background-color:#cd5c5c;color:#fff;
  }
  */
  .tab_item {
    width:40px;
    height: 30px;
    /*border-bottom: 3px solid #5ab4bd;*/
    background-color: #fff;
    line-height: 30px;
    text-align: center;
    color: #333;
    display: block;
    float: left;
    text-align: center;
    font-weight: bold;
    cursor:pointer;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    margin-bottom:0;
  }
  .tab_item:hover {
    opacity: 0.75;
  }
  input[name="tab_item"] {
    display: none;
  }

  /*タブ切り替えの中身のスタイル*/
  .tab_content {
    display: none;
    padding: 10px;
    overflow: hidden;
    border: 3px solid #333;
    background-color: #eee;
  }
  /*選択されているタブのコンテンツのみを表示*/
  #tab_1:checked ~ #tab_1_content,
  #tab_2:checked ~ #tab_2_content,
  #tab_3:checked ~ #tab_3_content,
  #tab_4:checked ~ #tab_4_content,
  #tab_5:checked ~ #tab_5_content,
  #tab_6:checked ~ #tab_6_content,
  #tab_7:checked ~ #tab_7_content,
  #tab_8:checked ~ #tab_8_content,
  #tab_9:checked ~ #tab_9_content,
  #tab_10:checked ~ #tab_10_content,
  #tab_11:checked ~ #tab_11_content,
  #tab_12:checked ~ #tab_12_content,
  #tab_13:checked ~ #tab_13_content,
  #tab_14:checked ~ #tab_14_content,
  #tab_15:checked ~ #tab_15_content,
  #tab_16:checked ~ #tab_16_content,
  #tab_17:checked ~ #tab_17_content,
  #tab_18:checked ~ #tab_18_content,
  #tab_19:checked ~ #tab_19_content,
  #tab_20:checked ~ #tab_20_content,
  #tab_21:checked ~ #tab_21_content,
  #tab_22:checked ~ #tab_22_content,
  #tab_23:checked ~ #tab_23_content,
  #tab_24:checked ~ #tab_24_content,
  #tab_25:checked ~ #tab_25_content,
  #tab_26:checked ~ #tab_26_content,
  #tab_27:checked ~ #tab_27_content,
  #tab_28:checked ~ #tab_28_content,
  #tab_29:checked ~ #tab_29_content,
  #tab_30:checked ~ #tab_30_content,
  #tab_31:checked ~ #tab_31_content,
  #tab_32:checked ~ #tab_32_content,
  #tab_33:checked ~ #tab_33_content
  {
    display: block;
  }

  /*選択されているタブのスタイルを変える*/
  .tabs input:checked + .tab_item {
    background-color: #333;
    color: #fff;
  }
  
  /*---------------------------------*/
  /* jQuery-UI のスタイル */
  /*---------------------------------*/

  .ui-widget-header {
    padding:5px;
    /*height: 25px;*/
    border: 0px solid #000;
    background: #fff;
    color: #000; font-size:14px;font-weight: bold;
  }
  .ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
    border: 1px solid #00A99A;
    background: #00A99A;
    color: #fff;
  }

  /* mind 20210202 Start */
  .ui-datepicker {
    width:350px;
    height:350px;
    font-size:23px;
  }
  .ui-dialog .ui-dialog-titlebar {
    font-size:16px;
  }
  
  .ui-datepicker-header {
   font-size:23px;
  }
  /* mind 20210202 Start */
  
  /*---------------------------------*/
  /* ローディング のスタイル */
  /*---------------------------------*/

	#loader {
		position: fixed;
		top: 50%;
		left: 50%;
		width: 200px;
		height: 200px;
		margin-top: -100px;
		margin-left: -100px;
		text-align: center;
		color: #fff;
		z-index: 2;
	}
	#loader-bg {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0px;
		left: 0px;
		background: #fff;
		z-index: 1;
	}
  .load-wrapp {
    float: left;
    width: 100px;
    height: 100px;
    margin: 0 10px 10px 0;
    padding: 20px 20px 20px;
    border-radius: 5px;
    text-align: center;
    background-color: #d8d8d8;
  }
  .load-wrapp p {
    padding: 0 0 20px;
  }
  .load-wrapp:last-child {
    margin-right: 0;
  }
  .ring-2 {
    position: relative;
    width: 45px;
    height: 45px;
    margin: 0 auto;
    border: 4px solid #00A99A;
    border-radius: 100%;
  }
  .ball-holder {
    position: absolute;
    width: 12px;
    height: 45px;
    left: 17px;
    top: 0px;
  }
  .ball {
    position: absolute;
    top: -11px;
    left: 0;
    width: 16px;
    height: 16px;
    border-radius: 100%;
    background: #00A99A;
  }
  .load-5 .ball-holder {
    animation: loadingE 1.3s linear infinite;
  }
  @keyframes loadingE {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

  /*---------------------------------*/
  /* メインコンテンツ のスタイル */
  /*---------------------------------*/
  #mainContents {
    margin:0 auto;
    min-width:920px;
    overflow:auto;
    max-width:2080px;
  }
  .mainContents {
    overflow:hidden;
    background-color:#fff;
    padding-top: 1.5em;
    padding-left: 2.0em;
  }
  .mainContents-title {
    font-weight:bold;
    padding:0px 10px 5px;
    color:#3C4858;
  }
  .float-left {
    float:left;margin-left:10px;
  }
  .float-clear {
    clear:both;
  }
  /*---------------------------------*/
  /* ホーム画面 のスタイル */
  /*---------------------------------*/
  .card-wrap {
    width:100%;height:190px;
    /*border-radius:8px;*/
    border-radius:8px;
  }
  .card-wrap-title {
    font-weight:normal;
    padding-top:10px;font-size:18px;color:#00796B;text-align:center;padding:10px;
  }
  .card-wrap-content {
    border-radius:20px;
    float:left;
    width:240px;
    height:170px;
    text-align:center;
    cursor:pointer;
    border:2px solid #004BA5;
  }
  .card-wrap-content:hover {
    background-color:#004BA5;
    color: #ffffff;
  }
  /*mind 20210201 Start*/
    .card-wrap-content:active{
      background-color:#f5f5f5;
      -webkit-box-shadow:inset 0px 0px 2px #334c66;
      -moz-box-shadow:inset 0px 0px 2px #3a6da0;
      box-shadow:inset 0px 0px 2px #3a6da0;
  }
  /*mind 20210201 end*/
  .card-icon{
    color:#00A99A;margin-top:10px;
  }
  .card-title{
    margin-top:5px;
  }
  .card-wrap-content-first {
    margin-left:20px;
  }
  
  
  
  #nav-drawer {
    position: relative;
    background: #004BA5;
    margin-top:3px;
    cursor:pointer;
  }
  
  /*チェックボックス等は非表示に*/
  .nav-unshown {
    display:none;
  }
  
  /*アイコンのスペース*/
  #nav-open {
    display: inline-block;
    width: 45px;
    height: 27px;
    vertical-align: middle;
    padding:7px 10px 5px 10px;
    cursor:pointer;
  }
  
  /*ハンバーガーの形をCSSで表現*/
  #nav-open span, #nav-open span:before, #nav-open span:after {
    position: absolute;
    height: 3px;/*線の太さ*/
    width: 25px;/*長さ*/
    border-radius: 3px;
    background: #fff;
    display: block;
    content: '';
    cursor: pointer;
  }
  #nav-open span:before {
    bottom: -8px;
  }
  #nav-open span:after {
    bottom: -16px;
  }
  
  /*閉じる用の薄黒箇所*/
  #nav-close {
    display: none;
    position: fixed;
    z-index: 99;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*background: black;*/
    opacity: 0;
    transition: .3s ease-in-out;
  }
  
  /*メニューの中身*/
  #nav-content {
    overflow: auto;
    position: fixed;
    top: 0;
    left: -10px;
    z-index: 9999;
    width: 90%;
    max-width: 300px;/*最大幅（お好みで調整を）*/
    background: #fff;
    transition: .3s ease-in-out;
    -webkit-transform: translateX(-105%);
    transform: translateX(-105%);
  }
  
  /*チェックがついたら表示させる*/
  #nav-input:checked ~ #nav-close {
    display: block;
    opacity: .5;
  }
  
  #nav-input:checked ~ #nav-content {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
    box-shadow: 6px 0 25px rgba(0,0,0,.15);
  }
  
  .header-logo-menu{
   display: flex;
   display: -moz-flex;
   display: -o-flex;
   display: -webkit-flex;
   display: -ms-flex;
   flex-direction: row;
   -moz-flex-direction: row;
   -o-flex-direction: row;
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
  }
  
  /*ロゴやサイトタイトルをセンタリング*/
  .logo-area{
    text-align:left;
    font-weight:bold;
    color:#fff;
  }
  /*---------------------------------*/
  /* 2023 fukui マスタ画面　スタイル */
  /*---------------------------------*/
  #fileLabel{
    font-size: 15px;
    font-family: FontAwesom;
    color: #ffffff;
    background-color: #808080;
    padding: 7px 20px 7px 15px;
    border-radius: 3px;
    margin-top: 5px;
    font-weight: lighter;
    transition: 0.3s;
    box-shadow: 0 2px 2px rgba(0,0,0,0.5);
  }
  #fileLabel:hover{
    box-shadow: 1px 6px 15px rgba(0,0,0,0.5);
  }
  #uploadfilename{
    margin: auto 10px;
  }
  
  .form-control[disabled] {
    background-color: #777779;
  }


  
  .sample input{
	display: none;
}
.sample label{
	display: block;
	float: left;
	cursor: pointer;
	width: 70px;
	margin: 0;
	padding: 6px 5px;
	border-right: 1px solid #abb2b7;
	background: #bdc3c7;
	color: #555e64;
	font-size: 16px;
	text-align: center;
	line-height: 1;
	transition: .2s;
}
.sample label:first-of-type{
	border-radius: 3px 0 0 3px;
}
.sample label:last-of-type{
	border-right: 0px;
	border-radius: 0 3px 3px 0;
}
.sample input[type="radio"]:checked + label {
	background-color: #305496;
	color: #fff;
}
.form-control[readonly] {
  background-color:#fff;
  padding:6px;
}
.form-control[readonly]:hover {
  cursor:pointer;
}
/* クリックすると行の色が変わるテーブル */
.selected {
  background-color: #ffc0cb !important;
}
.custum-checkbox {
  position: relative;
  padding-left: 18px;
  cursor: pointer;
  user-select: none;
  font-weight:normal;
  padding-bottom:10px;
 }
  
  
 .custum-checkbox input {
  display: none;
 }
  
  
 .custum-mark {
  position: absolute;
  top: 0px;
  left: 3px;
  height: 20px;
  width: 20px;
  border: solid 2px gray;
  border-radius: 5px;
  box-sizing: border-box;
  background-color:#fff;
 }
  
 .custum-mark:after {
  content: "";
  position: absolute;
  left: 5px;
  top: 2px;
  width: 6px;
  height: 11px;
  border: solid #ffffff;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
  opacity: 0;
 }
  
  
 .custum-checkbox input:checked + .custum-mark {
  background: #6495ed;
  border-color: #6495ed;
 }
  
  
 .custum-checkbox input:checked + .custum-mark:after {
  opacity: 1;
 }
 .no-spin::-webkit-inner-spin-button,
.no-spin::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
    -moz-appearance:textfield;
}