@charset "UTF-8";

/* CSS Document */

/*==================================================

top-contents
=================================================*/


.top-image {
	width: 100%;
	position: relative;
	background-color: #FFF;
	margin: 107px auto 0;
}
.top-image .txt {
	width: 18%;
	max-width: 185px;
	position: absolute;
    top: 0;
	right: 15%;
	-webkit-transform: translate(-50%, 0); 
	transform: translate(-50%, 0);
	z-index: 2!important;
}
.top-image .title {
	width: 14.3%;
	max-width: 200px;
	position: absolute;
    top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%); 
	transform: translate(-50%, -50%);
	z-index: 2!important;
}
.top-image .character {
	width: 35%;
	max-width: 463px;
	position: absolute;
	left: 50%;
	bottom: 0;
	-webkit-transform: translate(-50%, 50%); 
	transform: translate(-50%, 50%);
	z-index: 1!important;
}
.top-image .txt.lf {
	left: 15%;
	right: initial;
	right: auto;
}
.top-image .txt h1 {
	font-size: 3rem;
	color: #FFF;
	text-align: center;
	font-weight: 300;
	letter-spacing: 0.1em;
	font-family: 'Noto Serif JP', "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
.top-image .photo {
	width: 100%;
}
.title-l {
	width: 100%;
	max-width: 467px;
	height: 116px;
	position: relative;
	background-image: url(../../images/interview_1_07.png);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: auto;
	margin: 0 auto;
}
.title-l span {
	width: 100%;
	display: block;
	position: absolute;
	font-size: 3rem;
	color: #FFF;
	text-align: center;
	font-family: 'Noto Serif JP', "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	font-weight: 300;
	letter-spacing: 0.2em;
	line-height: 160%;
	top: 50%;
	left: 0;
	-webkit-transform: translate(0, -50%); 
	transform: translate(0, -50%);
}
.title-m {
	font-size: 3.8rem;
	text-align: center;
	font-family: 'Noto Serif JP', "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	font-weight: 500;
	letter-spacing: 0.1em;
	line-height: 220%;
	margin-top: 7%;
}
.title-ms {
	font-size: 3rem;
	text-align: left;
	font-family: 'Noto Serif JP', "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	font-weight: 500;
	letter-spacing: 0.1em;
	line-height: 220%;
	margin-bottom: 4%;
}
.title-ms.ce {
	text-align: center;
	margin-top: 4%;
}
.title-s {
	font-size: 3rem;
	text-align: left;
	font-family: 'Noto Serif JP', "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	font-weight: 500;
	letter-spacing: 0.1em;
	line-height: 220%;
	border-left: 12px solid #9d0d99;
	margin: 5% 0;
	padding-left: 1em;
}

.col2 .title-l {
	background-image: url(../../images/interview_2_03.png);
}
.col2 .title-s {
	border-left: 12px solid #e15b89;
}

strong.col-r {
	color: #F00;
	font-weight: 500;
}

.txt-ce {
	text-align: center;
}

/* top img */

.top-image img {
	width: 100%;
	max-width: 100%;
	height: auto;
}

@media only screen and (min-width:1px) and (max-width: 1040px) {
	
	.top-image {
		margin: 130px auto 0;
	}
	
}
@media only screen and (min-width:1px) and (max-width: 920px) {
	
	#contents {
		padding: 12% 0 15%!important;
	}
}

@media only screen and (min-width:1px) and (max-width: 768px) {
	
	.top-image {
		margin-top: 79px;
	}
	.top-image .txt {
		width: 19%;
		right: 2%;
	}
	.top-image .txt.lf {
		left: 15%;
		right: initial;
		right: auto;
	}
	.title-l {
		width: 100%;
		max-width: 300px;
		height: 74px;
		position: relative;
		background-image: url(../../images/interview_1_07.png);
		background-position: center center;
		background-repeat: no-repeat;
		background-size: contain;
		margin: 0 auto;
	}
	.title-l span {
		font-size: 2.4rem;
	}
	.title-m {
		font-size: 2.4rem;
	}
	.title-ms {
		font-size: 2rem;
	}
	.title-s {
		font-size: 2rem;
		border-left: 8px solid #9d0d99;
	}
	
}

@media only screen and (min-width:1px) and (max-width: 568px) {
	
	.title-l span {
		font-size: 2rem;
	}
	.title-m {
		font-size: 2rem;
	}
}
	
@media only screen and (min-width:1px) and (max-width: 480px) {
	
	

}