@charset "UTF-8";
body {
	margin: 0;
	padding: 0;
	width: 100%;
	min-height: 100vh;
	background-color: #444444;
	z-index: -3;
	position: relative;
}

a:link {
	color: #FFFF00;
	text-decoration: underline;
   }
a:visited {
	color: #FFFF00;
	text-decoration: underline;
}
iframe {
	margin-left: 20%;
	margin-right: 20%;
	margin-bottom: 20px;
	padding: 0;
	width: 60%;
	height: calc(100vw / 3);
	z-index: -1;
}

#topImg {
	margin: 0;
	padding: 0;
	width: 27%;
	position: fixed;
}
#gameText {
	margin: 0 27%;
	padding: 0.75% 0 0 0;
	width: 10%;
	height: calc(100vw / 22);
	color: #FFFFFF;
	background-color: rgba(0, 0, 0, 0.0);
	font-size: calc(100vw / 45);
	font-family: "ヒラギノ明朝 ProN";
	font-weight: bold;
	position: fixed;
	border: none;
	text-align: center;
}
#gameText:hover
{
	background-color: rgba(255, 0, 0, 0.5);
}
#eventText {
	margin: 0 37%;
	padding: 0.75% 0 0 0;
	width: 10%;
	height: calc(100vw / 22);
	color: #FFFFFF;
	background-color: rgba(0, 0, 0, 0.0);
	font-size: calc(100vw / 45);
	font-family: "ヒラギノ明朝 ProN";
	font-weight: bold;
	position: fixed;
	border: none;
	text-align: center;
}
#eventText:hover
{
	background-color: rgba(255, 0, 0, 0.5);
}
#movieText {
	margin: 0 47%;
	padding: 0.75% 0 0 0;
	width: 10%;
	height: calc(100vw / 22);
	color: #FFFFFF;
	background-color: rgba(0, 0, 0, 0.0);
	font-size: calc(100vw / 45);
	font-family: "ヒラギノ明朝 ProN";
	font-weight: bold;
	position: fixed;
	border: none;
	text-align: center;
}
#movieText:hover
{
	background-color: rgba(255, 0, 0, 0.5);
}
#goodsText {
	margin: 0 57%;
	padding: 0.75% 0 0 0;
	width: 10%;
	height: calc(100vw / 22);
	color: #FFFFFF;
	background-color: rgba(0, 0, 0, 0.0);
	font-size: calc(100vw / 45);
	font-family: "ヒラギノ明朝 ProN";
	font-weight: bold;
	position: fixed;
	border: none;
	text-align: center;
}
#goodsText:hover
{
	background-color: rgba(255, 0, 0, 0.5);
}
#otherText {
	margin: 0 67%;
	padding: 0.75% 0 0 0;
	width: 10%;
	height: calc(100vw / 22);
	color: #FFFFFF;
	background-color: rgba(0, 0, 0, 0.0);
	font-size: calc(100vw / 45);
	font-family: "ヒラギノ明朝 ProN";
	font-weight: bold;
	position: fixed;
	border: none;
	text-align: center;
}
#otherText:hover
{
	background-color: rgba(255, 0, 0, 0.5);
}
#worldText {
	margin: 0 80%;
	padding: 0.75% 0 0 0;
	width: 10%;
	height: calc(100vw / 22);
	color: #FFFFFF;
	background-color: rgba(0, 0, 0, 0.0);
	font-size: calc(100vw / 45);
	font-family: "ヒラギノ明朝 ProN";
	font-weight: bold;
	position: fixed;
	border: none;
	text-align: center;
}
#worldText:hover
{
	background-color: rgba(255, 255, 0, 0.5);
}

