@charset "utf-8";
html { margin:0; padding:0; overflow-x: hidden; }
body {
	background: #000;
	font-family: "Noto Sans JP";
	*font-size:small;
	*font:x-small;
	color:#fff;
	font-size:14px;
	font-style:normal;
	font-weight:500;
	text-align:left;
	text-indent:0pt;
	letter-spacing:0px;
	line-height:1.8;
	margin:0;
	padding:0px;
	-webkit-text-size-adjust: 100%;
	overflow-x: hidden;
}
.wrapper{
	position:fixed;
	width:100vw; height:100vh;
	background-image: url(../images/main_bg.jpg);
	background-size:cover;
	background-position: center bottom;
	background-repeat:no-repeat;
}
.bg_red{
	background-color:#000;
	width:100vw; height:100vh;
	animation: Infade 1.5s ease-in 7.6s forwards;
	z-index: 1;
	position: absolute;
}
.sns_btn{
	margin:0 auto;
	width:135px;
	position:absolute;
	bottom:5%; left:0; right:0;
	z-index:2; opacity:0;
	animation: Infadein 1.5s ease-in 7.6s forwards;
}
.sns_btn2{
	margin:0 auto;
	width:135px;
}
.c_right{
	font-size:80%;
	letter-spacing:1px;
	color:#ccc;
	text-align:center;
	margin-top:20px;
	position:absolute;
	bottom:1%; left:0; right:0;
	z-index:2; opacity:0;
	animation: Infadein 1.5s ease-in 7.6s forwards;
}
#animation_container {
	position:absolute;
	margin:auto;
	left:0;right:0;
	top:0;bottom:0; z-index:2;
}
@-webkit-keyframes Infade {
  0% { opacity:1; }
  100% { opacity:0; }
}
@keyframes Infade {
  0% { opacity:1; }
  100% { opacity:0; }
}
@-webkit-keyframes Infadein {
  0% { opacity:0; }
  100% { opacity:1; }
}
@keyframes Infadein {
  0% { opacity:0; }
  100% { opacity:1; }
}
.in_container{
	margin:0 auto;
	padding:15px;
	max-width:980px;
	position:relative;
}
.main_catch{ font-size:250%; line-height:1.5; letter-spacing:8px; }

.typo200{ font-size:200%; line-height:1.5; }
.typo150{ font-size:150%; line-height:1.5; }
.typo80{ font-size:80%; }

.margbot0 {margin-bottom:0 !important;}
.margbot5 {margin-bottom:5px !important;}
.margbot10 {margin-bottom:10px !important;}
.margbot20 {margin-bottom:20px !important;}
.margbot25 {margin-bottom:25px !important;}
.margbot30 {margin-bottom:30px !important;}
.margbot30tab {margin-bottom:30px !important;}
.margbot40 {margin-bottom:40px !important;}
.margbot50 {margin-bottom:50px !important;}
.margbot60 {margin-bottom:60px !important;}
.margbot70 {margin-bottom:70px !important;}
.margbot80 {margin-bottom:80px !important;}
.margbot100 {margin-bottom:100px !important;}

.margtop20 {margin-top:20px !important;}
.margtop30 {margin-top:30px !important;}
.margtop50 {margin-top:50px !important;}
.margtop80 {margin-top:80px !important;}
.margtop100 {margin-top:100px !important;}
.margtop120 {margin-top:120px !important;}
.margtop150 {margin-top:150px !important;}
.margtop200 {margin-top:200px !important;}

.margtop-20 {margin-top:-20px !important;}
.margtop-30 {margin-top:-30px !important;}
.margtop-50 {margin-top:-50px !important;}
.margbot-20 {margin-bottom:-20px !important;}
.margbot-30 {margin-bottom:-30px !important;}
.margbot-50 {margin-bottom:-50px !important;}

.marg20_lr {margin-left:20px !important; margin-right:20px !important;}
.marg30_lr {margin-left:30px !important; margin-right:30px !important;}

