@charset "UTF-8";
:root{
	--body : #333;
	--link : #333;
	--title : #333;
	--main : #333;
	--base : #333;
	--mainBold : #333;
	--sub : #333;
	--white : #333;
	--bg : #333;
}
/*--------------------------------------------
INTERVIEW
---------------------------------------------*/
#interview ul{
	display : flex;
	flex-wrap : wrap;
}

#interview li a{
	display : block;
	background-color : #efefef;
}
#interview picture{
	position : relative;
	overflow : hidden;
	width : 100%;
}
#interview picture > img{
	position : absolute;
	width : auto;
	height : auto;
	top : 50%;
	left : 50%;
	min-height : 100%;
	min-width : 100%;
	transform : translateX(-50%) translateY(-50%);
}
@supports ( object-fit: cover ){
	#interview picture > img{
		position : static;
		height : 100%;
		width : 100%;
		left : 0;
		-o-object-fit : cover;
		   object-fit : cover;
		top : 0;
		    -ms-transform : none;
		   -moz-transform : none;
		-webkit-transform : none;
		        transform : none;
	}
}
#interview h4{
	letter-spacing : 0;
	font-weight : 700;
	color : #26617f;
}
#interview dt , #interview dd{
	color : #221815;
	letter-spacing : 0;
}
@media screen and (max-width: 768px){
	#interview .wrap{
		padding-top : calc( 36 * 100vw / 768 );
		padding-bottom : calc( 37 * 100vw / 768 );
	}
	#interview ul{
		justify-content : space-between;
	}
	#interview li{
		width : calc( 345 * 100% / 720 );
	}
	#interview li:nth-child(n+3){
		margin-top : calc( 27 * 100vw / 768 );
	}
	#interview li a{
		padding-bottom : calc( ( 18 - 7 ) * 100vw / 768 );
	}
	#interview picture{
		height : calc( 250 * 100vw / 768 );
	}
	#interview h4 , #interview dl{
		padding-left : calc( 12 * 100% / 345 );
		padding-right : calc( 12 * 100% / 345 );
	}
	#interview h4{
		font-size : calc( 26 * 100vw / 768 );
		line-height : 1.46;
		padding-top : calc( ( 18 - 6 ) * 100vw / 768 );
	}
	#interview dt , #interview dd{
		font-size : calc( 24 * 100vw / 768 );
		line-height : 1.58;
	}
}
@media print,screen and (min-width: 769px){
	#interview .wrap{
		padding-top : 38px;
		padding-bottom : 108px;
	}
	#interview li{
		width : 250px;
	}
	#interview li:not(:nth-child(4n+1)){
		margin-left : 20px;
	}
	#interview li:nth-child(n+5){
		margin-top : 32px;
	}
	#interview li a{
		padding-bottom : calc( 19px - 3px );
	}
	#interview picture{
		height : 183px;
	}
	#interview h4 , #interview dl{
		padding-left : 10px;
		padding-right : 10px;
	}
	#interview h4{
		font-size : 16px;
		line-height : 1.25;
		padding-top : calc( 12px - 2px );
	}
	#interview dt , #interview dd{
		font-size : 14px;
		line-height : 1.43;
	}
}


/*--------------------------------------------
information
---------------------------------------------*/
#information ul{
	display : block;
    list-style: none;
}
#information li {
    border-bottom: 1px solid #ccc;
}
#information li a{
    display: flex;
}

#information li a{
        text-decoration: none !important;
}

#information h4{
	letter-spacing : 0;
	font-weight : 700;
}
#information dt , #information dd{
	color : #221815;
	letter-spacing : 0;
}
@media screen and (max-width: 768px){
	#information .wrap{
		padding-top : calc( 36 * 100vw / 768 );
		padding-bottom : calc( 37 * 100vw / 768 );
	}
	#information ul{
		justify-content : space-between;
	}
	#information li{
		padding-bottom : calc( 30 * 100vw / 768 );
        margin-bottom: calc( 30 * 100vw / 768 ); 
	}
    #information li a{
        flex-wrap: wrap;
    }
	#information time{
		font-size : calc( 26 * 100vw / 768 );
		width : calc( 200 * 100vw / 768 );
        padding-top: calc( 12 * 100vw / 768 );
	}
	#information .categories{
		width : calc( 300 * 100vw / 768 );
		height : calc( 43 * 100vw / 768 );
		font-size : calc( 26 * 100vw / 768 );
	}
	#information h4{
		width : 100%;
		font-size : calc( 26 * 100vw / 768 );
		line-height : 1.46;
        padding-top: calc( 12 * 100vw / 768 );
	}
    
}
@media print,screen and (min-width: 769px){
	#information .wrap{
		padding-top : 38px;
		padding-bottom : 108px;
	}
	#information li{
        padding: 1em ;
	}
	#information li a{
	}
	#information time{
        width: 12em;
		line-height : 1.25;
	}
	#information .categories{
		width : 130px;
		height : 25px;
		font-size : 14px;
        margin-right: 2em;
	}
	#information h4{
		font-size : 16px;
		line-height : 1.25;
        width:calc(100% - 130px - 120px - 2em);
	}

}