#pickUpImg {
	margin: 0 auto;
	padding: 0;
	background-color: #000000;
	position: relative;
	z-index: -3;
}
#pickUpImg-0 {
	margin-left: -100%;
	margin-right: 100%;
	padding: 0;
	width: 100%;
	left: 0;
	top: 0;
  	overflow: hidden;
	z-index: -3;
	border: 0;
	background-color: rgba(0, 0, 0, 0);
}
#pickUpImg-1 {
	margin: 0 auto;
	padding: 0;
	width: 100%;
	left: 0;
	top: 0;
  	overflow: hidden;
	position: absolute;
	z-index: -2;
	border: 0;
	background-color: rgba(0, 0, 0, 0);
	animation: slide-animation-01 25s infinite;
}
#pickUpImg-2 {
	margin: 0 auto;
	padding: 0;
	width: 100%;
	left: 0;
	top: 0;
  	overflow: hidden;
	position: absolute;
	z-index: -2;
	border: 0;
	background-color: rgba(0, 0, 0, 0);
	animation: slide-animation-02 25s infinite;
}
#pickUpImg-3 {
	margin: 0 auto;
	padding: 0;
	width: 100%;
	left: 0;
	top: 0;
  	overflow: hidden;
	position: absolute;
	z-index: -2;
	border: 0;
	background-color: rgba(0, 0, 0, 0);
	animation: slide-animation-03 25s infinite;
}
#pickUpImg-4 {
	margin: 0 auto;
	padding: 0;
	width: 100%;
	left: 0;
	top: 0;
  	overflow: hidden;
	position: absolute;
	z-index: -2;
	border: 0;
	background-color: rgba(0, 0, 0, 0);
	animation: slide-animation-04 25s infinite;
}
#pickUpImg-5 {
	margin: 0 auto;
	padding: 0;
	width: 100%;
	left: 0;
	top: 0;
  	overflow: hidden;
	position: absolute;
	z-index: -2;
	border: 0;
	background-color: rgba(0, 0, 0, 0);
	animation: slide-animation-05 25s infinite;
}

#Bar {
	margin: 0 auto;
	padding: 0.3% 0 0 0;
	width: 100%;
	height: calc(100vw / 80);
	background-color: #000000;
	position: relative;
	margin: 0 auto;
	z-index: -1;
}
#Bar-1 {
	margin: 0 15%;
	padding: 0;
	width: 10%;
	height: calc(100vw / 160);
	overflow: hidden;
	position: absolute;
	background-color: #FFFFFF;
	z-index: -1;
}
#Bar-2 {
	margin: 0 30%;
	padding: 0;
	width: 10%;
	height: calc(100vw / 160);
	overflow: hidden;
	position: absolute;
	background-color: #FFFFFF;
	z-index: -1;
}
#Bar-3 {
	margin: 0 45%;
	padding: 0;
	width: 10%;
	height: calc(100vw / 160);
	overflow: hidden;
	position: absolute;
	background-color: #FFFFFF;
	z-index: -1;
}
#Bar-4 {
	margin: 0 60%;
	padding: 0;
	width: 10%;
	height: calc(100vw / 160);
	overflow: hidden;
	position: absolute;
	background-color: #FFFFFF;
	z-index: -1;
}
#Bar-5 {
	margin: 0 75%;
	padding: 0;
	width: 10%;
	height: calc(100vw / 160);
	overflow: hidden;
	position: absolute;
	background-color: #FFFFFF;
	z-index: -1;
}

