@charset "utf-8";

@font-face {
font-family: "YuGothic-M";
font-weight: normal;
 src: local("YuGothic-Medium"),
	  local("Yu Gothic Medium"),
	  local("YuGothic-Regular");
}

@font-face {
font-family: "YuGothic-M";
font-weight: bold;
 src: local("YoGothic-Bold"),
	  local("Yu Gothic");
}

html {
font-size: 62.5%;/* 16px x 0.625 = 10px(=1rem) */
}

body {
font-size: 1.6rem;/* 16px */
font-family: -apple-system, blinkMacSystemFont, YuGothic-M, YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
-webkit-text-size-adjust: 100%;
font-feature-settings: "palt";
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
::i-block-chrome, body {
	font-feature-settings: "pkna";
}
}

#splash {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 999;
  background:#ad69ff;
  text-align:center;
  color:#fff;
}

#splash_logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#splash_logo img {
  width:260px;
}

.fadeUp{
animation-name: fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity: 0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}

#container{
    width:100%;
    height: 100vh;
    background: #ffffff;

}

a{
    color: #333;
}

a:hover{
     text-decoration: none;   
}

.splashbg{
    display: none;
}

body.appear .splashbg{
	display:block;
	animation-name:PageAnime;
	animation-duration:1.2s;
	animation-timing-function:ease-in-out;
	animation-fill-mode:forwards;
    content: "";
    position:fixed;
	z-index: 999;
    width: 50%;
    height: 100vh;
    top: 0;
	left: 0;
    transform: translateX(-300%) skewX(-45deg);
    background-color: #333;
}

@keyframes PageAnime{
	0% {
		transform-origin:left;
		transform:translateX(-300%) skewX(-45deg);
	}
	100% {
		transform-origin:left;
		transform:translateX(500%) skewX(-45deg);
	}
}

#container{
	opacity: 0;
}

body.appear #container{
	animation-name:PageAnimeAppear;
	animation-duration:1s;
	animation-delay: 0.6s;
	animation-fill-mode:forwards;
	opacity: 0;
}

@keyframes PageAnimeAppear{
	0% {
	opacity: 0;
	}
	100% {
	opacity: 1;
}
}