@charset "UTF-8";


.interviewInLayout #main .mainImg {
	background-repeat: no-repeat;
	background-position: center top;
	background-size: auto 185px;
	padding: 165px 0 0;
	margin: 0 0 50px;
}

.interviewIn01Layout #main .mainImg {
	background-image: url(../img/01_main.jpg);
}

.interviewIn02Layout #main .mainImg {
	background-image: url(../img/02_main.jpg);
}

.interviewIn03Layout #main .mainImg {
	background-image: url(../img/03_main.jpg);
}

.interviewIn04Layout #main .mainImg {
	background-image: url(../img/04_main.jpg);
}

.interviewIn05Layout #main .mainImg {
	background-image: url(../img/05_main.jpg);
}

.interviewIn06Layout #main .mainImg {
	background-image: url(../img/06_main.jpg);
}

			/* 【タブレット用のスタイル記述】 */
			@media screen and (min-width: 761px) {
				.interviewInLayout #main .mainImg {
					background-size: cover;
					padding: 0;
					height: 400px;
				}
			}		
			/* 【PC用のスタイル記述】 */
			@media screen and (min-width: 1200px) {
				.interviewInLayout #main .mainImg {
					height: 654px;
				}
			}

.interviewInLayout #main .mainImg .box01 {
	background-color: rgba(40,75,140,0.8);
	padding: 15px;
	margin: 0 15px;
	color: #fff;
	line-height: 1.5;
	letter-spacing: 2px;
}

.interviewInLayout #main .mainImg .box01 .number {
	font-family: 'Oswald', sans-serif;
	font-size: 1.5rem;
	font-weight: bold;
	color: #97b2c8;
	padding: 0 0 10px;
}

.interviewInLayout #main .mainImg .box01 .catch {
	font-size: 1.125rem;
	padding: 0 0 15px;
}

.interviewInLayout #main .mainImg .box01 .year {
	font-size: 0.75rem;
	padding: 0 0 5px;
}

.interviewInLayout #main .mainImg .box01 .name span {
	font-size: 0.75rem;
}

			/* 【タブレット用のスタイル記述】 */
			@media screen and (min-width: 761px) {
				.interviewInLayout #main .mainImg .box01wrap {
					padding: 195px 15px 0 60%;
					box-sizing: border-box;
				}
				.interviewInLayout #main .mainImg .box01 {
					margin: 0;
				}
			}		
			/* 【PC用のスタイル記述】 */
			@media screen and (min-width: 1200px) {
				.interviewInLayout #main .mainImg .box01wrap {
					max-width: 1200px;
					margin: 0 auto;
					padding: 0;
					height: 100%;
					position: relative;
				}
				.interviewInLayout #main .mainImg .box01 {
					position: absolute;
					right: 0;
					bottom: 30px;
					width: 520px;
					height: 290px;
					padding: 20px 30px;
					box-sizing: border-box;
				}
				.interviewInLayout #main .mainImg .box01 .number {
					font-size: 2.5rem;
				}
				.interviewInLayout #main .mainImg .box01 .catch {
					font-size: 1.875rem;
				}
				.interviewInLayout #main .mainImg .box01 .year {
					font-size: 1.125rem;
				}
				.interviewInLayout #main .mainImg .box01 .name {
					font-size: 1.5rem;
				}
				.interviewInLayout #main .mainImg .box01 .name span {
					font-size: 1.25rem;
				}
			}


.interviewInLayout #main .cassette h3 {
	margin: 0;
	background: none;
	color: #284b8c;
}

.interviewInLayout #main .cassette h3 img {
	display: block;
	height: 50px;
	margin: 0 0 10px;
}

.interviewInLayout #main .cassette h3 span {
	display: block;
	border-left: 3px solid #fff100;
	font-weight: normal;
	padding: 5px 0 5px 15px;
}

			/* 【タブレット用のスタイル記述】 */
			@media screen and (min-width: 761px) {
				.interviewInLayout #main .cassette.flex {
					display: flex;
					justify-content: space-between;
				}
				.interviewInLayout #main .cassette.flex div:nth-child(1) {
					width: 45%;
				}
				.interviewInLayout #main .cassette.flex div:nth-child(2) {
					width: 50%;
				}
			}		
			/* 【PC用のスタイル記述】 */
			@media screen and (min-width: 1200px) {
				.interviewInLayout #main .cassette h3 img {
					height: auto;
				}
			}

.interviewInLayout #main #imgBox {
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	height: 100px;
	margin: 0 0 40px;
}

.interviewIn01Layout #main #imgBox {
	background-image: url(../img/01_img02.jpg);
}

.interviewIn02Layout #main #imgBox {
	background-image: url(../img/02_img02.jpg);
}

.interviewIn03Layout #main #imgBox {
	background-image: url(../img/03_img02.jpg);
}

.interviewIn04Layout #main #imgBox {
	background-image: url(../img/04_img02.jpg);
}

.interviewIn05Layout #main #imgBox {
	background-image: url(../img/05_img02.jpg);
}

