@charset "utf-8";
#main h3 {
	color: rgba(255,255,255,1.00);
	width: 50%;
	height: 2em;
	line-height: 2em;
	font-size: 90%;
	padding: 0 1em;
	margin-bottom: 1em;
	font-weight: bold;
	text-align: left;
}
#main h3:after {
	display: block;
	height: 1px;
	content:"";
	width: calc(200% + 4em);
	margin: 0 -1em;
}
#main #topics h3 {
	background-color: rgba(0,58,136,1.00);
}
#main #topics h3:after {
	background-color: rgba(0,58,136,1.00);
}
#main #pickup h3 {
	background-color: rgba(153,0,0,1.00);
}
#main #pickup h3:after {
	background-color: rgba(153,0,0,1.00);
}
#main #release h3 {
	background-color: rgba(51,51,51,1.00);
}
#main #release h3:after {
	background-color: rgba(51,51,51,1.00);
}
section > div {
	margin-bottom: 3em;
	clear: both;
}
.morelink {
	display: block;
	background-color: #EEEEEE;
	font-size: 70%;
	height: 3em;
	line-height: 3em;
	text-align: center;
	clear: both;
}
.morelink:hover {
	background-color: #DDDDDD;
}

#bnr ul::after {
	display: block;
	content: "";
	width: 100%;
	clear: both;
}
#bnr ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1em;
}
#bnr ul li {
	display: block;
	text-align: center;
	background-position: center center;
	background-size: cover;
}
#bnr ul.tri li {
	background-position: right bottom, center center;
	background-size: cover;
}
#bnr ul li a,
#bnr ul li span {
	display: block;
	color: rgba(255,255,255,1.0);
	text-decoration: none;
	background-color: rgba(0,0,0,0.00);
	width: 100%;
	height: 100%;
	transition: .6s all;
	position: relative;
	padding: 3em 0 2.4em;
	padding: 0;
	min-height: 9.4em;
}
#bnr ul li a::after,
#bnr ul li span::after {
	display: block;
	width: 100%;
	clear: both;
	content: '';
}
#bnr ul li a:hover {
	background-color: rgba(0,0,0,0.70);
}
#bnr ul li a > div,
#bnr ul li span > div {
	width: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
}
#bnr ul li.arte a > div {
	width: 60%;
	height: 60%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	line-height: 0;
	background-position: center center;
	background-size: contain;
	background-repeat: no-repeat;
}
#bnr ul li a .bnr-tit,
#bnr ul li span .bnr-tit {
	font-size: 340%;
	font-weight: 900;
	line-height: 100%;
	margin-bottom: 0.2em;
	text-shadow: 0px 0px 0.2em rgba(0,0,0,1.00);
	letter-spacing: 0.1em;
	white-space: nowrap;
}
#bnr ul.tri li:last-child a {
	padding: 10% 20%;
}
#bnr ul.tri li a .bnr-tit,
#bnr ul.tri li span .bnr-tit {
	font-size: 160%;
	margin-bottom: 0;
}
#bnr ul li a .bnr-txt,
#bnr ul li span .bnr-txt {
	font-size: 120%;
	font-weight: 400;
	line-height: 150%;
	text-shadow: 0px 0px 0.4em rgba(0,0,0,1.00);
}
#bnr2 {
	margin-bottom: 1em;
}
#bnr2 ul::after {
	display: block;
	content: "";
	width: 100%;
	clear: both;
}
#bnr2 ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
#bnr2 ul li {
	display: block;
	text-align: center;
	background-position: center top;
	background-size: cover;
}
#bnr2 ul li a,
#bnr2 ul li span {
	display: block;
	padding: 3em 0 2.4em;
	color: rgba(255,255,255,1.0);
	text-decoration: none;
	background-color: rgba(0,0,0,0.00);
	width: 100%;
	height: 100%;
}
#bnr2 ul li a:hover {
	background-color: rgba(0,0,0,0.70);
}
#bnr2 ul li a .bnr-tit,
#bnr2 ul li span .bnr-tit {
	font-size: 340%;
	font-weight: 900;
	line-height: 1em;
	margin-bottom: 0.2em;
	text-shadow: 0px 0px 0.2em rgba(0,0,0,1.00);
	letter-spacing: 0.1em
}
#bnr2 ul li a .bnr-tit span,
#bnr2 ul li span .bnr-tit span {
	display: inline-block!important;
	padding: 0!important;
	width: auto!important;
	height: auto!important;
}
#bnr2 ul li a .bnr-txt,
#bnr2 ul li span .bnr-txt {
	font-size: 120%;
	font-weight: 400;
	line-height: 150%;
	text-shadow: 0px 0px 0.4em rgba(0,0,0,1.00);
}


