@charset "utf-8";

body {
  animation: disableScroll .1s linear 13s both;
}

@keyframes
disableScroll {
  0%{
    overflow: hidden;
  }
  100%{
    overflow: auto;
  }
}

@keyframes
bgAnime {
  0%{
    opacity: 1;
  }
  99%{
    opacity: 0;
  }
  100%{
    opacity: 0;
    display: none;
  }
}



@font-face {
  font-family: 'Courier-New';
  src: url( './font/Courier-New.woff') format('woff'); /* medium */
  font-weight: normal;
  font-style: normal;
 }

@font-face {
  font-family: 'DIN-Alternate-Bold';
  src: url( './font/DIN-Alternate-Bold.woff') format('woff'); /* medium */
  font-weight: normal;
  font-style: normal;
 }

@font-face {
  font-family: 'irohamaru-Medium';
  src: url( './font/irohamaru-Medium.woff') format('woff'); /* medium */
  font-weight: normal;
  font-style: normal;
 }

 @font-face {
  font-family: 'irohamaru-Regular';
  src: url( './font/irohamaru-Regular.woff') format('woff'); /* medium */
  font-weight: normal;
  font-style: normal;
 }

 @font-face {
  font-family: 'irohamaru-Light';
  src: url( './font/irohamaru-Light.woff') format('woff'); /* medium */
  font-weight: normal;
  font-style: normal;
 }

p {
  font-family: 'irohamaru-Regular';
}

span .bgappear {
  font-family: 'DIN-Alternate-Bold';
}

nav {
  font-family: 'DIN-Alternate-Bold';
}


/*==================================================
シャッ
===================================*/

/*背景色が伸びて出現 共通*/
.bgextend {
  animation-name: bgextendAnimeBase;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  position: relative;
  overflow: hidden;
  /*　はみ出た色要素を隠す　*/
  opacity: 0;

}

@keyframes bgextendAnimeBase {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/*中の要素*/
.bgappear {
  animation-name: bgextendAnimeSecond;
  animation-duration: 1s;
  animation-delay: 0.6s;
  animation-fill-mode: forwards;
  opacity: 0;
  position: relative;
}

@keyframes bgextendAnimeSecond {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/*--------- 左から --------*/
.bgLRextend::before {

  animation-name: bgLRextendAnime;
  animation-duration: 0.7s;
  animation-fill-mode: forwards;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #FE1076;
  /*伸びる背景色の設定*/
}

@keyframes bgLRextendAnime {
  0% {
   
    transform-origin: left;
    transform: scaleX(0);
  }

  50% {
  
    transform-origin: left;
    transform: scaleX(1);
  }

  50.001% {
    
    transform-origin: right;
  }

  100% {
    
    transform-origin: right;
    transform: scaleX(0);
  }
}

/*========= びょーんのレイアウトのためのCSS ===============*/


.wrapper {
  overflow: hidden;
}

.flex {
  display: flex;
  flex-wrap: wrap;
}

.box {
  width: 220px;
  padding: 20px;
  margin: 0 20px 20px 20px;
  background: #666;
  color: #fff;
  box-sizing: border-box;
}

.bgextend {
  width: 220px;
  padding: 20px;
  margin: 0 20px 20px 20px;
  box-sizing: border-box;
}


/* スクロールをしたら出現する要素にはじめに透過0を指定　*/

.bgappearTrigger,
.bgLRextendTrigger {
  opacity: 0;
}





/*========= LoadingのためのCSS ===============*/

/* Loading背景画面設定　*/
#splash {
  /*fixedで全面に固定*/
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background:#ebbde2;
  text-align: center;
  color: #fff;
}

/* Loading画像中央配置　*/
#splash_logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#splash_txt {
  font-family: 'irohamaru-Regular';
  padding-top: 20vh;
  margin: 0 auto;
  font-size: 2rem;
  color: #fff;
  display: none;
  }
.brsp {
  display: none;
}

/* Loading アイコンの大きさ設定　*/
#splash_logo img {
  width: 260px;
}

/* fadeInをするアイコンの動き */
.fadeIn {
  animation-name: fadeInAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0;
  -webkit-appearance: none;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

@keyframes fadeInAnime {
  0% {
    
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/* fadeUPをするテキストの動き */


.splash_txt_first {
  opacity: 0;
  animation-name: fadeUpAnime;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  animation-delay: 1.5s;
}
@keyframes fadeUpAnime {
  0% { 
    opacity: 0;
    transform: translateY(50px);
  }
  50% {
    opacity: 0.8
  }
   100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.splash_txt_second {
  opacity: 0;
  animation-name: fadeUpAnime;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  animation-delay: 2.5s;
}
@keyframes fadeUpAnime {
  0% { 
    opacity: 0;
    transform: translateY(50px);
  }
  50% {
    opacity: 0.8
  }
   100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.splash_txt_third {
  opacity: 0;
  animation-name: fadeUpAnime;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  animation-delay: 3.5s;
}
@keyframes fadeUpAnime {
  0% { 
    opacity: 0;
    transform: translateY(50px);
  }
   100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.splash_txt_fourth {
  opacity: 0;
  animation-name: fadeUpAnime;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  animation-delay: 4.5s;
}
@keyframes fadeUpAnime {
  0% { 
    opacity: 0;
    transform: translateY(50px);
  }
   100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.splash_txt_fifth {
  opacity: 0;
  animation-name: fadeUpAnime;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  animation-delay: 5.5s;
}
@keyframes fadeUpAnime {
  0% { 
    opacity: 0;
    transform: translateY(50px);
  }
   100% {
    opacity: 1;
    transform: translateY(0);
  }
}





/*========= ローディング画面のレイアウトのためのCSS ===============*/

#container {
  width: 100vw;
  height: 100vh;
  background: #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

a {
  color: #333;
}

a:hover {
  text-decoration: none;
}

@media screen and (max-width: 768px){
  #splash_txt {
    padding-top: 10vh;
  }
  .brsp {
    display: block;
  }
}
@media screen and (max-width: 640px){
	
#splash_txt {
  font-size: 20px;
  padding-top: 20vh;
}
}

@media screen and (max-width: 428px) {
  #splash_txt {
    padding-top: 13vh;
  }
}
@media screen and (max-width: 414px) {
  #splash_txt {
    padding-top: 10vh;
  }
}

@media screen and (max-width: 375px) {
  #splash_txt {
    padding-top: 9vh;
  }
}