@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap');
html,body,h1,h2,h3,h4,h5,h6,p,span,div,object,iframe,em,ul,ol,li,label,dl,dt,dd,form,label,table,tbody,tr,th,td { margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-style:inherit; font-family:inherit; list-style-type:none; list-style-image:none; } html { font-size:62.5%; overflow-y:scroll; } img { border:none; vertical-align:bottom; line-height:0; font-size:0; user-select:none; -webkit-user-select:none; -moz-user-select:none; -khtml-user-select:none; -webkit-user-drag:none; -khtml-user-drag:none; } body { background: #fff; margin:0 !important; font-family: 'Quicksand','Zen Kaku Gothic New',sans-serif; font-style: normal; font-weight: 400; font-optical-sizing: auto; line-height: 1.6; letter-spacing: 0; color: #222; } .clearfix { zoom:1; min-height: 1px; } .clearfix:after { content: "."; display: block; clear: both; height: 0; visibility: hidden; font-size: 0.1em; line-height: 0; } .clearboth { clear: both; height: 1px; } *html .clearfix{ height: 1px; /*\*//*/ height: auto; overflow: hidden; /**/ }

body * { box-sizing: border-box; }
body * img { width: 100%; }
.nopc { display: none; }
.nosp { display: inline-block; }
a { color: inherit; text-decoration: none; transition: all 0.2s ease 0s; }

@media screen and (max-width:768px) {
	.nosp { display: none; }
	.nopc { display: inline-block; }
}

/* --------------------------------------------------------------------------
   header / footer
-------------------------------------------------------------------------- */

header {
	display: flex; justify-content: space-between; align-items: center;
	width: 100%; height: 80px; padding: 15px 30px;
}
header h1 { width: 320px; }
header h1 a {
	display: block; width: 100%; height: 0; padding: 0 0 15.625%;
	background: center/cover no-repeat url(../img/logo.svg);
	text-indent: 100%; white-space: nowrap; overflow: hidden;
}

.totop {
	display: block; position: fixed; bottom: 80px; right: 5%; width: 50px; height: 50px;
	background: 100% 0/300% auto no-repeat url(../img/ico.svg);
	text-indent: 120%; white-space: nowrap; overflow: hidden; transition: none;
}
footer {
	width: 100%; background: #222; font-size: 1.6rem; font-weight: 400;
	line-height: 4.0; color: #fff; text-align: center;
}

@media screen and (min-width:769px) {
	header, footer { min-width: 1100px; }
	header nav { display: flex; }
	header nav a { display: block; padding: 0 10px; font-size: 1.6rem; font-weight: 500; }
	header nav a::after {
		content: ''; display: block; width: 0%; height: 2px; margin: 0 auto;
		border-bottom: solid 2px #dc3750; transition: width .3s ease-in-out;
	}
	header nav a:hover::after { width: 60%; }
	header .menubtn { display: none; }
}

@media screen and (max-width:768px) {
	header {
		position: fixed; top: 0; left: 0; width: 100%; height: 60px; padding: 0 10px;
		background: rgba(255,255,255,.9); z-index: 9999;
	}
	header h1 { width: 52%; }
	header .menubtn { position: absolute; top: 0; right: 10px; }
	header .menubtn a {
		display: block; position: relative; width: 60px; height: 60px;
		background: 0 0/300% auto no-repeat url(../img/ico.svg);
		text-indent: 120%; white-space: nowrap; overflow: hidden;
	}
	header nav {
		position: absolute; top: 60px; right: -240px; width: 240px; height: 100vh;
		padding: 0 0 20px; background: rgba(255,255,255,.9); transform: translateX(0);
		transition: transform 0.6s cubic-bezier(0.215,0.61,0.355,1) 0s; z-index: 999;
		overflow-y: auto; white-space: nowrap;
	}
	header nav a {
		display: block; padding: 0 0 0 24px; border-bottom: solid 1px #fff;
		font-size: 1.6rem; font-weight: 500; line-height: 3.2;
	}
	.opened header .menubtn a { background-position: 50% 0; }
	.opened header nav { transform: translateX(-240px); }

	.totop { bottom: 60px; }
	footer { font-size: 1.4rem; }
}

/* --------------------------------------------------------------------------
   kv / common
-------------------------------------------------------------------------- */

@media screen and (min-width:769px) {
	.kv {
		display: flex; align-items: center;	width: 100%; min-width: 1100px; height: 480px;
		background-image: url(../img/main.png),linear-gradient(to right,#D15E8D,#FF7A53);
		background-position: center; background-size: auto 100%,100% auto;
		background-repeat: no-repeat; 
	}	
	.kv .lead { width: 1100px; margin: 0 auto; padding-left: 600px; }
	.kv .lead h2 { font-size: 2.4rem; font-weight: 500;  color: #fff; }
}
section { width: 100%; padding: 80px 0; }
section:nth-of-type(even) { background: linear-gradient(to right,#f7e0e7,#fee4de); }
article { width: 1100px; margin: 0 auto; font-size: 1.6rem; }
.cover { background: linear-gradient(to right,#dc3750,#ff7a53); }
.cover h2 {
	width: 1100px; margin: 0 auto; font-size: 4.8rem; line-height: 3.3; font-weight: 500;
	color: #fff; background: bottom right/auto 100% no-repeat url(../img/corp.png);
}
section h3 {
	margin: 0 0 40px; font-size: 3.6rem; color: #dc3250; text-align: center; font-weight: 500;
}
section h3::after {
	content: ''; display: block; width: 80px; height: 2px; margin: 0 auto; background: #dc3250;
}
a.btn {
	position: relative; display: block; width: 300px; margin: 40px 0 0;
	background: #fff; border: solid 3px #dc3750; border-radius: 60px; box-shadow: 0 4px #dc3750;
	font-size: 1.8rem; font-weight: 700; color: #333; line-height: 2.8; text-align: center;
}
a.btn::after {
	content: ''; position: absolute; top: 50%; right: 30px; width: 8px; height: 8px;
	border: solid 3px #dc3750; border-width: 3px 3px 0 0;
	transform: translateY(-50%) rotate(45deg);
}
a.btn:hover { transform: translateY(4px); box-shadow: none; }

@media screen and (max-width:768px) {
	.kv {
		position: relative; width: 100%; padding: 70px 0 10px;
		background: linear-gradient(to right,#D15E8D,#FF7A53);
	}
	.kv .lead h2 { font-size: 1.8rem; font-weight: 500; color: #fff; text-align: center; }
	.kv .lead::before {
		content: ''; display: block; width: 100%; height: 37.5vw; margin: 0 0 10px;
		background: center/cover no-repeat url(../img/main_s1.png);
	}
	.kv .lead::after {
		content: ''; display: block; width: 100%; height: 37.5vw; margin: 16px 0 0; 
		background: center/cover no-repeat url(../img/main_s2.png);
	}
	section { padding: 40px 0; }
	article { width: 90%; }
	.cover { margin: 60px 0 0; }
	.cover h2 { width: 90%; font-size: 3.2rem; background-size: auto 80%; }
	section h3 { margin: 0 0 24px; font-size: 3.0rem; }
	a.btn { width: 70%; margin: 20px auto 0; font-size: 1.6rem; }
}

/* --------------------------------------------------------------------------
   top
-------------------------------------------------------------------------- */

#news h3, #artist h3, #supporter h3 { font-size: 4.8rem; }
#news dl { display: flex; width: 100%; margin: 0 0 16px; }
#news dt { width: 10%; text-align: center; line-height: 2.0; }
#news dd.tag { width: 10%; margin: 0 2%; text-align: center; }
#news dd:last-child { width: 76%; font-size: 1.8rem; line-height: 1.6; }
#news dd.tag span { display: block; border-radius: 30px; line-height: 2.0; }
#news dd span.ev { background: #F7CEC2; }

#artist ul { display: flex; flex-wrap: wrap; }
#artist li { width: 248px; margin: 0 36px 36px 0; }
#artist li:nth-child(4n) { margin: 0 0 36px; }
#artist li i { display: block; margin: 0 0 10px; }
#artist li img { border-radius: 200px; }
#artist li .ttl { text-align: center; }
#artist li p { font-size: 1.8rem; font-weight: 500; }
#artist li h4 { font-size: 2.4rem; font-weight: 500; }

#supporter article { display: flex; justify-content: space-between; }
#supporter a {
	display: block; width: 30%; border: solid 3px #dc3750; box-shadow: 0 4px 0 #dc3750;
}
#supporter a:hover { transform: translateY(4px); box-shadow: none; }

@media screen and (max-width:768px) {
	#news h3, #artist h3, #supporter h3 { font-size: 4.0rem; }
	#news dl { flex-wrap: wrap; }
	#news dt { width: 32%; text-align: left; font-size: 1.8rem; line-height: 1.8; }
	#news dd.tag { width: 30%; margin: 0; }
	#news dd:last-child { width: 100%; font-size: 1.7rem; }

	#artist ul { justify-content: space-between; }
	#artist li { width: 46%; margin: 0 0 20px; }
	#artist li:nth-child(even) { margin: 0 0 20px; }
	#artist li i { width: 100%; margin: 0; }
	#artist li .ttl { width: 100%; }
	#artist li p { font-size: 1.6rem; }
	#artist li h4 { font-size: 2.0rem; }

	#supporter article { display: block; }
	#supporter a { width: 80%; margin: 0 auto 12px; }
}

/* --------------------------------------------------------------------------
   corporate/
-------------------------------------------------------------------------- */

#business { text-align: center; }
#business dl { display: inline-block; margin: 0 auto; text-align: left; }
#business dt { font-size: 2.0rem; line-height: 2.4; }
#business dd { margin: -2.4em 0 0 4.0em; font-size: 2.0rem; line-height: 2.4; }
#about dl { display: flex; flex-wrap: wrap; width: 620px; margin: 0 auto; }
#about dt { width: 120px; }
#about dd { width: 500px; margin: 0 0 16px; }
#about dd.partners { display: flex; flex-wrap: wrap; }
#about dd.partners p { width: 50%; }

@media screen and (max-width:768px) {
	#business dt { font-size: 2.0rem; }
	#business dd { margin: -2.05em 0 0 2.0em; font-size: 1.8rem; line-height: 1.6; }
	#about dl { width: 100%; }
	#about dt { width: 30%; }
	#about dd { width: 70%; }
	#about dd span { display: block; font-weight: 500; }
	#about dd.partners { display: block; }
	#about dd.partners p { width: 100%; }
}

/* --------------------------------------------------------------------------
   animation
-------------------------------------------------------------------------- */

.di { opacity: 0; transform: translateY(-30px); }
.di.active {
	transition: transform 1s cubic-bezier(0.215, 0.61, 0.355, 1) 0s, opacity 1s ease 0s;
	opacity: 1; transform: translateY(0);
}