/* CSS Document */

:where(#special,#ranking,#season,#theme,#news) h2{
	color: var(--primary-color);
	font-size: clamp(1.5em, 2vw + 1em, 1.75em);
	font-weight: 700;
	letter-spacing: 0.22em;
	}
:where(#special,#theme,#news) :is(footer,.topicsMore){
	display: flex;
	justify-content: center;
	align-self: flex-end;
	padding: 0;
	}
	:where(#special,#theme,#news) :is(footer,.topicsMore) a{
		position: relative;
		display: inline-block;
		width: min(80%, 300px);
		padding: 1em 2em;
		border: 1px solid currentColor;
		border-radius: 4px;
		font-size: 0.875em;
		text-align: center;
		text-decoration: none;
		}
	:where(#special,#theme,#news) :is(footer,.topicsMore) i{
		position: absolute;
		top: calc(50% - 0.6em);
		right: 1em;
		}

#pagePath{
	display: none;
	}

#hero{
	position: relative;
	padding: 0;
	background: linear-gradient(-90deg, #dceced, #ffe7d9);
	overflow: hidden;
	}

#heroPhoto{
	position: relative;
	opacity: 0;
	transition: opacity 0.2s ease-out;
	}
	#heroPhoto.slick-initialized{
		opacity: 1;
		}
	#heroPhoto dl{
		position: relative;
		}
	#heroPhoto dt{
		position: absolute;
		left: 0;
		display: flex;
		align-items: flex-end;
		justify-content: flex-end;
		width: 100%;
		color: #fff;
		fill: currentColor;
		font-weight: bold;
		letter-spacing: 0.1em;
		line-height: 1.7em;
		filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.2));
		z-index: 1;
		}
		#heroPhoto dt:empty{
			display: none;
			}
		#heroPhoto dt span{
			display: flex;
			align-items: center;
			}
		#heroPhoto dt i{
			position: relative;
			top: -0.2em;
			display: flex;
			align-items: center;
			margin-right: 0.5em;
			}
		#heroPhoto dt svg{
			font-size: 1.2em;
			}
	#heroPhoto dd{}
		#heroPhoto dd:last-child{
			display: contents;
			}
		#heroPhoto dd a{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			opacity: 0;
			z-index: 2;
			}
	#heroPhoto .slick-arrow{
		position: absolute;
		background-color: #fff;
		z-index: 1;
		}
	#heroPhoto .slick-prev{
		left: 1em;
		}
	#heroPhoto .slick-next{
		right: 1em;
		}
	#heroPhoto .slick-dots{
		pointer-events: none;
		}
		#heroPhoto .slick-dots li{
			pointer-events: all;
			}
			#heroPhoto .slick-dots li:only-child{
				display: none;
				}

#heroMovie{
	position: relative;
	opacity: 0;
	transition: opacity 0.2s ease-out;
	}
	#heroMovie.done{
		opacity: 1;
		}
	#heroMovie [class^="moviePlayer_"]{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-position: center center !important;
		background-attachment: inherit !important;
		background-size: cover;
		pointer-events: none;
		}
	#heroMovie .inline-YTPlayer,
	#heroMovie .ytp{
		position: static !important;
		}
	#heroMovie .playerBox{
		margin: 0 !important;
		}

#alert{
	padding: 0;
	color: #fff;
	fill: currentColor;
	overflow: hidden;
	}
	#alert p{
		display: flex;
		align-items: center;
		justify-content: center;
		}
		#alert p a{
			display: flex;
			align-items: center;
			grid-gap: 1em;
			color: inherit;
			line-height: 1.5em;
			text-decoration: none;
			}
			#alert p a:hover{
				text-decoration: underline;
				}
			#alert p i{
				flex: 0 0 1em;
				transform: translateY(0.25em);
				}
	#alert .wrap{
		background: var(--primary-color);
		}

