/*
---------------------------------------------------------------*/
.tip-wrapper {
  position: relative;
  z-index:0;
  background-color:#fff;

}

/*
---------------------------------------------------------------*/
.top-box {
  position: relative;
  position: -webkit-sticky;
  position: sticky;
  top:0;
  left:0;
  width:100%;
  height:100vh;
  height: calc(var(--vh, 1vh) * 100);
  z-index:0;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-image: linear-gradient(0deg, #080f1c, #115d89, #080f1c);
  background-image: url(../images/top/backgroundimage-s.webp);
}
.top-box::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height:100%;
  z-index:1;
  background-color: rgba(0,0,0,.25);
}
.top-box::after {
  position: absolute;
  content: "";
  top: 0%;
  right: 0%;
  width: 50%;
  max-width: 400px;
  aspect-ratio:1.2 / 1;
  z-index:2;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/top/tuki.webp);
}


@media screen and (min-width: 821px) {
.top-box {
  background-image: url(../images/top/backgroundimage.webp);
}
}
/*星空
--------------------------------*/
.particles-wrap{ 
  position: absolute;
  width: 100%; 
  height: 100%;
  top:0px;
  left:0;
  overflow: hidden; 
  z-index:10;
}
/*
--------------------------------*/
.stars {
  position: absolute;
  width: 100%; 
  height: 80%; 
  top:0;
  left:0;
  transition: opacity .8s;
}
.stars.stop {
 opacity:0;
}
/*
--------------------------------*/
.star {
  position: absolute;
  display: block;
  background-color: white; /* 星の色 */
  border-radius: 50%;
  opacity: 0;
  animation: twinkle 3s infinite;
}
/*※止めてます
--------------------------------*/
.stop .star{
  animation-play-state: paused;
}
/*
--------------------------------*/
@keyframes twinkle {
  0% {
    opacity: 0;
  }
  50% {
    transform: scale(1.1);
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(1);
  }
}
/*
---------------------------------------------------------------*/
.act-wrap {
  position: absolute;
  width: 100%;
  height:  100vh;
  height: calc(var(--vhouter, 1vhouter) * 100);
  overflow: hidden;
  top:0;
  left:0;
  z-index:4;
}
/*
---------------------------------------------------------------*/
.area-scale-box {
  position: relative;
  width: 100%;
  max-width: calc(var(--vh, 1vh) * 80);
  height: calc(var(--vh, 1vh) * 100);
  margin:0 auto;
  transition:  transform 1.4s,  opacity .8s;
  transition-timing-function: linear;
  transition-timing-function:cubic-bezier(.25, .46, .45, .94);
  will-change: transform;
}
/*雲 
---------------------------------------------------------------*/
.area-parts-kumo-wrap {
  position: absolute;
  width: 100%;
  height: calc(var(--vh, 1vh) * 100);
  top:0;
  left:0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition:  transform 1.4s,  opacity .8s;
  transition-timing-function:cubic-bezier(.25, .46, .45, .94);
  will-change: transform,opacity;
  transform: scale(.4);
  opacity:0;
  z-index:2;
}

