@charset "utf-8";

:root {
	--mfg-color:#0074B5;/** 製造部門 **/
	--mkt-color:#D6A700;/** マーケティング部門 **/
	--sls-color:#008D31;/** 営業部門 **/
	--mgt-color:#AB73AC;/** 管理部門 **/
}



/* list
================================================ */
#interview ul.int_list{
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	align-items: top;
}
#interview ul.int_list li{
	position: relative;
	cursor: pointer;
	width: 350px;
	margin-bottom: 40px;
	letter-spacing: 1.3px;
	margin-right: 15px;
}
#interview ul.int_list li:nth-of-type(3n){
	margin-right: 0;
}
#interview ul.int_list li h4{
	margin-top: 10px;
	line-height: 120%;
}
#interview ul.int_list li h4 span.ini{
	font-size: 25px;
	display: block;
	margin-left: 0;
	margin-top: 10px;
}
#interview ul.int_list li .img{
	position: relative;
	overflow: hidden;
}
#interview ul.int_list li .img h3{
	position: absolute;
	left: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	line-height: 100%;
	background: #ccc;
	color: #FFF;
	z-index: 2;
	font-size: 13px;
	height: 30px;
	padding: 0 13px;
}

#interview ul.int_list li.sls .img h3{
	background: #008D31;
}
#interview ul.int_list li.mkt .img h3{
	background: #D6A700;
}
#interview ul.int_list li.mfg .img h3{
	background: #0074B5;
}
#interview ul.int_list li.mgt .img h3{
	background: #AB73AC;
}

#interview ul.int_list li a{
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 3;
}
#interview ul.int_list li .img:before{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transition: all .3s;
	z-index: 1;
}
#interview ul.int_list li .img .icon{
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	transition: all .3s;
	color: #FFF;
	z-index: 1;
	top: 0px;
	right: 10px;
	font-size: 12px;
	letter-spacing: 1px;
	width: 50px;
	height: 50px;
	opacity: 0;
}
#interview ul.int_list li .img .icon::before,
#interview ul.int_list li .img .icon::after{
	content: "";
	position: absolute;
	top: 16px;
	left: calc(50% - 10px);
	width: 20px;
	height: 2px;
	background: #FFF;
}
#interview ul.int_list li .img .icon::after{
	transform: rotate(90deg);
	transition: all .3s;
}
#interview ul.int_list li .img img{
	transition: all .3s;
}

#interview ul.int_list li:hover .img:before{
	background: rgba(0,0,0,0.3);
}
#interview ul.int_list li:hover .img .icon{
	opacity: 1;
	top: 10px;
}
#interview ul.int_list li:hover .img img{
	transform: scale(1.06);
	transform-origin: center ;
}

@media screen and (max-width:1400px) {
	#interview ul.int_list{
	}
	#interview ul.int_list li{
		width: calc(350/1400 * 100vw);
		margin-bottom: calc(40/1400 * 100vw);
		margin-right: calc(15/1400 * 100vw);
	}
	#interview ul.int_list li h4{
		margin-top: calc(10/1400 * 100vw);
	}
	#interview ul.int_list li h4 span.dep2{
		font-size: calc(15/1400 * 100vw);
	}
	#interview ul.int_list li h4 span.ini{
		font-size: calc(25/1400 * 100vw);
	}
	#interview ul.int_list li .img h3{
		font-size: calc(13/1400 * 100vw);
		height: calc(30/1400 * 100vw);
		padding: 0 calc(13/1400 * 100vw);
	}
}
@media screen and (max-width:800px) {
	#interview ul.int_list li{
		width: calc(50% - 5px);
		margin-bottom: 6vw;
		margin-right: 10px;
	}
	#interview ul.int_list li:nth-of-type(3n){
		margin-right: auto;
	}
	#interview ul.int_list li:nth-of-type(2n){
		margin-right: 0;
	}
	#interview ul.int_list li h4{
		margin-top: 1vw;
	}
	#interview ul.int_list li h4 span.dep2{
		font-size: 2.5vw;
		letter-spacing: 0.1em;
	}
	#interview ul.int_list li h4 span.ini{
		font-size: 3.5vw;
		margin-top: 1vw;
		line-height: 100%;
	}
	#interview ul.int_list li .img h3{
		font-size: 2.5vw;
		height: 5vw;
		padding: 0 2vw;
		letter-spacing: 0.15em;
	}
	#interview ul.int_list li:hover .img:before{
		display: none;
	}
	#interview ul.int_list li:hover .img .icon{
		display: none;
	}
	#interview ul.int_list li:hover .img img{
		transform: scale(1);
	}
}
/************* list END ***************/



