@charset "UTF-8";





/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
RESET_start
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
*{
	margin: 0;
	padding: 0;
	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;
}

figure img {
	width: 100%;
}

a{
	outline: none;
	text-decoration: none;
}

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











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


汎用


――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――*/
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
汎用：全体用_start
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
html {
	font-size: 62.5%;
}




body {
	background-color: #101530;
	color: #ffffff;
	font-size: 1.6em;
	font-family: "M PLUS Rounded 1c", sans-serif;
	font-weight: 800;
	font-style: normal;
}




#grandwrapper {
	width: 100%;
	overflow: hidden;
}




/*
汎用アニメーション
*/
/*一括指定*/
.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-width: 0 !important;
	min-height: 0 !important;
	max-width: 0 !important;
	max-height: 0 !important;
	/*
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	*/
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
}
.emptyflexbox::before,
.emptyflexbox::after {
	display: none !important;
}




/*
汎用アニメーション
*/
/*拡大フェードアウト*/
@keyframes common_anime_blink {
	0% {
		opacity: 1;
		transform: scale(1);
	}
	100%{
		opacity: 0;
		transform: scale(1.5);
	}
}


/*無限回転*/
@keyframes common_anime_rotate {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}


/*右バウンス*/
@keyframes common_anime_bounce_left {
	0% {
		transform: translateX(0);
	}
	50% {
		transform: translateX(-10px);
	}
	100% {
		transform: translateX(0);
	}
}


/*左バウンス*/
@keyframes common_anime_bounce_right {
	0% {
		transform: translateX(0);
	}
	50% {
		transform: translateX(10px);
	}
	100% {
		transform: translateX(0);
	}
}


/*拡縮*/
@keyframes common_anime_beat {
	0% {
		transform: scale(1);
	}
	25% {
		transform: scale(0.8);
	}
	50% {
		transform: scale(1);
	}
	100%{
		transform: scale(0.8);
	}
}


/*ふわふわ*/
@keyframes common_anime_floating {
	0% {
		transform: translateY(-3%);
	}
	100%{
		transform: translateY(3%);
	}
}




/*
アコーディオン設定
*/
/*初期表示コンテンツ*/
.fnc_accordion .detail {}


/*トリガー*/
.fnc_accordion .viewall {
	cursor: pointer;
}


/*初期非表示*/
.fnc_accordion .opencontents {
	display: grid;
	grid-template-rows: 0fr;
	transition-duration: 1000ms;
	transition-property: all;
	transition-timing-function: cubic-bezier(.42,0,0,.99);
	transition-delay: 0ms;
	transform-origin: bottom;
}

/*表示時状態用設定*/
.fnc_accordion .opencontents.jqa_open {
	grid-template-rows: 1fr;
}

/*非表示用設定*/
.fnc_accordion .opencontents > div {
	overflow: hidden;
}
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
汎用：全体用_end
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/











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


ローディング


――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――*/
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
ローディング：汎用_start
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
#loading {
	z-index: 999;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #101530;
	transition-duration: 800ms;
	transition-property: all;
	transition-timing-function: cubic-bezier(.42,0,0,.99);
	transition-delay: 0ms;
	transform-origin: right;
}




/*
SVG格納要素指定
*/
#loading section {
	opacity: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -200px 0 0 -150px;
	display: flex;
	align-items: center;
	width: 300px;
	height: 400px;
	transition-duration: 600ms;
	transition-property: all;
	transition-timing-function: cubic-bezier(.42,0,0,.99);
	transition-delay: 0ms;
	transform-origin: center;
}

#loading section > div {
	width: 100%;
	height: 100%;
	animation-duration: 3000ms;
	animation-delay: 0;
	animation-timing-function: ease-in-out;
	animation-direction: normal;
	animation-fill-mode: forwards;
	animation-play-state: running;
	animation-iteration-count: infinite;
}


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


/*ローディング*/
#loading section > div svg polygon,
#loading section > div svg path,
#loading section > div svg rect {
	fill: #ffffff;
}




/*
ロード中演出
*/
#loading.start section {
	opacity: 1;
	transform: scale(1);
}

#loading.start section > div {
	animation-name: common_anime_startloading_fast;
}

@keyframes common_anime_startloading_fast {
	0% {
		opacity: 1;
	}
	25% {
		opacity: 0.1;
	}
	50%{
		opacity: 1;
	}
	75% {
		opacity: 0.1;
	}
	100%{
		opacity: 1;
	}
}




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




#loading.destroy {
	transform: scaleX(0);
	pointer-events: none;
}
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
ローディング：汎用_end
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/











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


コーディング用


――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――*/
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
コンテンツ：コンテンツ_start
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
/*
body::after {
	z-index: -1;
	opacity: 0.2;
	content: "";
	display: block;
	position: absolute;
	top: -690px;
	left: 0;
	background-image: url(../../作業用.png);
	background-position: top center;
	background-size: 1680px auto;
	background-repeat: no-repeat;
	width: 100%;
	height: 20000px;
}
*/
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
コンテンツ：コンテンツ_end
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/











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


キービジュアル


――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――*/
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
キービジュアル：汎用_start
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
#vis {
	position: relative;
	width: 100%;
	height: 50vh;
	min-height: 1200px;
	margin: 0 0 140px 0;
	overflow: hidden;
}




/*
開発
*/
#vis .developer {
	z-index: 5;
	position: absolute;
	top: 30px;
	left: 30px;
	width: 100%;
	filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.5));
}

#vis .developer ul {
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

#vis .developer ul li {
	margin: 0 20px 0 0;
}

#vis .developer li figure {
	height: 20px;
}

#vis .developer li figure img {
	width: auto;
	height: 100%;
}




/*
プラットフォーム
*/
#vis .platform {
	z-index: 5;
	position: absolute;
	top: 30px;
	right: 30px;
	width: 100%;
	filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.5));
}

#vis .platform ul {
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

#vis .platform ul li {
	margin: 0 0 0 20px;
}

#vis .platform li figure {
	height: 20px;
}

#vis .platform li figure img {
	width: auto;
	height: 100%;
}




/*
タイトルロゴ
*/
#vis .logo {
	z-index: 4;
	position: absolute;
	top: 90px;
	right: 50px;
	width: 419px;
	height: 351px;
}

#vis .logo h1 {
	background-image: url(../images/logo_gametitle_jp.png);
	background-size: 100% auto;
	background-position: center;
	background-repeat: no-repeat;
	width: 100%;
	height: 100%;
	text-indent: -9999px;
}
.en #vis .logo h1 {
	background-image: url(../images/logo_gametitle_en.png);
}




/*
キャラクター
*/
#vis .chara {
	z-index: 2;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

#vis .chara figure {
	position: absolute;
	left: 50%;
	height: auto;
}

#vis .chara figure:nth-of-type(1) {
	z-index: 4;
	top: 287px;
	margin: 0 0 0 min(-30vw, -300px);
	width: 40vw;
	max-width: 620px;
	aspect-ratio: 20 / 26;
}

#vis .chara figure:nth-of-type(2) {
	z-index: 3;
	top: 560px;
	margin: 0 0 0 min(-50vw, -450px);
	width: 30vw;
	max-width: 500px;
	aspect-ratio: 20 / 17;
}

#vis .chara figure:nth-of-type(3) {
	z-index: 2;
	top: 450px;
	margin: 0 0 0 min(20vw, 30px);
	width: 11vw;
	max-width: 210px;
	aspect-ratio: 20 / 20;
}

