@charset "UTF-8";





/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
RESET_start
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
*{
	margin: 0;
	padding: 0;
	line-height: 100%;
	list-style-type: none;
}

h1,h2,h3,h4,h5,h6,
div,p,
span,em,strong,
ul,ol,li,
dl,dt,dd,
a{
	background-repeat: no-repeat;
	background-size: 100% auto;
}

a{
	outline: none;
}

img {
	vertical-align: bottom;
}

.sp{
	display: block;
}
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
RESET_end
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/






/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
COMMON_start
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
body{
	background-color: #0f0f15;
	color: #768ca9;
	/*欧文基本書体*/
	/*
	font-family: "din-2014", sans-serif;
	font-weight: 400;
	font-weight: 600;
	font-weight: 700;
	font-style: normal;
	*/
	/*日本語基本書体（見出し）*/
	/*
	font-family: "FOT-ニューロダン Pro EB";
	font-family: "NewRodinPro-EB";
	*/
	/*日本語本文書体*/
	font-family: "NewRodinPro-B";
	font-family: "FOT-ニューロダン Pro B";

	/*Windowsコーディング用
	font-family: "FOT-ニューロダン Pro";
	font-weight: 600;*/

	-webkit-font-smoothing: antialiased;
	letter-spacing: 0.065em;
	line-height: 1.65em;
	word-break: break-word;
}



/*
汎用ボタン
*/
.btn_a {
	box-sizing: border-box;
	display: inline-block;
	background-image: url(../svg/common_icon_arrow_btn.svg), linear-gradient(45deg, #0fb2d4, #00f6ff);
	background-size: 15px auto, auto auto;
	background-position: 20px center, center center;
	color: #ffffff;
	font-size: 15px;
	font-family: "din-2014", sans-serif;
	font-weight: 600;
	font-style: normal;
	line-height: 1em;
	letter-spacing: 0.06em;
	text-decoration: none;
	text-shadow: 0 0 10px rgba(255, 255, 255, 0.75);
	text-align: right;
	min-width: 160px;
	padding: 10px 20px 10px 65px;
	border-radius: 100px;
}
.btn_a em {
	font-style: normal;
}
.btn_a:hover {
	background-position: 25px center, center center;
}
.btn_a.disabled {
	background-color: #828282;
    color: #555;
    pointer-events: none;
}



/*
ダウンロード遷移
*/
.playnow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 280px;
    height: 60px;
	font-family: "din-2014", sans-serif;
	font-weight: 600;
	font-style: normal;
	font-size: 24px;
    cursor: pointer;
    background: linear-gradient(45deg, #0fb2d4, #00f6ff);
	color: #ffffff;
    clip-path: polygon(4% 0, 96% 0, 100% 20%, 100% 80%, 96% 100%, 4% 100%, 0% 80%, 0% 20%);
}
.playnow span {
	position: relative;
	display: block;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100% auto;
	width: 4px;
	height: 12px;
}
.playnow span:nth-of-type(1) {
	left: 20px;
	background-image: url(../svg/common_icon_arrow_l.svg);
}
.playnow span:nth-of-type(2) {
	right: 20px;
	background-image: url(../svg/common_icon_arrow_r.svg);
}



/*
言語切替
*/
.language {
    display: flex;
    align-items: center;
    flex-direction: unset;
	box-sizing: border-box;
	font-family: "din-2014", sans-serif;
	font-weight: 600;
	font-style: normal;
    width: 320px;
	padding: 20px 0;
    margin: 20px 0 0 20px;
}

.language h5,
.language ul {
	box-sizing: border-box;
	background-color: rgba(0,0,0,0.85);
    color: #ffffff;
    line-height: 1em;
    letter-spacing: 0.06em;
	border-radius: 100px;
	height: 36px;
	line-height: 36px;
}

/*見出し*/
.language h5 {
	color: #818788;
	box-sizing: border-box;
	margin: 0 5px 0 0;
	padding: 0 15px;
	font-size: 11px;
}

/*言語切り替えボタン*/
.language ul {
	display: flex;
    align-items: center;
	justify-content: space-between;
	padding: 5px;
}
.language ul a {
    display: block;
	color: #494949;
    width: 50px;
    margin: 0 3px;
    padding: 6px 5px;
    text-align: center;
    font-size: 12px;
    font-style: normal;
    line-height: 1em;
    text-decoration: none;
    border: 1px transparent solid;
    border-radius: 100px;
}

/*アクティブ状態*/
.language ul .active a {
    border: 1px #4e5253 solid;
	color: #ffffff;
}



/*
汎用アニメーション
*/
/*一括指定*/
.wp_t_a,
.wp_t_b,
.wp_t_c,
.wp_t_d {
	animation-timing-function: cubic-bezier(.42,0,0,.99);
	animation-direction: normal;
	animation-fill-mode: forwards;
	animation-play-state: running;
	animation-iteration-count: inherit;
}

/*トグルタイプ*/
.wp_t_a_toggle {
	opacity: 0;
	transition-duration: 600ms;
	transition-property: all;
	transition-timing-function: cubic-bezier(.42,0,0,.99);
	transition-delay: 0ms;
	transform-origin: center;
}
.wp_t_a_toggle_active {
	opacity: 1;
}

/*通過タイプ*/
.wp_t_a {
	opacity: 0;
	animation-duration: 800ms;
}
.wp_t_a_active {
	animation-name: anime_wp_t_a;
}
@keyframes anime_wp_t_a {
	0% {
		opacity: 0;
		transform: translateY(20px);
	}
	100%{
		opacity: 1;
		transform: translateY(0px);
	}
}

/*通過タイプ*/
.wp_t_b {
	opacity: 0;
	animation-duration: 800ms;
}
.wp_t_b_active {
	animation-name: anime_wp_t_b;
}
@keyframes anime_wp_t_b {
	0% {
		opacity: 0;
		transform: translateY(-20px);
	}
	100%{
		opacity: 1;
		transform: translateY(0px);
	}
}

/*通過タイプ*/
.wp_t_c {
	opacity: 0;
	animation-duration: 800ms;
}
.wp_t_c_active {
	animation-name: anime_wp_t_c;
}
@keyframes anime_wp_t_c {
	0% {
		opacity: 0;
		transform: translateX(-20px);
	}
	100%{
		opacity: 1;
		transform: translateX(0px);
	}
}

/*通過タイプ*/
.wp_t_d {
	opacity: 0;
	animation-duration: 800ms;
}
.wp_t_d_active {
	animation-name: anime_wp_t_d;
}
@keyframes anime_wp_t_d {
	0% {
		opacity: 0;
		transform: translateX(20px);
	}
	100%{
		opacity: 1;
		transform: translateX(0px);
	}
}



/*
flexの末尾調整用
*/
.emptyflexbox {
	background-color: transparent !important;
	height: 0 !important;
	min-height: 0 !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	border: none !important;
}
.emptyflexbox::before,
.emptyflexbox::after {
	display: none !important;
}



/*
magnificPopup
*/
/*フェードアニメーション初期設定*/
.mfp-fade.mfp-bg {
	opacity: 0;
	-webkit-transition: all .3s ease-out;
	-moz-transition: all .3s ease-out;
	transition: all .3s ease-out;
}
.mfp-fade.mfp-bg.mfp-ready {
	opacity: .8;
}
.mfp-fade.mfp-bg.mfp-removing {
	opacity: 0;
}
.mfp-fade.mfp-wrap .mfp-content {
	opacity: 0;
	-webkit-transition: all .3s ease-out;
	-moz-transition: all .3s ease-out;
	transition: all .3s ease-out;
}
.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
	opacity: 1;
	width: 320px;
}
.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
	opacity: 0;
}
/*ギャラリーモードUI*/
.mfp-arrow-right:after {
    border-left: 17px solid #00ccff !important;
}
.mfp-arrow-right:before {
	border-left: transparent !important;
}
.mfp-arrow-left:after {
    border-right: 17px solid #00ccff !important;
}
.mfp-arrow-left:before {
	border-right: transparent !important;
}
.mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close {
	font-size: 40px;
	color: #00ccff !important;
}
.mfp-counter {
	color: #00ccff !important;
}
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
COMMON_end
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/









/*――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――

ローディング

――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――*/
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
LOADING_start
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
#loading{
	z-index: 999;
	background-color: #0f0f15;
	box-sizing: border-box;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transition-duration: 1000ms;
	transition-property: all;
	transition-timing-function: cubic-bezier(.42,0,0,.99);
	transition-delay: 0ms;
	transform-origin:bottom;
}



/*
SVG格納要素指定
*/
#loading > div {
	opacity: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -140px 0 0 -140px;
	display: inline-block;
	width: 280px;
	height: 280px;
	transition-duration: 600ms;
	transition-property: all;
	transition-timing-function: cubic-bezier(.42,0,0,.99);
	transition-delay: 0ms;
	transform-origin: center;
}

/*SVGオブジェクト全体のサイズ*/
#loading > div svg {
    width: 100%;
    height: 100%;
	/*
	width: 229px;
	height: 302px;
	*/
}

/*ダイヤシンボル*/
#loading > div svg .load_logo {
	fill: #68deff;
	transform: scale(0.5) translate(75px,75px);
	/*
	transform-origin: 115px center;
	*/
}

/*アニメーション用汎用設定*/
#loading > div svg .load_logo {
	animation-duration: 6000ms;
	animation-delay: 0;
	animation-timing-function: linear;
	animation-direction: normal;
	animation-fill-mode: forwards;
	animation-play-state: running;
	animation-iteration-count: infinite;
}



/*
ロード中演出
*/
#loading.start > div {
	opacity: 1;
	transform: scale(1);
	animation-name: common_anime_startloading;
}

#loading.start > div svg .load_logo {
	animation-name: common_anime_nowloading_bright;
}

/*スタート表示*/
@keyframes common_anime_startloading {
	0% {
		opacity: 0;
		transform: scale(0);
	}
	100%{
		opacity: 1;
		transform: scale(1);
	}
}

