@charset "utf-8";

/* ==================================================================
	event.css
	
=================================================================== */

/* --------------------------------
   □ general
-------------------------------- */ 
.contents{
		padding-bottom: 0;
		background: var(--bg-color-white, #fff);
	}

.contents main{
}

.contents main .accentArea{
	background-image:url("../../images/voice/accent.jpg");
	background-position-x: 67%;
}
	
/* ==================================================================
	list
=================================================================== */


/* --------------------------------
   □ lists
-------------------------------- */ 


#lists ul.list {
	margin-left: -60px;
}
#lists ul.list:after {
	clear: both;
	display: block;
	content: "";
}

#lists ul.list li{
	position: relative;
	float: left;
	width: 510px;
	padding-top: 26px;
	margin: 0 0 62px 60px;
}
/*
#lists ul.list li:before{
	position: absolute;
	z-index: 1;
	top: 0;
	left: 19px;
	content: url("../../images/voice/clip.png");
}
*/
	#lists ul.list > li a {
		display: block;
		text-decoration: none;
	}
	
	#lists ul.list > li > a > dl dt{
		margin-bottom: 16px;
	}
	
	#lists ul.list > li > a > dl dt span.image{
		display: block;
		overflow: hidden;
		transition: all 300ms 0s ease;
	}
	#lists ul.list > li > a > dl dt span.image img{
		transition: all 300ms 0s ease;
	}

	#lists ul.list > li a:hover > dl dt span.image img{
		transform: scale(1.1);
		opacity: 0.8;
	}
	#lists ul.list > li a > dl dt span.en_oswald{
		position: relative;
		display: block;
		color: var(--text-color, #212529);
		font-weight: 500;
		font-size: 240%;
		line-height: 1.1;
		margin-top: -0.5em;
        letter-spacing: 0.04em;
	}

	#lists ul.list > li dl dd{
		color: #000000;
		font-weight: 600;
		font-size: 112%;
	}

/* ==================================================================
	details
=================================================================== */

/* --------------------------------
   □ details
-------------------------------- */ 
#details {
	padding-top: 20px;
}

#details .image{
	text-align: center;
	margin-bottom: 0;
}

#details h2 .no{
	position: relative;
	display: block;
	font-weight: 500;
	font-size: 330%;
	line-height: 1.1;
	margin-top: -0.5em;
	margin-bottom: 21px;
    letter-spacing: 0.04em;
}

#details h2{
	font-size: 131%;
}

#details .interview{
	float: left;
	width: 570px;
	margin-top: 79px;
}

	#details .interview dl{
		margin-bottom: 34px;
	}
	#details .interview dl:last-child{
		margin-bottom: 0;
	}

	#details .interview dl dt{
		font-size: 146%;
		font-weight: 600;
		padding-bottom: 17px;
		margin-bottom: 31px;
		border-bottom: 2px solid #222;
	}

	#details .interview dl dd{
		line-height: 2;
	}

#details .images{
	float: right;
	width: 436px;
}
#details .images ul li{
	text-align: center;
	margin-bottom: 39px;
}

#details .images ul li:last-child{
	margin-bottom: 0;
}

/* ◇ banners
-------------------------------- */ 
#details .banners{
	clear: both;
	padding: 65px 190px;
}
#details .banners .buttonStyle{
	margin-bottom: 50px;
	text-align: center;
}

#details .banners .buttonStyle a{
	width: 40%;
	text-align: center;
}

#details .banners .buttonStyle.arrowStyle a{
	width: 100%;
}

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

/* --------------------------------
   □ lists
-------------------------------- */ 
.contents main{
	padding: 0 2%;
	margin: 0 -2%;
}

#lists ul.list {
	margin-left: 0;
}
	
#lists ul.list li{
	float: none;
	width: auto;
	padding-top: 26px;
	margin: 0 0 8% 0;
}
/*
#lists ul.list li:before{
	position: absolute;
	z-index: 1;
	top: 0;
	left: 19px;
	content: url("../../images/voice/clip.png");
}
*/
	#lists ul.list > li a > dl dt span.en_oswald{
		font-size: 256%;
	}

/* ==================================================================
	details
=================================================================== */

/* --------------------------------
   □ details
-------------------------------- */ 
#details {
	padding-top: 0;
}

#details h2 .no{
	font-size: 230%;
	margin-bottom: 2%;
}

#details .interview{
	float: none;
	width: auto;
	margin-top: 10%;
}

	#details .interview dl{
		margin-bottom: 6%;
	}
	#details .interview dl:last-child{
		margin-bottom: 0;
	}

	#details .interview dl dt{
		font-size: 126%;
		padding-bottom: 2%;
		margin-bottom: 3%;
	}

	#details .interview dl dd{
		line-height: 2;
	}

#details .images{
	float: none;
	width: auto;
	padding-top: 10%;
}
#details .images ul li{
	text-align: center;
	margin-bottom: 3%;
}

#details .images ul li:last-child{
	margin-bottom: 0;
}

/* ◇ banners
-------------------------------- */ 
#details .banners{
	clear: both;
	padding: 6% 0;
}
#details .banners .buttonStyle{
	margin-bottom: 5%;
	text-align: center;
}

#details .banners .buttonStyle a{
	width: 80%;
	text-align: center;
}

#details .banners .buttonStyle.arrowStyle a{
	width: 100%;
}



}