@charset "utf-8";
@import url(cmn.css);
@import url(base.css);
@import url(lineanime.css);
:root {
	--page_color: #0C26CE;
	--new_color: #03A8B0;
}
#lv{
	background-image: url("../images/requirements/lv.webp");
	background-position: 43% 24%;
}
#lv h1{
	padding-left: 1.8em;
}
#lv h1::after{
	content: "05";
}
#lv .subttl{
	padding-left: 5.5em;
	display: none;
}
@media screen and (max-width: 1450px){
	#lv{
		padding-top: 10%;
		padding-bottom: 10%;
		justify-content: flex-end;
	}
}
@media screen and (max-width: 900px){
	#lv{
		background-image: url("../images/requirements/lv2.webp");
		background-position: 43% 24%;
	}
}
@media screen and (max-width: 768px){
	#lv .subttl {
	  padding-left: 4.0em;
	}
}
@media screen and (max-width: 480px){
	#lv h1{
		padding-left: 1.5em;
	}
	#lv .subttl{
	  padding-left: 2.5em;
	}
}

/*--------------------lead-------------------------*/
#lead .flex{
	align-items: flex-start;
	margin-bottom: 100px;
}

#lead nav ul{
	display: flex;
	align-items: stretch;
	gap: 1px;
}
#lead nav ul li{
	width: calc((100% - 2px) / 3);
	position: relative;
	height: 220px;
}
#lead nav ul li a:hover{
	opacity: 0.5;
}
#lead nav ul li div{
	position: absolute;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	top: 0;
	left: 0;
	padding-bottom: 20px;
}
#lead nav ul li:first-child{
	background: var(--new_color);
}
#lead nav ul li:nth-child(2){
	background: var(--i_sub_color);
}
#lead nav ul li:nth-child(3){
	background: var(--i_main_color);
}
#lead nav ul li div::before{
	display: block;
	content: "";
	width: 35px;
	aspect-ratio: 1;
	position: absolute;
	bottom: 30px;
	left: 50%;
	transform: translateX(-50%);
	background: #fff;
	border-radius: 50%;
	pointer-events: none;
}
#lead nav ul li div::after{
	display: block;
	content: "";
	width: 10px;
	aspect-ratio: 1;
	position: absolute;
	bottom: 45px;
	left: 50%;
	border-top: 1px solid var(--i_txt_color);
	border-right: 1px solid var(--i_txt_color);
	transform: translateX(-50%) rotate(135deg);
	pointer-events: none;
	transition: .3s ease-in-out;
}
#lead nav ul li:first-child div::after{
	border-color: var(--new_color);
}
#lead nav ul li:nth-child(2) div::after{
	border-color: var(--i_sub_color);
}
#lead nav ul li:nth-child(3) div::after{
	border-color: var(--i_main_color);
}
#lead nav ul li div p{
	color: #fff;
	font-size: 2.8rem;
	line-height: 1.5;
	letter-spacing: 0.3rem;
	font-weight: 600;
}
#lead nav ul li div p+p.en{
	margin-top: 2px;
	font-size: 2.0rem;
	font-weight: 500;
}
@media screen and (max-width: 900px){
	#lead .flex{
		display: block;
		margin-bottom: 60px;
	}
}
@media screen and (max-width: 768px){
	#lead .flex{
		margin-bottom: 60px;
	}
	#lead nav ul {
		flex-wrap: wrap;
	}
	#lead nav ul li{
		height: 220px;
	}
	#lead nav ul li:first-child{
		width: 100%;
	}
	#lead nav ul li{
		width: calc((100% - 1px) / 2);
	}
	#lead nav ul li div p{
		font-size: 2.4rem;
	}
	#lead nav ul li div p+p.en{
		font-size: 1.8rem;
	}
}
@media screen and (max-width: 480px){
	#lead .flex{
		margin-bottom: 40px;
	}
	#lead nav ul li{
		width: 100%;
	}
	#lead nav ul li{
		height: 130px;
	}
	#lead nav ul li div p{
		font-size: 2.0rem;
	}
	#lead nav ul li div p+p.en{
		font-size: 1.6rem;
		margin-top: 0;
		padding-bottom: 10px;
	}
	#lead nav ul li div::before{
		width: 25px;
		bottom: 15px;
	}
	#lead nav ul li div::after{
		width: 7px;
		bottom: 25px;
	}
}
/*--------------共通--------------*/

