/* CSS Document */

#pagePath{
	display: none;
	}

#main{
	overflow: hidden;
	}

#subject{
	background: #223a70;
	color: #fff;
	fill: #fff;
	}
	#subject .wrap{
		display: flex;
		flex-direction: column;
		align-items: center;
		}

#hero{
	padding: 0;
	}
	#hero .wrap{
		display: flex;
		flex-direction: column;
		align-items: center;
		}

#info{
	padding-bottom: 0;
	}

#movie{}
	#movie h3{
		text-align: center;
		}

#movieBody{
	display: flex;
	}

#campaign{
	padding-top: 0;
	overflow: hidden;
	}
	#campaign h2{
		position: relative;
		padding: 1em 0;
		color: #fff;
		fill: #fff;
		text-align: center;
		}
		#campaign h2:before{
			content: "";
			position: absolute;
			top: 0;
			left: calc(50%  - 50vw);
			width: 100vw;
			height: 100%;
			background: #223a70;
			z-index: -1;
			}
	#campaign h2+div{
		margin-top: 2em;
		}
	#campaign dl{
		position: relative;
		display: flex;
		flex-direction: column;
		}
	#campaign dt{
		margin-top: 0.5em;
		text-align: center;
		order: 2;
		}
	#campaign dt+dd{
		order: 1;
		}
	#campaign dd{}
	#campaign dd a{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			opacity: 0;
			}
	#campaign .thumb{
		padding-top: 46.8%;
		}
	#campaign .slick-arrow{}
		#campaign .slick-arrow svg{
			border-top-right-radius: 0;
			border-bottom-right-radius: 0;
			}

#campaignA{}
	#campaignA ul{
		display: flex;
		list-style: none;
		}
	#campaignA li{}
		#campaignA li a{
			display: block;
			}

#recommend{
	padding-top: 0;
	}
	#recommend h2{
		position: relative;
		padding: 1em 0;
		color: #fff;
		fill: #fff;
		text-align: center;
		}
		#recommend h2:before{
			content: "";
			position: absolute;
			top: 0;
			left: calc(50%  - 50vw);
			width: 100vw;
			height: 100%;
			background: #223a70;
			z-index: -1;
			}
	#recommend h2+div{
		margin-top: 2em;
		}
	#recommend h2+div:not(#itemList){}
		#recommend h2+div:not(#itemList) p{
			padding: 20% 1em;
			background: #f2f2f2;
			text-align: center;
			}
	#recommend .buttonSet{
		margin-top: 0;
		}

#searchMenu{
	position: relative;
	}

#itemList{}

#sns{
	padding: 0;
	}
	#sns .wrap{
		display: flex;
		}

#facebook{}
	#facebook > div+div{
		margin-top: 0;
		}

#poster{}
	#poster a{
		display: block;
		border: 1px solid #ccc;
		}

#topics{
	overflow: hidden;
	}
	#topics h2{
		position: relative;
		padding: 1em 0;
		color: #fff;
		fill: #fff;
		text-align: center;
		}
		#topics h2:before{
			content: "";
			position: absolute;
			top: 0;
			left: calc(50%  - 50vw);
			width: 100vw;
			height: 100%;
			background: #223a70;
			z-index: -1;
			}
	#topics h2+div{
		margin-top: 0;
		}

#topicsNone{}
	#topicsNone:not(.topicsNone){
		display: none;
		}
		#topicsNone+article{
			display: none;
			}

#banner{
	padding-top: 0;
	}
	#banner ul{
		display: flex;
		flex-wrap: wrap;
		list-style: none;
		}
	#banner li{}
		#banner li:nth-child(2) .thumb,
		#banner li:nth-child(3) .thumb,
		#banner li:nth-child(n+6) .thumb{
			background-size: contain;
			object-fit: contain;
			}
	#banner .thumb{
		padding-top: 24.3%;
		}

#dc{
	padding-top: 0;
	}
	#dc h2{
		margin: auto;
		color: #000;
		text-align: center;
		border-bottom: 3px solid #000;
		line-height: 1.4em;
		}
	#dc h2+div{
		width: 100%;
		margin-top: 2em;
		}
	#dc dl{
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 3em 1em;
		color: #e30112;
		font-weight: bold;
		text-align: center;
		transition: opacity 0.2s ease-out;
		}
		#dc dl:hover{
			opacity: 0.7;
			}
	#dc dt+dd{
		margin-top: 0.5em;
		}
		#dc dt+dd:empty{
			display: none;
			}
	#dc a{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border: 5px solid #e30112;
		color: transparent;
		}
	#dc h2+div,
	#dc .wrap{
		display: flex;
		}


/* for all */
@media (max-width: 1199px) {
/*1199px以下*/
}
@media (max-width: 991px) {
/*991px以下*/
}


/* for mobile */
@media (max-width: 767px) {
/*767以下px*/
#campaign{}
	#campaign dl{
		margin: 0 0.5em;
		}
	#campaign .slide{
		margin-right: -1em;
		margin-left: -1em;
		}
#sns{}
	#sns .wrap{
		flex-direction: column;
		}
#poster{
	margin-top: 2em;
	}
#banner{}
	#banner ul{
		justify-content: space-between;
		}
	#banner li{
		width: calc(50% - 0.5em);
		}
		#banner li:nth-child(n+3){
			margin-top: 1em;
			}
}
@media (max-width: 767px) and (orientation:portrait) {
/*767px以下 縦向き*/
#movieBody{
	flex-direction: column;
	}
#campaignA{}
	#campaignA ul{
		flex-direction: column;
		}
	#campaignA li+li{
		margin-top: 1em;
		}
