@charset "UTF-8";

.wrapper{
	z-index: 20;
}

/* index kv ---------------------------------------*/

.indexkv-wrapper{
	overflow: hidden;
	width:100%;
	padding-top: 55px;
	background: #000;
	color: #fff;
	position:relative;
	z-index: 15;
}

.indexkv{
	position: relative;
	margin:0 auto;
	background: url(../img/common/bg_page.jpg) no-repeat center center;
	background-size: cover;
	height: auto;
	padding-top: 20px;
	padding-bottom: 120px;
}

.indexkv img{
	width:100%;
}

.indexkv .category{
	color: #ccc;
	border-color: #ccc;
	transition: all .25s ease;
	opacity: 0;
}

.indexkv-slider-wrapper{
	width: 669px;
	margin: 0 auto;
	position:relative;
}

.indexkv-slider-item-image{
	font-size:20px;
	margin-bottom: 15px;
	position:relative;
	overflow: hidden;
	border-radius:5px;
}

.indexkv-slider-item-image::after{
	display:block;
	content:'';
	background:rgba(0,0,0,0.5);
	background-size:100%;
	width:100%;
	height:100%;
	position:absolute;
	left:0;
	top:0;
	transition: all .25s ease;
}

.indexkv-slider-item-title{
	font-size:18px;
	line-height: 1.8;
	color: #fff;
	transition: all .25s ease;
	opacity: 0;
	position:relative;
	padding-bottom: 8px;
	margin-bottom: 15px;
}

.indexkv-slider-item-title::after{
	display:block;
	content:'';
	background:#aaa;
	background-size:100%;
	width:46px;
	height:1px;
	position:absolute;
	left:0px;
	bottom: 0;
}

.indexkv-tag-list{
	line-height: 1;
	font-size:0px;
	transition: all .25s ease;
	opacity: 0;
}

.indexkv-tag-list li{
	display: inline-block;
	font-size:13px;
	margin-right: 10px;
	margin-bottom: 10px;
}

.indexkv-tag-list li a{
	display: block;
	background: #000;
	color: #aaa;
	padding: 5px;
}

.indexkv .swiper-button-next{
	top: 156px;
	right: -40px;
	margin-top: 0;
}
.indexkv .swiper-button-prev{
	top: 160px;
	left: -40px;
	margin-top: 0;
}

.indexkv .swiper-container-horizontal>.swiper-pagination-bullets{bottom:-20px;}

.indexkv .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{
	background: #fff;
	border-radius:2px;
	width: 6px;
	height: 6px;
	margin: 0 6px;
}

.indexkv .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active{
	background: #aaa;
}


.indexkv .swiper-slide-active .indexkv-slider-item-image::after,
.indexkv .swiper-slide-duplicate-active .indexkv-slider-item-image::after{opacity: 0;}

.indexkv .swiper-slide-active .indexkv-slider-item-title,
.indexkv .swiper-slide-duplicate-active .indexkv-slider-item-title,
.indexkv .swiper-slide-active .indexkv-tag-list,
.indexkv .swiper-slide-duplicate-active .indexkv-tag-list,
.indexkv .swiper-slide-active .category,
.indexkv .swiper-slide-duplicate-active .category{opacity: 1;}


/* index nav ---------------------------------------*/

.indexnav{
	position:absolute;
	right: 50px;
	top: 0px;
	z-index: 10;
}

.indexnav.is-fixed{
	position: fixed;
	top: 55px;
}

.indexnav-list{
	padding-top: 50px;
}

.indexnav-list li{
}

.indexnav-list li a{
	display: block;
	width: 5px;
	height: 40px;
	position:relative;
	font-size:8px;
}

.indexnav-list li a::after{
	display:block;
	content:'';
	background:#aaa;
	width:5px;
	height:5px;
	position:absolute;
	left:0px;
	top:50%;
	transform:translate(0,-50%);
}

