@charset "UTF-8";
/* CSS Document */

/* top.css */

#dateInner{
  position: relative;
}

#date span {
  display: inline-block;
  transition: transform 1.6s cubic-bezier(0.65, 0.02, 0.23, 1);
  transform: translate(0, 140%);
  position: relative;
  z-index: 1;
  background: #fff;
}

#date span:before {
  content: "";
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: translateY(-10%);
  transition: transform 1.6s cubic-bezier(0.65, 0.02, 0.23, 1);
  background: #fff;
}

#date span.row:before {
  display: none;
}

#date .animate {
  transform: translate(0, 0);
}

#date .animate:before {
  transform: translateY(100%);
}

#date small span{
  color: #000;
}

.line {
  width: 0;
  height: 1px;
  background-color: #ccc;
  transition: width 0.8s ease-out;
}

.line.active {
  width: 100%;
}

@media only print, only screen and (min-width: 18.75em){

/* mainVisual */

#mainVisual a{
  margin-top: -148px;
  position: relative;
  display: block;
  overflow: hidden;
}

#mainVisualImg{
  transform: scale(1.1);
}

#mainVisualImg img{
  width: 100%;
  height: 140vh;
  object-fit: cover;
  display: block;
}

#mainVisualLogo{
  width: 120px;
  position: sticky;
  top: 42vh;
  left: 10px;
  padding-bottom: 20px;
  z-index: 1111;
}

#btnScroll{
  width: 100%;
  color: #fff;
  position: sticky;
  top: calc(100vh - 40px);
  padding-bottom: 20px;
  font-size: 11px;
  text-align: center;
  z-index: 1111;
}

#btnScroll span{
  position: relative;
}

#btnScroll span::after{
  content: "";
  width: 0;
  height: 1px;
  background: #fff;
  position: absolute;
  bottom: -2px;
  left: 0;
  animation: bdAnimaiton 2s linear infinite;
}

@keyframes bdAnimaiton {
  0% {
    width: 0%;
  }
  
  33% {
    width: 100%;
  }

  66% {
    width: 0%;
    left: auto;
    right: 0;
  }
  
  100% {
    width: 0%;
  }
}

/* about */

#date{
  width: 100%;
  height: 100vh;
  padding-bottom: 100vh;
  position: sticky;
  top: 0;
}

#dateInner{
  width: 77vw;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 1;
  transition-duration: 0.5s;
  font-size: 6.67vw;
  letter-spacing: -0.02em;
  line-height: 1;
  white-space: nowrap;
}

#dateInner h2{
  margin-bottom: 20px;
  font-size: 2.67vw;
  color: #000;
}

#dateInner h3{
  color: #bbb;
  margin-bottom: 20px;
}

#dateInner.hide{
  opacity: 0;
  transition-duration: 0.5s;
}

/* movie */

#movie{
  width: 100%;
  height: calc(100vh - 1px);
  position: relative;
}

#movieInner{
  width: calc(100% - 30px);
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* look */

#look{
  padding: 150px 0;
}

#lookList{
  width: 100%;
  counter-reset: look;
}

#lookList ul{
  display: flex;
  flex-wrap: wrap;
}

#lookList li{
  width: 100%;
  margin: 0 1px 1px 0;
  position: relative;
}

.lookImg{
  position: relative;
}

.lookCredit{
  margin-left: 15px;
  padding: 20px 30px;
  color: #fff;
  position: sticky;
  top: 47vh;
  font-size: 14px;
  line-height: 1.4;
  z-index: 111;
}

.lookCredit h4{
  opacity: 0;
  visibility: hidden;
  transition-duration: 0.5s;
}

.lookCredit h4.active{
  opacity: 1;
  visibility: visible;
  transition-duration: 0.5s;
}

.lookCredit::before{
  counter-increment: look;
  content: counter(look, decimal);
  position: absolute;
  top: 22px;
  left: 0;
  font-family: "HelveticaNeueLTPro", sans-serif;
  font-weight: 500;
}

/* item */

#item{
  padding-top: 150px;
}

#itemList{
  width: 100%;
  overflow: hidden;
  counter-reset: item;
}

#itemList ul{
  width: calc(100% + 2px);
}

#itemList li{
  width: calc(100% / 2 - 1px);
  margin: 0 1px 60px 0;
  float: left;
  position: relative;
}

#itemList li h6{
  font-size: 6.5px;
}

