/*------------------------------------------------------------------------------
  PC or ALL 
------------------------------------------------------------------------------*/

.header-nav .en{font-weight: bold;}

.mainvisual{
  margin-left: 320px;
  overflow: visible;
  .mainvisual-catch{
    top: 30%;
    bottom: auto;
    left: -250px;
    font-size: 9rem;
    color: #333;
  }
}

.home .page-content{

  .box-wrap.sm{
    max-width: 1120px;
  }
  .title-type02 span:nth-child(2), .title-type04 span:nth-child(2){
    opacity: 1;
    font-weight: normal;
  }

  .main-cat {
    & ul{
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 4vmin;
    }
    & li{
      margin: 0;
      padding: 0;
      list-style: none;
    }
  }

  .main-rec{
    margin-bottom: 0;
    .banner-type03 .box-ul{
      grid-template-columns: repeat(4, 1fr);
      & li{
        background: none;
      }
      .image{
        margin-bottom: 20px;
      }
      .text{
        padding: 0;
        color: #222;
        .ja{
          font-size: 16px;
          font-weight: normal;
        }
      }
    }
  }

  .main-about{
    padding-bottom: 9vmin;
    background: #f2f0ea;
    text-align: center;
    .text{
      background: #f2f0ea;
    }
    .btn{
      display: flex;
      justify-content: center;
      gap: 40px;
      & a{margin: 0;}
    }
  }
}

/*------------------------------------------------------------------------------
  TABLET and SHONE
------------------------------------------------------------------------------*/
@media screen and (max-width: 1024px) {
.mainvisual{
  margin-left: 0;
  overflow: visible;
  .mainvisual-catch{
    left: 2vw;
    text-shadow: #fff 1px 0 10px;
    text-align: left;
  }
}

.home .page-content{
  .box-wrap.sm{
    padding: 0;
  }
  .main-cat {
    & ul{
      grid-template-columns: repeat(1, 1fr);
      gap: 2vmin;
    }
  }
  .main-rec {
    .banner-type03 .box-ul {
      grid-template-columns: repeat(2, 1fr);
    }
    .banner-type03 .box-ul li{
      display: block;
      & > div{
        width: 100%;
      }
    }
  }
  .main-about .btn{
    flex-flow: column;
    gap: 20px;
  }
}

}

/*------------------------------------------------------------------------------
  TABLET ONLY
------------------------------------------------------------------------------*/
@media screen and (min-width: 600px) and (max-width: 1024px) {
}

/*------------------------------------------------------------------------------
  SPHONE ONLY
------------------------------------------------------------------------------*/
@media screen and (max-width: 599px) {
}