@charset "UTF-8";
/* CSS Document */

/* ************************************************************ */
/*           INTERVIEW  TOP
/* ************************************************************ */
.contents.interview {
	width: 100%;
	margin: 0;
	padding: 0 0 100px;
	float: left;
}

.contents.interview .movie {
	width: 100%;
	margin: 70px 0 0;
	padding: 0;
	float: left;
}

.interview .block {
	width: 50%;
	margin: 0;
	padding: 0;
}

.interview .block h2 {
	font-size: 36px;
	font-weight: bold;
	font-style: normal;
	margin: 0 5% 0 0;
	padding: 10px 5%;
	border-bottom: #000 2px solid;
}

.interview .block h2 span { font-size: 48px;margin-left: 10px; }

.interview .block .prof {
	width: 90%;
	margin: 20px 5% 0;
	font-size: 18px;
	line-height: 30px;
	text-align: center;
}

.interview .block.flo_right {
	padding-top: 48px;
}

.interview .block.flo_right .youtube {
	width: 100%;
	aspect-ratio: 16 / 9;
}

.interview .block.flo_right .youtube iframe {
	width: 100%;
	height: 100%;
}

.interview .block .message {
	font-size: 20px;
	font-weight: bold;
	text-align: center;
	line-height: 30px;
	width: 90%;
	margin: 40px 5%;
	float: left;
}

.contents .barnner_block {
	width: 100%;
	margin: 100px 0 0;
	padding: 0;
	float: left;
}

.contents .barnner_block .crosstalk {
	width: 100%;
	height: 500px;
	margin: 0;
	padding: 0;
	float: left;
	background-image: url("../images/top/crosstalk.jpg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

.contents .barnner_block a {
	text-decoration: none;
	display: block;
	width: 100%;
	height: 100%;
	margin:0;
	padding: 50px 0 0;
	background-color: rgba(0,0,0,0.50);
	background-image: url("../images/common/arr-more-w-l.png");
	background-repeat: no-repeat;
	background-position: center bottom 100px;
	transition:all .5s ease;
}

.contents .barnner_block a:hover { background-color: rgba(0,0,0,0.0); }

.contents .barnner_block h2 {
	font-size: 3.5vw;
	color: #FFF;
	font-weight: normal;
	font-style: italic;
	text-align: center;
	line-height: 3.5vw;
	text-shadow: 3px 3px 3px #000;
}

.contents .barnner_block h2 span {
	font-size: 24px;
}


/* ****************************************************************** *
        MOBILE  LAYOUT
********************************************************************* */
@media screen and (max-width:1100px) {
	.interview .block { width: 100%; }
	.interview .block h2 { width: 90%;margin: 20px 0 0 0; }
	.interview .block .prof { width: 100%;margin: 30px 0 0 0; }
	.interview .block.flo_right { padding: 0; }
	.interview .block.flo_right .youtube { width: 600px;margin: 0 auto; }
	.contents .barnner_block .crosstalk { height: 400px; }
	.contents .barnner_block h2 { font-size: 50px;line-height: 40px; }
	.contents .barnner_block h2 span { font-size: 24px; }
}

@media screen and (max-width:780px) {
	.interview .block.flo_right .youtube { width: 100%; }
	.contents .barnner_block .crosstalk { height: 350px; }
	.contents .barnner_block h2 { margin-top: 0; }
}

@media screen and (max-width:500px) {
	.inner{
		width: calc(90% - 40px);
		margin-right: calc(5% + 40px);
	}
	.interview .main-img h1 {
		font-size: 8.5vw;
		margin: -10% 0 8.5% 15px;
		text-align: left;
	}
	.interview .block .message { font-size: 16px;width: 100%;margin: 10px 0; }
	.contents .barnner_block .crosstalk { height: 300px; }
}

@media screen and (max-width:400px) {
	.contents .barnner_block .crosstalk { height: 250px; }
	.contents .barnner_block h2 { font-size: 10vw;line-height: 7vw;margin-top: -20px; }
	.contents .barnner_block h2 span { font-size: 5vw; }
}