@charset "UTF-8";

#content {
	width: 100%;
	padding-top: 0;
}
@keyframes mainVisAnimateStart {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
@keyframes mainVisAnimate {
	0% {
		opacity: 0;
	}
	40% {
		opacity: 1;
	}
	60% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
@keyframes mainVisText {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
#mainVisWrapper {
	position: relative;
	background: url(../../new_grads/images/mainvis.jpg) no-repeat center center;
	background-size: cover;
}
#mainVisWrapper #mainVisImages {
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	margin: auto;
	position: absolute;
	/*aspect-ratio: 50 / 37;*/
	pointer-events: none;
}
#mainVisWrapper #mainVisImages > li {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	position: absolute;
	background: no-repeat center top;
	background-size: cover;
	opacity: 0;
}
#mainVisWrapper #mainVisImages #mainVisImages01 {
	opacity: 1;
	animation: mainVisAnimateStart 1s linear 1s 1 normal forwards;
	background-image: url(../../new_grads/images/mainvis01.webp);
}
#mainVisWrapper #mainVisImages #mainVisImages02 {
	animation: mainVisAnimate 2.5s linear 1s 1 normal forwards;
	background-image: url(../../new_grads/images/mainvis02.webp);
}
#mainVisWrapper #mainVisImages #mainVisImages03 {
	animation: mainVisAnimate 2.5s linear 2.5s 1 normal forwards;
	background-image: url(../../new_grads/images/mainvis03.webp);
}
#mainVisWrapper #mainVisImages #mainVisImages04 {
	animation: mainVisAnimate 2.5s linear 4s 1 normal forwards;
	background-image: url(../../new_grads/images/mainvis04.webp);
}
#mainVisWrapper #mainVisImages #mainVisImages05 {
	animation: mainVisAnimate 2.5s linear 5.5s 1 normal forwards;
	background-image: url(../../new_grads/images/mainvis05.webp);
}
#mainVisWrapper #mainVisImages #mainVisImages06 {
	animation: mainVisAnimate 2.5s linear 7s 1 normal forwards;
	background-image: url(../../new_grads/images/mainvis06.webp);
}
#mainVisWrapper #mainVisImages > li span { display: none; }
#mainVis {
	color: #fff;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	background-color: rgba(4,75,172,0.9);
}
#mainVis > * {
	opacity: 0;
	animation: mainVisText 2s linear 9.5s 1 normal forwards;
}
#mainVisTitle {
	line-height: 1;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}
#mainVis .text { font-family: "Noto Serif JP", serif; }
@media screen and (min-width:769px), print{
	/*#mainVisWrapper #mainVisImages {
		max-width: calc(100% - 200px);
		max-height: calc(100% - 200px);
	}*/
	#mainVis {
		height: calc(100vh - (90px + 170px));
		min-height: 500px;
	}
	#mainVisTitle { font-size: 15px; }
	#mainVisTitle img { height: 40px; }
	#mainVisTitle span { margin-left: 10px; }
	#mainVis .text {
		font-size: 46px;
		margin-top: 20px;
	}
}
@media screen and (max-width:768px){
	#content { padding: 0 0 150px; }
	/*#mainVisWrapper #mainVisImages {
		max-width: calc(100% - 50px);
		max-height: calc(100% - 50px);
	}*/
	#mainVis { height: 106.6vw; }
	#mainVisTitle img { height: 20px; }
	#mainVisTitle span { font-size: 7.5px; }
	#mainVis .text {
		font-size: 23px;
		margin-top: 11px;
	}
}