.table{
    border: 1px solid var(--gray);
	margin-bottom: 60px;
	background: #fff;
}
.table dl{
    display: flex;
}
.table dl:not(:last-of-type){
    border-bottom: none;
}
.table dl dt,
.table dl dd{
    padding: 10px;
}
.table dl dt{
    background: var(--i_main_color);
    border-right: none;
    min-width: 200px;
    text-align: center;
	color: #fff;
}
.table dl:not(:last-of-type) dt{
	border-bottom: 1px solid rgba(0,0,0,.2);
}

.table dl:not(:last-of-type) dd{
	flex: 1;
	border-bottom: 1px solid var(--gray);
}
.table a{
    color: var(--i_main_color);
    display: inline;
}
.table p + p{
	margin-top: 0;
}
div.entry.flex{
	justify-content: flex-start;
	gap: 20px 3%;
	align-items: flex-start;
}
div.entry.flex p +p{
	margin-top: 0;
}

@media screen and (min-width: 481px){
	a[href^="tel"]{
		pointer-events: none;
		color: var(--i_txt_color);
	}
}
@media screen and (max-width: 480px){
    .table dl{
        flex-direction: column;
    }
    .table dl dt{
        text-align: left;
        border-right: 0;
    }
	div.entry.flex{
		justify-content: center;
	}
	div.entry.flex p:nth-child(1),
	div.entry.flex p:nth-child(2){
		width: 47.5%;
	}
}
/*-----------------newgraduate----------------------------*/
#newgraduate .entry{
	margin-bottom: 60px;
}
#newgraduate{
	--i_main_color: var(--new_color);
}

#newgraduate .btn a:hover::after {
  background: #178D99;
}

/*-------------------internship--------------------------*/
#internship{
	background: #F9F9F9;
	--i_main_color: var(--i_sub_color);
}
#internship h4{
	margin-top: 60px;
}
#internship .example.inner .flex{
	gap: 20px 3%;
	margin-top: 20px;
}
#internship .example.inner .flex figure{
	width: 47.5%;
	height: 3 / 4;
	border-radius: 20px;
	overflow: hidden;
}
#internship .example.inner .flex figure img{
	height: 100%;
	object-fit: cover;
}
#internship .example.inner{
	padding-bottom: 40px;
	border-bottom: 1px solid var(--border);
	margin-bottom: 25px;
}

#internship .link{
	max-width: 820px;
	gap: 20px 2%;
	margin-top: 25px;
}
#internship .link .inner{
	width: 31%;
}
#internship .link .inner figure,
#internship .link .inner div{
	text-align: center;
}
#internship .link .inner figure.qr{
	margin-top: 15px;
}
#internship .link .inner.insta figure.qr{
	margin-top: 28px;
}

#internship .link .inner.insta div img{
	vertical-align: middle;
	margin-right: 10px;
}
#internship .link .inner.insta div{
	padding: 10px;
}
#internship h6{
	margin-top: 30px;
}
#internship .example.inner .flex.entry{
	margin-top: 10px;
}
@media screen and (max-width: 656px){
	#internship .link .inner.insta figure.qr {
	  margin-top: 0px;
	}
}
@media screen and (max-width: 600px){
	#internship .example.inner .flex figure{
		width: 100%;
	}
}
@media screen and (max-width: 480px){
	#internship .link .inner figure.qr{
		display: none;
	}
	#internship .link{
		gap: 20px 3%;
		justify-content: center;
	}
	#internship .link .inner{
		width: 47.5%;
	}
	#internship .link .inner.insta{
		width: 100%;
	}
}
/*-----------------career----------------------------*/
#career {
	padding-top: calc(var(--spacer)*14);
}
#career .btn{
	text-align: left;
}
#career #career_step{
	margin-top: 60px;
}
@media screen and (max-width: 768px){
	#career {
		padding-top: calc(var(--spacer)*10);
	}

}
@media screen and (max-width: 480px){
	#career {
		padding-top: calc(var(--spacer)*6.5);
	}
	#career .btn{
		text-align: center;
	}
}
/*--------------data-------------------------------*/
#data .flex{
	gap: 50px 0;
	max-width: 1100px;
	margin: 0 auto 60px;
}
#data .flex figure{
	width: 50%;
}
#data dl dt{
	font-weight: 600;
	font-size: calc(var(--font-size-base)*1.25);
	margin-bottom: 10px;
}
#data dl dd{
	padding-bottom: 20px;
	border-bottom: 1px solid var(--border);
}
#data dl + dl{
	padding-top: 20px;
}