#vis .chara figure:nth-of-type(4) {
	z-index: 1;
	top: 90px;
	margin: 0 0 0 min(-16vw, -170px);
	width: 17vw;
	max-width: 340px;
	aspect-ratio: 20 / 17;
}




/*
キャッチコピー
*/
#vis .chatch {
	z-index: 3;
	box-sizing: border-box;
	display: flex;
	justify-content: flex-end;
	position: absolute;
	top: 420px;
	left: 0;
	width: 100%;
	padding: 0 100px 0 0;
}

#vis .chatch h2 {
	background-image: url(../images/vis_chatch_jp.png);
	background-size: auto 100%;
	background-position: center;
	background-repeat: no-repeat;
	width: 30vw;
	height: auto;
	max-height: 750px;
	aspect-ratio: 10 / 17;
	text-indent: -9999px;
}




/*
背景処理
*/
#vis .bg {
	z-index: 1;
	position: absolute;
	top: 0;
	left: 0;
	background-image: url(../images/vis_bg.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: top center;
	width: 100%;
	height: 50vh;
	min-height: 1200px;
	clip-path: polygon(0 0, 100% 0%, 100% 60%, 0% 100%);
}
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
キービジュアル：汎用_end
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/





/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
キービジュアル：アニメーション_start
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
#vis .developer,
#vis .platform,
#vis .logo,
#vis .chara figure:nth-of-type(1) img,
#vis .chara figure:nth-of-type(2) img,
#vis .chara figure:nth-of-type(3) img,
#vis .chara figure:nth-of-type(4) img,
#vis .chatch {
	opacity: 0;
	transition-duration: 600ms;
	transition-property: all;
	transition-timing-function: cubic-bezier(.42,0,0,.99);
	transition-delay: 0ms;
	transform-origin: center;
}




/*
キャラクター
*/
/*事前処理*/
#vis .chara figure:nth-of-type(1) img {
	transition-duration: 1200ms;
	transform: translate(-100px,-300px);
}
#vis .chara figure:nth-of-type(2) img {
	transition-duration: 1200ms;
	transform: translate(100px,-300px);
}
#vis .chara figure:nth-of-type(3) img {
	transition-duration: 1200ms;
	transform: translate(400px,100px);
}
#vis .chara figure:nth-of-type(4) img {
	transition-duration: 1200ms;
	transform: translate(-400px,-100px);
}


/*表示*/
#vis.active .chara figure:nth-of-type(1) img,
#vis.active .chara figure:nth-of-type(2) img,
#vis.active .chara figure:nth-of-type(3) img,
#vis.active .chara figure:nth-of-type(4) img {
	opacity: 1;
	transform: translate(0px,0px);
}


/*ふわふわ*/
#vis .chara figure {
	animation-name: common_anime_floating;
	animation-duration: 3000ms;
	animation-delay: 0;
	animation-timing-function: ease-in-out;
	animation-direction: alternate-reverse;
	animation-fill-mode: forwards;
	animation-play-state: running;
	animation-iteration-count: infinite;
}




/*
ロゴ
*/
/*事前処理*/
#vis .logo {
	animation-name: vis_logo_flash;
	animation-duration: 600ms;
	animation-delay: 400ms;
	animation-timing-function: ease-in-out;
	animation-direction: normal;
	animation-fill-mode: forwards;
	animation-play-state: paused;
	animation-iteration-count: 1;
}


/*表示*/
#vis.active .logo {
	animation-play-state: running;
}

@keyframes vis_logo_flash {
	0% {
		opacity: 0;
		filter: brightness(1);
	}
	20% {
		opacity: 1;
		filter: brightness(2.5);
		transform: scale(1.3);
	}
	50% {
		opacity: 1;
		filter: brightness(2.5);
		transform: scale(0.8);
	}
	70% {
		opacity: 1;
		filter: brightness(1);
		transform: scale(1.1);
	}
	100%{
		opacity: 1;
		filter: brightness(1);
		transform: scale(1);
	}
}




/*
キャッチ
*/
/*事前処理*/
#vis .chatch {
	transition-delay: 1200ms;
}


/*表示*/
#vis.active .chatch {
	opacity: 1;
}




/*
開発・プラットフォーム
*/
/*事前処理*/
#vis .developer,
#vis .platform {
	transition-delay: 1200ms;
	transform: translateY(-100px);
}


/*表示*/
#vis.active .developer,
#vis.active .platform {
	opacity: 1;
	transform: translateY(0px);
}
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
キービジュアル：アニメーション_end
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/











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


SASUKE VRとは？


――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――*/
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
SASUKE VRとは？：汎用_start
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
#aboutus {
	position: relative;
	width: 100%;
	margin: 0 0 210px 0;
}




/*
概要
*/
#aboutus .detail {
	position: relative;
	width: 90%;
	max-width: 1000px;
	margin: 0 auto 160px auto;
}


/*見出し*/
#aboutus .detail h2 {
	position: relative;
	background-image: url(../images/aboutus_title.png);
	background-size: 100% auto;
	background-repeat: no-repeat;
	background-position: center;
	width: 56vw;
	max-width: 530px;
	height: auto;
	margin: 0 0 65px 0;
	text-indent: -9999px;
	aspect-ratio: 25/3;
}
.en #aboutus .detail h2 {
	background-image: url(../images/aboutus_title_en.png);
}

#aboutus .detail h2 span {
	position: absolute;
	top: 50%;
	left: -100px;
	display: block;
	background-image: url(../svg/icon_syuriken_w.svg);
	background-size: 100% auto;
	background-repeat: no-repeat;
	background-position: center;
	width: 78px;
	height: 78px;
	margin: -40px 0 0 0;
}


/*本文*/
#aboutus .detail .readtext {
	width: 50vw;
}
.en #aboutus .detail .readtext {
	width: 40vw;
	max-width: 600px;
}

#aboutus .detail .readtext p {
	margin: 0 0 1em 0;
	font-size: 20px;
	letter-spacing: 0.065em;
	line-height: 2.1em;
}


/*アートワーク*/
#aboutus .detail .art {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

#aboutus .detail .art figure {
	z-index: 2;
	position: absolute;
	top: 0;
	left: 50%;
	margin: min(12vw, 40px) 0 0 min(18vw, 230px);
	width: 40vw;
	max-width: 430px;
}

#aboutus .detail .art span {
	z-index: 1;
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: max(-1vw, -40px) 0 0 min(18vw, 160px);
	width: 40vw;
	max-width: 470px;
	background-image: url(../svg/common_bgobj_munyo_1.svg);
	background-size: 100% auto;
	background-repeat: no-repeat;
	background-position: center;
	aspect-ratio: 20 / 17;
}
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
SASUKE VRとは？：汎用_end
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/






/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
SASUKE VRとは？：動画_start
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
/*
基本レイアウト
*/
#aboutus .movie {
	background-image: url(../svg/movie_title.svg);
	background-size: 100% auto;
	background-position: center;
	background-repeat: no-repeat;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 65vh;
}


/*サムネイル*/
#aboutus .movie .embeded {
	z-index: 2;
	position: relative;
	width: 70vw;
	max-width: 1000px;
}

#aboutus .movie .embeded a {
	position: relative;
	display: block;
	border: 20px #ffffff solid;
	border-radius: 40px;
	overflow: hidden;
}

