#sutop-mainvisual {
background-color: rgba(0,0,0,1.00);
}
.interview-top {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.interview-top > li {
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
position: relative;
}
.interview-top > li:last-child {
padding: 35px 15px 25px;
color: rgba(255,255,255,1.00);
}
.interview-top .inter-catch,
.interview-top .inter-position {
color: rgba(255,255,255,1.00);
}

#sutop-mainvisual .page-name {
z-index: 2;
}

.sutop-out {
	position: relative;
}



@media print, screen and (min-width: 375px) {

}


@media print, screen and (min-width: 768px) {

.interview-top > li {
-ms-flex-preferred-size: 50%;
flex-basis: 50%;
position: relative;
}
.interview-top > li:last-child {
padding: 40px 10px 25px 0px;
}

#sutop-mainvisual .page-name {
z-index: 3;
width: 60%;
}
.sutop-photo {
width: 100%;
margin: 0px auto 0px -9%;
transform: skewX(-20deg);
overflow: hidden;
position: relative;
z-index: 1;
}
/*
.sutop-photo img {
transform: skewX(20deg) !important;
margin: 0px -9% 0px auto;
}
*/
.sutop-photo .skew-photo {
transform: skewX(20deg) !important;
margin: 0px -12% 0px auto;
}
.sutop-photo img {
}

/*
<section id="sutop-mainvisual" class="top-margin">
	<ul class="interview-top animation career">
		<li>
			<div class="page-name"><p>社員インタビュー</p></div>
			<div class="sutop-photo"><div class="skew-photo"><img src="images/k_staff03_01.jpg" alt="社員インタビュー　イメージ" width="1656" height="766"></div></div>
		</li>
		<li>
			<div class="inter-cat"><p>キャリア</p></div>
			<h2 class="inter-catch"><p>必要とされるSI営業を<br class="pc-br">目指しています。</p></h2>
			<h3 class="inter-position"><p>セールス</p></h3>
		</li>
	</ul>
</section><!-- contents-block -->
*/



.interview-top .inter-catch {
}
.interview-top h3.inter-position {
left: 0px;
bottom: 20px;
}

}


/*
font-size: calc(100vw / 10);
line-height: 1.4em;
font-size: 18px;
<section id="sutop-mainvisual" class="top-margin">
	<ul class="interview-top animation">
		<li>
			<div class="page-name"><p>社員インタビュー</p></div>
			<div class="sutop-photo"><img src="images/n_staff01_01.jpg" alt="社員インタビュー　イメージ" width="1656" height="766"></div>
		</li>
		<li>
			<div class="inter-cat"><p>新卒</p></div>
			<h2 class="inter-catch"><p>チームを引っ張る<br class="pc-br">信頼される存在になりたい。</p></h2>
			<h3 class="inter-position"><p>インフラエンジニア</p></h3>
		</li>
	</ul>
</section><!-- contents-block -->
*/



@media print, screen and (min-width: 1024px) {

.interview-top > li:last-child {
padding: 50px 10px 25px 0px;
}

#sutop-mainvisual .page-name {
width: 50%;
}
.interview-top .inter-catch {
}
.interview-top h3.inter-position {
left: 0px;
bottom: 25px;
}

}


@media print, screen and (min-width: 1200px) {

.interview-top > li:last-child {
padding: 5% 10px 25px 0px;
}

#sutop-mainvisual .page-name {
width: 40%;
}
.interview-top .inter-catch {
font-size: calc(100vw / 34);
line-height: 1.4em;
}
.interview-top h3.inter-position {
font-size: 25px;
line-height: 1.4em;
bottom: 25px;
}

}


@media print, screen and (min-width: 1400px) {

.interview-top h3.inter-position {
font-size: 28px;
line-height: 1.4em;
bottom: 30px;
}

}

















