@charset "utf-8";

/* ----------------------------
mv
---------------------------- */
.mv{
  padding-top: calc(50px + 1.2vw);
  background-color: #d5d9db;
}
.mv_imgs{
  display: flex;
}
.mv_imgs img{
  width: 50vw;
}
@media screen and (max-width: 880px) {
  .mv{
    padding-top: 13vw;
  }
  .mv img{
    width: 50vw;
    height: max(40vh, 53vw);
    object-position: 55% 50%;
  }
  .mv_imgs img:nth-of-type(1){
    object-position: 85% 50%;
  }
}

/* ----------------------------
concept セクション
---------------------------- */

#concept{
  padding-top: 8.3vw;
  padding-bottom: 0.1vw;
}
@media screen and (max-width: 880px){
  #concept{
    padding-top: 12vw;
    padding-bottom: 8vw;
  }
}

/* ブランドロゴ */
.brand_logo{
  margin-bottom: 5vw;
}
@media screen and (max-width: 880px){
  .brand_logo{
    margin-bottom: 10vw;
  }
}

/* concept kv */
.kv{
  text-align: center;
}
.kv h3{
  color: #00adec;
  font-size: 3vw;
  letter-spacing: 0.01em;
  margin-bottom: 0.2vw;
}
.kv p{
  font-size: 1.25vw;
}
.kv img{
  margin-top: 1.1vw;
}
@media screen and (max-width: 880px){
  .kv h3{
    color: #00adec;
    font-size: 6vw;
    letter-spacing: 0.01em;
    margin-bottom: 5vw;
  }
  .kv p{
    font-size: 3.4vw;
  }
  .kv img{
    margin-top: 5vw;
  }
}

/* brand */
.brand{
  margin-top: 4.6vw;
  text-align: center;
}
.brand .section_ttl h3{
  margin-bottom: 1vw;
  letter-spacing: 0.06em;
}
.brand_txt:nth-of-type(2),.brand_txt:nth-of-type(3){
  margin-top: 2.5vw;
}
.brand .section_ttl p{
  font-size: 0.95vw;
  line-height: 2em;
}
@media screen and (max-width: 880px){
  .brand{
    margin-top: 12vw;
  }
  .brand .section_ttl h2{
    margin-bottom: 5vw;
  }
  .brand .section_ttl h3{
    margin-bottom: 5vw;
    font-size: 4.5vw;
    letter-spacing: 0.06em;
  }
  .brand_txt{
    margin-bottom: 6vw;
  }
  .brand_txt:nth-of-type(2),.brand_txt:nth-of-type(3){
    margin-top: 2.5vw;
  }
  .brand .section_ttl p{
    padding: 0 5%;
    font-size: 3.4vw;
    line-height: 2em;
  }
}

/* ----------------------------
gallery セクション
---------------------------- */
#gallery {
  display: grid;
  grid-template-columns: repeat(70, 1fr);
  grid-template-rows: repeat(50, calc( 100vw / 60 ));
  gap: 0px;
}
#gallery div{
  overflow: hidden;
}

/* 個別の配置を指定 */
.item1 { grid-column: 33 / 58; grid-row: 2 / 16; }
.item2 { grid-column: 2 / 30; grid-row: 5 / 24; }
.item3 { grid-column: 31 / 54; grid-row: 17 / 33; }
.item4 { grid-column: 55 / 71; grid-row: 17 / 28; }
.item5 { grid-column: 5 / 27; grid-row: 22 / 36; }
.item6 { grid-column: 28 / 46; grid-row: 31 / 43; }
.item7 { grid-column: 48 / 67; grid-row: 31 / 46; }
.item8 { grid-column: 10 / 27; grid-row: 36 / 47; }

@media screen and (max-width: 880px){
  #gallery{
    padding-bottom: 15vw;
    display: flex;
    flex-wrap: wrap;
  }
  #gallery div{
    width: 50%;
    height: 31vw;
  }
  #gallery div img{
    object-fit: contain;
  }
}