.menuText { color: #fff; }
.menuText .title > span { display: block; }
.menuText .title .en { font-weight: 400; }
.menuText .title .ja { font-weight: 500; }
#recruitMenu { background: #66ccff; }
#recruitMenuList {
	display: flex;
	flex-wrap: wrap;
}
#recruitMenuList li > * {
	display: flex;
	flex-direction: column;
	justify-content: center;
	box-sizing: border-box;
}
#recruitMenuList li a {
	background-color: #fff;
	background-size: auto 100%;
	background-repeat: no-repeat;
	background-position: right center;
}
#recruitMenuList li a span { display: block; }
#recruitMenuList #recruitMenuList01 a {
	border-color: #fff;
	border-style: solid;
	background-position: center center;
	background-image: url(../../new_grads/images/menu01.jpg);
}
#recruitMenuList02 a { background-image: url(../../new_grads/images/menu02.svg); }
#recruitMenuList03 a { background-image: url(../../new_grads/images/menu03.svg); }
#recruitMenuList04 a { background-image: url(../../new_grads/images/menu04.svg); }
#recruitMenuList05 a { background-image: url(../../new_grads/images/menu05.svg); }
#recruitMenuList06 a { background-image: url(../../new_grads/images/menu06.svg); }
#recruitMenuList07 span { align-items: center; }
#recruitMenuList07 img { opacity: 0.2; }
@media screen and (min-width:769px), print{
	.menuInner {
		max-width: 1000px;
		padding: 0 25px;
		margin: 0 auto;
	}
	.menuText .title .en { font-size: 16px; }
	.menuText .title .ja { font-size: 32px; }
	.menuText .text {
		font-size: 15px;
		line-height: 30px;
		margin-top: 5px;
	}
	#recruitMenu { padding: 65px 0 70px; }
	#recruitMenuList {
		padding-top: 20px;
		margin-right: -20px;
	}
	#recruitMenuList li {
		width: calc(25% - 20px);
		margin-top: 20px;
		margin-right: 20px;
	}
	#recruitMenuList a {
		line-height: 1.2;
		padding-left: 20px;
		transition-duration: .3s;
		transition-property: color, background-color, background-image;
	}
	#recruitMenuList a:hover {
		color: #66ccff;
		background-color: rgba(255,255,255,0.7);
	}
	#recruitMenuList li > * { height: 133px; }
	#recruitMenuList li .en { font-size: 12px; }
	#recruitMenuList li .ja { font-size: 18px; }
	#recruitMenuList #recruitMenuList01 { width: calc(50% - 20px); }
	#recruitMenuList #recruitMenuList01 a {
		border-width: 10px;
		padding-left: 10px;
		background-size: 100% auto;
		transition-property: color, background-size;
	}
	#recruitMenuList #recruitMenuList01 a:hover { background-size: 125% auto; }
	#recruitMenuList #recruitMenuList02 a:hover { background-image: url(../../new_grads/images/menu02_on.svg); }
	#recruitMenuList #recruitMenuList03 a:hover { background-image: url(../../new_grads/images/menu03_on.svg); }
	#recruitMenuList #recruitMenuList04 a:hover { background-image: url(../../new_grads/images/menu04_on.svg); }
	#recruitMenuList #recruitMenuList05 a:hover { background-image: url(../../new_grads/images/menu05_on.svg); }
	#recruitMenuList #recruitMenuList06 a:hover { background-image: url(../../new_grads/images/menu06_on.svg); }
	#recruitMenuList #recruitMenuList07 img { width: 120px; }
}
@media screen and (max-width:768px){
	.menuInner {
		padding: 25px 25px 25px;
	}
	.menuText .title .en { font-size: 13px; }
	.menuText .title .ja { font-size: 24px; }
	.menuText .text {
		font-size: 12px;
		line-height: 22px;
		margin-top: 10px;
		letter-spacing: 0.05em;
	}
	#recruitMenuList {
		margin-top: 5px;
		margin-right: -13px;
	}
	#recruitMenuList li {
		margin-top: 13px;
		margin-right: 13px;
		width: calc(50% - 13px);
	}
	#recruitMenuList li > a { padding-left: 13.5px; }
	#recruitMenuList li > * { height: 88px; }
	#recruitMenuList li .en { font-size: 8px; }
	#recruitMenuList li .ja { font-size: 12px; }
	#recruitMenuList #recruitMenuList01 { width: calc(100% - 13px) }
	#recruitMenuList #recruitMenuList01 a {
		border-width: 6.5px;
		padding-left: 7px;
		background-size: cover;
	}
	#recruitMenuList #recruitMenuList07 img { width: 80px; }
}

#openCompany {
	display: block;
	background-color: #56b6f3;
}
@media screen and (min-width:769px), print{
	#openCompany {
		padding: 90px 0 80px;
		transition-duration: .3s;
		transition-property: background-color;
	}
	#openCompany:hover { background-color: #2b76cb; }
}

