@charset "UTF-8";

/*=================================
    OSMO HOME
    260730
=================================*/
body.fixed{
  overflow: hidden;
}
#index-view{
  position:relative;
  text-align:justify;
}
/* loading
=========================================*/
#index-view .loading{
  width:100%;
  height:100vh;
  overflow:hidden;
  position:fixed;
  z-index:5;
  left:0;
  top:0;
  background:#fff;
  animation-name:loadingAnime;
  animation-duration:2s;
  animation-fill-mode:forwards;
  animation-delay:7s;
  will-change: transform;
}
#index-view.ldgNone .loading{
  display:none;
}
#index-view .loading video{
  background:#7396a4;
  position:fixed;
  z-index:5;
  left:0;
  top:0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
}
@keyframes loadingAnime{
  from {
    opacity: 1;
    filter: blur(0);
  }

  to {
    opacity: 0;
    display:none;
    filter: blur(10px);
  }
}
/* kv
=========================================*/
#index-view .kv{
  width:100%;
  height:100vh;
  overflow:hidden;
  position:relative;
  z-index:2;
  background:#fff;
}
#index-view .kv .kv-slick{
  animation-name:blurInAnime;
  animation-duration:2s;
  animation-fill-mode:forwards;
  opacity:0;
  animation-delay:7s;
  will-change: transform;
}
#index-view.ldgNone .kv .kv-slick{
  animation-delay:1s;
}
#index-view .kv .kv-slick li{
  position:relative;
  width:100%;
  height:100vh;
}
#index-view .kv .kv-slick li.kvbg01{
  background:url(../img/top/kv01.jpg) no-repeat center center;
  background-size:cover;
}
#index-view .kv .kv-slick li.kvbg02{
  background:url(../img/top/kv02.jpg) no-repeat center center;
  background-size:cover;
}
#index-view .kv .txt{
  position:absolute;
  left:14.17%;
  top:50%;
  transform: translateY(-50%);
}
#index-view .kv .txt h1{
  animation-name:blurInAnime;
  animation-duration:1.5s;
  animation-fill-mode:forwards;
  opacity:0;
  animation-delay:9s;
}
#index-view.ldgNone .kv .txt h1{
  animation-delay:3s;
}

#index-view .kv .txt h1 svg{
  width:152px;
}
#index-view .kv .txt p{
  animation-name:blurInAnime;
  animation-duration:1.5s;
  animation-fill-mode:forwards;
  opacity:0;
  animation-delay:10s;
  font-size:clamp(12px , 1.83vw , 22px);
  margin-top:clamp(16px, 1.67vw , 20px);
}
#index-view.ldgNone .kv .txt p{
  animation-delay:4s;
}

@media only screen and (max-width: 767px){
  #index-view .kv .txt{
    left:18.07%;
    top:29.01vw;
    transform: translateY(0);
  }
  #index-view .kv .txt h1 svg{
    width:17.3vw;
  }
  #index-view .kv .kv-slick li.kvbg01{
    background:url(../img/top/kv01_sp.jpg) no-repeat center center;
    background-size:cover;
  }
  #index-view .kv .kv-slick li.kvbg02{
    background:url(../img/top/kv02_sp.jpg) no-repeat center center;
    background-size:cover;
  }

}


/* read
=========================================*/
#index-view .read{
  width:100%;
  height:300vh;
  position:relative;
  z-index:3;
  background:#fff;
}
#index-view .sticky{
  position:sticky;
  overflow:hidden;
  width:100%;
  height:100vh;
  left:0;
  top:0;
}
#index-view .read .read-bg{
  position:absolute;
  top:50%;
  left:50%;
  transform: translateY(-50%) translateX(-50%);
  background:url(../img/top/read_bg.jpg) no-repeat center center;
  background-size:cover;
  transform-origin: center;
  width: min(31.83vw , 382px);
  height:min(50vh , 500px);
  transition: width 2s ease, height 2s ease;
}
#index-view .read.fix .read-bg{
  width: 100vw;
  height: 100vh;
/*  animation-name:bgViewAnime;
  animation-duration:2s;
  animation-fill-mode:forwards;
  will-change: transform;
*/
}