/*雲奥
---------------------------------------------------------------*/
.area-parts-kumo-box{
  position: relative;
  display:block;
  width: 100%;
  margin:0 auto;
  aspect-ratio:1.1 / 1;
  transform: translate(-10%,-8%);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100%;
  background-image: url(../images/top/kumo-oku.svg);
  transform: scale(2.5);
}
/*雲手前
--------------------------------------------- */
.kumo-wrap {
  position: absolute;
  top:0;
  left:0;
  width: 100%;
  height: 100vh;
  height: calc(var(--vhouter, 1vhouter) * 100);
  overflow: hidden;
  z-index:5;
}
/*
--------------------------------------------- */
.kumo-wrap-inner{
  position: relative;
  width: 100%;
  height: calc(var(--vh, 1vh) * 100);
}
/*ロゴタイトル
---------------------------------------------------------------*/
.titlle-image-box{
  position: absolute;
  width: 100%;
  height:100%;
  top:0;
  left:0;
  transition:  transform 1.4s,  opacity .8s;
  transition-timing-function:cubic-bezier(.25, .46, .45, .94);
  transform: scale(.3);
  opacity:0;
  z-index:5;
}
/*
---------------------------------------------------------------*/
.logo-image{
  position: absolute;
  width: 240%;
  max-width: 1200px;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
  aspect-ratio:3 / 1;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/top-title.svg);
}
/*
--------------------------------------------- */
.kumo-box1 {
  position: absolute;
  top:0;
  left:0;
  width: 100%;
  aspect-ratio:3.2 / 1;
  transition:  transform 1.4s,  opacity .8s;
  transition-timing-function:cubic-bezier(.25, .46, .45, .94);
  opacity:0;
  z-index:1;
  will-change: transform,opacity;
}
/*
--------------------------------------------- */
.kumo01 {
  position: absolute;
  top:0;
  left:0;
  width: 100%;
  height: 100%;
  transform: translate(0%, 20%) scale(1.8);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100%;
  background-image: url(../images/top/kumo-01.svg);
}
@media screen and (min-width: 768px) {
.kumo01 {
  transform: translate(0%, 5%) scale(1.3);
}
}
@media screen and (min-width: 1100px) {
.kumo01 {
  transform: translate(0%, -30%) scale(1.3);
}
}
/*
--------------------------------------------- */
.kumo-box2 {
  position: absolute;
  top:0;
  left:0;
  width: 100%;
  aspect-ratio:2.8 / 1;
  transition:  transform 1.4s,  opacity .8s;
  transition-timing-function:cubic-bezier(.25, .46, .45, .94);
  opacity:0;
  z-index:2;
  will-change: transform,opacity;
}
/*
--------------------------------------------- */
.kumo02 {
  position: absolute;
  top:0;
  left:0;
  width: 100%;
  height: 100%;
  transform: translate(0%, 12%) scale(2.8);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100%;
  background-image: url(../images/top/kumo-02.svg);
}
@media screen and (min-width: 768px) {
.kumo02 {
  transform: translate(0%, -10%) scale(2.2);
}
}
@media screen and (min-width: 1100px) {
.kumo02 {
  transform: translate(0%, -35%) scale(2);
}
}
/*
--------------------------------------------- */
.kumo-box3 {
  position: absolute;
  bottom:0;
  left:0;
  width: 100%;
  aspect-ratio:2.8 / 1;
  transition:  transform 1.4s,  opacity .8s;
  transition-timing-function:cubic-bezier(.25, .46, .45, .94);
  opacity:0;
  z-index:1;
  will-change: transform,opacity;
}
/*
--------------------------------------------- */
.kumo03 {
  position: absolute;
  top:0;
  left:0;
  width: 100%;
  height: 100%;
  transform: translate(15%, 70%) scale(2.6);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100%;
  background-image: url(../images/top/kumo-03.svg);
}
@media screen and (min-width: 768px) {
.kumo03 {
  transform: translate(18%, 95%) scale(2);

}
}

/*
---------------------------------------------------------------*/
.sticky-box {
  position: relative;
  transform:translate3d(0, 0,0);
  z-index:2;
}

/*
---------------------------------------------------------------*/
.yukata-collection-text-box {
  position: relative;
  position: -webkit-sticky;
  position: sticky;
  top:0;
  left:0;
  width:100%;
  height:100vh;
  height: calc(var(--vh, 1vh) * 100);
  z-index:2;
}
/*
---------------------------------------------------------------*/
.yukata-collection-text{
  position: absolute;
  width: 100%; 
  max-width: 600px; 
  margin:0 auto;
  aspect-ratio:2 / 1;
  bottom:15vh;
  left:50%;
  transform:translate(-50%, 0%);
  z-index:2;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 90%;
  background-image: url(../images/yukata.svg);
  transition:  transform .4s cubic-bezier(0.215, 0.61,  0.355, 1 ),  opacity 3.8s;
  opacity:0;
}
.yukata-collection-text.show {
  opacity:1;
}

/*花火ボックス
--------------------------------*/
.concept-box.hanabi {
  position: -webkit-sticky;
  position: sticky;
  top:0;
  left:0;
  padding:0;
  overflow: hidden;
  z-index:1;
}

.hanabi-box-inner {
  position: relative;
  width: 100%;
  height: 80vh;
  height: calc(var(--vh, 1vh) * 100);
}

/*花火
-------------------------------------------------------------------------*/
#outer{
  position: absolute;
  top:50%;
  left:50%;
  width:200%;
  height:150%;
  transform: translate(-50%, -50%);
}
@media screen and (min-width: 768px) {
#outer{
  width:120%;
  height:100%;
}
}
#inner{
  overflow:visible;
}
#line {
  /* 線 */
  stroke-width:3px;
  /* 50%ずらして表示 */
  stroke-dashoffset:50%;
  /* 破線10%と空白40%を交互に表示 */
  stroke-dasharray:10% 40%;
  /* アニメーションhanabiを2.5sかけて終端をゆうっくり１度だけ実行する*/
  animation: hanabi 4.0s ease-out;
}
@keyframes hanabi {
  /* 60%時点で縦方向に動いていないことをセット */
  60% {
    transform:translateY(0%);
  }
  /* 90%時点で図形の不透明度が１であることをセット */
  90% {
    opacity:1;
  }
  /* アニメーションの終了時の情報をセット */
  to {
    /* 破線と空白が50%ずつ交互に */
    stroke-dasharray:50%;
    /* 図形を下方向に20%ずらして表示 */
    transform:translateY(20%);
    /* 図形を透明に */
    opacity:0;
  }
}

