/* CSS Document */

#header{
	height: 0;
	}
	#header #siteName{
		align-self: flex-start;
		margin-top: 1em;
		}

#pagePath{
	display: none;
	}

#main{
	display: flex;
	flex-direction: column;
	}
	#main article{}
		#main article h2{
			color: #16377a;
			}
		#main article h2:not(:lang(ja)){
			display: flex;
			align-items: center;
			color: #4d4d4d;
			fill: #fe9b97;
			}
			#main article h2:not(:lang(ja)) i{
				margin-right: 0.5em;
				}
			#main article h2:not(:lang(ja)) svg{
				transform: scale(1.4);
				}
		#main article h2+div+div{
			display: flex;
			border: solid #9f9f9f;
			border-width: 1px 0;
			}
			#main article h2+div+div a{
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100%;
				color: inherit;
				fill: currentColor;
				text-align: center;
				line-height: 1.4em;
				text-decoration: none;
				}
				#main article h2+div+div a:hover{
					background: #cedaf3;
					}
				#main article h2+div+div a:hover:not(:lang(ja)){
					background: #fae3e1;
					}
			#main article h2+div+div i{
				margin-left: 0.5em;
				}

#hero{
	position: relative;
	padding: 0;
	overflow: hidden;
	}
	#hero dl{
		position: relative;
		display: flex;
		color: #fff;
		}
	#hero dt{
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		font-weight: normal;
		text-align: right;
		line-height: 1.4em;
		color: #fff;
		order: 2;
		}
		#hero dt:before{
			content: attr(data-number);
			margin-top: 0.2em;
			order: 1;
			}
	#hero dt+dd{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: -1;
		}
		#hero dt+dd:before{
			content: "";
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 100%;
			background: linear-gradient(rgba(0,0,0,0) 50%, rgba(0,0,0,0.8));
			z-index: 1;
			}
	#hero dt+dd+dd{
		display: flex;
		flex-direction: column;
		line-height: 1.6em;
		order: 1;
		}
		#hero dt+dd+dd:not(:lang(ja)){
			display: none;
			}
	#hero dd{}
		#hero dd a{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			opacity: 0;
			z-index: 1;
			}
	#hero .movie{
		display: none;
		position: relative;
		}
		#hero .movie i{
			position: absolute;
			z-index: 1;
			}
	#hero .thumb{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		padding-top: 0;
		}
	#hero .slick-arrow{
		position: absolute;
		color: #fff;
		z-index: 1;
		}
		#hero .slick-arrow:not(:hover){
			border-color: currentColor;
			}
	#hero .inline-YTPlayer,
	#hero .ytp{
		position: static !important;
		}

#heroScroll{
	position: absolute;
	bottom: 0;
	padding-bottom: 6.5em;
	color: #fff;
	z-index: 10;
	}
	#heroScroll span{
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 1em;
		height: 1em;
		font-size: 10px;
		white-space: nowrap;
		transform: rotate(-90deg);
		}
	#heroScroll:before,
	#heroScroll:after{
		content: "";
		position: absolute;
		left: 50%;
		width: 1px;
		background: #fff;
		}
	#heroScroll:before{
		bottom: 0;
		height: 6em;
		opacity: 0.5;
		}
	#heroScroll:after{
		animation: heroScroll infinite 3s none;
		}

#alert{}
	#alert dl{
		display: flex;
		flex-direction: column;
		align-items: center;
		}
	#alert dt{
		display: none;
		}
	#alert dt+dd{
		line-height: 1.4em;
		}
		_:-ms-lang(x)::-ms-backdrop, #alert dt+dd{
			width: 100%;
			}
	#alert dd+dd{
		margin-top: 1em;
		}
	#alert .linkBut{
		border: 1px solid #b5b5b5;
		border-radius: 8px;
		}
		#alert .linkBut:not(:hover){
			color: inherit;
			}

