@charset "UTF-8";

/*************************************************************
 *	SBI Neo festival NEXUM 2023 top.css
 ************************************************************/


/* --------------------------------------------------
		override
-------------------------------------------------- */
@media screen and (max-width: 1336px) {
}
@media screen and (min-width: 768px) {
}
@media screen and (max-width: 767px) {
}


/* --------------------------------------------------
		parts
-------------------------------------------------- */
@media screen and (max-width: 1336px) {
}
@media screen and (min-width: 768px) {
}
@media screen and (max-width: 767px) {
}


/* --------------------------------------------------
		opening
-------------------------------------------------- */
.opening {
	position: fixed;
	z-index: 300;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #000000;
	font-size: 0;
}
.opening__unit--a {
	position: absolute;
	top: 100px;
	left: calc(100 / 1336 * 100%);
	width: 488px;
}
.opening__unit--a .unit {
	position: relative;
	height: 0;
	padding-bottom: calc(1410 / 976 * 100%);
}
.opening__unit--a span {
	position: absolute;
	display: block;
	opacity: 0;
}
.opening__unit--a span:nth-of-type(1) {
	top: 0;
	left: 0;
	width: calc(360 / 976 * 100%);
}
.opening__unit--a span:nth-of-type(2) {
	top: 0;
	left: calc(360 / 976 * 100%);
	width: calc(360 / 976 * 100%);
}
.opening__unit--a span:nth-of-type(3) {
	top: calc(210 / 1410 * 100%);
	left: calc(720 / 976 * 100%);
	width: calc(256 / 976 * 100%);
}
.opening__unit--a span:nth-of-type(4) {
	top: calc(446 / 1410 * 100%);
	left: calc(62 / 976 * 100%);
	width: calc(274 / 976 * 100%);
}
.opening__unit--a span:nth-of-type(5) {
	top: calc(778 / 1410 * 100%);
	left: calc(62 / 976 * 100%);
	width: calc(274 / 976 * 100%);
}
.opening__unit--a span:nth-of-type(6) {
	top: calc(1080 / 1410 * 100%);
	left: calc(62 / 976 * 100%);
	width: calc(274 / 976 * 100%);
}
.opening__unit--a span:nth-of-type(7) {
	top: calc(446 / 1410 * 100%);
	left: 0;
	width: calc(30 / 976 * 100%);
}
.opening__unit--b {
	position: absolute;
	bottom: 100px;
	right: calc(100 / 1336 * 100%);
	width: 465px;
}
.opening__unit--b .unit {
	position: relative;
	height: 0;
	padding-bottom: calc(1218 / 930 * 100%);
}
.opening__unit--b span {
	position: absolute;
	display: block;
	opacity: 0;
}
.opening__unit--b span:nth-of-type(1) {
	top: 0;
	left: calc(578 / 930 * 100%);
	width: calc(276 / 930 * 100%);
}
.opening__unit--b span:nth-of-type(2) {
	top: calc(326 / 1218 * 100%);
	left: calc(578 / 930 * 100%);
	width: calc(276 / 930 * 100%);
}
.opening__unit--b span:nth-of-type(3) {
	top: calc(624 / 1218 * 100%);
	left: calc(578 / 930 * 100%);
	width: calc(276 / 930 * 100%);
}
.opening__unit--b span:nth-of-type(4) {
	top: calc(858 / 1218 * 100%);
	left: 0;
	width: calc(350 / 930 * 100%);
}
.opening__unit--b span:nth-of-type(5) {
	top: calc(858 / 1218 * 100%);
	left: calc(350 / 930 * 100%);
	width: calc(398 / 930 * 100%);
}
.opening__unit--b span:nth-of-type(6) {
	top: calc(858 / 1218 * 100%);
	left: calc(748 / 930 * 100%);
	width: calc(182 / 930 * 100%);
}
.opening__unit--b span:nth-of-type(7) {
	top: 0;
	left: calc(884 / 930 * 100%);
	width: calc(30 / 930 * 100%);
}
@media screen and (max-width: 1336px) {
}
@media screen and (max-width: 977px) {
}
@media screen and (min-width: 768px) {
}
@media screen and (max-width: 767px) {
	.opening__unit--a {
		top: calc(var(--px) * 6);
		left: calc(var(--px) * 6);
		width: calc(var(--px) * 48.8);
	}
	.opening__unit--b {
		bottom: calc(var(--px) * 6);
		right: calc(var(--px) * 6);
		width: calc(var(--px) * 46.5);
	}
}


