/* html */
html {-ms-overflow-style: var(--scroll); scrollbar-width: var(--scroll);}
body{background: #fff;}

/*! wrap */
body { opacity: 0; transition: opacity 0.4s; } 
#wrap { min-height: 800rem;position: relative; padding: 0 !important; } 

@media all and (max-width:1023px){
    #wrap { padding-top: 50rem; } 
}

/*! mask */
body.hold { overflow: hidden; } 
#overlay-mask { position: fixed; top:0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); backdrop-filter: blur(4rem); -webkit-backdrop-filter:blur(4rem); display: none; } 

/* layout */
.wrap { width: 100%; } 
.wrap-max { width: calc(100% - 100rem); margin: 0 auto; } 
.wrap-large { width: 1600rem; margin: 0 auto; } 
.wrap-medium { width: 1300rem; margin: 0 auto; } 
.wrap-small { width: 770rem; margin: 0 auto; } 
.wrap-tiny { width: 380rem; margin: 0 auto; } 
.wrap-order { width: 1180rem; margin: 0 auto; } 

@media all and (max-width:1920px){
 .wrap-large { width: 1320rem; } 
 }

@media all and (max-width:1366px) {
    .wrap-max{ width: 100%; padding: 0 20rem; margin: 0;}
}

@media all and (max-width:1340px){
    .wrap-large { width: 100%; padding: 0 20rem; margin: 0; } 
    .wrap-medium { width: 100%; padding: 0 20rem; margin: 0; } 
 }
@media all and (max-width:1180px){
 .wrap-order { width: 100%; margin: 0; } 
 }
@media all and (max-width:999px){
 .wrap-order { width: 528rem; margin: 0 auto; } 
 }
@media all and (max-width:810px) {
.wrap-small { width: 100%; padding: 0 16rem; margin: 0; } 
}
@media all and (max-width:660px){
 .wrap-order { width: 100%; margin: 0; } 

 .wrap-max,
 .wrap-large,
 .wrap-medium { padding: 0 16rem; } 
 .wrap-tiny { width: 100%; } 
 }

/* text-align */
.text-left { text-align: left !important; } 
.text-center { text-align: center !important; } 
.text-right { text-align: right !important; } 

/* gap */
.gap { display: block; height: 50rem; } 

/* float */
.float-start { float: left; } 
.float-end { float: right; } 

/* rwd */
.ms-hidden-mobile { } 
.ms-visible-desktop { } 

/* state */
.ms-is-active { } 
.ms-is-disabled { } 

/* iframe 16:9 */
.video-embed { position: relative; width: 100%; height: auto; padding-bottom: 56.25%; } 
.video-embed iframe { position: absolute; top:0; left: 0; width: 100%; height: 100%; } 

/* iframe 9:16 */
.video-shorts-embed { position: relative; width: 100%; max-width: 315rem; margin: 0 auto; padding-bottom: 177.78%; } 
.video-shorts-embed iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } 

/* grid */
.grid2 { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap:50rem 20rem } 
.grid3 { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap:50rem 20rem } 
.grid4 { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap:50rem 20rem } 
.grid5 { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap:50rem 15rem } 
.grid6 { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap:30rem 15rem } 

@media all and (max-width:1023px){
 .grid3 { grid-template-columns: repeat(2,minmax(0,1fr)); gap:40rem 15rem; } 
 .grid4,
 .grid5 { grid-template-columns: repeat(3,minmax(0,1fr)); gap:40rem 15rem; }
 .grid6 { grid-template-columns: repeat(3,minmax(0,1fr));  }
 }

@media all and (max-width:767px){
    .grid3 { grid-template-columns: repeat(1,minmax(0,1fr)); gap:40rem 10rem; } 
    .grid2 { grid-template-columns: repeat(1,minmax(0,1fr)); gap:40rem 10rem; } 
 .grid4,
 .grid5 { grid-template-columns: repeat(2,minmax(0,1fr)); gap:40rem 10rem; } 
 .grid6 { grid-template-columns: repeat(1,minmax(0,1fr)); gap:30rem 10rem; }
 }

.flex { display: flex; align-items: center; } 

/* font-size */
.fz-10 { font-size: 10rem; } 
.fz-12 { font-size: 12rem; } 
.fz-14 { font-size: 14rem; } 
.fz-16 { font-size: 16rem; } 
.fz-18 { font-size: 18rem; } 
.fz-20 { font-size: 20rem; } 

/* margin */
.mi-0 { margin-inline: 0; } 
.mbck-0 { margin-block: 0; } 
.mt-5 { margin-top: 5rem; } 
.ml-5 { margin-left: 5rem; } 

.mt-10 { margin-top: 10rem; } 
.ml-10 { margin-left: 10rem; }