

  #overlay {
    display: none;
    background-color: rgba(0, 0, 0, .5);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5000;
  }
  
  /**************** スマホ向けcss *****************/
  @media screen and (max-width:767px){
    .slick-prev,
    .slick-next {
      display: none!important;
    }  
  }
  /**************** header内要素 end *****************/
  
  @media screen and (min-width:768px) and (max-width:900px){
  
  }
  
  @media screen and (min-width:901px) and (max-width:1100px){

  }
  
  @media screen and (min-width:1101px) and (max-width:1300px){
  
  }
  
  @media screen and (min-width:1301px) and (max-width:1500px){
  
  }
  
  @media screen and (min-width:1501px) and (max-width:1700px){
  
  }
  
  @media screen and (min-width:1701px){
  
  }
  
  /* PC&タブレット端末向けCSS */
  @media screen and (min-width:768px) {
  
  }

  
  /* スマホ向けCSS */
  @media screen and (max-width:767px) {
  
  }
  
  
  
  /********************
  loading effects
  ********************/
  .loadingAnim{
      position: fixed;
      z-index: 300;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      display: block;
      width: 100%;
      height: 100%;
      text-align: center;
  }
  .loadingAnim:before,
  .loadingAnim:after{
      line-height: 1;
      position: fixed;
      z-index: 99;
      right: 0;
      left: 0;
      display: block;
      width: 100%;
      height: 50%;
      margin-right: auto;
      margin-left: auto;
      content: ' ';
      transition: all .4s cubic-bezier(.785, .135, .15, .86) 0s;
      transition-delay: .4s;
      background-color:#F1F1F1;
  
  }
  .loadingAnim:before{
      top: 0;
  }
  .loadingAnim:after{
      bottom: 0;
  }
  
  .loaded .loadingAnim:before{
      height: 0;
      -webkit-transform: translateY(-1%);
      -ms-transform: translateY(-1%);
      transform: translateY(-1%);
  }
  .loaded .loadingAnim:after{
      height: 0;
      -webkit-transform: translateY(1%);
      -ms-transform: translateY(1%);
      transform: translateY(1%);
  }
  
  .svg_image{
      line-height: 1;
      position: fixed;
      z-index: 100;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      display: inline-block;
      overflow: hidden;
      width: 100px;
      height: 100px;
      margin: auto;
      transition: all .3s cubic-bezier(.785, .135, .15, .86) 0s;
      transition-delay: .3s;
      text-align: center;
  }
  /*.svg_image:after{
      position: absolute;
      z-index: 100;
      top: 0;
      bottom: 0;
      left: 0;
      display: block;
      width: 0;
      height: 100%;
      margin: auto  auto auto 0;
      content: ' ';
      -webkit-animation: loadingAnim 2s ease-in-out .1s infinite normal backwards;
      animation: loadingAnim 2s ease-in-out .1s infinite normal backwards;
      background-color: #F1F1F1;
      will-change: transform, width;
  }
  .svg_image:before{
      font-family: 'Poppins', sans-serif;
      font-size: 1.25em;
      font-weight: bold;
      font-style: normal;
      line-height: 1;
      display: block;
      -webkit-animation: loadingAnim_text 1s ease .1s infinite alternate both;
      animation: loadingAnim_text 1s ease .1s infinite alternate both;
      letter-spacing: .5em;
      color: #F1F1F1;
      will-change: opacity;
  }*/
  .loaded .svg_image{
      overflow: hidden;
      opacity: 0;
  }
  .loaded .svg_image:after,
  .loaded .svg_image:before{
      -webkit-animation: none;
      animation: none;
  }
  
  
  /********************
  animation setting
  ********************/
  @-webkit-keyframes loadingAnim{
      0%{
          width: 0;
      }
      100%{
          width: 100%;
          -webkit-transform: translate(100%);
          transform: translate(100%);
      }
  }
  @keyframes loadingAnim{
      0%{
          width: 0;
      }
      100%{
          width: 100%;
          -webkit-transform: translate(100%);
          transform: translate(100%);
      }
  }
  @-webkit-keyframes loadingAnim_text{
      0%{
          opacity: 1;
          color: #2AACE3;
      }
      50%{
          color: #2AACE3;
  
      }
      100%{
          opacity: .5;
          color: #F1F1F1;
      }
  }
  @keyframes loadingAnim_text{
      0%{
          opacity: 1;
          color: #2AACE3;
      }
      50%{
          color: #2AACE3;
      }
      100%{
          opacity: .5;
          color: #F1F1F1;
      }
  }

  .main-content {
    padding-top: 40px;
  }

  .main-content > h2 {
    margin: 0;
    color: var(--color-01);
    text-align: center;
    font-size: 32px;
    font-weight: 400;
    line-height: 1.4;
    position: relative;
  }

  .main-content > h2::before {
    content: '';
    width: 59px;
    height: 3px;
    background: var(--color-01);
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    bottom: -10px;
  }
  .main-content > h2.error::before {
      background: #FF0000;
  }

  .error-message-area {
    text-align: center;
    margin: 40px 0 0 0;
    font-size: 16px;
    line-height: 1.6;
    /* color: var(--color-00); */
    white-space: pre-wrap;
  }

  .error-message-area pre {
    text-align: left;
    word-break: break-all;
    white-space: pre-wrap;
    width: 80%;
    margin: 2em auto 2em;
    padding: 10px;
    border: 1px solid #b10000;
    border-radius: 10px;
    background-color: #fff5f5;
    color: #ff0000;
    font-size: 12px;
  }

  .is-invalid {
    color: #ff0000;
    font-size: 12px;
  }

  .main-content_inner {
    display: none;
  }

  .operation-success-message {
    margin-bottom: 24px;
    font-size: 14px;
    background-color: #d9f9fb;
    border-radius: 5px;
    padding: 10px;
  }

  .operation-success-message span {
    color: #0000ff;
  }

  /* .operation-warning-message {
    margin-bottom: 24px;
    font-size: 14px;
    background-color: #fafae8;
    border-radius: 5px;
    padding: 10px;
  }

  .operation-warning-message span {
    color: #b79118;
  } */

  .operation-error-message {
    margin-bottom: 24px;
    font-size: 14px;
    background-color: #fff2f2;
    border-radius: 5px;
    padding: 10px;
  }

  .operation-error-message span {
    color: #ff0000;
  }
  