@media screen and (max-width: 650px){
	#data .flex figure{
		width: 100%;
		text-align: center;
	}
	#data .flex figure img{
		max-width: 470px;
		width: 100%;
	}
}


/*----------------#faq-----------------------------*/
#faq .outer{
	background: #fff;
	border-radius: 20px;
	padding: 30px;
}
#faq .outer + h4{
	margin-top: 60px;
}
#faq dl{
	border-bottom: 1px solid var(--border);
}
#faq dt,
#faq dd{
	padding: 25px 20px;
}
#faq dt,
#faq dd div{
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	flex-wrap: nowrap;
	position: relative;
}
#faq dt{
	cursor: pointer;
}
#faq dt p:first-child,
#faq dd p:first-child{
	background: var(--i_main_color);
	width: 48px;
	height: 48px;
	color: #fff;
	font-size: 2.3rem;
	line-height: 46px;
	text-align: center;
	border-radius: 50%;
	letter-spacing: 0;
	border: 1px solid var(--i_main_color);
	box-sizing: border-box;
}
#faq dt p:last-child{
	font-weight: 600;
	transition: color .3s ease-in-out;
	padding-right: 60px;
}
#faq dt:hover p:last-child{
	color:var(--i_main_color);
}

#faq dt p:last-child,
#faq dd p:last-child{
	margin-top: 0.5em;
	padding-left: 25px;
	flex: 1;
}
#faq dt::before{
	display: block;
	content: "";
	width: 1.8em;
	aspect-ratio: 1;
	position: absolute;
	top: 50%;
	right: 30px;
	transform: translateY(-50%);
	border: 1px solid var(--i_txt_color);
	background: #fff;
	border-radius: 50%;
	pointer-events: none;
}
#faq dt::after{
	display: block;
	content: "";
	width: 0.5em;
	aspect-ratio: 1;
	position: absolute;
	top: calc(50% - 0.4em);
	right: calc(40px + 0.1em);
	border-top: 1px solid var(--i_txt_color);
	border-right: 1px solid var(--i_txt_color);
	transform: rotate(135deg);
	pointer-events: none;
	transition: .3s ease-in-out;
}
#faq dt.active::after{
	transform: rotate(315deg) translateX(-0.15em) translateY(0.25em);
	transform-origin: center;
}
#faq dd{
	background: #F0F0F0;
	display: none;
}

#faq dd p:first-child{
	background: #fff;
	color: var(--i_main_color);
}
@media screen and (max-width: 480px){
	#faq .outer{
		padding: 20px;
	}
	#faq dt p:last-child{
		padding-right: 30px;
	}
	#faq dt::before{
		right: 10px;
	}
	#faq dt::after{
		right: calc(19px + 0.1em);
	}
	#faq dt p:first-child,
	#faq dd p:first-child{
		width: 40px;
		height: 40px;
		font-size: 1.9rem;
		line-height: 40px;
	}
	#faq dt p:last-child,
	#faq dd p:last-child{
		padding-left: 15px;
		line-height: 1.7;
	}
	#faq .outer + h4{
		margin-top: 45px;
	}
}

/*-----------------contant----------------------------*/
#contant{
	padding-top: calc(var(--spacer)*14);
}
@media screen and (max-width: 768px){
	#contant{
		padding-top: calc(var(--spacer)*10);
	}
}
@media screen and (max-width: 480px){
	#contant{
		padding-top: calc(var(--spacer)*6.5);
	}
	
}