#topics .releasebox {
}
#topics .releasebox dl {
	border: 1px solid rgba(204,204,204,1.00);
	padding: 1em;
	font-size: 90%;
	margin-bottom: 1em;
}
#topics .releasebox dl dt {
	display: block;
	width: 7em;
	float: left;
}
#topics .releasebox dl .genre {
	display: block;
	margin: 0;
	padding: 0;
	float: left;
	width: 9em;
	text-align: center;
	position: relative;
}
#topics .releasebox dl .genre::before {
	content: "[";
	position: absolute;
	left: -0.3em;
}
#topics .releasebox dl .genre::after {
	content: "]";
	position: absolute;
	right: -0.3em;
}
#topics .releasebox dl .title {
	padding-left: 18em;
	padding-bottom: 0.5em;
	margin-bottom: 0.5em;
	border-bottom: thin dotted rgba(204,204,204,1.00);
}
#topics .releasebox dl .title:last-child {
	margin-bottom: 0px;
	border: none;
	padding-bottom: 0px;
}


#pickup ul {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
#pickup ul li {
	line-height: 0;
}
#pickup ul li a:hover {
	opacity: 0.7;
}



#release .releasebox {
}
#release .releasebox dl {
	border: 1px solid rgba(204,204,204,1.00);
	padding: 1em;
	font-size: 90%;
}
#release .releasebox dl dt {
	display: block;
	width: 9em;
	float: left;
}
#release .releasebox dl dt:after {
	content: "　……"
}
#release .releasebox dl dd {
	padding-left: 9em;
	margin-bottom: 0.5em;
}
#release .releasebox dl dd:last-child {
	margin-bottom: 0;
}
#release .releasebox dl dd {
	padding-bottom: 0.5em;
	margin-bottom: 0.5em;
	border-bottom: thin dotted rgba(204,204,204,1.00);
}
#release .releasebox dl dd:last-child {
	margin-bottom: 0px;
	border: none;
	padding-bottom: 0px;
}


	.sp480only {
		display: none;
	}
	.pc480only {
		display: inline-block;
	}

section > div#youtube {
	margin: 1em 0;
}
.youtube {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
	margin-bottom: 1em;
}
.youtube iframe {
	position: absolute;
	top: 0;
	right: 0;
	width: 100% !important;
	height: 100% !important;
}


@media screen and (max-width:480px){
	.sp480only {
		display: inline-block;
	}
	.pc480only {
		display: none;
	}
	#main h3 {
		width: 75%;
	}
	#main h3:after {
		width: calc(137% + 2em);
	}
	#main .wrap {
		padding-top: 0;
	}
	#mv {
		padding-top: 1.5em;
		margin: 0 0 1.5em;
	}
	#bnr ul li {
		width: 100%;
	}
	#bnr ul li.single {
		width: 100%;
		float: none;
		background-position: center bottom;
	}
	#bnr ul li a,
	#bnr ul li span {
		padding: 2em 0;
		min-height: 9.4em;
	}
	/*#bnr ul li{
		margin-bottom: 2em;
	}
	#bnr ul li:last-child{
		margin-bottom: 0;
	}*/
	#bnr ul li a .bnr-tit,
	#bnr ul li span .bnr-tit {
		font-size: 180%;
	}
	#bnr ul li a .bnr-txt,
	#bnr ul li span .bnr-txt {
	font-size: 100%;
	}
#bnr2 {
	margin-bottom: 0em;
}
	#bnr2 ul li {
		width: 100%;
	}
	#bnr2 ul li.single {
		width: 100%;
		float: none;
		background-position: center bottom;
		margin-right: 0!important;
	}
	#bnr2 ul li a,
	#bnr2 ul li span {
		padding: 2em 0;
	}
	#bnr2 ul li:first-child {
		margin-bottom: 2em;
	}
	#bnr2 ul li a .bnr-tit,
	#bnr2 ul li span .bnr-tit {
	font-size: 180%;
	}

	#bnr2 ul li a .bnr-txt,
	#bnr2 ul li span .bnr-txt {
	font-size: 100%;
	}
	#topics .releasebox dl {
		font-size: 80%;
	}
	#topics .releasebox dl dt {
		font-size: 92%;
		color: rgba(102,102,102,1.00);
	}
	#topics .releasebox dl .genre {
		font-size: 92%;
		float: right;
		margin-right: 0.3em;
	}
	#topics .releasebox dl .title {
		clear: both;
		padding-left: 0;
		padding-top: 0.5em;
		font-weight: 500;
	}
	#pickup ul li {
		width: calc((100% - 0.5em) / 2);
		/*margin-right: 0.5em;*/
		margin-bottom: 0.5em;
	}
	#pickup ul li:nth-child(even) {
		margin-right: 0;
	}
	#release .releasebox dl {
		font-size: 80%;
	}
	#release .releasebox dl dt {
		float: none;
		font-size: 92%;
		color: rgba(102,102,102,1.00);
	}
	#release .releasebox dl dt::after {
		content: normal;
	}
	#release .releasebox dl dd {
		padding-left: 0px;
		font-weight: 500;
		line-height: 120%;
		padding-bottom: 1em;
		margin-bottom: 1em;
	}
	section > div#youtube {
		margin: 1em 0 2em;
	}

}

