@charset "utf-8";

@media print{
  
}



#top{  }
#t-mv{ padding-top:100vh; padding-top:100svh; max-width:1920px; margin:0 auto; }
#t-mv .img{ position:fixed; top:0; left:50%; min-height: 100vh; min-height: 100svh;  width:100%; max-width:1920px; transform:translateX(-50%);  }

#t-mv .tph{ position: absolute; width: 100%; height: 100%; opacity:1;  }
#t-mv .tph img{ object-fit:cover; width: 100%; height: 100%; transform:scale(1.3); transition:1s .5s cubic-bezier(0.215, 0.61, 0.355, 1); filter:blur(1em); }
#t-mv.play .tph img{ opacity:1; transform:scale(1); filter:blur(0);   }
#t-mv .tph > div{ background: url("../img/kv1.jpg") center center / 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 16s -4s infinite forwards; }
#t-mv.on .tph > div:nth-of-type(2){ background-image:url("../img/kv1.jpg"); animation: mvimg 16s 0s infinite forwards; }
#t-mv.on .tph > div:nth-of-type(3){ background-image:url("../img/kv1.jpg"); animation: mvimg 16s 4s infinite forwards; }
#t-mv.on .tph > div:nth-of-type(4){ background-image:url("../img/kv1.jpg"); animation: mvimg 16s 8s infinite forwards; }

#t-mv h1{ position:absolute; z-index:3; left:42%; bottom: 10%; width:16%; opacity:0; transition:1s 1.3s cubic-bezier(0.215, 0.61, 0.355, 1); filter:blur(1em); }
#t-mv.play h1{ opacity:1; filter:blur(0); }


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

.scroll-down1 {
  width: 1.6em;
  height: 4em;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  position:absolute; left:50%; bottom:1em; transform:translateX(-50%);
}
.scroll-down1 i {
  box-sizing: border-box;
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0;
  width: 1.5em;
  height: 1.5em;
  border-style: solid;
  border-width: 2px 2px 0 0;
  border-color: #fff;  
  transform: rotate(135deg);
  animation: scrollDown1 1.8s ease infinite;
}
.scroll-down1 i:first-child { animation-delay:.2s; top: -.8em; }

@keyframes scrollDown1 {
  0% {
    transform: translateY(-2em) rotate(135deg);
    opacity: 0;
  }
  50% {
    transform: translateY(0px) rotate(135deg);
    opacity: 1;
  }
  100% {
    transform: translateY(2em) rotate(135deg);
    opacity: 0;
  }
}


#t-mv-txt{ position:relative; z-index:1; background-color:#fff; padding:10em 2em 2em; text-align:center; font-size:130%; top:1px; }
#t-mv-txt h2{  margin-bottom:1em;   }
#t-mv-txt p{ line-height:2.5; letter-spacing:.1em; }