#feature{}
	#feature h2+div{
		display: flex;
		margin-top: 2em;
		}
	#feature dl{
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-end;
		padding: 1em;
		background: linear-gradient(rgba(0,0,0,0) 50%, rgba(0,0,0,0.8));
		color: #fff;
		overflow: hidden;
		}
	#feature dt{
		line-height: 1.4em;
		}
	#feature dt+dd{
		margin-bottom: 0.5em;
		}
	#feature dt+dd+dd{
		font-size: 0.8em;
		line-height: 1.4em;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		}
	#feature dd{}
		#feature dd a{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			color: transparent;
			}
			#feature dd a:hover{
				background: rgba(255,255,255,0.50);
				}
	#feature .thumb{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		padding: 0;
		transition: transform 0.2s ease-out;
		z-index: -1;
		}

#theme{}
	#theme h2+div{
		margin-top: 2em;
		}
	#theme dl{
		position: relative;
		}
	#theme dt{
		display: flex;
		align-items: center;
		padding: 0.5em 1em;
		border: 1px solid #9f9f9f;
		line-height: 1.4em;
		}
	#theme dt+dd{
		position: relative;
		overflow: hidden;
		}
	#theme dd{}
		#theme dd a{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			color: transparent;
			}
			#theme dd a:hover{
				background: rgba(255,255,255,0.50);
				}
	#theme .thumb{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		padding: 0;
		}

#accessMap{
	padding: 0;
	background: #fae3e1;
	}
	#accessMap h2{
		display: none !important;
		}

#accessMapjapan{
	position: relative;
	margin-top: 1em;
	}
	#accessMapjapan:before{
		content: "";
		display: block;
		padding-top: 100%;
		}
	#accessMapjapan svg{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		}
		#accessMapjapan svg:nth-of-type(2){
			left: 5%;
			}

#accessMapWide{
	position: relative;
	margin: 0 !important;
	border: none !important;
	}
	#accessMapWide:before{
		content: "";
		display: block;
		padding-top: 96%;
		}
	#accessMapWide svg{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		}
		#accessMapWide svg:nth-of-type(2){
			top: -7%;
			}
		#accessMapWide svg:nth-of-type(3){
			top: 7%;
			}

#ranking{}
	#ranking h2+div{
		margin-top: 2em;
		counter-reset: count;
		overflow: hidden;
		}
	#ranking dl{
		position: relative;
		float: left;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-end;
		padding: 1em;
		background: linear-gradient(rgba(0,0,0,0) 50%, rgba(0,0,0,0.8));
		color: #fff;
		overflow: hidden;
		}
	#ranking dt{
		display: flex;
		line-height: 1.4em;
		}
		#ranking dt:before{
			align-self: top;
			counter-increment: count;
			content: "0"counter(count);
			margin-right: 0.5em;
			font-size: 1.6em;
			}
	#ranking dt+dd{
		margin-bottom: 0.5em;
		}
	#ranking dt+dd+dd{
		font-size: 0.8em;
		line-height: 1.4em;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		}
	#ranking dd{}
		#ranking dd a{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			color: transparent;
			}
			#ranking dd a:hover{
				background: rgba(255,255,255,0.50);
				}
	#ranking .thumb{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		padding: 0;
		transition: transform 0.2s ease-out;
		z-index: -1;
		}

#topics{}
	#topics h2+div{
		margin-top: 2em;
		}

#movie{}
	#movie h2{
		margin: auto;
		}
	#movie h2+div{
		display: flex;
		flex-wrap: wrap;
		margin-top: 2em;
		}
	#movie dl{
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		}
	#movie dt{
		padding: 1em;
		padding-bottom: 0;
		font-weight: normal;
		line-height: 1.4em;
		}
	#movie dt+dd{
		position: relative;
		order: -1;
		}
		#movie dt+dd .thumb{
			padding-top: 56%;
			}
	#movie dd{}
		#movie dd a{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			padding-top: calc(56% - 2em);
			color: transparent;
			fill: rgba(0,0,0,0.7);
			line-height: 2em;
			}
			#movie dd a:hover{
				background: rgba(255,255,255,0.50);
				fill: rgba(196,48,43,0.7);
				}
		#movie dd i{
			position: absolute;
			top: 50%;
			left: 50%;
			margin: -0.5em;
			transform: scale(4);
			pointer-events: none;
			z-index: 1;
			}