#pickUpBar-1 {
	margin: 0 auto;
	padding: 0;
	left: 0;
	top: 0;
	width: 100%;
	height: calc(100vw / 160);
  	overflow: hidden;
	position: absolute;
	background-color: #01F2E3;
	animation: bar-animation-01 25s infinite;
	z-index: -1;
}
#pickUpBar-2 {
	margin: 0 auto;
	padding: 0;
	left: 0;
	top: 0;
	width: 100%;
	height: calc(100vw / 160);
  	overflow: hidden;
	position: absolute;
	background-color: #01F2E3;
	animation: bar-animation-02 25s infinite;
	z-index: -1;
}
#pickUpBar-3 {
	margin: 0 auto;
	padding: 0;
	left: 0;
	top: 0;
	width: 100%;
	height: calc(100vw / 160);
  	overflow: hidden;
	position: absolute;
	background-color: #01F2E3;
	animation: bar-animation-03 25s infinite;
	z-index: -1;
}
#pickUpBar-4 {
	margin: 0 auto;
	padding: 0;
	left: 0;
	top: 0;
	width: 100%;
	height: calc(100vw / 160);
  	overflow: hidden;
	position: absolute;
	background-color: #01F2E3;
	animation: bar-animation-04 25s infinite;
	z-index: -1;
}
#pickUpBar-5 {
	margin: 0 auto;
	padding: 0;
	left: 0;
	top: 0;
	width: 100%;
	height: calc(100vw / 160);
  	overflow: hidden;
	position: absolute;
	background-color: #01F2E3;
	animation: bar-animation-05 25s infinite;
	z-index: -1;
}

#categoryHead {
	margin: 0 auto;
	padding-left: 15%;
	padding-right: 15%;
	padding-top: 20px;
	color: #FF0000;
	font-size: calc(100vw / 33);
	font-family: "ヒラギノ明朝 ProN";
	font-weight: bold;
	text-align: center;
}

#topImg2 {
	margin: 0;
	padding: 0;
	width: 25%;
	position: absolute;
}
#gameText2 {
	margin: 0 27%;
	padding-top: calc(100vw / 60);
	width: 10%;
	height: calc(100vw / 15);
	color: #FFFFFF;
	background-color: rgba(0, 0, 0, 0.2);
	font-size: calc(100vw / 45);
	font-family: "ヒラギノ明朝 ProN";
	font-weight: bold;
	position: absolute;
	border: none;
}
#gameText2:hover
{
	background-color: rgba(255, 0, 0, 0.5);
}
#eventText2 {
	margin: 0 37%;
	padding-top: calc(100vw / 60);
	width: 10%;
	height: calc(100vw / 15);
	color: #FFFFFF;
	background-color: rgba(0, 0, 0, 0.2);
	font-size: calc(100vw / 45);
	font-family: "ヒラギノ明朝 ProN";
	font-weight: bold;
	position: absolute;
	border: none;
}
#eventText2:hover
{
	background-color: rgba(255, 0, 0, 0.5);
}
#movieText2 {
	margin: 0 47%;
	padding-top: calc(100vw / 60);
	width: 10%;
	height: calc(100vw / 15);
	color: #FFFFFF;
	background-color: rgba(0, 0, 0, 0.2);
	font-size: calc(100vw / 45);
	font-family: "ヒラギノ明朝 ProN";
	font-weight: bold;
	position: absolute;
	border: none;
}
#movieText2:hover
{
	background-color: rgba(255, 0, 0, 0.5);
}
#goodsText2 {
	margin: 0 57%;
	padding-top: calc(100vw / 60);
	width: 10%;
	height: calc(100vw / 15);
	color: #FFFFFF;
	background-color: rgba(0, 0, 0, 0.2);
	font-size: calc(100vw / 45);
	font-family: "ヒラギノ明朝 ProN";
	font-weight: bold;
	position: absolute;
	border: none;
}
#goodsText2:hover
{
	background-color: rgba(255, 0, 0, 0.5);
}
#otherText2 {
	margin: 0 67%;
	padding-top: calc(100vw / 60);
	width: 10%;
	height: calc(100vw / 15);
	color: #FFFFFF;
	background-color: rgba(0, 0, 0, 0.2);
	font-size: calc(100vw / 45);
	font-family: "ヒラギノ明朝 ProN";
	font-weight: bold;
	position: absolute;
	border: none;
}
#otherText2:hover
{
	background-color: rgba(255, 0, 0, 0.5);
}
#worldText2 {
	margin: 0 80%;
	padding-top: calc(100vw / 60);
	width: 10%;
	height: calc(100vw / 15);
	color: #FFFFFF;
	background-color: rgba(0, 0, 0, 0.2);
	font-size: calc(100vw / 45);
	font-family: "ヒラギノ明朝 ProN";
	font-weight: bold;
	position: absolute;
	border: none;
}
#worldText2:hover
{
	background-color: rgba(255, 255, 0, 0.5);
}

