@charset "utf-8";

section {
  width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(6, 240px);
  grid-template-rows: repeat(23, 240px);
}

.title {
  grid-column: 1 / 5;
  grid-row: 2 / 3;
  padding-left: 100px;
  padding-top: 50px;
  z-index: 100;
}

.split-chars {
  font-size: 96px;
  font-family: "GFS Didot", serif;
  font-weight: 300;
  letter-spacing: 0.2em;
}

.split-lines {
  font-size: 24px;
  letter-spacing: 0.2em;
}



.lookstyle_1_wrap {
  grid-column: 4 / 7;
  grid-row: 2 / 4;
}

.lookstyle_1_wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lookstyle_2_wrap {
  grid-column: 1 / 4;
  grid-row: 4;
  align-self: start;
}

.lookstyle_2_wrap img {
  width: 100%;
  height: 840px;
  object-fit: cover;
}

.lookstyle_3_wrap {
  grid-column: 5 / 7;
  grid-row: 5;
  align-self: start;
  justify-self: start;
}

.lookstyle_3_wrap img {
  width: 360px;
  height: 480px;
  object-fit: cover;
}

.copy_1,
.copy_2,
.copy_3 {
  font-size: 28px;
  font-family: "GFS Didot", serif;
  font-weight: 300;
  letter-spacing: 0.1em;
  white-space: nowrap;
}


.copy_1_wrap {
  grid-column: 3 / 6;
  grid-row: 7;
  align-self: start;
  padding-top: 30px;
  z-index: 100;
}

.lookstyle_4_wrap {
  grid-column: 4 / 6;
  grid-row: 8 / 11;
  align-self: end;
}

.lookstyle_4_wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lookstyle_5_wrap {
  grid-column: 1 / 3;
  grid-row: 10 / 12;
  justify-self: end;
}

.lookstyle_5_wrap img {
  width: 360px;
  height: 100%;
  object-fit: cover;
}

.lookstyle_6_wrap {
  grid-column: 3 / 7;
  grid-row: 13 / 15;
  justify-self: end;
}

.lookstyle_6_wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.copy_2_wrap {
  grid-column: 1 / 4;
  grid-row: 14 / 15;
  padding-top: 50px;
  padding-left: 70px;
  z-index: 100;
}

.lookstyle_7_wrap {
  grid-column: 2 / 4;
  grid-row: 16 / 18;
  justify-self: start;
}

.lookstyle_7_wrap img {
  width: 360px;
  height: 100%;
  object-fit: cover;
}

.lookstyle_8_wrap {
  grid-column: 4 / 7;
  grid-row: 17 / 21;
  justify-self: end;
}

.lookstyle_8_wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lookstyle_9_wrap {
  grid-column: 1 / 4;
  grid-row: 20 / 23;
  justify-self: end;
}

.lookstyle_9_wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.copy_3_wrap {
  grid-column: 4 / 7;
  grid-row: 22 / 23;
  padding-top: 50px;
  padding-left: 50px;
}

