/***************
 * 
 * BASE
 * 
 ***************/
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap");
html, body {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
}

body {
  overflow-x: hidden;
}

a {
  text-decoration: none;
  color: rgba(0, 0, 0, 0.7);
}

img {
  display: block;
  object-fit: contain;
  width: 100%;
  height: auto;
}

/***************
 * 
 * COMPONENTS
 * 
 ***************/
.cta {
  font-size: 10px;
  border: 1px solid rgba(112, 112, 112, 0.4);
  padding: 0.2em 0.3em;
}

.cta[data-state=disable] {
  display: none;
}

.cta[data-state=enable] {
  display: block;
}

.credit__title {
  display: flex;
  gap: 15px;
}
.credit__title p {
  font-size: 14px;
}
.credit__collection p {
  font-size: 12px;
}

.header {
  position: relative;
  max-width: 1440px;
  margin: 0 auto;
}

.nav {
  max-width: 1400px;
  width: calc(100vw - 40px);
  padding-left: 20px;
  padding-right: 20px;
  display: flex;
  justify-content: flex-end;
  padding-top: 40px;
  position: absolute;
}
.nav a {
  font-size: 14px;
  font-weight: 700;
}

.mainvisual__content > * {
  width: 100%;
}

@media screen {
  .nav {
    padding-top: 28px;
  }
}
.style01 {
  max-width: 1190px;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 150px;
}
.style01--grid {
  display: grid;
  grid-template-columns: 33.69% 2.85% 16.3% 3.61% 7.05% 2.77% 3.36% 30.33%;
  grid-template-rows: auto 115px auto 189px 260px auto auto 120px auto auto;
}
.style01__img01 {
  grid-column: 2/7;
  grid-row: 1/2;
}
.style01__img02 {
  grid-column: 3/6;
  grid-row: 3/4;
}
.style01__img03 {
  grid-column: 3/4;
  grid-row: 5/7;
}
.style01__img04 {
  grid-column: 5/7;
  grid-row: 6/8;
}
.style01__img05 {
  grid-column: 2/7;
  grid-row: 9/11;
}
.style01 .credit__list {
  grid-column: 8/span all;
  grid-row: 10/11;
}

@media screen and (max-width: 1000px) {
  .style01 {
    max-width: 388px;
    padding-top: 110px;
  }
  .style01--grid {
    grid-template-columns: 8.76% 50% 11.08% 21.64% 8.5%;
    grid-template-rows: auto 115px auto 189px auto auto auto 120px auto 30px auto;
  }
  .style01__img01 {
    grid-column: 1/6;
    grid-row: 1/2;
  }
  .style01__img02 {
    grid-column: 2/5;
    grid-row: 3/4;
  }
  .style01__img03 {
    grid-column: 1/3;
    grid-row: 5/7;
  }
  .style01__img04 {
    grid-column: 4/6;
    grid-row: 6/8;
  }
  .style01__img05 {
    grid-column: 1/6;
    grid-row: 9/10;
  }
  .style01 .credit__list {
    grid-column: 1/span all;
    grid-row: 11/12;
  }
}
.style02 {
  max-width: 1190px;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 150px;
}
.style02--grid {
  display: grid;
  grid-template-columns: 17.31% 15.29% 6.72% 3.02% 2.77% 8.57% 18.23% 1.68% 26.38%;
  grid-template-rows: auto 85px auto 106px auto 110px auto auto;
}
.style02__img01 {
  grid-column: 6/10;
  grid-row: 1/2;
}
.style02__img01 img {
  margin-left: 125px;
}
.style02__img02 {
  grid-column: 5/7;
  grid-row: 3/4;
}
.style02__img03 {
  grid-column: 7/9;
  grid-row: 5/6;
}
.style02__img04 {
  grid-column: 4/8;
  grid-row: 7/9;
}
.style02 .credit__list {
  grid-column: 2/span all;
  grid-row: 8/9;
}

@media screen and (max-width: 1000px) {
  .style02 {
    max-width: 388px;
    padding-top: 130px;
  }
  .style02--grid {
    grid-template-columns: 38.91% 5.15% 55.92%;
    grid-template-rows: auto 178px auto 106px auto 110px auto 30px auto;
  }
  .style02__img01 {
    grid-column: 1/4;
    grid-row: 1/2;
  }
  .style02__img01 img {
    margin-left: 0px;
  }
  .style02__img02 {
    grid-column: 1/3;
    grid-row: 3/4;
  }
  .style02__img03 {
    grid-column: 2/4;
    grid-row: 5/6;
  }
  .style02__img03 img {
    margin-left: 20px;
  }
  .style02__img04 {
    grid-column: 1/4;
    grid-row: 7/8;
  }
  .style02 .credit__list {
    grid-column: 1/span all;
    grid-row: 9/10;
  }
}
.style03 {
  max-width: 1190px;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 450px;
}
.style03--grid {
  display: grid;
  grid-template-columns: 38.4% 9.32% 1.26% 7.47% 3.78% 6.13% 4.62% 1.93% 27.05%;
  grid-template-rows: auto 140px auto 172px auto 124px auto auto;
}
.style03__img01 {
  grid-column: 2/8;
  grid-row: 1/2;
}
.style03__img02 {
  grid-column: 3/9;
  grid-row: 3/4;
}
.style03__img03 {
  grid-column: 2/5;
  grid-row: 5/6;
}
.style03__img04 {
  grid-column: 4/6;
  grid-row: 7/9;
}
.style03 .credit__list {
  grid-column: 7/span all;
  grid-row: 8/9;
}