/*明滅*/
@keyframes common_anime_nowloading_bright {
	0% {
		filter: drop-shadow(0 0 20px rgba(0,220,250,0));
	}
	50% {
		filter: drop-shadow(0 0 20px rgba(0,220,250,1));
	}
	100%{
		filter: drop-shadow(0 0 20px rgba(0,220,250,0));
	}
}



/*
フェードアウト演出
*/
#loading.remove > div {
	opacity: 0;
	transform: scale(0);
	animation-name: common_anime_removeloading;
}
@keyframes common_anime_removeloading {
	0% {
		opacity: 1;
		transform: scale(1);
	}
	100%{
		opacity: 0;
		transform: scale(0);
	}
}



/*
削除
*/
/*アニメーション停止*/
#loading.destroy > div svg .load_logo {
	animation-name: none;
}
/*不可視化・クリック非対象に*/
#loading.destroy{
	opacity: 0;
	pointer-events: none;
}
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　LOADING_end
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/









/*――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――

ダウンロードモーダル

――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――*/
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
PLAY FREE NOW Modal_start
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
#playnowmodal {
	opacity: 0;
	pointer-events: none;
	z-index: 2000;
	position: fixed;
	top: 0;
	left: 0;
	background-color: rgba(0, 25, 30, 0.85);
	width: 100%;
	height: 100%;
	transition-duration: 600ms;
	transition-property: all;
	transition-timing-function: cubic-bezier(.42,0,0,.99);
	transition-delay: 0ms;
	transform-origin: center;
}
#playnowmodal.active {
	opacity: 1;
	pointer-events: inherit;
}

#playnowmodal > div {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 400px;
	margin: -200px 0 0 0;
}



/*
リスト
*/
#playnowmodal > div .platform {
	height: 100%;
}
#playnowmodal > div .platform ul {
	display: flex;
	flex-wrap: wrap;
	align-content: space-between;
	justify-content: space-between;
	height: 100%;
}
#playnowmodal > div .platform ul li {
	width: 100%;
	text-align: center;
}

/*アンカー*/
#playnowmodal > div .platform ul li a {
	transition-duration: 600ms;
	transition-property: all;
	transition-timing-function: cubic-bezier(.42,0,0,.99);
	transition-delay: 0ms;
	transform-origin: center;
}
#playnowmodal > div .platform ul li a:hover {
	filter: drop-shadow(0 0 40px #00ccff);
}

/*画像*/
#playnowmodal > div .platform ul li img {
	height: 30px;
}



/*
閉じるボタン
*/
#playnowmodal > div .platform ul li.close {
	box-sizing: border-box;
	background-color: rgba(0,0,0,0.7);
	color: #00f6ff;
	width: 200px;
	margin: 0 auto;
	padding: 20px 0;
	font-size: 14px;
	line-height: 1em;
	border: 1px #00ccff solid;
	cursor: pointer;
	transition-duration: 600ms;
	transition-property: all;
	transition-timing-function: cubic-bezier(.42,0,0,.99);
	transition-delay: 0ms;
	transform-origin: center;
}
#playnowmodal > div .platform ul li.close:hover {
	width: 240px;
	text-shadow: 0 0 10px #00ccff,0 0 10px #00ccff;
}
#playnowmodal > div .platform ul li.close span {
	display: inline-block;
	margin: 0 10px 0 0;
}
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
PLAY FREE NOW Modal_end
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/








/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
フッター_start
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
footer#grandfotter {
    background: linear-gradient(45deg, #0a0a0a, #191a1c);
	width: 100%;
    overflow: hidden;
}



/*
PRODUCTS
*/
footer#grandfotter .products {
	display: flex;
    flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin: 0 auto;
	padding: 60px 0;
}

/*タイトルロゴ*/
footer#grandfotter .products .detail {
    width: 320px;
    margin: 0 0 30px 0;
    padding: 0 0 30px 0;
    border-bottom: 1px #4e5253 solid;
}
footer#grandfotter .products .detail .playguide {
	display: flex;
    flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	margin: 0 0 30px 0;
}
footer#grandfotter .products .detail .playguide h4 img {
	display: block;
	width: 110px;
	height: 110px;
	margin: 0 0 40px 0;
}
footer#grandfotter .products .detail .playguide .playnow {
    width: 260px;
    height: 50px;
    font-size: 16px;
    clip-path: polygon(3% 0, 97% 0, 100% 13%, 100% 87%, 97% 100%, 3% 100%, 0% 87%, 0% 17%);
}

/*プラットフォーム*/
footer#grandfotter .products .detail .platform ul {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
/*
footer#grandfotter .products .detail .platform ul li.playstation img {
	width: 90px;
}
*/
footer#grandfotter .products .detail .platform ul li.meta img {
	width: 100px;
}
footer#grandfotter .products .detail .platform ul li.steam img {
	width: 100px;
}
footer#grandfotter .products .detail .platform ul li.pico img {
	width: 65px;
}

/*スペック*/
footer#grandfotter .products .spec {
    width: 320px;
}
footer#grandfotter .products .spec table {
    border-collapse: separate;
    border-spacing: 5px;
}
footer#grandfotter .products .spec table th,
footer#grandfotter .products .spec table td {
	font-size: 12px;
}
footer#grandfotter .products .spec table th {
	padding: 10px;
	text-align: right;
    border: 1px #4e5253 solid;
}
footer#grandfotter .products .spec table td {
	padding: 10px 10px 10px 15px;
}



/*
OFFICIALACCOUNT
*/
footer#grandfotter .officialaccount {
	background-color: #000000;
	padding: 60px 0;
}
footer#grandfotter .officialaccount > div {
	display: flex;
	align-items: center;
	justify-content: center;
    flex-wrap: wrap;
	width: 320px;
	margin: 0 auto;
}

/*見出し*/
footer#grandfotter .officialaccount > div .title {
	font-size: 13px;
}
footer#grandfotter .officialaccount > div .title h4 {
	position: relative;
	display: inline-block;
    background: linear-gradient(90deg, #d571c1, #95c1ff);
    background: -webkit-linear-gradient(0deg, #d571c1, #95c1ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
	margin: 0 0 20px 0;
    padding: 0 0 0 50px;
	font-family: "din-2014", sans-serif;
	font-weight: 600;
	font-style: normal;
    font-size: 30px;
}
footer#grandfotter .officialaccount > div .title h4::before {
	content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 36px;
    height: 100%;
    background-image: url(../svg/common_slash.svg);
    background-position: -46px center;
    background-size: 130px auto;
}
footer#grandfotter .officialaccount > div p {
	font-size: 14px;
	line-height: 1.5em;
}



/*
SNSリンク
*/
footer#grandfotter .officialaccount > div .medialist {
	display: flex;
	align-items: center;
	justify-content: space-between;
    margin: 30px 0 0 0;
}
footer#grandfotter .officialaccount > div .medialist li {
	margin: 0 12px 0 12px;
}



/*
DEEPLINK
*/
footer#grandfotter .deeplink {
    background: linear-gradient(90deg, #e6ce9a, #5a69a3, #62acd6);
    background: -webkit-linear-gradient(0deg, #e6ce9a, #5a69a3, #62acd6);
}
footer#grandfotter .deeplink ul {
    width: 320px;
    margin: 0 auto;
	padding: 30px 0;
}
footer#grandfotter .deeplink ul li {
	margin: 0 0 1.5em 0;
	padding: 0 0 1.5em 0;
	border-bottom: 1px #ffffff solid;
    text-align: center;
}
footer#grandfotter .deeplink ul li:last-child {
	margin: 0;
	padding: 0;
	border: none;
}
footer#grandfotter .deeplink ul li a {
	display: block;
	color: #ffffff;
	font-family: "din-2014", sans-serif;
	font-weight: 600;
	font-style: normal;
    font-size: 17px;
	font-style: normal;
	line-height: 1em;
	text-decoration: none;
}



/*
LANGUAGE
*/
footer#grandfotter .language {
    justify-content: center;
    width: 320px;
    margin: 40px auto;
	padding: 0;
}
footer#grandfotter .language h5 {
	font-size: 12px;
}



/*
COPYRIGHT
*/
footer#grandfotter .copyright {
    width: 320px;
	color: #34343a;
    margin: 0 auto;
	padding: 0 0 50px 0;
	text-align: center;
	font-size: 11px;
	line-height: 1.65em;
}

/*ロゴ*/
footer#grandfotter .copyright h5 {
	margin: 0 0 30px 0;
}

/*権利表記*/
footer#grandfotter .copyright .platformright {
	font-size: 10px;
}
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
フッター_end
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/








/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
グローバルナビゲーション_start
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
/*
スマホ専用
*/

#gnav {
	position: relative;
	transition-duration: 600ms;
	transition-delay: 0ms;
	transition-property: all;
	transition-timing-function: cubic-bezier(.42,0,0,.99);
	transform-origin: center;
}
#gnav .sponly {
	display: block;
}

/*
トグル
*/
#gnav .sponly .toggle {
    z-index: 100;
    position: absolute;
	top: 7px;
	right: 8px;
    width: 44px;
    height: 44px;
    cursor: pointer;
    transition-duration: 200ms;
    transition-property: all;
    transition-timing-function: cubic-bezier(.42,0,0,.99);
    transition-delay: 0ms;
}

#gnav .sponly .toggle .menu {
    position: relative;
}
#gnav .sponly .toggle .menu span {
    position: absolute;
	left: 12px;
    height: 2px;
	width: 20px;
	background-color: #ffffff;
	transition-duration: 600ms;
	transition-delay: 0ms;
	transition-property: all;
	transition-timing-function: cubic-bezier(.42,0,0,.99);
	transform-origin: center;

}
#gnav .sponly .toggle .menu span:nth-of-type(1) {top: 15px;}
#gnav .sponly .toggle .menu span:nth-of-type(2) {top: 22px;}
#gnav .sponly .toggle .menu span:nth-of-type(3) {top: 29px;}
#gnav.toggleactive .toggle .menu{
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
}
#gnav.toggleactive .toggle .menu span:nth-of-type(1) {
    transform: translateY(7px) translateX(0px) rotate(-45deg);
}
#gnav.toggleactive .toggle .menu span:nth-of-type(2) {
    transform: translateY(0px) translateX(0px) rotate(225deg);
}
#gnav.toggleactive .toggle .menu span:nth-of-type(3) {
    opacity: 0;
}