#pickup{}
	#pickup h2+div{
		margin-top: 2em;
		}
	#pickup dl{
		position: relative;
		}
	#pickup dt{
		position: absolute;
		left: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		width: 100%;
		height: 25%;
		padding: 0.5em 1em;
		border: solid #9f9f9f;
		border-width: 0 1px 1px 1px;
		}
		#pickup dt span{
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			max-height: calc(1.4em * 2);
			overflow: hidden;
			line-height: 1.4em;
			}
	#pickup dt+dd{
		overflow: hidden;
		padding-top: 100%;
		order: -1;
		}
	#pickup dd{}
		#pickup dd a{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			color: transparent;
			}
			#pickup dd a:hover{
				background: rgba(255,255,255,0.50);
				}
	#pickup .thumb{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 75%;
		padding: 0;
		}
	#pickup .slick-arrow{
		position: absolute;
		top: 50%;
		margin: -1.5em 0;
		z-index: 1;
		}
		#pickup .slick-arrow:not(:hover){
			background: #fff;
			}
	#pickup .slick-prev{
		left: -1.5em;
		}
	#pickup .slick-next{
		right: -1.5em;
		}
#pr{
	background: #cedaf3;
	overflow: hidden;
	order: 100;
	}
	#pr h3{
		color: #16377a;
		letter-spacing: 0.5em;
		text-indent: 0.5em;
		}
	#pr h3+div{
		margin-top: 1em;
		}
	#pr li{
		display: flex;
		align-self: center;
		justify-content: center;
		}
		#pr li img{
			width: 100%;
			height: auto;
			}
	#pr .slick-slider{
		display: flex;
		align-items: center;
		}

[data-number]{}
	[data-number] h2:lang(ja){
		position: relative;
		}
		[data-number] h2 svg:lang(ja){
			position: absolute;
			top: calc(50% - 0.5em);
			left: 0;
			z-index: -1
			}
		[data-number] h2 svg:lang(ja){
			fill: #cedaf3;
			}




/* for all */
@media (max-width: 1199.98px) {
/*1199px以下*/
}
@media (max-width: 991.98px) {
/*991px以下*/
#body{}
	#body.scrollTo{}
		#body.scrollTop #header #navButton{
			color: #fff;
			}
#header{}
	#header #siteName:lang(ja){
		display: none;
		}
#hTooltip{
	display: none;
	}
}


/* for mobile */
@media (max-width: 767.98px) {
/*767以下px*/
#main{}
	#main h2+div+div{
		flex-direction: column;
		margin-top: 1.5em;
		}
		#main h2+div+div a{
			padding: 2em 0;
			}
		#main h2+div+div a+a{
			border-top: 1px solid #9f9f9f;
			}
#hero{}
	#hero dl{
		flex-direction: column;
		justify-content: flex-end;
		padding-left: 3em !important;
		}
	#hero dt+dd+dd{
		margin-bottom: 1.5em;
		}
		#hero dt+dd+dd i{
			position: absolute;
			top: 0;
			left: 0;
			display: flex;
			justify-content: center;
			width: 100%;
			height: 6em;
			padding: 1em;
			background: linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0));
			}
		#hero dt+dd+dd svg{
			font-size: 4em;
			}
	#hero .movie{}
		#hero .movie i{
			position: absolute;
			top: 0;
			left: 0;
			display: flex;
			justify-content: center;
			width: 100%;
			height: 6em;
			padding: 1em;
			background: linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0));
			}
		#hero .movie svg{
			font-size: 4em;
			}
#heroScroll{
	left: 1em;
	}
#pickup{}
	#pickup .slick-list{
		margin: 0 -0.5em;
		}
	#pickup .slick-slide{
		padding: 0 0.5em;
		}
	#pickup .slick-arrow{
		transform: scale(0.8);
		}
