@media screen and (max-width: 1024px){
  .container,.container2,.container3,.container4 {max-width: 100%; padding: 0 20px; box-sizing: border-box;}
  .sec2 .container4 {padding: 0 !important;}

  header {height: 70px; padding: 10px 20px;}
  header img {width: calc(100% / 2);}
  .visual {aspect-ratio: 11 / 10;}
  .visual .img-box {width: 80vw;}


  section {padding: 50px 0 !important;}
  section.sec1 {padding: 10px !important; box-sizing: border-box;}
  .sec1 .container {padding: 0;}
  section.sec2 {padding: 0 !important;}
  .sec3 .tit {max-width: 66vw; margin-bottom: 30px;}
  .tit {margin-bottom: 30px !important;}

  .sec3 .rolling-item {width: 100%; height: 73vw; margin: 0 auto;}
  .sec3 .rolling-item ul li.active {top: 25.5vw;}
  .sec3 .rolling-item ul li.prev2 {width: 78.5vw;}
  .sec3 .rolling-item ul li.prev {top: 12vw; width: 86.3vw;}
  .sec3 .rolling-item ul li.next {top: 40.5vw; width: 86.3vw;}
  .sec3 .rolling-item ul li.next2 {top: 54vw; width: 78.5vw;}

  .sec4 .tit {max-width: 85.3vw;}

  .sec5 .tit {max-width: 49.5vw;}
  .sec6 .tit {max-width: 47.6vw;}

  footer .img-box {width: 100%;}


  header {height: auto;}
  header .container {padding: 0; gap: 10vw;}
  header a {width: 100%; height: auto;}
  header img {width: 100%; height: auto;;}
  header a:first-of-type {width: 50vw;}
  header a:last-of-type {}

  .sec1 .img-box {padding: 0;}

  .sec1 .link {width: 100%; height: 100%;}
}