@media screen and (max-width: 1600px) {
  /* スワイパーの設定 */
  /* ３画面(407 * 3)と左右のマージンの幅(30 * 2) */
  .swiper {
    width: 1281px;
  }
}


@media screen and (max-width: 1288px) {
  /* スワイパーの設定 */
  /* 1画面の幅にする */
  .swiper {
    width: 407px;
  }

  .footer-flex-left {
    margin: 0 16px;
  }

  .footer-flex-right {
    margin: 0 16px;
  }
}

@media screen and (max-width: 1100px) {

  .feature-grid {
    grid-template-columns: 1fr 1fr;
  }


  #feature-more {
    max-width: 378px;
  }




    /* footer */
    footer {
      width: 100vw;
      height: auto;
    }
  
    .footer-contents {
      max-width: 1100px;
      height: auto;
      padding-top: 80px;
    }
  
    .footer-contents h1 {
      font-size: 24px;
    }
  
    .footer-text-wrap {
      max-width: 1100px;
      height: auto;
      width: 100%;
      padding-top: 20px;
    }
  
  
    .footer-flex {
      display: flex;
      flex-direction: column;
      justify-content:unset;
    }
  
    .footer-flex-left {
      width: auto;
      margin: 0 16px;
    }
  
    .footer-flex-left p:nth-child(1) {
      max-width: 1100px;
    }
    
    .footer-flex-left p:nth-child(2) {
      margin-top: 30px;
      max-width: 1100px;
    }
    
    .footer-flex-left p:nth-child(3) {
      margin-top: 30px;
      max-width: 1100px;
    }
  
  
    .footer-flex-right {
      width: auto;
      margin: 0 16px;
      margin-top: 30px;
    }
  
    .footer-flex-right div {
      max-width: 1100px;
      margin: 0 auto;
    }
  
    .footer-flex-right div div:nth-child(7){
      margin: 0 auto;
      margin-top: 20px;
      width: 100%;
      margin-bottom: 80px;
    }

}

@media screen and (max-width: 660px) {

  .about-text {
    max-width: 100%;
  }


  /* ヘッダー */
  .header-logo {
    left: 16px;
  }

  .header-logo h1 {
    font-size: 28px;
  }

  .header-menu {
    right: 16px;
  }

   /* メイン画像 */
   .main-image {
    width: 100vw;
    height: 100vh;
    /* background-image: url(img/main.jpg); */
    background-image: url(img/main2.jpg);
    background-position: center center;
  }

  /* PICK UP */
  main h1 {
    font-size: 24px;
    margin-top: 80px;
    margin-bottom: 20px;
  }



  /* スワイパーの設定 */
  .swiper {
    width: 235px;
    height: 156px;
  }


  /* FEATURE */

  .feature-section h1 {
    font-size: 24px;
    margin-bottom: 20px;
  }

  .feature-grid {
    grid-template-columns: 1fr;
  }

  .feature-card {
    max-width: 343px;
    aspect-ratio: 343 / 367;
  }
  
  .feature-img-style {
    aspect-ratio: 343 / 228;
  }

  .feature-text-box {
    height: 139px;
  }

  .feature-title {
    top: 16px;
    padding: 0 0 0 16px;
  }

  .feature-text {
    top: 45px;
    padding: 0 16px 0 16px;
  }

  .feature-date {
    bottom: 16px;
    padding: 0 16px 0 0;
  }


  /* footer */
  footer {
    width: 100vw;
    height: auto;
  }

  .footer-contents {
    max-width: 660px;
    height: auto;
    padding-top: 80px;
  }

  .footer-contents h1 {
    font-size: 24px;
  }

  .footer-text-wrap {
    max-width: 660px;
    height: auto;
    width: 100%;
    padding-top: 20px;
  }


  .footer-flex {
    display: flex;
    flex-direction: column;
    justify-content:unset;
  }

  .footer-flex-left {
    width: auto;
    margin: 0 16px;
  }

  .footer-flex-left p:nth-child(1) {
    max-width: 660px;
  }
  
  .footer-flex-left p:nth-child(2) {
    margin-top: 30px;
    max-width: 660px;
  }
  
  /* .footer-flex-left p:nth-child(3) {
    margin-top: 30px;
    max-width: 660px;
  } */


  .footer-flex-right {
    width: auto;
    margin: 0 16px;
    /* margin-top: 30px; */
  }

  .footer-flex-right div {
    max-width: 660px;
    margin: 0 auto;
  }

  .footer-flex-right div div:nth-child(7){
    margin: 0 auto;
    margin-top: 20px;
    width: 100%;
    margin-bottom: 80px;
  }


}