#index-view .read .inner{
  width:min(80vw , 504px);
  color:#fff;
  position:absolute;
  bottom: 50vh;
  left:50%;
  transform: translateY(50%) translateX(-50%);
}
#index-view .read .inner .txt1,
#index-view .read .inner .txt2{
  opacity:0;
}
#index-view .read.fix .inner .txt1,
#index-view .read.fix .inner .txt2{
  animation-name:fadeUpAnime;
  animation-duration:1.2s;
  animation-fill-mode:forwards;
  transition: ease-out 0s;
}
#index-view .read.fix .inner .txt1{
  animation-delay: 1s;
}
#index-view .read.fix .inner .txt1 p{
  text-align:center;
}
#index-view .read.fix .inner .txt2{
  animation-delay: 1.6s;
}
#index-view .read .inner p + p{
  margin-top:2em;
}

#index-view .read .txt2 ul{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin:clamp(40px , 5.83vw , 70px) 0 0;
  width:100%;
  gap:20px 0;
}




@keyframes bgViewAnime{
  from {
    width: min(31.83vw , 382px);
    height:min(50vh , 500px);
  }
  to {
    width: 100vw;
    height:100vh;
  }
}
@keyframes fadeUpAnimeTop{
  from {
    opacity: 0;
    transform: translateY(calc(-50% + 50px)) translateX(-50%);
  }

  to {
    opacity: 1;
    transform:  translateY(-50%) translateX(-50%);
  }
}

@media only screen and (max-width: 767px){
  #index-view .read{
    height:250vh;
  }
  #index-view .read .read-bg{
    background:url(../img/top/read_bg_sp.jpg) no-repeat center left;
    background-size:cover;
    width: 220px;
    height:274px;
  }
  #index-view .read.fix .inner .txt1 p{
    text-align:left;
  }
  #index-view .read .txt2 ul{
    margin:clamp(60px , 5.83vw , 70px) auto 0;
    width:138px;
  }

  @keyframes bgViewAnime{
    from {
      width: 220px;
      height:274px;
    }
    to {
      width: 100%;
      height:100%;
    }
  }
}

/* blank
=========================================*/
#index-view .blank{
  height:clamp(360px , 41.66vw , 600px);
  background:#fff;
  position:relative;
  z-index:3;
}

@media only screen and (max-width: 767px){


}

/* movie
=========================================*/
#index-view .movie{
  overflow:hidden;
  position:relative;
  z-index:1;
  width:100%;
}
#index-view .movie video{
  width:100%;
  aspect-ratio:16/9;
  object-fit: cover;
}
#index-view .movie.u-fix{
  position:fixed;
  left:0;
  top:50%;
  transform: translateY(-50%);
}

@media only screen and (max-width: 767px){

  #index-view .movie video{
    object-fit: cover;
    aspect-ratio:9/16;
  }
  #index-view .movie video img{

  }
}


/* package
=========================================*/
#index-view .package{
  position:relative;
  z-index:3;
  margin-top:56.25vw;
  width:100%;
  height:200vh;
  background:#fff;
}
#index-view .package .muteFlug{
  position:absolute;
  right:7vw;
  top:calc(-1 * calc(clamp(35px , 4.17vw , 50px) + 55px));
  cursor:pointer;
  width:55px;
}

#index-view .package .package-bg{
  position:absolute;
  top:50%;
  left:50%;
  transform: translateY(-50%) translateX(-50%);
  background:url(../img/top/package.jpg) no-repeat center center;
  background-size:cover;
  transform-origin: center;
  width: min(31.83vw , 382px);
  height:min(50vh , 500px);
  transition: width 2s ease, height 2s ease;
  max-width: 100% !important;
  max-height: 100vh !important;
}
#index-view .package.fix .package-bg{
  width: 100vw;
  height: 100vh;
/*
  animation-name:bgViewAnime;
  animation-duration:2s;
  animation-fill-mode:forwards;
  will-change: transform;
*/
}

@media only screen and (max-width: 767px){
  #index-view .package{
    position:relative;
    z-index:3;
    margin-top:130vw;
    width:100%;
/*    height:93.64vw;*/
    height:150vh;
    background:var(--main-color2);
  }
  #index-view .package .sticky{
    height:93.64vw;
    top: calc(calc(100vh - 93.64vw) / 2);
  }

  #index-view .package .package-bg{
    background:url(../img/top/package_sp.jpg) no-repeat center center;
    background-size:cover;
    width: 220px;
    height:274px;
  }
  #index-view .package.fix .package-bg{
    width: 100%;
    height: 100%;
  }

}