/*
<section class="contents-block" id="cont01">
	<div class="contents-block-in">

		<ul class="company-block">
			<li>
				<h3 class="inter-title"><p><strong>Q1 </strong>現在どのような仕事をしていますか？</p></h3>
				<div class="recn-text"><p>顧客から依頼されるインフラ構築の見積作業を行っています。顧客からの依頼内容を理解し、「設計、構築作業には具体的にどのような作業が必要になるか」、「顧客から要求された期間で作業完了するには何人メンバーが必要になるか」を決めていき、他のメンバーと相談した上で最終的な見積金額を決定し、顧客に提出しています。自分で考えて行う作業なので、とてもやりがいがあります。</p>
				</div><!-- recn-text -->
				
				<h3 class="inter-title"><p><strong>Q2 </strong>どのような就職活動をしていましたか？</p></h3>
				<div class="recn-text"><p>専門学校2年生の2月から就職活動を始めました。2年生の8月に富士インフォックス・ネットのインターンシップに参加し、その後「1次選考免除で2次選考から参加どうですか」と連絡があったので2次選考から参加し、内定をいただきました。インターンシップに参加した方が会社側から声がかかり、就職活動に苦労しなくなる可能性があるのでおすすめです。</p>
				</div><!-- recn-text -->
				
				<h3 class="inter-title"><p><strong>Q3 </strong>富士インフォックス・ネット株式会社に入社を決めた理由は？</p></h3>
				<div class="recn-text"><p>専門学校2年生の時に、インターンシップに参加したことがきっかけです。参加した際の職場の雰囲気や、社員の人柄もよくとても話しやすかったことがとても好印象で、サーバ構築を実習で行った際、とてもわかりやすく教えてもらい、サーバの分野に興味を持つことができたので富士インフォックス・ネットに入社することを決めました。</p>
				</div><!-- recn-text -->
			</li>
			<li><div class="photo-img-t05"><img src="images/n_staff01_02.jpg" alt="社員写真1" width="946" height="1254"></div></li>
		</ul>
*/
#cont01 {
border: none;
margin: 0px;
padding: 30px 0px;
}
.company-block {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 0px 0px 20px;
}
.company-block > li {
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
position: relative;
padding: 0px 0px 20px;
}
.company-block > li:last-child {
padding: 0px;
}
.company-block .recn-text {
padding: 0px 0px 20px;
}
.company-block .inter-title {
color: rgba(0,0,0,1.00);
font-size: 15px;
line-height: 1.5em;
font-weight: bold;
padding: 0px 0px 0.5em;
}
.company-block .inter-title strong {
font-size: 22px;
line-height: 1.5em;
}


@media print, screen and (min-width: 375px) {
#cont01 {
border: none;
margin: 0px;
padding: 35px 0px 40px;
}

.company-block {
padding: 0px 0px 25px;
}
.company-block > li {
padding: 0px 0px 25px;
}
.company-block .recn-text {
padding: 0px 0px 25px;
}
.company-block .inter-title {
font-size: 16px;
line-height: 1.5em;
font-weight: bold;
}
.company-block .inter-title strong {
font-size: 24px;
line-height: 1.5em;
}

}


@media print, screen and (min-width: 768px) {
#cont01 {
border: none;
margin: 0px;
padding: 40px 0px 50px;
}

.company-block {
padding: 0px 0px 25px;
}
.company-block > li {
-ms-flex-preferred-size: calc(50% - 10px) !important;
flex-basis: calc(50% - 10px) !important;
padding: 0px 0px 25px;
}
.company-block > li:last-child {
-ms-flex-preferred-size: calc(50% - 10px);
flex-basis: calc(50% - 10px);
padding: 14px 0px 0px;
}
.company-block .recn-text {
padding: 0px 0px 25px;
font-size: 14px;
line-height: 1.6em;
}
.company-block .inter-title {
color: rgba(0,0,0,1.00);
font-size: 16px;
line-height: 1.5em;
}
.company-block .inter-title strong {
font-size: 24px;
line-height: 1.5em;
}

}


@media print, screen and (min-width: 1024px) {
#cont01 {
border: none;
margin: 0px;
padding: 45px 0px 55px;
}
.company-block {
padding: 0px 0px 25px;
}
.company-block > li {
-ms-flex-preferred-size: calc(53% - 14px) !important;
flex-basis: calc(53% - 14px) !important;
padding: 0px 0px 25px;
}
.company-block > li:last-child {
-ms-flex-preferred-size: calc(47% - 14px) !important;
flex-basis: calc(47% - 14px) !important;
padding: 14px 0px 0px;
}
.company-block .recn-text {
padding: 0px 0px 25px;
font-size: 15px;
line-height: 1.7em;
}
.company-block .inter-title {
color: rgba(0,0,0,1.00);
font-size: 18px;
line-height: 1.5em;
}
.company-block .inter-title strong {
font-size: 27px;
line-height: 1.5em;
}

}


@media print, screen and (min-width: 1200px) {
#cont01 {
border: none;
margin: 0px;
padding: 55px 0px 65px;
}
.company-block {
padding: 0px 0px 25px;
}
.company-block > li {
-ms-flex-preferred-size: calc(100% - 518px) !important;
flex-basis: calc(100% - 518px) !important;
padding: 0px 0px 25px;
}
.company-block > li:last-child {
-ms-flex-preferred-size: 473px !important;
flex-basis: 473px !important;
padding: 14px 0px 0px;
}
.company-block .recn-text {
padding: 0px 0px 25px;
font-size: 16px;
line-height: 1.9em;
}
.company-block .inter-title {
color: rgba(0,0,0,1.00);
font-size: 20px;
line-height: 1.5em;
}
.company-block .inter-title strong {
font-size: 30px;
line-height: 1.5em;
}

}


@media print, screen and (min-width: 1400px) {

}




















@media print, screen and (min-width: 375px) {

}


@media print, screen and (min-width: 768px) {

}


@media print, screen and (min-width: 1024px) {

}


@media print, screen and (min-width: 1200px) {

}


@media print, screen and (min-width: 1400px) {

}




















@media print, screen and (min-width: 375px) {

}


@media print, screen and (min-width: 768px) {

}


@media print, screen and (min-width: 1024px) {

}


@media print, screen and (min-width: 1200px) {

}


@media print, screen and (min-width: 1400px) {

}