/* CSS Document */
@media screen and (max-width:1159px){
	.sp{
		display:block;
	}
	.pc{
		display:none !important;
	}
}
@media screen and (min-width:1160px){
	.pc{
		display:block;
	}
	.sp{
		display:none;
	}
}
main{
	color: #1A1A1A;
	fill: #1A1A1A;
	font-family: source-han-sans-cjk-ja, sans-serif;
	font-weight: 500;
	line-height: 1.4em;
	}
	main *{
		font-size: inherit;
		line-height: inherit;
		}
	main i{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 1em;
		height: 1em;
		}
	main svg{
		width: 1em;
		height: 1em;
		vertical-align: bottom;
		}

article,
aside{
	padding: 4em 0;
	}

#hero.pc{
	position: relative;
	background: url("../images/mainImg.jpg") center center;
	background-size: cover;
	padding-top: 32.15%;
	}
	#hero.pc div{
		position: absolute;
		right: 5em;
		bottom: -15em;
		width: 32.15%;
		height: 100%;
		}
	#hero.pc img{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		-webkit-backface-visibility: hidden;
		}
#hero.sp{
	background: none;
	}
	#hero.sp div{
		width: 100%;
		height: 100%;
		margin-top: 56px;
	}
#attention{
	background: #c7c7c7;
	color: #1A1A1A;
	}

	#attention h2{
		font-size: 3em;
		line-height: 1.5em;
		color: #FFFFFF
		}
	@media screen and (max-width:1159px){
		#attention h2{
			font-size:  1.7em;
			}
	}
		#attention h2 svg{
			width: 4.54em;
			}
	#attention h2+div{
		margin-top: 3em;
		}
	#attention h3{
		font-size: 1.75em;
		font-weight: 700;
		}
	#attention h3+div{
		margin-top: 1.5em;
		}
	#attention p{
		font-size: 1.25em;
		line-height: 1.8em;
		}

#recommend{
	background: #1A1A1A;
	color: #FFFFFF;
	}
	#recommend h2{
		color: #f0e68c;
		fill: #f0e68c;
		}
	#recommend dl{
		position: relative;
		display: flex;
		flex-direction: column;
		margin: 0 1em;
		}
		#recommend dl:hover{}
			#recommend dl:hover dt{
				color: #c7c7c7;
				}
	#recommend dt{
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		max-height: 3.2em;
		font-size: 1.125em;
		font-weight: 700;
		line-height: 1.6em;
		overflow: hidden;
		}
	#recommend dt+dd{
		margin-bottom: 1em;
		order: -1;
		}
	#recommend dd{}
		#recommend dd a{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			opacity: 0;
			}
	#recommend .thumb{
		padding-top: 100%;
		}
	#recommend .slick-slider{
		position: relative;
		}
	#recommend .slick-list{
		margin: 0 -1em;
		}
	#recommend .slick-arrow{
		position: absolute;
		top: calc(50%  - 1.5em);
		width: 3em;
		height: 3em;
		border-radius: 100%;
		background: #c7c7c7;
		fill: #1A1A1A;
		font-size: 1.5em;
		cursor: pointer;
		z-index: 1;
		}
	#recommend .slick-prev{
		left: -1.5em;
		transform: scale(-1, 1);
		}
	#recommend .slick-next{
		right: -1.5em;
		}
		@media screen and (max-width:1159px){
			#recommend dl{
				margin: 0 2em;
			}
			#recommend dt{
				text-align: left;
			}
			#recommend .slick-arrow{
				width: 2em;
				height: 2em;
			}
			#recommend .slick-prev{
				left: -0.5em;
				transform: scale(-1, 1);
				}
			#recommend .slick-next{
				right: -0.5em;
				}
		}

