@charset "utf-8";


/* -------------------- 

zatsugaku.html 

-------------------- */


/* --- SP ---------- */

@media print, screen and (max-width: 740px) {
	
	.zatsugaku .main-title{
		background: url(../images/zatsugaku/zatsugaku-bk.jpg) 26% top no-repeat;
		background-size: cover;
		height: 200px;
	}
	
	.zatsugaku #chapter01 p{
		margin: 5%;
		line-height: 1.75em;
		font-size: 80%;
		letter-spacing: 0;
	}
	
	.zatsugaku #chapter02{
		background-color: #f9f9f9;
		padding: 40px 0;
	}

	.zatsugaku .zatsugaku-body{
		display: -webkit-flex;
		display: flex;
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
		-webkit-justify-content: space-between;
		justify-content: space-between;
	}
	
	.zatsugaku .zatsugaku-wrap{
		width: 48.5%;
		margin-bottom: 2%;
		background-color: #fff;
		border: 1px solid #e5e5e5;
	}

	.zatsugaku .zatsugaku-wrap a{
		color: #000;
		letter-spacing: 0;
	}

	.zatsugaku .zatsugaku-wrap h2{
		font-size: 90%;
		margin: 0;
		padding: 3% 4% 3%;
		overflow: hidden;
		text-overflow: ellipsis;
		word-wrap: break-word;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		line-height: 2em;
		height: 30px;
	}

	.zatsugaku .zatsugaku-wrap p{
		display: none;
	}
	
	.zatsugaku .zatsugaku-img{
		border-bottom: 1px solid #e5e5e5;
		height: 120px;
		overflow: hidden;
		position: relative;
		margin: auto;		
	}
	
	.zatsugaku .zatsugaku-img img{
		position: absolute;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		height: inherit;
	}	
	
	.zatsugaku .btn04{
		width: 70%;
		margin-top: 2em;
		position: relative;
	}
	
	.zatsugaku .btn04 a{
		padding: 4% 0;
	}
	
	.zatsugaku .btn04::after{
		position: absolute;
		content: "▼";
		top: 10px;
		right: 14px;
		font-size: 10px;
		color: var(--accent-col01);		
	}
	
	.zatsugaku .btn04:hover::after{
		position: absolute;
		content: "▼";
		top: 15px;
		right: 20px;
		font-size: 10px;
		color: #fff;	
	}
}


/* --- PC ---------- */

@media print, screen and (min-width: 741px) {
	
	.zatsugaku .main-title{
		background: url(../images/zatsugaku/zatsugaku-bk.jpg) center top no-repeat;
		background-size: cover;
		height: 350px;
	}
	
	.zatsugaku #chapter01 p{
		text-align: center;
		margin: 4% 0 2%;
		line-height: 2em;
	}
	
	.zatsugaku #chapter02{
		background-color: #f9f9f9;
		padding: 3% 0;
		margin-top: 3%;
	}
	
	.zatsugaku .zatsugaku-body{
		display: -webkit-flex;
		display: flex;
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
	}
	
	.zatsugaku .zatsugaku-wrap{
		width: 22.8%;
		margin: 0 1% 2%;
		background-color: #fff;
		border: 1px solid #e5e5e5;
	}
	
	.zatsugaku .zatsugaku-wrap:hover{
		box-shadow: 0px 0px 14px -7px #555;
		-webkit-transition: all 0.25s ease;
		-moz-transition: all 0.25 ease;
		-o-transition: all 0.25 ease;
		transition: all 0.25 ease;
	}
	
	.zatsugaku .zatsugaku-wrap a{
		color: #000;
		letter-spacing: 0;
	}
	
	.zatsugaku .zatsugaku-wrap a:hover{
		text-decoration: none;		
	}
	
	.zatsugaku .zatsugaku-wrap h2{
		font-size: 100%;
		margin: 0;
		padding: 3% 4% 3%;
		overflow: hidden;
		text-overflow: ellipsis;
		word-wrap: break-word;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		line-height: 2em;
		height: 26px;
	}
	
	.zatsugaku .zatsugaku-wrap a:hover h2{
		color: var(--accent-col01);
	}
	
	.zatsugaku .zatsugaku-wrap p{
		font-size: 80%;
		padding: 0 4%;
		margin-top: 0;
		line-height: 1.6em;
		overflow: hidden;
		text-overflow: ellipsis;
		word-wrap: break-word;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		height: 40px;
	}
	
	.zatsugaku .zatsugaku-img{
		border-bottom: 1px solid #e5e5e5;
		height: 170px;
		overflow: hidden;
		position: relative;
		margin: auto;		
	}
	
	.zatsugaku .zatsugaku-img img{
		position: absolute;
		height: inherit;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
	}
	
	.zatsugaku .btn04{
		width: 400px;
		margin-top: 50px;
		position: relative;
	}
	
	.zatsugaku .btn04::after{
		position: absolute;
		content: "▼";
		top: 15px;
		right: 20px;
		font-size: 10px;
		color: var(--accent-col01);		
	}
	
	.zatsugaku .btn04:hover::after{
		position: absolute;
		content: "▼";
		top: 15px;
		right: 20px;
		font-size: 10px;
		color: #fff;	
	}
}

@media print, screen and (max-width: 1106px) and (min-width: 741px){
	.zatsugaku .zatsugaku-wrap{
		width: 31%;
	}
	
	.zatsugaku .zatsugaku-img{
		height: 150px;
	}
}


/* -------------------- 

zatsugaku-bknum.html 

-------------------- */

.bknum-body{
	max-width: 700px;
	background-color: #fff;
}

.bknum-body h2{
	color: var(--accent-col01);
	border-bottom: 1px solid #e5e5e5;
	padding-bottom: 0.75em;
	margin: 0;
	font-size: 120%;
}
	
.bknum-body .bknum-img{
	text-align: center;
	margin: 4% 0;
}
	
.bknum-body p{
	font-size: 80%;
	letter-spacing: 0;
}
	
.zatsugaku .back-btn{
	width: 170px;
}
	
.zatsugaku .back-btn::after{
	display: none;
}


/* --- SP ---------- */

@media print, screen and (max-width: 740px) {
	
	.bknum-body{
		padding: 2em;
	}
}


/* --- PC ---------- */

@media print, screen and (min-width: 741px) {
	
	.bknum-body{
		padding: 3%;
	}
}