.indexnav-list li a span{
	display: block;
	width: 60px;
	position:absolute;
	line-height: 1;
	right: -15px;
	text-align:center;
	top:135%;
	transform-origin: right top;
	transform:translate(0,-50%) rotate(90deg);
	transition: all .25s ease;
	opacity: 0;
}
.indexnav-list li.is-active a::after{background: #000;}
.indexnav-list li.is-active a span{opacity:1;}

.indexnav-arrow{
	position:absolute;
	left: -10px;
	bottom: -30px;
	width: 26px;
	display: block;
}

/* index article ---------------------------------------*/

.indextopic{
	position:relative;
	margin-bottom: 20px;
}

.indextopic-inner{
	display:flex;
	justify-content:space-between;
}

.indextopic-inner::after{display: none;}

.indextopic-first{
	width: calc(50% - 8px);
	margin-top: -50px;
}

.indextopic-first .entrylist-item-image{height:695px;background: #141414;}

.indextopic-second{
	width: calc(50% - 8px);
}

.indextopic-tag{
	position:relative;
	height: 385px;
}

.indextopic-tag-inner{
	position:absolute;
	left:3%;
	top:50%;
	width: 94%;
	transform:translate(0%,-50%);
}

.indextopic-tag-title{
	font-size:18px;
	margin-bottom: 5px;
}


/* indexcategory ---------------------------------------*/

.indexcategory{
	margin-bottom: 20px;
}

.indexcategory-head{
	margin-bottom: 30px;
}

.indexcategory-title{
	line-height: 1;
	font-size:53px;
}

.indexcategory-lead{
	line-height: 1.6;
	font-size:16px;
	padding-top: 5px;
	color: #4d4d4d;
}

.indexshowall{
	display: block;
	text-align: right;
	padding: 0px 0 0;
}

.indexshowall a{
	display: inline-block;
	font-size:14px;
	text-decoration:underline;
}

.indexshowall a::after{
	content:'＞';
	display: inline-block;
	vertical-align: middle;
	font-size:12px;
	margin-left: 5px;
}

.indexshowall a:hover{
	text-decoration:none;
}


/* indexdownload ---------------------------------------*/

.indexdownload{
	background: #E0E0E0;
	padding: 50px 30px;
}

.indexdownload-head{margin-bottom: 55px;}

.indexdownload-list{
	display:flex;
	flex-wrap:wrap;
	margin-bottom: 50px;
}

.indexdownload-item{
	width: calc(25% - 16px);
	margin-left: 16px;
}

.indexdownload-item:nth-child(4n + 1){
	margin-left: 0;
}

.indexdownload-item-image{
	margin-bottom: 10px;
}

.indexdownload-item-body{
	padding: 0 5px;
}

.indexdownload-item-title{
	font-weight:bold;
	line-height: 1.3;
	font-size:15px;
	margin-bottom: 15px;
}

.indexdownload-item-text{
	line-height: 1.7;
	font-size:13px;
	margin-bottom: 20px;
}

.indexdownload-item-btn{text-align: center;}

.indexdownload-item-btn a{
	display: inline-block;
	background: #000;
	box-shadow:0px 0px 10px rgba(0,0,0,0.4);
	border-radius: 4px;
	color: #fff;
	line-height: 1;
	padding: 10px 20px;
	text-align:center;
	font-size:14px;
	width: 200px;
	max-width: 100%;
}


/* small pc */
@media screen and (min-width: 769px) and (max-width: 1150px){

	.indextopic-tag{height: calc(36vw - 23px);}
	.indextopic-first .entrylist-item-image{height:60.8vw}

}



@media screen and (max-width: 768px){


	/* index kv ---------------------------------------*/

	.indexkv-wrapper{padding-top: 67px;}

	.indexkv{
		background: url(../img/common/bg_page_sp.jpg) no-repeat center center;
		background-size: cover;
		height: auto;
		padding-top: 20px;
		padding-bottom: 140px;
	}

	.indexkv-slider-wrapper{width: 300px;}

	.indexkv-slider-item-image{
		font-size:20px;
		margin-bottom: 15px;
	}

	.indexkv-slider-item-title{
		font-size:17px;
		line-height: 1.4;
	}

	.indexkv-tag-list li{
		font-size:12px;
		margin-right: 5px;
		margin-bottom: 5px;
	}

	.indexkv-tag-list li a{padding: 4px;}

	.indexkv .swiper-button-next{
		top: 120px;
		right: -30px;
	}
	.indexkv .swiper-button-prev{
		top: 120px;
		left: -30px;
	}

	.indexkv .swiper-container-horizontal>.swiper-pagination-bullets{bottom:-50px;}



	/* index nav ---------------------------------------*/

	.indexnav{
		position:fixed;
		right: 20px;
		top: auto;
		bottom: 10px;
		height: auto;
	}

	.indexnav.is-fixed{top:auto;}

	.indexnav-list{display: none}
	.indexnav-arrow{
		position:relative;
		left: 0;
		bottom: 0;
		width: 26px;
	}

	/* index article ---------------------------------------*/

	.indextopic{
		position:relative;
		margin-bottom: 20px;
	}

	.indextopic-inner{display: block}

	.indextopic-first{
		width: 100%;
		margin-top: -50px;
		padding-bottom: 60px;
		border-bottom: 1px solid #ccc;
	}

	.indextopic-first .entrylist-item-image{height:auto;}

	.indextopic-second{
		width: 100%;
	}

	.indextopic-tag{
		height: auto;
		border-bottom: 1px solid #ccc;
		margin-bottom: 70px
	}

	.indextopic-tag-inner{
		position:relative;
		left:0;
		top:0;
		width: 100%;
		transform:translate(0%,0%);
		text-align:center;
		padding: 40px 0;
	}

	.indextopic-tag-title{
		font-size:20px;
		margin-bottom: 15px;
	}

	.indextopic-tag .tag-list li{margin-bottom: 15px}

	.indextopic-tag .tag-list li a{
		font-size:14px;
		padding: 8px 8px;
	}

	.indextopic-list .entrylist-item{
		width: calc(50% - 8px);
		margin-left: 16px;
	}
	.indextopic-list .entrylist-item:nth-child(2n + 1){margin-left: 0}


	/* indexcategory ---------------------------------------*/

	.indexcategory{margin-bottom: 90px;}
	.indexcategory-head{margin-bottom: 30px;}

	.indexcategory-title{
		font-size:42px;
		line-height: 1.5
	}

	.indexcategory-lead{
		line-height: 1.5;
		font-size:15px;
	}

	.indexshowall{
		text-align:center;
		border-bottom: 1px solid #ccc;
		padding: 10px;
	}

	.indexshowall a{
		display: block;
		font-size:15px;
		text-decoration:none;
	}


	/* indexdownload ---------------------------------------*/

	.indexdownload{
		padding: 20px 50px;
		margin: 0 20px 80px;
	}

	.indexdownload-head{
		text-align:center;
		margin-bottom: 30px;
	}

	.indexdownload-list{display: block}

	.indexdownload-item{
		width: 100%;
		margin: 0 0 50px;
	}

	.indexdownload-item-image{margin-bottom: 15px;}
	.indexdownload-item-body{padding: 0;}

	.indexdownload-item-title{
		font-size:16px;
		margin-bottom: 10px;
	}

	.indexdownload-item-text{
		line-height: 1.6;
		font-size:14px;
		margin-bottom: 20px;
	}

	.indexdownload-item-btn{text-align: center;}

	.indexdownload-item-btn a{
		padding: 13px 10px;
		font-size:15px;
	}



}