@charset "utf-8";
/* CSS Document */

.image-container {
    opacity: 0;
    transition: opacity 2s ease;
}

.image-container.loaded {
    opacity: 1;
}


/*----------------------------
scroll_up ｜下から上へ出現
----------------------------*/
.scroll_up {
  transition: 0.8s ease-in-out;
  transform: translateY(30px);
  opacity: 0;
}
.scroll_up.on {
  transform: translateY(0);
  opacity: 1.0;
}

/*----------------------------
scroll_left ｜左から出現
----------------------------*/
.scroll_left {
    -webkit-transition: 0.8s ease-in-out;
    -moz-transition: 0.8s ease-in-out;
    -o-transition: 0.8s ease-in-out;
    transition: 0.8s ease-in-out;
    transform: translateX(-30px);
    opacity: 0;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
}
.scroll_left.on {
    opacity: 1.0;
    filter: alpha(opacity=100);
    -moz-opacity: 1.0;
    transform: translateX(0);
}

/*----------------------------
scroll_right ｜右から出現
----------------------------*/
.scroll_right {
    -webkit-transition: 0.8s ease-in-out;
    -moz-transition: 0.8s ease-in-out;
    -o-transition: 0.8s ease-in-out;
    transition: 0.8s ease-in-out;
    transform: translateX(30px);
    opacity: 0;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
}
.scroll_right.on {
    opacity: 1.0;
    filter: alpha(opacity=100);
    -moz-opacity: 1.0;
    transform: translateX(0);
}


.timing02 {transition-delay: .2s;}
.timing03 {transition-delay: .4s;}
.timing04 {transition-delay: .6s;}
.timing05 {transition-delay: .8s;}




/*TOP画像を画面いっぱい*/
.scroll-area {
  width: 100%;
  height: 100vh;
  overflow: auto;
  -webkit-scroll-behavior: smooth;
  scroll-behavior: smooth;
  -webkit-scroll-snap-type: mandatory;
  scroll-snap-type: mandatory;
  -webkit-scroll-snap-points-y: repeat(100%);
  scroll-snap-points-y: repeat(100%);
}
.box {
  width: 100%;
  height: 100vh;
  color: #fff;
  font-size: 100px;
  display: flex;
  align-items: center; /* 縦方向中央揃え */
  justify-content: center; /* 横方向中央揃え */
  flex-direction: column;
}
.box__bg_black {
  background-color: #333;
}
.box__bg_gray {
  background-color: #ccc;
}
.box__bg_photo {
  background-image: url("../image/top.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/*テーブルタグ改行指示*/
.sp_br {
  display: none; 
}
@media screen and (max-width: 700px) {
  .sp_br {
    display: block; 
  }
}