.interviewIn06Layout #main #imgBox {
	background-image: url(../img/06_img02.jpg);
}

			/* 【タブレット用のスタイル記述】 */
			@media screen and (min-width: 761px) {
				.interviewInLayout #main #imgBox {
					height: 300px;
					margin: 0 0 60px;
				}
			}		
			/* 【PC用のスタイル記述】 */
			@media screen and (min-width: 1200px) {
				.interviewInLayout #main #imgBox {
					height: 450px;
					margin: 0 0 80px;
				}
			}

.interviewInLayout #main #c05 .cassette > .img {
	padding: 0 0 50px;
}

.interviewInLayout #main #c05 .cassette > .img img {
	width: 100%;
	max-width: 385px;
}

.interviewInLayout #main #c05 .cassette .box01 {
	border: 5px solid #fff100;
	padding: 20px 15px 0;
	margin: 0 0 20px;
}

.interviewInLayout #main #c05 .cassette .box01 h4 {
	color: #333;
	text-align: center;
}

.interviewInLayout #main #c05 .cassette .box01 h4 span {
	font-family: 'Oswald', sans-serif;
	font-size: 4.5rem;
	color: #284b8c;
	letter-spacing: 2px;
	padding: 0 0 0 2px;
	display: block;
	margin: 0 auto 15px;
}

			/* 【タブレット用のスタイル記述】 */
			@media screen and (min-width: 761px) {
				.interviewInLayout #main #c05 .cassette {
					display: flex;
					justify-content: space-between;
					align-items: flex-start;
				}
				.interviewInLayout #main #c05 .cassette > .img {
					width: 40%;
				}
				.interviewInLayout #main #c05 .cassette .box01 {
					width: 55%;
					box-sizing: border-box;
					padding: 30px 40px 10px;
				}
			}		
			/* 【PC用のスタイル記述】 */
			@media screen and (min-width: 1200px) {
				.interviewInLayout #main #c05 .cassette > .img {
					width: 385px;
				}
				.interviewInLayout #main #c05 .cassette .box01 {
					width: 775px;
				}
				.interviewInLayout #main #c05 .cassette .box01 h4 {
					padding: 0 0 40px;
				}
				.interviewInLayout #main #c05 .cassette .box01 .flex {
					display: flex;
					justify-content: space-between;
				}
				.interviewInLayout #main #c05 .cassette .box01 .flex p {
					width: 370px;
				}
				.interviewInLayout #main #c05 .cassette .box01 .flex .img {
					width: 270px;
				}
			}

.interviewIndexLayout #main #c01 .cassette .read {
	font-size: 1.5rem;
	text-align: center;
	line-height: 1.2;
	padding: 0 0 40px;
}

.interviewIndexLayout #main #c01 .cassette ul {
	display: flex;
	flex-wrap: wrap;
}

.interviewIndexLayout #main #c01 .cassette ul li {
	width: 49%;
	margin: 0 2% 15px 0;
}

.interviewIndexLayout #main #c01 .cassette ul li:nth-child(2n) {
	margin: 0 0 15px;
}

.interviewIndexLayout #main #c01 .cassette ul li a {
	position: relative;
	display: block;
}

.interviewIndexLayout #main #c01 .cassette ul li a img {
	max-width: 100%;
}

.interviewIndexLayout #main #c01 .cassette ul li a .over {
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}

			/* 【タブレット用のスタイル記述】 */
			@media screen and (min-width: 761px) {
				.interviewIndexLayout #main #c01 .cassette ul li {
					width: 32%;
				}
				.interviewIndexLayout #main #c01 .cassette ul li:nth-child(2n) {
					margin: 0 2% 30px 0;
				}
				.interviewIndexLayout #main #c01 .cassette ul li:nth-child(3n) {
					margin: 0 0 30px;
				}
			}		
			/* 【PC用のスタイル記述】 */
			@media screen and (min-width: 1200px) {
				.interviewIndexLayout #main #c01 .cassette ul li a:hover,
				.interviewIndexLayout #main #c01 .cassette ul li a:active {
					opacity: 1;
				}
				.interviewIndexLayout #main #c01 .cassette ul li a:hover > img {
					opacity: 0;
					transition: 0.3s all;
				}
			}


.interviewIndexLayout #main #c02 .cassette .flex .img {
	color: #284b8c;
}

.interviewIndexLayout #main #c02 .cassette .btn.img img {
	max-width: 280px;
}

			/* 【タブレット用のスタイル記述】 */
			@media screen and (min-width: 761px) {
				.interviewIndexLayout #main #c02 .cassette .flex {
					display: flex;
					justify-content: space-between;
					flex-direction: row-reverse;
				}
				.interviewIndexLayout #main #c02 .cassette .flex div:nth-child(1) {
					width: 25%;
				}
				.interviewIndexLayout #main #c02 .cassette .flex div:nth-child(2) {
					width: 70%;
				}
			}		
			/* 【PC用のスタイル記述】 */
			@media screen and (min-width: 1200px) {
			}



/* clearfix
------------------------------------*/

.clearfix:after {
content: ".";
display: block;
clear: both;
height: 0;
visibility: hidden;
overflow:hidden;
}

.clearfix {
display: inline-block;
}

/* exlude MacIE5 \*/
* html .clearfix {
height: 1%
}

.clearfix {
display:block;
}
/* end MacIE5 */