#gnav {
	z-index: 99;
	position: fixed;
	top: 0;
	width: 100%;
    height: 60px;
    overflow: hidden;
    background: linear-gradient(45deg, #0a596e, #1b0d43);
}

#gnav.toggleactive {
	width: 100%;
    height: 100%;
}



/*
ページ遷移リンクパネル
*/
#gnav .list {
	display: flex;
    flex-wrap: wrap;
	box-sizing: border-box;
    width: 100%;
    color: #ffffff;
    margin: 0 auto;
}



/*
ロゴ
*/
#gnav .list h3 {
    display: flex;
    justify-content: center;
    align-items: center;
	width: 60px;
	height: 60px;

}
#gnav .list h3 img {
    width: 25px;
}



/*
メニューボタン
*/
#gnav .list > ul {
	display: flex;
	flex-wrap: wrap;
    padding: 10px 0 0 0;
}
#gnav .list > ul li {
    width: 100%;
    margin: 0 20px;
}
#gnav .list > ul a {
	display: block;
	color: #ffffff;
	font-family: "din-2014", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 17px;
	line-height: 1em;
	letter-spacing: 0.04em;
	text-decoration: none;
	padding: 15px 0;
}



/*
サブメニュー
*/
#gnav .list > ul li ul li a {
	padding: 8px 0;
	font-size: 14px;
}



/*
ダウンロード遷移
*/
#gnav .list .playnow {
    position: absolute;
    top: 13px;
    right: 60px;
	width: auto;
	height: auto;
    padding: 10px 30px;
	font-size: 12px;
	clip-path: none;
    border-radius: 100px;
}
#gnav .list .playnow span:nth-of-type(1) {
	left: -10px;
}
#gnav .list .playnow span:nth-of-type(2) {
	right: -10px;
}
#gnav .list .playnow p {
	letter-spacing: 0.01em;
}



/*
言語切替
*/
#gnav .language {
    width: 320px;
	padding: 0;
}
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
グローバルナビゲーション_end
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/







/*――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――

トップページ

――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――*/
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
コーディング用_start
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
/*body::after {
	opacity: 0.5;
	z-index: -1;
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	background-image: url(../../コーディング用/PC_X8_公式_NEWS\ -\ 詳細.png);
	background-position: top center;
	background-repeat: no-repeat;
	width: 100%;
	height: 7500px;
}*/
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
コーディング用_end
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/









/*――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――

トップページ

――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――*/
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
トップページ：汎用_start
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
/*
タイトル要素
*/
.toptitle {
	position: relative;
	width: 100%;
	height: 60px;
	margin: 0 auto 34px auto;
}

.toptitle h2 {
	z-index: 6;
	position: absolute;
	top: -25px;
	margin: 0 0 20px 30px;
	padding: 0 0 0 50px;
	font-size: 52px;
	font-family: "din-2014", sans-serif;
	font-weight: 600;
	font-style: normal;
}
.toptitle h2::before {
	content: "";
	display: block;
	position: absolute;
	top: 6px;
	left: 0;
	width: 43px;
	height: 43px;
	background-image: url(../svg/pagetitle_slash.svg);
	background-position: 0px center;
	background-size: 1;
	background-repeat: no-repeat;
}
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
トップページ：汎用_end
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/



/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
トップページ：キービジュアルエリア_start
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
#top #vis {
	position: relative;
	width: 100%;
	height: 630px;
	margin: 0 0 60px;
	overflow: hidden;
}

#top #vis::after {
	z-index: 4;
	content: "";
	display: block;
	width: 100%;
	height: 20px;
	position: absolute;
	bottom: 0;
	left: 0;
	background-image: url(../images/vis_obj_connect_vis.png);
	background-repeat: repeat-x;
	background-position: bottom left;
	background-size: auto 100%;
}



/*
タイトル要素
*/
/*ロゴ*/
#top #vis .title {
	z-index: 2;
	position: relative;
	top: 140px;
	color: #ffffff;
	text-align: center;
	width: 100%;
	margin: 0 auto;
}
#top #vis .title h1 {
	background-image: url(../images/logo_x8.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100% auto;
	width: 195px;
	height: 182px;
	margin: 0 auto 30px auto;
	text-indent: -9999px;
}

#top #vis .title > p {
	width: 80%;
	margin: 0 auto;
	font-size: 18px;
	line-height: 1.5em;
	text-shadow: 0 0 10px #000000, 0 0 10px #000000;
}



/*
ダウンロード遷移
*/
#top #vis .playnow {
	z-index: 3;
	position: absolute;
    top: 450px;
    left: 50%;
    margin: 0 0 0 -140px;
    width: 280px;
    height: 60px;
	font-size: 18px;
    clip-path: polygon(4% 0, 96% 0, 100% 20%, 100% 80%, 96% 100%, 4% 100%, 0% 80%, 0% 20%);
}
#top #vis .playnow p {
	letter-spacing: 0.06em;
}
#top #vis .playnow span {
	width: 7px;
	height: 14px;
}
#top #vis .playnow span:nth-of-type(1) {
	left: 20px;
}
#top #vis .playnow span:nth-of-type(2) {
	right: 20px;
}



/*
プラットフォーム
*/
#top #vis .platform {
	z-index: 4;
	position: absolute;
	top: 570px;
	left: 50%;
	box-sizing: border-box;
	margin: 0 0 0 -140px;
	width: 280px;
}
#top #vis .platform ul {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

#top #vis .platform ul img {
	height: auto;
}
#top #vis .platform ul .meta img {
	width: 110px;
}
#top #vis .platform ul .steam img {
	width: 82px;
}
#top #vis .platform ul .pico img {
	width: 67px;
}



/*
背景動画
*/
#top #vis .video {
	z-index: 1;
	position: absolute;
	top: 0;
	left: 0;
	background-color: #0b485b;
	width: 100%;
	height: 630px;
	overflow: hidden;
}

#top #vis .video #video {
	/*
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 177.77777778vh;
    height: 56.25vw;
    min-height: 100%;
    min-width: 100%;
	*/
}
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
トップページ：キービジュアルエリア_end
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/



/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
トップページ：アップデート_start
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
#top #update {
	position: relative;
}
#top #update .updatewrapper {
	position: relative;
	overflow: hidden;
	box-sizing: border-box;
	background-color: #272929;
	width: 100%;
	margin: 0;
}
#top #update > div {
	width: 100%;
	margin: 0 auto;
}


/*
コンテンツ見出し
*/
#top #update h2 {
	text-shadow: 0 0 1px #eed0e4;
	font-size: 80px;
}



/*
アップデート詳細
*/
#top #update .detail {
	width: 320px;
	margin: 0 auto;
	padding: 40px 0 40px;
}
#top #update .detail h3 {
    background: linear-gradient(90deg, #eed0e4, #d571c1), #95c1ff;
    background: -webkit-linear-gradient(0deg, #eed0e4, #d571c1), #95c1ff;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
	margin: 0 0 30px 0;
    font-size: 27px;
    line-height: 1.8em;
    letter-spacing: 0.065em;
}
#top #update .detail .caption p {
	color: #ffffff;
	font-size: 14px;
	line-height: 1.7em;
	margin: 0 0 40px 0;
}



/*
アップデート画像
*/
#top #update figure {
	flex: 1;
	position: relative;
	border-top: solid 3px #4e5253;
	border-bottom: solid 3px #4e5253;
}
#top #update figure img {
	position: relative;
	bottom: 0;
	display: block;
	width: 100%;
}



/*
飾り
*/
#top #update .object span {
	display: block;
	position: absolute;
	left: 50%;
	background-size: 100% auto;
	background-repeat: no-repeat;
	background-position: center center;
}
#top #update .object span:nth-of-type(1) {
	top: -35px;
	left: 40px;
	background-image: url(../images/update_obj_top.png);
	width: 105px;
	height: 100px;
}
#top #update .object span:nth-of-type(2) {
	bottom: 30px;
	margin: 0 0 0 90px;
	background-image: url(../images/update_obj_bottom.png);
	width: 84px;
	height: 82px;
}
#top #update .object span:nth-of-type(3) {
	top: 65px;
	left: -50px;
	background-image: url(../images/update_obj_left.png);
	width: 81px;
	height: 391px;
}
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
トップページ：アップデート_end
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/



/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
トップページ：ゲーム概要_start
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
#top #outline {
	background-image: url(../images/about_bg.png);
	background-size: 840px auto;
	background-position: center center;
	background-repeat: no-repeat;
	padding: 70px 0;
	text-align: center;
}



/*
PV
*/
#top #outline .movie {
	position: relative;
	margin: 0 0 60px 0;
}
#top #outline .movie a {
	position: relative;
	display: block;
	box-sizing: border-box;
	width: 280px;
	height: 158px;
	margin: 0 auto;
}

/*再生矢印*/
#top #outline .movie a .play {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -60px 0 0 -58px;
	background-image: url(../images/movie_arrow.png);
	width: 116px;
	height: 120px;
	text-indent: -9999px;
	transition-duration: 600ms;
	transition-property: all;
	transition-timing-function: cubic-bezier(.42,0,0,.99);
	transition-delay: 0ms;
	transform-origin: center;
}
#top #outline .movie a:hover .play {
	transform: scale(1.2);
}

/*サムネ画像*/
#top #outline .movie figure {
	display: block;
}
#top #outline .movie figure img {
	width: 100%;
	height: auto;
	transition-duration: 600ms;
	transition-property: all;
	transition-timing-function: cubic-bezier(.42,0,0,.99);
	transition-delay: 0ms;
	transform-origin: center;
}

/*飾り*/
#top #outline .movie .object span {
	position: absolute;
	top: 0;
	left: 50%;
	display: block;
	width: 12px;
	height: 158px;
}
#top #outline .movie .object span:nth-of-type(1) {
	background-image: url(../images/movie_frame_l.png);
	margin: 0 0 0 -160px;
}
#top #outline .movie .object span:nth-of-type(2) {
	background-image: url(../images/movie_frame_r.png);
	margin: 0 0 0 160px;
}