.mtUp{
  position: relative;
  top: -3px;
}

/*
#itemList li::after{
  content: "© MOANDMO CLOTHING All Rights Reserved."; 
  position: absolute;
  bottom: -52px;
  left: 40px;
  z-index: 2222;
  font-size: 9px;
}
*/

.itemCredit{
  height: 42px;
  padding-left: 25px;
  position: absolute;
  bottom: -35px;
  left: 15px;
  z-index: 111;
}

.itemCredit h4{
  width: 120px;
  margin-bottom: 4px;
  font-size: 12px;
  line-height: 1.2;
}

.itemCredit h5{
  margin-bottom: 10px;
  font-size: 10px;
}

.itemCredit h5 span{
  text-decoration: underline;
}

.itemCredit::before{
  counter-increment: item;
  content: counter(item, decimal);
  position: absolute;
  top: 1px;
  left: 0;
  font-family: "HelveticaNeueLTPro", sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 1.2;
}

.itemCreditTxt{
  opacity: 0;
  visibility: hidden;
  transition-duration: 0.5s;
}

.itemCreditTxt.active{
  opacity: 1;
  visibility: visible;
  transition-duration: 0.5s;
}

#date span.row {
  margin-top: -10px;
  overflow: hidden;
  display: block;
  transform: none;
}

#dateSpace{
  height: 30px;
}

}

@media only print, only screen and (min-width: 1000px){

/* mainVisual */

#mainVisualImg img{
  width: 100%;
  height: 280vh;
  object-fit: cover;
  display: block;
}

#mainVisual a{
  margin-top: -148px;
}

#mainVisualImg{
  transform: scale(1.05);
}

#mainVisualLogo{
  width: 270px;
  position: sticky;
  top: 42vh;
  left: 20px;
  padding-bottom: 30px;
  z-index: 1111;
}

#btnScroll{
  width: 100%;
  color: #fff;
  position: sticky;
  top: calc(100vh - 50px);
  padding-bottom: 40px;
  font-size: 16px;
  text-align: center;
  z-index: 1111;
}

#btnScroll span{
  position: relative;
}

#btnScroll span::after{
  content: "";
  width: 0;
  height: 1px;
  background: #fff;
  position: absolute;
  bottom: -2px;
  left: 0;
  animation: bdAnimaiton 2s linear infinite;
}

@keyframes bdAnimaiton {
  0% {
    width: 0%;
  }
  
  33% {
    width: 100%;
  }

  66% {
    width: 0%;
    left: auto;
    right: 0;
  }
  
  100% {
    width: 0%;
  }
}

/* about */

#date{
  width: 100%;
  height: 100vh;
  padding-bottom: 100vh;
  position: sticky;
  top: 0;
}

#dateInner{
  width: 85.5vw;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 1;
  transition-duration: 0.5s;
  font-size: 2.68vw;
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

#dateInner h3{
  color: #bbb;
  margin-bottom: 20px;
}

#dateInner h2{
  color: #000;
  font-size: 1vw;
  margin-bottom: 20px;
}

#dateInner .pc{
  display: inline-block;
}

#dateInner.hide{
  opacity: 0;
  transition-duration: 0.5s;
}

/* movie */

#movie{
  width: 100%;
  height: 100vh;
  position: relative;
}

#movieInner{
  width: 48.31vw;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* look */

#look{
  padding: 150px 0;
}

#lookList{
  counter-reset: look;
}

#lookList{
  width: 100%;
}

#lookList ul{
  display: flex;
  flex-wrap: wrap;
}

#lookList li{
  width: calc(50% - 1px);
  margin: 0 1px 1px 0;
  position: relative;
}

#lookList a{
  position: relative;
  display: block;
}

.lookImg{
  position: relative;
  overflow: hidden; 
}

.lookCredit{
  height: auto;
  margin-left: 25px;
  padding: 30px 40px;
  color: #fff;
  position: sticky;
  top: 47vh;
  font-size: 16px;
  line-height: 1.4;
  z-index: 111;
  pointer-events: none;
}

.lookCredit h4{
  opacity: 0;
  visibility: hidden;
  transition-duration: 0.5s;
}

.lookCredit h4.active{
  opacity: 1;
  visibility: visible;
  transition-duration: 0.5s;
}

.lookCredit::before{
  counter-increment: look;
  content: counter(look, decimal);
  position: absolute;
  top: 32px;
  left: 0;
}

