@charset "utf-8";

/*---------------------------------------
common
---------------------------------------*/

html {
  width: 100%;
	overflow-x:hidden;

}

@media (max-width: 820px) {
  html {
  	font-size: calc(1 / 750 * 100vw);
  }
}

@media (min-width: 1201px) and (max-width: 1899px) {
  html {
    font-size: calc(1 / 1900 * 100vw);
  }
}

@media (min-width: 1900px) {
  html {
    font-size: 1px;
  }
}

body {
  width: 100%;
	background-color: #000;
  color: #fff;
  font-weight: 400;
  line-height: 1.6;
  font-feature-settings: "palt" 1;
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  letter-spacing: 0.02em;
}

.mincho{
  font-family: "Noto Serif JP", serif;
}

img{
	width:100%;
	-webkit-backface-visibility: hidden;
}

a{
	transition: 0.4s ;
	text-decoration:none;
}

a:hover{
  opacity: 0.6;
}


.pc{
	display:block !important;
}

.sp{
	display: none !important;
}

/* --------------------------------------------------
loader
 -------------------------------------------------- */
.loader {
  position: fixed;
  width: 100%;
  height: 100%;
  background: #000;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
	z-index:9999;
	transition: 1.0s ;
}



.is_loaded .loader {
  opacity: 0;
}


#container{
	width:800px;
	margin:0 auto;
	position:relative;
	overflow:hidden;
}


/*---------------------------------------
mainvisual
---------------------------------------*/
#mainvisual{
	width:100%;
	height:1170px;
	margin:0 auto;
	position:relative;
	overflow:hidden;
}

#catch{
	width:100%;
	margin:0 auto;
	position:relative;
	background-color:#e50a84;
	padding:20px 0;
}

#catch p{
	font-size:54px;
	text-align:center;
	font-weight:900;
	line-height:1.4;
	color:#fff;
	letter-spacing:2px;
}

#catch p span{
	font-size:66px;
	color:#fff100;
}

/*---------------------------------------
digital
---------------------------------------*/
#digital,
#sell{
	width:100%;
	position:relative;
	margin:0 auto;
}

.block_title{
	background: linear-gradient(90deg, #2a2a2a 0%, #000 50%, #2a2a2a 100%);
}


.block_title p{
	color: #fff100;
	text-align: center;
	font-size: 36px;
	font-style: normal;
	font-weight: 900;
	letter-spacing:2px;
	padding:10px 0;
}

.block_title span{
	font-size: 26px;
}

.soon img{
	opacity:0.3;
}

.ec{
	width:100%;
	position:relative;
	background-color:#fff;
	padding:30px 0;
}

/*---------------------------------------
sell
---------------------------------------*/
#sell{
	width:100%;
	position:relative;
	margin:0 auto;
}

#bnr{
	display:block;
	width:310px;
	position:relative;
	margin:60px auto 0;
}

#digital ul,
#sell ul{
	width:690px;
  justify-content: start;
  align-items: start;
	display: flex;
	flex-wrap: wrap;
	margin:0 auto;
	position:relative;
}

#digital ul li,
#sell ul li{
	width:217px;
	margin:0 19px 20px 0;
	box-sizing:border-box;
	position:relative;
}

#digital ul li a,
#sell ul li a{
	display:block;
	width:100%;
	position:relative;
	box-sizing:border-box;
	border:1px solid #ccc;
	font-size:0;
}

#digital ul li p,
#sell ul li p{
	width:217px;
	box-sizing:border-box;
	position:absolute;
	left:0;
	top:0;
}

#digital ul li:nth-child(3n),
#sell ul li:nth-child(3n){
	margin-right:0;
}

#copyright{
	font-size:10px;
	color:#605149;
	text-align:center;
	padding:30px 0 0;
}

.waku{
	border:1px solid #666666;
}

@media screen and (max-width: 799px) {
	.pc{
		display: none !important;
	}

	.sp{
		display:block !important;
	}

	#container{
		width:100%;
		border:0;
	}

	#mainvisual{
		height:1105rem;
	}

	#catch{
		width:100%;
		margin:0 auto;
		position:relative;
		background-color:#e50a84;
		padding:20rem 0;
	}

	#catch p{
		font-size:54rem;
		text-align:center;
		font-weight:900;
		line-height:1.4;
		color:#fff;
		letter-spacing:2rem;
	}

	#catch p span{
		font-size:66rem;
		color:#fff100;
	}

	.block_title p{
		font-size: 36rem;
		letter-spacing:2rem;
		padding:10rem 0;
	}

	#digital ul,
	#sell ul{
		width:650rem;
	  justify-content: start;
	  align-items: start;
		display: flex;
		flex-wrap: wrap;
		margin:0 auto 0;
		position:relative;
	}

	#digital ul li,
	#sell ul li{
		width:310rem;
		margin:0 30rem 30rem 0;
	}

	#digital ul li p,
	#sell ul li p{
		width:310rem;
	}

	#digital ul li:nth-child(3n),
	#sell ul li:nth-child(3n){
		margin-right:30rem;
	}

	#digital ul li:nth-child(2n),
	#sell ul li:nth-child(2n){
		margin-right:0;
	}

	#bnr{
		display:block;
		width:600rem;
		position:relative;
		margin:70rem auto 0;
	}

	#copyright{
		font-size:20rem;
		text-align:center;
		padding:30rem 0 50rem;
	}

}