#special{}
	#special h3{
		display: none;
		}
	#special h3+div{
		display: grid;
		align-items: start;
		}
	#special dl{
		position: relative;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: flex-end;
		grid-gap: 1em 0.5em;
		}
		#special dl:hover{}
			#special dl:hover dt+dd{
				opacity: 0.8;
				}
		#special dl:nth-of-type(1){
			padding-bottom: 2em;
			}
			#special dl:nth-of-type(1):before,
			#special dl:nth-of-type(1):after{
				order: 1;
				color: var(--primary-color);
				font-weight: 600;
				}
			#special dl:nth-of-type(1):before{
				content: "";
				width: 1em;
				height: 1em;
				-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M14.65,8.5H1.35c-.28,0-.5-.22-.5-.5s.22-.5,.5-.5H13.4L7.01,1.36c-.2-.19-.21-.51-.01-.71,.19-.2,.51-.21,.71-.01l7.29,7c.15,.14,.19,.36,.12,.55s-.26,.31-.46,.31Z"/></svg>') center no-repeat;
				-webkit-mask-size: contain;
				background: currentColor;
				transform: translateY(0.25em);
				}
			#special dl:nth-of-type(1):after{
				content: "more";
				}
			#special dl:nth-of-type(1) dt{
				font-size: 1.25em;
				}
		#special dl:nth-of-type(n+2){}
			#special dl:nth-of-type(n+2) dt+dd+dd{
				display: none;
				}
	#special :where(dt,dd){
		width: 100%;
		font-size: 0.875em;
		line-height: 1.5em;
		}
	#special dt{
		font-weight: 500;
		}
	#special dd{}
		#special dd:last-child{
			display: contents;
			}
		#special dd a{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			opacity: 0;
			}
	#special dt+dd{
		border-radius: 1em;
		overflow: hidden;
		transition: opacity 0.2s ease-out;
		order: -1;
		}
	#special dt+dd+dd{
		color: #4D4D4D;
		line-height: 1.5em;
		}
	#special .thumb{
		padding-top: 66.66%;
		}

#ranking{
	position: relative;
	overflow: hidden;
	}
	#ranking:before,
	#ranking:after{
		content: "";
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 80%;
		z-index: -1;
		}
	#ranking:before{
		background: linear-gradient(-90deg, #dceced, #ffe7d9);
		opacity: 0.6;
		}
	#ranking:after{
		background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1370 12"><path fill="%23fff" d="M959,12c68.5,0,68.5-12,137-12h-274c68.5,0,68.5,12,137,12Zm-274,0c68.5,0,68.5-12,137-12h-274c68.5,0,68.5,12,137,12Zm-548,0C205.5,12,205.5,0,274,0H0C68.5,0,68.5,12,137,12Zm274,0c68.5,0,68.5-12,137-12H274c68.5,0,68.5,12,137,12ZM1096,0c68.5,0,68.5,12,137,12S1301.5,0,1370,0h-274Z"/></svg>') center top no-repeat;
		background-size: contain;
		}
	#ranking h3{
		display: none;
		}
	#ranking h3+div{
		display: grid;
		grid-gap: 2em;
		counter-reset: count;
		}
	#ranking dl{
		position: relative;
		display: grid;
		grid-gap: 1em;
		color: #fff;
		border-radius: 1em;
		overflow: hidden;
		}
		#ranking dl:nth-of-type(1){}
			#ranking dl:nth-of-type(1) dt{}
				#ranking dl:nth-of-type(1) dt:before{
					font-size: 4em;
					transform: translateY(0.05em);
					}
		#ranking dl:nth-of-type(n+2){}
			#ranking dl:nth-of-type(n+2) dt{
				font-size: 0.875em;
				}
		#ranking dl:hover{}
			#ranking dl:hover dt+dd{
				opacity: 0.8;
				}
	#ranking dt{
		position: absolute;
		left: 0;
		bottom: 0;
		display: flex;
		align-items: baseline;
		grid-gap: 0.8em;
		width: 100%;
		padding: 1em;
		font-weight: 500;
		line-height: 1.5em;
		z-index: 1;
		}
		#ranking dt:before,
		#ranking dt:after{
			order: -1;
			}
		#ranking dt:before{
			counter-increment: count;
			content: counter(count)"";
			font-size: 1.8em;
			font-family: sofia-pro, sans-serif;
			font-weight: 700;
			font-style: italic;
			transform: translateY(0.1em);
			}
		#ranking dt:after{
			content: "/";
			font-size: 1.2em;
			}
	#ranking dd{}
		#ranking dd:last-child{
			display: contents;
			}
		#ranking dd a{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			color: transparent;
			background: linear-gradient(rgba(0,0,0,0) 50%, rgba(0,0,0,0.7));
			}
	#ranking dt+dd{
		transition: opacity 0.2s ease-out;
		order: -1;
		}
	#ranking .thumb{
		padding-top: 66.66%;
		}

