@charset "utf-8";
/*
Theme Name:deseart.jp
Author:deseart.jp
Description:deseart.jp
Version:1.0
*/
*{
	color: #333333;
	font-weight: 400;
	line-height: 1em;
	letter-spacing: 0.04em;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: source-han-sans-japanese, sans-serif;
  border-collapse: collapse;
}
body{
	background-color: #ffffff;
	width: 100%;
	height: auto;
}
ul, li{
	list-style-type: none;
	padding: 0;
	margin: 0;
}
a{
	text-decoration: none;
  cursor: pointer;
}
.clearfix::after {
   content: "";
   display: block;
   clear: both;
}





/* front-loading.css */
#splash {
/*fixedで全面に固定*/
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background:#141414;
  text-align:center;
  color:#fff;
}
#splash_logo{
  	position: absolute;
  	top: 50%;
  	left: 50%;
  	transform: translate(-50%, -50%);
}
#splash_logo p{
	color: #ffffff;
	display: inline-block;
	width: 240px;
	height: auto;
	font-size: 14px;
	font-weight: 400;
	line-height: 2em;
	letter-spacing: 0.08em;
}

/* fadeUpをするアイコンの動き */
.fadeUp{
animation-name: fadeUpAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity: 0;
}

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

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

.loading {
  width: 100vw;
  height: 100vh;
  transition: all 1.6s;
  background-color: #FFF;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  opacity: 1;
  visibility: visible;
}
.loading.is-active {
  opacity: 0;
  visibility: hidden;
}
.loading-animation{
  width: 100vw;
  height: 100vh;
  transition: all 1s;
  background-color: #141414;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
}
.loading-animation.is-active {
  opacity: 1;
  visibility: visible;
}
.loading-animation img{
	width: 240px;
	height: auto;
}


/* ふわっとアニメーション */
/*==================================================
スタート時は要素自体を透過0にするためのopacity:0;を指定する
===================================*/

.box{
  opacity: 0;
}

/*==================================================
動かしたい動き（今回は” ふわっ” を採用）
===================================*/

.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);
  }
}