@charset "Shift_JIS";

/* --------------------------------------------------
 Base
 -------------------------------------------------- */

body {
	position: relative;
	font-family: "Noto Sans JP","ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif;
}

body::after {
	content: "";
	position: absolute;
	top: 144px;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
	background: url(/sponsorship/dance/resources/images/bg_body_pc.jpg) center top / cover no-repeat;
}

@media only screen and (max-width: 768px) {
	body::after {
		top: 83px;
		background-image: url(/sponsorship/dance/resources/images/bg_body_sp.jpg);
	}

	body#index {
		background-color: #000;
	}

	body#index::after {
		content: none;
	}
}

a {
	transition: .3s;
}

/* display */
.display-pc {}
@media only screen and (max-width: 768px) {
	.display-pc {
		display: none !important;
	}
}
.display-sp { display: none;}
@media only screen and (max-width: 768px) {
	.display-sp {
		display: block !important;
	}
}

/* Responsive image */
img[src*="_sp."] {
	display: none;
}
@media only screen and (max-width: 768px) {
	img[src*="_pc."] {
		display: none;
	}
	img[src*="_sp."] {
		display: inline;
	}
}

/* fadeIn */
@keyframes fadeIn {
	0% { visibility: hidden; opacity: 0;}
	100% { opacity: 1;}
}

/* visualAnimation */
@keyframes visualAnimationBG {
	0% { width: 0;}
	100% { width: 100%;}
}

@keyframes visualAnimationHeadline {
	0% { opacity: 0; translate: 0 30px;}
	100% { opacity: 1; translate: 0;}
}

/* scrollAnimation */
[data-scroll] {
	opacity: 0;
	translate: 30px 0;
	transition: opacity .6s cubic-bezier(.55,.055,.675,.19), translate .6s cubic-bezier(.55,.055,.675,.19);
}

[data-scroll="in-top"] {
	translate: 0 30px;
}

[data-scroll="fade-in"] {
	translate: 0;
}

[data-scroll].is-active {
	opacity: 1;
	translate: 0;
	transition: opacity 1.2s cubic-bezier(.37,.16,.12,1), translate 1.2s cubic-bezier(.37,.16,.12,1);
}

[data-scroll].is-active[data-scroll-delay="100"] {
	transition-delay: .1s;
}

[data-scroll].is-active[data-scroll-delay="200"] {
	transition-delay: .2s;
}

[data-scroll].is-active[data-scroll-delay="300"] {
	transition-delay: .3s;
}

[data-scroll].is-active[data-scroll-delay="400"] {
	transition-delay: .4s;
}

[data-scroll].is-active[data-scroll-delay="500"] {
	transition-delay: .5s;
}

[data-scroll].is-active[data-scroll-delay="600"] {
	transition-delay: .6s;
}

[data-scroll].is-active[data-scroll-delay="700"] {
	transition-delay: .7s;
}

[data-scroll].is-active[data-scroll-delay="800"] {
	transition-delay: .8s;
}

[data-scroll].is-active[data-scroll-delay="900"] {
	transition-delay: .9s;
}

[data-scroll].is-active[data-scroll-delay="1000"] {
	transition-delay: 1s;
}

/* wrap */
.wrap {
	box-sizing: content-box;
	max-width: 1200px;
	margin-right: auto;
	margin-left: auto;
	padding-right: 18px;
	padding-left: 18px;
}

.wrap.-narrow {
	max-width: 1000px;
}

.wrap.-min {
	max-width: 605px;
}

@media screen and (max-width: 768px) {
	.wrap {
		padding-right: calc(62 / 375 * 100vw);
		padding-left: calc(62 / 375 * 100vw);
	}
}

/* header */
#header-content .header-inner>.inner {
	position: relative;
	height: 104px;
}

@media screen and (max-width: 767px) {
	#header-content .header-inner>.inner {
		height: 44px;
	}
}