#aboutus .movie .embeded a::before {
	z-index: 1;
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	background-color: rgba(0, 0, 0, 0.75);
	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;
}
#aboutus .movie .embeded a:hover:before {
	opacity: 0.5;
}

#aboutus .movie .embeded a::after {
	z-index: 2;
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	opacity: 0.8;
	background-image: url(../svg/icon_movieplay.svg);
	background-size: 100% auto;
	background-position: center;
	background-repeat: no-repeat;
	width: 200px;
	margin: -100px 0 0 -100px;
	aspect-ratio: 1/1;
	/*アニメーション用*/
	animation-name: common_anime_beat;
	transform-origin: center;
	animation-duration: 600ms;
	animation-delay: 0;
	animation-timing-function: linear;
	animation-direction: normal;
	animation-fill-mode: forwards;
	animation-iteration-count: infinite;
	animation-play-state: paused;
}
#aboutus .movie .embeded a:hover:after {
	animation-play-state: running;
}

#aboutus .movie .embeded figure {
	display: flex;
	align-items: center;
	justify-content: center;
}

#aboutus .movie .embeded figure img {
	width: 100%;
}


/*装飾*/
#aboutus .movie .obj {
	z-index: 1;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 65vh;
}

#aboutus .movie .obj .monyo span {
	display: block;
	background-size: 100% auto;
	background-position: center;
	background-repeat: no-repeat;
	position: absolute;
	top: 50%;
	left: 50%;
}

#aboutus .movie .obj .monyo span:nth-of-type(1) {
	background-image: url(../svg/common_bgobj_munyo_blue.svg);
	width: 620px;
	height: 590px;
	margin: -390px 0 0 -220px;
}
#aboutus .movie .obj .monyo span:nth-of-type(2) {
	background-image: url(../svg/common_bgobj_munyo_green.svg);
	width: 457px;
	height: 330px;
	margin: 70px 0 0 260px;
}
#aboutus .movie .obj .monyo span:nth-of-type(3) {
	background-image: url(../svg/common_bgobj_munyo_orange.svg);
	width: 387px;
	height: 268px;
	margin: -350px 0 0 -650px;
}
#aboutus .movie .obj .monyo span:nth-of-type(4) {
	background-image: url(../svg/common_bgobj_munyo_pink.svg);
	width: 270px;
	height: 233px;
	margin: 180px 0 0 -480px;
}
#aboutus .movie .obj .monyo span:nth-of-type(5) {
	background-image: url(../svg/icon_syuriken_set_w.svg);
	width: 1411px;
	height: 775px;
	margin: -400px 0 0 -720px;
}
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
SASUKE VRとは？：動画_end
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/





/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
SASUKE VRとは？：アニメーション_start
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
/*
背景むにょ
*/
/*事前処理*/
#aboutus .art {
	opacity: 0;
	transition-duration: 1200ms;
	transition-property: all;
	transition-timing-function: cubic-bezier(.42,0,0,.99);
	transition-delay: 0ms;
	transform-origin: center;
	transform: translate(200px,100px);
}


/*表示*/
#aboutus .art.active {
	opacity: 1;
	transform: translate(0px,0px);
}




/*
キャラクター
*/
/*事前処理*/
#aboutus .art img {
	opacity: 0;
	transition-duration: 800ms;
	transition-property: all;
	transition-timing-function: cubic-bezier(.42,0,0,.99);
	transition-delay: 0ms;
	transform-origin: center;
	transform: rotate(180deg);
}
#aboutus .art figure {
	animation-name: common_anime_floating;
	animation-duration: 3000ms;
	animation-delay: 0;
	animation-timing-function: ease-in-out;
	animation-direction: alternate-reverse;
	animation-fill-mode: forwards;
	animation-play-state: running;
	animation-iteration-count: infinite;
}


/*表示*/
#aboutus .art.active img {
	opacity: 1;
	transform: rotate(0deg)
}
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
SASUKE VRとは？：アニメーション_end
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/





/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
SASUKE VRとは？：動画：アニメーション_start
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
/*
共通
*/
#aboutus .movie,
#aboutus .movie .embeded,
#aboutus .movie .obj .monyo span:nth-of-type(1),
#aboutus .movie .obj .monyo span:nth-of-type(2),
#aboutus .movie .obj .monyo span:nth-of-type(3),
#aboutus .movie .obj .monyo span:nth-of-type(4),
#aboutus .movie .obj .monyo span:nth-of-type(5) {
	opacity: 0;
	transition-duration: 600ms;
	transition-property: all;
	transition-timing-function: cubic-bezier(.42,0,0,.99);
	transition-delay: 0ms;
	transform-origin: center;
}




/*
パネル全体
*/
/*事前処理*/
#aboutus .movie {
	animation-name: movie_bounce;
	animation-duration: 600ms;
	animation-delay: 0ms;
	animation-timing-function: ease-in-out;
	animation-direction: normal;
	animation-fill-mode: forwards;
	animation-play-state: paused;
	animation-iteration-count: 1;
}


/*表示*/
#aboutus .movie.active {
	animation-play-state: running;
}

@keyframes movie_bounce {
	0% {
		opacity: 0;
		transform: scale(0.5);
	}
	20% {
		opacity: 1;
		transform: scale(1.3);
	}
	100%{
		opacity: 1;
		transform: scale(1);
	}
}




/*
再生サムネイル
*/
/*事前処理*/
#aboutus .movie .embeded {
	animation-name: movie_bounce;
	animation-duration: 1200ms;
	animation-delay: 400ms;
	animation-timing-function: ease-in-out;
	animation-direction: normal;
	animation-fill-mode: forwards;
	animation-play-state: paused;
	animation-iteration-count: 1;
}


/*表示*/
#aboutus .movie.active .embeded {
	animation-play-state: running;
}




/*
飾り
*/
/*事前処理*/
#aboutus .movie .obj .monyo span:nth-of-type(1) {
	transition-duration: 1000ms;
	transition-delay: 400ms;
	transform: scale(0.5) translate(0, 200px);
}
#aboutus .movie .obj .monyo span:nth-of-type(2) {
	transition-duration: 1000ms;
	transition-delay: 600ms;
	transform: scale(0.5) translate(-100px, -100px);
}
#aboutus .movie .obj .monyo span:nth-of-type(3) {
	transition-duration: 1000ms;
	transition-delay: 400ms;
	transform: scale(0.5) translate(100px, 100px);
}
#aboutus .movie .obj .monyo span:nth-of-type(4) {
	transition-duration: 1000ms;
	transition-delay: 600ms;
	transform: scale(0.5) translate(100px, -100px);
}
#aboutus .movie .obj .monyo span:nth-of-type(5) {
	transition-duration: 1000ms;
	transition-delay: 400ms;
	transform: scale(0.2);
}


/*表示*/
#aboutus .movie.active .obj .monyo span:nth-of-type(1),
#aboutus .movie.active .obj .monyo span:nth-of-type(2),
#aboutus .movie.active .obj .monyo span:nth-of-type(3),
#aboutus .movie.active .obj .monyo span:nth-of-type(4),
#aboutus .movie.active .obj .monyo span:nth-of-type(5) {
	opacity: 1;
	transform: scale(1) translate(0, 0);
}
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
SASUKE VRとは？：動画：アニメーション_end
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/











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


最新情報


――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――*/
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
最新情報：汎用_start
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
#news {
	position: relative;
	display: flex;
	align-items: flex-start;
	justify-content: flex-end;
	width: 90%;
	max-width: 1000px;
	margin: 0 auto 260px auto;
	min-height: 460px;
}