/*---------------------------------------------*/
/*------------------lineanime------------------*/
/*---------------------------------------------*/
#entrysection .lineanime {
  width: 95%;
  max-width: 1700px;
  height: 50%;
  top: -50px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}
#entrysection .lineanime .right{
	width: 20%;
	position: absolute;
	right: 0;
	top: 0;
}
#entrysection .lineanime .right .line.blue{
	top: 0;
	right: 50px;
}
#entrysection .lineanime .right .line.blue.short > div{
	height: 150px;
}
#entrysection .lineanime .right .line.lightblue{
	top: 0;
	right: 135px;
}
#entrysection .lineanime .right .round.m2{
	top: 155px;
	right: 135px;
}

#entrysection .lineanime .left{
	width: 20%;
	height: 100%;
	position: relative;
}
#entrysection .lineanime .left .round.b{
	left: 100px;
	top: 25px;
}
#entrysection .lineanime .left .round.b .ani-round{
	animation-delay: 0.5s;
}
#entrysection .lineanime .left .round.m{
	left: 230px;
	top: 100px;
}
#entrysection .lineanime .left .round.m .ani-round{
	animation-delay: 0.5s;
}
#entrysection .lineanime .left .round.s:nth-of-type(3){
	top: 90px;
	left: 0;
}
#entrysection .lineanime .left .round.s:nth-of-type(3) .ani-round{
	animation-delay: 0.7s;
}
#entrysection .lineanime .left .round.m2{
	left: 150px;
	top: 190px;
}
#entrysection .lineanime .left .round.ms .ani-round{
	animation-delay: 0.75s;
}
#entrysection .lineanime .left .round.b:nth-of-type(5) > div{
	width: 30px;
	height: 30px;
}
#entrysection .lineanime .left .round.b:nth-of-type(5) > div.ani-round{
	animation-delay:0.8s;
}
#entrysection .lineanime .left .round.b:nth-of-type(5){
	left: 30px;
	top: 190px;
}
#entrysection .lineanime .left .round.b:nth-of-type(5) > div.ani-round{
	animation-delay: 0.7s;
}

#entrysection .lineanime .left .round.ss{
	top: 270px;
	left: 77px;
}
/*---------------------------------------------*/
main section{
	position: relative;
}
main section .wrapper{
	position: relative;
	z-index: 3;
}
main .lineanime {
  width: 95%;
  max-width: 1700px;
  height: 50%;
  top: -50px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}
main .lineanime .right{
	width: 20%;
	position: absolute;
	right: 0;
	top: 0;
}
main .lineanime .right .line.blue{
	top: 0;
	right: 50px;
}
main .lineanime .right .line.blue.short > div{
	height: 150px;
}
main .lineanime .right .line.lightblue{
	top: 0;
	right: 135px;
}
main .lineanime .right .round.s{
	top: 0;
	right: 37px;
}
main .lineanime .right .round.s .ani-round{
	animation-delay: 0.65s;
}
main .lineanime .right .round.ss{
	top: -21px;
	right: 18px;
}
main .lineanime .right .round.ss .ani-round{
	animation-delay: 0.5s;
}

main .lineanime .left{
	width: 100%;
	height: 55%;
	margin-top: 55%;
	position: relative;
}
main .lineanime .left .line.blue{
	top: 0;
	left: 30px;
}
main .lineanime .left .line.lightblue{
	top: 106px;
	left: 3px;
}
main .lineanime .left .round.m2:nth-of-type(3){
	left: 90px;
	top: 200px;
}
main .lineanime .left .round.m2:nth-of-type(3) > div.ani-round{
	animation-delay: 1.5s;
}
main .lineanime .left .round.b > div{
	width: 35px;
	height: 35px;
}
main .lineanime .left .round.b{
	right: 50px;
	bottom: -53px;
}
main .lineanime .left .round.m2:nth-of-type(4){
	right: 0;
	bottom: 0;
}
@media screen and (max-width: 900px){
	main .lineanime .left{
		display: none;
	}
	main .lineanime .right{
		top: 55px;
	}
}
@media screen and (max-width: 600px){
	#lv_outer .lineanime .right{
		margin-top: -90px;
		margin-bottom: 90px;
	}
}

body{
	overflow-x: hidden;
}