/* --------------------------------------------------
		c-bg__linewave
-------------------------------------------------- */
.c-bg__linewave.wave--01 {
	top: 0;
	height: 1200px;
}
.c-bg__linewave.wave--02 {
	bottom: 0;
	height: 1200px;
}
@media screen and (max-width: 1336px) {
}
@media screen and (min-width: 768px) {
}
@media screen and (max-width: 767px) {
	.c-bg__linewave.wave--01 {
		height: calc(var(--px) * 120);
	}
	.c-bg__linewave.wave--02 {
		height: calc(var(--px) * 180);
	}
}


/* --------------------------------------------------
		visual
-------------------------------------------------- */
.visual {
	position: relative;
}
.visual .u-cts {
	padding-top: 220px;
	padding-bottom: 120px;
}
.visual__list .item {
	padding: 0 15px;
}
.visual__list .item[data-type="square"] {
	width: 630px;
}
.visual__list .item[data-type="rectangle"] {
	width: 1097px;
}
.visual__list .item a {
	pointer-events: none;
}
.visual__list .item.slick-active a {
	pointer-events: auto;
}
.visual__list .item .button {
	position: relative;
	display: block;
}
.visual__list .item .button:after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	transition: opacity .3s ease;
}
.visual__list .item.is-active .button:after {
	opacity: 0;
}
.visual__list .slick-list {
	overflow: visible;
}
.visual__list .slick-arrow {
	position: absolute;
	z-index: 10;
	top: calc(50% - 32px);
	width: 30px;
	height: 64px;
	font-size: 0;
	background-size: contain;
}
.visual__list .slick-track {
	white-space: nowrap;
	letter-spacing: -0.4em;
}
.visual__list .slick-slide {
	display: inline-block;
	letter-spacing: 0em;
	float: none;
	vertical-align: top;
}
.visual__list .slick-arrow.slick-prev {
	left: -60px;
	background-image: url(../img/arrow_02.svg);
}
.visual__list .slick-arrow.slick-next {
	right: -60px;
	background-image: url(../img/arrow_01.svg);
}
.modal-campaign {
	max-width: 720px;
	margin: 0 auto;
	padding: 50px 0;
}
.modal-campaign__list {
	display: flex;
	flex-wrap: wrap;
	margin-top: -30px;
}
.modal-campaign__list li {
	width: 50%;
	padding: 30px 30px 0;
}
.modal-campaign__list li .button {
	position: relative;
	display: block;
	border-radius: 10px 10px;
}
.modal-campaign__list .button.btn--01 {
	box-shadow: 0 0 5px 5px rgba(29, 155, 240, 0.6);
}
.modal-campaign__list .button.btn--02 {
	box-shadow: 0 0 5px 5px rgba(236, 203, 52, 0.6);
}
.modal-campaign__list .button.btn--03 {
	box-shadow: 0 0 5px 5px rgba(52, 219, 80, 0.6);
}
.modal-campaign__list .button.btn--04 {
	box-shadow: 0 0 5px 5px rgba(245, 88, 162, 0.6);
}
.modal-campaign__list .button span {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: 10px 10px;
}
.modal-campaign__list .button.coming {
	opacity: 0.6;
	box-shadow: 0 0 5px 5px rgba(160, 160, 160, 0.6);
}
.modal-campaign__list .button.coming span:after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #000000;
	mix-blend-mode: saturation;
}
@media screen and (max-width: 1377px) {
	.visual__list .slick-arrow.slick-prev {
		left: calc((100vw - 1337px) * -0.5 - 40px);
	}
	.visual__list .slick-arrow.slick-next {
		right: calc((100vw - 1337px) * -0.5 - 40px);
	}
}
@media screen and (max-width: 1336px) {
	.visual__list .slick-arrow.slick-prev {
		left: calc(-60 / 1320 * 100% + 15px);
	}
	.visual__list .slick-arrow.slick-next {
		right: calc(-60 / 1320 * 100% + 15px);
	}
}
@media screen and (max-width: 1117px) {
	.visual__list .item[data-type="square"] {
		width: calc(100vw / 1117 * 630);
	}
	.visual__list .item[data-type="rectangle"] {
		width: calc(100vw / 1117 * 1097);
	}
}
@media screen and (min-width: 768px) {
	.visual__list .slick-arrow {
		transition: transform .3s ease;
	}
	.visual__list .slick-arrow:hover {
		transform: scale(1.05);
	}
	.modal-campaign__list a.button {
		transition: transform .3s ease;
	}
	.modal-campaign__list a.button:hover {
		transform: scale(0.98);
	}
}
@media screen and (max-width: 767px) {
	.visual .u-cts {
		padding-top: calc(var(--px) * 23);
		padding-bottom: calc(var(--px) * 24);
	}
	.visual__list .item {
		padding: 0 calc(var(--px) * 1.5);
	}
	.visual__list .item[data-type="square"] {
		width: calc(100vw / 750 * 480);
	}
	.visual__list .item[data-type="rectangle"] {
		width: calc(100vw / 750 * 480);
	}
	.visual__list .slick-arrow {
		top: calc(50% - var(--px) * 1.6);
		width: calc(var(--px) * 3);
		height: calc(var(--px) * 6.4);
	}
	.visual__list .slick-arrow.slick-prev {
		left: calc(var(--px) * -3);
	}
	.visual__list .slick-arrow.slick-next {
		right: calc(var(--px) * -3);
	}
}


