@charset "utf-8";

/*----------------------------- styling -----------------------------*/
body{
	background:#000;
}

#main_contents_list_top{
	display:block;
	position:relative;
	top:0;
}

.main_contents_contents_headline0{
	font-size:16px;
	line-height:32px;
	font-weight:bold;
	text-indent:10px;
	text-align:left;
	letter-spacing:1px;
	margin:0 0 20px;
	position:relative;
}

.main_contents_contents_headline0::before, 
.main_contents_contents_headline0::after{
	content:"";
	background:#000;
	display:block;
	position:absolute;
}

.main_contents_contents_headline0::before{
	width:10px;
	aspect-ratio:1;
	bottom:-3.5px;
	right:20px;
}

.main_contents_contents_headline0::after{
	width:14px;
	aspect-ratio:1;
	bottom:-5.5px;
	right:0;
}

.main_contents_contents_headline0 > div::after{
	content:"";
	width:-moz-calc(100% - 37px);
	width:-webkit-calc(100% - 37px);
	width:calc(100% - 37px);
	height:2px;
	background:#000;
	display:block;
}

#main_contents_styling_list{
	width:100%;
	padding:0;
	display:flex;
	align-items:flex-start;
	flex-wrap:wrap;
}

#main_contents_styling_list > li{
	list-style:none;
	width:25%;
}

#main_contents_styling_list > li:first-child > div:first-child{
	display:flex;
	align-items:center;
	justify-content:center;
}

#main_contents_styling_list > li:first-child > div:first-child > div{
	color:#fff;
	width:90%;
	margin:10px auto 0;
}

#main_contents_styling_list > li:first-child > div:first-child > div > h2{
	padding:0;
	margin:0;
	color:#fff;
	font-weight:bold;
	font-size:20px;
}

#main_contents_styling_type_list{
	padding:0;
}

#main_contents_styling_type_list > li{
	list-style:none;
	margin-bottom:10px;
}

#main_contents_styling_type_list > li:last-child{
	margin-bottom:0;
}

#main_contents_styling_type_list a{
	color:#fff !important;
	font-size:16px;
	line-height:22px;
	font-weight:bold;
	display:block;
}

#main_contents_styling_type_list a::before{
	content:"\25A0";
	font-size:10px;
	line-height:22px;
	vertical-align:middle;
	margin-right:5px;
}

.main_contents_styling_show_trigger{
	width:100%;
	cursor:pointer;
	display:block;
}

.main_contents_styling_show_trigger > img{
	width:100%;
}

@-webkit-keyframes main_contents_styling_show_animate{
	0%{
		-webkit-transform:translateY(10%);
		transform:translateY(10%);
	}
	100%{
		-webkit-transform:translateY(0);
		transform:translateY(0);
	}
}

@keyframes main_contents_styling_show_animate{
	0%{
		-webkit-transform:translateY(10%);
		-ms-transform:translateY(10%);
		transform:translateY(10%);
	}
	100%{
		-webkit-transform:translateY(0);
		-ms-transform:translateY(0);
		transform:translateY(0);
	}
}

.main_contents_styling_show_animate{
	-webkit-animation-name:main_contents_styling_show_animate;
	animation-name:main_contents_styling_show_animate;
	animation-duration:0.5s;
	animation-fill-mode:forwards;
}

#main_contents_styling_detail{
	color:#333;
	background:rgba(0, 0, 0, 0.7);
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	z-index:2147483600;
	display:none;
	align-items:middle;
	opacity:0;
	overflow:auto;
	padding:16px 0;
	-webkit-overflow-scrolling:touch;
}

#main_contents_styling_detail_contents{
	width:1000px;
	margin:auto;
	padding:20px 0;
	background:#fff;
	display:flex;
	align-items:flex-start;
	position:relative;
}

#main_contents_styling_hide_trigger{
	width:20px;
	height:20px;
	border:solid #FFF 1px;
	background:#000;
	cursor:pointer;
	position:absolute;
	top:5px;
	right:5px;
	z-index:1;
	display:block;
	border-radius:50%;
	-webkit-border-radius:50%;
	-moz-border-radius:50%;
}

