@charset "UTF-8";
@media print, screen and (min-width: 1025px) {
		#header {
				height: 750px;
				background: url() center 120px/ cover no-repeat;
		}
}

@media print, screen and (max-width: 1024px) {
		#header {
				background: url() center 0px/ cover no-repeat;
		}
}


/*--------------------------------------------
PAGE TITLE
---------------------------------------------*/

#main-title .category {
		padding: 10px;
		font-size: 140%;
		top: 10px;
		position: relative;
}

#main-title .category p {
		letter-spacing: .08em;
}

#main-title .wrap {
		margin-bottom: 40px;
}

#main-title .vr_work {
		margin-top: 60px;
}

#main-title .vr_work p {
		letter-spacing: .08em;
}

#main-title h1 {
		letter-spacing: .02em;
		position: relative;
		line-height: 1.2;
}

#main-title h1 span {
		display: block;
		letter-spacing: .02em;
}

#main-title h1:after {
		background: url("../images/ui/icon/controller01.svg") 0 0/ contain no-repeat;
		content: '';
		left: 50%;
		position: absolute;
}

#main-title .event_title h1:after {
		background: none;
		content: '';
		left: 50%;
		position: absolute;
}

@media screen and (max-width: 1024px) {
		#main-title {
				height: calc( ( 320 - 60) * 100vw / 1024);
				padding-bottom: calc( 40 * 100vw / 1024);
				margin-top: 25px;
				width: 60%;
				margin-right: auto;
				margin-left: auto;
				background-color: rgba(255, 255, 255, 0.5);
		}
		#main-title p:not(.sub) {
				font-size: 3.2rem;
		}
		#main-title .sub {
				font-size: 2.5rem;
				margin-top: calc( 7 * 100vw / 1024);
		}
		#main-title h1 {
				font-size: 4.0rem;
				margin-top: calc( 20 * 100vw / 1024);
		}
		#main-title h1 span {
				font-size: 3.0rem;
				margin-top: calc( 20 * 100vw / 1024);
				[ font-weight: 300 !important;
				]
		}
		#main-title h1:after {
				bottom: calc( -60 * 100vw / 1024);
				height: calc( 39 * 100vw / 1024);
				margin-left: calc( -39 * 100% / 1024);
				width: calc( 78 * 100% / 1024);
		}
		#main-title .event_title h1:after {
				background: none;
				content: '';
				left: 50%;
				position: absolute;
		}
		#main-title .event_title h1 {
				font-size: 4.2rem;
				line-height: 1.3;
		}
		#main-title .vr_link {
				width: 70%;
				margin: 60px auto;
		}
		#main-title .vr_link a {
				align-items: center;
				/*background-color: #B24996;*/
				background-color: var(--accentColor01);
				color: #fff;
				display: flex;
				font-weight: 700;
				justify-content: center;
				letter-spacing: .05em;
				line-height: 1.2;
				border-radius: 4px;
				font-size: 2.5rem;
				height: 60px;
				margin-top: auto;
				order: 4;
				text-align: center;
		}
		#main-title .vr_link a span {
				align-items: center;
				display: flex;
		}
}

@media print, screen and (min-width: 1025px) {
		#main-title {
				/*height: calc( 280px - 34px );*/
				margin-top: 170px;
				background-color: rgba(255, 255, 255, 0.5);
				margin: 300px auto 0;
				width: 50%;
				padding: 20px 0 20px 0;
		}
		#main-title .sub {
				font-size: 1.8rem;
				margin-top: 6px;
		}
		#main-title h1 {
				font-size: 4.4rem;
				margin-top: 20px;
				line-height: 1.2;
				margin: auto;
				padding: 10px;
				display: block;
		}
		#main-title h1 span {
				font-size: 2.3rem;
				margin-top: 20px;
				font-weight: 500;
		}
		#main-title h1:after {
				bottom: -40px;
				height: 24px;
				margin-top: 10px;
				margin-left: -24px;
				width: 48px;
		}
		#main-title .event_title h1:after {
				background: none;
				content: '';
				left: 50%;
				position: absolute;
		}
		#main-title .event_title h1 {
				font-size: 3.2rem;
				line-height: 1.3;
		}
		#main-title .vr_link {
				width: 30%;
				margin: 60px auto;
		}
		#main-title .vr_link a {
				align-items: center;
				/*background-color: #B24996;*/
				background-color: var(--accentColor01);
				color: #fff;
				display: flex;
				font-weight: 700;
				justify-content: center;
				letter-spacing: .05em;
				line-height: 1.2;
				border-radius: 4px;
				font-size: 1.4rem;
				height: 40px;
				margin-top: auto;
				order: 4;
				text-align: center;
				vertical-align: middle;
		}
		#main-title .vr_link a span {
				align-items: center;
				display: flex;
				padding-top: 5px;
		}
}