.movieicon_y {
    display: inline-block;
    width: 1em;
    height: 1em;
    background: url(../images/icon_movie_y.png) no-repeat;
	background-size:contain;
}
.movieicon_b {
    display: inline-block;
    width: 1em;
    height: 1em;
    background: url(../images/icon_movie_b.png) no-repeat;
	background-size:contain;
}
#topics{}
	#topics nav{}
		#topics nav ul{
			display: flex;
			list-style: none;
			}
		#topics nav li{
			display: flex;
			align-items: center;
			width: 50%;
			margin: 0.5em;
			padding: 0.8em 1em;
			background: #c7c7c7;
			border-radius: 4px;
			color: #1A1A1A;
			fill: #1A1A1A;
			font-size: 1.125em;
			font-weight: 700;
			cursor: pointer;
			}
			#topics nav li i{
				margin-right: 0.5em;
				}
			#topics nav li i+i{
				margin-left: auto;
				margin-right: -0.2em;
				}
		#topics nav .select{
			margin: 0;
			background: #F2F2F2;
			border-radius: 4px 4px 0 0;
			}
			#topics nav .select i+i{
				display: none;
				}
	#topics section{
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		}
		#topics section > div{
			width: calc(100% - 300px - 2em);
			}
		#topics section h3{}
			#topics section h3 a{
				position: relative;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				max-height: 3.6em;
				padding-right: 1.5em;
				color: #9BBA00;
				fill: #9BBA00;
				font-size: 1.125em;
				font-weight: 700;
				line-height: 1.8em;
				overflow: hidden;
				}
			_:-ms-lang(x)::-ms-backdrop, #topics section h3 a{
				display: block;
				}
			#topics section h3 i{
				position: absolute;
				top: calc(50% - 0.5em);
				right: 0;
				}
		#topics section h3+div{
			margin-top: 0.5em;
			}
		#topics section p{
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			max-height: 3.6em;
			line-height: 1.8em;
			overflow: hidden;
			}
		#topics section dl{
			display: flex;
			margin-top: 1em;
			color: #808080;
			fill: #808080;
			}
		#topics section dt{
			display: flex;
			align-items: center;
			}
			#topics section dt:after{
				content: "：";
				}
			#topics section dt i{
				margin-right: 0.5em;
				}
		#topics section dd{
			margin-right: 2em;
			}
	#topics section+section{
		margin-top: 2em;
		padding-top: 2em;
		border-top: 1px solid #CCCCCC;
		}
	#topics section figure{
		width: 300px;
		order: -1;
		}
	#topics footer{
		display: flex;
		justify-content: center;
		margin-top: 4em;
		}
	#topics .tabContents{
		padding: 3em;
		background: #F2F2F2;
		}

#member{
	background: #F2F2F2;
	}
	#member h2{}
		#member h2:before{
			background: #fff;
			height: calc(100% + 3em);
			}
	#member section{
		margin-top: 4em;
		}
		#member section > div{
			position: relative;
			display: flex;
			flex-direction: column;
			justify-content: center;
			min-height: 200px;
			padding-left: calc(200px + 3em);
			}
		#member section h3{
			font-size: 1.75em;
			font-weight: 700;
			}
		#member section h3+i{
			position: absolute;
			top: 0;
			left: 0;
			display: block;
			width: 200px;
			height: 200px;
			}
		#member section p{
			margin-top: 1em;
			line-height: 1.8em;
			}
		#member section i{}
			#member section i .thumb{
				padding-top: 100%;
				border: 4px solid #f0e68c;
				border-radius: 100%;
				}
		#member section ul{
			display: flex;
			list-style: none;
			}
		#member section p+ul{
			flex-wrap: wrap;
			margin-top: 1em;
			}
			#member section p+ul li{
				margin-right: 2em;
				}
			#member section p+ul a{
				display: flex;
				align-items: center;
				color: #808080;
				fill: #808080;
				}
			#member section p+ul i{
				margin-right: 0.5em;
				}
			#member section p+ul i+i{
				margin: 0 0 0 0.5em;
				}
		#member section figure{
			margin-top: 2em;
			}
	#member section+section{
		margin-top: 3em;
		padding-top: 3em;
		border-top: 1px solid #CCCCCC;
		}
	#member figure{}
		#member figure li{
			width: calc(33.33% - 1.5em);
			}
		#member figure li+li{
			margin-left: 2em;
			}