.fade-up {
  opacity: 0;
  transform: translateY(80px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

.fade-in-text {
  opacity: 0 !important;
  transition: opacity 1.2s ease;
}

.fade-in-text.visible {
  opacity: 1 !important;
}


/* スマホ */

@media (max-width: 767px) {


  section {
    width: 100% !important;
    margin: 0 auto;
    grid-template-columns: repeat(5, 20vw);
    grid-template-rows: repeat(51, 20vw);
  }

  .title {
    grid-column: 1 / 5;
    grid-row: 2 / 4;
    padding-left: 30px;
    padding-top: 30px;
  }

  .title h1 {
    font-size: 28px;
    margin-bottom: 20px;
  }

  .title p {
    font-size: 14px;
  }

  /* wrapのwidth/heightリセット */
  .lookstyle_1_wrap,
  .lookstyle_2_wrap,
  .lookstyle_3_wrap,
  .lookstyle_4_wrap,
  .lookstyle_5_wrap,
  .lookstyle_6_wrap,
  .lookstyle_7_wrap,
  .lookstyle_8_wrap,
  .lookstyle_9_wrap {
    width: auto;
    height: auto;
  }

  .lookstyle_1_wrap {
    grid-column: 1 / 6;
    grid-row: 4 / 7;
    justify-self: end;
  }

  .lookstyle_1_wrap img {
    width: 89.8vw;
    aspect-ratio: 337 / 225;
    object-fit: cover;
    display: block;
  }

  .lookstyle_2_wrap {
    grid-column: 1 / 6;
    grid-row: 8 / 13;
    align-self: start;
    z-index: 999;
  }

  .lookstyle_2_wrap img {
    width: 80vw;
    height: auto;
    aspect-ratio: 300 / 350;
    object-fit: cover;
    display: block;
  }

  .lookstyle_3_wrap {
    grid-column: 2 / 6;
    grid-row: 12 / 17;
    align-self: end;
    justify-self: end;
  }

  .lookstyle_3_wrap img {
    width: 70.1vw;
    height: auto;
    aspect-ratio: 263 / 350;
    margin-left: auto;
  }


  .copy_1,
  .copy_2,
  .copy_3 {
    font-size: 14px;
  }

  .copy_1_wrap {
    grid-column: 1 / 5;
    grid-row: 17 / 18;
    align-self: start;
    padding-top: 30px;
    padding-left: 24px;
  }

  .lookstyle_4_wrap {
    grid-column: 1 / 5;
    grid-row: 19 / 24;
  }

  .lookstyle_4_wrap img {
    width: 80vw;
    aspect-ratio: 300 / 375;
    object-fit: cover;
    display: block;
  }

  .lookstyle_5_wrap {
    grid-column: 3 / 6;
    grid-row: 24 / 28;
    justify-self: end;
  }

  .lookstyle_5_wrap img {
    width: 60vw;
    aspect-ratio: 225 / 300;
    object-fit: cover;
    display: block;
  }

  .lookstyle_6_wrap {
    grid-column: 1 / 6;
    grid-row: 29 / 32;
    align-self: start;
  }

  .lookstyle_6_wrap img {
    width: 100vw;
    aspect-ratio: 375 / 213;
    object-fit: cover;
    display: block;
  }

  .copy_2_wrap {
    grid-column: 1 / 6;
    grid-row: 32 / 33;
    padding-top: 20px;
    padding-left: 24px;
    white-space: nowrap;
  }

  .lookstyle_7_wrap {
    grid-column: 1 / 4;
    grid-row: 34 / 38;
    justify-self: start;
  }

  .lookstyle_7_wrap img {
    width: 60vw;
    aspect-ratio: 225 / 300;
    object-fit: cover;
    display: block;
  }

  .lookstyle_8_wrap {
    grid-column: 2 / 6;
    grid-row: 37 / 44;
    justify-self: end;
    align-self: end;
  }

  .lookstyle_8_wrap img {
    width: 80vw;
    aspect-ratio: 300 / 482;
    object-fit: cover;
    display: block;
  }

  .lookstyle_9_wrap {
    grid-column: 1 / 5;
    grid-row: 45 / 50;
    justify-self: start;
  }

  .lookstyle_9_wrap img {
    width: 80vw;
    aspect-ratio: 300 / 365;
    object-fit: cover;
    display: block;
  }

  .copy_3_wrap {
    grid-column: 2 / 6;
    grid-row: 50 / 51;
    padding-top: 40px;
    padding-left: 0px;
    padding-right: 24px;
    white-space: nowrap;
  }

  .fade-up {
    opacity: 0;
    transform: translateY(80px);
    transition: opacity 0.8s ease, transform 0.8s ease;
  }

  .fade-up.visible {
    opacity: 1;
    transform: translateY(0);
  }
}