@media screen and (min-width:481px) and (max-width:800px){
	#main .wrap {
		padding-top: 0;
	}
	#mv {
		padding-top: 2em;
		margin: 0 0 2em;
	}
	#bnr ul li {
		width: calc((100% - 1em) / 2);
	}
	#bnr ul li.single {
		width: 100%;
		float: none;
		background-position: center bottom;
		margin-right: 0!important;
	}
	#bnr ul li:first-child,
	#bnr ul li:nth-child(3) {
	}
	#bnr ul li:first-child,
	#bnr ul li:nth-child(2) {
	}
	#bnr ul li a .bnr-tit {
		font-size: 260%;
	}
	#bnr ul.tri li a .bnr-tit {
		font-size: 120%;
		margin-bottom: 0;
	}
	#bnr2 ul li {
		width: calc((100% - 1em)/2);
		float: left;
	}
	#bnr2 ul li.single {
		width: 100%;
		float: none;
		background-position: center bottom;
		margin-right: 0!important;
	}
	#bnr2 ul li:first-child {
		margin-right: 1em;
	}
	#bnr2 ul li a .bnr-tit {
	font-size: 300%;
	}
	#topics .releasebox dl .genre {
	float: right;
	margin-right: 0.3em;
	}
	#topics .releasebox dl .title {
		clear: both;
		padding-left: 1em;
		padding-top: 0.5em;
	}
	#pickup ul li {
		width: calc((100% - 2em) / 3);
		/*margin-right: 1em;*/
		margin-bottom: 1em;
	}
	#pickup ul li:nth-child(3),
	#pickup ul li:nth-child(6),
	#pickup ul li:nth-child(9),
	#pickup ul li:nth-child(12),
	#pickup ul li:nth-child(15) {
		margin-right: 0;
	}

}

@media screen and (min-width:801px) and (max-width:1024px){
	#mv {
		padding-top: 3em;
	}
	#bnr ul li {
		width: calc((100% - 1em) / 2);
	}
	#bnr ul li.single {
		width: 100%;
		float: none;
		background-position: center bottom;
		margin-right: 0!important;
	}
	#bnr ul li:first-child,
	#bnr ul li:nth-child(3) {
	}
	#bnr ul li:first-child,
	#bnr ul li:nth-child(2) {
	}
	#bnr2 ul li {
		width: calc((100% - 1em)/2);
		float: left;
	}
	#bnr2 ul li.single {
		width: 100%;
		float: none;
		background-position: center bottom;
		margin-right: 0!important;
	}
	#bnr2 ul li:first-child {
		margin-right: 1em;
	}
	#pickup ul li {
		width: calc((100% - 2em)/3);
		/*margin-right: 1em;*/
		margin-bottom: 1em;
	}
	#pickup ul li:nth-child(3),
	#pickup ul li:nth-child(6),
	#pickup ul li:nth-child(9),
	#pickup ul li:nth-child(12),
	#pickup ul li:nth-child(15) {
		margin-right: 0;
	}

}

@media screen and (min-width:1025px) and (max-width:1280px){
	#mv {
		padding-top: 3em;
	}
	#bnr ul li {
		width: calc((100% - 1em) / 2);
	}
	#bnr ul li.single {
		width: 100%;
		float: none;
		background-position: center bottom;
		margin-right: 0!important;
	}
	#bnr ul li.single a {
		padding: 6em 0 2.4em;
	}
	#bnr ul li:first-child,
	#bnr ul li:nth-child(3) {
	}
	#bnr ul li:first-child,
	#bnr ul li:nth-child(2) {
	}
	#bnr2 ul li {
		width: calc((100% - 1em) / 2);
		float: left;
	}
	#bnr2 ul li.single {
		width: 100%;
		float: none;
		background-position: center bottom;
		margin-right: 0!important;
	}
	#bnr2 ul li.single a {
		padding: 4em 0 4em;
	}
	#bnr2 ul li:first-child {
		margin-right: 1em;
	}
	#pickup ul li {
		width: calc((100% - 3em) / 4);
		/*margin-right: 1em;*/
		margin-bottom: 1em;
	}
	#pickup ul li:nth-child(4),
	#pickup ul li:nth-child(8),
	#pickup ul li:nth-child(12),
	#pickup ul li:nth-child(16) {
		margin-right: 0;
	}

}