/*
ストーリーテキスト
*/
#top #outline .detail {}

/*見出し*/
#top #outline .detail h3 {
	background: linear-gradient(90deg, #eed0e4, #95c1ff), #95c1ff;
	background: -webkit-linear-gradient(0deg, #eed0e4, #95c1ff), #95c1ff;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	margin: 0 0 40px 0;
	font-size: 36px;
	font-family: "din-2014", sans-serif;
	font-weight: 600;
	font-style: normal;
	letter-spacing: 0.065em;
}

/*本文*/
#top #outline .detail .caption {
	width: 85%;
	margin: 0 auto;
	text-align: center;
}
#top #outline .detail .caption p {
	color: #4d637f;
	margin: 0 0 1.7em 0;
	font-size: 13px;
	line-height: 2em;
	letter-spacing: 0.065em;
}
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
トップページ：ゲーム概要_end
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/



/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
トップページ：ニュース_start
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
#top #news {
	position: relative;
	background: linear-gradient(90deg, #000d0f, #11052a), #02001a;
}



/*
リスト
*/
#top #news .top_news_list {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	flex-wrap: wrap;
	width: 320px;
	margin: 0 auto;
}
#top #news .top_news_list li {
	width: 320px;
	margin: 0 0 30px 0;
}
#top #news .top_news_list li a {
	color: #768ca9;
	text-decoration: none;
}

/*サムネイル*/
#top #news .top_news_list figure {
	width: 320px;
	height: 180px;
	overflow: hidden;
	clip-path: polygon(4% 0, 95% 0, 100% 8%, 100% 93%, 96% 100%, 4% 100%, 0% 93%, 0% 8%);
}
#top #news .top_news_list figure img {
	width: 100%;
}

/*メタ情報*/
#top #news .top_news_list .meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 15px auto 10px auto;
}
#top #news .top_news_list .meta p {
	color: #a0cbd9;
	font-size: 10px;
	font-family: "din-2014", sans-serif;
	font-weight: 600;
	font-style: normal;
	letter-spacing: 0em;
}

/*タイトル要素*/
#top #news .top_news_list h3 {
	min-height: 100px;
	font-size: 14px;
	text-align: left;
	letter-spacing: 0.01em;
	line-height: 1.6em;
	word-break: break-word;
}



/*
全部見る
*/
#top #news .more {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	width: 320px;
	margin: 20px auto 40px auto;
}
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
トップページ：ニュース_end
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/



/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
トップページ：キャラクター_start
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
#top #heroes {
	z-index: 1;
	position: relative;
	background-color: #0a0a0b;
	background-image: url(../images/hero_top_bg.png);
	background-position: bottom center;
	background-repeat: repeat-x;
	background-size: 840px auto;
	height: 620px;
	padding: 0 0 325px 0;
}



/*
概要
*/
#top #heroes .detail {
	z-index: 2;
	position: relative;
	width: 85%;
	margin: 0 auto;
}
#top #heroes .detail .caption {
	margin: 0 0 60px 0;
}
#top #heroes .detail p {
	color: #4d637f;
	margin: 0 0 1.7em 0;
	font-size: 14px;
	line-height: 2em;
	letter-spacing: 0.065em;
	text-align: left;
	word-break: break-word;
}



/*
キャラクター画像
*/
#top #heroes .vis {
	z-index: 1;
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 1360px;
	overflow: hidden;
}

#top #heroes .vis p {
	display: block;
	position: absolute;
	left: 50%;
}
#top #heroes .vis p img {
	width: 100%;
}

#top #heroes .vis p.level_1 {
	bottom: 85px;
	width: 130px;
	height: 300px;
	margin: 0 0 0 -231px;
}
#top #heroes .vis p.level_2 {
	bottom: -85px;
	width: 206px;
	height: 550px;
	margin: 0 0 0 -140px;
}
#top #heroes .vis p.level_3 {
	bottom: -15px;
	width: 299px;
	height: 685px;
	margin: 0 0 0 -10px;
}
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
トップページ：キャラクター_end
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/



/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
トップページ：マップ_start
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
#top #map {
	z-index: 2;
	position: relative;
	background: linear-gradient(90deg, #00264a, #002942), #00264a;
	color: #768ca9;
	min-height: 700px;
}



/*
概要
*/
#top #map .detail {
	z-index: 2;
	position: relative;
	width: 85%;
	margin: 0 auto;
}
#top #map .detail .caption {
	margin: 0 0 60px 0;
}
#top #map .detail p {
	color: #97a8be;
	margin: 0 0 1.7em 0;
	font-size: 14px;
	line-height: 2em;
	letter-spacing: 0.065em;
	text-align: left;
	word-break: break-word;
}



/*
ビジュアル要素
*/
#top #map .vis {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

#top #map .vis span {
	position: absolute;
	display: block;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100% auto;
}

#top #map .vis span:nth-of-type(1) {
	bottom: 60px;
	right: 0;
	background-image: url(../images/map_vis.png);
	width: 820px;
	height: 435px;
}
#top #map .vis span:nth-of-type(2) {
	top: -50px;
	left: -50px;
	background-image: url(../images/map_bg.png);
	width: 500px;
	height: 533px;
}
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
トップページ：マップ_end
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/



/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
トップページ：アーセナル_start
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
#top #arsenal {
	position: relative;
	background: linear-gradient(180deg, #080909, #570042), #080909;
	color: #768ca9;
	min-height: 670px;
}



/*
概要
*/
#top #arsenal .detail {
	z-index: 2;
	position: relative;
	width: 85%;
	margin: 0 auto;
}
#top #arsenal .detail .caption {
	margin: 0 0 60px 0;
}
#top #arsenal .detail p {
	color: #4d637f;
	margin: 0 0 1.7em 0;
	font-size: 14px;
	line-height: 2em;
	letter-spacing: 0.065em;
	text-align: left;
	word-break: break-word;
}




/*
アーセナル画像
*/
#top #arsenal .vis {
	position: relative;
	width: 100%;
	height: 309px;
	overflow: hidden;
}

.scroll-parent {
	overflow: hidden;
	position: relative;
	width: 3080px;
	height: inherit;
}

.scroll_child {
	display: flex;
	align-items: center;
	justify-content: space-around;
	position: absolute;
	left: 0%;
	top: 0%;
	width: inherit;
	height: inherit;
	animation-duration: 120000ms;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}
.scroll_child:nth-child(1) {
	animation-name: first;
}
.scroll_child:nth-child(2) {
	animation-name: second;
}
@keyframes first {
	from {
		left: 0%;
	}
	to {
		left: -100%;
	}
}
@keyframes second {
	from {
		left: 100%;
	}
	to {
		left: 0%;
	}
}

#top #arsenal .vis ul.scroll_child li {
	display: flex;
	align-items: center;
	justify-content: center;
	background-image: url(../images/arsenal_boxframe.png);
	background-size: 100% auto;
	background-repeat: no-repeat;
	background-position: center center;
	width: 280px;
	height: 155px;
	margin: 0 30px;
}
#top #arsenal .vis ul.scroll_child li img {
	display: block;
	width: 240px;
	height: auto;
}
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
トップページ：アーセナル_end
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/





/*――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――

下層共通

――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――*/
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
header
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
/*
背景
*/
#sub #grandheader {
	height: 200px;
	background: linear-gradient(90deg, #e6ce9a, #5a69a3, #62acd6);
    background: -webkit-linear-gradient(0deg, #e6ce9a, #5a69a3, #62acd6);
}



/*
プラットフォーム
*/
#sub #grandheader > .platform {
	position: absolute;
	top: 80px;
	left: 50%;
	margin: 0 0 0 -160px;
	width: 320px;
}
#sub #grandheader > .platform ul {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 320px;
	height: 20px;
}
#sub #grandheader > .platform ul li {
	margin: 0 10px;
}
#sub #grandheader > .platform ul li img {
	width: 72px;
}
#sub #grandheader > .platform ul li.meta img {
	margin-bottom: 2px;
}
#sub #grandheader > .platform ul li.steam img {
	margin-top: 2px;
}
#sub #grandheader > .platform ul li.playstation img {
	width: 90px;
}
#sub #grandheader > .platform ul li.pico img {
	width: 60px;
}



/*
ページタイトル
*/
#sub .grandwrapper section > .title {
	position: relative;
	width: 320px;
	min-height: 30px;
	margin: 0 auto 30px auto;
}
#sub .grandwrapper section > .title::after {
	content: "";
	display: block;
	position: absolute;
	top: -12px;
	right: -15px;
	width: 26px;
	height: 26px;
	background-image: url(../svg/common_slash.svg);
	background-position: 0px center;
	background-size: 100% auto;
	background-repeat:no-repeat;
}
#sub .grandwrapper section > .title h1 {
	position: absolute;
	top: -15px;
	padding: 0 0 0 35px;
	font-size: 34px;
	font-family: "din-2014", sans-serif;
	font-weight: 400;
	font-style: normal;
}
#sub .grandwrapper section > .title h1::before {
	content: "";
	display: block;
	position: absolute;
	top: 1px;
	left: -10px;
	width: 30px;
	height: 30px;
	background-image: url(../svg/pagetitle_slash.svg);
	background-position: 0px center;
	background-size: 1;
	background-repeat:no-repeat;
}



/*
ページ説明
*/
#sub .content_text {
	margin: 0 auto 100px auto;
	width: 300px;
}
#sub .content_text p {
	margin: 0 auto;
	width: 100%;
	font-family: "FOT-ニューロダン Pro B";
	font-family: "NewRodinPro-B";
	font-size: 13px;
	line-height: 2em;
	line-break: strict;
	text-align: left;
}
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
header_end
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/



/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
ヒーロー一覧共通
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
#sub.heroes .heroes_list {
	width: 100%;
	overflow: hidden;
}

#sub.heroes .heroes_list > ul {
	position: relative;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	width: 320px;
	margin: 0 auto 80px auto;
}

#sub.heroes .heroes_list > ul li {
	margin: 0 0 36px 0;
	clip-path: polygon(2% 0, 98% 0, 100% 3%, 100% 97%, 98% 100%, 2% 100%, 0 97%, 0 3%);
}