/*
タイトル
*/
#news .title {
	position: absolute;
	top: 0;
	left: 0;
	background-image: url(../images/news_title.png);
	background-size: 100% auto;
	background-position: center;
	background-repeat: no-repeat;
	width: 258px;
	height: 340px;
	text-indent: -9999px;
}
.en #news .title {
	background-image: url(../images/news_title_en.png);
	background-size: auto 100%;
}




/*
ニュースリスト
*/
#news .newslist {
	width: 70%;
	padding: 140px 0 0 0;
}

#news .newslist ul li {
	margin: 0 0 40px 0;
}


/*リスト調整*/
#news .newslist ul li a {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	color: #ffffff;
	transition-duration: 1000ms;
	transition-property: all;
	transition-timing-function: cubic-bezier(.42,0,0,.99);
	transition-delay: 0ms;
	transform-origin: center;
}
#news .newslist ul li a:hover {
	color: #2fc6f2;
}

#news .newslist ul li:last-child {
	margin: 0;
}


/*サムネイル*/
#news .newslist ul li figure {
	width: 55%;
	max-width: 380px;
	border-radius: 20px;
	overflow: hidden;
}

#news .newslist ul li figure img {
	transition-duration: 600ms;
	transition-property: all;
	transition-timing-function: cubic-bezier(.42,0,0,.99);
	transition-delay: 0ms;
	transform-origin: center;
	transform: scale(1);
}
#news .newslist ul li a:hover figure img {
	transform: scale(1.1);
}


/*詳細情報*/
#news .newslist ul li .detail {
	flex: 1;
	margin: 0 20px 0 0;
}

#news .newslist ul li .detail .meta {
	color: #616ca5;
	margin: 0 0 15px 0;
}

#news .newslist ul li .detail h4 {
	line-height: 1.8em;
}




/*
タイトル
*/
#news .viewall {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 25%;
	text-align: right;
}

#news .viewall a {
	display: block;
	background-color: #ffffff;
	background-image: url(../svg/arrow_skyblue_l.svg);
	background-size: 14px auto;
	background-position: 30px center;
	background-repeat: no-repeat;
	color: #101530;
	padding: 1em;
	border-radius: 100px;
}
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
最新情報：汎用_end
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/











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


遊び方


――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――*/
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
遊び方：汎用_start
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
#gameplay {
	background-color: #e4e6f3;
	color: #323e7b;
	margin: 0 0 150px 0;
	padding: 0px 0 100px 0;
}




/*
タイトル
*/
#gameplay .title {
	position: relative;
	top: max(-4.5vw,-70px);
	background-image: url(../images/gameplay_title.png);
	background-size: 100% auto;
	background-position: center;
	background-repeat: no-repeat;
	width: 90%;
	max-width: 1000px;
	margin: 0 auto 50px auto;
	text-indent: -9999px;
	aspect-ratio: 20/4;
}
.en #gameplay .title {
	background-image: url(../images/gameplay_title_en.png);
}
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
遊び方：汎用_end
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/





/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
遊び方：コアアクション_start
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
/*
基本レイアウト
*/
#gameplay .coreaction {
}




/*
サブタイトル
*/
#gameplay .coreaction h3 {
	background-image: url(../images/gameplay_coreaction_subtitle.png);
	background-size: 100% auto;
	background-position: center;
	background-repeat: no-repeat;
	width: 510px;
	height: 193px;
	margin: 0 auto 80px auto;
	text-indent: -9999px;
}
.en #gameplay .coreaction h3 {
	background-image: url(../images/gameplay_coreaction_subtitle_en.png);
	width: 380px;
	height: 233px;
}




/*
リードテキスト
*/
#gameplay .coreaction .readtext {
	margin: 0 0 80px 0;
	text-align: center;
}

#gameplay .coreaction .readtext p {
	font-size: 20px;
	letter-spacing: 0.065em;
	line-height: 1.8em;
}

#gameplay .coreaction .readtext p em {
	color: #e50012;
	font-style: normal;
}




/*
アクションリスト
*/
#gameplay .coreaction .actionlist {
	margin: 0 0 60px 0;
}

#gameplay .coreaction .actionlist li {
	display: flex;
	align-items: center;
	justify-content: center;
	background-size: 1300px auto;
	background-position: center;
	background-repeat: no-repeat;
	min-height: 479px;
}

#gameplay .coreaction .actionlist li:nth-child(even) {
	background-image: url(../images/gameplay_coreaction_base_1.png);
}

#gameplay .coreaction .actionlist li:nth-child(odd) {
	background-image: url(../images/gameplay_coreaction_base_2.png);
}

#gameplay .coreaction .actionlist li > div {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 90%;
	max-width: 900px;
	margin: 0 auto 0 auto;
}

#gameplay .coreaction .actionlist li:nth-child(odd) div {
	flex-direction: row-reverse;
}


/*画像セクション*/
#gameplay .coreaction .actionlist li > div figure {
	position: relative;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	width: 50vw;
	max-width: 500px;
	box-shadow: 0 0 30px rgba(50, 62, 123, 0.5);
	border: 10px #ffffff solid;
	border-radius: 30px;
}
#gameplay .coreaction .actionlist li > div figure {
	margin: 0 50px 0 0;
}
#gameplay .coreaction .actionlist li:nth-child(odd) > div figure {
	margin: 0 0 0 50px;
}

#gameplay .coreaction .actionlist li > div figure img {
	border-radius: 20px;
}

#gameplay .coreaction .actionlist li > div figure figcaption {
	position: absolute;
	display: block;
	background-size: 100% auto;
	background-position: center;
	background-repeat: no-repeat;
	text-indent: -9999px;
}
#gameplay .coreaction .actionlist li:nth-child(odd) > div figure figcaption {
	top: -60px;
	right: -60px;
}
#gameplay .coreaction .actionlist li:nth-child(even) > div figure figcaption {
	top: -60px;
	left: -60px;
}

#gameplay .coreaction .actionlist li:nth-of-type(1) > div figure figcaption {
	background-image: url(../images/gameplay_coreaction_tip_run.png);
	width: 171px;
	height: 94px;
}
.en #gameplay .coreaction .actionlist li:nth-of-type(1) > div figure figcaption {
	background-image: url(../images/gameplay_coreaction_tip_run_en.png);
}
#gameplay .coreaction .actionlist li:nth-of-type(2) > div figure figcaption {
	background-image: url(../images/gameplay_coreaction_tip_fry.png);
	width: 207px;
	height: 119px;
}
.en #gameplay .coreaction .actionlist li:nth-of-type(2) > div figure figcaption {
	background-image: url(../images/gameplay_coreaction_tip_fry_en.png);
}
#gameplay .coreaction .actionlist li:nth-of-type(3) > div figure figcaption {
	background-image: url(../images/gameplay_coreaction_tip_grap.png);
	width: 205px;
	height: 119px;
}
.en #gameplay .coreaction .actionlist li:nth-of-type(3) > div figure figcaption {
	background-image: url(../images/gameplay_coreaction_tip_grap_en.png);
}


/*本文セクション*/
#gameplay .coreaction .actionlist li > div .detail {
	flex: 1;
}

#gameplay .coreaction .actionlist li > div .detail p {
	font-size: 20px;
	line-height: 1.8em;
}




/*
エンドテキスト
*/
#gameplay .coreaction .endtext {
	margin: 0 0 120px 0;
	font-size: 25px;
	text-align: center;
}
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
遊び方：コアアクション_end
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/





