@charset "utf-8";
* {
  margin:0;
  padding:0;
  box-sizing: border-box;
}
body {
  font-family:"ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  color:#000;
  line-height: 1.5em;
}
ul,ol {
  list-style-type:none;
}
a:hover {
  opacity:1.0;
}
a:focus {
  outline: none;
}
img{
	height:auto;
	border:0;
	vertical-align:top;
  max-width: 100%;
	margin:0;
}
video {
  vertical-align: bottom;
  width:100%;
  height:auto;
  outline: none;
}
.content_wrap {
  max-width: 750px;
  margin:0 auto;
  overflow: hidden;
}
.content_wrap img {
  display: block;
  height: auto;
}
.content_wrap a {
  display: block;
}
.rl {
  position: relative;
}
.sldb {
  transition: 1s 0.2s;
  clip-path: inset(0% 0% 100% 0%);
}
.sldb.inview_active {
  clip-path: inset(0%);
}
.fadeup.inview_active{
  transform: translateY(0px);
  opacity: 1;
}
.fadeup {
  transition: 0.7s 0s;
  transform: translateY(50px);
  opacity: 0;
}
.lsld {
  transition: 0.8s 0s;
  clip-path: inset(0% 100% 0% 0%);
}
.lsld.inview_active {
  clip-path: inset(0%);
}
.rsld {
  transition: 0.8s 0s;
  clip-path: inset(0% 0% 0% 100%);
}
.rsld.inview_active {
  clip-path: inset(0%);
}
.fv {
  width: 100%;
  height:1611px;
}
.slider {
  position: absolute;
  overflow: hidden;
  width: 100%;
  height: 1611px;
  left:0;
  top:0;
}
.slider li:nth-of-type(1) {
  opacity: 0;
}
.slider li:nth-of-type(1).active {
  opacity: 1;
}
.slider__item {
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.slider__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.slider__item.pre {
  z-index: 2;
}
.slider__item.now {
  z-index: 3;
}

@supports (-webkit-mask-size: 100% 100%) {
  .slider__item img {
    -webkit-mask-image: url("../images/mask.jpg");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    -webkit-mask-position: left center;
  }
  .slider li:nth-of-type(1).now img {
    animation: slide1 1.5s cubic-bezier(.4, 0, .2, 1) 0s forwards;
    -webkit-mask-position:top 0 left 0;
    mask-position:top 0 left 0;
  }
  .slider li:nth-of-type(2).now img {
    animation: slide2 1.5s cubic-bezier(.4, 0, .2, 1) 0s forwards;
    -webkit-mask-position:top 0 right 0;
    mask-position:top 0 right 0;
  }
}
@supports (mask-size: 100% 100%) {
  .slider__item img {
    mask-image: url("../images/mask.jpg");
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
    mask-position: left center;
  }
  .slider li:nth-of-type(1).now img {
    -webkit-mask-position:left top;
    mask-position:left top;
    animation: slide1 1.5s cubic-bezier(.4, 0, .2, 1) 0s forwards;
  }
  .slider li:nth-of-type(2).now img {
    -webkit-mask-position:right top;
    mask-position:right top;
    animation: slide2 1.5s cubic-bezier(.4, 0, .2, 1) 0s forwards;
  }
}
@keyframes slide1 {
  0% {
    -webkit-mask-position:left top;
    mask-position:left top;
    -webkit-mask-size: 0% 100%;
    mask-size: 0% 100%;
  }
  100% {
    -webkit-mask-position:left top;
    mask-position:left top;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
  }
}
@keyframes slide2 {
  0% {
    -webkit-mask-position:right top;
    mask-position:right top;
    -webkit-mask-size: 0% 100%;
    mask-size: 0% 100%;
  }
  100% {
    -webkit-mask-position:top 0 right 0;
    mask-position:top 0 right 0;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
  }
}
.slider02 {
  position: absolute;
  overflow: hidden;
  width: 81.3%;
  height: 363px;
  top:42.63%;
  left:9.3%;
}
.slider__item2 {
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.slider__item2 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.slider__item2.pre {
  z-index: 2;
}
.slider__item2.now {
  z-index: 3;
}
@supports (-webkit-mask-size: 100% 100%) {
  .slider__item2 img {
    -webkit-mask-image: url("../images/mask.jpg");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    -webkit-mask-position: left center;
  }
  .slider02 li:nth-of-type(1).now img {
    animation: slide1 1.5s cubic-bezier(.4, 0, .2, 1) 0s forwards;
    -webkit-mask-position:top 0 left 0;
    mask-position:top 0 left 0;
  }
  .slider02 li:nth-of-type(2).now img {
    animation: slide2 1.5s cubic-bezier(.4, 0, .2, 1) 0s forwards;
    -webkit-mask-position:right top;
    mask-position:right top;
  }
}
@supports (mask-size: 100% 100%) {
  .slider__item2 img {
    mask-image: url("../images/mask.jpg");
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
    mask-position: left center;
  }
  .slider02 li:nth-of-type(1).now img {
    -webkit-mask-position:left top;
    mask-position:left top;
    animation: slide1 2s cubic-bezier(.4, 0, .2, 1) 0s forwards;
  }
  .slider02 li:nth-of-type(2).now img {
    -webkit-mask-position:right top;
    mask-position:right top;
    animation: slide2 2s cubic-bezier(.4, 0, .2, 1) 0s forwards;
  }
}
.hikari{
  border: 2px solid transparent;
  position: relative;
  overflow: hidden;
}
.hikari:before{
  content: "";
  animation: hikari 4s cubic-bezier(0.25, 0, 0.25, 1) infinite;
  background-color: #fff;
  width: 140%;
  height: 100%;
  transform: skewX(-45deg);
  top: 0;
  left: -160%;
  opacity: 0.5;
  position: absolute;
}
@keyframes hikari{
  0% {
    left: -160%;
    opacity: 0;
  }
  70% {
    left: -160%;
    opacity: 0.5;
  }
  71% {
    left: -160%;
    opacity: 1;
  }
  100% {
    left: -20%;
    opacity: 0;
  }
}
.pt01 {
  position: absolute;
  width: 88.13%;
  top:18.31%;
  left:2.66%;
  z-index: 4;
}
.fv.on .fadeup {
  transform: translateY(0px);
  opacity: 1;
}
.video01 {
  position: absolute;
  width: 52.4%;
  top:73.3%;
  left:2%;
  z-index: 4;
}
.video01 video {
  border-radius: 50%;
  border:8px solid #fff;
}
.pt02 {
  position: absolute;
  width: 32%;
  left:0.5%;
  top:47.6%;
  transition-delay: 0.3s;
  z-index: 5;
}
.pt03 {
  position: absolute;
  z-index: 5;
  width: 61.86%;
  right:0;
  bottom:0;
  height: 28.05%;
}
.pt03 li {
  transition: 0.7s 0s;
  transform: translateY(50px);
  opacity: 0;
  position: absolute;
}
.fv.on .pt03 li {
  transform: translateY(0px);
  opacity: 1;
}
.pt03 li:nth-of-type(1) {
  transition-delay: 0.6s;
  width: 52.37%;
  top:0.7%;
  left:24%;
}
.pt03 li:nth-of-type(2) {
  transition-delay: 0.9s;
  width: 52.37%;
  top:44%;
  left:0;
}
.pt03 li:nth-of-type(3) {
  transition-delay: 1.2s;
  width: 50.43%;
  top:44%;
  right:0;
}
.pt06 {
  position: absolute;
  width: 100%;
  top:64.78%;
  left:0;
  height: 35.49%;
  z-index: 2;
}
.pt06 li {
  position: absolute;
  width: 33.6%;
  top:0;
  transition: 0.7s 0s;
  transform: translateY(50px);
  opacity: 0;
}
.pt06.inview_active li {
  transform: translateY(0px);
  opacity: 1;
}
.pt06 li:nth-of-type(1) {
  left:1.1%;
}
.pt06 li:nth-of-type(2) {
  left:33.7%;
  transition-delay: 0.3s;
}
.pt06 li:nth-of-type(3) {
  width: 33.06%;
  transition-delay: 0.6s;
  right:0.5%;
}
.video02 {
  position: absolute;
  width: 90%;
  left:5%;
  top:3.9%;
}
.pt09 {
  position: absolute;
  width: 77.46%;
  top:34.75%;
  left:12.13%;
}
.ptp {
  position: absolute;
  width: 38.4%;
  top:56.94%;
  left:38.6%;
  transition-delay: 0.3s;
  z-index: 2;
}
.btn01 {
  position: absolute;
  width: calc( 88.8% + 4px );
  top:62.8%;
  left:calc( 6.7% - 2px );
}
.btni {
  position: absolute;
  width: 15.2%;
  right:0.3%;
  top:65.13%;
  pointer-events: none;
}
.pt10 {
  position: absolute;
  width: 56.53%;
  top:1.66%;
  left:21.73%;
}
.pt11 {
  position: absolute;
  width: 100%;
  top:39.86%;
  left:0;
  height: 58.13%;
}
.pt11 li {
  position: absolute;
  transition: 0.7s 0s;
  transform: translateY(50px);
  opacity: 0;
}
.pt11.inview_active li {
  transform: translateY(0px);
  opacity: 1;
}
.pt11 li:nth-of-type(1) {
  width: 36.8%;
  left:0;
  top:2.42%;
  transition-delay: 0.2s;
}
.pt11 li:nth-of-type(2) {
  width: 31.06%;
  right:8.4%;
  top:0;
  transition-delay: 0.5s;
}
.pt11 li:nth-of-type(3) {
  width: 31.06%;
  left:7.33%;
  bottom:0;
  transition-delay: 0.8s;
}
.pt11 li:nth-of-type(4) {
  width: 38.93%;
  right:5.86%;
  bottom:1.33%;
  transition-delay: 1.1s;
}
.pt15 {
  position: absolute;
  width: 88.8%;
  top:36.6%;
  right:5.6%;
}
.pt16 {
  position: absolute;
  width: 82.8%;
  top:23.22%;
  left:7.86%;
}
.pt17_list {
  position: absolute;
  width: 100%;
  height: 43.3%;
  top:46%;
  left:0;
}
.pt17_list .fd {
  transition: 0.7s 0.3s;
  transform: translateY(50px);
  opacity: 0;
}
.pt17_list.inview_active .fd {
  transform: translateY(0px);
  opacity: 1;
}
.pt17_list .ls {
  transition: 0.6s 0.7s;
  clip-path: inset(0% 100% 0% 0%);
}
.pt17_list.inview_active .ls {
  clip-path: inset(0%);
}
.pt17 {
  position: absolute;
  width: 30.4%;
  top:0;
  left:2.94%;
}
.pt18 {
  position: absolute;
  width: 30.53%;
  left:34.4%;
  bottom:0;
}
.pt19 {
  position: absolute;
  width: 30.53%;
  top:0;
  right:3.3%;
}
.pt20 {
  position: absolute;
  width: 27.73%;
  top:65.88%;
  left:4.4%;
}
.pt21 {
  position: absolute;
  width: 28.66%;
  top:16.14%;
  left:35.46%;
}
.pt22 {
  position: absolute;
  width: 31.6%;
  top:65.88%;
  left:65.46%;
}
.pt23 {
  position: absolute;
  width: 43.06%;
  top:22.74%;
  left:5.2%;
}
.pt24 {
  position: absolute;
  width: 43.06%;
  top:22.74%;
  right:5.2%;
  transition-delay: 0.3s;
}
.pt25 {
  position: absolute;
  width: 41.73%;
  top:28.65%;
  left:8%;
}
.pt26 {
  position: absolute;
  width: 42.66%;
  top:28.65%;
  left:50.93%;
  transition-delay: 0.3s;
}
.pt27 {
  position: absolute;
  width: 100%;
  height: 75.73%;
  left:0;
  top:23.62%;
}
.pt27 li {
  position: absolute;
  transition: 0.7s 0s;
  transform: translateY(50px);
  opacity: 0;
}
.pt27.inview_active li {
  transform: translateY(0px);
  opacity: 1;
}
.pt27 li:nth-of-type(1) {
  width: 33.73%;
  top:0;
  left:21.6%;
}
.pt27 li:nth-of-type(2) {
  width: 47.73%;
  top:23%;
  left:1%;
  transition-delay: 0.3s;
}
.pt27 li:nth-of-type(3) {
  width: 46%;
  bottom:0;
  left:17.6%;
  transition-delay: 0.6s;
}
.video03 {
  position: absolute;
  width: 90%;
  left:5%;
  top:24.88%;
}
.pt06-2 {
  top:70.87%;
}
.pt30 {
  position: absolute;
  width: 100%;
  top:-3.3%;
  z-index: 2;
}
.pt31 {
  position: absolute;
  width:65.86%;
  top: 13.67%;
  left:15.73%;
}
.pt32 {
  position: absolute;
  width: 13.33%;
  top:42.4%;
  left:4.93%;
}
.pt33 {
  position: absolute;
  width: 5.86%;
  top:42.4%;
  right:5.3%;
}
.pt34 {
  position: absolute;
  width: 66.66%;
  top:19.3%;
  left:16.53%;
}
.pt35 {
  position: absolute;
  z-index: 2;
  width: 19.73%;
  top:6.13%;
  left:6%;
}
.pt36 {
  position: absolute;
  width: 86.4%;
  top:6.13%;
  left:6.8%;
}
.pt37 {
  position: absolute;
  width: 22.8%;
  top:46.2%;
  right:2.8%;
  transition-delay: 0.3s;
}
.video04 {
  position: absolute;
  width: 35.33%;
  top:31.57%;
  left:7.33%;
}
.pt38 {
  position: absolute;
  width: 20.66%;
  top:4.16%;
  left:6%;
  z-index: 2;
}
.pt39 {
  position: absolute;
  width: 77.73%;
  top:4.16%;
  left:15.46%;
}
.pt40 {
  position: absolute;
  width: 22.8%;
  right:2.8%;
  top:28.55%;
  transition-delay: 0.3s;
}
.video05 {
  position: absolute;
  width: 35.33%;
  top:69.7%;
  left:7.33%;
}
.pt41 {
  position: absolute;
  width: 85.6%;
  top:13.57%;
  left:7.2%;
}
.pt42 {
  position: absolute;
  width: 100%;
  height: 75.3%;
  top:9.51%;
  left:0;
}
.pt42 li {
  position: absolute;
  transition: 0.7s 0s;
  transform: translateY(50px);
  opacity: 0;
}
.pt42.inview_active li {
  transform: translateY(0px);
  opacity: 1;
}
.pt42 li:nth-of-type(1) {
  width: 36%;
  top:0;
  left:56.66%;
}
.pt42 li:nth-of-type(2) {
  width: 34.93%;
  top:28%;
  left:65.33%;
  transition-delay: 0.3s;
}
.pt42 li:nth-of-type(3) {
  width: 36%;
  bottom:0%;
  left:48%;
  transition-delay: 0.6s;
}
.pt45 {
  position: absolute;
  width: 34.26%;
  bottom:0;
  right:0;
}
.ptp02 {
  position: absolute;
  width: 38.4%;
  top:6.34%;
  left:38.6%;
}
.pt46 {
  position: absolute;
  width: 26.66%;
  top:5%;
  left:37.2%;
}
.pt47 {
  position: absolute;
  width:84%;
  top: 29.45%;
  left:7.73%;
  transition-delay: 0.2s;
}
.video06 {
  position: absolute;
  width:92%;
  left:4%;
  top: 53.1%;
}
.pt48 {
  position: absolute;
  width: 50.93%;
  top:47.7%;
  right:2%;
  transition: 0.6s 0.4s;
}
.pt49 {
  position: absolute;
  z-index: 5;
  width: 31.46%;
  top:33.24%;
  right:0;
}
.pt50 {
  position: absolute;
  width: 26.66%;
  top:0.65%;
  left:37.2%;
}
.pt51 {
  position: absolute;
  width: 90.26%;
  top:20.68%;
  left:4.8%;
}
.pt53 {
  position: absolute;
  width: 54.26%;
  left:3.2%;
  top:38%;
}
.pt53 img {
  animation: fuwa 4s -0.8s ease-in-out infinite;
}
.pt54 {
  position: absolute;
  width: 52.4%;
  right:0;
  top:64%;
}
.pt54 img {
  animation: fuwa 4s ease-in-out infinite;
}
@keyframes fuwa {
  0% {
      transform: translateY(0%);
  }
  50% {
      transform: translateY(10%);
  }
  100% {
      transform: translateY(0%);
  }
}
.pt55 {
  position: absolute;
  width: 52.93%;
  top:47.63%;
  right:4.4%;
  transition: 1.2s 0.2s;
}
.pt56 {
  position: absolute;
  width: 51.33%;
  top:74.9%;
  left:10.4%;
  transition:1.2s 0.4s;
}
.pt57 {
  position: absolute;
  width: 91.73%;
  top:7%;
  left:4.13%;
  transition-delay: 0.3s;
}
.pt58 {
  position: absolute;
  width: 82%;
  top:42.34%;
  left:8.6%;
}
.pt59 {
  position: absolute;
  width: 87.73%;
  top:70%;
  left:6.26%;
  transition-delay: 0.3s;
}
.pt60 {
  position: absolute;
  width: 100%;
  top:17.95%;
  left:0;
}
.pt61 {
  position: absolute;
  width: 100%;
  height: 29.64%;
  top:47.83%;
  left:0;
}
.pt61 li {
  position: absolute;
  width: 34.8%;
  transition: 0.7s 0s;
  transform: translateY(50px);
  opacity: 0;
}
.pt61.inview_active li {
  transform: translateY(0px);
  opacity: 1;
}
.pt61 li:nth-of-type(1) {
  position: absolute;
  left:3.46%;
  bottom:0;
}
.pt61 li:nth-of-type(2) {
  position: absolute;
  left:32.8%;
  top:0;
  transition-delay: 0.3s;
}
.pt61 li:nth-of-type(3) {
  position: absolute;
  left:62.93%;
  top:22.65%;
  transition-delay: 0.6s;
}
.pt64 {
  position: absolute;
  width: 74.66%;
  top:26.88%;
  left:12.26%;
}
.pt65 {
  position: absolute;
  width: 90.66%;
  top:42.62%;
  left:3.86%;
  transition-delay: 0.3s;
}
.pt66 {
  position: absolute;
  width: 36.66%;
  top:3.94%;
  right:5.73%;
}
.pt67 {
  position: absolute;
  width:40.66%;
  top:35%;
  left:6.13%;
}
.pt68 {
  position: absolute;
  width: 46.66%;
  top:64.52%;
  right:4.8%;
}
.pt69 {
  position: absolute;
  width: 85.6%;
  left:7.2%;
  top:8.9%;
}
.pt70 {
  position: absolute;
  width: 86.66%;
  top:18%;
  left:6.4%;
  transition-delay: 0.2s;
}
.pt71 {
  position: absolute;
  z-index: 2;
  width: 37.33%;
  top:80.35%;
  left:32%;
}
.pt72 {
  position: absolute;
  z-index: 2;
  width: 9.6%;
  top:92%;
  right:7.6%;
}
.pt73 {
  position: absolute;
  width: 21.46%;
  top:5.43%;
  left:3.33%;
}
.pt74 {
  position: absolute;
  width: 70.13%;
  top:78.8%;
  left:18.8%;
}
.pt75 {
  position: absolute;
  width: 17.73%;
  top:8.45%;
  left:9.7%;
}
.pt76 {
  position: absolute;
  width: 22.4%;
  top:8.45%;
  left:28.8%;
}
.pt77 {
  position: absolute;
  width: 30.53%;
  top:8.45%;
  left:52.53%;
}
.pt78 {
  position: absolute;
  width: 88.13%;
  top:15.74%;
  left:5.33%;
}
.pt79 {
  position: absolute;
  width: 80.26%;
  top:52.21%;
  left:10.53%;
}
.pt80 {
  position: absolute;
  width: 89.33%;
  top:8.28%;
  left:4.66%;
}
.video07 {
  position: absolute;
  width: 49.33%;
  top:33.5%;
  left:0;
}
.video08 {
  position: absolute;
  width: 49.33%;
  top:33.5%;
  right:0;
}
@media(max-width:749px) {
 img {
   width: 100%;
 }
 .fv {
   height:214.8vw;
 }
 .slider {
   height: 214.8vw;
 }
 .video01 video {
   border:4px solid #fff;
 }
 .slider02 {
   height: 48.4vw;
 }
}