/*--------------------------------------------
MV
---------------------------------------------*/


/*--- member ---*/

#member li {
		align-items: flex-start;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		line-height: 1.2;
		position: relative;
}

#member li:before {
		background: url("../images/ui/icon/controller02.svg") 0 0/ contain no-repeat;
		content: '';
		left: 0;
		position: absolute;
}

#member li span {
		font-size: 1.4rem;
		letter-spacing: .02em;
}

#member li .en {}

@media screen and (max-width: 1024px) {
		#member {
				padding-bottom: calc( 60 * 100vw / 1024);
				padding-top: calc( 60 * 100vw / 1024);
		}
		#member ul {
				padding-left: calc( 4 * 100vw / 1024);
		}
		#member li {
				margin-bottom: calc( 30 * 100vw / 1024);
				padding-left: calc( 60 * 100% / 1024);
		}
		#member li:before {
				height: calc( 26 * 100vw / 1024);
				top: calc( 4 * 100vw / 1024);
				width: calc( 52 * 100% / 1024);
		}
		#member li span {
				/*font-size: 2.7rem;*/
				font-size: 3.2rem;
		}
}

@media print, screen and (min-width: 1025px) {
		#member {
				padding: 50px 0 70px;
		}
		#member ul {
				/*margin-left: 130px;*/
		}
		#member li {
				margin-bottom: 20px;
				padding-left: 45px;
		}
		#member li:before {
				height: 20px;
				top: 2px;
				width: 40px;
		}
		#member li span {
				font-size: 1.8rem;
				font-weight: 500;
		}
}


/*--- slider ---*/

#slider {
		position: relative;
		width: 100%;
}

#slider li img {
		display: block;
}

#slideNav {
		text-align: center;
}

#slideNav-inner {
		display: inline-block;
		position: relative;
}

.slick-arrow {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
}

.slick-prev {
		background: url("../images/ui/icon/arrow_left01.svg") 0 0 / contain no-repeat;
		right: 100%;
}

.slick-next {
		background: url("../images/ui/icon/arrow_right01.svg") 0 0 / contain no-repeat;
		left: 100%;
}

.slick-prev, .slick-next {
		font-size: 0;
}

.slick-dots {
		padding: 0;
}

.slick-dots>li {
		display: inline-block;
}

.slick-dots li button {
		background-color: #c6c6c6;
		border: none;
		border-radius: 50%;
		color: transparent;
}

.slick-dots .slick-active button {
		background-color: var(--accentColor04);
}

@media screen and (max-width: 1024px) {
		#slider {
				height: calc( 500 * 100vw / 1024);
				padding-top: calc( 36 * 100vw / 1024);
				margin-bottom: calc( 36 * 100vw / 1024);
		}
		#slider .slick-slider li {
				margin: 0 calc( 34 * 100vw / 1024);
		}
		#slider li img {
				height: calc( 382 * 100vw / 1024);
		}
		#slideNav {
				margin-top: calc( 30 * 100vw / 1024);
		}
		.slick-arrow {
				top: 25%;
		}
		.slick-prev {
				margin-right: calc( 30 * 100vw / 1024);
		}
		.slick-next {
				margin-left: calc( 30 * 100vw / 1024);
		}
		.slick-prev, .slick-next {
				height: calc( 25 * 100vw / 1024);
				width: calc( 13 * 100vw / 1024);
		}
		.slick-dots>li {
				margin: 0 calc( 6 * 100vw / 1024);
		}
		.slick-dots li button {
				height: calc( 14 * 100vw / 1024);
				margin: 0 calc( 7 * 100vw / 1024);
				width: calc( 14 * 100vw / 1024);
		}
}