/* nav-menu */
.nav-menu {
	position: absolute;
	top: 50%;
	right: 40px;
	width: 40px;
	height: 40px;
	z-index: 200;
	cursor: pointer;
	text-indent: -9999px;
	transform: translateY(-50%);
	outline: 0;
}
.nav-menu:hover::before { transform: translateY(1px);}
.nav-menu:hover::after { transform: translateY(-1px);}

.nav-menu[aria-expanded="true"]::before,
.nav-menu[aria-expanded="true"]::after {
	background-color: #fff;
}
.nav-menu[aria-expanded="true"]::before {
	transform: translateY(5px) rotate(-45deg);
}
.nav-menu[aria-expanded="true"]::after {
	transform: translateY(-5px) rotate(45deg);
}

.nav-menu::before,
.nav-menu::after {
	display: inline-block;
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: #000;
	transition: transform .3s;
}

.nav-menu::before,
.nav-menu::after {
	content: "";
	will-change: transform;
}
.nav-menu::before { top: 14px;}
.nav-menu::after { bottom: 14px;}

@media screen and (max-width: 767px) {
	.nav-menu {
		right: 18px;
		width: 21px;
		height: 21px;
	}

	.nav-menu[aria-expanded="true"]::before {
		transform: translateY(3px) rotate(-45deg);
	}
	.nav-menu[aria-expanded="true"]::after {
		transform: translateY(-3px) rotate(45deg);
	}

	.nav-menu::before,
	.nav-menu::after {
		height: 1px;
	}

	.nav-menu::before { top: 7px;}
	.nav-menu::after { bottom: 7px;}
}

/* nav-global */
.nav-global {
	visibility: hidden;
	opacity: 0;
	display: flex !important;
	align-items: center;
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
}

.nav-global[aria-hidden=false] {
	visibility: visible;
	opacity: 1;
	z-index: 100;
}

.nav-global[aria-hidden=false] .nav-global__overlay {
	visibility: visible;
	opacity: 1;
}

.nav-global[aria-hidden=false] .nav-global__contents {
	visibility: visible;
	opacity: 1;
	transition-delay: 0s;
}

.nav-global[aria-hidden=false] .nav-global__list li {
	visibility: visible;
	opacity: 1;
	transform: translateY(0);
}

.nav-global[aria-hidden=false] .nav-global__list li:nth-child(1) {
	transition-delay: .5s
}

.nav-global[aria-hidden=false] .nav-global__list li:nth-child(2) {
	transition-delay: .55s
}

.nav-global[aria-hidden=false] .nav-global__list li:nth-child(3) {
	transition-delay: .6s
}

.nav-global[aria-hidden=false] .nav-global__list li:nth-child(4) {
	transition-delay: .65s
}

.nav-global[aria-hidden=false] .nav-global__list li:nth-child(5) {
	transition-delay: .7s
}

.nav-global[aria-hidden=false] .nav-global__list li:nth-child(6) {
	transition-delay: .75s
}

.nav-global[aria-hidden=false] .nav-global__list li:nth-child(7) {
	transition-delay: .8s
}

.nav-global[aria-hidden=false] .nav-global__list li:nth-child(8) {
	transition-delay: .85s
}

.nav-global[aria-hidden=false] .nav-global__list li:nth-child(9) {
	transition-delay: .9s
}

.nav-global__overlay {
	visibility: hidden;
	opacity: 0;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transition: .5s;
}

.nav-global__contents {
	visibility: hidden;
	opacity: 0;
	box-sizing: content-box;
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 3;
	background-color: rgba(0, 0, 0, .9);
	transition: .5s cubic-bezier(.215, .61, .355, 1) .3s;
}

.nav-global__inner {
	overflow-x: hidden;
	overflow-y: auto;
	-ms-overflow-style: none;
	-webkit-overflow-scrolling: touch;
	padding-top: 40px;
	padding-bottom: 40px;
	text-align: center;
}

.nav-global__list {
	display: inline-block;
}
.nav-global__list li {
	visibility: hidden;
	opacity: 0;
	font-size: 2rem;
	transform: translateY(20px);
	transition: opacity .5s cubic-bezier(.215, .61, .355, 1), transform .5s cubic-bezier(.215, .61, .355, 1);
}