/* detail
================================================ */
#interview.article{
	line-height: 2;
}
.english#interview.article{
	line-height: 1.8;
}
#interview.article .contents{
	overflow:inherit;
}
#interview.article .stic_otr{
	position: relative;
    margin-top: -549px;
}
#interview.article .stic{
	position: sticky;
	top: 84px;/** header高さ **/
	z-index: -1;
	width: 100vw;
	overflow: hidden;
}

#interview.article .sloganbg{
	width: 150vw;
	height: calc(100vh - 104px);/** header高さ + 下余白20 **/
    border-radius: 50% 50% 0% 0% / 30vw 30vw 0vw 0vw;
    overflow: hidden;
    position: relative;
    /*transition: all .9s cubic-bezier(0,.92,.49,1.02) 0s ,border-radius 1s; メインイメージ sticky ptn1 */
    left: -25vw;
	z-index: -1;
}
#interview.article .sloganbg.no-radius{
    /*border-radius: 0; メインイメージ sticky ptn1 */
}
#interview.article .slogan{
    position: relative;
    max-width: calc(100vw - 40px);
    height: 100%;
    margin: auto;
    overflow: hidden;
}

#interview.article .mdsarea{
	width: 100%;
	position: relative;
	height: calc(100vh - 104px);
	margin-top: calc(-100vh + 104px);
	padding-right: 20px;
}
#interview.article .mdsarea .omds{
	color: #FFF;
	background: var(--basic-bg-gradation-blue);
	background: linear-gradient(97.06deg, rgba(74,131,191,0.9) -4.37%, rgba(0,81,164,0.9) 104.58%);
	position: absolute;
	padding: 35px 50px;
	font-size: 30px;
}

@media screen and (max-width:1400px) {
	#interview.article ul.int_list li:nth-of-type(3n){
		margin-right: calc(15/1400 * 100vw);
	}
	
	#interview.article .stic_otr{
		margin-top: calc(-549/1400 * 100vw);
	}
	#interview.article .stic{
		top: calc(84/1400 * 100vw);
	}
	#interview.article .sloganbg{
		height: calc(100vh - (104/1400 * 100vw));
	}
	#interview.article .slogan{
		max-width: calc(100vw - (40/1400 * 100vw));
	}
	#interview.article .mdsarea{
		height: calc(100vh - (104/1400 * 100vw));
		margin-top: calc(-100vh + (104/1400 * 100vw));
		padding-right: calc(20/1400 * 100vw);
	}
	#interview.article .mdsarea .omds{
		padding: calc(35/1400 * 100vw) calc(50/1400 * 100vw);
		font-size: calc(30/1400 * 100vw);
	}
}
@media screen and (max-width:1200px) {
	#interview.article .stic{
		top: calc(84/1200 * 100vw);
	}
	#interview.article .sloganbg{
		height: calc(100vh - (104/1200 * 100vw));
	}
	#interview.article .mdsarea{
		height: calc(100vh - (104/1200 * 100vw));
		margin-top: calc(-100vh + (104/1200 * 100vw));
	}
}
@media screen and (max-width:800px) {
	#interview.article ul.int_list li{
		margin-bottom: 3vw;
	}
	
	#interview.article .stic_otr{
		margin-top: -39vw;
	}
	#interview.article .stic{
		top: 20vw;
	}
	#interview.article .sloganbg{
		height: calc(100vh - 23vw);
	}
	#interview.article .slogan{
		max-width: 97vw;
	}
	#interview.article .mdsarea{
		height: calc(100vh - 23vw);
		margin-top: calc(-100vh + 23vw);
		padding-right: 1.5vw;
	}
	#interview.article .mdsarea .omds{
		padding: 4vw 5.5vw;
		font-size: 4vw;
	}
}

#interview.article .prof,
#interview.article .qa dl{
	width: 900px;
	margin: 0 auto;
}
#interview.article .prof{
	padding-top: 200px;
}
#interview.article .prof .data{
	position: relative;
	z-index: 1;
	background: rgba(255,255,255,0.9);
	width: 800px;
	margin: -40px auto 0;
	padding: 25px 35px;
}
#interview.article .prof .data .name{
	line-height: 100%;
	margin-bottom: 25px;
}
#interview.article .prof .data .name .dep{
	font-size: 20px;
	height: 35px;
	line-height: 35px;
	padding: 0 20px;
	margin-bottom: 20px;
	background: #CCC;
	color: #FFF;
	font-weight: bold;
	display: inline-block;
}