#main_contents_styling_hide_trigger::before, 
#main_contents_styling_hide_trigger::after{
	content:"";
	background:#FFF;
	position:absolute;
	transform:rotate(45deg);
	display:block;
}

#main_contents_styling_hide_trigger::before{
	width:1px;
	height:100%;
	top:0;
	left:calc(50% - 0.5px);
}

#main_contents_styling_hide_trigger::after{
	width:100%;
	height:1px;
	top:calc(50% - 0.5px);
	left:0;
}

#main_contents_styling_detail_contents_inner{
	width:960px;
	margin:0 auto;
	display:flex;
}

#main_contents_styling_detail_contents_img_parent{
	width:400px;
	margin-right:20px;
}

#main_contents_styling_detail_contents_img_parent > img{
	width:100%;
}

#main_contents_styling_detail_contents_detail_parent{
	width:540px;
}

#main_contents_styling_detail_contents_item_list_parent{
	width:100%;
	height:512px;
	overflow:auto;
}

#main_contents_styling_detail_contents_item_list_parent::-webkit-scrollbar{
	width:14px;
	height:14px;
}

#main_contents_styling_detail_contents_item_list_parent::-webkit-scrollbar-track{
	background:#f0f0f0;
	box-shadow:0 0 5px #ccc inset;
	border-radius:7px;
	-webkit-border-radius:7px;
	-moz-border-radius:7px;
}

#main_contents_styling_detail_contents_item_list_parent::-webkit-scrollbar-thumb{
	background:#ccc;
	border-radius:7px;
	-webkit-border-radius:7px;
	-moz-border-radius:7px;
}

#main_contents_styling_detail_contents_item_list{
	width:100%;
	padding:0;
	margin:0;
}

#main_contents_styling_detail_contents_item_list > li{
	list-style:none;
	margin-bottom:20px;
}

#main_contents_styling_detail_contents_item_list > li:last-child{
	margin-bottom:0;
}

#main_contents_styling_detail_contents_item_list > li > a{
	width:100%;
	display:flex;
	align-items:flex-start;
	position:relative;
}

#main_contents_styling_detail_contents_item_list > li > a > img{
	width:111px;
}

#main_contents_styling_detail_contents_item_list > li > a > div{
	width:-moz-calc(100% - 121px);
	width:-webkit-calc(100% - 121px);
	width:calc(100% - 121px);
	padding-top:10px;
	margin-left:10px;
}

#main_contents_styling_detail_contents_item_list > li > a > div > h3{
	font-size:16px;
	line-height:22px;
	margin:0 0 5px;
}

#main_contents_styling_detail_contents_item_list > li > a > div > p{
	font-size:16px;
	line-height:22px;
	margin:0;
}

#main_contents_styling_detail_contents_item_list > li > a > div > p::before{
	content:"\FFE5";
	font-size:16px;
	line-height:22px;
}

#main_contents_styling_detail_contents_item_list > li > a > div > p::after{
	content:"(\7A0E\8FBC)";
	font-size:16px;
	line-height:22px;
}

#main_contents_styling_detail_contents_item_list > li > a > div > div{
	color:#fff;
	font-size:16px;
	line-height:30px;
	padding:0 20px;
	margin:0;
	background:#000;
	display:inline-block;
	position:absolute;
	bottom:0;
	right:0;
}

#main_contents_styling_detail_contents_item_list > li > a > div > div::after{
	content:"";
	width:6px;
	height:6px;
	border-top:solid #fff 1px;
	border-right:solid #fff 1px;
	display:inline-block;
	transform:rotate(45deg);
}

#main_contents_pager0{
	margin-top:20px;
}

#main_contents_pager1{
	margin:20px 20px 60px auto;
	display:flex;
	justify-content:flex-end;
}

#main_contents_pager1 .pager_trigger_parent{
	margin-left:3px;
}

.pager, 
.pager_limit_text_prev, 
.pager_limit_text_next, 
.pager_trigger, 
.pager_trigger_active{
	color:#fff;
}

.pager_list .pager_trigger_active{
	color:#000;
	background:#fff;
}