/* --------------------------------------------------
		intro
-------------------------------------------------- */
.intro .u-cts {
	padding-bottom: 60px;
	z-index: 2;
}
.intro-cols {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}
.intro__movie {
	flex: 1;
	padding-left: calc(60 / 1200 * 100%);
}
.intro__body {
	width: calc(360 / 1200 * 100%);
}
.intro__main {
	position: relative;
	z-index: 1;
}
.intro__title {
	font-size: 2.0rem;
	font-weight: 700;
	margin-bottom: 15px;
}
.intro__text {
	font-weight: 300;
	margin-bottom: 30px;
}
.intro__button .c-button--c {
	width: 100%;
	max-width: 360px;
	margin: 0 0;
}
.intro__button .c-button--c span {
	-webkit-mask-image: url(../img/btn_download_coming.svg);
	mask-image: url(../img/btn_download_coming.svg);
}
.campaign {
	display: none;
}
@media screen and (max-width: 1336px) {
}
@media screen and (max-width: 1090px) {
	.intro__title .b01 {
		display: none;
	}
}
@media screen and (max-width: 977px) {
	.intro-cols {
		display: block;
	}
	.intro__movie {
		padding-left: 0;
	}
	.intro__body {
		width: 100%;
		margin-bottom: 40px;
	}
	.intro__button .c-button--c {
		max-width: 300px;
		margin: 0 auto;
	}
}
@media screen and (max-width: 767px) {
	.intro .u-cts {
		padding-bottom: calc(var(--px) * 9);
	}
	.intro__movie {
		margin: 0 calc(-30 / 630 * 100%);
	}
	.intro__body {
		margin-bottom: calc(var(--px) * 12);
	}
	.intro__title {
		font-size: calc(var(--px) * 3.6);
		margin-bottom: calc(var(--px) * 3);
	}
	.intro__text {
		margin-bottom: calc(var(--px) * 6);
	}
	.intro__button {
		margin-bottom: calc(var(--px) * 8);
	}
	.intro__button .c-button--c {
		max-width: none;
	}
	.campaign {
		display: block;
		margin-bottom: calc(var(--px) * 12);
	}
	.campaign__list {
		display: flex;
		flex-wrap: wrap;
		margin: calc(var(--px) * -3) calc(-45 / 630 * 100%) 0;
	}
	.campaign__list li {
		width: 50%;
		padding: calc(var(--px) * 3) calc(15 / 720 * 100%) 0;
	}
	.campaign__list .button {
		position: relative;
		display: block;
		border-radius: calc(var(--px) * 1) calc(var(--px) * 1);
	}
	.campaign__list .button.btn--01 {
		box-shadow: 0 0 calc(var(--px) * 0.5) calc(var(--px) * 0.5) rgba(29, 155, 240, 0.6);
	}
	.campaign__list .button.btn--02 {
		box-shadow: 0 0 calc(var(--px) * 0.5) calc(var(--px) * 0.5) rgba(236, 203, 52, 0.6);
	}
	.campaign__list .button.btn--03 {
		box-shadow: 0 0 calc(var(--px) * 0.5) calc(var(--px) * 0.5) rgba(52, 219, 80, 0.6);
	}
	.campaign__list .button.btn--04 {
		box-shadow: 0 0 calc(var(--px) * 0.5) calc(var(--px) * 0.5) rgba(245, 88, 162, 0.6);
	}
	.campaign__list .button span {
		position: relative;
		display: block;
		overflow: hidden;
		border-radius: calc(var(--px) * 1) calc(var(--px) * 1);
	}
	.campaign__list .button.coming {
		opacity: 0.6;
		box-shadow: 0 0 5px 5px rgba(160, 160, 160, 0.6);
	}
	.campaign__list .button.coming span:after {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: #000000;
		mix-blend-mode: saturation;
	}
}