/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
遊び方：ムーブインタラクション_start
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
/*
基本レイアウト
*/
#gameplay .move {
	margin: 0 0 100px 0;
}




/*
サブタイトル
*/
#gameplay .move h3 {
	background-image: url(../images/gameplay_move_subtitle.png);
	background-size: 100% auto;
	background-position: center;
	background-repeat: no-repeat;
	width: 569px;
	height: 279px;
	margin: 0 auto 80px auto;
	text-indent: -9999px;
}
.en #gameplay .move h3 {
	background-image: url(../images/gameplay_move_subtitle_en.png);
}




/*
リスト基本スタイル
*/
#gameplay .move ul {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	width: 100%;
	max-width: 1800px;
	margin: 0 auto;
}

#gameplay .move ul li {
	width: 25%;
	max-width: 450px;
	margin: 0 20px 30px 20px;
}

#gameplay .move ul li figure {
	text-align: center;
}


/*画像*/
#gameplay .move ul li img {
	box-sizing: border-box;
	border-radius: 30px;
	border: 12px #ffffff solid;
}


/*キャプション*/
#gameplay .move ul li figcaption {
	position: relative;
	display: block;
	margin: 20px 0 0 0;
	padding: 10px 0;
	background-color: #ffffff;
	border-radius: 100px;
}

#gameplay .move ul li figcaption::before {
	position: absolute;
	top: -16px;
	left: 50%;
	content: "";
	display: block;
	background-image: url(../svg/gameplay_move_tip_bg.svg);
	background-size: 100% auto;
	background-position: top center;
	background-repeat: no-repeat;
	width: 50px;
	height: 17px;
	margin: 0 0 0 -25px;
}
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
遊び方：ムーブインタラクション_end
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/





/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
遊び方：他の遊び方_start
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
/*
基本レイアウト
*/
#gameplay .andmore {
	text-align: center;
}


#gameplay .andmore p {
	font-size: 38px;
}
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
遊び方：他の遊び方_end
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/











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


SASUKE VRの楽しみ方


――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――*/
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
SASUKE VRの楽しみ方：汎用_start
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
#htp {
	position: relative;
	margin: 0 0 250px 0;
}





/*
1680px以上
*/
@media (min-width: 1680px) {



}
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
SASUKE VRの楽しみ方：汎用_end
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/





/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
SASUKE VRの楽しみ方：タイトル_start
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
/*
タイトル
*/
#htp .title {
	position: relative;
	width: 98%;
	height: 45vh;
	max-height: 600px;
	margin: 0 auto min(50vw,900px) auto;
	pointer-events: none;
}
@media (max-width: 1000px) {
	#htp .title {
		margin: 0 auto 37vw auto;
	}
}


/*テキスト要素*/
#htp .title h2 {
	z-index: 2;
	position: absolute;
	left: 50%;
	background-image: url(../images/htp_title.png);
	width: 70%;
	max-width: 1200px;
	margin: 0 0 0 max(-940px, -48vw);
	aspect-ratio: 28 / 11;
	text-indent: -9999px;
}
.en #htp .title h2 {
	background-image: url(../images/htp_title_en.png);
}




/*
イラスト＆オブジェクト
*/
#htp .title .obj {
	z-index: 1;
	position: relative;
}
#htp .title .obj figure,
#htp .title .obj .monyo {
	position: absolute;
	left: 50%;
	display: block;
}


/*キャラクター*/
#htp .title .obj figure:nth-of-type(1) {
	z-index: 2;
	width: 20vw;
	max-width: 320px;
	aspect-ratio: 5 / 4;
	margin: -80px 0 0 110px;
}
#htp .title .obj figure:nth-of-type(2) {
	z-index: 3;
	width: 29vw;
	max-width: 590px;
	aspect-ratio: 5 / 4;
	margin: -50px 0 0 231px;
}
#htp .title .obj figure:nth-of-type(3) {
	z-index: 4;
	width: 10vw;
	max-width: 400px;
	aspect-ratio: 7 / 6;
	margin: 130px 0 0 min(-10vw, 600px);
}
#htp .title .obj figure:nth-of-type(4) {
	z-index: 5;
	width: 40vw;
	max-width: 430px;
	aspect-ratio: 13 / 14;
	margin: min(10vw, 190px) 0 0 100px;
}


/*キャラクター背景*/
#htp .title .obj .monyo {
	z-index: 1;
	background-image: url(../svg/common_bgobj_munyo_2.svg);
	background-size: 100% auto;
	background-position: top center;
	background-repeat: no-repeat;
	width: 60vw;
	max-width: 800px;
	margin: min(-3vw, 190px) 0 0 -30px;
	aspect-ratio: 14 / 13;
}
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
SASUKE VRの楽しみ方：タイトル_end
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/





/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
SASUKE VRの楽しみ方：コンテンツナビゲーション_start
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
/*
基本レイアウト
*/
#htp .cnav {
	position: absolute;
	top: 0;
	width: 100%;
	height: min(58vw, 800px);
	margin: min(30vw, 520px) 0 0 0;
}

#htp .cnav > div {
	position: absolute;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	pointer-events: none;
	width: 100%;
}

#htp .cnav > div.limits {
	top: 0;
}

#htp .cnav > div.chaos {
	bottom: 0;
}


/*プレート左右配置調整*/
#htp .cnav > div .text {
	align-self: stretch;
	position: relative;
	display: flex;
	align-items: center;
	width: 60%;
	max-width: 950px;
	aspect-ratio: 22/13;
	cursor: pointer;
}

#htp .cnav > div .text p {
	text-indent: -9999px;
}

#htp .cnav > div .text h4 {
	height: 90%;
	text-indent: -9999px;
}

#htp .cnav > div.limits .text {
	left: max(-18%,-330px);
	background-image: url(../images/htp_limits_cnav_bg.png);
}

#htp .cnav > div.chaos .text {
	right: max(-18%,-330px);
	background-image: url(../images/htp_chaos_cnav_bg.png);
	flex-direction: row-reverse;
}


/*グリッド（左）*/
#htp .cnav > div .grid_l {
	flex-grow: 1;
	align-self: stretch;
}

#htp .cnav > div.limits .grid_l {
	background-color: #d20b0b;
}

#htp .cnav > div.chaos .grid_r {
	background-color: #2fc6f2;
}


/*グリッド（右）*/
#htp .cnav > div .grid_r {
	flex-grow: 1;
	align-self: stretch;
}




/*
見出し＆テキスト要素
*/
/*LIMITS*/
#htp .cnav > div.limits .text h4 {
	background-image: url(../images/htp_limits_cnav_title.png);
	aspect-ratio: 20/17;
}
.en #htp .cnav > div.limits .text h4 {
	background-image: url(../images/htp_limits_cnav_title_en.png);
	aspect-ratio: 20/15;
}


/*CHAOS*/
#htp .cnav > div.chaos .text h4 {
	background-image: url(../images/htp_chaos_cnav_title.png);
	aspect-ratio: 20/16;
}
.en #htp .cnav > div.chaos .text h4 {
	background-image: url(../images/htp_chaos_cnav_title_en.png);
	aspect-ratio: 20/16.5;
}
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
SASUKE VRの楽しみ方：コンテンツナビゲーション_end
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/





/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
SASUKE VRの楽しみ方：本気で挑む＆わいわい遊ぶ_start
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
#htp .htpbox {
	position: relative;
	margin: 0 0 100px 0;
}




