@charset "utf-8";
@media screen and (max-width: 767px){
  #topPage .headerarea{
    width: 100%;
    position: absolute;
    top: 60px;
    left: 0;
    z-index: 2;
  }
  .h-logo{
    width: 60%;
    margin: 0 auto;
  }
  .top-area{
    position: relative;
  }
  .top-txt{
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: 20%;
    left: 0;
  }
  .top-guide{
    position: relative;
    z-index: 2;
    justify-content: center;
    margin: -10px auto 60px;
  }
  .top-guide li{
    width: 134px;
  }
  .top-guide li:not(:last-child){
    margin-right: 15px;
  }
  .top-guide li a{
    display: block;
    text-align: center;
    box-shadow: 0px 6px 14px -5px #a8a8a8;
    border-radius: 3px;
    color: var(--gray05);
    background-color: var(--blue02);
    font-weight: bold;
    padding: 10px 0;
  }
  .nav li a{
    background-color: var(--gray01);
  }
  .cio2-area{
    margin-bottom: 40px;
  }
  .cio2-ttl{
    color: var(--blue03);
    font-weight: bold;
    font-size: 20px;
  }
  .cio2-img{
    width: 80%;
    margin: 20px auto;
  }
  .cio2-txt{
    color: var(--gray03);
    line-height: 1.8;
  }
  .cio2-txt p:not(:last-child){
    margin-bottom: 20px;
  }
}