#pr{}
	#pr h3+div{
		}
	#pr .slick-slider{
		flex-wrap: wrap;
		justify-content: flex-end;
		grid-gap: 1em 0.5em;
		}
	#pr .slick-list{
		width: 100%;
		order: 1;
		}
	#pr .slick-track{
		display: grid;
		grid-gap: 1em;
		width: 100% !important;
		transform: none!important;
		}
		#pr .slick-track:before,
		#pr .slick-track:after{
			content: none;
			}
	#pr .slick-slide{
		display: none;
		width: auto !important;
		opacity: 0;
		transition: opacity 0.2s ease-out;
		}
		#pr .slick-slide a{
			display: block;
			width: 100%;
			}
	#pr .slick-active{
		display: block;
		opacity: 1;
		order: 1;
		}
	#pr .slick-arrow{
		margin-top: -2.5em;
		}
[data-number]{}
	[data-number] h2:lang(ja){
		padding-left: 2.5em;
		}
		[data-number] h2 svg:lang(ja){
			font-size: 2em;
			}
}
@media (max-width: 767.98px) and (orientation:portrait) {
/*767px以下 縦向き*/
#hero{}
	#hero dl{
		padding: 1.5em;
		height: 80vh;
		}
	#hero dt{
		margin-right: 8em;
		}
	#hero .movie{
		height: 80vh;
		}
	#hero .slick-arrow{
		bottom: 1.5em;
		}
	#hero .slick-prev{
		right: 5em;
		}
	#hero .slick-next{
		right: 1.5em;
		}
#feature{}
	#feature h2+div{
		flex-direction: column;
		}
	#feature dl{
		height: 90vw;
		}
#theme{}
	#theme dl{
		display: grid;
		grid-template-columns: 1fr 2fr;
		}
	#theme dl+dl{
		margin-top: 1em;
		}
	#theme dt{
		border-left: none;
		}
	#theme dt+dd{
		order: -1;
		}
		#theme dt+dd:before{
			content: "";
			display: block;
			padding-top: 100%;
			}
#accessMap{
	margin-bottom: 7%;
	}
#accessMapjapan{
	margin-bottom: calc(7% + 2em);
	border-bottom: 1px solid #999;
	}
	#accessMapjapan svg{}
		#accessMapjapan svg:nth-of-type(2){
			display: none;
			}
#ranking{}
	#ranking dl{
		width: 50%;
		height: calc((100vw - 3em) / 2);
		}
		#ranking dl:nth-of-type(1){
			width: 100%;
			height: calc((100vw - 3em) / 1);
			}
#movie{}
	#movie dl{
		width: 50%;
		}
		#movie dl:nth-of-type(n+3){
			display: none;
			}
#pickup{}
	#pickup dt{
		font-size: 0.8em;
		}
#pr{}
	#pr .slick-track{
		grid-template-columns: repeat(2, 1fr);
		}
}
@media (max-width: 767.98px) and (orientation:landscape) {
/*767px以下 横向き*/
#hero{}
	#hero dl{
		height: 100vh;
		}
	#hero .movie{
		height: 100vh;
		}
#theme{}
	#theme dl{
		height: calc(30vw - 0.5em);
		}
#pr{}
	#pr .slick-track{
		grid-template-columns: repeat(3, 1fr);
		}
}
@media (max-width: 767.98px) and (orientation:landscape), (min-width: 768px) {
/*767px以下 横向き, 768px以上,*/
#hero{}
	#hero dl{
		padding: 2em;
		}
	#hero dt{
		margin-right: 8em;
		}
	#hero .slick-arrow{
		bottom: 2em;
		}
	#hero .slick-prev{
		right: 5.5em;
		}
	#hero .slick-next{
		right: 2em;
		}
#feature{}
	#feature h2+div{
		flex-wrap: wrap;
		}
	#feature dl{
		width: 33.33%;
		}
#theme{}
	#theme h2+div{
		display: flex;
		flex-wrap: wrap;
		}
	#theme dl{
		flex-direction: column;
		}
	#theme dt{
		position: absolute;
		left: 0;
		bottom: 0;
		justify-content: center;
		width: 100%;
		height: 25%;
		border-top: none;
		overflow: hidden;
		}
	#theme dt+dd{
		padding-top: 100%;
		}
	#theme .thumb{
		height: 75%;
		}
#accessMap{
	margin: 3.5% 0;
	}
	#accessMap .wrap{
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		}
#accessMapjapan{
	width: 46%;
	}
#accessMapWide{
	width: 50%;
	}