#staffInterviewLink {
	display: block;
	background-color: #044bac;
}
#staffInterviewLink .title .en { font-weight: 500; }
#staffInterviewLink .title .ja { font-weight: 400; }
#staffInterviewLink .title .en span { color: #66ccff; }
#interviewList a {
	color: #fff;
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center center;
	box-sizing: border-box;
}
#interviewList a::before {
	content: "";
	top: 0;
	left: 0;
	opacity: 1;
	width: 100%;
	height: 100%;
	display: block;
	position: absolute;
	mix-blend-mode: multiply;
	background-color: rgba(51,153,255,0.5);
}
#interviewList a > span { position: relative; }
@media screen and (min-width:769px), print{
	#staffInterviewLink {
		padding: 65px 0 75px;
		transition-duration: .3s;
		transition-property: background-color;
	}
	#staffInterviewLink:hover { background-color: #66ccff; }
	#staffInterviewLink .title .en { font-size: 28px; }
	#staffInterviewLink .title .ja { font-size: 14px; }
	#staffInterviewLink .title .en span {
		transition-duration: .3s;
		transition-property: color;
	}
	#staffInterviewLink:hover .title .en span { color: #fff; }
	#interviewList a {
		width: 277px;
		height: 277px;
		padding: 20px;
	}
	#interviewList a::before {
		transition-duration: .3s;
		transition-property: opacity;
	}
	#interviewList a:hover::before { opacity: 0; }
}
@media screen and (max-width:768px){
	#interviewList a {
		width: 165px;
		height: 165px;
		padding: 12px;
	}
	#staffInterviewLink .title .en { font-size: 9px; }
	#staffInterviewLink .title .ja { font-size: 12px; }
}

#newsTopics .menuText {
	display: flex;
	color: #044bac;
	align-items: flex-end;
	justify-content: space-between;
}
#newsTopics .menuText .link a {
	color: #fff;
	display: block;
	text-align: center;
	background-color: #4fa7ff;
}
#newsTopicsPosts a { display: block; }
#newsTopicsPosts a .time { color: #000; }
#newsTopicsPosts a dt {
	color: #044bac;
	font-weight: 500;
}
#newsTopicsPosts a dd span {
	color: #3399ff;
	text-decoration: underline;
}
@media screen and (min-width:769px), print{
	#newsTopics { padding: 90px 0 100px; }
	#newsTopics .menuText .link a {
		width: 160px;
		font-size: 14px;
		line-height: 40px;
		transition-duration: .3s;
		transition-property: background-color;
	}
	#newsTopics .menuText .link a:hover { background-color: #142846 }
	#newsTopicsPosts {
		display: flex;
		flex-wrap: wrap;
		margin-top: 50px;
	}
	#newsTopicsPosts li {
		width: 50%;
		font-size: 15px;
		line-height: 30px;
		padding-left: 30px;
		box-sizing: border-box;
	}
	#newsTopicsPosts li:nth-child(odd) {
		padding-right: 50px;
		border-right: 1px solid #dcdcdc;
	}
	#newsTopicsPosts li:nth-child(2) ~ li { padding-top: 35px; }
	#newsTopicsPosts a:hover dl { text-decoration: underline; }
	#newsTopicsPosts a dt {
		font-size: 17px;
		line-height: 30px;
	}
}
@media screen and (max-width:768px){
	#newsTopics .menuText .link a {
		width: 130px;
		font-size: 12px;
		padding: 7px 0 8px;
	}
	#newsTopicsPosts li { margin-top: 40px; }
	#newsTopicsPosts a .time { font-size: 12px; }
	#newsTopicsPosts a dt {
		font-size: 14px;
		line-height: 24px;
		margin-top: 10px;
	}
	#newsTopicsPosts a dd {
		font-size: 12px;
		line-height: 22px;
		margin-top: 5px;
	}
}

#snsAccountLink a {
	color: #fff;
	display: block;
	text-align: center;
	border-radius: 100px;
	background-color: #000;
}
#snsAccountLink a::before {
	content: "";
	display: inline-block;
	vertical-align: middle;
	background: url(../../new_grads/images/x_white.svg) no-repeat center center;
	background-size: 100% 100%;
}
@media screen and (min-width:769px), print{
	#snsAccount { padding-top: 100px; }
	#snsAccount .menuInner {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	#snsAccount .title {
		font-size: 32px;
		margin-bottom: 10px;
	}
	#snsAccountLink a {
		width: 500px;
		font-size: 24px;
		padding: 16px 0;
		transition-duration: .3s;
		transition-property: color, background-color;
	}
	#snsAccountLink a:hover {
		color: #000;
		background-color: #66ccff;
	}
	#snsAccountLink a::before {
		width: 17px;
		height: 17px;
		margin-right: 5px;
		transition-duration: .3s;
		transition-property: background-image;
	}
	#snsAccountLink a:hover::before {
		background-image: url(../../new_grads/images/x_black.svg);
	}
}
@media screen and (max-width:768px){
	#snsAccount { margin-top: 50px; }
	#snsAccount .title {
		font-size: 24px;
	}
	#snsAccount .text {
		font-size: 12px;
		line-height: 22px;
		margin-bottom: 15px;
	}
	#snsAccount a {
		font-size: 15.5px;
		padding: 11px 0;
	}
	#snsAccount a::before {
		width: 11px;
		height: 11px;
		margin-right: 0.2em;
	}
}