#dc{}
	#dc dl+dl{
		margin-top: 1em;
		}
	#dc dt{
		font-size: 1.6em;
		line-height: 1.4em;
		}
	#dc dt+dd{
		font-size: 1.2em;
		}
	#dc h2+div,
	#dc .wrap{
		flex-direction: column;
		align-items: stretch;
		}
}
@media (max-width: 767px) and (orientation:landscape) {
/*767px以下 横向き*/
#movieBody{}
	#movieBody > div{
		width: 100%;
		}
	#movieBody > div+div{
		margin: 0 0 0 1em;
		}
#campaignA{}
	#campaignA ul{
		flex-wrap: wrap;
		justify-content: center;
		}
	#campaignA li{
		width: calc(33.33% - 0.666em);
		margin-left: 1em;
		}
		#campaignA li:nth-of-type(3n+1){
			margin-left: 0;
			}
		#campaignA li:nth-of-type(n+4){
			margin-top: 1em;
			}
			#campaignA li:nth-of-type(n+4):last-child{
				margin-right: auto;
				}
#dc{}
	#dc dl{
		width: calc(50% - 0.5em);
		margin-top: 1em;
		}
		#dc dl:nth-of-type(-n+2){
			margin-top: 0;
			}
	#dc dt{
		font-size: 1.2em;
		line-height: 1.4em;
		}
	#dc h2+div,
	#dc .wrap{
		flex-wrap: wrap;
		justify-content: space-between;
		}
}


/* for tablet */
@media (min-width: 768px) {
/*768px以上*/
#hero{}
	#hero p{
		text-align: center;
		}
#info{}
	#info .wrap{
		text-align: center;
		}
#movieBody{}
	#movieBody > div{
		width: 100%;
		}
	#movieBody > div+div{
		margin: 0 0 0 2em;
		}
#campaign{}
	#campaign h2+div{
		overflow: hidden;
		}
	#campaign dl{
		margin: 0 0.5em;
		}
	#campaign .slide{
		margin-right: -0.5em;
		margin-left: -0.5em;
		}
	#campaign .slick-prev{
		left: 0.5em;
		}
	#campaign .slick-next{
		right: 0.5em;
		}
#campaignA{}
	#campaignA ul{
		flex-wrap: wrap;
		justify-content: center;
		}
#sns{}
	#sns .wrap{
		justify-content: center;
		}
		#sns .wrap > div{
			max-width: 500px;
			}
#poster{
	margin: 0;
	}
#dc{}
	#dc dl{}
		#dc dl:nth-of-type(-n+2){
			margin-top: 0;
			}
	#dc dt+dd{
		font-size: 1.2em;
		}
	#dc h2+div,
	#dc .wrap{
		flex-wrap: wrap;
		justify-content: center;
		}
}
@media (min-width: 768px) and (max-width: 1199px) {
/*768px～1199px*/
}
@media (min-width: 768px) and (max-width: 991px) {
/*768px～991px*/
#campaignA{
	margin-top: 3em;
	}
	#campaignA li{
		width: calc(33.33% - 0.666em);
		margin-left: 1em;
		}
		#campaignA li:nth-of-type(3n+1){
			margin-left: 0;
			}
		#campaignA li:nth-of-type(n+4){
			margin-top: 1em;
			}
			#campaignA li:nth-of-type(n+4):last-child{
				margin-right: auto;
				}
#sns{}
	#sns .wrap{}
		#sns .wrap > div{
			width: calc(50% - 1em);
			}
#poster{
	margin-left: 2em;
	}
#banner{}
	#banner li{
		width: calc(33.33% - 0.67em);
		margin-left: 1em;
		}
		#banner li:nth-child(3n+1){
			margin-left: 0;
			}
		#banner li:nth-child(n+4){
			margin-top: 1em;
			}
#dc{}
	#dc dl{
		width: calc(50% - 0.75em);
		margin-top: 1.5em;
		}
	#dc dt{
		font-size: 1.8em;
		line-height: 1.4em;
		}
}


/* for PC */
@media (min-width: 992px) {
/*992px以上*/
#campaignA{
	margin-top: 4em;
	}
	#campaignA li{
		width: calc(33.33% - 1em);
		margin-left: 1.5em;
		}
		#campaignA li:nth-of-type(3n+1){
			margin-left: 0;
			}
		#campaignA li:nth-of-type(n+4){
			margin-top: 1.5em;
			}
			#campaignA li:nth-of-type(n+4):last-child{
				margin-right: auto;
				}
#sns{}
	#sns .wrap{}
		#sns .wrap > div{
			width: calc(50% - 2em);
			}
#poster{
	margin-left: 4em;
	}
#itemList{}
	#itemList section{
		margin-bottom: 2em;
		}
#banner{}
	#banner li{
		width: calc(25% - 0.75em);
		margin-left: 1em;
		}
		#banner li:nth-child(4n+1){
			margin-left: 0;
			}
		#banner li:nth-child(n+5){
			margin-top: 1em;
			}
#dc{}
	#dc dl{
		width: calc(50% - 1em);
		margin-top: 2em;
		}
	#dc dt{
		font-size: 2.1em;
		line-height: 1.4em;
		}
}
@media (min-width: 992px) and (max-width: 1199px) {
/*992px～1199px*/
}
@media (min-width: 1200px) {
/*1200px以上*/
#hero{}
	#hero .wrap{
		padding: 0 100px;
		}
}


/* Edge */
@supports (-ms-ime-align:auto) {
}


/* ie */
@media all and (-ms-high-contrast: none){
#hero{}
	#hero img{
		max-width: 940px;
		}
}