/* --------------------------------------------------
		sns-check
-------------------------------------------------- */
.snscheck .u-cts {
	padding-bottom: 60px;
	z-index: 2;
}
.snscheck-cols {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 30px 30px;
	border: 1px solid rgba(255, 255, 255, 0.5);
}
.snscheck__text {
	font-size: 2.0rem;
	margin-right: 15px;
}
.snscheck__list {
	display: flex;
}
.snscheck__list li {
	width: 40px;
	margin: 0 5px;
}
@media screen and (max-width: 1336px) {
}
@media screen and (max-width: 977px) {
}
@media screen and (min-width: 768px) {
	.snscheck__list li a {
		display: block;
		transition: transform .3s ease;
	}
	.snscheck__list li a:hover {
		transform: scale(1.1);
	}
}
@media screen and (max-width: 767px) {
	.snscheck .u-cts {
		padding-bottom: calc(var(--px) * 5);
	}
	.snscheck-cols {
		display: block;
		padding: calc(var(--px) * 4) calc(30 / 630 * 100%);
	}
	.snscheck__text {
		text-align: center;
		font-size: calc(var(--px) * 2.6);
		margin: 0 0 calc(var(--px) * 1);
	}
	.snscheck__list {
		justify-content: center;
	}
	.snscheck__list li {
		width: calc(var(--px) * 6);
		margin: 0 calc(var(--px) * 1);
	}
}


/* --------------------------------------------------
		news
-------------------------------------------------- */
.news .u-cts {
	padding-bottom: 300px;
	z-index: 2;
}
.news__list {
	position: relative;
	overflow: hidden;
}
.news__list li + li {
	border-top: 1px solid rgba(51, 51, 51, 0.9);
}
.news__list li.hidden {
	display: none;
}
.news__list .button {
	position: relative;
	display: flex;
	align-items: flex-start;
	padding: 20px 20px;
}
.news__list .button:before {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	transform: scale(0, 1);
	transform-origin: right top;
	background-color: #ffffff;
}
.news__list .button .info {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	margin-right: 20px;
}
.news__list .button .info .date {
	color: #999999;
	margin-right: 20px;
}
.news__list .button .info .category {
	background-color: #ffffff;
	color: #000000;
	font-size: 1.4rem;
	line-height: 1;
	padding: 3px 3px;
	width: 120px;
	text-align: center;
}
.news__list .button .text {
	position: relative;
	z-index: 1;
	flex: 1;
	font-weight: 300;
}
.news-toggle__button {
	display: block;
	text-align: center;
	font-weight: 300;
	padding: 15px 0;
	border: 1px solid rgba(51, 51, 51, 0.9);
}
@media screen and (max-width: 1336px) {
}
@media screen and (max-width: 977px) {
}
@media screen and (min-width: 768px) {
	.news__list a.button:before {
		transition: transform .3s ease;
	}
	.news__list a.button:hover:before {
		transform: scale(1, 1);
		transform-origin: left top;
	}
	.news__list a.button .info .category {
		transition: color .3s ease,
					background-color .3s ease;
	}
	.news__list a.button:hover .info .category {
		color: #ffffff;
		background-color: #000000;
	}
	.news__list a.button .text {
		transition: color .3s ease;
	}
	.news__list a.button:hover .text {
		color: #000000;
	}
	.news-toggle__button {
		transition: color .3s ease;
	}
	.news-toggle__button:hover {
		color: #888888;
	}
}
@media screen and (max-width: 767px) {
	.news .u-cts {
		padding-bottom: calc(var(--px) * 24);
	}
	.news__list .button {
		display: block;
		padding: calc(var(--px) * 4) 0;
	}
	.news__list .button:before {
		content: none;
	}
	.news__list .button .info {
		margin: 0 0 calc(var(--px) * 1);
	}
	.news__list .button .info .date {
		margin-right: calc(var(--px) * 2);
		font-size: calc(var(--px) * 2.4);
	}
	.news__list .button .info .category {
		font-size: calc(var(--px) * 2);
		padding: calc(var(--px) * 0.6) calc(var(--px) * 0.6);
		width: calc(var(--px) * 18);
	}
	.news-toggle__button {
		padding: calc(var(--px) * 2) 0;
	}
}