/* product
=========================================*/
#index-view .product{
  background:var(--main-color2);
  overflow: hidden;
  padding:clamp(100px , 16.67vw , 180px) 0 clamp(80px , 20.83vw , 300px);
  position:relative;
  z-index:4;
  color:#fff;
}
#index-view .product .inner{
  width: min(86.17%, 1034px);
  margin:0 auto;
}
#index-view .product .txt{
  width:48.74%;
  margin:0 auto clamp(100px , 16.67vw , 180px);
}
#index-view .product .txt p + p{
  margin-top:2em;
}
#index-view .product p + p.txt-link{
  margin-top:clamp(50px , 6.67vw , 80px);
}

#index-view .product .img{
  display: flex;
  flex-wrap: wrap;
  gap:18px;
}
#index-view .product .img .img01{
  width:100%;
}
#index-view .product .img .img02,
#index-view .product .img .img03{
  width:calc(calc(100% - 18px) / 2);
}

@media only screen and (max-width: 767px){
  #index-view .product .txt{
    width:100%;
    margin:0 auto clamp(100px , 16.67vw , 180px);
  }
  #index-view .product .txt-link{
    margin:clamp(50px , 6.67vw , 80px) auto 0;
    width:138px;
  }
  #index-view .product .img .img02,
  #index-view .product .img .img03{
    width:100%;
  }
}

/* point
-----------------------------------------*/
#index-view .product .point{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap:55px 20px;
  margin:clamp(80px , 10vw , 120px) auto 0;
}
#index-view .product .point .item{
}
#index-view .product .point .item h3{
  font-size:clamp(14px , 1.67vw , 20px);
  margin:0 0 clamp(30px , 3.33vw , 40px);
}
#index-view .product .point .item h3 span.en-serif{
  font-size:clamp(14px , 1.33vw , 16px);
  display:block;
  margin-bottom:10px;
}
#index-view .product .point .item p{
  font-size:clamp(11px , 1.17vw , 14px);
  margin:20px 0 clamp(30px , 3.33vw , 40px);
}

@media only screen and (max-width: 767px){
  #index-view .product .point .item{
    width:100%;
  }
  #index-view .product .point .item h3 br{
    display:none;
  }

}

/* top-footer
=========================================*/
#index-view .top-footer{
  position:relative;
  z-index:1;
  overflow: hidden;
  width:100%;
  min-height:100vh;
  z-index:1;
}
#index-view .top-footer .top-footer-bg{
  background:url(../img/top/footer.jpg) no-repeat center center;
  background-size:cover;
  position:absolute;
  width:100%;
  height:100vh;
  z-index:1;
  left:50%;
  top:50%;
  transform: translateY(-50%) translateX(-50%);
}
#index-view .top-footer.u-fix .top-footer-bg{
  position:fixed;
}
#index-view .top-footer .inner{
  width: min(86.17%, 1034px);
  color:#fff;
  position:absolute;
  left:50%;
  top:50%;
  transform: translateY(-50%) translateX(-50%);
  z-index: 2;
}

#index-view .top-footer .inner p + p{
  margin-top:2em;
}
#index-view .top-footer h3{
  font-size:clamp(16px , 1.75vw , 21px);
  margin-bottom:clamp(40px , 5.83vw , 70px);
}
#index-view .top-footer .txt1{
}
#index-view .top-footer .txt2 ul{
  margin:clamp(50px , 6.67vw , 80px) 0 0;
}
#index-view .top-footer .txt2 ul li + li{
  margin-top:28px;
}
#index-view .top-footer .txt3{
  position:absolute;
  z-index:1;
  left:50%;
  bottom:clamp(35px , 4.17vw , 50px);
  transform: translateY(0) translateX(-50%);
  opacity:0;
  z-index:2;
}
#index-view .top-footer h3,
#index-view .top-footer .txt1,
#index-view .top-footer .txt2{
  opacity:0;
  position:relative;
  z-index:2;
}
#index-view .top-footer.fix h3,
#index-view .top-footer.fix .txt1,
#index-view .top-footer.fix .txt2{
  animation-name:fadeUpAnime;
  animation-duration:1.2s;
  animation-fill-mode:forwards;
  transition: ease-out 0s;
}
#index-view .top-footer.fix .txt3{
  animation-name:fadeUpAnimeCenter;
  animation-duration:1.2s;
  animation-fill-mode:forwards;
  transition: ease-out 0s;
}

@media only screen and (max-width: 767px){
  #index-view .top-footer .top-footer-bg{
    background:url(../img/top/footer_sp.jpg) no-repeat center center;
    background-size:cover;
  }
  #index-view .top-footer .txt2 ul{
    margin:20vh auto 0;
    width:138px;
  }

}