@charset "utf-8";
/*=============================================================
 Work Layout
=============================================================*/
/* contents
-------------------------------------------------------------*/
#contents{
	padding-bottom:0;
}
#work .fadein{
	opacity:0.1;
	transform:translate(0, 100px);
	transition:all 800ms;
}
#work .fadein.scrollin{
	opacity:1;
	transform:translate(0, 0);
}

/* #ftrNavi
-------------------------------------------------------------*/
#ftrNaviInner.ftrWork ul {
  justify-content: center;
}

/* ttl index
-------------------------------------------------------------*/
.index #ttl-page h1::after,
.interview #ttl-page h1::after{
	background: url(/saiyou/newgraduate/work/img/index_bg_ttl.jpg) no-repeat center center;
}
/* work index
-------------------------------------------------------------*/
.bg-gray-box{
	background-color: #edeff1;
	padding: 130px 0 0px;
	margin: 100px 0 0 0;
}
.occupation-area{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.occupation-area>li{
	position: relative;
	width: calc(49%);
	background-color: #fff;
	margin-bottom: 130px;
	padding: 70px 30px;
	box-sizing: border-box;
	text-align: center;
}
.occupation-area>li:nth-child(n + 5){
	margin-bottom: 50px;
}
.occupation-area>li>.col2{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.occupation-area>li>.col2 a{
	width: calc(50%);
}
.occupation-area>li .icon{
	position: absolute;
	top:0;
	left:50%;
	transform: translateX(-50%);
	margin-top: -40px;
}
.occupation-area>li .ttl2{
	font-size: 22px;
	font-weight: bold;
	position: relative;
	display: inline-block;
	padding-bottom: 8px;
	margin-bottom: 40px;
}
.occupation-area>li .ttl2:after{
	content: '';
	position: absolute;
	bottom: 0px;
	display: inline-block;
	width: 100%;
	height: 4px;
	left:0;
}
.occupation-area>li .ttl2.color1:after{
	background: linear-gradient(to right, #e46924, #ffc04d);
}
.occupation-area>li .ttl2.color2:after{
	background: linear-gradient(to right, #e46924, #ffc04d);
}
.occupation-area>li .ttl2.color3:after{
	background: linear-gradient(to right, #689c00, #b4c600);
}
.occupation-area>li .ttl2.color4:after{
	background: linear-gradient(to right, #4caae2, #aebee2);
}
.occupation-area>li .ttl2.color5:after{
	background: linear-gradient(to right, #4caae2, #aebee2);
}
.occupation-area>li .ttl2.color6:after{
	background: linear-gradient(to right, #e46924, #ffc04d);
}
.occupation-area>li .text{
	font-size: 15px;
	text-align: left;
	margin-bottom: 40px;
}
.occupation-area>li .ttl3{
	font-size:16px;
	font-weight: bold;
}
.occupation-area>li a{
	color: #333;
	font-size: 13px;
	font-weight: bold;
	line-height: 1.6;
	text-decoration: none;
	position: relative;
	vertical-align: middle;
	display: inline-block;
}
.occupation-area>li a>img{
	margin-bottom: 10px;
	width: 198px;
	height: auto;
}
.occupation-area>li a>span{
	display: block;
}
.occupation-area>li a .name{
	font-size: 16px;
	line-height: 1.4;
	/*display: inline-block;*/
	position: relative;
}
/*.occupation-area>li a .name::before{
	position: absolute;
	content: '';
	bottom: 10px;
	right: -22px;
	width: 18px;
	height: 2px;
	background: linear-gradient(to right, #f5af2b 0%, #d11a24 100%);
	vertical-align: middle;
	transition: all 0.2s ease;
}*/
/*.occupation-area>li a .name::after {
	position: absolute;
	bottom: 7px;
	right: -22px;
	content: '';
	width: 6px;
	height: 6px;
	border-top: 2px solid #d11a24;
	border-right: 2px solid #d11a24;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	transition: all 0.2s ease;
}*/
.occupation-area>li a:hover .name::before,
.occupation-area>li a:hover .name::after {
	right: -24px;
}

/*=============================================================
 interview Layout
=============================================================*/
/* spMov
-------------------------------------------------------------*/
.interview .spMov{
	position:relative;
	width:964px;
	height:260px;
	margin:100px auto 50px;
	line-height:1.2;
	font-weight:bold;
}
.interview .spMov p{
	position:absolute;
	z-index:2;
	top:90px;
	left:320px;
	color:#fff;
	text-align:left;
}
.interview .spMov p:first-of-type{
	padding-left:50px;
	font-size:2.2rem;
}
.interview .spMov p:first-of-type:before{
	display:block;
	content: "";
	position: absolute;
	top: 12%;
	left: 0;
	width: 42px;
	height: 42px;
	margin-top: -8px;
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	background: #fff;
}
.interview .spMov p:first-of-type:after{
	display: block;
	content: "";
	position: absolute;
	top: 12%;
	left: 15px;
	width: 0;
	height: 0;
	margin-top: 0;
	border: 14px solid transparent;
	border-left: 18px solid #c27665;
}
.interview .spMov p:last-of-type{
	margin-top:50px;
	display:block;
	left:240px;
}
.interview .spMov .link_box_img{
	position: absolute;
	overflow: hidden;
	width: 100%;
	top: 0;
}
.interview .spMov .link_box_img img{
	transition: all 0.6s ease;
	max-width: 100%;
}
.interview .spMov a:hover .link_box_img img{
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
}
.mfp-content{
	width:50% !important;
}
/* profileArea
-------------------------------------------------------------*/
.interview .profileArea {
	padding: 40px 0 70px 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.interview .profileArea>* {
	flex-basis: calc((100% - 50px) / 3);
	text-align: center;
	margin-bottom: 40px;
}
.interview .profileArea>*>a{
	color: #333;
	display: block;
}
.interview .profileArea>*>a:hover{
}
.interview .profileArea>* .name{
	font-size: 22px;
	line-height: 1.2;
	font-weight: 700;
	display:inline-block;
	padding-bottom: 10px;
	margin: 15px 0 14px;
	position: relative;
}
.interview .profileArea>* .name:after {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	content: '';
	width: 100%;
	height: 4px;
}
/* color */
.interview .profileArea>* .name.color1:after{
	background: linear-gradient(to right, #e46a24 0%, #ffc04d 100%);
}
.interview .profileArea>* .name.color2:after{
	background: linear-gradient(to right, #669b00 0%, #b7c800 100%);
}
.interview .profileArea>* .name.color3:after{
	background: linear-gradient(to right, #4baae2 0%, #aebee2 100%);	
}
.interview .profileArea>* .name.color4:after{
	background: linear-gradient(to right, #ff787f 0%, #fdba99 100%);
}
.interview .profileArea>* .year{
	font-size: 15px;
	line-height: 1.6;
	font-weight: 700;
}
.interview .profileArea>* .year>span{
	display: block;
}

@media only screen and (min-width:869px), only screen and (min-device-width:869px){
	.Line-h24 {line-height: 2.4!important;}
}


/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 TB
 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
@media only screen and (min-width: 751px) and (max-width: 1024px){
/*=============================================================
 interview Layout
=============================================================*/
/* spMov
-------------------------------------------------------------*/
.interview .spMov{
	margin:70px auto 0;
	width:auto;
	height:200px;
	line-height:1.0;
}
.interview .spMov p{
	top:33%;
	left:30%;
}
.interview .spMov p:first-of-type{
	padding-left:38px;
	font-size:1.7rem;
}
.interview .spMov p:first-of-type:before{
	width: 30px;
	height: 30px;
}
.interview .spMov p:first-of-type:after{
	top: 0;
	left: 10px;
	border: 10px solid transparent;
	border-left: 15px solid #c27665;
}
.interview .spMov p:last-of-type{
	margin-top:40px;
	display:block;
	left:10%;
}
.interview .spMov a:hover .link_box_img img{
	transform: scale(1.0);
}
.mfp-content{
	width:80% !important;
}
}
/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 Smartphones
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
@media only screen and (max-width:750px), only screen and (max-device-width:750px){
/*=============================================================
 Work Layout
=============================================================*/
/* contents
-------------------------------------------------------------*/
#contents{
	padding-bottom:0;
}
/* work index
-------------------------------------------------------------*/
.bg-gray-box{
	background-color: #edeff1;
	padding: 100px 0 50px;
	margin: 80px 0 0 0;
}
.occupation-area{display: block;}
.occupation-area>li{
	width: 100%;
	margin-bottom: 80px;
	padding: 50px 30px 30px;
}
.occupation-area>li:nth-child(n + 5){
	margin-bottom: 80px;
}
.occupation-area>li:last-child{margin-bottom: 0;}	
.occupation-area>li .ttl2{
	font-size: 20px;
	padding-bottom: 6px;
	margin-bottom: 30px;
}
.occupation-area>li .text{
	font-size: 14px;
	margin-bottom: 30px;
}
.occupation-area>li a>img{
	width: 158px;
}
.occupation-area>li a{font-size: 13px;}
.occupation-area>li a .name{font-size: 15px;}
.occupation-area>li>.col2{
	display: block;
}
.occupation-area>li>.col2 a {
	width: 100%;
}
.occupation-area>li>.col2 a+ a{
	margin-top: 30px;
}
/*=============================================================
 interview Layout
=============================================================*/
/* spMov
-------------------------------------------------------------*/
.interview .spMov{
	margin: 50px auto 0;
	width:auto;
	height:120px;
	text-align:center;
}
.interview .spMov p{
	top:25%;
	left:18%;
}
.interview .spMov p:first-of-type{
	padding-left:33px;
	line-height:1.0;
	font-size:1.3rem;
}
.interview .spMov p:first-of-type:before{
	width: 25px;
	height: 25px;
}
.interview .spMov p:first-of-type:after{
	top: 0;
	left: 9px;
	border: 7px solid transparent;
	border-left: 10px solid #c27665;
}
.interview .spMov p:last-of-type{
	margin-top:30px;
	padding:0 20px;
	display:block;
	left:0;
	font-size:0.8rem;
	line-height:1.4;
}
.interview .spMov a:hover .link_box_img img{
	transform: scale(1.0);
}
.mfp-content{
	width:100% !important;
}
/* profileArea
-------------------------------------------------------------*/
.interview .profileArea {
	padding: 40px 0 70px 0;
}
.interview .profileArea>* {
	flex-basis: calc((100% - 10px) / 2);
	margin-bottom: 20px;
}
.interview .profileArea>* .name{
	font-size: 18px;
	padding-bottom: 5px;
	margin: 20px 0 14px;
}
.interview .profileArea>* .year{
	font-size: 12px;
	line-height: 1.6;
}
}