@media print, screen and (min-width: 1025px) {
		#slider {
				height: 490px;
				padding-top: 35px;
				margin-bottom: 60px;
		}
		#slider .slick-slider li {
				margin: 0 19px;
		}
		#slider li img {
				height: 386px;
		}
		#slider .slick-slide {
				transition: opacity .3s ease-in;
		}
		#slider .slick-slide:not(.slick-current) {
				opacity: .5;
		}
		#slider .slick-slide .slick-current {
				opacity: 1;
		}
		#slideNav {
				margin-top: 20px;
		}
		.slick-arrow {
				top: 50%;
		}
		.slick-prev {
				margin-right: 25px;
		}
		.slick-next {
				margin-left: 25px;
		}
		.slick-prev, .slick-next {
				height: 21px;
				width: 10px;
		}
		.slick-dots>li {
				margin: 0 5px;
		}
		.slick-dots li button {
				height: 12px;
				margin: 0 7px;
				width: 12px;
		}
}


/*--------------------------------------------
concept
---------------------------------------------*/

@media screen and (max-width: 1024px) {
		#concept .texts01 p {
				font-weight: 700;
				font-size: 3.6rem;
		}
}

@media print, screen and (min-width: 1025px) {
		#concept .texts01 p {
				font-weight: 700;
				font-size: 1.6rem;
		}
}


/*--------------------------------------------
profile
---------------------------------------------*/

#profile h3:before {
		height: 20px;
		top: 2px;
		width: 40px;
}

#profile .texts01 .photo img {
		width: 100%;
}
#profile .texts01 .photo_projects img {
		width: 100%;
}

@media screen and (max-width: 1024px) {
		#profile .texts01 {
				margin-bottom: 30px;
		}
		#profile .texts01 .photo {
				margin-bottom: 20px;
				width: 20%;
				float: left;
				margin-right: 15px;
	}
	#profile .texts01 .photo_projects {
				margin-bottom: 20px;
				width: 100%;
				float: left;
				margin-right: 15px;
		}
}

@media print, screen and (min-width: 1025px) {
		#profile .texts01 {
				margin-bottom: 30px;
				align-items: flex-start;
				display: flex;
				justify-content: left;
		}
		#profile .texts01 .photo {
				width: 15%;
	}
	#profile .texts01 .photo_projects {
				margin-bottom: 20px;
				width: 40%;
				float: left;
				margin-right: 15px;
		}
		#profile .texts01 .text {
				padding-left: 30px;
				width: 70%;
		}
}


/*--------------------------------------------
MOVIE
---------------------------------------------*/

#movie .iframe-container {
		position: relative;
		height: 0;
		padding: 0 0 56.25%;
		overflow: hidden;
}

#movie iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
}

@media screen and (max-width: 1024px) {
		#movie {
				width: 100%;
				margin-bottom: calc( 36 * 100vw / 1024);
		}
		#movie .wrap {
				padding: calc( 34 * 100vw / 1024);
		}
}

@media print, screen and (min-width: 1025px) {
		#movie {
				width: 100%;
				margin-bottom: 100px;
		}
		#movie .wrap {
				/*padding: 28px 81px;*/
		}
}


/*--------------------------------------------
Intro
---------------------------------------------*/

#intro .iframe-container {
		position: relative;
		height: 0;
		padding: 0 0 56.25%;
		overflow: hidden;
}

#intro iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
}

@media screen and (max-width: 1024px) {
		#intro {
				width: 100%;
				margin-bottom: calc( 36 * 100vw / 1024);
		}
		#intro .wrap {
				padding: calc( 34 * 100vw / 1024);
		}
}

@media print, screen and (min-width: 1025px) {
		#intro {
				width: 100%;
				margin-bottom: 100px;
		}
		#intro .wrap {
				/*padding: 28px 81px;*/
		}
}


/*--------------------------------------------
Commentary
---------------------------------------------*/

#commentary .iframe-container {
		position: relative;
		height: 0;
		padding: 0 0 56.25%;
		overflow: hidden;
}

#commentary iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
}

