@charset "utf-8";

@media print{
  
}



#top{  }
#t-mv{ max-width:1920px; margin:0 auto; }
#t-mv .img{  width:100%; max-width:1920px; padding-top:59.7%; position:relative;  }
#t-mv .tph{ position: absolute; width: 100%; height: 100%; overflow: hidden; transform:scale(1.2); opacity:0; transition:.6s; top:0; left:0;  }
#t-mv.on .tph{ opacity:1; transform:scale(1);   }
#t-mv .tph > div{ background: url("../img/mv1.png") center top / cover; position: absolute; width: 100%; height: 100%; top:0; left:0; opacity:0; }
#t-mv .tph > div:nth-of-type(1){ opacity:1; }
#t-mv.on .tph > div:nth-of-type(1){ opacity:1; animation: mvimg 12s -3s infinite forwards; }
#t-mv.on .tph > div:nth-of-type(2){ background-image:url("../img/mv2.png"); animation: mvimg 12s 0s infinite forwards; }
#t-mv.on .tph > div:nth-of-type(3){ background-image:url("../img/mv3.jpg"); animation: mvimg 12s 3s infinite forwards; }
#t-mv.on .tph > div:nth-of-type(4){ background-image:url("../img/mv4.jpg"); animation: mvimg 12s 6s infinite forwards; }

#t-mv h1{ position: absolute; bottom: 10%; left: 0; width: 100%; text-align: center;  font-size: 400%; z-index: 3; color: #fff; }
#t-mv h1 img{ width: 6em; } 

@keyframes mvimg {
  0% { opacity:0; }
  25% {opacity:0; transform:scale(1.3); z-index: 2;}
  30% {opacity:1; transform:scale(1); z-index:1;}
  65% {opacity:1; }
  80% {opacity:0; }
  100% {opacity:0; transform:scale(1); }
}




#t-mv-txt{ position:relative; z-index:1; background-color:#fff; padding:12em 2em 8em; text-align:center; font-size:95%; top:1px;  }
#t-mv-txt > div{max-width:700px; width: 90%; margin: 0 auto;} 
#t-mv-txt h2 img{  height:10em; width:auto;  }
#t-mv-txt h3{  margin:3em auto; background: linear-gradient(transparent 60%, #dedede 60%); display:inline-block; font-size:130%; line-height:1.5;  }
#t-mv-txt p{ line-height:2.5; letter-spacing:.1em; }
#t-mv-txt h2,#t-mv-txt h3,#t-mv-txt p{ opacity:0; transition:var(--tra2); }
#t-mv-txt.play h2{ opacity:1;}
#t-mv-txt.play h3{ opacity:1; transition-delay: .3s;}
#t-mv-txt.play p{ opacity:1; transition-delay: .6s; }

.hair{ margin:20em auto; }
.hair > div{ max-width:1000px; margin:0 auto; padding: 4%; background:#faf0e6; display:flex; justify-content:center; align-items:center; gap:8%; opacity:0; transition:var(--tra1); }
.hair .img{ width:35%; transition:var(--tra2); opacity:0; transition-delay:.2s; }
.hair .txt{ width:60%; transition:var(--tra1); opacity:0; transition-delay:.4s; }
.hair .txt h3 img{ height:2.5em; width:auto; margin-bottom:2em; }
.hair .txt p{ font-weight:500; line-height:1.8; margin-bottom:2em; font-size:90%; }
.hair .txt p.name{ font-size:95%; font-weight:600; }
.hair .txt p.name b{ font-weight:300; font-size: 200%; display: block; margin-bottom: .3em;}
.hair .txt a{ font-weight:500; }
.hair.play > div{ opacity:1; }
.hair.play .img{ opacity:1 }
.hair.play .txt{ opacity:1 }

.jewerlycase{ margin-bottom:10em; opacity:0; transition:var(--tra1); }
.jewerlycase.play{ opacity:1; }
.jewerlycase > div{ text-align:center; width:90%; margin:0 auto; font-weight:500; }
.jewerlycase h3 img{ height:2.5em; width:auto; }
.jewerlycase .img{ max-width:600px; margin:4em auto; }
.jewerlycase .txt{ font-size:90%; }
.jewerlycase .txt p{ margin-bottom:2em; line-height:2.5; }

aside{ text-align:center; width:90%; font-size: 90%; margin:0 auto; }
aside li{ margin:.8em 0; }


@keyframes fadetxt2 {
  0% {opacity: 0; transform:translateY(2em); }
  100% {opacity: 1; transform:translateY(0);}
}
@keyframes scaleimg {
  0% {transform:scale(1.1); }
  100% {transform:scale(1);}
}
@keyframes slideimg {
  0% {left:100%; }
  40% {left:0;}
  50% {left:0;}
  80% {opacity: 1}
  100% {left:-100%; opacity: .5}
}
@keyframes fadeimg {
  0% { opacity:0; }
  50% {opacity:0; transform:scale(1.4);}
  80% {opacity:0.6;}
  100% {opacity:1; transform:scale(1.0); }
}
@keyframes fadeimg2 {
  0% {opacity:0; transform:scale(1.4);}
  100% {opacity:1; transform:scale(1.0); border-radius: 10em; }
}
@keyframes fadeimg3 {
  0% {opacity:0; transform:scale(1.3);}
  100% {opacity:1; transform:scale(1.0); }
}

@media screen and (max-width: 1440px) { 
  
 }
@media screen and (max-width: 1240px) {
  #t-mv h1{ left:38%; width:24%; }
  
}
@media screen and (max-width: 810px) {
  #t-mv h1{ left:35%; width:30%; }

  .t-conts > a{ width: 90%;} 
  .hair{ margin:10em auto; }

}
@media screen and (max-width: 600px) {

  #t-mv .img{  padding-top:177.8%;}
  #t-mv h1{ left:25%; width:50%; bottom: 5%; }
  #t-mv .tph > div{ background-image: url("../img/mv1_sp.jpg"); }
  #t-mv.on .tph > div:nth-of-type(2){ background-image: url("../img/mv2_sp.jpg"); }
  #t-mv.on .tph > div:nth-of-type(3){ background-image: url("../img/mv3_sp.jpg"); }
  #t-mv.on .tph > div:nth-of-type(4){ background-image: url("../img/mv4_sp.jpg"); }

  .hair{  }
  .hair > div{ display:block; padding: 14% 10%; }
  .hair .img{ width:70%; margin:0 auto 4em; }
  .hair .txt{ width:100%; text-align:center; }
  .hair .txt h3{ text-align:center; }
  .hair h3 img{ height:2em; }
  .hair .txt p{ font-size:100%; text-align:center; }

  .jewerlycase h3 img{ height:2em; }
  .jewerlycase .txt{ font-size:100%; }

  
}