#ranking{}
	#ranking dl{
		width: 25%;
		}
		#ranking dl:nth-of-type(1){
			width: 50%;
			}
#movie{}
	#movie dl{
		width: 33.33%;
		}
		#movie dl:nth-of-type(n+4){
			margin-top: 2em;
			}
}
@media (max-width: 767.98px) and (orientation:landscape), (min-width: 768px) and (max-width: 991.98px) {
/*767px以下 横向き, 768px～991px*/
#feature{}
	#feature dl{
		height: calc((100vw - 3em) / 3);
		}
#theme{}
	#theme dl{
		width: calc(33.33% - 0.66em);
		}
		#theme dl:nth-of-type(3n+2){
			margin-left: 1em;
			margin-right: auto;
			}
		#theme dl:nth-of-type(n+4){
			margin-top: 1em;
			}
#ranking{}
	#ranking dl{
		height: calc((100vw - 3em) / 4);
		}
		#ranking dl:nth-of-type(1){
			height: calc((100vw - 3em) / 2);
			}
}


/* for tablet */
@media (min-width: 768px) {
/*768px以上*/
#main{}
	#main h2+div+div{}
		#main h2+div+div a{
			padding: 2em 0;
			}
		#main h2+div+div a+a{
			position: relative;
			}
			#main h2+div+div a+a:before{
				content: "";
				position: absolute;
				top: calc(50% - 0.7em);
				left: 0;
				height: 1.4em;
				border-left: 1px solid #9f9f9f;
				}
#hero{}
	#hero dl{
		flex-wrap: wrap;
		align-items: flex-end;
		align-content: flex-end;
		justify-content: space-between;
		height: 55vw;
		}
	#hero dt{
		margin-top: 2em;
		margin-left: auto;
		padding-left: 1em;
		}
	#hero dt+dd+dd{
		margin-right: auto;
		padding-right: 1em;
		}
		#hero dt+dd+dd i{
			margin-bottom: 1em;
			}
		#hero dt+dd+dd svg{
			font-size: 6em;
			}
	#hero .movie{}
		#hero .movie svg{
			font-size: 6em;
			}
#feature{}
	#feature dt{
		font-size: 1.2em;
		}
#theme{}
	#theme dt{
		font-size: 1.1em;
		}
#movie{}
	#movie dt{
		font-size: 1.2em;
		}
#pickup{}
	#pickup .slick-list{
		margin: 0 -1em;
		}
	#pickup .slick-slide{
		padding: 0 1em;
		}
#pr{}
	#pr h3{
		text-align: center;
		}
	#pr .slick-slider{
		align-items: center;
		justify-content: space-between;
		}
	#pr .slick-track{
		display: flex;
		align-items: center;
		}
	#pr .slick-slide{
		float: none;
		padding: 0 0.5em;
		align-self: center;
		}
	#pr .slick-list{
		width: calc(100% - 7em);
		}
[data-number]{}
	[data-number] h2:lang(ja){
		padding-left: 3em;
		}
		[data-number] h2 svg:lang(ja){
			left: -0.5em;
			font-size: 3em;
			}
	[data-number] h2+div:lang(ja){
		margin-top: 3em !important;
		}
}
@media (min-width: 768px) and (max-width: 1199.98px) {
/*768px～1199px*/
}
@media (min-width: 768px) and (max-width: 991.98px) {
/*768px～991px*/
#main{}
	#main h2+div+div{
		margin-top: 1.5em;
		}
#hero{}
	#hero dl{
		padding-left: 4em;
		}
	#hero .movie{
		height: 50vw;
		}
		#hero .movie i{
			left: calc(50% - 362px + 2em);
			bottom: 3em;
			}
#heroScroll{
	left: calc(50% - 362px);
	margin-left: -0.5em;
	}
#feature{}
	#feature dl{
		height: calc(724px / 3);
		}
#ranking{}
	#ranking dl{
		height: calc(724px / 4);
		}
		#ranking dl:nth-of-type(1){
			height: calc(724px / 2);
			}
}