#sub.heroes .heroes_list > ul li a {
	text-decoration: none;
}

#sub.heroes .heroes_list > ul li a figure {
	margin: 0 0 2px 0;
	background-color: #3d425d;
	text-align: center;
	overflow: hidden;
}

#sub.heroes .heroes_list > ul li a:hover figure {
	background-color: #1f2854;
}

#sub.heroes .heroes_list > ul li a figure img {
	width: 100%;
	height: auto;
}


#sub.heroes .heroes_list > ul li a .profile {
	position: relative;
	background-color: #1c2038;
}

#sub.heroes .heroes_list > ul li a .profile .type {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	background: linear-gradient(90deg, #e6ce9a, #5a69a3, #62acd6);
    background: -webkit-linear-gradient(0deg, #e6ce9a, #5a69a3, #62acd6);
	text-shadow: 0 0 4px rgba(0,0,0,0.85);
}

#sub.heroes .heroes_list > ul li a .profile .name {
	text-align: center;
}


/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
ヒーロー一覧共通_end
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/



/*――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――

MAP

――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――*/
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
MAP_start
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
/*背景色*/
#map {
	padding: 0 0 40px 0;
	background-color: #0a0a0b;
}


/*マップ一覧*/

#sub.map .map_list ul {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	width: 320px;
	margin: 0 auto 80px auto;
}

#sub.map .map_list ul li {
	width: 150px;
	margin: 0 0 20px 0;
}

#sub.map .map_list ul li a {
	text-decoration: none;
}

#sub.map .map_list ul li figure img {
	display: block;
	margin: 0 0 10px 0;
	width: 150px;
	height: 85px;
	clip-path: polygon(4% 0, 96% 0, 100% 6%, 100% 94%, 96% 100%, 4% 100%, 0 94%, 0 6%);
}

#sub.map .map_list ul li figure figcaption p {
	font-family: "din-2014", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 16px;
	letter-spacing: 0.1em;
	width: 100%;
	text-align: center;
	color: #00ccff;
	margin: auto;
}



/*マップアイテム*/

.map_item {
	margin: 0 0 100px 0;
}

.map_item .map_item_bgcolor {
	width: 100%;
	background-image: linear-gradient(130deg, #0e0715, #171718, #081519);
    background-image: -webkit-linear-gradient(130deg, #0e0715, #171718, #081519);
}

.map_item .map_item_bg {
	margin: 0 auto;
    padding: 0 0 40px 0;
	width: 100%;
	height: auto;
	background-repeat: no-repeat;
	background-position: center center;
    background-size: auto 100%;
}

.map_item .detail {
	display: block;
	margin: 0 auto 50px auto;
	padding: 58px 0 0 0;
	width: 320px;
}

.map_item .detail h2 {
	position: relative;
	display: block;
	background: linear-gradient(90deg, #d571c1, #95c1ff);
	background: -webkit-linear-gradient(0deg, #d571c1, #95c1ff);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-family: "din-2014", sans-serif;
	font-weight: 600;
	font-style: normal;
	font-size: 55px;
	margin: 0 0 20px 0;
}

.map_item .detail p.map_x {
	margin: 0 0 60px 0;
	font-family: "NewRodinPro-B";
	font-family: "FOT-ニューロダン Pro B";
	font-size: 14px;
}

.map_item .detail .map_text {
    margin: 0 0 30px 0;
	padding: 0 0 30px 0;
	width: 100%;
	background-image: url(../svg/common_slash.svg);
	background-size: auto 30px;
	background-repeat: no-repeat;
	background-position: left bottom;
}

.map_item .detail .map_text p {
	font-size: 13px;
	line-height: 2em;
	margin: 0 0 20px 0;
	font-family: "NewRodinPro-B";
	font-family: "FOT-ニューロダン Pro B";
	line-break: strict;
	text-align: left;
}

.map_item .detail figure {
	box-sizing: border-box;
	padding: 15px 0 0 0;
	width: 320px;
	height: 320px;
	background-image: url(../images/map/item_bg.png);
	background-repeat: no-repeat;
	background-position: center center;
    background-size: 100% auto;
	text-align: center;
}

.map_item .detail figure img {
	width: 290px;
	height: auto;
}

.map_item ul.map_ss {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	width: 320px;
	margin: -50px auto 0 auto;
}

.map_item > ul.map_ss li {
	width: 150px;
	margin: 0 0 10px 0;
}

.map_item ul.map_ss li img {
	display: block;
	width: 150px;
	height: 86px;
	clip-path: polygon(4% 0, 96% 0, 100% 6%, 100% 94%, 96% 100%, 4% 100%, 0 94%, 0 6%);
}

.map_item ul.map_ss li a {
	position: relative;
	display: block;
}

.map_item ul.map_ss li a span {
	position: absolute;
	z-index: 1;
	top: 10px;
	right: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 19px;
	height: 19px;
	background: linear-gradient(45deg, #0fb2d4, #00f6ff);
}

.map_item ul.map_ss li a span img {
	width: 11px;
	height: auto;
}





/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
MAP_end
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/




/*――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――

HEROES

――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――*/
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
HEROES_トップ_start
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

/*背景*/
#heroes {
	position: relative;
	padding: 0 0 40px 0;
	background-color: #000000;
}


/*
ヒーロー一覧
*/

#sub.heroes #heroes .heroes_list > ul li {
	width: 320px;
}

#sub.heroes #heroes .heroes_list > ul li a figure {
	height: 135px;
}

#sub.heroes #heroes .heroes_list > ul li a .profile {
	height: 135px;
}

#sub.heroes #heroes .heroes_list > ul li a .profile .type {
	top: -16px;
	left: 50%;
	margin: 0 0 0 -130px;
	width: 260px;
	height: 30px;
	font-size: 12px;
}

#sub.heroes #heroes .heroes_list > ul li a .profile .name {
	padding: 35px 0 16px 0;
	font-size: 24px;
}

#sub.heroes #heroes .heroes_list > ul li a .profile .ability {
    margin: 0 auto;
    width: 300px;
	text-align: center;
	font-size: 12px;
    line-height: 2em;
}

/*
アニメーション
*/
#sub.heroes #heroes .heroes_list > ul li,
#sub.heroes #heroes .heroes_list > ul li a figure img,
#sub.heroes #heroes .heroes_list > ul li a .profile p {
	opacity: 0;
	transition-duration: 600ms;
	transition-delay: 0ms;
	transition-property: all;
	transition-timing-function: cubic-bezier(.42,0,0,.99);
	transform-origin: center;
}

/*サムネイル*/
#sub.heroes #heroes .heroes_list > ul li.wp_t_c a figure img {
	transform: translateX(400px);
}
#sub.heroes #heroes .heroes_list > ul li.wp_t_d a figure img {
	transform: translateX(-400px);
}
#sub.heroes #heroes .heroes_list > ul li.wp_t_c_active a figure img,
#sub.heroes #heroes .heroes_list > ul li.wp_t_d_active a figure img {
	opacity: 1;
	transform: translateX(0px);
}

/*二つ名*/
#sub.heroes #heroes .heroes_list > ul li.wp_t_c a .profile p.type {
	transform: translateX(-200px);
	transition-delay: 300ms;
}
#sub.heroes #heroes .heroes_list > ul li.wp_t_d a .profile p.type {
	transform: translateX(200px);
	transition-delay: 300ms;
}
#sub.heroes #heroes .heroes_list > ul li.wp_t_c_active a .profile p.type,
#sub.heroes #heroes .heroes_list > ul li.wp_t_d_active a .profile p.type {
	opacity: 1;
	transform: translateX(0px);
}

/*名前*/
#sub.heroes #heroes .heroes_list > ul li a .profile .name {
	transform: translateY(-30px);
	transition-delay: 600ms;
}
#sub.heroes #heroes .heroes_list > ul li.wp_t_c_active a .profile .name,
#sub.heroes #heroes .heroes_list > ul li.wp_t_d_active a .profile .name {
	opacity: 1;
	transform: translateY(0px);
}

/*名前*/
#sub.heroes #heroes .heroes_list > ul li a .profile .ability {
	transform: translateY(30px);
	transition-delay: 600ms;
}
#sub.heroes #heroes .heroes_list > ul li.wp_t_c_active a .profile .ability,
#sub.heroes #heroes .heroes_list > ul li.wp_t_d_active a .profile .ability {
	opacity: 1;
	transform: translateY(0px);
}

/*
#test {
	animation-timing-function: cubic-bezier(.42,0,0,.99);
	animation-direction: normal;
	animation-fill-mode: forwards;
	animation-play-state: running;
	animation-iteration-count: inherit;
}
#test.active {
	animation-name: anime_wp_t_a;
}
@keyframes anime_wp_t_a {
	0% {
		opacity: 0;
		transform: translateY(20px);
	}
	100%{
		opacity: 1;
		transform: translateY(0px);
	}
}
*/
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
HEROES_トップ_end
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/



/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
HEROES_詳細_start
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
/*背景*/
#heroes_detail {
	position: relative;
	padding: 0 0 40px 0;
	background: linear-gradient(130deg, #0e0715, #171718, #081519);
    background: -webkit-linear-gradient(130deg, #0e0715, #171718, #081519);
}


/*
背景オブジェクト系
*/
/*プロフィール全体をまたぐグラデーション*/
#sub.heroes #heroes_detail .object_sp {}

#sub.heroes #heroes_detail .object_sp .linergradation_1 {
    display: block;
    position: absolute;
    top: 20px;
    left: 0;
    width: 100%;
    height: 93%;
    background: linear-gradient(130deg, #062534, #15335f, #0b485b);
}





/*
ページタイトル
*/
#sub #heroes_detail > .title {
	z-index: 10;
	position: relative;
	width: 320px;
	height: 30px;
	margin: 0 auto 20px auto;
}
#sub #heroes_detail > .title::after {
	content: "";
	display: block;
	position: absolute;
	top: -12px;
	right: -15px;
	width: 26px;
	height: 26px;
	background-image: url(../svg/common_slash.svg);
	background-position: 0px center;
	background-size: 100% auto;
	background-repeat:no-repeat;
}
#sub #heroes_detail > .title h1 {
	position: absolute;
	top: -22px;
	padding: 0 0 0 0;
	font-size: 40px;
	font-family: "NewRodinPro-B";
	font-family: "FOT-ニューロダン Pro B";
    font-family: "FOT-ニューロダン Pro";
    font-weight: 600;
}
#sub #heroes_detail > .title h1::before {
	display: none;
}



