/* フェードイン */
div#root .fade-in {
  opacity : 0;
  transition : opacity 3s;
}
div#root .fade-in.is-visible {
  opacity : 1;
}


.gjs-dashed .hero-bg {
  display : grid;
  grid-template-columns : 1fr 1fr 1fr;
}
.gjs-dashed .hero-bg img:first-child {
	grid-column: 1 / 4;
}

  div#root .hero-bg {
    position : relative;
    aspect-ratio: 4 / 5;
    margin-bottom: -48px;
    width: calc(100% - 1rem);
    margin-inline: auto;
  }
  div#root .hero-bg img {
    position : absolute;
    aspect-ratio: 4 / 5;
    object-fit : cover;
    height : auto;
    border-radius: 32px;
  	overflow: hidden;
    opacity : 0;
    transition : 3s opacity;
  }
    div#root .hero-bg img.is-current {
    	opacity : 1;
  }


@media(min-width : 768px){
.gjs-dashed .hero-bg img {
  aspect-ratio : 3/2;
  object-fit : cover;
  height : auto !important;
  margin-bottom : 32px;
}
.gjs-dashed .hero-bg {
  display : grid;
  grid-template-columns : 1fr 1fr 1fr;
}
  div#root .hero-bg {
    position : relative;
    aspect-ratio: 16 / 9;
    margin-bottom: -48px;
    width : 100%;
  }
  div#root .hero-bg img {
    position : absolute;
    aspect-ratio: 16 / 9;
    object-fit : cover;
    height : auto;
    opacity : 0;
    transition : 3s opacity;
  }
    div#root .hero-bg img.is-current {
    	opacity : 1;
  }
}

div#root .hero-bg.fade-in {
  opacity : 0;
  transition : 2s;
}
div#root .hero-bg.fade-in.is-visible {
  opacity : 1;
}

div#root .hero-title.fade-in {
  opacity : 0;
  transform :translateY(10px);
  transition :3s;
  transition-delay: 1s;
}
div#root .hero-title.fade-in.is-visible {
  opacity : 1;
  transform :translateY(0);
}

.steam1 img,
.steam2 img {
  filter: drop-shadow(2px 4px 4px rgba(0, 0, 0, 0.4));
}

div#root .steam1.fade-in {
  opacity : 0;
  margin-top : -10px;
  transition : 3s;
}
div#root .steam2.fade-in {
  opacity : 0;
  margin-top : -10px;
  transition : 4s;
}

div#root .steam1.fade-in.is-visible {
  animation: rotate 1s both infinite;
  opacity : 1;
  margin-top : 0;
}
div#root .steam2.fade-in.is-visible {
  animation: rotate 2s both infinite;
  opacity : 1;
  margin-top : 0;
}


/* アニメーション */

@keyframes swing {
  from { transform: translateX(0); }
  50% { transform: translateX(10px); }
  100% { transform: translateX(0px); }
}
@keyframes rotate {
  from { transform: rotate(0); }
  50% { transform: rotate(1deg); }
  100% { transform: translateX(0); }
}