.nav-global__list li:not(:first-child) {
	margin-top: 25px;
}

.nav-global__list li a {
	color: #fff
}
.nav-global__list li a:hover {
	text-decoration: underline;
}

@media screen and (max-width: 767px) {
	.nav-global__list {
		text-align: left;
	}
	.nav-global__list li {
		font-size: 1.6rem;
	}
}

/* main */
@media screen and (max-width: 767px) {
	#main-area {
    padding-top: 83px;
	}
}

/* footer */
#footer-content {
	margin-top: 0;
}

/* footer-unit */
.footer-unit {
	display: flex;
}

.footer-unit__item {
	flex-basis: calc(100% / 3);
	max-width: calc(100% / 3);
	padding-right: 30px;
	font-size: 1.2rem;
}
.footer-unit__item:not(:first-child) {
	border-left: 1px solid #2b2b2b;
	padding-left: 30px;
}

.footer-unit__list li:not(:first-child) {
	margin-top: 15px;
}

.footer-unit__sns {}
.footer-unit__sns div {
	display: flex;
}
.footer-unit__sns div:not(:first-child) {
	margin-top: 25px;
}
.footer-unit__sns dt {
	flex-shrink: 0;
	align-self: center;
	margin-right: 35px;
}
.footer-unit__sns dd {
	flex: 1;
}
.footer-unit__sns ul {
	display: flex;
	flex-wrap: wrap;
	margin-left: -20px;
}
.footer-unit__sns li {
	flex-basis: 28px;
	margin-left: 20px;
}

@media screen and (max-width: 1024px) {
	.footer-unit__sns div {
		display: block;
	}
	.footer-unit__sns dt {
		margin-bottom: 10px;
	}
}

@media screen and (max-width: 767px) {
	.footer-unit {
		display: block;
		margin-top: -15px;
		margin-bottom: -15px;
	}

	.footer-unit__item {
		max-width: none;
		padding: 15px 0;
	}
	.footer-unit__item:not(:first-child) {
		border-top: 1px solid #fff;
		border-left: 0;
		padding-left: 0;
	}

	.footer-unit__sns div {
		display: flex;
	}
	.footer-unit__sns div:not(:first-child) {
		margin-top: 15px;
	}
	.footer-unit__sns dt {
		margin-bottom: 0;
	}
}


/* --------------------------------------------------
 Component
 -------------------------------------------------- */

/* group-headline */
.group-headline {
	text-align: center;
}

.group-headline__en {
	font-size: 5rem;
	font-weight: 700;
	line-height: 1;
}

.group-headline__jp {
	margin-top: 10px;
	font-size: 2.8rem;
}

@media screen and (max-width: 767px) {
	.group-headline__en {
		font-size: 3rem;
	}

	.group-headline__jp {
		margin-top: 5px;
		font-size: 1.8rem;
	}
}

/* INDEX
------------------------------ */

/* visual */
.visual {
	position: relative;
	z-index: 3;
	height: max(calc(889 / 1440 * 100vw), 889px);
}

.visual::before {
	content: "";
	position: absolute;
	inset: 0;
	background: url(/sponsorship/dance/resources/images/index_visual_bg_pc.png) left center / cover no-repeat;
	animation: visualAnimationBG 1s cubic-bezier(0.76, 0, 0.24, 1) 1.3s both;
}

.visual__headline {
	position: absolute;
	top: calc(50% + max(calc(78 / 1440 * 100vw), 78px));
	left: max(calc(60 / 1440 * 100vw), 60px);
	z-index: 3;
	line-height: 1;
	transform: translateY(-50%);
	animation: visualAnimationHeadline .8s 2s both;
}

.visual__headline img {
	width: max(calc(425 / 1440 * 100vw), 425px);
}