/* --------------------------------------------------
		about
-------------------------------------------------- */
.about .u-cts {
	padding-bottom: 180px;
	z-index: 2;
}
.about__box {
	padding: 90px calc(90 / 1200 * 100%);
	background-color: rgba(0, 0, 0, 0.85);
	border: 1px solid #000000;
	border-image: linear-gradient(135deg, #ffd5b4, #ff9bcb, #bdc8ff);
	border-image-slice: 1;
}
.about__logo {
	width: 362px;
	margin: 0 auto 40px;
}
.about__title {
	text-align: center;
	font-size: 0;
	margin-bottom: 30px;
}
.about__text {
	text-align: center;
	margin-bottom: 20px;
}
.about__free {
	text-align: center;
	margin-bottom: 40px;
}
.about__free span {
	display: inline-block;
	font-weight: 700;
	width: 120px;
	letter-spacing: 0.1em;
	border: 1px solid #ffffff;
}
.about__list {
	max-width: 640px;
	margin: 0 auto;
}
.about__list li {
	padding: 10px 10px;
	background-color: #ffffff;
	color: #000000;
	display: flex;
}
.about__list li + li {
	margin-top: 1px;
}
.about__list li .title {
	color: #ffffff;
	width: 90px;
	margin-right: 20px;
	text-align: center;
}
.about__list li .title span {
	position: relative;
	display: block;
	height: 100%;
	font-size: 1.4rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	background-color: #000000;
	margin-right: 10px;
	padding-top: 2px;
}
.about__list li .title span:after {
	content: "";
	position: absolute;
	top: 0;
	right: -10px;
	width: 10px;
	height: 100%;
	background-image: url(../img/bg_01.svg);
	background-position: right center;
	background-size: 200% 100%;
}
.about__list li .text {
	display: flex;
}
.about__list li .text .c-button--b {
	vertical-align: bottom;
}
@media screen and (max-width: 1336px) {
}
@media screen and (max-width: 977px) {
}
@media screen and (min-width: 768px) {
}
@media screen and (max-width: 767px) {
	.about .u-cts {
		padding-bottom: calc(var(--px) * 24);
	}
	.about__box {
		padding: calc(var(--px) * 8) calc(58 / 630 * 100%) calc(var(--px) * 5.8);
		margin: 0 calc(-30 / 630 * 100%);
	}
	.about__logo {
		width: calc(362 / 570 * 100%);
		margin-bottom: calc(var(--px) * 4);
	}
	.about__title {
		width: calc(264 / 570 * 100%);
		margin: 0 auto calc(var(--px) * 6);
	}
	.about__text {
		text-align: center;
		margin-bottom: calc(var(--px) * 3);
	}
	.about__free {
		margin-bottom: calc(var(--px) * 6);
	}
	.about__free span {
		width: calc(200 / 570 * 100%);
	}
	.about__list {
		max-width: none;
	}
	.about__list li {
		padding: calc(var(--px) * 2) calc(var(--px) * 2);
		display: block;
	}
	.about__list li + li {
		margin-top: calc(var(--px) * 1);
	}
	.about__list li .title {
		width: calc(160 / 530 * 100%);
		margin: 0 auto calc(var(--px) * 1);
		padding: 0 calc(15 / 530 * 100%);
	}
	.about__list li .title span {
		font-size: calc(var(--px) * 2.4);
		margin-right: 0;
		padding-top: 0;
	}
	.about__list li .title span:after {
		right: calc(-15 / 130 * 100%);
		width: calc(15 / 130 * 100%);
	}
	.about__list li .title span:before {
		content: "";
		position: absolute;
		top: 0;
		left: calc(-15 / 130 * 100%);
		width: calc(15 / 130 * 100%);
		height: 100%;
		background-image: url(../img/bg_01.svg);
		background-position: left center;
		background-size: 200% 100%;
	}
	.about__list li .text {
		display: block;
		text-align: center;
	}
}


/* --------------------------------------------------
		timetable
-------------------------------------------------- */
.timetable .u-cts {
	padding-top: 80px;
	padding-bottom: 240px;
	background-color: #ffffff;
}
.timetable__title {
	width: 100%;
	max-width: 730px;
	margin: 0 auto 60px;
}
.timetable .p-timetable__download .btn--01 span {
	-webkit-mask-image: url(../img/btn_day1.svg);
	mask-image: url(../img/btn_day1.svg);
}
.timetable .p-timetable__download .btn--02 span {
	-webkit-mask-image: url(../img/btn_day2.svg);
	mask-image: url(../img/btn_day2.svg);
}
@media screen and (max-width: 1336px) {
}
@media screen and (max-width: 977px) {
}
@media screen and (min-width: 768px) {
}
@media screen and (max-width: 767px) {
	.timetable .u-cts {
		padding-top: calc(var(--px) * 18);
		padding-bottom: calc(var(--px) * 18);
	}
	.timetable__title {
		max-width: none;
		margin-bottom: calc(var(--px) * 7);
	}
}


/* --------------------------------------------------
		stage
-------------------------------------------------- */
.stage .u-cts {
	padding-bottom: 320px;
}
.stage .u-cts:before {
	content: "";
	position: absolute;
	top: -80px;
	left: 0;
	width: 100%;
	height: calc(100% + 80px);
	background-image: url(../img/bg_03.png);
	background-position: center top;
	background-repeat: no-repeat;
	background-size: 1920px auto;
}
.stage .u-cts:after {
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	width: 100%;
	height: 120px;
	background-color: #ffffff;
}
.stage-cols {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: flex-end;
	margin-bottom: 20px;
}
.stage__image {
	flex: 1;
	margin-left: -120px;
}
.stage__title {
	width: 90px;
	padding-top: 150px;
	margin-left: calc(120 / 1200 * 100%);
}
.stage__text {
	position: relative;
	z-index: 1;
	font-weight: 300;
}
@media screen and (max-width: 1457px) {
	.stage__image {
		margin-left: calc((100vw - 1337px) * -0.5 - 60px);
	}
}
@media screen and (max-width: 1336px) {
	.stage__image {
		margin-left: calc(60 / 1200 * -100%);
	}
}
@media screen and (max-width: 977px) {
}
@media screen and (min-width: 768px) {
}
@media screen and (max-width: 767px) {
	.stage .u-cts {
		padding-bottom: calc(var(--px) * 18);
	}
	.stage .u-cts:before {
		top: calc(var(--px) * -6);
		height: calc(100% + var(--px) * 6);
		background-position: -12% 0;
		background-size: 260% auto;
	}
	.stage .u-cts:after {
		height: calc(var(--px) * 9);
	}
	.stage-cols {
		display: block;
		margin-bottom: 0;
	}
	.stage__image {
		flex: 1;
		margin-left: calc(-60 / 630 * 100%);
	}
	.stage__title {
		width: calc(94 / 630 * 100%);
		padding-top: calc(var(--px) * 9);
		margin: 0 calc(-30 / 630 * 100%) 0 auto
	}
	.stage__text {
		position: absolute;
		top: calc(var(--px) * 47);
		left: calc(60 / 750 * 100%);
		width: calc(520 / 750 * 100%);
	}
}


/* --------------------------------------------------
		map
-------------------------------------------------- */
.map .u-cts {
	padding-top: 180px;
	padding-bottom: 180px;
	background-image: url(../img/top/map_02.jpg);
	background-position: center top;
	background-repeat: no-repeat;
	background-size: 100% auto;
}
.map .u-cts:before {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 400px;
	background: linear-gradient(to top, rgba(0, 0, 0, 1.0), rgba(0, 0, 0, 0));
}
.map__title {
	width: 291px;
	margin: 0 auto 50px;
}
.map__text {
	text-align: center;
	margin-bottom: 60px;
}
.map-maps {
	position: relative;
	z-index: 1;
	max-width: 1080px;
	margin: 0 auto;
}
.map-maps [class*=frame] {
	position: absolute;
	z-index: 1;
	display: block;
	width: 60px;
	height: 60px;
	pointer-events: none;
}
.map-maps .frame--01 {
	top: 0;
	left: 0;
	border-top: 2px solid #ffffff;
	border-left: 2px solid #ffffff;
	opacity: 0;
}
.map-maps .frame--02 {
	top: 0;
	right: 0;
	border-top: 2px solid #ffffff;
	border-right: 2px solid #ffffff;
	opacity: 0;
}
.map-maps .frame--03 {
	bottom: 0;
	left: 0;
	border-bottom: 2px solid #ffffff;
	border-left: 2px solid #ffffff;
	opacity: 0;
}
.map-maps .frame--04 {
	bottom: 0;
	right: 0;
	border-bottom: 2px solid #ffffff;
	border-right: 2px solid #ffffff;
	opacity: 0;
}
.map-maps .inner {
	position: relative;
	padding: 60px calc(60 / 1200 * 100%);
	background-color: #000000;
	opacity: 0;
}
.map-maps .slideIn {
	position: relative;
	overflow: hidden;
}
.map-cols {
	position: relative;
	display: flex;
}
.map-cols .col {
	position: relative;
	width: 50%;
	opacity: 0;
}
@media screen and (max-width: 1336px) {
}
@media screen and (max-width: 977px) {
}
@media screen and (min-width: 768px) {
}
@media screen and (max-width: 767px) {
	.map .u-cts {
		padding-top: calc(var(--px) * 18);
		padding-bottom: calc(var(--px) * 18);
		background-image: url(../img/top/map_02_sp.jpg);
	}
	.map .u-cts:before {
		height: calc(var(--px) * 40);
	}
	.map__title {
		width: calc(256 / 630 * 100%);
		margin-bottom: calc(var(--px) * 6);
	}
	.map__text {
		margin-bottom: calc(var(--px) * 9);
	}
	.map-maps {
		max-width: none;

		margin: 0 calc(-30 / 630 * 100%);
	}
	.map-maps [class*=frame] {
		width: calc(var(--px) * 6);
		height: calc(var(--px) * 6);
	}
	.map-maps .inner {
		padding: calc(var(--px) * 6) calc(30 / 630 * 100%);
	}
	.map-cols {
		display: block;
	}
	.map-cols .col {
		width: 100%;
	}
}


/* --------------------------------------------------
		contents
-------------------------------------------------- */
.contents .u-cts {
	padding-bottom: 140px;
}
.contents .bg-light--01 {
	position: absolute;
	top: -100px;
	left: calc(50% - 1000px);
	width: 200px;
	height: 200px;
	background-color: #ffaa77;
	border-radius: 50% 50%;
	box-shadow: 0 0 300px 300px #ffaa77;
	opacity: 0.2;
}
.contents .bg-light--02 {
	position: absolute;
	bottom: -100px;
	left: calc(50% + 800px);
	width: 200px;
	height: 200px;
	background-color: #a956cc;
	border-radius: 50% 50%;
	box-shadow: 0 0 300px 300px #a956cc;
	opacity: 0.2;
}
.contents__title {
	width: 100%;
	max-width: 718px;
	margin: 50px auto;
}
.contents__list {
	display: flex;
	margin: 0 -100px;
}
.contents__list li {
	width: 50%;
	padding: 0 calc(20 / 1400 * 100%);
}
.contents__list li img {
	opacity: 0;
}
.contents__list .slideIn {
	position: relative;
	overflow: hidden;
}
.contents__list .panel {
	position: relative;
	display: block;
	overflow: hidden;
	font-size: 0;
}
.contents__list .date {
	position: absolute;
	overflow: hidden;
	top: calc(40 / 500 * 100%);
	left: 50%;
	transform: translateX(-50%);
}
.contents__list .item--01 .date {
	width: calc(214 / 800 * 100%);
}
.contents__list .item--02 .date {
	width: calc(220 / 800 * 100%);
}
.contents__list .item--03 .date {
	width: calc(466 / 800 * 100%);
}
.contents__list .item--04 .date {
	width: calc(466 / 800 * 100%);
}
.contents__list .category {
	position: absolute;
	overflow: hidden;
	top: calc(160 / 500 * 100%);
	left: 50%;
	transform: translateX(-50%);
}
.contents__list .title {
	position: absolute;
	overflow: hidden;
	top: calc(210 / 500 * 100%);
	left: 50%;
	transform: translateX(-50%);
}
.contents__list .button {
	position: absolute;
	overflow: hidden;
	width: calc(320 / 800 * 100%);
	top: calc(410 / 500 * 100%);
	left: 50%;
	transform: translateX(-50%);
}
.contents__list .item--01 .title {
	width: calc(566 / 800 * 100%);
}
.contents__list .item--02 .title {
	width: calc(434 / 800 * 100%);
}
.contents__list .item--03 .title {
	width: calc(372 / 800 * 100%);
}
.contents__list .item--04 .title {
	width: calc(468 / 800 * 100%);
}
.contents__list .item--01 .category,
.contents__list .item--02 .category {
	width: calc(104 / 800 * 100%);
}
.contents__list .item--03 .category,
.contents__list .item--04 .category {
	width: calc(178 / 800 * 100%);
}
@media screen and (max-width: 1377px) {
	.contents__list {
		margin: 0 calc((100vw - 1337px) * -0.5 - 80px);
	}
}
@media screen and (max-width: 1336px) {
	.contents__list {
		margin: 0 calc(60 / 1200 * -100% - 20px);
	}
}
@media screen and (max-width: 977px) {
}
@media screen and (min-width: 768px) {
	.contents__list a.panel > img {
		transition: transform .3s ease;
	}
	.contents__list a.panel:hover > img {
		transform: scale(1.03);
	}
	.contents__list a.panel .date,
	.contents__list a.panel .title,
	.contents__list a.panel .category {
		transition: opacity .3s ease;
	}
	.contents__list a.panel:hover .date,
	.contents__list a.panel:hover .title,
	.contents__list a.panel:hover .category {
		opacity: 0.2;
	}
	.contents__list a.panel .button {
		transition: transform .3s ease;
	}
	.contents__list a.panel:hover .button {
		transform: translateX(-50%) scale(1.03);
	}
}
@media screen and (max-width: 767px) {
	.contents .u-cts {
		padding-bottom: calc(var(--px) * 18);
	}
	.contents .bg-light--01 {
		top: calc(var(--px) * -80);
		left: -20%;
		width: calc(var(--px) * 20);
		height: calc(var(--px) * 20);
		box-shadow: 0 0 calc(var(--px) * 20) calc(var(--px) * 20) #ffaa77;
	}
	.contents .bg-light--02 {
		bottom: calc(var(--px) * -10);
		left: 70%;
		width: calc(var(--px) * 20);
		height: calc(var(--px) * 20);
		box-shadow: 0 0 calc(var(--px) * 20) calc(var(--px) * 20) #a956cc;
	}
	.contents__title {
		max-width: none;
		margin: calc(var(--px) * 9) calc(-2 / 630 * 100%);
	}
	.contents__list {
		margin: 0 calc(-65 / 630 * 100%);
	}
	.contents__list li {;
		padding: 0 calc(5 / 760 * 100%);
	}
}


/* --------------------------------------------------
		experience
-------------------------------------------------- */
@media screen and (max-width: 1336px) {
}
@media screen and (min-width: 768px) {
}
@media screen and (max-width: 767px) {
}


/* --------------------------------------------------
		qanda
-------------------------------------------------- */
.qanda .u-cts {
	padding-bottom: 180px;
}
.qanda__title {
	width: 290px;
	margin: 0 auto 25px;
}
.qanda__text {
	font-size: 2.0rem;
	font-weight: 700;
	text-align: center;
	margin-bottom: 30px;
}
.qanda-qa__button {
	margin-bottom: 30px;
}
.qanda-qa__button .c-button--c span {
	-webkit-mask-image: url(../img/top/btn_qanda_coming.svg);
	mask-image: url(../img/top/btn_qanda_coming.svg);
}
.qanda-press__button {
	font-weight: 300;
	text-align: center;
}
@media screen and (max-width: 1336px) {
}
@media screen and (max-width: 977px) {
}
@media screen and (min-width: 768px) {
}
@media screen and (max-width: 767px) {
	.qanda .u-cts {
		padding-bottom: calc(var(--px) * 18);
	}
	.qanda__title {
		width: calc(256 / 630 * 100%);
		margin-bottom: calc(var(--px) * 4);
	}
	.qanda__text {
		font-size: calc(var(--px) * 3.2);
		margin-bottom: calc(var(--px) * 6);
	}
	.qanda-qa__button {
		margin-bottom: calc(var(--px) * 3);
	}
}


/* --------------------------------------------------
		※※※※※
-------------------------------------------------- */
@media screen and (max-width: 1336px) {
}
@media screen and (min-width: 768px) {
}
@media screen and (max-width: 767px) {
}