@charset "UTF-8";

.con-area figure{
	text-align: center;
}



@media all and (min-width: 768px) {
	.con-area .inner{
		padding: 50px 40px;
	}
	.con-area h1{
		height: 390px;
	}
		.con-area h1.vol1{background: url(../img/interview/vol1/header.jpg) no-repeat;}
		.con-area h1.vol2{background: url(../img/interview/vol2/header.jpg) no-repeat;}
		.con-area h1.vol3{background: url(../img/interview/vol3/header.jpg) no-repeat;}
		.con-area h1.vol4{background: url(../img/interview/vol4/header.jpg) no-repeat;}
		.con-area h1.vol5{background: url(../img/interview/vol5/header.jpg) no-repeat;}
		.con-area h1.vol6{background: url(../img/interview/vol6/header.jpg) no-repeat;}
		.con-area h1.vol7{background: url(../img/interview/vol7/header.jpg) no-repeat;}
		.con-area h1.vol8{background: url(../img/interview/vol8/header.jpg) no-repeat;}
		.con-area h1.vol9{background: url(../img/interview/vol9/header.jpg) no-repeat;}
		.con-area h1.vol10{background: url(../img/interview/vol10/header.jpg) no-repeat;}
		.con-area h1.vol11{background: url(../img/interview/vol11/header.jpg) no-repeat;}

	.con-area h2{
		font-size: 110%;
		color: #141414;
		border-bottom: 1px dotted #141414;
		border-top: 1px dotted #141414;
		line-height: 1.2;
		display: block;
		margin-bottom: 20px;
		padding: 0.8em;
		background-color: #fbdb52;
		letter-spacing: 0.04em;
	}
	.btn2{
		margin-bottom: 40px;
	}
	.con-area p{
		font-size: 100%;
		line-height: 1.6;
		margin-bottom: 20px;
		letter-spacing: 0.01em;
	}
	.con-area figure{
		margin: 35px auto;
	}
	.con-area .lazy{
		display: block;
		margin: 0 auto;
		position: relative;
		width: 600px;
		height: 400px;
	}
}
@media all and (max-width: 767px) {
	.con-area .inner{
		width: 90%;
		margin: 0 auto;
		padding: 20px 0;
	}
	.con-area h1{
		width: 100%;
		height: 0;
		padding-top: 46.875%;
		background-size: cover;

	}
		.con-area h1.vol1{background-image: url(../img/interview/vol1/header_smp.jpg);}
		.con-area h1.vol2{background-image: url(../img/interview/vol2/header_smp.jpg);}
		.con-area h1.vol3{background-image: url(../img/interview/vol3/header_smp.jpg);}
		.con-area h1.vol4{background-image: url(../img/interview/vol4/header_smp.jpg);}
		.con-area h1.vol5{background-image: url(../img/interview/vol5/header_smp.jpg);}
		.con-area h1.vol6{background-image: url(../img/interview/vol6/header_smp.jpg);}
		.con-area h1.vol7{background-image: url(../img/interview/vol7/header_smp.jpg);}
		.con-area h1.vol8{background-image: url(../img/interview/vol8/header_smp.jpg);}
		.con-area h1.vol9{background-image: url(../img/interview/vol9/header_smp.jpg);}
		.con-area h1.vol10{background-image: url(../img/interview/vol10/header_smp.jpg);}
		.con-area h1.vol11{background-image: url(../img/interview/vol11/header_smp.jpg);}

	.con-area h2{
		font-size: 90%;
		color: #141414;
		border-bottom: 1px dotted #141414;
		border-top: 1px dotted #141414;
		line-height: 1.2;
		display: block;
		margin-bottom: 20px;
		padding: 0.6em;
		background-color: #fbdb52;
		letter-spacing: 0.04em;
	}
	.btn2{
		margin-bottom: 20px;
	}
	.con-area p{
		font-size: 90%;
		line-height: 1.4;
		margin-bottom: 20px;
		letter-spacing: 0.01em;
	}
	.con-area figure{
		width: 100%;
		margin: 15px auto;
	}
	.con-area .lazy{
		display: block;
		margin: 0 auto;
		position: relative;
		background-size: cover;
	}
	.con-area #ph1 .lazy{
		width: 100%;
		height: 0;
		padding-top: 66.66%;
	}
}

/* -----------------------------------------------------------
   LIST
------------------------------------------------------------*/

#bknum-list h3{
	font-family: source-han-serif-japanese, serif;
}
#bknum-list ul{
	list-style: none;
	display:flex;
	flex-wrap:wrap;
}
#bknum-list li{
	line-height: 1.2;
	box-sizing: border-box;


}
	#bknum-list li:nth-child(4n){
		margin-right:0;
	}
	#bknum-list a{
		display: block;
		box-shadow: 0px 1px 5px 1px rgba(0,0,0,0.1);
	}
	#bknum-list li figure .lazy{
		width: 100%;
		height: 0;
		padding-top: 66.4%;
		position:relative;
		background-size: cover;
		display: block;
	}
	#bknum-list a{
		-webkit-filter: grayscale(0) blur(0);
		filter: grayscale(0) blur(0);
		-webkit-transition: .3s ease-in-out;
		transition: .3s ease-in-out;
	}
	#bknum-list a:hover{
		-webkit-filter: grayscale(100%) blur(3px);
		filter: grayscale(100%) blur(3px);
	}
	#bknum-list li p{
		color: #fff;
		background-color: #141414;
		text-align: center;
		line-height: 2.0;
    font-family: source-han-serif-japanese, serif;
	}
	#bknum-list li p .vol{
		color: #fbdb52;
	}

@media all and (min-width: 768px) {

	#bknum-list{
		width: 1030px;
		margin: 20px auto 0;
	}
	#bknum-list h3{
		font-size: 180%;
		margin-bottom: 10px;
	}
	#bknum-list li{
		width: 24%;
		margin-right: 1.3%;
		margin-bottom: 20px;
	}
	#bknum-list li p{
		font-size: 90%;
	}
}
@media all and (max-width: 767px) {
	#bknum-list{
		width: 95%;
		margin: 20px auto 0;
	}
	#bknum-list h3{
		font-size: 120%;
		margin-bottom: 6px;
		letter-spacing: 0.01em;
	}
	#bknum-list li{
		width: 49%;
		margin-right: 2%;
		margin-bottom: 2%;
	}
	#bknum-list li:nth-child(2n){
		margin-right:0;
	}
	#bknum-list li p{
		font-size: 80%;
		font-weight: bold;
	}
}