@media screen and (min-width:1281px){
	#mv {
		padding-top: 3em;
	}
	#bnr ul li {
		width: calc((100% - 1em) / 2);
	}
	#bnr ul li.single {
		width: 100%;
		float: none;
		background-position: center bottom;
		margin-right: 0!important;
	}
	#bnr ul li.single a {
		padding: 6em 0 2.4em;
	}
	#bnr ul li:first-child,
	#bnr ul li:nth-child(3) {
	}
	#bnr ul li:first-child,
	#bnr ul li:nth-child(2) {
	}
	#bnr2 ul li {
		width: calc((100% - 1em)/2);
		float: left;
	}
	#bnr2 ul li.single {
		width: 100%;
		float: none;
		background-position: center bottom;
		margin-right: 0!important;
	}
	#bnr2 ul li.single a {
		padding: 4em 0 4em;
	}
	#bnr2 ul li:first-child {
		margin-right: 1em;
	}
	#pickup ul li {
		width: calc((100% - 3em)/4);
		/*margin-right: 1em;*/
		margin-bottom: 1em;
	}
	#pickup ul li:nth-child(4),
	#pickup ul li:nth-child(8),
	#pickup ul li:nth-child(12),
	#pickup ul li:nth-child(16) {
		margin-right: 0;
	}
}



/* SUNRISE arteバナー追加用 */
#bnr > ul.tri li a {
	background-color: rgba(0,0,0,0.30);
}
#bnr > ul.tri li a:hover {
	background-color: rgba(0,0,0,0.70);
}
#bnr ul li a img {
	width: auto;
	height: auto;
	max-height: 100%;
}
/*
@media screen and (max-width:480px){
	#bnr ul:not(:last-child):not(:first-child) li:last-child {
		margin-bottom: 2em!important;
	}
	#bnr > ul:last-child li {
		height: calc(140.406 / 14.9375 * 1em);
	}
	#bnr > ul:last-child li a {
		padding: 1em 0 0;
	}
	#bnr ul li a div.bnr-tit {
		font-size: 100%;
		height: 4.4em;
	}
	#bnr ul:last-child li a .bnr-txt {
		font-size: calc(100vw / 40);
	}
}
@media screen and (min-width:481px) and (max-width:800px){
	#bnr > ul:last-child li {
		height: 12.116em;
	}
	#bnr > ul:last-child li a {
		padding: 1.5em 0 0;
	}
	#bnr ul li a div.bnr-tit {
		font-size: 100%;
		height: 5.1em;
	}
	#bnr ul li a div.bnr-tit {
		margin-bottom: calc(0.2em * 2.6);
	}
	#bnr ul:last-child li a .bnr-txt {
		font-size: calc(100vw / 40);
	}
}
@media screen and (min-width:801px) and (max-width:1024px){
	#bnr > ul:last-child li {
		height: calc(209.875 / 16.05 * 1em);
	}
	#bnr > ul:last-child li a {
		padding: 1.5em 0 0;
	}
	#bnr ul li a div.bnr-tit {
		margin-bottom: calc(0.2em * 3.4);
	}
}
@media screen and (min-width:1025px) and (max-width:1280px){
	#bnr > ul:last-child li {
		height: calc(266.625 / 16.585 * 1em);
	}
	#bnr > ul:last-child li a {
		padding: 3em 0 0;
	}
	#bnr ul li a div.bnr-tit {
		margin-bottom: calc(0.5em * 3.4);
	}
}
@media screen and (min-width:1281px){
	#bnr > ul:last-child li {
		height: calc(289.391 / 18 * 1em);
	}
	#bnr > ul:last-child li a {
		padding: 3em 0 0;
	}
	#bnr ul li a div.bnr-tit {
		margin-bottom: calc(0.5em * 3.4);
	}
}


#bnr > ul:last-child li:last-child {
	margin-bottom: 0!important;
}
#bnr > ul:last-child li a .bnr-txt span {
	padding: 0;
	margin: 0;
	display: inline-block!important;
	width: auto;
	height: auto;
	min-height: 1em;
}
*/



@media(min-width:768px) {
	#bnr > ul.tri {
		gap: 1em;
	}
	#bnr > ul.tri > li {
		width: calc((100% - 2em) / 3);
		line-height: 1;
	}
	#bnr > ul.tri > li a {
		line-height: 1;
	}
}