/* to embed a font */
@import url('./font.css');

:root {
    --yellow: #F7FF13;
    --black: #000000;
    --white: #FFFFFF;

    --gray01: #1A1A1A;
    --gray02: #747474;
}

/* header */
header {width: 100%; position: fixed; top: 0; left: 0; z-index: 1000; background: rgba(0, 0, 0, 0.72); backdrop-filter: blur(12px);}
header .header-wrap {width: 100%; max-width: 128rem; padding: 0 4rem; height: 6rem; margin: 0 auto; display: flex; align-items: center;}
header .header-wrap > img {height: 2.4rem;}

@media screen and (max-width: 1023px) {
    header .header-wrap {padding: 0 2rem; height: 5.2rem;}
}

/* footer */
footer {width: 100%; background-color: var(--gray01);}
footer .footer-wrap {width: 100%; max-width: 128rem; padding: 10rem 4rem; margin: 0 auto; display: flex; align-items: flex-end; justify-content: space-between;}
footer .footer-wrap > div {display: flex; flex-flow: column; row-gap: 3.2rem;}
footer .footer-wrap > div > h2 {font-size: 2rem; font-weight: 500;}
footer .footer-wrap > div > ul {display: flex; align-items: center; column-gap: .8rem;}
footer .footer-wrap > div > ul > li {display: flex; align-items: center; column-gap: .8rem; font-size: 1.6rem; font-weight: 500; cursor: pointer;}
footer .footer-wrap > div > ul > li + li::before {content: ''; width: 1px; height: 1.4rem; background-color: var(--white);}
footer .footer-wrap > div > div > ul {display: flex; align-items: center; column-gap: .8rem;}
footer .footer-wrap > div > div > ul > li {display: flex; align-items: center; column-gap: .8rem; font-size: 1.4rem; color: var(--gray02); line-height: 1.6;}
footer .footer-wrap > div > div > ul > li + li::before {content: ''; width: 1px; height: 1rem; background-color: var(--gray02);}
footer .footer-wrap > div > div > ul > li > a {font-size: 1.4rem; color: var(--gray02); text-decoration: underline;}
footer .footer-wrap > ul {display: flex; align-items: center; column-gap: 1.2rem;}

@media screen and (max-width: 1023px) {
    footer .footer-wrap {padding: 7.2rem 2rem; flex-flow: column; row-gap: 3.2rem;}
    footer .footer-wrap > div {row-gap: 2.4rem;}
    footer .footer-wrap > div > h2 {font-size: 1.6rem;}
    footer .footer-wrap > div > ul > li {font-size: 1.4rem; width: max-content;}
    footer .footer-wrap > div > div > ul {flex-wrap: wrap;}
    footer .footer-wrap > div > div > ul > li {font-size: 1.2rem;}
    footer .footer-wrap > div > div > ul > li > a {font-size: 1.2rem;}
}

/* main */
main {margin-top: 6rem; padding-bottom: 40rem;}
main > h1 {display: none;}
main section {width: 100%; max-width: 128rem; margin: 0 auto; padding: 20rem 4rem 0;}
main section + section {margin-top: 20rem;}

@media screen and (max-width: 1023px) {
    main {margin-top: 5.2rem; padding-bottom: 16rem;}
    main section {padding: 7.2rem 2rem 0;}
    main section + section {margin-top: 8.8rem;}
}

/* main */
.intro {display: flex; justify-content: space-between;}
.intro > div > p {margin-top: 7.2rem; font-size: 4rem; font-weight: 700; line-height: 1.6;}
.intro > div > span {display: block; margin-top: 16rem; font-size: 2rem; font-weight: 600; line-height: 1.8;}
.intro > img {width: 42rem;}

@media screen and (max-width: 1023px) {
    .intro {flex-flow: column; row-gap: 7.2rem;}
    .intro > div > p {margin-top: 3.2rem; font-size: 2.4rem;}
    .intro > div > span {margin-top: 4rem; font-size: 1.4rem;}
    .intro > img {width: 28rem; margin: 0 auto;}
}

.topic > p {font-size: 4rem; font-weight: 700; line-height: 1.6;}
.topic-swiper-wrap {margin-top: 10rem; position: relative; height: 24.4rem;}
.topic-swiper-wrap .focus {width: 20rem; height: 20rem; border-radius: 3.2rem; border: 1px solid var(--white); position: absolute; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%);}
.topic-swiper-wrap .focus::after {content: ''; width: 4.6rem; height: 4.6rem; border-radius: 100%; background-image: url(../img/ico/ic-check-46.svg); background-repeat: no-repeat; background-position: center; background-size: contain; position: absolute; top: -1rem; right: -1rem;}
.topic-swiper-wrap .focus > p {font-size: 2.4rem; font-weight: 700; color: var(--white); text-align: center; margin-top: 22rem;}