#category {
	margin: 0 auto;
	padding-left: 15%;
	padding-right: 15%;
	color: #FF0000;
	font-size: calc(100vw / 33);
	font-family: "ヒラギノ明朝 ProN";
	text-align: center;
}
#bannerImg {
	margin: 0 auto;
	padding-left: 15%;
	padding-right: 15%;
	padding-top: 10px;
	z-index: -1;
	position: relative;
}
#bannerImgShort {
	margin: 0 auto;
	padding-left: 30%;
	padding-right: 30%;
	padding-top: 10px;
	z-index: -1;
	position: relative;
}
#date {
	margin: 0 auto;
	padding-left: 15%;
	padding-right: 15%;
	color: #FFFFFF;
	font-size: calc(100vw / 55);
	font-family: "ヒラギノ明朝 ProN";
	text-align: right;
}
#title {
	margin: 0 auto;
	padding-left: 15%;
	padding-right: 15%;
	color: #FFFFFF;
	font-size: calc(100vw / 33);
	font-family: "ヒラギノ明朝 ProN";
	font-weight: bold;
}
#content {
	margin: 0 auto;
	padding-left: 15%;
	padding-right: 15%;
	color: #FFFFFF;
	font-size: calc(100vw / 55);
	font-family: "ヒラギノ明朝 ProN";
	z-index: -1;
}

#headImg {
	margin: 0 auto;
	padding: 0;
	width: 100%;
	height: calc(100vw / 12);
	background-color: #000000;
}
#barImg {
	margin: 0 auto;
	padding: 0;
	width: 100%;
	height: calc(100vw / 800);
	background-color: #FFFFFF;
}
#shortBarImg {
	margin: 0 auto;
	padding: 0;
	width: 80%;
	height: 1px;
	background-color: #FFFFFF;
}

#News {
	margin: 0 auto;
	padding-top: calc(100vw / 16);
	padding-bottom: 20px;
	color: #FFFFFF;
	font-size: calc(100vw / 22);
	font-family: "ヒラギノ明朝 ProN";
	font-weight: bold;
	z-index: -1;
	text-align: center;
}
#shortNews {
	margin: 0 auto;
	padding-bottom: 20px;
	color: #FFFFFF;
	font-size: calc(100vw / 40);
	font-family: "ヒラギノ明朝 ProN";
	font-weight: bold;
	z-index: -1;
	text-align: center;
}

#NewsImg {
	margin-left: -95%;
	margin-right: 155%;
	padding: 0;
	width: 40%;
	left: 0;
	top: 0;
	z-index: -2;
	border-radius: 20px 20px 20px 20px;
}
#NewsContent {
	margin: 0 auto;
	padding: 0;
	width: 40%;
	z-index: -2;
	height: calc(100vw / 10);
}
#NewsImg-1 {
	margin-left: 5%;
	margin-right: 55%;
	padding: 0;
	width: 40%;
	z-index: -1;
	background-color: #000000;
	position: absolute;
	border: 0;
	overflow: hidden;
	border-radius: 20px 20px 20px 20px;
}
#NewsImg-1:hover {
	opacity: 0.5;
}
#NewsContent-1 {
	margin-left: 5%;
	margin-right: 55%;
	padding: 0;
	width: 40%;
	color: #FFFFFF;
	font-size: calc(100vw / 55);
	font-family: "ヒラギノ明朝 ProN";
	font-weight: bold;
	z-index: -1;
	position: absolute;
}
#NewsImg-2 {
	margin-left: 55%;
	margin-right: 5%;
	padding: 0;
	width: 40%;
	z-index: -1;
	background-color: #000000;
	position: absolute;
	border: 0;
	overflow: hidden;
	border-radius: 20px 20px 20px 20px;
}
#NewsImg-2:hover {
	opacity: 0.5;
}
#NewsContent-2 {
	margin-left: 55%;
	margin-right: 5%;
	padding: 0;
	width: 40%;
	color: #FFFFFF;
	font-size: calc(100vw / 55);
	font-family: "ヒラギノ明朝 ProN";
	font-weight: bold;
	z-index: -1;
	position: absolute;
}