@media screen and (max-width: 1000px) {
  .style03 {
    max-width: 388px;
    padding-top: 150px;
  }
  .style03--grid {
    grid-template-columns: 22.68% 9.79% 22.93% 12.37% 32.21%;
    grid-template-rows: auto 100px auto 132px auto 124px auto 30px auto;
  }
  .style03__img01 {
    grid-column: 1/6;
    grid-row: 1/2;
  }
  .style03__img02 {
    grid-column: 2/6;
    grid-row: 3/4;
  }
  .style03__img02 img {
    margin-left: 20px;
  }
  .style03__img03 {
    grid-column: 1/4;
    grid-row: 5/6;
  }
  .style03__img04 {
    grid-column: 3/5;
    grid-row: 7/8;
  }
  .style03 .credit__list {
    grid-column: 1/span all;
    grid-row: 9/10;
  }
}
.style04 {
  max-width: 1190px;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 260px;
}
.style04--grid {
  display: grid;
  grid-template-columns: 30.75% 2.43% 3.94% 11.51% 17.14% 2.68% 31.51%;
  grid-template-rows: auto 60px 471px auto auto 164px auto auto;
}
.style04__img01 {
  grid-column: 4/6;
  grid-row: 1/2;
}
.style04__img02 {
  grid-column: 1/2;
  grid-row: 3/5;
}
.style04__img03 {
  grid-column: 5/7;
  grid-row: 4/6;
}
.style04__img04 {
  grid-column: 3/6;
  grid-row: 7/9;
}
.style04 .credit__list {
  grid-column: 7/span all;
  grid-row: 8/9;
}

@media screen and (max-width: 1000px) {
  .style04 {
    max-width: 388px;
    padding-top: 140px;
  }
  .style04--grid {
    grid-template-columns: 12.11% 27.06% 39.43% 21.39%;
    grid-template-rows: auto 59px auto 114px auto 104px auto 30px auto;
  }
  .style04__img01 {
    grid-column: 2/5;
    grid-row: 1/2;
  }
  .style04__img02 {
    grid-column: 1/4;
    grid-row: 3/4;
  }
  .style04__img02 img {
    margin-left: -20px;
  }
  .style04__img03 {
    grid-column: 3/5;
    grid-row: 5/6;
  }
  .style04__img03 img {
    margin-left: 20px;
  }
  .style04__img04 {
    grid-column: 1/6;
    grid-row: 7/8;
  }
  .style04 .credit__list {
    grid-column: 1/span all;
    grid-row: 9/10;
  }
}
.style05 {
  max-width: 1190px;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 435px;
}
.style05--grid {
  display: grid;
  grid-template-columns: 30.5% 4.78% 9.07% 2.77% 7.47% 2.26% 11% 1.68% 30.42%;
  grid-template-rows: auto 169px auto 246px 265px auto auto auto;
}
.style05__img01 {
  grid-column: 3/8;
  grid-row: 1/2;
}
.style05__img02 {
  grid-column: 4/9;
  grid-row: 3/4;
}
.style05__img03 {
  grid-column: 2/6;
  grid-row: 5/7;
}
.style05__img04 {
  grid-column: 7/10;
  grid-row: 6/9;
}
.style05__img04 img {
  margin-left: 125px;
}
.style05 .credit__list {
  grid-column: 5/span all;
  grid-row: 8/9;
}

@media screen and (max-width: 1000px) {
  .style05 {
    max-width: 388px;
    padding-top: 140px;
  }
  .style05--grid {
    grid-template-columns: 22.68% 51.28% 26.03%;
    grid-template-rows: auto 89px auto 126px auto 101px auto 30px auto;
  }
  .style05__img01 {
    grid-column: 1/4;
    grid-row: 1/2;
  }
  .style05__img02 {
    grid-column: 2/4;
    grid-row: 3/4;
  }
  .style05__img02 img {
    margin-left: 20px;
  }
  .style05__img03 {
    grid-column: 1/3;
    grid-row: 5/6;
  }
  .style05__img04 {
    grid-column: 1/4;
    grid-row: 7/8;
  }
  .style05__img04 img {
    margin-left: 0px;
  }
  .style05 .credit__list {
    grid-column: 1/span all;
    grid-row: 9/10;
  }
}
.style06 {
  max-width: 1190px;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 346px;
}
.style06--grid {
  display: grid;
  grid-template-columns: 30.75% 5.88% 6.97% 0.75% 14.87% 1.17% 4.78% 4.03% 30.75%;
  grid-template-rows: auto 176px auto 156px auto 182px auto auto;
}
.style06__img01 {
  grid-column: 3/9;
  grid-row: 1/2;
}
.style06__img02 {
  grid-column: 4/7;
  grid-row: 3/4;
}
.style06__img03 {
  grid-column: 5/8;
  grid-row: 5/6;
}
.style06__img04 {
  grid-column: 2/6;
  grid-row: 7/9;
}
.style06 .credit__list {
  grid-column: 8/span all;
  grid-row: 8/9;
}

