html {
  -webkit-overflow-scrolling: touch;
}
body {
  margin: auto;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', メイリオ, Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
}
body::before {
  background: url(../images/secret.jpg) no-repeat left top;
  background-size: 100% auto;
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
  z-index: -1;
}

.top-box {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  position: relative;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.main-box {
  display: block;
  justify-content: center;
  align-items: center;
  height: 100vh;
  position: relative;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.snap-scroll-container/*親要素 */ {
  scroll-snap-type: y mandatory;/* scroll-snap */
  width:100%;/* 任意 */
  height:100vh;/* 任意 */
  overflow:scroll;/* 必要です */
}

section/*子要素 */ {
  scroll-snap-align: start;/* scroll-snap */
  height:100%;/* 任意 */
  width:100%;/* 任意 */
}

.section-container {
  display: block;
  height: 100%;
  position: relative;
  overflow: auto;
  scroll-snap-align: start;
  -webkit-overflow-scrolling: touch;
}

.container {
  text-align: center;
  vertical-align: middle;
}

.text-container {
text-align: center;
vertical-align: middle;
}

.parent {
  /*親要素*/
  position: relative;
  height: 100%;
}

.parent p {
  font-weight: bold;
  padding: 0px 20px 0px 20px;
  position: absolute;
  top: 40%;
  -webkit-transform : translateY(-50%);
  transform : translateY(-50%);
}

.heading {
  font-family: NaishoMoji-Regular;
  color: #0d0506;
  font-size: 3vw;
  line-height: 9vw;
  position: absolute;
  width: 100%;
  z-index: 1000;
}

h1 {
  font-size: 30px;
  font-weight: 400;
  margin: 0;
  padding-top: 10px;
  padding-left: 10px;
  z-index: 1000;
}
p {
  font-size: 20px;
  margin-top: 26px;
}

.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0px;
}

.neon {
  font-family: NaishoMoji-Regular;
  color: #FB4264;
  font-size: 9vw;
  line-height: 9vw;
  text-shadow: 0 0 3vw #F40A35;
}

.flux {
  font-family: NaishoMoji-Regular;
  color: #426DFB;
  font-size: 9vw;
  line-height: 9vw;
  text-shadow: 0 0 3vw #2356FF;
}

.neon {
  animation: neon 1s ease infinite;
  -moz-animation: neon 1s ease infinite;
  -webkit-animation: neon 1s ease infinite;
}

@keyframes neon {
  0%,
  100% {
    text-shadow: 0 0 1vw #FA1C16, 0 0 3vw #FA1C16, 0 0 10vw #FA1C16, 0 0 10vw #FA1C16, 0 0 .4vw #FED128, .5vw .5vw .1vw #806914;
    color: #FED128;
  }
  50% {
    text-shadow: 0 0 .5vw #800E0B, 0 0 1.5vw #800E0B, 0 0 5vw #800E0B, 0 0 5vw #800E0B, 0 0 .2vw #800E0B, .5vw .5vw .1vw #40340A;
    color: #806914;
  }
}

.flux {
  animation: flux 2s linear infinite;
  -moz-animation: flux 2s linear infinite;
  -webkit-animation: flux 2s linear infinite;
  -o-animation: flux 2s linear infinite;
}

@keyframes flux {
  0%,
  100% {
    text-shadow: 0 0 1vw #1041FF, 0 0 3vw #1041FF, 0 0 10vw #1041FF, 0 0 10vw #1041FF, 0 0 .4vw #8BFDFE, .5vw .5vw .1vw #147280;
    color: #28D7FE;
  }
  50% {
    text-shadow: 0 0 .5vw #082180, 0 0 1.5vw #082180, 0 0 5vw #082180, 0 0 5vw #082180, 0 0 .2vw #082180, .5vw .5vw .1vw #0A3940;
    color: #146C80;
  }
}

.holder,
.first,
.second,
.third {
  height: 100vh;
  width: 100vw;
}
.first,
.second,
.third {
  position: absolute;
}
.second,
.third {
  opacity: 0;
}
.holder {
  height: 100vh;
  position: relative;
  z-index: 1;
}
.first {
  animation: first 10s infinite;
  background: linear-gradient(#5ff8ca, #60e08c);
  z-index: 10;
}
  @keyframes first {
    0% {opacity: 0.8;}
    10% {opacity: 0.7;}
    20% {opacity: 0.6;}
    30% {opacity: 0.4;}
    40% {opacity: 0.2;}
    50% {opacity: 0.1;}
    60% {opacity: 0.2;}
    70% {opacity: 0.4;}
    80% {opacity: 0.6;}
    90% {opacity: 0.7;}
    100% {opacity: 0.8;}
  }

.second {
  animation: second 10s infinite; animation-delay: 2s;
  background: linear-gradient(#19eaa6, #00a1f0);
  z-index: 20;
}
  @keyframes second {
    0% {opacity: 0;}
    10% {opacity: 0.2;}
    20% {opacity: 0.4;}
    30% {opacity: 0.6;}
    40% {opacity: 0.7;}
    50% {opacity: 0.8;}
    60% {opacity: 0.7;}
    70% {opacity: 0.6;}
    80% {opacity: 0.4;}
    90% {opacity: 0.2;}
    100% {opacity: 0;}
  }

.third {
  animation: third 10s infinite;
  animation-delay: 8s;
  background: linear-gradient(#aab7f8, #ff75c6);
  z-index: 30;
}
  @keyframes third {
    0% {opacity: 0;}
    10% {opacity: 0.2;}
    20% {opacity: 0.4;}
    30% {opacity: 0.6;}
    40% {opacity: 0.7;}
    50% {opacity: 0.8;}
    60% {opacity: 0.7;}
    70% {opacity: 0.6;}
    80% {opacity: 0.4;}
    90% {opacity: 0.2;}
    100% {opacity: 0;}
  }

.right-bottom {
  padding-right: 10px;
  padding-bottom: 10px;
  position: absolute;
  right: 5px;
  bottom: 20px;
  margin: 0;
  z-index: 1000;
}

.contact {
  font-weight: bold;
  padding: 0px 20px 0px 20px;
  position: absolute;
  top: 80%;
  right: 1%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.tw-icon{
  padding-right: 15px;
}
a {
  color: black;
}