.t-conts{ background-color:#fff; position:relative; z-index:1; padding:8% 0; font-family: "Noto Sans JP", sans-serif; }
.t-conts > div{ max-width:1600px; margin: 0 auto; display:flex; justify-content:space-between; align-items:center; } 
.t-conts .img{ width: 50%;  margin:0; position:relative; overflow:hidden; }
.t-conts .img img{ transition:1s cubic-bezier(0.215, 0.61, 0.355, 1); transform:scale(1.2); }
.t-conts .play .img img{ transform:scale(1); }
.t-conts .on .img img{ transform:scale(1.1); }
.t-conts .txt{ padding:5em 5em 5em 0; width:42%; letter-spacing:0.1em; font-size:90%; }
.t-conts .txt .p-ctg{ border-bottom:1px solid #554440; padding-bottom: .5em; display:flex; justify-content:space-between; font-size:90%; align-items:center; }
.t-conts .txt .p-ctg .tit{ font-size:250%; letter-spacing:0.1em; font-weight:400; }
.t-conts .txt h3{  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif; font-size:220%; line-height:1.5; margin-bottom:1em; font-weight:400; }
.t-conts .txt .p-txt{ font-size:170%; font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif; font-weight:400; }
.t-conts .txt a > div{ margin:5em 0; }
.t-conts .txt a + p{ border-top:1px solid #554440; margin-top:7em; text-align:right; padding-top:.7em; }
.t-conts.row > div{ flex-direction:row-reverse; }
.t-conts.row .txt{ padding:5em 0 5em 5em; }

#t-platinum{ background-color:#fff; position:relative; z-index:1; padding:8% 8em; }
#t-platinum .img{ position:relative; margin:0 auto; max-width:1600px; margin-bottom:3em; overflow:hidden; }
#t-platinum .img img{ transition:1s cubic-bezier(0.215, 0.61, 0.355, 1); transform:scale(1.2); }
#t-platinum .play .img img{ transform:scale(1); }
#t-platinum .on .img img{ transform:scale(1.08); }
#t-platinum .txt{ position:absolute; left:6%; top: 50%; transform: translateY(-50%); color:#fff; }
#t-platinum .txt h3{ font-family: "EB Garamond", serif; font-size:500%; font-weight:400; }
#t-platinum .view{ color:#fff; border-color:#fff; }
#t-platinum .view:before{ filter:brightness(10) saturate(0%); }
#t-platinum .p-txt{ line-height:2; letter-spacing:.1em; text-align:center; font-size:145%; }


.view{ position: relative; border-bottom:1px solid #554440; width:160px; line-height:1.5; padding-bottom:.5em; }
.view:before{ content:""; position:absolute; right:0; top:calc(50% - .7em); background:url(../img/arr.svg) no-repeat center center; background-size: contain; width:1em; height:1em; }
.view:after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;  }
.view > span{ display:block; position:relative; overflow:hidden; }
.view > span > span{ display:block; position:relative; transition:.5s; }
.view > span > span:before,.view > span > span:after{ content:"View Detals"; display:block; transition:.5s cubic-bezier(0.215, 0.61, 0.355, 1); }
.view > span > span:after{ content:"View Detals"; position:absolute; left:0; top:1.5em; opacity:0;  }

.on .view > span > span:before{ opacity:0; }
.on .view > span > span:after{ opacity:1; }
.on .view > span > span{ transform: translateY(-1.5em); }
.on .view:before{ animation: viewarr 1s ease forwards; }

@keyframes viewarr {
  0% {
    transform: scaleY(1.0) translateX(0);
    opacity: 1;
  }
  49% {
    transform: scaleY(0.5) translateX(1em);
    opacity: 0;
  }
  50% {
    transform: scaleY(0.5) translateX(-1em);
    opacity: 0;
  }
  100% {
    transform: scaleY(1.0) translateX(0);
    opacity: 1;
  }
}


@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) { 
  .t-conts .txt h3{ font-size:210%; }
 }
@media screen and (max-width: 1240px) {
  #t-mv h1{ left:38%; width:24%; }
  #t-mv-txt{ padding:8em 2em 4em; }
  .t-conts{ padding:5em 0; }
  .view{ width:12em; }
}
@media screen and (max-width: 810px) {
  #t-mv h1{ left:30%; width:40%; top: 50%; bottom: auto; transform: translateY(-50%); }
  #t-mv-txt{ padding:8em 2em 4em;  }
  .t-conts > div{ display:block; }
  .t-conts .img{ width: 90%; margin:0 auto;  }
  .t-conts .txt{ width: 65%; padding:5em 0 !important; margin:0 auto;  }
  #t-platinum{ padding:2em 0; }
  #t-platinum .txt{ left:5%; }
  #t-platinum .txt h3{ font-size:350%; }
  #t-platinum .view{ width:10em; }

  #t-mv .tph > div{ background-image: url("../img/kv1_sp.jpg"); }
  #t-mv.on .tph > div:nth-of-type(2){ background-image: url("../img/kv1_sp.jpg"); }
  #t-mv.on .tph > div:nth-of-type(3){ background-image: url("../img/kv1_sp.jpg"); }
  #t-mv.on .tph > div:nth-of-type(4){ background-image: url("../img/kv1_sp.jpg"); }
}
@media screen and (max-width: 600px) {
  #t-mv h1{ left:24%; width:52%; }
  .t-conts .txt{ width: 80%;  }
  #t-platinum .txt h3{ font-size:300%; }
  .view{ font-size: 130%; }
}