#season{}
	#season nav{
		padding: 0;
		}
		#season nav li{
			width: min(25%, 6em);
			}
			#season nav li:before{
				border-top-color: #F26179;
				}
			#season nav li.select{
				background: #F26179;
				}
	#season section{
		display: flex;
		justify-content: center;
		padding: 0;
		}
		#season section:nth-of-type(1){}
			#season section:nth-of-type(1) .slick-dots li.slick-active{
				background: #F26179;
				}
		#season section:nth-of-type(2){}
			#season section:nth-of-type(2) .slick-dots li.slick-active{
				background: #F26179;
				}
		#season section:nth-of-type(3){}
			#season section:nth-of-type(3) .slick-dots li.slick-active{
				background: #F26179;
				}
		#season section:nth-of-type(4){}
			#season section:nth-of-type(4) .slick-dots li.slick-active{
				background: #F26179;
				}
	#season h3{
		display: none;
		}
	#season dl{
		position: relative;
		display: grid;
		grid-gap: 1em;
		}
		#season dl:hover{}
			#season dl:hover dt+dd{
				opacity: 0.8;
				}
	#season dt{
		font-size: 0.875em;
		font-weight: 500;
		line-height: 1.5em;
		}
	#season dd{}
		#season dd:last-child{
			display: contents;
			}
		#season dd a{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			opacity: 0;
			}
	#season dt+dd{
		border-radius: 1em;
		overflow: hidden;
		transition: opacity 0.2s ease-out;
		order: -1;
		}
	#season .slide{
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		}
	#season .slick-list{
		width: 100vw;
		margin: 0 -1em;
		order: -1;
		}
	#season .slick-slide{
		display: block;
		margin: 0 1em;
		}
	#season .slick-next{
		order: 1;
		}
	#season .slick-dots{
		flex-wrap: wrap;
		max-width: calc(100% - 10em);
		}
	#season .thumb{
		padding-top: 100%;
		}