/*
プロフィール
*/
#sub.heroes #heroes_detail > .profile {
	z-index: 20;
	position: relative;
	margin: 0 auto 60px auto;
	box-sizing: border-box;
	width: 320px;
}


/*プロフィール詳細*/
#sub.heroes #heroes_detail > .profile .detail {
	z-index: 3;
	position: relative;
}
#sub.heroes #heroes_detail > .profile .name {
	position: relative;
	margin: 0 0 25px 0;
	font-size: 28px;
}

#sub.heroes #heroes_detail > .profile .name span {
	position: absolute;
	padding: 0 18px 0 0;
	top: -24px;
	left: 0;
	font-size: 11px;
	font-family: "din-2014", sans-serif;
	font-weight: 400;
	font-style: normal;
	background-image: url(../svg/common_icon_arrow_l.svg);
	background-position: right center;
	background-repeat: no-repeat;
	background-size: auto 80%;
}

#sub.heroes #heroes_detail > .profile .type {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 0 40px 0;
	height: 24px;
	background: linear-gradient(45deg, #0fb2d4, #00f6ff);
	font-size: 13px;
}

/*プロフィール詳細：ストーリーテキスト*/
#sub.heroes #heroes_detail > .profile .profile_text {
	width: 100%;
}
#sub.heroes #heroes_detail > .profile .profile_text > div {
    margin: 0 0 20px 0;
	display: grid;
	grid-template-rows: 0fr;
	transition-duration: 600ms;
	transition-property: all;
	transition-timing-function: cubic-bezier(.42,0,0,.99);
	transition-delay: 0ms;
	transform-origin: center;
}
#sub.heroes #heroes_detail > .profile .profile_text.open > div {
	grid-template-rows: 1fr;
}
#sub.heroes #heroes_detail > .profile .profile_text > div > div {
	overflow: hidden;
}
#sub.heroes #heroes_detail > .profile .profile_text p {
	margin: 0 0 1em 0;
	font-size: 13px;
	line-height: 1.8em;
	line-break: strict;
    text-align: left;
    word-break: break-word;
    hyphens: manual;
}

/*プロフィール詳細：ストーリーテキスト：トグルボタン*/
#sub.heroes #heroes_detail > .profile .readall {
	position: relative;
	margin: 0 0 80px 0;
	width: 100%;
	text-align: right;
	z-index: 1;
	grid-template-rows: 0fr;
	transition-duration: 600ms;
	transition-property: all;
	transition-timing-function: cubic-bezier(.42,0,0,.99);
	transition-delay: 0ms;
	transform-origin: left;
}
#sub.heroes #heroes_detail > .profile .profile_text.open .readall {
	opacity: 0;
	pointer-events: none;
}
#sub.heroes #heroes_detail > .profile .readall span {
    position: relative;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    font-size: 12px;
    cursor: pointer;
}
#sub.heroes #heroes_detail > .profile .readall span::before {
    content: "";
    display: block;
    background-image: url(../images/heroes/readall.png);
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center center;
    width: 15px;
    height: 12px;
    margin: 0 10px 0 0;
    transform: rotateZ(90deg);
}



/*キャラクター画像*/
#sub.heroes #heroes_detail > .profile figure {
	z-index: 1;
	display: block;
	width: 100%;
    text-align: center;
    margin: 0 0 60px 0;
    
}

#sub.heroes #heroes_detail > .profile figure img {
	height: 500px;
}



/*
アビリティ
*/
#sub.heroes #heroes_detail > .ability {
	z-index: 30;
	position: relative;
}

#sub.heroes #heroes_detail > .ability .abilty_list {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 0 auto;
	width: 320px;
}

#sub.heroes #heroes_detail > .ability .abilty_item {
	display: grid;
	grid-template-rows: 20px 38px 1fr;
	grid-template-columns: 70px 1fr;
	box-sizing: border-box;
	margin: -30px 0 50px 0;
	padding: 20px;
	width: 320px;
	background: linear-gradient(130deg,#0f487d, #233e69, #1a163b);
	clip-path: polygon(3% 0, 97% 0, 100% 3%, 100% 97%, 97% 100%, 3% 100%, 0% 97%, 0% 3%);
}

#sub.heroes #heroes_detail > .ability .abilty_item.heroitem {
	background: linear-gradient(130deg,#14384f, #1f54b5, #151d62);
}

#sub.heroes #heroes_detail > .ability .abilty_item span {
	grid-row: 1 / 3;
    grid-column: 1 / 2;
}
#sub.heroes #heroes_detail > .ability .abilty_item p {
	grid-row: 1 / 2;
    grid-column: 2 / 3;
	padding: 6px 0 0 0;
	font-size: 10px;
	line-break: strict;
    text-align: left;
    word-break: break-word;
    hyphens: manual;
}
#sub.heroes #heroes_detail > .ability .abilty_item h2 {
	grid-row: 2 / 3;
    grid-column: 2 / 3;
	font-size: 21px;
    display: flex;
    align-items: center;
}

#sub.heroes #heroes_detail > .ability .abilty_item figure {
	grid-row: 3 / 4;
    grid-column: 1 / 3;
	padding: 10px 0 0 0;
}

#sub.heroes #heroes_detail > .ability .abilty_item figure img {
    width: 100%;
}

#sub.heroes #heroes_detail > .ability .abilty_item figure figcaption {
	width: 100%;
	margin: 10px 0 0 0;
	font-size: 12px;
	line-height: 1.6em;
}

#sub.heroes #heroes_detail > .ability .abilty_item figure figcaption::-webkit-scrollbar {
	width: 8px;
}

#sub.heroes #heroes_detail > .ability .abilty_item figure figcaption::-webkit-scrollbar-track {
	background-color: rgba(0,0,0,0.3);
}

#sub.heroes #heroes_detail > .ability .abilty_item figure figcaption::-webkit-scrollbar-thumb {
	background-color: rgba(0,0,0,0.9);
}

/*アビリティ：アニメーション*/
#sub.heroes #heroes_detail > .ability .abilty_item.wp_t_c,
#sub.heroes #heroes_detail > .ability .abilty_item.wp_t_d {
	opacity: 0;
	transition-duration: 600ms;
	transition-delay: 0ms;
	transition-property: all;
	transition-timing-function: cubic-bezier(.42,0,0,.99);
	transform-origin: center;
}
#sub.heroes #heroes_detail > .ability .abilty_list .abilty_item.wp_t_c_active {
	animation-name: abiliy_wp_t_c;
}
@keyframes abiliy_wp_t_c {
	0% {
		opacity: 0;
		transform: translateX(-10px);
	}
	100%{
		opacity: 1;
		transform: translateX(0px);
	}
}
#sub.heroes #heroes_detail > .ability .abilty_list .abilty_item.wp_t_d_active {
	animation-name: abiliy_wp_t_d;
}
@keyframes abiliy_wp_t_d {
	0% {
		opacity: 0;
		transform: translateX(10px);
	}
	100%{
		opacity: 1;
		transform: translateX(0px);
	}
}



/*
ヒーロー一覧
*/
#heroes_detail .heroes_list {
	z-index: 40;
	position: relative;
	margin: 0 auto;
	padding: 100px 0 0 0;
	width: 320px;
}

#heroes_detail .heroes_list h2 {
	position: relative;
	margin: 0 0 50px 0;
	padding: 0 0 0 90px;
	font-size: 20px;
    font-family: "din-2014", sans-serif;
	font-weight: 400;
	font-style: normal;
}

#heroes_detail .heroes_list h2::before {
	content: "";
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	background-image: url(../images/common_title_slash.png);
	width: 86px;
	height: 71px;
}

#sub.heroes #heroes_detail .heroes_list > ul {
	margin: 0 auto 80px auto;
}

#sub.heroes #heroes_detail .heroes_list > ul li {
	width: 320px;
}

/*空白*/
#sub.heroes #heroes_detail .heroes_list > ul li.blank {
	display: flex;
	align-items: center;
	justify-content: center;
	clip-path: polygon(2% 0, 98% 0, 100% 3%, 100% 97%, 98% 100%, 2% 100%, 0 97%, 0 3%);
	background-color: #3d425d;
    height: 190px;
}
/*空白*/

#sub.heroes #heroes_detail .heroes_list > ul li a figure {
	height: 134px;
}

#heroes_detail .heroes_list > ul li a .profile {
	height: 60px;
}

#heroes_detail .heroes_list > ul li a .profile .type {
    top: -11px;
    left: 50%;
    margin: 0 0 0 -110px;
    width: 220px;
    height: 20px;
    font-size: 11px;
}

#heroes_detail .heroes_list > ul li a .profile .name {
	padding: 25px 0 16px 0;
	font-size: 20px;
}


/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
HEROES_詳細_end
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/



/*――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――

NEWS

――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――*/
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
NEWS_トップ_start
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

/*背景*/
#news {
	padding: 0 0 80px 0;
	background: linear-gradient(130deg, #0e0715, #171718, #081519);
    background: -webkit-linear-gradient(130deg, #0e0715, #171718, #081519);
}


/*ニュース一覧*/

#sub.news .news_list > ul {
	position: relative;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	width: 320px;
	margin: 50px auto 40px auto;
}

#sub.news .news_list > ul li {
	width: 100%;
	margin: 0 0 50px 0;
}


#sub.news .news_list > ul li:nth-of-type(1) > a figure img, #sub.news .news_list > ul li:nth-of-type(2) > a figure img {
	width: 100%;
	height: auto;
}

#sub.news .news_list > ul li a figure {
	margin: 0 0 20px 0;
	width: 320px;
	height: 179px;
	clip-path: polygon(2% 0, 98% 0, 100% 3%, 100% 97%, 98% 100%, 2% 100%, 0 97%, 0 3%);
}