/* --------------------------------------------------
animation
-------------------------------------------------- */

@keyframes fade {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

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

@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale(0.8);
    transform:scale(0.8);
  }
  to {
    opacity: 1;
    -webkit-transform: scale(1.0);
    transform:scale(1.0);
  }
}

@keyframes zoomOut {
  from {
    opacity: 0;
    -webkit-transform: scale(1.2);
    transform:scale(1.2);
  }
  to {
    opacity: 1;
    -webkit-transform: scale(1.0);
    transform:scale(1.0);
  }
}

@keyframes blur {
  0% {
    opacity: 0;
    -webkit-filter: blur(20px);
    -moz-filter: blur(20px);
    -o-filter: blur(20px);
    -ms-filter: blur(20px);
    filter: blur(20px);
  }
  100% {
    opacity: 1;
    -webkit-filter: blur(0);
    -moz-filter: blur(0);
    -o-filter: blur(0);
    -ms-filter: blur(0);
    filter: blur(0);
  }
}


#mainvisual p,
#catch p,
#digital .block_title,
#digital ul li,
#sell .block_title,
#sell ul li,
#sell #bnr{
	opacity:0;
}


.is_loaded #mainvisual p{
  animation: zoomOut 2.0s cubic-bezier(0.19, 1, 0.22, 1) 0.4s forwards;
}

#catch.is_loaded p{
  animation: zoomIn 2.0s cubic-bezier(0.19, 1, 0.22, 1) 0.4s forwards;
}


#digital.is_loaded .block_title{
  animation: fadeIn 2.0s cubic-bezier(0.19, 1, 0.22, 1) 0.4s forwards;
}

#digital.is_loaded ul li:nth-child(1),
#sell.is_loaded ul li:nth-child(1){
  animation: fadeInUp 2.2s cubic-bezier(0.19, 1, 0.22, 1) 1.0s forwards;
}

#digital.is_loaded ul li:nth-child(2),
#sell.is_loaded ul li:nth-child(2){
  animation: fadeInUp 2.2s cubic-bezier(0.19, 1, 0.22, 1) 1.1s forwards;
}

#digital.is_loaded ul li:nth-child(3),
#sell.is_loaded ul li:nth-child(3){
  animation: fadeInUp 2.2s cubic-bezier(0.19, 1, 0.22, 1) 1.2s forwards;
}

#digital.is_loaded ul li:nth-child(4),
#sell.is_loaded ul li:nth-child(4){
  animation: fadeInUp 2.2s cubic-bezier(0.19, 1, 0.22, 1) 1.3s forwards;
}

#digital.is_loaded ul li:nth-child(5),
#sell.is_loaded ul li:nth-child(5){
  animation: fadeInUp 2.2s cubic-bezier(0.19, 1, 0.22, 1) 1.4s forwards;
}

#digital.is_loaded ul li:nth-child(6),
#sell.is_loaded ul li:nth-child(6){
  animation: fadeInUp 2.2s cubic-bezier(0.19, 1, 0.22, 1) 1.5s forwards;
}

#digital.is_loaded ul li:nth-child(7),
#sell.is_loaded ul li:nth-child(7){
  animation: fadeInUp 2.2s cubic-bezier(0.19, 1, 0.22, 1) 1.6s forwards;
}

#digital.is_loaded ul li:nth-child(8),
#sell.is_loaded ul li:nth-child(8){
  animation: fadeInUp 2.2s cubic-bezier(0.19, 1, 0.22, 1) 1.7s forwards;
}

#digital.is_loaded ul li:nth-child(9),
#sell.is_loaded ul li:nth-child(9){
  animation: fadeInUp 2.2s cubic-bezier(0.19, 1, 0.22, 1) 1.8s forwards;
}

#sell.is_loaded .block_title{
  animation: fadeIn 2.0s cubic-bezier(0.19, 1, 0.22, 1) 0.4s forwards;
}

#sell.is_loaded #bnr{
  animation: fadeIn 1.6s cubic-bezier(0.19, 1, 0.22, 1) 2.8s forwards;
}