#theme{
	position: relative;
	overflow: hidden;
	}
	#theme:before,
	#theme:after{
		content: "";
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 80%;
		z-index: -1;
		}
	#theme:before{
		background: linear-gradient(-90deg, #dceced, #ffe7d9);
		opacity: 0.6;
		}
	#theme:after{
		background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1370 12"><path fill="%23fff" d="M959,12c68.5,0,68.5-12,137-12h-274c68.5,0,68.5,12,137,12Zm-274,0c68.5,0,68.5-12,137-12h-274c68.5,0,68.5,12,137,12Zm-548,0C205.5,12,205.5,0,274,0H0C68.5,0,68.5,12,137,12Zm274,0c68.5,0,68.5-12,137-12H274c68.5,0,68.5,12,137,12ZM1096,0c68.5,0,68.5,12,137,12S1301.5,0,1370,0h-274Z"/></svg>') center top no-repeat;
		background-size: contain;
		}
	#theme section{
		margin-bottom: var(--space);
		}
	#theme h3{
		display: none;
		}
	#theme h3+div{
		display: grid;
		grid-gap: 2em;
		}
	#theme dl{
		position: relative;
		display: grid;
		grid-gap: 1em;
		color: #fff;
		border-radius: 1em;
		overflow: hidden;
		}
		#theme dl:nth-of-type(even){
			transform: translateY(var(--space));
			}
		#theme dl:nth-of-type(n+2){}
			#ranking dl:nth-of-type(n+2) dt{
				font-size: 0.875em;
				}
		#theme dl:hover{}
			#theme dl:hover dt+dd{
				opacity: 0.8;
				}
	#theme dt{
		position: absolute;
		left: 1em;
		bottom: 1.5em;
		max-width: calc(100% - 2em);
		padding-bottom: 0.5em;
		font-size: 1.125em;
		font-weight: 500;
		line-height: 1.5em;
		z-index: 1;
		}
		#theme dt:before{
			content: "";
			position: absolute;
			right: 0;
			bottom: 0;
			width: 50vw;
			border-bottom: 2px solid currentColor;
			}
	#theme dd{}
		#theme dd:last-child{
			display: contents;
			}
		#theme dd a{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			color: transparent;
			background: linear-gradient(rgba(0,0,0,0) 50%, rgba(0,0,0,0.7));
			}
	#theme dt+dd{
		transition: opacity 0.2s ease-out;
		order: -1;
		}
	#theme .thumb{
		padding-top: 150%;
		}

#news{}
	#news nav{
		padding: 0;
		}
		#news nav li{
			width: min(50%, 10em);
			}
	#news section{
		display: grid;
		grid-gap: 2em;
		padding: 0;
		}
	#news h3{
		display: none;
		}

#sns{}
	#sns ul{
		display: flex;
		align-items: center;
		justify-content: center;
		padding-bottom: var(--space);
		}
	#sns li{}
		#sns li a{
			display: block;
			}
		#sns li svg{
			font-size: 40px;
			}
	#sns li+li{
		margin-left: 2em;
		}

#banner{
	padding: 2em 0;
	background: #EDF6FF;
	}
	#banner ul{
		display: grid;
		grid-gap: 1em;
		}
		#banner li img{
			width: 100%;
			height: 100%;
			object-fit: contain;
			}
	#banner .wrap{
		display: grid;
		grid-gap: 2em;
		}
		#banner .wrap:before{
			content: "PR";
			font-size: 1.75em;
			font-weight: 700;
			color: var(--primary-color);
			letter-spacing: 0.22em;
			text-align: center;
			}



/* for lower */
@media (max-width: 1399.98px) {
/*1399px以下*/
}
@media (max-width: 1199.98px) {
/*1199px以下*/
}
@media (max-width: 991.98px) {
/*991px以下*/
:where(#special,#ranking,#season,#theme,#news) h2{
	text-align: center;
	}
:where(#season,#news) h2+nav{
	margin: var(--space) 0;
	}
}


/* Small */
@media (max-width: 767.98px) {
/*767px以下*/
#heroPhoto{}
	#heroPhoto dt{
		padding: 0 1em;
		}
	#heroPhoto .slick-dots{
		right: 1em;
		}
#alert{}
	#alert span{
		display: none;
		}
	#alert .wrap{
		width: 100%;
		padding: 1em;
		}
#special{}
	#special h3+div{
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 2em 1em;
		}
	#special dl{}
		#special dl:nth-of-type(1){
			grid-column: 1 / 3;
			}
	#season .slide{
		grid-gap: 1em 2em;
		}
#theme{}
	#theme h3+div{
		grid-template-columns: repeat(2, 1fr);
		}