.topic-swiper.swiper {width: 100vw; position: relative; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%);}
.topic-swiper.swiper .swiper-slide {padding-top: 5rem; display: flex; align-items: center; justify-content: center;}
.topic-swiper.swiper .swiper-slide-active {padding-top: 1rem;}

@media screen and (max-width: 1023px) {
    .topic > p {font-size: 2.4rem;}
    .topic-swiper-wrap {margin-top: 4.8rem; height: 11.8rem;}
    .topic-swiper-wrap .focus {width: 9rem; height: 9rem; border-radius: 2.4rem;}
    .topic-swiper-wrap .focus::after {width: 2.4rem; height: 2.4rem; top: -.6rem; right: -.6rem;}
    .topic-swiper-wrap .focus > p {font-size: 1.4rem; margin-top: 10.4rem;}
    
    .topic-swiper.swiper .swiper-slide {padding-top: 2.5rem;}
    .topic-swiper.swiper .swiper-slide-active {padding-top: .5rem;}
}

.order > p {font-size: 4rem; font-weight: 700; line-height: 1.6;}
.order-img {margin-top: 10rem;}
.order-img > li {width: 100%; max-width: 94rem;}
.order-img > li + li {margin-left: auto; margin-top: 8rem;}
.order-img > li img {width: 100%;}

@media screen and (max-width: 1023px) {
    .order > p {font-size: 2.4rem;}
    .order-img {margin-top: 4.8rem;}
    .order-img > li {max-width: 100%;}
    .order-img > li + li {margin-left: initial; margin-top: 6rem;}
}

.curation > p {font-size: 4rem; font-weight: 700; line-height: 1.6;}
.curation-banner-wrap {display: flex; align-items: center; width: 100vw; margin-top: 10rem; overflow: hidden; position: relative; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%);}
.curation-banner {display: flex; align-items: center;}
.curation-banner > li {padding-right: 2.4rem;}
.curation-banner > li:nth-child(2n-1) {margin-top: 10rem;}
.curation-banner > li > img {width: 40rem;}
.curation-banner.original {animation: rolling01 150s linear infinite;}
.curation-banner.clone {animation: rolling02 150s linear infinite;} 

@keyframes rolling01 {0% {transform: translateX(0);} 50% {transform: translateX(-100%);} 50.01% {transform: translateX(100%);} 100% {transform: translateX(0);}}
@keyframes rolling02 {0% {transition: translateX(0);} 100% {transform: translateX(-200%);}}

@media screen and (max-width: 1023px) {
    .curation > p {font-size: 2.4rem;}
    .curation-banner-wrap {margin-top: 4.8rem;}
    .curation-banner > li {padding-right: 1.6rem;}
    .curation-banner > li:nth-child(2n-1) {margin-top: 2.4rem;}
    .curation-banner > li > img {width: 16rem;}
}

.surround {width: 100vw; max-width: initial; padding-bottom: 40rem; margin: initial; background-image: url(../img/surround-bg.png); background-repeat: no-repeat; background-size: cover; background-position: bottom center; position: relative; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%);}
.surround > div {width: 100%; max-width: 128rem; margin: 0 auto; padding: 0 4rem;}
.surround > div > p {font-size: 4rem; font-weight: 700; line-height: 1.6;}
.surround-img {width: 100%; margin-top: 10rem; display: flex; align-items: center; justify-content: center; position: relative;}
.surround-img .img01 {width: 84vw; max-width: 100rem;} 
.surround-img .img02 {position: absolute; top: 8rem; left: 0; width: 22vw; max-width: 26.6rem;} 
.surround-img .img03 {position: absolute; bottom: 8rem; right: 0; width: 22vw; max-width: 26.6rem;}

@media screen and (max-width: 1023px) {
    .surround {padding-bottom: 16rem;}
    .surround > div {padding: 0;}
    .surround > div > p {font-size: 2.4rem; padding: 0 2rem;}
    .surround-img {margin-top: 4.8rem;}
    .surround-img .img01 {width: 100%; max-width: initial;} 
    .surround-img .img02 {top: 3rem; width: 7.2rem;} 
    .surround-img .img03 {bottom: 3rem; width: 7.2rem;}
}