/*** インタビュー詳細ページ プロフィール 色分け設定 ***/
#interview.article.mfg .prof .data .name .dep{
	background: var(--mfg-color);
}
#interview.article.mkt .prof .data .name .dep{
	background: var(--mkt-color);
}
#interview.article.sls .prof .data .name .dep{
	background: var(--sls-color);
}
#interview.article.mgt .prof .data .name .dep{
	background: var(--mgt-color);
}
/*** インタビュー詳細ページ プロフィール 色分け設定 ***/


#interview.article .prof .data .name .ini{
	font-size: 18px;
	display: block;
}
#interview.article .qa{
	margin-top: 130px;
	padding: 80px 0;
	background: #FFF;
}
#interview.article .qa dl dt{
	background: var(--basic-bg-gradation-blue);
	display: inline-block;
	color: #FFF;
	font-weight: normal;
	font-size: 20px;
	padding: 5px 20px;
	margin-bottom: 30px;
}
#interview.article .qa dl dd{
	margin-bottom: 60px;
}
#interview.article .qa dl dd:last-child{
	margin-bottom: 0;
}


#interview.article .oneday{
	background: linear-gradient(132.44deg, #0051A4 0.24%, rgba(0, 81, 164, 0.8) 99.76%);
	color: #FFF;
	margin-top: 100px;
	padding: 60px 0;
}
#interview.article .oneday > div{
	width: 900px;
	margin: 0 auto;
}
#interview.article .oneday h3{
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	background:#2D73BC;
	margin: 0 auto 40px;
	font-size: 27px;
	width: 340px;
	height: 60px;
	border-radius: 60px;
}
.english#interview.article .oneday h3{
	width: 100%;
	letter-spacing: 0.1em;
}

#interview.article .oneday ul{
	position: relative;
	padding-top: 20px;
}
#interview.article .oneday ul li{
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	margin-bottom: 50px;
}
#interview.article .oneday ul li:last-child{
	margin-bottom: 0;
}
#interview.article .oneday ul li p.min{
	text-align: right;
	position: relative;
	line-height: 140%;
	font-size: 24px;
	margin-right: 50px;
	width: 70px;
}
#interview.article .oneday ul::before{
	content: "";
	position: absolute;
	background: #FFF;
	transition: all 1.4s;
	width: 1px;
	height: 0%;
	top: 0;
	left: 91px;
}
#interview.article .oneday.active ul::before{
	height: 100%;
}
#interview.article .oneday ul li p.min::after{
	content: "";
	position: absolute;
	background: #FFF;
	top: calc(50% - 5px);
	right: -26px;
	width: 9px;
	height: 9px;
	border-radius: 4px;
}
#interview.article .oneday ul li p.txt{
	width: calc(100% - 120px);
}
#interview.article .oneday ul li p.txt span{
	display: block;
	font-weight: bold;
	font-size: 18px;
	line-height: 100%;
	padding-top: 3px;
	margin-bottom: 20px;
	line-height: 140%;
}

#interview.article .link{
	margin-top: 100px;
	text-align: center;
}
#interview.article .link h3{
	font-size: 16px;
	height: 59px;
	line-height: 59px;
	padding: 0 40px;
	margin-bottom: 30px;
	display: inline-block;
	background: #CCC;
	color: #FFF;
	font-weight: bold;
}

/*** インタビュー詳細ページ 下部リンク 色分け設定 ***/
#interview.article.mfg .link h3{
	background: var(--mfg-color);
}
#interview.article.mkt .link h3{
	background: var(--mkt-color);
}
#interview.article.sls .link h3{
	background: var(--sls-color);
}
#interview.article.mgt .link h3{
	background: var(--mgt-color);
}
/*** インタビュー詳細ページ 下部リンク 色分け設定 END ***/

#interview.article ul.int_list{
	justify-content: center;
}
#interview.article ul.int_list li{
	width: 260px;
	padding: 10px;
	background: #FBFBFB;
	margin-right: 13px;
}
#interview.article ul.int_list li:nth-of-type(3n){
    margin-right: 13px;
}
#interview.article ul.int_list li:last-child,
#interview.article ul.int_list li:nth-of-type(4n){
    margin-right: 0;
}
#interview.article ul.int_list li h4{
	text-align: left;
}
#interview.article ul.int_list li h4 span.dep2 {
    font-size: 13px;
}
#interview.article ul.int_list li h4 span.ini {
    font-size: 23px;
    margin-left: 0px;
	display: block;
	line-height: 100%;
}
#interview.article a.goark{
	border: 1px solid #666;
	color: #666;
	text-decoration: none;
	margin: 0 auto;
	width: 700px;
	height: 70px;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	
	width: 100%;
}
#interview.article a.goark::before{
	content: "";
	position: absolute;
    left: 20px;
    width: 20px;
    height: 1px;
    background: #666;
}
#interview.article a.goark::after{
	content: "";
	position: absolute;
	top: calc(50% - 5px);
    left: 20px;
    width: 10px;
    height: 10px;
    border-bottom: 1px solid #666;
    border-left: 1px solid #666;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