#banner{}
	#banner ul{
		grid-template-columns: repeat(2, 1fr);
		}
}
@media (max-width: 767.98px) and (orientation:portrait) {
/*767px以下縦向き*/
#heroPhoto{
	background: #fff;
	}
	#heroPhoto dt{
		bottom: 1em;
		}
	#heroPhoto .slick-arrow{
		bottom: 0;
		}
	#heroPhoto .slick-dots{
		grid-gap: 0.5em 1em;
		width: 100%;
		height: 3em;
		margin-top: 1em;
		padding: 0 4em;
		align-content: center;
		}
	#heroPhoto .thumb{
		padding-top: 100%;
		}
#heroMovie{
	height: 100vw;
	}
	#heroMovie .playerBox{
		top: -20% !important;
		height: 140% !important;
		}
#ranking{}
	#ranking h3+div{
		grid-template-columns: 1fr 1fr;
		}
	#ranking dl{}
		#ranking dl:nth-of-type(1){
			grid-column: 1 / 3;
			}
}
@media (max-width: 767.98px) and (orientation:landscape) {
/*767px以下横向き*/
#heroMovie{
	height: 70vh;
	}
	#heroMovie .playerBox{
		top: -30% !important;
		height: 160% !important;
		}
}
@media (max-width: 767.98px) and (orientation:landscape), (min-width: 768px) {
/*767px以下 横向き, 768px以上,*/
#heroPhoto{}
	#heroPhoto dt{
		bottom: 2.5em;
		}
	#heroPhoto .slick-arrow{
		top: 50%;
		transform: translateY(-50%);
		}
	#heroPhoto .slick-dots{
		position: absolute;
		bottom: 1em;
		}
		#heroPhoto .slick-dots li{
			filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.2));
			}
			#heroPhoto .slick-dots li:not(.slick-active){
				background: #fff;
				}
	#heroPhoto .thumb{
		padding-top: 50%;
		}
#ranking{}
	#ranking h3+div{
		grid-template-columns: 2fr 1fr 1fr;
		}
	#ranking dl{}
		#ranking dl:nth-of-type(1){
			grid-row: 1 / 3;
			}
}
@media (max-width: 767.98px) and (orientation:landscape), (min-width: 768px) and (max-width: 991.98px) {
/*767px以下 横向き, 768px～991px*/
}


/* Medium */
@media (min-width: 768px) {
/*768px以上*/
#main{
	display: grid;
	}
	#main:before{
		content: "";
		display: block;
		width: 100%;
		max-width: 1400px;
		margin: auto;
		margin-bottom: -71.42%;
		padding-top: 71.42%;
		background: url("/images/mainBg.svg") center top no-repeat;
		z-index: -1;
		}
#hero{
	order: -1;
	}
#alert{
	display: flex;
	justify-content: flex-end;
	}
	#alert p{
		font-size: 0.875em;
		}
	#alert span{}
		#alert span svg{
			position: absolute;
			top: 0;
			left: 0;
			width: auto;
			height: 100%;
			fill: var(--primary-color);
			transform: translateX(-100%);
			}
	#alert .wrap{
		position: relative;
		width: auto;
		max-width: 50%;
		margin: 0 0 0 auto;
		padding: 1.5em 2em 1.5em 1em;
		}
#special{}
	#special h3+div{
		grid-template-columns: repeat(3, 1fr);
		}
	#special dl{}
		#special dl:nth-of-type(1){
			grid-column: 1 / 3;
			grid-row: 1 / 3;
			}
	#season .slide{
		grid-gap: 2em 4em;
		}
#ranking{}
	#ranking dl:nth-child(1){}
		#ranking dl:nth-child(1) .thumb{
			padding-top: calc(66.66% + 2em);
			}
#theme{}
	#theme h3+div{
		grid-template-columns: repeat(4, 1fr);
		}
}
@media (min-width: 768px) and (max-width: 1199.98px) {
/*768px～1199px*/
}
@media (min-width: 768px) and (max-width: 991.98px) {
/*768px～991px*/
#main{
	background-position: center 50vw;
	}
#heroPhoto{}
	#heroPhoto dt{
		padding: 0 2em;
		}
	#heroPhoto .slick-dots{
		right: 2em;
		}