#sub.news .news_list > ul li a figure img {
	width: 100%;
	height: auto;
}

#sub.news .news_list > ul li a {
	text-decoration: none;
}

#sub.news .news_list > ul li a .meta {
	display: flex;
	justify-content: space-between;
	margin: 0 0 20px 0;
	color: #a0cbd9;
	font-size: 12px;
	font-family: "din-2014", sans-serif;
	font-weight: 600;
	font-style: normal;
}

#sub.news .news_list > ul li:nth-of-type(1) > a h3, #sub.news .news_list > ul li:nth-of-type(2) > a h3 {
	font-size: 14px;
}

#sub.news .news_list > ul li a h3 {
	font-size: 12px;
	line-break: strict;
	overflow: hidden;
	display: -webkit-box;
	line-height: 1.6em;
	word-break: break-word;
}



/*ページネーション*/

#sub.news ul.page_list {
	display: flex;
	justify-content: center;
	align-items: center;
    flex-wrap: wrap;
	margin: 0 auto 40px auto;
	width: 320px;
	font-family: "din-2014", sans-serif;
	font-weight: 400;
	font-style: normal;
}

#sub.news .page_list li {
	font-size: 14px;
    margin: 0 0 10px 0;
}

#sub.news .page_list li a {
	display: block;
    padding: 0 2px;
	width: 40px;
	text-decoration: none;
}

#sub.news .page_list li.active a {
	color: #02ebf8;
}

#sub.news .page_list li.prev {
	margin-right: auto;
}

#sub.news .page_list li.prev a {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	width: 100%;
	height: 40px;
	padding-left: 25px;
	background-image: url(../svg/pagelist_arrow_prev.svg);
	background-position: left center;
	background-size: auto 100%;
	font-size: 14px;
}

#sub.news .page_list li.next {
	margin-left: auto;
}

#sub.news .page_list li.next a {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	width: 100%;
	height: 40px;
	padding-right: 25px;
	background-image: url(../svg/pagelist_arrow_next.svg);
	background-position: right center;
	background-size: auto 100%;
	font-size: 14px;
}


/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
NEWS_トップ_end
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
NEWS_詳細_start
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
#sub.news .news_detail {
	position: relative;
	margin: 0 auto;
	padding: 180px 0 100px 0;
	width: 320px;
}



/*
サムネイル
*/
#sub.news .news_detail > figure {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: -30px;
	width: 320px;
	height: 180px;
	clip-path: polygon(2% 0, 98% 0, 100% 4%, 100% 96%, 98% 100%, 2% 100%, 0 96%, 0 4%);
}

#sub.news .news_detail > figure img {
	width: 100%;
	height: auto;
}



/*
メタ情報
*/
#sub.news .news_detail > .meta {
	display: flex;
	justify-content: space-between;
	margin: 0 0 30px 0;
	color: #a0cbd9;
	font-size: 12px;
	font-family: "din-2014", sans-serif;
	font-weight: 600;
	font-style: normal;
}

#sub.news .news_detail > .meta > .date {
	display: inline-block;
	position: relative;
}

#sub.news .news_detail > .meta > .date::after {
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	right: -70px;
	width: 56px;
	height: 1px;
	background-color: #a0cbd9;
}

#sub.news .news_detail > .meta > .category {
	position: relative;
}

#sub.news .news_detail > .meta > .category::before {
	content: "";
	display: block;
	position: absolute;
	top: 2px;
	left: -16px;
	width: 56px;
	height: 10px;
	background-image: url(../svg/category_arrow_blue.svg);
	background-repeat: no-repeat;
}




/*
大見出し
*/
#sub.news .news_detail > .newstitle {
	margin: 0 0 50px 0;
}

#sub.news .news_detail > .newstitle > h3 {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	width: 100%;
	padding-left: 60px;
	background-image: url(../svg/detail_title_slash.svg);
	background-position: left 10px;
	background-size: auto 40px;
	font-size: 18px;
	line-height: 1.6em;
	text-align: left;
}



/*
基本段落
*/
#sub.news .news_detail .post p {
	font-size: 13px;
	line-height: 1.8em;
	letter-spacing: 0.065em;
	margin: 0 0 40px 0;
	text-align: left;
	word-break: break-word;
}



/*
リスト要素
*/
#sub.news .news_detail .post ul {
	padding: 0 0 20px 30px;
}

#sub.news .news_detail .post ul li {
	margin: 0 0 20px 0;
	padding: 0 0 0 20px;
	font-size: 13px;
	line-height: 1.8em;
	background-image: url(../svg/common_icon_arrow_l.svg);
	background-position: left 3px;
	background-size: auto 14px;
	background-repeat: no-repeat;
}



/*
画像
*/
#sub.news .news_detail .post img {
	display: block;
	margin: 0 auto 40px auto;
    width: 100%;
}


/*
見出し要素
*/
#sub.news .news_detail .post h1,
#sub.news .news_detail .post h2,
#sub.news .news_detail .post h3,
#sub.news .news_detail .post h4,
#sub.news .news_detail .post h5 {
	position: relative;
	margin: 30px 0 20px 0;
	padding: 0 0 0 40px;
	color: #a0cbd9;
	line-height: 1.6em;
	letter-spacing: 0.065em;
	word-break: break-word;
}
#sub.news .news_detail .post h2 {
	font-size: 25px;
}
#sub.news .news_detail .post h2 {
	font-size: 22px;
}
#sub.news .news_detail .post h3 {
	font-size: 20px;
}
#sub.news .news_detail .post h4 {
	font-size: 18px;
}
#sub.news .news_detail .post h5 {
	font-size: 16px;
}

/*装飾*/
#sub.news .news_detail .post h1::before,
#sub.news .news_detail .post h2::before,
#sub.news .news_detail .post h3::before,
#sub.news .news_detail .post h4::before,
#sub.news .news_detail .post h5::before {
	content: "";
	display: block;
	position: absolute;
	top: 45%;
	left: 0px;
	width: 15px;
	height: 3px;
	background-color: #00ccff;
}



/*
埋め込み
*/
#sub.news .news_detail iframe {
	display: flex;
	justify-content: center;
	width: 90%;
	margin: 100px auto;
}



/*
ページネーション
*/
#sub.news .news_back {
	position: relative;
	margin: 0 auto 50px auto;
	width: 320px;
}

#sub.news .news_back li {
	display: flex;
	justify-content: center;
	margin: 30px 0;
}
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
NEWS_詳細_end
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/