@media screen and (max-width:1400px) {
	#interview.article .prof,
	#interview.article .qa dl{
		width: calc(900/1400 * 100vw);
	}
	#interview.article .prof{
		padding-top: calc(200/1400 * 100vw);
	}
	#interview.article .prof .data{
		width: calc(800/1400 * 100vw);
		margin: calc(-40/1400 * 100vw) auto 0;
		padding: calc(25/1400 * 100vw) calc(35/1400 * 100vw);
	}
	#interview.article .prof .data .name{
		margin-bottom: calc(25/1400 * 100vw);
	}
	#interview.article .prof .data p{
		font-size: max(calc(15/1400 * 100vw),12px);
	}
	#interview.article .prof .data .name .dep{
		font-size: max(calc(14/1400 * 100vw),11px);
		height: calc(35/1400 * 100vw);
		line-height: calc(35/1400 * 100vw);
		padding: 0 calc(20/1400 * 100vw);
		margin-bottom: calc(20/1400 * 100vw);
	}

	#interview.article .prof .data .name .ini{
		font-size: calc(30/1400 * 100vw);
	}
	#interview.article .qa{
		margin-top: calc(130/1400 * 100vw);
		padding: calc(80/1400 * 100vw) 0;
	}
	#interview.article .qa dl dt{
		font-size: calc(20/1400 * 100vw);
		padding: calc(5/1400 * 100vw) calc(20/1400 * 100vw);
		margin-bottom: calc(30/1400 * 100vw);
	}
	#interview.article .qa dl dd{
		margin-bottom: calc(60/1400 * 100vw);
		font-size: max(calc(15/1400 * 100vw),12px);
	}
	
	#interview.article .oneday{
		margin-top: calc(100/1400 * 100vw);
		padding: calc(60/1400 * 100vw) 0;
	}
	#interview.article .oneday > div{
		width: calc(900/1400 * 100vw);
	}
	#interview.article .oneday h3{
		margin: 0 auto calc(40/1400 * 100vw);
		font-size: calc(27/1400 * 100vw);
		width: calc(340/1400 * 100vw);
		height: calc(60/1400 * 100vw);
		border-radius: calc(60/1400 * 100vw);
	}
	#interview.article .oneday ul{
		padding-top: calc(20/1400 * 100vw);
	}
	#interview.article .oneday ul li{
		margin-bottom: calc(50/1400 * 100vw);
	}
	#interview.article .oneday ul li p.min{
		font-size: calc(24/1400 * 100vw);
		margin-right: calc(50/1400 * 100vw);
		width: calc(70/1400 * 100vw);
	}
	#interview.article .oneday ul::before{
		left: calc(91/1400 * 100vw);
	}
	#interview.article .oneday ul li p.min::after{
		top: calc(50% - (5/1400 * 100vw));
		right: calc(-26/1400 * 100vw);
		width: calc(9/1400 * 100vw);
		height: calc(9/1400 * 100vw);
		border-radius: calc(4/1400 * 100vw);
	}
	#interview.article .oneday ul li p.txt{
		width: calc(100% - (120/1400 * 100vw));
		font-size: max(calc(15/1400 * 100vw),12px);
	}
	#interview.article .oneday ul li p.txt span{
		font-size: calc(18/1400 * 100vw);
		padding-top: calc(3/1400 * 100vw);
		margin-bottom: calc(20/1400 * 100vw);
	}
	#interview.article .link{
		margin-top: calc(100/1400 * 100vw);
	}
	#interview.article .link h3{
		font-size: max(calc(16/1400 * 100vw),13px);
		height: calc(59/1400 * 100vw);
		line-height: calc(59/1400 * 100vw);
		padding: 0 calc(40/1400 * 100vw);
		margin-bottom: calc(30/1400 * 100vw);
	}

	#interview.article ul.int_list li{
		width: calc(260/1400 * 100vw);
		padding: calc(10/1400 * 100vw);
		margin-right: calc(13/1400 * 100vw);
	}
	#interview.article ul.int_list li:nth-of-type(3n){
		margin-right: calc(13/1400 * 100vw);
	}
	#interview.article ul.int_list li h4 span.dep2 {
		font-size: max(calc(13/1400 * 100vw),11px);
	}
	#interview.article ul.int_list li h4 span.ini {
		font-size: calc(23/1400 * 100vw);
	}
	
	#interview.article a.goark{
		font-size: calc(15/1400 * 100vw);
		width: calc(700/1400 * 100vw);
		height: calc(70/1400 * 100vw);
	}
	#interview.article a.goark::before{
		left: calc(20/1400 * 100vw);
		width: calc(20/1400 * 100vw);
	}
	#interview.article a.goark::after{
		top: calc(50% - (5/1400 * 100vw));
		left: calc(20/1400 * 100vw);
		width: calc(10/1400 * 100vw);
		height: calc(10/1400 * 100vw);
	}
}


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

	#interview.article .prof,
	#interview.article .qa dl{
		width: 90vw;
	}
	#interview.article .prof{
		padding-top: 10vw;
	}
	#interview.article .prof .data{
		width: 80vw;
		margin: -5vw auto 0;
		padding: 4vw 3.5vw;
	}
	#interview.article .prof .data .name{
		margin-bottom: 4vw;
	}
	#interview.article .prof .data p{
		font-size: 2.7vw;
	}
	#interview.article .prof .data .name .dep{
		font-size: 3.5vw;
		height: 6vw;
		line-height: 6vw;
		padding: 0 2vw;
		margin-bottom: 2vw;
	}
	#interview.article .prof .data .name .ini{
		font-size: 3vw;
	}
	#interview.article .qa{
		margin-top: 15vw;
		padding: 7vw 5vw;
	}
	#interview.article .qa dl{
		width: 100%;
	}
	#interview.article .qa dl dt{
		font-size: 3vw;
		padding: 1.4vw 3vw;
		margin-bottom: 5vw;
	}
	#interview.article .qa dl dd{
		margin-bottom: 10vw;
		font-size: 3vw;
	}
	
	#interview.article .oneday{
		margin-top: 15vw;
		padding: 7vw 0;
	}
	#interview.article .oneday > div{
		width: 90%;
	}
	#interview.article .oneday h3{
		margin: 0 auto 7vw;
		font-size: 3.4vw;
		width: 50vw;
		height: 8vw;
		border-radius: 8vw;
	}
	#interview.article .oneday ul{
		padding-top: 3vw;
	}
	#interview.article .oneday ul li{
		margin-bottom: 5vw;
	}
	#interview.article .oneday ul li p.min{
		font-size: 3.6vw;
		margin-right: 8vw;
		width: 12vw;
	}
	#interview.article .oneday ul::before{
		left: 15.4vw;
	}
	#interview.article .oneday ul li p.min::after{
		top: calc(50% - 1vw);
		right: -4.5vw;
		width: 2vw;
		height: 2vw;
		border-radius: 2vw;
	}
	#interview.article .oneday ul li p.txt{
		width: calc(100% - 20vw);
		font-size: 3vw;
	}
	#interview.article .oneday ul li p.txt span{
		font-size: 3.4vw;
		padding-top: 0.4vw;
		margin-bottom: 3vw;
	}
	
	#interview.article .link{
		margin-top: 15vw;
	}
	#interview.article .link h3{
		font-size: 3.2vw;
		height: 9vw;
		line-height: 9vw;
		padding: 0 5vw;
		margin-bottom: 5vw;
	}
	#interview.article ul.int_list{
		flex-wrap: wrap;
		justify-content: flex-start;
	}
	#interview.article ul.int_list li{
		width: calc(50% - 5px);
		padding: 1.5vw;
		margin-right:  10px;
	}
	#interview.article ul.int_list li:nth-of-type(2n){
		margin-right:  0px;
	}
	#interview.article ul.int_list li:nth-of-type(3n){
		margin-right:  10px;
	}
	#interview.article ul.int_list li h4{
		margin-top: 0;
	}
	#interview.article ul.int_list li h4 span.dep2 {
		font-size: 2.7vw;
	}
	#interview.article ul.int_list li h4 span.ini {
		font-size: 4vw;
	}
	
	#interview.article a.goark{
		font-size: 2.7vw;
		width: 100%;
		height: 14vw;
		margin-top: 5vw;
	}
	#interview.article a.goark::before{
		left: 5vw;
		width: 4vw;
	}
	#interview.article a.goark::after{
		top: calc(50% - 1vw);
		left: 5vw;
		width: 2vw;
		height: 2vw;
	}
	/*
	.footbg,.title,.stic{
		display: none !important;
	}
	*/
}
/************* detail END ***************/