@media screen and (max-width: 1024px) {
		#commentary {
				width: 100%;
		}
		#commentary .wrap {
				padding: calc( 34 * 100vw / 1024);
		}
}

@media print, screen and (min-width: 1025px) {
		#commentary {
				width: 100%;
		}
		#commentary .wrap {
				/*padding: 28px 81px;*/
		}
}


/*--------------------------------------------
play_the_game
---------------------------------------------*/

#play_the_game {
		font-weight: 700;
}

#play_the_game .wrap {
		align-items: center;
		display: flex;
		flex-direction: column;
}

#play_the_game .links {
		display: flex;
		justify-content: center;
}

#play_the_game .links>div {
		align-items: center;
		display: flex;
		flex-direction: column;
		justify-content: center;
}

#play_the_game .links h3 {
		letter-spacing: -.01em;
		color: var(--accentColor01);
}

#play_the_game ul {
		align-items: center;
		display: flex;
		justify-content: space-between;
}

#play_the_game li a img {
		height: 100%;
		width: auto;
}

#play_the_game .related a {
		align-items: center;
		background-color: #000;
		border-radius: 50%;
		display: flex;
		justify-content: center;
}

#play_the_game p {
		text-align: center;
}

#play_the_game p a {
		background-color: #8dc21f;
		background-color: var(--accentColor03);
		color: #fff;
		display: block;
}

#play_the_game p a span {
		letter-spacing: .05em;
		position: relative;
}

#play_the_game p a span:before {
		background: url("../images/ui/icon/arrow_left02.svg") 0 0/ contain no-repeat;
		content: '';
		left: -1em;
		position: absolute;
		top: 50%;
}

@media screen and (max-width: 1024px) {
		#play_the_game {
				padding-bottom: calc( 130 * 100vw / 1024);
				padding-top: calc( 100 * 100vw / 1024);
		}
		#play_the_game .links {
				flex-direction: column;
				margin-bottom: calc( 100 * 100vw / 1024)
		}
		#play_the_game .links>div+div {
				margin-top: calc( 100 * 100vw / 1024);
		}
		#play_the_game .links h3 {
				font-size: 4.0rem;
				margin-bottom: calc( 36 * 100vw / 1024);
		}
		#play_the_game ul {
				/*width: calc( 400 * 100vw / 1024 );*/
		}
		#play_the_game li {
				height: calc( 80 * 100vw / 1024);
				margin: 0 20px 0 20px;
		}
		#play_the_game .related a {
				height: calc( 80 * 100vw / 1024);
				padding: calc( 20 * 100vw / 1024);
				width: calc( 80 * 100vw / 1024);
		}
		#play_the_game p {
				height: calc( 60 * 100vw / 1024);
				line-height: calc( 60 * 100vw / 1024);
				width: 100%;
		}
		#play_the_game p a {
				border-radius: calc( 10 * 100vw / 1024);
		}
		#play_the_game p a span {
				font-size: 3rem;
		}
		#play_the_game p a span:before {
				height: calc( 20 * 100vw / 1024);
				margin-top: calc( -10 * 100vw / 1024);
				width: calc( 10 * 100vw / 1024);
		}
		#play_the_game h3 img {
				height: 30px;
		}
}

@media print, screen and (min-width: 1025px) {
		#play_the_game {
				padding: 80px 0 100px;
		}
		#play_the_game .links {
				margin-bottom: 100px;
		}
		#play_the_game .links>div+div {
				margin-left: 270px;
		}
		#play_the_game .links h3 {
				font-size: 2.8rem;
				margin-bottom: 25px;
		}
		#play_the_game ul {
				width: 300px;
		}
		#play_the_game li {
				height: 60px;
		}
		#play_the_game .related a {
				height: 60px;
				padding: 15px;
				width: 60px;
		}
		#play_the_game p {
				height: 30px;
				line-height: 30px;
				width: 490px;
		}
		#play_the_game p a {
				border-radius: 5px;
		}
		#play_the_game p a span {
				font-size: 1.7rem;
		}
		#play_the_game p a span:before {
				height: 15px;
				margin-top: -7.5px;
				width: 7px;
		}
		#play_the_game h3 img {
				height: 60px;
		}
}