@media screen and (max-width:1000px){
	.main_contents_contents_headline0{
		font-size:4.8vw;
		line-height:9vw;
		text-indent:1vw;
		letter-spacing:0.2vw;
		margin-bottom:5vw;
	}
	
	.main_contents_contents_headline0::before{
		width:2vw;
		bottom:-0.8vw;
		right:4vw;
	}
	
	.main_contents_contents_headline0::after{
		width:3vw;
		bottom:-1.3vw;
	}
	
	.main_contents_contents_headline0 > div::after{
		width:92%;
		height:0.3vw;
	}
	
	#main_contents_styling_list > li{
		width:50%;
	}
	
	#main_contents_styling_list > li > div{
		margin:4vw auto 0;
	}
	
	#main_contents_styling_list > li:first-child > div:first-child > div > h2{
		font-size:14px;
	}
	
	#main_contents_styling_type_list > li{
		margin-bottom:1.5vw;
	}
	
	#main_contents_styling_type_list a{
		font-size:4vw;
		line-height:6vw;
	}
	
	#main_contents_styling_type_list a::before{
		font-size:2vw;
		line-height:6vw;
		margin-right:0.6vw;
	}
	
	#main_contents_styling_detail{
		padding:3vw 0 5vw;
	}
	
	#main_contents_styling_detail_contents{
		width:94%;
		padding:2.1vw 0;
	}
	
	#main_contents_styling_hide_trigger{
		width:8vw;
		height:8vw;
		top:1vw;
		right:1vw;
	}
	
	#main_contents_styling_detail_contents_inner{
		width:96%;
		display:block;
	}
	
	#main_contents_styling_detail_contents_img_parent{
		width:100%;
		margin:0 0 4vw;
	}
	
	#main_contents_styling_detail_contents_detail_parent{
		width:100%;
	}
	
	#main_contents_styling_detail_contents_item_list_parent{
		width:100%;
		height:auto;
	}
	
	#main_contents_styling_detail_contents_item_list_parent::-webkit-scrollbar{
		width:2vw;
		height:2vw;
	}
	
	#main_contents_styling_detail_contents_item_list_parent::-webkit-scrollbar-track{
		box-shadow:0 0 0.8vw #ccc inset;
		border-radius:1vw;
		-webkit-border-radius:1vw;
		-moz-border-radius:1vw;
	}
	
	#main_contents_styling_detail_contents_item_list_parent::-webkit-scrollbar-thumb{
		border-radius:1vw;
		-webkit-border-radius:1vw;
		-moz-border-radius:1vw;
	}
	
	#main_contents_styling_detail_contents_item_list > li{
		list-style:none;
		margin-bottom:3vw;
	}
	
	#main_contents_styling_detail_contents_item_list > li > a > img{
		width:30%;
	}
	
	#main_contents_styling_detail_contents_item_list > li > a > div{
		width:68%;
		padding-top:2vw;
		margin-left:2%;
	}
	
	#main_contents_styling_detail_contents_item_list > li > a > div > h3{
		font-size:4vw;
		line-height:5.5vw;
		margin:0 0 1vw;
	}
	
	#main_contents_styling_detail_contents_item_list > li > a > div > p{
		font-size:4vw;
		line-height:5.5vw;
	}
	
	#main_contents_styling_detail_contents_item_list > li > a > div > p::before{
		font-size:4vw;
		line-height:5.5vw;
	}
	
	#main_contents_styling_detail_contents_item_list > li > a > div > p::after{
		font-size:4vw;
		line-height:5.5vw;
	}
	
	#main_contents_styling_detail_contents_item_list > li > a > div > div{
		font-size:4vw;
		line-height:7vw;
		padding:0 4vw;
		right:3vw;
	}
	
	#main_contents_styling_detail_contents_item_list > li > a > div > div::after{
		width:6px;
		height:6px;
		border-top:solid #fff 1px;
		border-right:solid #fff 1px;
	}
	
	#main_contents_pager1{
		margin:20px auto 40px;
		display:block;
		justify-content:unset;
	}
	
	#main_contents_pager1 .pager_trigger_parent{
		margin-left:auto;
	}
}
/*----------------------------- /styling -----------------------------*/