#NewsEvery {
	margin-left: 30%;
	margin-right: 30%;
	margin-bottom: 20px;
	width: 40%;
	height: calc(100vw / 16);
	padding: 0;
	z-index: -1;
	background-color: #FFFFFF;
	border: 0;
	overflow: hidden;
	border-radius: 50px 50px 50px 50px;
	color: #444444;
	font-size: calc(100vw / 55);
	font-family: "ヒラギノ明朝 ProN";
	font-weight: bold;
}
#NewsEvery:hover {
	background-color: #000000;
	color: #FFFFFF;
}

#SNSImg {
	margin-top: calc(100vw / 80);
	margin-left: -94%;
	margin-right: 170%;
	padding: 0;
	width: 14%;
	z-index: -2;
	background-color: rgba(0, 0, 0, 0);
	overflow: hidden;
	border-radius: 10000px 10000px 10000px 10000px;
}
#YouTubeImg {
	margin-top: calc(100vw / 80);
	margin-left: 16%;
	margin-right: 70%;
	padding: 0;
	width: calc(100vw / 7);
	height: calc(100vw / 7);
	z-index: -1;
	background-color: #FFFFFF;
	position: absolute;
	overflow: hidden;
	border-radius: 10000px 10000px 10000px 10000px;
}
#YouTubeImg:hover {
	opacity: 0.5;
}
#DiscordImg {
	margin-top: calc(100vw / 80);
	margin-left: 43%;
	margin-right: 43%;
	padding: 0;
	width: calc(100vw / 7);
	height: calc(100vw / 7);
	z-index: -1;
	background-color: rgb(88, 101, 242);
	position: absolute;
	overflow: hidden;
	border-radius: 10000px 10000px 10000px 10000px;
}
#DiscordImg:hover {
	opacity: 0.5;
}
#XImg {
	margin-top: calc(100vw / 80);
	margin-left: 70%;
	margin-right: 16%;
	padding: 0;
	width: calc(100vw / 7);
	height: calc(100vw / 7);
	z-index: -1;
	background-color: #000000;
	position: absolute;
	overflow: hidden;
	border-radius: 10000px 10000px 10000px 10000px;
}
#XImg:hover {
	opacity: 0.5;
}

#SNSContent {
	margin-left: 16%;
	margin-right: 70%;
	margin-bottom: 20px;
	padding: 0;
	width: 14%;
	z-index: -2;
	height: 40px;
}
#YouTubeContent {
	margin-left: 16%;
	margin-right: 70%;
	padding: 0;
	width: 14%;
	color: #FFFFFF;
	font-size: calc(100vw / 55);
	font-family: "ヒラギノ明朝 ProN";
	font-weight: bold;
	z-index: -1;
	position: absolute;
	text-align: center;
}
#DiscordContent {
	margin-left: 43%;
	margin-right: 43%;
	padding: 0;
	width: 14%;
	color: #FFFFFF;
	font-size: calc(100vw / 55);
	font-family: "ヒラギノ明朝 ProN";
	font-weight: bold;
	z-index: -1;
	position: absolute;
	text-align: center;
}
#XContent {
	margin-left: 70%;
	margin-right: 16%;
	padding: 0;
	width: 14%;
	color: #FFFFFF;
	font-size: calc(100vw / 55);
	font-family: "ヒラギノ明朝 ProN";
	font-weight: bold;
	z-index: -1;
	position: absolute;
	text-align: center;
}