#lookList li:hover .lookCredit::before{
  opacity: 0;
  visibility: hidden;
  transition-duration: 0.5s;
}

#lookList li .lookImg img{
  transform: scale(1);
  transition-duration: 0.5s;
}

#lookList li:hover .lookImg img{
  transform: scale(1.1);
  transition-duration: 0.5s;
}

#lookList li:hover .lookCredit h4{
  opacity: 0;
  visibility: hidden;
  transition-duration: 0.5s;
}

#lookList .lookImg a::after{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(100,100,100,0);
  transition: background 0.5s;
  z-index: 5;
  pointer-events: none;
}

#lookList .lookImg:hover a::after{
  background: rgba(100,100,100,0.7); 
}

.lookImgTxt{
  z-index: 1111;
  font-size: 16px;
  position: absolute;
  top: 32px;
  color: #fff;
  opacity: 0;
  visibility: hidden;
  transition-duration: 0.5s;
  pointer-events: none;
}

#lookList li:hover .lookCredit .lookImgTxt{
  opacity: 1;
  visibility: visible;
  transition-duration: 0.5s;
}

.lookImgTxt::after{
  content: '';
  width: 0;
  height: 1px;
  background: #fff;
  position: absolute;
  bottom: 0;
  left: 0;
  transition-duration: 0.5s;
}

#lookList li:hover .lookImgTxt::after{
  width: 100%;
  transition-duration: 0.5s;
}

.mtUp{
  position: relative;
  top: -3px;
}

/* item */

#item{
  padding-top: 150px;
}

#itemList{
  width: 100%;
  overflow: hidden;
  counter-reset: item;
}

#itemList ul{
  width: calc(100% + 2px);
}

#itemList li{
  width: calc(100% / 3 - 1px);
  margin: 0 1px 60px 0;
  float: left;
  position: relative;
}

/*
#itemList li::after{
  content: "© MOANDMO CLOTHING All Rights Reserved."; 
  position: absolute;
  bottom: -52px;
  left: 55px;
  z-index: 2222;
  font-size: 9px;
}
*/

#itemList li h6{
  font-size: 9px;
}

.itemImg{
  overflow: hidden;
}

.itemCredit{
  height: auto;
  padding-left: 35px;
  position: absolute;
  bottom: -40px;
  left: 20px;
  z-index: 111;
}

.itemCredit h4{
  width: auto;
  margin-bottom: 6px;
  font-size: 16px;
}

.itemCredit h5{
  margin-bottom: 10px;
  font-size: 14px;
}

.itemCredit h5 span{
  text-decoration: underline;
}

.itemCredit::before{
  counter-increment: item;
  content: counter(item, decimal);
  position: absolute;
  top: 2px;
  left: 0;
  font-size: 16px;
}

.itemCreditTxt{
  opacity: 0;
  visibility: hidden;
  transition-duration: 0.5s;
}

.itemCreditTxt.active{
  opacity: 1;
  visibility: visible;
  transition-duration: 0.5s;
}

#itemList a img{
  transition-duration: 0.5s;
  transform: scale(1);
}

#itemList a:hover img{
  transform: scale(1.1);
  transition-duration: 0.5s;
}

#itemList a .itemImg::after{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,0);
  transition: background 0.5s;
  z-index: 5;
  pointer-events: none;
}

#itemList a:hover .itemImg::after{
  background: rgba(255,255,255,0.5); 
}

.itemImgTxt{
  position: absolute;
  top: 48%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1111;
  font-size: 16px;
  padding: 0 20px 4px;
  color: #000;
  opacity: 0;
  visibility: hidden;
  transition-duration: 0.5s;
  pointer-events: none;
}

.itemImg:hover .itemImgTxt{
  opacity: 1;
  visibility: visible;
  transition-duration: 0.5s;
}

.itemImgTxt::after{
  content: '';
  width: 0;
  height: 1px;
  background: #000;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  transition-duration: 0.5s;
}

.itemImg:hover .itemImgTxt::after{
  width: 100%;
  transition-duration: 0.5s;
}

#date span.row {
  margin-top: -15px;
  overflow: hidden;
  display: block;
  transform: none;
}

#dateSpace{
  height: 30px;
}

}

@media only print, only screen and (min-width: 1800px){

#itemList li{
  width: calc(100% / 4 - 1px);
  margin: 0 1px 80px 0;
  float: left;
  position: relative;
}


}