/***************
 * 
 * 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;
}

.animatedImage .top {
  position: absolute;
  top: 0;
}
.animatedImage .top {
  animation-name: switchImage;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 2s;
  animation-direction: alternate;
  z-index: 2000;
}

@keyframes switchImage {
  0% {
    opacity: 1;
  }
  45% {
    opacity: 1;
  }
  55% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
.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%;
}

.style01 {
  max-width: 1190px;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 150px;
}
.style01--grid {
  display: grid;
  grid-template-columns: 11.34% 16.63% 4.62% 7.73% 15.96% 15.71% 27.98%;
  grid-template-rows: auto 100px 330px auto auto 82px 28px auto 77px;
}
.style01__img01 {
  grid-column: 3/7;
  grid-row: 1/2;
}
.style01__img02 {
  grid-column: 1/5;
  grid-row: 3/5;
}
.style01__img03 {
  grid-column: 6/8;
  grid-row: 4/7;
}
.style01__img04 {
  grid-column: 2/4;
  grid-row: 6/9;
}
.style01 .credit__list {
  grid-column: 6/span all;
  grid-row: 8/10;
}

@media screen and (max-width: 1000px) {
  .style01 {
    max-width: 428px;
    padding-left: 0px;
    padding-right: 0px;
  }
  .style01--grid {
    grid-template-columns: 20px 8.87% 30.6% 4.67% 21.26% 25.23% 20px;
    grid-template-rows: auto 100px auto 80px auto 53px 18px auto auto;
  }
  .style01__img01 {
    grid-column: 1/8;
    grid-row: 1/2;
  }
  .style01__img02 {
    grid-column: 1/6;
    grid-row: 3/4;
  }
  .style01__img03 {
    grid-column: 3/7;
    grid-row: 5/7;
  }
  .style01__img04 {
    grid-column: 1/4;
    grid-row: 6/9;
  }
  .style01__img04 img {
    margin-left: -16px;
  }
  .style01 .credit__list {
    grid-column: 5/8;
    grid-row: 8/10;
  }
}
.style02 {
  max-width: 1190px;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 150px;
}
.style02--grid {
  display: grid;
  grid-template-columns: 40.33% 2.52% 13.1% 10.42% 33.61%;
  grid-template-rows: 382px auto 172px 274px auto 109px auto auto;
}
.style02__img01 {
  grid-column: 4/6;
  grid-row: 1/3;
}
.style02__img02 {
  grid-column: 1/2;
  grid-row: 2/4;
}
.style02__img03 {
  grid-column: 5/6;
  grid-row: 5/7;
}
.style02__img04 {
  grid-column: 1/2;
  grid-row: 6/9;
}
.style02 .credit__list {
  grid-column: 3/span all;
  grid-row: 8/9;
}

@media screen and (max-width: 1000px) {
  .style02 {
    max-width: 428px;
    padding-left: 0px;
    padding-right: 0px;
  }
  .style02--grid {
    grid-template-columns: 20px 25.23% 51.86% 13.55% 20px;
    grid-template-rows: auto 60px auto 284px auto 48px auto 18px auto;
  }
  .style02__img01 {
    grid-column: 1/6;
    grid-row: 1/2;
  }
  .style02__img02 {
    grid-column: 1/4;
    grid-row: 3/4;
  }
  .style02__img03 {
    grid-column: 3/6;
    grid-row: 5/6;
  }
  .style02__img04 {
    grid-column: 1/4;
    grid-row: 7/8;
  }
  .style02 .credit__list {
    grid-column: 2/span all;
    grid-row: 9/10;
  }
}
.style03 {
  max-width: 1190px;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 150px;
}
.style03--grid {
  display: grid;
  grid-template-columns: 4.45% 28.15% 1.34% 4.11% 23.52% 14.7% 1.68% 13.02% 8.99%;
  grid-template-rows: auto 134px 300px auto auto 176px auto auto;
}
.style03__img01 {
  grid-column: 4/8;
  grid-row: 1/2;
}
.style03__img02 {
  grid-column: 2/5;
  grid-row: 3/5;
}
.style03__img03 {
  grid-column: 6/9;
  grid-row: 4/6;
}
.style03__img04 {
  grid-column: 3/7;
  grid-row: 7/9;
}
.style03 .credit__list {
  grid-column: 8/span all;
  grid-row: 8/9;
}

@media screen and (max-width: 1000px) {
  .style03 {
    max-width: 428px;
    padding-left: 0px;
    padding-right: 0px;
  }
  .style03--grid {
    grid-template-columns: 20px 27.57% 49.53% 13.55% 20px;
    grid-template-rows: auto 55px auto 105px auto 134px auto 18px auto;
  }
  .style03__img01 {
    grid-column: 1/6;
    grid-row: 1/2;
  }
  .style03__img02 {
    grid-column: 1/4;
    grid-row: 3/4;
  }
  .style03__img03 {
    grid-column: 3/6;
    grid-row: 5/6;
  }
  .style03__img04 {
    grid-column: 2/5;
    grid-row: 7/8;
  }
  .style03 .credit__list {
    grid-column: 2/span all;
    grid-row: 9/10;
  }
}
.style04 {
  max-width: 1190px;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 190px;
}
.style04--grid {
  display: grid;
  grid-template-columns: 12.1% 22.85% 9.07% 9.74% 2.52% 5.88% 37.81%;
  grid-template-rows: 465px auto auto 150px auto 110px auto auto;
}
.style04__img01 {
  grid-column: 1/4;
  grid-row: 1/3;
}
.style04__img02 {
  grid-column: 7/8;
  grid-row: 2/3;
}
.style04__img03 {
  grid-column: 2/4;
  grid-row: 5/6;
}
.style04__img04 {
  grid-column: 6/8;
  grid-row: 7/9;
}
.style04 .credit__list {
  grid-column: 3/6;
  grid-row: 8/9;
}

@media screen and (max-width: 1000px) {
  .style04 {
    max-width: 428px;
    padding-left: 0px;
    padding-right: 0px;
  }
  .style04--grid {
    grid-template-columns: 20px 13.55% 14.01% 63.08% 20px;
    grid-template-rows: auto 80px auto 58px auto 108px auto 18px auto;
  }
  .style04__img01 {
    grid-column: 1/6;
    grid-row: 1/2;
  }
  .style04__img02 {
    grid-column: 3/6;
    grid-row: 3/4;
  }
  .style04__img03 {
    grid-column: 4/6;
    grid-row: 5/6;
  }
  .style04__img04 {
    grid-column: 2/5;
    grid-row: 7/8;
  }
  .style04 .credit__list {
    grid-column: 2/span all;
    grid-row: 9/10;
  }
}
.style05 {
  max-width: 1190px;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 150px;
}
.style05--grid {
  display: grid;
  grid-template-columns: 27.98% 12.35% 7.64% 15.88% 2.52% 5.63% 27.98%;
  grid-template-rows: auto 110px 473px auto 436px auto auto auto;
}
.style05__img01 {
  grid-column: 2/7;
  grid-row: 1/2;
}
.style05__img02 {
  grid-column: 6/8;
  grid-row: 3/5;
}
.style05__img03 {
  grid-column: 1/3;
  grid-row: 4/7;
}
.style05__img04 {
  grid-column: 6/8;
  grid-row: 6/9;
}
.style05 .credit__list {
  grid-column: 4/span all;
  grid-row: 8/9;
}

@media screen and (max-width: 1000px) {
  .style05 {
    max-width: 428px;
    padding-left: 0px;
    padding-right: 0px;
  }
  .style05--grid {
    grid-template-columns: 20px 11.44% 20.79% 44.85% 2.1% 11.44% 20px;
    grid-template-rows: auto 90px auto 83px auto 95px auto 18px auto;
  }
  .style05__img01 {
    grid-column: 1/8;
    grid-row: 1/2;
  }
  .style05__img02 {
    grid-column: 4/8;
    grid-row: 3/4;
  }
  .style05__img03 {
    grid-column: 1/5;
    grid-row: 5/6;
  }
  .style05__img04 {
    grid-column: 3/6;
    grid-row: 7/8;
  }
  .style05 .credit__list {
    grid-column: 3/span all;
    grid-row: 9/10;
  }
}
.style06 {
  max-width: 1190px;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 150px;
}
.style06--grid {
  display: grid;
  grid-template-columns: 40.5% 2.52% 1.26% 11.17% 21.26% 2.26% 5.04% 7.39% 8.82%;
  grid-template-rows: 644px auto auto 72px auto 182px auto 218px auto auto;
}
.style06__img01 {
  grid-column: 1/4;
  grid-row: 1/3;
}
.style06__img02 {
  grid-column: 5/7;
  grid-row: 2/4;
}
.style06__img03 {
  grid-column: 6/10;
  grid-row: 5/7;
}
.style06__img04 {
  grid-column: 1/2;
  grid-row: 6/10;
}
.style06__img05 {
  grid-column: 8/9;
  grid-row: 9/11;
}
.style06 .credit__list {
  grid-column: 3/span all;
  grid-row: 8/10;
}

@media screen and (max-width: 1000px) {
  .style06 {
    max-width: 428px;
    padding-left: 0px;
    padding-right: 0px;
  }
  .style06--grid {
    grid-template-columns: 20px 36.91% 16.82% 14.71% 19.15% 3.03% 20px;
    grid-template-rows: auto 110px auto 50px auto 68px auto 30px auto auto;
  }
  .style06__img01 {
    grid-column: 1/8;
    grid-row: 1/2;
  }
  .style06__img02 {
    grid-column: 3/8;
    grid-row: 3/4;
  }
  .style06__img03 {
    grid-column: 1/4;
    grid-row: 5/6;
  }
  .style06__img04 {
    grid-column: 2/7;
    grid-row: 7/8;
  }
  .style06__img05 {
    grid-column: 5/6;
    grid-row: 8/10;
  }
  .style06 .credit__list {
    grid-column: 2/span all;
    grid-row: 9/11;
  }
}
.footer {
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 193px;
}
.footer__content {
  text-align: center;
}
.footer__content p {
  color: #727374;
}

.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=style.css.map */