@media only screen and (max-width: 768px) {
	.visual {
		height: auto;
	}

	.visual::before {
		position: static;
		display: block;
		width: 100%;
		height: calc(502 / 375 * 100vw);
		background-image: url(/sponsorship/dance/resources/images/index_visual_bg_sp.png);
	}

	.visual__headline {
		position: static;
		margin-top: calc(40 / 375 * 100vw);
		padding-bottom: calc(80 / 375 * 100vw);
		padding-left: calc(16 / 375 * 100vw);
		text-align: center;
		transform: none;
		animation-delay: 1.5s;
	}
	.visual__headline img {
		width: calc(248 / 375 * 100vw);
	}
}

/* area-statement */
.area-statement {
	height: max(calc(1048 / 1440 * 100vw), 1048px);
	margin-top: -132px;
	padding-bottom: 92px;
}

.area-statement .wrap {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
}

.area-statement__list {
	margin-top: 52px;
}

.area-statement__list li:not(:first-child) {
	margin-top: 30px;
}

.area-statement__more {
	margin-top: 80px;
	text-align: right;
}
.area-statement__more a {
	overflow: hidden;
	display: inline-block;
	position: relative;
	padding: 0 46px 8px 8px;
	color: #fff;
	transition: .3s;
}
.area-statement__more a::before,
.area-statement__more a::after {
	content: "";
	position: absolute;
}
.area-statement__more a::before {
	bottom: 0;
	left: 0;
	width: calc(100% - 2px);
	border-bottom: 2px solid #fff;
}
.area-statement__more a::after {
	bottom: 0;
	right: 0;
	height: 30px;
	border-right: 2px solid #fff;
	transform: rotate(-47.5deg);
	transform-origin: 100% 100%;
}
.area-statement__more a:hover {
	margin-right: -14px;
	padding-right: 60px;
}
.area-statement__more a:hover img {
	opacity: 1;
}

@media only screen and (max-width: 768px) {
	.area-statement {
		height: calc(515 / 375 * 100vw);
		margin-top: 0;
		padding: calc(20 / 375 * 100vw) 0 0 calc(16 / 375 * 100vw);
		background: url(/sponsorship/dance/resources/images/index_detail_bg_sp.png) center / contain no-repeat;
	}

	.area-statement .wrap {
		width: fit-content;
		margin-inline: auto;
		padding-right: calc(16 / 375 * 100vw);
		padding-left: calc(16 / 375 * 100vw);
	}

	.area-statement__headline img {
		width: calc(283 / 375 * 100vw);
	}

	.area-statement__list {
		margin-top: calc(28 / 375 * 100vw);
	}

	.area-statement__list li:not(:first-child) {
		margin-top: calc(16 / 375 * 100vw);
	}

	.area-statement__list li[data-scroll-delay] {
		transition-delay: revert !important;
	}

	.area-statement__list li img[src*="_01"] {
		width: calc(190 / 375 * 100vw);
	}
	.area-statement__list li img[src*="_02"] {
		width: calc(260 / 375 * 100vw);
	}

	.area-statement__more {
		margin-top: calc(54 / 375 * 100vw);
		text-align: right;
	}
	.area-statement__more a {
		padding: 0 calc(28 / 375 * 100vw) calc(4 / 375 * 100vw) calc(4 / 375 * 100vw);
	}
	.area-statement__more a::before {
		width: calc(100% - calc(2 / 375 * 100vw));
		border-bottom-width: calc(2 / 375 * 100vw);
	}
	.area-statement__more a::after {
		height: calc(18 / 375 * 100vw);
		border-right-width: calc(2 / 375 * 100vw);
	}
	.area-statement__more a:hover {
		margin-right: 0;
		padding-right: calc(28 / 375 * 100vw);
	}
	.area-statement__more img {
		width: calc(72 / 375 * 100vw);
	}
}

/* area-movie */
.area-movie {
	position: relative;
	margin-top: -284px;
	padding-top: 120px;
	height: max(calc(1077 / 1440 * 100vw), 1077px);
	background: url(/sponsorship/dance/resources/images/index_movie_bg_pc.png) left center / cover no-repeat;
}

.area-movie .wrap {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
}

.area-movie__video {
	position: relative;
	margin-top: 50px;
}
.area-movie__video::before {
	content: "";
	display: block;
	padding-top: 56.25%;
}
.area-movie__video iframe,
.area-movie__video object,
.area-movie__video embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.area-movie__btn {
	margin-top: 92px;
	text-align: center;
}