/*
コンテンツタイトル
*/
#htp .htpbox h3 {
	z-index: 2;
	position: relative;
	top: 80px;
	height: 13vw;
	max-height: 120px;
	margin: 0 auto;
	text-indent: -9999px;
	background-size: 100% auto;
	background-position: center;
	background-repeat: no-repeat;
}
#htp .htpbox h3::after {
	position: absolute;
	left: 50%;
	top: -60px;
	content: "";
	display: block;
	width: 61px;
	height: 30px;
	margin: 0 0 0 -30.5px;
}

.en #htp .htpbox h3 {
	top: 30px;
	height: 4vw;
	max-height: 70px;
}
.en #htp .htpbox h3::after {
	top: -60px;
}


/*見出し画像*/
#htp #limitsbox.htpbox h3 {
	background-image: url(../images/playmode_limits_subtitle.png);
	aspect-ratio: 20/7;
}
.en #htp #limitsbox.htpbox h3 {
	background-image: url(../images/playmode_limits_subtitle_en.png);
	aspect-ratio: 20/1.6;
}

#htp #chaosbox.htpbox h3 {
	background-image: url(../images/playmode_chaos_subtitle.png);
	aspect-ratio: 20/6;
}
.en #htp #chaosbox.htpbox h3 {
	background-image: url(../images/playmode_chaos_subtitle_en.png);
	aspect-ratio: 20/1.9;
}


/*下向き矢印*/
#htp #limitsbox.htpbox h3::after {
	background-image: url(../svg/htp_arrow_red_bottom.svg);
}

#htp #chaosbox.htpbox h3::after {
	background-image: url(../svg/htp_arrow_blue_bottom.svg);
}




/*
カバーアート
*/
#htp .htpbox .artwork {
	position: relative;
	background-color: #000000;
	background-size: auto 100%;
	background-position: center;
	background-repeat: no-repeat;
	height: 35vw;
	max-height: 700px;
	margin: 0 0 60px 0;
}


/*ヨコイチ*/
#htp #limitsbox.htpbox .artwork {
	background-image: url(../images/htp_limits_vis.png);
}
.en #htp #limitsbox.htpbox .artwork {
	background-image: url(../images/htp_limits_vis_en.png);
}

#htp #chaosbox.htpbox .artwork {
	background-image: url(../images/htp_chaos_vis.png);
}


/*ピックアップアート配置*/
#htp .htpbox .artwork figure {
	z-index: 3;
	position: absolute;
	top: 0;
	left: 50%;
}

#htp #limitsbox.htpbox .artwork figure {
	margin: 5vw 0 0 max(18vw,0px);
}

#htp #chaosbox.htpbox .artwork figure {
	margin: 5vw 0 0 max(-51vw,-1000px);
}


/*画像設定*/
#htp .htpbox .artwork figure img {
	z-index: 3;
	position: relative;
	width: 30vw;
	max-width: 600px;
	aspect-ratio: 10/11;
	border: 10px #ffffff solid;
	border-radius: 30px;
}

#htp #limitsbox.htpbox .artwork figure img {
	transform: rotate(20deg);
}

#htp #chaosbox.htpbox .artwork figure img {
	transform: rotate(-20deg);
}


/*キラキラ*/
#htp .htpbox .artwork figure::after {
	z-index: 2;
	position: absolute;
	top: 50%;
	left: 50%;
	content: "";
	display: block;
	aspect-ratio: 4 / 6;
	width: 33vw;
	max-width: 650px;
	margin: -23vw 0 0 -17vw;
}

#htp #limitsbox.htpbox .artwork figure::after {
	background-image: url(../svg/htp_syuriken_limits_set_blue.svg);
}

#htp #chaosbox.htpbox .artwork figure::after {
	background-image: url(../svg/htp_chaos_syuriken_set_red.svg);
}




/*
テキスト
*/
#htp .htpbox .readcopy {
	width: 70%;
	margin: 0 auto 0 auto;
}

#htp .htpbox .readcopy p {
	font-size: 22px;
	line-height: 1.8em;
}


/*文字方向*/
#htp #limitsbox.htpbox .readcopy {
	text-align: left;
}

#htp #chaosbox.htpbox .readcopy {
	text-align: right;
}
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
SASUKE VRの楽しみ方：本気で挑む＆わいわい遊ぶ_end
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/





/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
SASUKE VRの楽しみ方：アニメーション_start
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
/*
共通
*/
#htp .title h2,
#htp .title .obj .monyo,
#htp .title .obj figure:nth-of-type(1),
#htp .title .obj figure:nth-of-type(2),
#htp .title .obj figure:nth-of-type(3),
#htp .title .obj figure:nth-of-type(4),
#htp .cnav > div.limits,
#htp .cnav > div.chaos {
	opacity: 0;
	transition-duration: 1200ms;
	transition-property: all;
	transition-timing-function: cubic-bezier(.42,0,0,.99);
	transition-delay: 0ms;
	transform-origin: center;
}




/*
タイトル要素
*/
/*事前準備*/
#htp .title h2 {
	transform: translate(-200px, 0);
}


/*表示*/
#htp .title.active h2 {
	opacity: 1;
	transform: translate(0px,0px);
}




/*
キャラクター
*/
/*事前準備*/
#htp .title .obj figure:nth-of-type(1) {
	transform: translate(-200px, -100px);
}
#htp .title .obj figure:nth-of-type(2) {
	transform: translate(200px, 100px);
}
#htp .title .obj figure:nth-of-type(3) {
	transform: translate(-100px, -200px);
}
#htp .title .obj figure:nth-of-type(4) {
	transform: translate(200px, -100px);
}

/*表示*/
#htp .title.active .obj figure:nth-of-type(1),
#htp .title.active .obj figure:nth-of-type(2),
#htp .title.active .obj figure:nth-of-type(3),
#htp .title.active .obj figure:nth-of-type(4) {
	opacity: 1;
	transform: translate(0px,0px);
}


/*ふわふわ*/
#htp .title .obj img {
	animation-name: common_anime_floating;
	animation-duration: 2000ms;
	animation-delay: 0;
	animation-timing-function: ease-in-out;
	animation-direction: alternate-reverse;
	animation-fill-mode: forwards;
	animation-play-state: running;
	animation-iteration-count: infinite;
}




/*
背景もにょ
*/
#htp .title .obj .monyo {
	transform: scale(0.7);
}


#htp .title.active .obj .monyo {
	opacity: 1;
	transform: scale(1);
}




/*
ナビゲーション：本気で挑む
*/
#htp .cnav > div.limits {
	transform: translateX(-300px);
}


#htp .cnav.active > div.limits {
	opacity: 1;
	transform: translateX(0);
}




/*
ナビゲーション：本気で挑む
*/
#htp .cnav > div.chaos {
	transform: translateX(300px);
}


#htp .cnav.active > div.chaos {
	opacity: 1;
	transform: translateX(0);
}
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
SASUKE VRの楽しみ方：アニメーション_end
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/











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


ゲーム情報


――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――*/
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
ゲーム情報：汎用_start
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
#storeinfo {
	position: relative;
	margin: 0 0 400px 0;
	padding: 200px 0 0 0;
}




/*
背景球体
*/
#storeinfo .effect .circle {
	z-index: 1;
	position: absolute;
	top: 0;
	left: 50%;
	width: 175%;
	margin: 0 0 0 -87.5%;
	aspect-ratio: 1/1;
	background-color: #0091dc;
	border-radius: 10000px;
}

