/*
Theme Name: stune
Theme URI: 
Description: Original Theme by YoshiJosefToomcuh
Version: 1.1
Author: YoshiJosefToomcuh
Author URI: https://yoshijoseftoomuch.com
*/

header {
  margin: 0 auto;
  width: 100%;
  position: fixed;
  z-index: 9000;
  top: 0px;
  background-color: rgba(0, 0, 0, 0.6); 
  text-align: center;
  height: 100px;
}

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  font-size: 12px;
  color: #333333;
  /* text-align: justify; */
  letter-spacing: 0.1em;
  line-height: 2.5em;
}

footer {
  margin: 0 auto;
  padding: 10%;
  letter-spacing: 0.1em;
  width: 100%;
}

.subtitle {
  color: #D3D3D3;
}

.wrapper {
  margin: 0 auto;
  width: 100%;
}

.main {
  padding: 10%;
  line-height: 2em;
}

.contents {
  margin: 0 auto;
  display: block;
  padding: 100px 0;
}

a {
  text-decoration: none;
}

.small {
@media screen and (max-width: 480px) 
font-size: 6px
  }
}

h1 {
  font-size: 30px;
  border-bottom: solid 1px #ffffff;
  position: relative;
  max-width: 300px;
  line-height: 1.5em;
}

img {
  width: 100%;
}

.logo img {
  margin: 0 auto;
  max-width: 70px;
  width: 100%;
  z-index: 9999;

}

/* main visual */
.main-visual {
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100vh;
   position: relative
   background: url('https://gs-sports.jellybean.jp/s-tune/wp-content/themes/stune/images/_65T4272.jpg') top center / cover no-repeat !important;
}

/* wrap */

.hero {
  position: relative;
}

/* video */

.video-box {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100vh;
}
.video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

/* overlay */

.overlay::after {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  content: "";
  background: rgba(0, 0, 0, 0.4);
}

/* text */

.text-box {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

h2 {
   margin: 0;
   text-align:center;
   font-size: 30px;
   font-weight: bold;
   color: #fff;
}

.small {
  font-size: 8px;
  font-style: normal;
}

.kasaneru{
  position: relative;/*親要素にrelative*/
}
.kasaneru h1{
  position: absolute;/*重ねたい子要素にabsolute*/
  top:50%;
  left: 50%;
 -ms-transform: translate(-50%,-50%);/*ベンダープレフィックス*/
  -webkit-transform: translate(-50%,-50%);/*ベンダープレフィックス*/
  transform: translate(-50%,-50%);/*センター寄せの修正*/
  color: #ffffff;
  margin: 0!important;/*文字がずれている場合や*/
  padding: 0!important;/*文字が折り返される場合*/
}


/*フェードイン*/
/* 下からフェードイン */
.slide-bottom {
   opacity: 0;
   transform: translate(0, 20px);
   transition: all 1.5s ease-out;
 }

 /* 画面外にいる状態 */
.fadein {
  opacity : 0.1;
  transform : translate(0, 50px);
  transition : all 500ms;
  }

/* 画面内に入った状態 */
.fadein.scrollin {
  opacity : 1;
  transform : translate(0, 0);
  }

/*2つ目の要素に200msのdelayをかける*/
#effect2 > div .fadein:nth-of-type(2) {
  -moz-transition-delay:200ms;
  -webkit-transition-delay:200ms;
  -o-transition-delay:200ms;
  -ms-transition-delay:200ms;
  }
/*3つ目の要素に400msのdelayをかける*/
#effect2 > div .fadein:nth-of-type(3) {
  -moz-transition-delay:400ms;
  -webkit-transition-delay:400ms;
  -o-transition-delay:400ms;
  -ms-transition-delay:400ms;
  }

/* ---------- vertical3 ---------- */
*, *:before, *:after {
  box-sizing: border-box;
}
.c3 {
  width: 100%;
  display: flex;
  display: -ms-flexbox; /* IE10 */
  flex-wrap: wrap;
  -ms-flex-wrap: wrap; /* IE10 */
}

.c3 > div{
  width: -webkit-calc(100% /3);
  padding: 1.5%;
}
@media screen and (max-width: 960px) {
  .c3 > div{
    width: 50%;
  }
}
@media screen and (max-width: 480px) {
  .c3 > div{
    width: 100%;
    padding: -1%;
  }
}

/* --- page link regulation --- */
.anchor {
  padding-top: 100px;
  margin-top: 100px;




.slideConts{
    opacity: 0;
}
.slide{
  animation: slideAnime 2s ease forwards;
}
@keyframes slideAnime {
  from {
  opacity: 0;
  }

  to {
  opacity: 1;
  }
}
.txt1 {animation-delay: 0.2s;}
.txt2 {animation-delay: 0.8s;}
.txt3 {animation-delay: 1.4s;}
.txt4 {animation-delay: 2.0s;}
.txt5 {animation-delay: 2.6s;}