@media only screen and (max-width: 768px) {
	.area-movie {
		margin-top: calc(-112 / 375 * 100vw);
		padding-top: calc(112 / 375 * 100vw);
		height: calc(513 / 375 * 100vw);
		background-image: url(/sponsorship/dance/resources/images/index_movie_bg_sp.png);
	}

	.area-movie__headline img {
		width: calc(209 / 375 * 100vw);
	}

	.area-movie__video {
		margin-top: calc(10 / 375 * 100vw);
	}

	.area-movie__btn {
		margin-top: calc(50 / 375 * 100vw);
	}
	.area-movie__btn img {
		width: calc(268 / 375 * 100vw);
	}
}

/* STATEMENT
------------------------------ */
.visual-statement {
	padding-top: 172px;
	padding-bottom: 192px;
}

.visual-statement .wrap {
	width: fit-content;
	margin-inline: auto;
}

.visual-statement__headline {
	line-height: 1;
}

.visual-statement__list {
	margin-top: 60px;
}

.visual-statement__list li {
	line-height: 1;
}
.visual-statement__list li:not(:first-child) {
	margin-top: 30px;
}

@media only screen and (max-width: 768px) {
	.visual-statement {
		padding: calc(84 / 375 * 100vw) 0 calc(108 / 375 * 100vw) calc(16 / 375 * 100vw);
	}

	.visual-statement .wrap {
		padding-right: calc(16 / 375 * 100vw);
		padding-left: calc(16 / 375 * 100vw);
	}

	.visual-statement__headline img {
		width: calc(283 / 375 * 100vw);
	}

	.visual-statement__list {
		margin-top: calc(28 / 375 * 100vw);
	}

	.visual-statement__list li:not(:first-child) {
		margin-top: calc(16 / 375 * 100vw);
	}

	.visual-statement__list li img[src*="_01"] {
		width: calc(190 / 375 * 100vw);
	}
	.visual-statement__list li img[src*="_02"] {
		width: calc(260 / 375 * 100vw);
	}
}

/* area-detail */
.area-detail {
	padding-top: 112px;
	padding-bottom: 210px;
	border-top: 4px solid #004831;
}

.area-detail__item {
	position: relative;
	padding-top: 60px;
	color: #fff;
}

.area-detail__item:not(:first-child) {
	margin-top: 180px;
	padding-top: 60px;
}
.area-detail__item:not(:first-child)::before {
	content: "";
	position: absolute;
	top: -60px;
	right: 0;
	left: 0;
	border-top: 4px solid;
}

.area-detail__headline {
}

.area-detail__text {
	margin-top: 40px;
}

.area-detail__text p {
	font-size: 2.5rem;
	letter-spacing: .006em;
	line-height: 1.8;
	text-align: justify;
}

.area-detail__text p:not(:first-child) {
	margin-top: 1.5em;
}

@media only screen and (max-width: 768px) {
	.area-detail {
		padding-top: calc(56 / 375 * 100vw);
		padding-bottom: calc(88 / 375 * 100vw);
		border-top-width: calc(2 / 375 * 100vw);
	}

	.area-detail__item {
		padding-top: calc(24 / 375 * 100vw);
	}

	.area-detail__item:not(:first-child) {
		margin-top: calc(72 / 375 * 100vw);
		padding-top: calc(24 / 375 * 100vw);
	}
	.area-detail__item:not(:first-child)::before {
		top: calc(-24 / 375 * 100vw);
		border-top: calc(2 / 375 * 100vw) solid #c4d700;
	}

	.area-detail__headline img[src*="_01"] {
		width: calc(190 / 375 * 100vw);
	}
	.area-detail__headline img[src*="_02"] {
		width: calc(260 / 375 * 100vw);
	}

	.area-detail__text {
		margin-top: calc(16 / 375 * 100vw);
	}

	.area-detail__text p {
		font-size: calc(14 / 375 * 100vw);
	}
}