#footImg {
	margin: 0 auto;
	padding: 0;
	width: 100%;
	height: calc(100vw / 12);
	background-color: #000000;
	z-index: -1;
	color: #FFFFFF;
	font-size: calc(100vw / 55);
	font-family: "ヒラギノ明朝 ProN";
	font-weight: bold;
	text-align: center;
}

img {
	margin: 0;
	padding: 0;
	width: 100%;
}
video {
	margin-left: 20%;
	margin-right: 20%;
	padding: 0;
	width: 60%;
}

@keyframes slide-animation-01 {
    98% {opacity: 0; z-index: -2; translate: transform(-100%);}
    99% {opacity: 1; z-index: -1; translate: transform(0%);}
    0% {opacity: 1; z-index: -1;}
	19% {opacity: 1; z-index: -2; translate: transform(0%);}
	20% {opacity: 0; z-index: -2; translate: transform(-100%);}
	97% {opacity: 0; z-index: -2; translate: transform(-100%);}
}
@keyframes slide-animation-02 {
    0% {opacity: 0; z-index: -2; translate: transform(-100%);}
    18% {opacity: 0; z-index: -2; translate: transform(-100%);}
    19% {opacity: 1; z-index: -1; translate: transform(0%);}
    20% {z-index: -1;}
    39% {opacity: 1; z-index: -2; translate: transform(0%);}
	40% {opacity: 0; z-index: -2; translate: transform(-100%);}
	100% {opacity: 0; z-index: -2;}
}
@keyframes slide-animation-03 {
    0% {opacity: 0; z-index: -2; translate: transform(-100%);}
    38% {opacity: 0; z-index: -2; translate: transform(-100%);}
    39% {opacity: 1; z-index: -1; translate: transform(0%);}
    40% {z-index: -1;}
    59% {opacity: 1; z-index: -2; translate: transform(0%);}
	60% {opacity: 0; z-index: -2; translate: transform(-100%);}
	100% {opacity: 0; z-index: -2;}
}
@keyframes slide-animation-04 {
    0% {opacity: 0; z-index: -2; translate: transform(-100%);}
    58% {opacity: 0; z-index: -2; translate: transform(-100%);}
    59% {opacity: 1; z-index: -1; translate: transform(0%);}
    60% {z-index: -1;}
    79% {opacity: 1; z-index: -2; translate: transform(0%);}
	80% {opacity: 0; z-index: -2; translate: transform(-100%);}
	100% {opacity: 0; z-index: -2; translate: transform(0%);}
}
@keyframes slide-animation-05 {
    0% {opacity: 0; z-index: -2; translate: transform(-100%);}
    78% {opacity: 0; z-index: -2; translate: transform(-100%);}
    79% {opacity: 1; z-index: -1; translate: transform(0%);}
    90% {z-index: -2;}
    99% {opacity: 1; z-index: -1; translate: transform(0%);}
	100% {opacity: 0; z-index: -2; translate: transform(-100%);}
}

@keyframes bar-animation-01 {
    0% {transform: translateX(-100%);}
	20% {transform: translateX(0%);}
	21% {transform: translateX(-100%);}
    100% {transform: translateX(-100%);}
}
@keyframes bar-animation-02 {
    0% {transform: translateX(-100%);}
    20% {transform: translateX(-100%);}
    40% {transform: translateX(0%);}
	41% {transform: translateX(-100%);}
    100% {transform: translateX(-100%);}
}
@keyframes bar-animation-03 {
    0% {transform: translateX(-100%);}
    40% {transform: translateX(-100%);}
    60% {transform: translateX(0%);}
	61% {transform: translateX(-100%);}
    100% {transform: translateX(-100%);}
}
@keyframes bar-animation-04 {
    0% {transform: translateX(-100%);}
    60% {transform: translateX(-100%);}
    80% {transform: translateX(0%);}
	81% {transform: translateX(-100%);}
    100% {transform: translateX(-100%);}
}
@keyframes bar-animation-05 {
    0% {transform: translateX(0%);}
    80% {transform: translateX(-100%);}
	1% {transform: translateX(-100%);}
}