/*980px以下*/
@media (max-width: 980px) {
	#storeinfo .effect .circle {
		width: 1680px;
		margin: 0 0 0 -840px;
	}
}

/*1200px以上*/
@media (min-width: 1200px) {
	#storeinfo .effect .circle {
		width: 2000px;
		margin: 0 0 0 -1000px;
	}
}




/*
ジャンプするキャラクター
*/
#storeinfo .effect .chara {
	z-index: 3;
	position: absolute;
	top: 0;
	left: 50%;
	margin: -110px 0 0 -330px;
}

#storeinfo .effect .chara span {
	position: absolute;
	display: block;
}

#storeinfo .effect .chara span.character {
	top: -51px;
	left: 0;
	background-image: url(../images/storeinfo_obj_chara.png);
	background-size: 100% auto;
	background-position: center;
	background-repeat: no-repeat;
	width: 114px;
	height: 130.5px;
	transform-origin: right;
	transform: rotate(23deg);
}

#storeinfo .effect .chara span.eff {
	top: 2px;
	left: -37px;
	background-image: url(../images/storeinfo_obj_bg.png);
	background-size: 100% auto;
	background-position: center;
	background-repeat: no-repeat;
	width: 358.5px;
	height: 136.5px;
	transform-origin: right;
	transform: rotate(14deg);
}
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
ゲーム情報：汎用_end
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/





/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
ゲーム情報：タイトル_start
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
#storeinfo .title {
	z-index: 2;
	position: relative;
	aspect-ratio: 20/5;
	width: 50vw;
	max-width: 570px;
	margin: 0 auto 60px auto;
	background-image: url(../images/storeinfo_title.png);
	background-size: 100% auto;
	background-position: center;
	background-repeat: no-repeat;
	text-indent: -9999px;
}
.en #storeinfo .title {
	background-image: url(../images/storeinfo_title_en.png);
}
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
ゲーム情報：タイトル_end
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/





/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
ゲーム情報：キーアート_start
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
#storeinfo .keyart {
	z-index: 2;
	position: relative;
	margin: 0 0 60px 0;
}




/*
ストアビジュアル
*/
#storeinfo .keyart figure {
	display: flex;
	align-items: center;
	width: 55vw;
	max-width: 1000px;
	margin: 0 auto;
	border-radius: 10px;
	overflow: hidden;
}
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
ゲーム情報：キーアート_end
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/





/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
ゲーム情報：購入案内_start
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
#storeinfo .buynow {
	z-index: 2;
	position: relative;
	text-align: center;
	margin: 0 0 80px 0;
}




/*
サブタイトル
*/
#storeinfo .buynow h3 {
	margin: 0 0 30px 0;
	font-size: 25px;
}




/*
購入リンク
*/
#storeinfo .buynow ul {
	display: flex;
	align-items: center;
	justify-content: center;
}

#storeinfo .buynow ul li {
	position: relative;
	top: 0;
	border-radius: 100px;
	box-shadow: 0 10px 30px rgba(12, 6, 38, 0.3);
	transition-duration: 600ms;
	transition-property: all;
	transition-timing-function: cubic-bezier(.42,0,0,.99);
	transition-delay: 0ms;
	transform-origin: center;
}
#storeinfo .buynow ul li:hover {
	top: -5px;
}

#storeinfo .buynow ul li a {
	position: relative;
	top: 0;
	display: block;
	background-color: #efefef;
	width: 25vw;
	max-width: 250px;
	padding: 36px 60px;
	border-radius: 100px;
	box-shadow: inset 0 0 16px #ffffff;
}

#storeinfo .buynow ul li a span {
	position: absolute;
	display: block;
	text-indent: -9999px;
}

#storeinfo .buynow ul li a::before {
	content: "";
	display: block;
	background-size: 100% auto;
	background-position: center;
	background-repeat: no-repeat;
	width: 100%;
	aspect-ratio: 8/1;
}


/*Meta*/
#storeinfo .buynow ul li.meta a {
	background-image: -webkit-linear-gradient(110deg, #cfe3f6, #ebe0fb, #ffffff);
}
#storeinfo .buynow ul li.meta a::before {
	background-image: url(../images/logo_meta_color.png);
}
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
ゲーム情報：購入案内_end
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/





/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
ゲーム情報：スペック_start
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
#storeinfo .spec {
	z-index: 2;
	position: relative;
	width: 65%;
	max-width: 600px;
	margin: 0 auto;
}




/*
テーブル
*/
#storeinfo .spec table {
	width: 100%;
}

#storeinfo .spec table tbody {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
}

#storeinfo .spec table tr {
	align-self: stretch;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	width: 45%;
	margin: 0 10px 50px 10px;
}

#storeinfo .spec table th {
	box-sizing: border-box;
	width: 100%;
	margin: 0 0 30px 0;
	padding: 14px 0;
	font-size: 16px;
	border: 2px #ffffff solid;
	border-radius: 100px;
}
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
ゲーム情報：スペック_end
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/





/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
ゲーム情報：アニメーション_start
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
/*
共通
*/
#storeinfo .effect .circle,
#storeinfo .effect .chara span.character,
#storeinfo .effect .chara span.eff {
	opacity: 0;
	transition-duration: 600ms;
	transition-property: all;
	transition-timing-function: cubic-bezier(.42,0,0,.99);
	transition-delay: 0ms;
	transform-origin: center;
}




/*
背景球体
*/
/*準備*/
#storeinfo .effect .circle {
	transform: scale(0);
}


/*表示*/
#storeinfo.active .effect .circle {
	opacity: 1;
	transform: scale(1);
}
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
ゲーム情報：アニメーション_end
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/











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


SASUKEとは？


――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――*/
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
SASUKEとは？：汎用_start
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
#abooutsasuke {
	position: relative;
	min-height: 1000px;
	margin: 0 0 250px 0;
	padding: 0 0 0 0;
}




/*
タイトル
*/
#abooutsasuke .title {
	z-index: 2;
	position: relative;
	background-image: url(../images/aboutsasuke_title.png);
	background-size: 100% auto;
	background-position: center;
	background-repeat: no-repeat;
	aspect-ratio: 20/5;
	width: 70vw;
	max-width: 760px;
	margin: 0 auto 100px auto;
	text-indent: -9999px;
}

.en #abooutsasuke .title {
	background-image: url(../images/aboutninjawarrior_title.png);
}


/*
概要
*/
#abooutsasuke .detail {
	z-index: 10;
	position: relative;
	left: 50%;
	width: 40%;
	max-width: 600px;
}


/*タイトル*/
#abooutsasuke .detail h3 {
	color: #d20b0b;
	margin: 0 0 30px 0;
	font-size: 30px;
}


/*本文*/
#abooutsasuke .detail > div {
	position: relative;
	padding: 0 0 120px 0;
}

#abooutsasuke .detail p {
	line-height: 2em;
}


/*本文*/
#abooutsasuke .detail .viewsite a {
	position: absolute;
	bottom: 0;
	right: 0;
	display: block;
	background-color: #d20b0b;
	background-image: url(../svg/arrow_w_l.svg);
	background-size: 14px auto;
	background-position: 30px center;
	background-repeat: no-repeat;
	color: #ffffff;
	padding: 1em 1em 1em 6em;
	border-radius: 100px;
	transition-duration: 600ms;
	transition-property: all;
	transition-timing-function: cubic-bezier(.42,0,0,.99);
	transition-delay: 0ms;
	transform-origin: center;
}