@media screen and (max-width:1159px){
	#member{
		padding-top: 0!important;
		}
		#member h2{
			margin-top: 2em;
			}
		#member section{
			margin-top: 2em;
			}
			#member section > div{
				justify-content: center;
				min-height: 200px;
				padding-left: 0;
				}
			#member section h3{
				margin: 20px auto 0;
				font-size: 1.8em;
				text-align: center;
				}
			#member section h3+i{
				margin: auto;
				margin-bottom: 2em;
				order: -1;
				position: relative;
				}
			#member section p{
				line-height: 1.6em;
				font-size: 1.3em;
				margin-bottom: 10px;
				}
			#member section i{}
				#member section i .thumb{
					padding-top: 100%;
					border: 4px solid #f0e68c;
					border-radius: 100%;
					}
			#member section ul{
				display: block;
				}
			#member section p+ul{
				display: flex;
				flex-direction: column;
				margin-top: 0.5em;
				}
			#member section p+ul li{
				margin-top: 0.5em;
				margin-right: 0;
				}
			#member section p+ul a{
				font-size: 1.3em;
				}
			#member section figure{
				margin-top: 1em;
				}
			#member section+section{
				margin-top: 3.5em;
				padding-top: 3em;
				border-top: 1px solid #CCCCCC;
				}
				#member figure li+li{
					margin-left: 0em;
					}
			#member .slick-arrow{
				position: absolute;
				top: calc(50%  - 1em);
				width: 2em;
				height: 2em;
				border-radius: 100%;
				background: #f0e68c;
				fill: #1A1A1A;
				cursor: pointer;
				z-index: 1;
				}
			#member .slick-prev{
				left: 0.5em;
				transform: scale(-1, 1);
				}
			#member .slick-next{
				right: 0.5em;
				}
}


#photoCon{}
	#photoCon dl{
		width: 28em;
		}
	#photoCon dd{
		margin-top: 0.5em;
		line-height: 1.6em;
		}
	#photoCon .wrap{
		display: flex;
		justify-content: center;
		}
	.wrap{
		width: 1140px;
		margin:0 auto;
		text-align: left;
		box-sizing: border-box;
	}
@media screen and (max-width:1159px){
	.wrap{
		width: calc(100% - 3em);
		margin: auto;
	}
}

.title{
	position: relative;
	display: flex;
	align-items: center;
	padding-bottom: 1em;
	font-size: 2em;
	font-weight: 700;
	z-index: 1;
	}
	.title:before{
		content: "";
		position: absolute;
		left: calc(50% - 50vw);
		bottom: 0;
		width:  calc(100vw - 8px);
		height: 100%;
		border-bottom: 1px solid #c7c7c7;
		z-index: -1;
		}
	.title i{
		margin-right: 0.5em;
		}
	.title+*{
		margin-top: 2em;
		}

.pv{
	display: none!important;
	}

.linkBut{
	position: relative;
	display: block;
	min-width: 14em;
	padding: 1em 1.2em;
	background: #c7c7c7;
	border-radius: 4px;
	color: #1A1A1A;
	fill: #1A1A1A;
	font-size: 1.125em;
	font-weight: 700;
	text-align: center;
	}
	.linkBut:hover{
		text-decoration: none;
		}
	.linkBut i{
		position: absolute;
		top: calc(50% - 0.5em);
		right: 1em;
		}

.thumb{}
	.thumb img{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		object-fit: inherit;
		object-position: inherit;
		opacity: 1;
		transition: opacity 0.2s ease-out;
		}
	.thumb:not(img){
		position: relative;
		display: block;
		width: 100%;
		margin: 0;
		padding: 66.66% 0 0 0;
		object-fit: cover;
		object-position: center;
		background: rgba(0,0,0,0.05) url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 50 50"><path fill="rgba(0,0,0,0.2)" d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z" transform="rotate(200.584 25 25)"><animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.6s" repeatCount="indefinite"></animateTransform></path></svg>') center center no-repeat;
		background-size: 3em;
		overflow: hidden;
		background: opacity 0.2s ease-out;
		}
	img.thumb{
		opacity: 0;
		}


@media (max-width: 1158px) {
main{
	font-size: 14px;
	}
}


@media (min-width:1159px) {
main{
	font-size: 16px;
	margin-top: 140px;
	}
}


@media all and (-ms-high-contrast:none){
.thumb:not(img){
	background-size: cover;
	background-position: center center;
	}
	.thumb img{
		opacity: 0;
		}
}


#camera {
    color: #1A1A1A;
    fill: #1A1A1A;
    font-family: source-han-sans-cjk-ja, sans-serif;
    font-weight: 500;
    line-height: 1.4em;
    overflow: hidden;
}