@media screen and (max-width: 1000px) {
  .style06 {
    max-width: 388px;
    padding-top: 160px;
  }
  .style06--grid {
    grid-template-columns: 21.39% 2.31% 48.96% 14.69% 12.62%;
    grid-template-rows: auto 136px auto 156px auto 142px auto 30px auto;
  }
  .style06__img01 {
    grid-column: 1/6;
    grid-row: 1/2;
  }
  .style06__img02 {
    grid-column: 2/4;
    grid-row: 3/4;
  }
  .style06__img03 {
    grid-column: 3/5;
    grid-row: 5/6;
  }
  .style06__img04 {
    grid-column: 1/5;
    grid-row: 7/8;
  }
  .style06__img04 img {
    margin-left: -20px;
  }
  .style06 .credit__list {
    grid-column: 1/span all;
    grid-row: 9/10;
  }
}
.style07 {
  max-width: 1190px;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 346px;
}
.style07--grid {
  display: grid;
  grid-template-columns: 10.84% 15.29% 6.72% 2.1% 1.76% 10.67% 1.76% 10.67% 5.63% 34.53%;
  grid-template-rows: auto 67px 361px auto auto 141px auto auto;
}
.style07__img01 {
  grid-column: 6/7;
  grid-row: 1/2;
}
.style07__img02 {
  grid-column: 5/8;
  grid-row: 3/5;
}
.style07__img03 {
  grid-column: 9/11;
  grid-row: 4/6;
}
.style07__img04 {
  grid-column: 4/10;
  grid-row: 7/9;
}
.style07 .credit__list {
  grid-column: 2/span all;
  grid-row: 8/9;
}

@media screen and (max-width: 1000px) {
  .style07 {
    max-width: 388px;
    padding-top: 190px;
  }
  .style07--grid {
    grid-template-columns: 6.44% 5.41% 32.73% 5.41% 50%;
    grid-template-rows: auto 67px auto 28px auto 141px auto 30px auto;
  }
  .style07__img01 {
    grid-column: 3/4;
    grid-row: 1/2;
  }
  .style07__img02 {
    grid-column: 2/5;
    grid-row: 3/4;
  }
  .style07__img03 {
    grid-column: 1/6;
    grid-row: 5/6;
  }
  .style07__img03 img {
    margin-left: 20px;
  }
  .style07__img04 {
    grid-column: 1/6;
    grid-row: 7/8;
  }
  .style07 .credit__list {
    grid-column: 1/span all;
    grid-row: 9/10;
  }
}
.footer {
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 235px;
}
.footer__content {
  text-align: center;
}
.footer__content p {
  color: #727374;
}

@media screen and (max-width: 1000px) {
  .footer {
    padding-top: 90px;
  }
}
.featured {
  max-width: 1190px;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 189px;
  padding-bottom: 96px;
}
.featured__content {
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  padding-top: 38px;
  padding-bottom: 100px;
}
.featured__title {
  text-align: center;
  font-size: 22px;
  font-weight: 700;
}
.featured__cardlist {
  padding-top: 64px;
}
.featured__linklist {
  max-width: 300px;
  display: flex;
  gap: 30px;
  justify-content: space-between;
}
.featured__nav {
  display: flex;
  justify-content: space-between;
  padding-top: 28px;
}
.featured a {
  font-size: 14px;
  font-weight: 700;
}

@media screen and (max-width: 768px) {
  .featured {
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 80px;
    padding-bottom: 28px;
  }
  .featured__linklist {
    flex-direction: column;
    justify-content: space-between;
    gap: 7px;
  }
  .featured__cardlist, .featured__nav {
    padding-left: 20px;
    padding-right: 20px;
  }
}
.cardlist {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

@media screen and (max-width: 768px) {
  .cardlist {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
  }
}
.card {
  max-width: 178px;
}
.card__link > * + * {
  padding-top: 8px;
}
.card__title {
  font-size: 12px;
  font-weight: 700;
}
.card__date {
  font-size: 12px;
  font-weight: 400;
  color: #A0A0A0;
}

/***************
 * 
 * UTILITIES
 * 
 ***************/
.flow-20 > * + * {
  margin-top: 20px;
}

.flow-16 > * + * {
  margin-top: 16px;
}

.flow-10 > * + * {
  margin-top: 10px;
}

.flow-6 > * + * {
  margin-top: 6px;
}

.mx-auto {
  margin: 0 auto;
}

.relative {
  position: relative;
}

.pcOnly {
  display: block;
}

.spOnly {
  display: none;
}

@media screen and (max-width: 768px) {
  .pcOnly {
    display: none;
  }
  .spOnly {
    display: block;
  }
}

/*# sourceMappingURL=main.css.map */