.info > p {font-size: 4rem; font-weight: 700; line-height: 1.6;}
.info .img {width: 100vw; margin-top: 10rem; display: flex; align-items: end; justify-content: center; column-gap: 5.6rem; position: relative; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); overflow: hidden;}
.info .img .img01 {position: relative; z-index: 2; padding-bottom: 5rem; width: 20rem;}
.info .img .img02 {position: relative; z-index: 2;}
.info .img .img02 > img {width: 42rem;}
.info .img .img02::after {content: ''; width: 12.6rem; height: 5.5rem; background-image: url(../img/img-info02.png); background-repeat: no-repeat; background-size: contain; background-position: center; position: absolute; right: -14rem; top: 68.5rem}
.info .img .img03 {position: relative; z-index: 2; padding-bottom: 30rem; width: 20rem;}
.info .img .background {width: 100%;position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 1;}
.info .img .background.pc {display: block;}
.info .img .background.mobile {display: none;}

@media screen and (max-width: 1023px) {
    .info > p {font-size: 2.4rem;}
    .info .img {margin-top: 4.8rem; column-gap: 1.6rem;}
    .info .img .img01 {padding-bottom: 4rem; width: 6rem;}
    .info .img .img02 > img {width: 18rem;}
    .info .img .img02::after {width: 5.2rem; height: 2.4rem; right: -6rem; top: 29.4rem;}
    .info .img .img03 {padding-bottom: 10rem; width: 6rem;}
    .info .img .background.pc {display: none;}
    .info .img .background.mobile {display: block;}
}

.follow {display: flex; justify-content: space-between; position: relative;}
.follow .para {padding-top: 16rem;}
.follow .para .label {width: fit-content; height: 5.6rem; display: flex; align-items: center; justify-content: center; column-gap: .4rem; background-color: var(--white); border-radius: 4rem; padding: 0 4rem; font-size: 2rem; font-weight: 600; color: var(--black);}
.follow .para > p {font-size: 4rem; font-weight: 700; line-height: 1.6; margin-top: 4rem;}
.follow .img {position: relative; height: 134.8rem;}
.follow .img .img01 {position: absolute; top: 2rem; right: 0; width: 42rem;}
.follow .img .img02 {position: absolute; top: 54rem; right: 48rem; width: 40rem;}

@media screen and (max-width: 1023px) {
    .follow {flex-flow: column; row-gap: 4.8rem;}
    .follow .para {padding-top: 0;}
    .follow .para .label {height: 3.2rem; border-radius: 2rem; padding: 0 2rem; font-size: 1.2rem;}
    .follow .para > p {font-size: 2.4rem; margin-top: 2rem;}
    .follow .img {height: initial; margin: 0 auto; display: flex; width: 100%; align-items: flex-start; justify-content: center; flex-flow: row-reverse;}
    .follow .img .img01 {position: relative; top: 0; right: 0; width: 18rem; z-index: 2; margin-left: -5rem;}
    .follow .img .img02 {position: relative; top: 0; right: initial; width: 18rem; z-index: 1; margin-top: 12rem;}
}

.post > p {font-size: 4rem; font-weight: 700; line-height: 1.6;}
.post > div {margin-top: 10rem; position: relative;}
.post-animation > img {height: calc(100vh - 6rem - 4rem); position: relative; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); z-index: 2;}
.post-banner-wrap {display: flex; align-items: center; width: 100vw; overflow-x: auto; position: absolute; bottom: 11rem; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); z-index: 1;}
.post-banner {display: flex; align-items: center;}
.post-banner > li {padding-right: 2.4rem;}
.post-banner > li > img {width: 40rem;}
/* .post-banner.original {animation: rolling01 150s linear infinite;}
.post-banner.clone {animation: rolling02 150s linear infinite;}  */

@media screen and (max-width: 1023px) {
    .post > p {font-size: 2.4rem;}
    .post > div {margin-top: 4.8rem;}
    /* .post-animation {height: fit-content!important; min-height: initial!important;} */
    .post-animation > img {width: 18rem; height: 36.4rem;}
    .post-banner-wrap {bottom: 4.6rem;}
    .post-banner > li {padding-right: .8rem;}
    .post-banner > li > img {width: 16rem;}
}

.download {display: flex; flex-flow: column; align-items: center;}
.download > p {text-align: center; font-size: 4rem; font-weight: 700; line-height: 1.6; margin-top: 12rem;}
.download > div {margin-top: 6.4rem; display: flex; align-items: center; column-gap: 4.8rem; justify-content: center;}
.download > div > img {width: 13.2rem;}
.download > div > div {display: flex; flex-flow: column; row-gap: 1.2rem;}

@media screen and (max-width: 1023px) {
    .download > p {font-size: 2.4rem; margin-top: 7.2rem;}
    .download > div {margin-top: 3.2rem; column-gap: 1.2rem;}
    .download > div > img {width: 10.8rem;}
}