#heroMovie{
	height: 50vw;
	}
	#heroMovie .playerBox{
		top: -20% !important;
		height: 150% !important;
		}
#special{}
	:not(#alert)+#special{
		margin-top: 2em;
		}
	#special h3+div{
		grid-gap: 3em;
		}
#news{}
	#news section{
		grid-gap: 3em;
		}
#banner{
	padding: 3em 0;
	}
	#banner ul{
		grid-template-columns: repeat(3, 1fr);
		}
}


/* Large */
@media (min-width: 992px) {
/*992px以上*/
:where(#special,#ranking,#season,#theme,#news) h2{
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	white-space: nowrap;
	}
:where(#special,#season,#theme,#news) h2{
	display: flex;
	align-items: center;
	grid-gap: 1em;
	width: 1em;
	}
	:where(#special,#season,#theme,#news) h2:after{
		content: "";
		width: 0;
		height: 100%;
		border-left: 1px solid currentColor;
		}
#heroPhoto{}
	#heroPhoto dt{
		left: 50%;
		width: var(--wrap);
		transform: translateX(-50%);
		}
	#heroPhoto .slick-dots{
		left: 50%;
		width: var(--wrap);
		transform: translateX(-50%);
		justify-content: flex-end;
		}
#heroMovie{
	height: 520px;
	}
	#heroMovie .playerBox{
		top: -50vw !important;
		left: -5% !important;
		width: 110% !important;
		height: calc(100% + 100vw) !important;
		}
#special{}
	:not(#alert)+#special{
		margin-top: 8em;
		}
	#special h2{
		grid-row: 1 / 3;
		}
	#special section{
		padding: 0;
		}
	#special h3+div{
		grid-gap: 4em;
		}
	#special .wrap{
		display: grid;
		grid-template-columns: 2em auto;
		grid-gap: 4em;
		}
#ranking{}
	#ranking h2{
		order: 1;
		}
	#ranking section{
		padding: 0;
		}
	#ranking .wrap{
		display: grid;
		grid-template-columns: auto 2em;
		grid-gap: 4em;
		}
#season{
	overflow: hidden;
	}
	#season h2{
		grid-row: 1 / 3;
		}
	#season nav{
		width: calc(var(--wrap) - 6em);
		}
		#season nav ul{
			justify-content: flex-end;
			}
	#season .slick-slider{
		width: calc(var(--wrap) - 6em);
		overflow: visible;
		}
	#season .slick-list{
		width: calc(100vw + 10em);
		padding-right: 5em;
		}
	#season .wrap{
		display: grid;
		grid-template-columns: 2em auto;
		grid-gap: 4em;
		}
#theme{}
	#theme h2{
		grid-column: 2;
		grid-row: 1 / 3;
		}
	#theme section{
		padding-top: 0;
		}
	#theme .wrap{
		display: grid;
		grid-template-columns: auto 2em;
		grid-gap: 0 4em;
		}
#news{}
	#news h2{
		grid-column: 1;
		grid-row: 1 / 3;
		}
	#news section{
		grid-gap: 4em;
		}
	#news .wrap{
		display: grid;
		grid-template-columns: 2em auto;
		grid-gap: 2em 4em;
		}
#sns{}
	#sns .wrap{
		display: grid;
		grid-template-columns: 2em auto;
		grid-gap: 2em 4em;
		}
	#sns ul{
		grid-column: 2;
		}
#banner{
	padding: 4em 0;
	}
	#banner ul{
		grid-template-columns: repeat(4, 1fr);
		}
}
@media (min-width: 992px) and (max-width: 1199.98px) {
/*992px～1199px*/
}


/* X-Large */
@media (min-width: 1200px) {
/*1200px以上*/
}
@media (min-width: 1200px) and (max-width: 1399.98px) {
/*1200px～1399px*/
}


/* XX-Large */
@media (min-width: 1400px) {
/*1400px以上*/
}