/*
--------------------------------*/
.yukata-image-wrap {
  position: relative;
  background-color:#fff;
  z-index:4;
}
/*★
--------------------------------*/
.margin-box {
  position: relative;
  width: 100%;
  height: calc(var(--vh, 1vh) * 100);
}
/*
--------------------------------*/
.image-box {
  position: relative;
  width: 100%;
  max-width: none;
  margin:0 auto;
  font-size:0;
  letter-spacing:-10rem;
  text-align:center;
  border:2px solid white;
  border-top:1px solid white;
  border-bottom:1px solid white;
}
/*
-------------------------------------------------------------------------*/
.image-box-inner{
  position: relative;
  display:inline-block;
  vertical-align: top;
  width: 100%;
  max-width: 720px;
  aspect-ratio: 1 / 1.3;
  padding:0;
  overflow: hidden;
  transition:  transform .0s cubic-bezier(0.215, 0.61,  0.355, 1 ),  opacity .8s;
  opacity:.5;
  transform: translate(0, 0px) scale(1);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  border:1px solid white;
}
.image-box-inner.yoko{
  aspect-ratio:1.3 / 1;
  display:block;
  max-width: 1000px;
  margin:0 auto;
}
.image-box-inner.yoko.right{
  margin:0 auto;
}
.image-box-inner.yoko.left{
  margin:0 auto;
}


@media screen and (min-width: 600px) {
.image-box-inner{
  width: 50%;
}
.image-box-inner.yoko{
  width: 100%;
  max-width: 1000px;
  margin:0 auto;
}
}


@media screen and (min-width: 1100px) {
.image-box-inner.yoko.right{
  margin:0 0 0 auto;
}
.image-box-inner.yoko.left{
  margin:0;
}
}


.image-box-inner.show {
  transform: translate(0, 0) scale(1);
  opacity:1;
}
/*
---------------------------------------------------------------*/
.image-box-inner.image-01{
  background-image: url(../images/image/01.jpg);
}
.image-box-inner.image-02{
  background-image: url(../images/image/02.jpg);
}
.image-box-inner.image-03{
  background-image: url(../images/image/03.jpg);
}
.image-box-inner.image-04{
  background-image: url(../images/image/04.jpg);
}
.image-box-inner.image-05{
  background-image: url(../images/image/05.jpg);
}
.image-box-inner.image-06{
  background-image: url(../images/image/06.jpg);
}
.image-box-inner.image-07{
  background-image: url(../images/image/07.jpg);
}
.image-box-inner.image-08{
  background-image: url(../images/image/08.jpg);
}
.image-box-inner.image-09{
  background-image: url(../images/image/09.jpg);
}
.image-box-inner.image-10{
  background-image: url(../images/image/10.jpg);
}
.image-box-inner.image-11{
  background-image: url(../images/image/11.jpg);
}
.image-box-inner.image-12{
  background-image: url(../images/image/12.jpg);
}
.image-box-inner.image-13{
  background-image: url(../images/image/13.jpg);
}
.image-box-inner.image-14{
  background-image: url(../images/image/14.jpg);
}
.image-box-inner.image-15{
  background-image: url(../images/image/15.jpg);
}
.image-box-inner.image-16{
  background-image: url(../images/image/16.jpg);
}
.image-box-inner.image-17{
  background-image: url(../images/image/17.jpg);
}
.image-box-inner.image-18{
  background-image: url(../images/image/18.jpg);
}
.image-box-inner.image-19{
  background-image: url(../images/image/19.jpg);
}
.image-box-inner.image-20{
  background-image: url(../images/image/20.jpg);
}
.image-box-inner.image-21{
  background-image: url(../images/image/21.jpg);
}

/*▼ ページに進む
---------------------------------------------------------------*/
.arrow-box {
  position: -webkit-sticky;
  position: sticky;
  width:100%;
  height:0;
  bottom:0px;
  left:0;
  z-index:10;
  transform: translate3d(0,0,0);
 font-size:0;
}
/*
---------------------------------------------------------------*/
.arrow-down,
.arrow-up {
  position: absolute;
  width:60px;
  aspect-ratio:1 / 1;
  bottom:15px;
  left:50%;
  transform: translate(-50%,0);
  border-radius:100%;
  cursor: pointer;
  overflow: hidden;
  background-repeat: no-repeat;
  background-size: 40%;
  background-position: center center;
}
.arrow-down {
  background-image: url(../images/icon/arow-down-black.svg);
  background-color: yellow;
  background-color: #fff;
}
.arrow-down.hide{
  display:none;
}
.arrow-up {
  left:auto;
  right:15px;
  background-color: #000;
  background-image: url(../images/icon/arow-up.svg);
  display:none;
}
.arrow-up.show {
  display:block;
}