#abooutsasuke .detail .viewsite a:hover {
	background-position: 40px center;
	filter: brightness(1.1);
}




/*
アートワーク
*/
#abooutsasuke .art {
	z-index: 1;
	position: absolute;
	top: -70px;
	left: 50%;
	margin: 0px 0 0 -2vw;
}

#abooutsasuke .art div {
	position: absolute;
	top: 0;
	left: 50%;
	background-size: 100% auto;
	background-position: center;
	background-repeat: no-repeat;
}

#abooutsasuke .art .claude_3 {
	background-image: url(../images/aboutsasuke_claude_3.png);
	z-index: 5;
	width: 365px;
	height: 133px;
	margin: 820px 0 0 130px;
}
#abooutsasuke .art .claude_2 {
	background-image: url(../images/aboutsasuke_claude_2.png);
	z-index: 4;
	width: 172px;
	height: 87px;
	margin: 490px 0 0 -150px;
}
#abooutsasuke .art .claude_1 {
	background-image: url(../images/aboutsasuke_claude_1.png);
	z-index:2;
	width: 251px;
	height: 78px;
	margin: 720px 0 0 -550px;
}
#abooutsasuke .art .hdr {
	background-image: url(../images/aboutsasuke_claude_hdr.png);
	z-index: 3;
	width: 663px;
	height: 828px;
	margin: 160px 0 0 max(-40vw,-620px);
}
#abooutsasuke .art .bg {
	background-image: url(../images/aboutsasuke_bg.png);
	z-index: 1;
	width: 592px;
	height: 468px;
	margin: 490px 0 0 -440px;
}
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
SASUKEとは？：汎用_end
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/





/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
SASUKEとは？：アニメーション_start
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
/*
共通
*/
#abooutsasuke .art .claude_1,
#abooutsasuke .art .claude_2,
#abooutsasuke .art .claude_3,
#abooutsasuke .art .hdr,
#abooutsasuke .art .bg {
	opacity: 0;
	transition-duration: 1200ms;
	transition-property: all;
	transition-timing-function: cubic-bezier(.42,0,0,.99);
	transition-delay: 0ms;
	transform-origin: center;
}




/*
人物写真
*/
/*準備*/
#abooutsasuke .art .hdr {
	transition-duration: 3000ms;
	transform: translateX(300px);
}


/*表示*/
#abooutsasuke .art.active .hdr {
	opacity: 1;
	transform: translateX(0px);
}




/*
背景炭
*/
/*準備*/
#abooutsasuke .art .bg {
	transition-duration: 400ms;
	transform: scale(1.1) translate(20px, -20px);
}


/*表示*/
#abooutsasuke .art.active .bg {
	opacity: 1;
	transform: scale(1) translate(0, 0);
}





/*
雲
*/
#abooutsasuke .art .claude_1,
#abooutsasuke .art .claude_2,
#abooutsasuke .art .claude_3 {
	animation-name: aboutsasuke_claude;
	animation-timing-function: ease-in-out;
	animation-direction: alternate-reverse;
	animation-fill-mode: forwards;
	animation-play-state: paused;
	animation-iteration-count: infinite;
}


/*表示*/
#abooutsasuke .art.active .claude_1,
#abooutsasuke .art.active .claude_2,
#abooutsasuke .art.active .claude_3 {
	opacity: 1;
	animation-play-state: running;
}
#abooutsasuke .art.active .claude_1 {
	animation-delay: 0ms;
	animation-duration: 4000ms;
}
#abooutsasuke .art.active .claude_2 {
	animation-delay: 400ms;
	animation-duration: 2000ms;
}
#abooutsasuke .art.active .claude_3 {
	animation-delay: 200ms;
	animation-duration: 3000ms;
}

@keyframes aboutsasuke_claude {
	0% {
		transform: translateX(-5%);
	}
	100%{
		transform: translateX(5%);
	}
}
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
SASUKEとは？：アニメーション_end
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/











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


フッター


――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――*/
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
フッター：汎用_start
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
フッター：汎用_end
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/





/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
フッター：公式アカウント_start
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
#grandfotter .account {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	background-image: url(../images/footer_sns_bg.png);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	min-height: 300px;
}




/*
シンボル
*/
#grandfotter .account h3 {
	position: absolute;
	top: -120px;
	left: 50%;
	background-image: url(../images/logo_gametitle_jp.png);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	width: 273px;
	height: 226px;
	margin: 0 0 0 -136.5px;
	text-indent: -9999px;
}
.en #grandfotter .account h3 {
	background-image: url(../images/logo_gametitle_en.png);
}




/*
シンボル
*/
#grandfotter .account ul {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 40px 0 0 0;
}

#grandfotter .account ul li {
	margin: 0 20px;
}

#grandfotter .account ul li img {
	width: 80px;
}

#grandfotter .account ul li a {
	position: relative;
	top: 0;
	transition-duration: 600ms;
	transition-property: all;
	transition-timing-function: cubic-bezier(.42,0,0,.99);
	transition-delay: 0ms;
	transform-origin: center;
}
#grandfotter .account ul li a:hover {
	top: -10px;
}
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
フッター：公式アカウント_end
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/





/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
フッター：TBS GAMES_start
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
#grandfotter .tbsgames {
	background-color: #0050ff;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 60px 0;
}
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
フッター：TBS GAMES_end
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/





/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
フッター：権利表記・言語切替_start
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
#grandfotter .rights {
	box-sizing: border-box;
	background-color: #000000;
	padding: 30px;
}




/*
言語切替
*/
#grandfotter .lang {
	padding: 60px 0;
}

#grandfotter .lang ul {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: #ffffff;
	width: 220px;
	margin: 0 auto;
	padding: 10px;
	border-radius: 100px;
}

#grandfotter .lang ul li {}

#grandfotter .lang ul li a {
	display: block;
	background-color: #bcbfcc;
	color: #868ca4;
	padding: 10px 40px;
	border-radius: 100px;
	transition-duration: 600ms;
	transition-property: all;
	transition-timing-function: cubic-bezier(.42,0,0,.99);
	transition-delay: 0ms;
	transform-origin: center;
}
#grandfotter .lang ul li a:hover {
	filter: brightness(1.3);
	letter-spacing: 0.2em;
}

#grandfotter .lang ul li.active a {
	background-color: #d20b0b;
	color: #ffffff;
}




/*
プラットフォーム
*/
#grandfotter .platform {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	margin: 0 0 60px 0;
}

#grandfotter .platform img {
	height: 30px;
}




/*
プラットフォーム
*/
#grandfotter .copyright {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
}


/*開発*/
#grandfotter .copyright .developer {
	font-size: 12px;
}

#grandfotter .copyright .developer dt {
	margin: 0 0 30px 0;
}

#grandfotter .copyright .developer dd {
	margin: 0 0 20px 0;
}
#grandfotter .copyright .developer dd:last-child {
	margin: 0;
}

#grandfotter .copyright .developer img {
	height: 30px;
}


/*権利表記*/
#grandfotter .copyright .rigtstxt {}

#grandfotter .copyright .rigtstxt li {
	color: #3c3c3c;
	font-size: 11px;
	text-align: right;
}
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
フッター：権利表記・言語切替_end
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/











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


セクション


――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――*/
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
コンテンツ：汎用_start
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
コンテンツ：汎用_end
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/