.pad0 {padding:0 !important;}
.pad10 {padding:10px !important;}
.pad20 {padding:20px !important;}
.pad20sp {padding:20px !important;}
.pad40sp {padding:40px !important;}
.pad80sp {padding:80px !important;}
.pad20_lr {padding-left:20px !important; padding-right:20px !important;}
.pad30_lr {padding-left:30px !important; padding-right:30px !important;}
.pad45_lr{ padding-left: 60px; padding-right: 60px;}
.padbot0 {padding-bottom:0 !important;}
.padbot10 {padding-bottom:10px !important;}
.padbot20 {padding-bottom:20px !important;}
.padbot30 {padding-bottom:30px !important;}
.padbot40 {padding-bottom:40px !important;}
.padbot50 {padding-bottom:50px !important;}
.padbot60 {padding-bottom:60px !important;}
.padbot70 {padding-bottom:70px !important;}
.padbot80 {padding-bottom:80px !important;}
.padbot100 {padding-bottom:100px !important;}

.padtop10 {padding-top:10px !important;}
.padtop20 {padding-top:20px !important;}
.padtop30 {padding-top:30px !important;}
.padtop40 {padding-top:40px !important;}
.padtop50 {padding-top:50px !important;}
.padtop80 {padding-top:80px !important;}
.padtop80sp {padding-top:80px !important;}

/* __________ SNSボタン __________ */

a.fb-icon{
	float:left;
	padding:10px;
	margin:0 5px 5px 0;
	color:#fff;
	text-align:center;
	display:block;
	text-decoration:none;
	transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;
}
a.x-icon{
	float:left;
	padding:10px;
	margin:0 5px 5px 0;
	color:#fff;
	text-align:center;
	display:block;
	text-decoration:none;
	transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;
}
a.instagram-icon{
	float:left;
	margin:0 5px 5px 0;
	padding:10px;
	color:#fff;
	text-align:center;
	display:block;
	text-decoration:none;
	transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;
}
a.fb-icon:hover , a.x-icon:hover , a.instagram-icon:hover{ opacity:0.7; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; }

@media (max-width: 540px) {
	.wrapper{
		background-image: url(../images/main_bg_sp.jpg);
		background-size:cover;
		background-position: center bottom;
	}
	.main_catch{ font-size:5vw; line-height:1.5; letter-spacing:8px; }
	.margbot30tab {margin-bottom:10px !important;}
	.pad20sp {padding:10px !important;}
	.typo120sp{ font-size:110% !important;}
	.typo150sp{ font-size:130% !important;}
	.typo200sp{ font-size:160% !important;}
	.pad40sp {padding:25px 10px !important;}
	.pad80sp {padding:40px 10px !important;}
	.padtop80sp {padding-top:30px !important;}

	#animation_container { top:-15%; }
	.sns_btn{ bottom:20%; }
	.c_right{ bottom:18%; }

}
.center{ text-align:center !important;}
.left{ text-align:left !important;}
.right{ text-align:right !important;}
.l_r{ text-align:left;}

.gradation01 {
  background-color: rgba(0,0,0,0.7) !important;
  mix-blend-mode: luminosity !important;
}
#animation_container { mix-blend-mode:screen !important; }

.gradation01 {
  position: fixed;
  overflow: hidden;
  width: 100%;
  height: 100vh;
  background-color: #000;
  z-index:0;
}
.item {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50%;
  height: 50%;

  /* 回転アニメーション */
  transform-origin: 0 0;
  animation-name: rotate-item;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.item-01 {
  animation-duration: 15s;
}
.item-02 {
  left: 45%;
  animation-duration: 50s;
  animation-direction: reverse;
}
.item-03 {
  left: 40%;
  animation-duration: 8s;
}
.item-04 {
  animation-duration: 10s;
}
.round {
  position: relative;
  border-radius: 50%;
}
.round-01 {
  top: 0%;
  width: 18vw;
  height: 18vw;
  border: 1px solid #888;
  filter: blur(0px);
  animation: flash 5s linear infinite;
}
.round-02 {
  top: -20%;
  width: 30vw;
  height: 30vw;
  border: 1px solid #888;
  filter: blur(0px);
  animation: flash 8s linear infinite;
}
.round-03{
  top: 60%;
  width: 3vw;
  height: 3vw;
  background-color: #777;
  filter: blur(20px);
  animation: flash 3s linear infinite;
}
.round-04{
  top: -70%;
  left: -60%;
  width: 40vw;
  height: 40vw;
  border: 1px solid #333;
  filter: blur(0px);
  animation: flash 10s linear infinite;
}

/* 回転アニメーション */
@keyframes rotate-item {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
/* 点滅アニメーション */
@keyframes flash {
	0%,
	100% {
		opacity: 0.8;
	}
	50% {
		opacity: 0.5;
	}
}