@charset "UTF-8";

html {
  scroll-behavior: smooth;
}

.container{
  background: #000 url(../img/sp/title.webp) no-repeat top center;
  background-size: 100%;
}

.container h1{
  display: none;
}
.container .item-sp{
  padding: 8vw;
}
.container .item-sp article{
  margin-bottom: 8vw;

}
.container .item-sp article .photo{
  margin-bottom: 4vw;
}

.container .item-sp.upper{
  padding: 59.55vw 8vw 8vw;
}
.container .item-sp.white{
  background: #fff;
}
.container .item-pc{
  display: none;
}

footer{
  padding: 4vw 8vw;
  background-color: #fff;
}

footer nav{
  display: flex;
  justify-content: space-between;
  gap: 8vw;
}
footer small{
  display: block;
  width: 20vw;
  margin: 0 auto;
  padding: 4vw 0 0;
}

@media screen and (min-width: 769px) {
  .container{
    background: #000 url(../img/pc/main.webp) no-repeat top center;
    background-size: 100%;
  }
  .container h1{
    display: block;
    max-width: 1090px;
    margin: 0 auto;
    padding: 120px 0;
  }
  .container .item-sp{
    display: none;
  }
  .container .item-pc{
    display: block;
    max-width: 1300px;
    margin: 0 auto 120px;
  }
  .container .item-pc article{
    position: relative;
    margin-bottom: 120px;
  }
  .container .item-pc article .more{
    position: absolute;
    width: 13%;
  }
  .container .item-pc.white article{
      background: #fff;
  }
  .container .item01 .more{
    right: 16.75%;
    top: 57%;
  }
  .container .item02 .more{
    right: 62%;
    top: 50%;
  }
  .container .item03 .more{
    right: 30.5%;
    top: 57%;
  }
  .container .item04 .more{
    right: 80%;
    top: 58%;
  }
  .container .item05 .more{
    right: 14.5%;
    top: 59%;
  }
  .container .item06 .more{
    right: 38.5%;
    top: 60%;
  }





  footer{
    padding: 35px 45px;
  }
  footer nav{
    justify-content: flex-end;
    margin-left: auto;
    gap: 20px;
  }
  footer small{
    width: 162px;
    margin-top: 20px;
  }
}