/* for PC */
@media (min-width: 992px) {
/*992px以上*/
#hTooltip{
	position: absolute;
	top: 0em;
	right: 5em;
	}
	#hTooltip ul{
		display: flex;
		align-items: center;
		height: 5em;
		}
	#hTooltip li{
		margin-left: 1em;
		}
	#hTooltip a{
		position: relative;
		display: block;
		width: 1.5em;
		height: 1.5em;
		color: transparent;
		fill: #fff;
		cursor: pointer;
		overflow: hidden;
		}
	#hTooltip a svg{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		}
#customSearch{}
	#customSearch.open-top{
		position: absolute;
		top: 3em;
		left: auto;
		right: 2em;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		width: 22em;
		height: auto;
		background: none;
		color: #1a1a1a;
		opacity: 1;
		}
		#customSearch.open-top:before{
			content: "";
			align-self: center;
			height: 0;
			width: 0;
			border: 0.5em solid transparent;
			border-bottom-color: #fff;
			transform: scale(1, 1.2);
			}
		#customSearch.open-top menu{
			display: none;
			}
		#customSearch.open-top .customSearch{
			width: 100%;
			padding: 0.8em;
			background: #fff;
			pointer-events: all;
			}
#main{}
	#main h2+div+div{
		margin-top: 2em;
		}
#fShare{}
	#fShare.open-top{
		position: absolute;
		top: 4em;
		left: auto;
		right: 2.25em;
		justify-content: flex-end;
		align-items: flex-start;
		height: 15em;
		background: none;
		color: #1a1a1a;
		pointer-events: none;
		opacity: 1;
		}
		#fShare.open-top menu{
			display: none;
			}
		#fShare.open-top dl{
			display: flex;
			flex-direction: column;
			pointer-events: all;
			}
			#fShare.open-top dl:before{
				content: "";
				position: relative;
				align-self: center;
				height: 0;
				width: 0;
				margin-top: -1em;
				border: 0.5em solid transparent;
				border-bottom-color: #fff;
				transform: scale(1, 1.2);
				}
	#fShare.open-top .wrap{
		width: 12em;
		margin: 0;
		}
#floatingNav{
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	}
	#floatingNav a{
		color: inherit;
		text-decoration: none;
		}
#hero{
	position: relative;
	}
	#hero dl{
		max-height: 600px;
		}
	#hero .movie{}
		#hero .movie i{
			bottom:4em;
			}
#heroScroll{
	margin-left: -3em;
	}
#feature{}
	#feature dl{
		padding: 1.5em;
		}
#theme{}
	#theme dl{
		width: calc(33.33% - 1.33em);
		}
		#theme dl:nth-of-type(3n+2){
			margin-left: 2em;
			margin-right: auto;
			}
		#theme dl:nth-of-type(n+4){
			margin-top: 2em;
			}
#ranking{}
	#ranking dl{
		padding: 1.5em;
		}
}
@media (min-width: 992px) and (max-width: 1199.98px) {
/*992px～1199px*/
#hero{}
	#hero dl{
		padding-left: calc(50% - 470px);
		}
	#hero .movie{}
		#hero .movie i{
			left: calc(50% - 470px);
			}
#heroScroll{
	left: calc(50% - 470px);
	}
#feature{}
	#feature dl{
		height: calc(940px / 3);
		}
#ranking{}
	#ranking dl{
		height: calc(940px / 4);
		}
		#ranking dl:nth-of-type(1){
			height: calc(940px / 2);
			}
}
@media (min-width: 1200px) {
/*1200px以上*/
#hero{}
	#hero dl{
		padding-left: calc(50% - 570px);
		}
	#hero .movie{}
		#hero .movie i{
			left: calc(50% - 570px);
			}
#heroScroll{
	left: calc(50% - 570px);
	}
#feature{}
	#feature dl{
		height: calc(1140px / 3);
		}
#ranking{}
	#ranking dl{
		height: calc(1140px / 4);
		}
		#ranking dl:nth-of-type(1){
			height: calc(1140px / 2);
			}
}


/* animation */
@keyframes heroScroll{
	0% {
		bottom: 6em;
		height: 0;
		}
	30% {
		bottom: 0em;
		height: 6em;
		}
	60% {
		bottom: 0;
		height: 0;
		}
	100% {
		bottom: 0;
		height: 0;
		}
	}