/*――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――

ARSENAL

――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――*/
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
ARSENAL基本ブロック_start
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
/*
アーセナルボックス
*/
.arsenalbox {
	background-image: linear-gradient(120deg, #0e0715, #171718, #081519);
	border-top: 1px #5b5562 solid;
	border-bottom: 1px #5b5562 solid;
	margin: 0 0 200px 0;
	transition-duration: 600ms;
	transition-property: all;
	transition-timing-function: cubic-bezier(.42,0,0,.99);
	transition-delay: 0ms;
	transform-origin: center;
}
.arsenalbox .contentswrapper {
	position: relative;
}



/*
武器カテゴリ見出し
*/
.arsenalbox .title {
	position: relative;
	width: 320px;
	margin: 0 auto;
}

.arsenalbox .title h3 {
	position: absolute;
	top: -30px;
	left: 0;
	display: inline-block;
	background: linear-gradient(90deg, #eed0e4, #d571c1, #95c1ff);
	background: -webkit-linear-gradient(0deg, #eed0e4, #d571c1, #95c1ff);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-size: 60px;
	font-family: "din-2014", sans-serif;
	font-weight: 600;
	font-style: normal;
	letter-spacing: 0.026em;
}

.arsenalbox .title p {
	position: absolute;
	top: -50px;
	right: 0;
	display: inline-block;
	font-size: 10px;
	font-family: "din-2014", sans-serif;
	font-weight: 300;
	font-style: normal;
	letter-spacing: 0.026em;
	text-align: right;
}



/*
武器リスト
*/
.arsenalbox .itemwrapper {
	padding: 70px 0;
}

.arsenalbox#mahineguns .itemwrapper {
	padding: 130px 0 70px;
}

/*武器カテゴリ説明文*/
.arsenalbox .itemwrapper .read {
	width: 320px;
	margin: 0 auto 50px auto;
	font-size: 13px;
	line-height: 1.8em;
	letter-spacing: 0.065em;
}



/*
3Dビューワー
*/
.arsenalbox .itemwrapper .itemviewer {
	display: grid;
	grid-template-rows: 0fr;
	background-image: linear-gradient(120deg, #0b485b, #14315c, #062534);
	margin: 0 0 30px 0;
	transition-duration: 600ms;
	transition-property: all;
	transition-timing-function: cubic-bezier(.42,0,0,.99);
	transition-delay: 0ms;
	transform-origin: center;
}
.arsenalbox .itemwrapper .itemviewer.active {
	grid-template-rows: 1fr;
}
.arsenalbox .itemwrapper .itemviewer .current {
	width: 100%;
	margin: 0 auto ;
	overflow: hidden;
}
.arsenalbox .itemwrapper .itemviewer .current > div {
	width: 320px;
	margin: 0 auto;
	padding: 50px 0;
}

/*model-veiwer 周りのcss START*/
.arsenalbox .itemwrapper .itemviewer model-viewer {
	width: 320px;
	height: 455px;
}

.arsenalbox .itemwrapper .itemviewer model-viewer .model-poster {
	width: 320px;
	height: 455px;
	display: flex;
	align-items: center;
	text-align: center;
	justify-content: center;
	color: white;
	background-color: #0a0a0b;
}

.arsenalbox .itemwrapper .itemviewer model-viewer .model-poster p {
	font-size: 30px;
	margin: 0;
}

.arsenalbox .itemwrapper .itemviewer model-viewer .model-loader {
  height: 2px;
  width: 100px;
	margin: 20px auto 0 auto;
  --c:no-repeat linear-gradient(#00f6ff 0 0);
  background: var(--c),var(--c),#0fb2d4;
  background-size: 60% 100%;
  animation: model-loader-anime 3s infinite;
}

@keyframes model-loader-anime {
  0%   {background-position:-150% 0,-150% 0}
  66%  {background-position: 250% 0,-150% 0}
  100% {background-position: 250% 0, 250% 0}
}
/*model-veiwer 周りのcss END*/

/*アイテム名*/
.arsenalbox .itemwrapper .itemviewer .current > div > h4 {
	font-size: 30px;
	font-family: "din-2014", sans-serif;
	font-weight: 300;
	font-style: normal;
	line-height: 1em;
	letter-spacing: 0.026em;
}

/*アイテム表記パンくず*/
.arsenalbox .itemwrapper .itemviewer .current > div > ul {
	display: flex;
	align-items: center;
	margin: 30px 0;
}
.arsenalbox .itemwrapper .itemviewer .current > div > ul li {
	background-image: url(../images/obj_triangle_l_w.png);
	background-repeat: no-repeat;
	background-position: right center;
	background-size: auto 10px;
	margin: 0 25px 0 0;
	padding: 0 25px 0 0;
	font-size: 10px;
}
.arsenalbox .itemwrapper .itemviewer .current > div > ul li:last-child {
	background-image: none;
	margin: 0;
	padding: 0;
}

/*描写領域*/
.arsenalbox .itemwrapper .itemviewer .current .modelobjects {
	background-image: url(../images/obj_target_tl.png), url(../images/obj_target_tr.png), url(../images/obj_target_bl.png), url(../images/obj_target_br.png);
	background-position: top left, top right, bottom left, bottom right;
	background-repeat: no-repeat;
	background-size: 10px auto;
	width: 320px;
	height: 455px;
	margin: 30px auto;
}

/*描写領域*/
.arsenalbox .itemwrapper .itemviewer .current .caption {
	font-size: 14px;
	line-height: 1.8em;
	letter-spacing: 0.065em;
}



/*
サムネ
*/
.arsenalbox .itemwrapper .list {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	width: 320px;
	margin: 0 auto;
}
.arsenalbox .itemwrapper .list li {
	width: 150px;
	margin: 0 0 20px;
	cursor: pointer;
}

/*サムネ画像*/
.arsenalbox .itemwrapper .list li figure {
	position: relative;
	background-image: url(../images/obj_target_tl.png), url(../images/obj_target_tr.png), url(../images/obj_target_bl.png), url(../images/obj_target_br.png);
	background-position: top left, top right, bottom left, bottom right;
	background-repeat: no-repeat;
	background-size: 10px auto;
	width: 150px;
	height: 101px;
}
.arsenalbox .itemwrapper .list li figure img {
	width: 100%;
	height: auto;
}
.arsenalbox .itemwrapper .list li figure::after {
	content: "";
	display: block;
	z-index: -1;
	position: absolute;
	top: 10px;
	left: 10px;
	width: 130px;
	height: 81px;
}
.arsenalbox .itemwrapper .list li.active figure::after {
	background-color: #02ebf8;
}

/*アイテム名*/
.arsenalbox .itemwrapper .list li h5 {
	box-sizing: border-box;
	background: linear-gradient(45deg, #0fb2d4, #00f6ff);
	margin: 10px 0;
	padding: 10px 15px;
	font-size: 13px;
	text-align: center;
	color: #ffffff;
	text-shadow: 0 0 10px rgba(255, 255, 255, 0.75);
}

/*サブキャプション*/
.arsenalbox .itemwrapper .list li > div {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.arsenalbox .itemwrapper .list li > div span {
	opacity: 0.5;
	font-size: 8px;
	letter-spacing: 0;
}
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
ARSENAL基本ブロック_end
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/









/*――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――

LEADERBOARD

――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――*/
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
LEADERBOARD基本ブロック_start
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
/*
タイトルセクション
*/
.lb_section_title {
	/*
	display: flex;
	justify-content: space-between;
	align-items: center;
	*/
	width: 320px;
	margin: 0 auto 30px auto;
}


/*
見出し
*/
.lb_section_title h2 {
	position: relative;
	background: linear-gradient(90deg, #eed0e4, #d571c1, #95c1ff);
	background: -webkit-linear-gradient(0deg, #eed0e4, #d571c1, #95c1ff);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	padding: 0 0 0 30px;
	font-size: 32px;
	font-family: "din-2014", sans-serif;
	font-weight: 500;
	font-style: normal;
	line-height: 1em;
	letter-spacing: 0.026em;
	border-left: 5px #eed0e4 solid;
}
.lb_section_title h2 em {
	font-style: normal;
}
.lb_section_title h2::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 10px;
	margin: -4px 0 0 0;
	display: block;
	background-image: url(../images/obj_triangle_l_w.png);
	background-size: 100% auto;
	width: 8px;
	height: 11px;
}


/*
検索・シーズン切り替え機能
*/
.lb_function {
	/*
	display: flex;
	justify-content: space-between;
	align-items: center;
	*/
	width: 240px;
	margin: 20px 0 0 auto;
}

/*リセット*/
.lb_function input,
.lb_function select {
	box-sizing: border-box;
	appearance: none;
	background: none;
	border: none;
	border-radius: 0;
	font-size: 14px;
	color: #000000;
	outline: none;
}
.lb_function select::-ms-expand {
	display: none;
}
.lb_function input:focus,
.lb_function select:focus {
	outline: none;
}

/*検索*/
.lb_playersearch input {
	background-image: url(../images/form_input_bg_type_a.png);
	background-size: auto 100%;
	background-repeat: no-repeat;
	background-position: center left;
	color: #00f6ff;
	width: 240px;
	height: 45px;
	padding: 0 20px;
	line-height: 1em;
	cursor: pointer;
}
.lb_playersearch input:focus {
	background-image: url(../images/form_input_bg_type_a_focus.png);
}

/*シーズン切り替え*/
.lb_seasonchange select {
	background-image: url(../images/form_select_bg_type_a.png), url(../images/obj_triangle_b_w.png);
	background-size: auto 100%, auto 11px;
	background-repeat: no-repeat;
	background-position: center left, 20px center;
	color: #00f6ff;
	width: 190px;
	height: 45px;
	margin: 10px 0 0 50px;
	padding: 0 20px 0 20px;
	text-align: right;
}



/*
サムネイル START
*/

/* サムネの画像 START */
.lb_section_currentrank figure.lb_current_thumb {
	width: 320px;
	margin: 40px auto;
	clip-path: polygon(2% 0, 98% 0, 100% 5%, 100% 95%, 98% 100%, 2% 100%, 0% 95%, 0% 6%);
}
.lb_section_currentrank figure.lb_current_thumb img {
	width: 320px;
}
.lb_section_currentrank figure.lb_current_thumb.hide {
	display: none;
}
/* サムネの画像 END */


/* ローディングしている時のサムネ START */
.lb_section_currentrank .lb_thumb {
	display: flex;
	justify-content: center;
  align-items: center;
}

.lb_section_currentrank .lb_loading_thumb {
	width: 320px;
	margin: 0 auto;
	padding: 50px 0;
	align-items: center;
	justify-content: center;
}

.lb_section_currentrank .lb_loading_thumb p {
	font-size: 30px;
	text-align: center;
	margin: 0;
}

.lb_section_currentrank .lb_loading_thumb .thumb_loading {
  height: 2px;
  width: 100px;
	margin: 20px auto 0 auto;
  --c:no-repeat linear-gradient(#00f6ff 0 0);
  background: var(--c),var(--c),#0fb2d4;
  background-size: 60% 100%;
  animation: thumb_loading_anime 3s infinite;
}

@keyframes thumb_loading_anime {
  0%   {background-position:-150% 0,-150% 0}
  66%  {background-position: 250% 0,-150% 0}
  100% {background-position: 250% 0, 250% 0}
}

.lb_section_currentrank .lb_loading_thumb.hide {
	display: none;
}
/* ローディングしている時のサムネ END */


/* 失敗時 START */
.lb_section_currentrank .lb_loading_fail {
	padding: 50px 0;
	font-size: 20px;
	text-align: center;
}

.lb_section_currentrank .lb_loading_fail p {
	margin: 20px;
}

.lb_section_currentrank .lb_loading_fail.hide {
	display: none;
}
/* 失敗時 END */


/*
サムネイル END
*/

/*
ページネーション
*/
.lb_current_pagenation_section {}
.lb_current_pagenation_section ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	width: 320px;
	margin: 30px auto;
}
.lb_current_pagenation_section ul li {
	box-sizing: border-box;
	width: 100px;
	margin: 0 0 10px;
	padding: 10px 0;
	font-size: 12px;
	line-height: 1em;
	text-align: center;
	border: 1px #768ca9 solid;
	cursor: pointer;
	transition-duration: 600ms;
	transition-property: all;
	transition-timing-function: cubic-bezier(.42,0,0,.99);
	transition-delay: 0ms;
	transform-origin: center;
}
.lb_current_pagenation_section ul li:hover,
.lb_current_pagenation_section ul li.active {
	background: linear-gradient(45deg, #0fb2d4, #00f6ff);
	color: #ffffff;
	border: 1px #00f6ff solid;
}



/*
ランキングリスト
*/
.lb_current_ranking.hide {
	display: none;
}

.lb_current_ranking table {
	width: 320px;
	margin: 0 auto 200px auto;
	border-collapse: separate;
	border-spacing: 2px;
}

/*共通*/
.lb_current_ranking table th,
.lb_current_ranking table td {
	box-sizing: border-box;
	color: #98bdfc;
	padding: 15px 20px;
	font-size: 14px;
	line-height: 1.8em;
}

/*thead*/
.lb_current_ranking table thead th {
	background-color: #01dafb;
	color: #000000;
}

/*tbody*/
.lb_current_ranking table tbody th {
	background-color: #444444;
	width: 10%;
}
.lb_current_ranking table tbody td {
	background-color: #242424;
}

/*ホバー*/
.lb_current_ranking table tbody td:hover {
	background-color: #2b2b2b;
}
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
LEADERBOARD基本ブロック_end
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/





/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
コンテンツ_start
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
コンテンツ_end
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/