@charset "utf-8";

/* -----------------------------
	com
-------------------------------- */

.copy {
    /*color: var(--blue);*/
	font-size: 3.0rem;
	font-weight: bold;
	line-height: 1.5;
}

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

	.copy {
		font-size: 2.5rem;
	}
	
}


/* -----------------------------
	mv-area
-------------------------------- */

.recruit-top .mv-area {
	padding: 160px 0 190px;
	background-repeat: no-repeat;
	background-image:  url("../img/circle-01-orange.svg") , url("../img/circle-01-pink.svg") , url("../img/square-03-yellowgeen.svg");
	background-position: left -120px top 390px , right -140px top 330px , right -170px top 775px ;
	background-size: 270px auto , 270px auto , 370px auto;
}

.recruit-top .mv-area .inner {
	padding: 100px 0 0;
	display: flex;
	align-items: flex-start;
	gap:0 50px;
}

.recruit-top .mv-area .title {
	color: var(--white);
	border-radius: 5px;
	background: var(--blue) url("../img/bg-line.png") repeat center / auto 200px;
	padding: 20px;
	display: inline-block;
}

.recruit-top .mv-area .title .en {
	font-size: 2.0rem;
}

.recruit-top .mv-area .title .jp {
	font-size: 1.6rem;
}

.recruit-top .mv-area .box {
	flex: 1;
	margin: -10px 0 0;
}

.recruit-top .mv-area .box .copy {
	font-size: 4.0rem;
	line-height: 1.4;
}

.recruit-top .mv-area .box .copy span {
	color: var(--blue);
}

.recruit-top .mv-area .box .txt {
	line-height: 2.5;
	padding: 10px 0 0;
}

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

	.recruit-top .mv-area {
		padding: 95px 0 80px;
		background-position: left -50px top 230px , right -60px top 300px , right -80px top 660px ;
		background-size: 100px auto , 100px auto , 150px auto;
	}

	.recruit-top .mv-area .inner {
		padding: 50px 20px 0;
		display: block;
	}

	.recruit-top .mv-area .title {
		padding: 10px;
		display: inline-block;
	}

	.recruit-top .mv-area .title .en {
		font-size: 1.6rem;
	}

	.recruit-top .mv-area .title .jp {
		font-size: 1.2rem;
	}

	.recruit-top .mv-area .box {
		margin: 20px 0 0;
	}

	.recruit-top .mv-area .box .copy {
		font-size: 2.6rem;
	}

	.recruit-top .mv-area .box .txt {
		line-height: 2.0;
	}
	
}


/*-------------------------------- */

.recruit-top .mv-area .slider-img {
	display: block;
	background: url("../img/recruit-top-mv.png") repeat-x 0 0;
	width:100%;
	background-size: cover;
	height: 380px;
	-moz-animation: loop 60s linear infinite reverse;
	animation: loop 60s linear infinite reverse;
	left: 0;
	top: 0;
}

@media screen and (max-width: 768px){
	
	.recruit-top .mv-area .slider-img {
		height: 190px;
		-moz-animation: loopsp 60s linear infinite reverse;
		animation: loopsp 60s linear infinite reverse;
	}

}

@keyframes loop {

	0% {
		background-position: 0 0;
		}

	100% {
		background-position: -3960px 0;
		}
}

@keyframes loopsp {

	0% {
		background-position: 0 0;
		}

	100% {
		background-position: -1980px 0;
		}
}

/* -----------------------------
	message-area / charm-area
-------------------------------- */

.recruit-top .bg-01 {
	background-color: var(--blue);
	background-repeat: repeat-x , no-repeat , no-repeat , no-repeat , no-repeat;
	background-size: auto 11px, 270px auto, 370px auto , 370px auto , 270px auto;
	background-position: center top , left -100px top 300px , right -200px bottom 100px , right -100px top 700px , left -150px top 1200px ;
	background-image:  url("../img/wave-02.svg") , url("../img/circle-01-white.svg") , url("../img/square-03-white.svg") , url("../img/square-03-white.svg") , url("../img/circle-02-white.svg");
	padding: 610px 0 100px;
	position: relative;
	border-radius: 0 0 50px 50px;
}

.recruit-top .message-area {
	position: absolute;
	top: -130px;
	left: 0;
	right: 0;
	margin: auto;
}

.recruit-top .message-area .box {
	margin: 0 calc(50% - 50vw) 0 0;
    max-width: 100vw;
    padding: 100px 0 100px 100px;
    min-width: 1200px;
	background: var(--beige02);
	border-radius: 20px 0 0 20px;
}

.recruit-top .message-area .box .name img {
	width: 100px;
}

.recruit-top .message-area .box .copy {
	padding: 30px 0 0;
	color: var(--black);
}

.recruit-top .message-area .box .txt {
	width: 1000px;
	padding: 10px 0 0;
	line-height: 1.875;
}

.recruit-top .message-area .box .name {
	padding: 15px 0 0;
}

.recruit-top .charm-area {
	padding: 0 0 0;
}

.recruit-top .charm-area .ttl-l .en ,
.recruit-top .charm-area .ttl-l .jp {
	color: var(--white);
}

.recruit-top .charm-area .charm-box {
	background: var(--white);
	border-radius: 20px;
	padding: 0 670px 0 50px;
	position: relative;
	margin: 70px 0 0;
	display: flex;
	align-items: center;
	min-height: 400px;
}

.recruit-top .charm-area .charm-box.charm-right {
	padding: 0 50px 0 670px;
	flex-direction: row-reverse;
}

.recruit-top .charm-area .charm-box .copy {
	line-height: 1.2;
	padding: 15px 0;
}

.recruit-top .charm-area .charm-box.charm-01 .copy {
	color: var(--pink);
}

.recruit-top .charm-area .charm-box.charm-02 .copy {
	color: var(--purple);
}

.recruit-top .charm-area .charm-box.charm-03 .copy {
	color: var(--green);
}

.recruit-top .charm-area .charm-box .txt {
	line-height: 1.8;
}

.recruit-top .charm-area .charm-box .image {
	position: absolute;
	right: 30px;
	top: -30px;
}

.recruit-top .charm-area .charm-box .image img {
	border-radius: 20px;
}

.recruit-top .charm-area .charm-box.charm-right .image {
	right: auto;
	left: 30px;
}

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

	.recruit-top .bg-01 {
		padding: 610px 0 50px 0;
		position: relative;
		background-size: auto 11px, 100px auto, 150px auto , 150px auto , 100px auto;
		background-position: center top , left -60px top 300px , right -60px bottom 100px , right -60px top 700px , left -60px top 1200px ;
		border-radius: 0 0 30px 30px;
	}

	.recruit-top .message-area {
		top: -50px;
		left: 20px;
	}

	.recruit-top .message-area .box {
		margin: 0 auto;
		max-width: 100%;
		padding: 50px 20px 40px;
		min-width: 100%;
	}

	.recruit-top .message-area .box .copy {
		padding: 20px 0 0;
	}

	.recruit-top .message-area .box .txt {
		width: 100%;
		line-height: 1.7;
	}

	.recruit-top .message-area .box .name {
		padding: 20px 0 0;
	}

	.recruit-top .charm-area {
		padding: 20px 20px 0;
	}

	.recruit-top .charm-area .charm-box {
		padding: 20px 20px 30px;
		margin: 30px 0 0;
		display: block;
		min-height: auto;
	}

	.recruit-top .charm-area .charm-box.charm-right {
		padding: 20px 20px 30px;
	}

	.recruit-top .charm-area .charm-box .no {
	}

	.recruit-top .charm-area .charm-box .image {
		position: static;
		padding: 0 0 20px;
	}

	.recruit-top .charm-area .charm-box .image img {
		width: 100%;
	}

	.recruit-top .charm-area .charm-box.charm-right .image {
		right: auto;
		left: auto;
	}

}

/* -----------------------------
	link-area 
-------------------------------- */

.recruit-top .link-area {
	padding: 100px 0;
}

.recruit-top .link-area ul {
	display: flex;
	justify-content: space-between;
	gap:0 40px;
}

.recruit-top .link-area ul li {
	border-radius: 10px;
	padding: 5px;
	width: calc(( 100% - 40px )/2);
}

.recruit-top .link-area ul li.yellowgreen {
	background: var(--gradation-yellowgreen);
}

.recruit-top .link-area ul li.orange {
	background: var(--gradation-orange);
}

.recruit-top .link-area ul li a {
	border-radius: 5px;
	background: var(--white);
	display: flex;
	align-items: center;
	width: 100%;
	gap:0 30px;
	padding: 20px;
	position: relative;
}

.recruit-top .link-area ul li a .image img {
	border-radius: 20px;
}

.recruit-top .link-area ul li a .ttl-m {
	padding: 0 0 5px;
}

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

	.recruit-top .link-area {
		padding: 50px 20px 30px;
	}

	.recruit-top .link-area ul {
		display: block;
	}

	.recruit-top .link-area ul li {
		width: 100%;
		margin: 0 0 20px;
	}

	.recruit-top .link-area ul li a {
		background-position: right 10px bottom 10px;
		gap:0 15px;
		padding: 10px;
	}

	.recruit-top .link-area ul li a .image img {
		border-radius: 10px;
		height: 75px;
		width: 75px;
		object-fit: cover;
	}
	
	.recruit-top .link-area ul li a .ttl-l .jp {
		font-size: 1.4rem;
	}
	
	.recruit-top .link-area ul li a .ttl-l .en {
		font-size: 2.0rem;
	}
	
	.recruit-top .link-area ul li a .txt {
		display: none;
	}
	
}

/* -----------------------------
	people-area / recuitment-area
-------------------------------- */

.recruit-top .bg-02 {
	background-color: var(--beige) ;
	background-image: url("../img/wave-02.svg") , url("../img/wave-01.svg");
	background-repeat: repeat-x ;
	background-size: auto 11px;
	background-position: center top , center bottom;
	padding: 100px 0;
}

.recruit-top .people-area .ttl-l {
	text-align: center;
}

.recruit-top .people-area ul {
	display: flex;
	justify-content: space-between;
	gap:0 20px;
	padding: 30px 0 100px;
}

.recruit-top .people-area ul li {
	background: var(--white);
	border-radius: 5px;
	text-align: center;
	width: calc((100% - 80px)/5);
	position: relative;
	background-position: center top 40px;
	background-repeat: no-repeat;
	background-size: 130px auto;
	padding: 210px 0 40px;
}

.recruit-top .people-area ul li.p-01 {
	background-image: url("../img/bg-recruit-top-people-icon01.png");
	animation-delay: 0.1s;
}

.recruit-top .people-area ul li.p-02 {
	background-image: url("../img/bg-recruit-top-people-icon02.png");
	animation-delay: 0.2s;
}

.recruit-top .people-area ul li.p-03 {
	background-image: url("../img/bg-recruit-top-people-icon03.png");
	animation-delay: 0.3s;
}

.recruit-top .people-area ul li.p-04 {
	background-image: url("../img/bg-recruit-top-people-icon04.png");
	padding: 230px 0 30px;
	animation-delay: 0.4s;
}

.recruit-top .people-area ul li.p-05 {
	background-image: url("../img/bg-recruit-top-people-icon05.png");
	padding: 230px 0 30px;
	animation-delay: 0.5s;
}

.recruit-top .people-area ul li .no {
	font-family: var(--basefont-en);
	font-weight: bold;
	font-size: 2.0rem;
	position: absolute;
	left: 20px;
	top: -15px;
}

.recruit-top .people-area ul li.p-01 .no {
	color: var(--pink);
}

.recruit-top .people-area ul li.p-02 .no {
	color: var(--yellow);
}

.recruit-top .people-area ul li.p-03 .no {
	color: var(--green);
}

.recruit-top .people-area ul li.p-04 .no {
	color: var(--purple);
}

.recruit-top .people-area ul li.p-05 .no {
	color: var(--yellowgreen);
}

.recruit-top .people-area ul li .txt {
	font-weight: bold;
	font-size: 1.9rem;
}

.recruit-top .recuitment-area {
	padding: 0 0 0;
	border-radius: 20px;
}

.recruit-top .recuitment-area .ttl-l {
	text-align: center;
}

.recruit-top .recuitment-area ul {
	background: var(--beige04);
	border-radius: 20px;
	margin: 30px 0 0;
}

.recruit-top .recuitment-area ul li {
	padding: 50px;
	border-bottom: var(--beige) solid 1px;
	display: flex;
	align-items: center;
	gap:0 30px;
}

.recruit-top .recuitment-area ul li div {
	flex: 1;
}

.recruit-top .recuitment-area ul li h4 {
	color: var(--beige05);
	font-size: 2.6rem;
	font-weight: bold;
	padding: 0 0 5px;
	line-height: 1.3;
}

.recruit-top .recuitment-area ul li .btn-flex {
	display: flex;
	gap:0 10px;
}

.recruit-top .recuitment-area ul li .link-btn {
	margin: 10px 0 0;
}

.recruit-top .recuitment-area ul li .list {
	background: var(--white);
	padding: 20px;
	width: 600px;
	border-radius: 10px;
	min-height: 250px;
}

.recruit-top .recuitment-area ul li .list dt {
    font-weight: bold;
    color: var(--beige05);
    position: relative;
    padding: 0 0 5px 15px;
    border-bottom: var(--beige05) solid 1px;
    margin: 0 0 10px;
}

.recruit-top .recuitment-area ul li .list dt::before {
    content: "";
    width: 10px;
    height: 10px;
    background: var(--beige05);
    position: absolute;
    left: 0;
    top: 2px;
}

.recruit-top .recuitment-area ul li .list dd {
	line-height: 1.5;
	padding: 5px 10px;
	background: var(--orange03);
	margin: 2px 0 0;
	border-radius: 5px;
}

.recruit-top .recuitment-area ul li .conditions {
	display: flex;
	gap:0 5px;
	padding: 0 0 10px;
}

.recruit-top .recuitment-area ul li .conditions dt {
	font-weight: bold;
	color: var(--white);
	background: var(--beige05);
	display: inline-block;
	padding: 0 10px;
	line-height: 30px;
	height: 30px;
}

.recruit-top .recuitment-area ul li .conditions dd {
	color: var(--beige05);
	border: var(--beige05) solid 1px;;
	display: inline-block;
	font-weight: bold;
	padding: 0 10px;
	line-height: 30px;
	height: 30px;
}

.recruit-top .movie-area {
	margin: 50px 0 0;
	background: var(--white);
	border-radius: 20px;
	display: flex;
	justify-content: space-between;
	flex-direction: row-reverse;
	align-items: center;
	padding: 50px;
}

.recruit-top .movie-area iframe {
	width: 560px;
	height: 315px;
}

.recruit-top .movie-area .txt {
	padding: 20px 0 0;
	font-size: 1.8rem;
}

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

	.recruit-top .bg-02 {
		padding: 50px 20px;
	}

	.recruit-top .people-area ul {
		display: block;
		padding: 0 0 50px;
	}

	.recruit-top .people-area ul li {
		width: 100%;
		position: relative;
		background-position: left 20px center;
		background-repeat: no-repeat;
		background-size: 60px auto;
		padding: 20px 20px 20px 100px;
		text-align: left;
		margin: 20px 0 0;
		min-height: 100px;
		display: flex;
		align-items: center;
	}

	.recruit-top .people-area ul li.p-04 {
		padding: 20px 0 20px 100px;
	}

	.recruit-top .people-area ul li.p-05 {
		padding: 20px 0 20px 100px;
	}

	.recruit-top .people-area ul li .no {
		font-size: 1.6rem;
		left: 10px;
		top: -15px;
	}

	.recruit-top .people-area ul li .txt {
		font-size: 1.7rem;
	}

	.recruit-top .recuitment-area {
		border-radius: 10px;
	}

	.recruit-top .recuitment-area ul {
		margin: 15px 0 0;
	}

	.recruit-top .recuitment-area ul li {
		padding: 30px 20px;
		display: block;
	}

	.recruit-top .recuitment-area ul li h4 {
		font-size: 2.2rem;
		padding: 0 0 5px;
	}

	.recruit-top .recuitment-area ul li .btn-flex {
		gap:0 5px;
	}

	.recruit-top .recuitment-area ul li .btn-flex .link-btn {
		font-size: 1.4rem;
	}

	.recruit-top .recuitment-area ul li .btn-flex .link-btn a {
		padding: 0 0 0 15px;
	}

	.recruit-top .recuitment-area ul li .btn-flex .link-btn a::before {
		right: 13px;
		font-size: 1.3rem;
	}

	.recruit-top .recuitment-area ul li .btn-flex .link-btn a::after {
		width: 20px;
		height: 20px;
	}

	.recruit-top .recuitment-area ul li .list {
		width: 100%;
		min-height: auto;
		margin: 20px 0 0;
	}
	
	.recruit-top .recuitment-area ul li .conditions {
		flex-wrap: wrap;
		gap:0 3px;
	}

	.recruit-top .recuitment-area ul li .conditions dt {
		font-size: 1.4rem;
		padding: 0 5px;
		line-height: 26px;
		height: 26px;
	}

	.recruit-top .recuitment-area ul li .conditions dd {
		font-size: 1.4rem;
		padding: 0 5px;
		line-height: 26px;
		height: 26px;
	}

	.recruit-top .movie-area {
		margin: 30px 0 0;
		display: block;
		padding: 20px;
	}

	.recruit-top .movie-area iframe {
		width: 100%;
		height: auto;
		min-height: 200px;
	}

	.recruit-top .movie-area .ttl-l {
		padding: 20px 0 0;
	}

	.recruit-top .movie-area .txt {
		padding: 10px 0 0;
		font-size: 1.6rem;
	}

}

/* -----------------------------
	recuitment-area
-------------------------------- */

.recruit-top .recomend-area {
	padding: 100px 0;
	background-image: url("../img/circle-01-purple.svg") , url("../img/square-01-pink.svg");
	background-position: right -200px top -100px , left -30px bottom 100px;
	background-repeat: no-repeat;
	background-size: 270px auto , 150px auto;
}

.recruit-top .recomend-area .ttl-l {
	text-align: center;
	padding: 0 0 40px;
}

.recruit-top .recomend-area ul {
	display: flex;
	justify-content: space-between;
	border-left: var(--green02) solid 1px;
}

.recruit-top .recomend-area ul li {
	border-right: var(--green02) solid 1px;
	padding: 20px;
	width: calc((100% - 5px ) / 4);
	position: relative;
}

.recruit-top .recomend-area ul li .image img {
	width: 100%;
	border-radius: 20px;
}

.recruit-top .recomend-area ul li .copy {
	padding: 30px 0 10px;
	text-align: center;
	font-size: 2.2rem;
	line-height: 1.3;
}

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

	.recruit-top .recomend-area {
		padding: 50px 20px;
		background-position: right -60px top -50px , left -30px bottom -10px;
		background-repeat: no-repeat;
		background-size: 100px auto , 70px auto;
	}

	.recruit-top .recomend-area .ttl-l {
		padding: 0;
	}

	.recruit-top .recomend-area ul {
		display: block;
		border-top: var(--grayblue) solid 1px;
		border-left: none;
	}

	.recruit-top .recomend-area ul li {
		text-align: center;
		border-bottom: var(--grayblue) solid 1px;
		border-right: none;
		padding: 20px 0;
		width: 100%;
		position: relative;
	}

	.recruit-top .recomend-area ul li .image img {
		width: 100%;
		border-radius: 20px;
	}

	.recruit-top .recomend-area ul li .copy {
		padding: 10px 0 5px;
		font-size: 2.4rem;
	}

	.recruit-top .recomend-area ul li .txt {
		text-align: left;
	}

}

/* -----------------------------
	mv-area
-------------------------------- */

.recruit-aboutus .mv-area {
	background: url("../img/recruit-aboutus-map-pc.jpg") no-repeat center top / auto;
	padding: 180px 0;
}

.recruit-aboutus .mv-area .copy {
	font-size: 4.0rem;
	line-height: 1.4;
}

.recruit-aboutus .mv-area .txt {
	line-height: 2.8;
	width: 620px;
	padding: 20px 0 0;
}

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

	.recruit-aboutus .mv-area {
		background: url("../img/recruit-aboutus-map-sp.png") no-repeat center top / 90% auto;
		padding: 260px 20px 50px;
	}

	.recruit-aboutus .mv-area .copy {
		font-size: 2.2rem;
		line-height: 1.4;
	}

	.recruit-aboutus .mv-area .txt {
		line-height: 1.8;
		width: 100%;
		padding: 10px 0 0;
	}

}

/* -----------------------------
	feature-area
-------------------------------- */

.recruit-aboutus .feature-area {
	background: #D8E8F0 url("../img/wave-02.svg") repeat-x center top / auto 11px;
	padding: 100px 0 0;
}

.recruit-aboutus .feature-area .ttl-l {
	padding: 0 0 0 50px;
}

.recruit-aboutus .feature-area .com {
	background: var(--white);
	padding: 30px 30px 30px 50px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-direction: row-reverse;
	gap:0 60px;
	margin: 55px 0 0;
	border-radius: 20px;
	position: relative;
}

.recruit-aboutus .feature-area .com .image img {
	border-radius: 20px;
}

.recruit-aboutus .feature-area .com .box h4 {
    font-size: 2.6rem;
    font-weight: bold;
    color: var(--white);
    padding: 15px;
    display: inline-block;
    position: relative;
    text-align: center;
	margin: 0 0 20px;
	border-radius: 5px;
}

.recruit-aboutus .feature-area .com.feature-01 .box h4 {
	background: var(--purple)
}

.recruit-aboutus .feature-area .com.feature-02 .box h4 {
	background: var(--blue)
}

.recruit-aboutus .feature-area .com.feature-03 .box h4 {
	background: var(--orange)
}

.recruit-aboutus .feature-area .com.feature-04 .box h4 {
	background: var(--yellow)
}

.recruit-aboutus .feature-area .com .box .copy {
	padding: 0 0 10px;
}

.recruit-aboutus .feature-area .com .box ul {
	padding: 10px 0 0;
}

.recruit-aboutus .feature-area .com .box ul li {
	margin: 5px 0 0;
    line-height: 1.5;
    padding: 0 0 0 10px;
    position: relative;
}

.recruit-aboutus .feature-area .com .box ul li::before {
	position: absolute;
	content: "・";
    left: 0;
    font-size: 1.0rem;
    top: 5px;
    color: var(--blue);
}

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

	.recruit-aboutus .feature-area {
		padding: 50px 20px 50px;
	}

	.recruit-aboutus .feature-area .ttl-l {
		padding: 0 ;
	}

	.recruit-aboutus .feature-area .com {
		padding: 20px;
		display: block;
		margin: 20px 0 0;
		border-radius: 10px;
	}

	.recruit-aboutus .feature-area .com .image img {
		border-radius: 10px;
		width: 100%;
	}

	.recruit-aboutus .feature-area .com .box h4 {
		font-size: 2.0rem;
		margin: 20px 0 10px;
		padding: 5px 10px;
		text-align: left;
		line-height: 1.4;
	}

	.recruit-aboutus .feature-area .com .box .copy {
		padding: 0 0 0;
	}

	.recruit-aboutus .feature-area .com .box ul {
		padding: 0 0 0;
	}

}

/* -----------------------------
	vision-area
-------------------------------- */

.recruit-aboutus .vision-area {
	background-image: url("../img/wave-01.svg") , url("../img/recruit-aboutus-vision.jpg") ;
	background-position:center bottom , center top ;
	background-repeat: repeat-x , no-repeat;
	background-size: auto 11px , cover;
	padding: 100px 0 100px 100px;
}

.recruit-aboutus .vision-area .copy {
	padding: 60px 0 0;
}

.recruit-aboutus .vision-area .txt {
	line-height: 2.5;
	font-weight: bold;
	padding: 30px 0 0;
}

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

	.recruit-aboutus .vision-area {
		padding: 0 20px 50px;
	}

	.recruit-aboutus .vision-area .copy {
		padding: 20px 0 0;
	}

	.recruit-aboutus .vision-area .txt {
		line-height: 2.0;
		padding: 10px 0 0;
	}

}

/* -----------------------------
	data-area
-------------------------------- */

.recruit-aboutus .data-area {
	padding: 100px 0;
}

.recruit-aboutus .data-area .ttl-l {
	text-align: center;
}

.recruit-aboutus .data-area ul {
	padding: 30px 0 0;
	display: flex;
	flex-wrap: wrap;
	gap:30px;
}

.recruit-aboutus .data-area ul li {
    border-radius: 10px;
    padding: 5px;
	width: calc((100% - 90px)/4);
}

.recruit-aboutus .data-area ul li.date-01 {
	background: var(--gradation-blue);
}

.recruit-aboutus .data-area ul li.date-02 {
	background: var(--gradation-pink);
}

.recruit-aboutus .data-area ul li.date-03 {
	background: var(--gradation-yellowgreen);
}

.recruit-aboutus .data-area ul li.date-04 {
	background: var(--gradation-yellow);
}

.recruit-aboutus .data-area ul li.date-05 {
	background: var(--gradation-orange);
}

.recruit-aboutus .data-area ul li.date-06 {
	background: var(--gradation-purple);
}

.recruit-aboutus .data-area ul li.date-07 {
	background: var(--gradation-green);
}

.recruit-aboutus .data-area ul li > div {
	height: 100%;
	border-radius: 5px;
    background: var(--white) ;
    width: 100%;
    gap: 0 30px;
    padding: 50px 0;
	text-align: center;
	border-radius: 5px;
	position: relative;
}

.recruit-aboutus .data-area ul li.date-07 > div {
    padding: 50px 20px 20px;
}

.recruit-aboutus .data-area ul li > div::before {
	content: "";
	width: 230px;
	height: 230px;
	background: var(--beige);
	border-radius: 115px;
	position: absolute;
	top: 100px;
	left: 0;
	right: 0;
	margin: 0 auto;
}

.recruit-aboutus .data-area ul li > div::after {
	content: "";
	width: 100px;
	height: 100px;
	background: var(--white);
	border-radius: 50px;
	position: absolute;
	top: 120px;
	left: 0;
	right: 0;
	margin: 0 auto;
}

.recruit-aboutus .data-area ul li.date-07 > div::after ,
.recruit-aboutus .data-area ul li.date-07 > div::before {
	display: none;
}

.recruit-aboutus .data-area ul li > div .title {
	font-size: 2.0rem;
	font-weight: bold;
}

.recruit-aboutus .data-area ul li > div .date {
	padding: 160px 0 40px;
	position: relative;
	z-index: 1;
	background-position: center top 60px;
	background-repeat: no-repeat;
	background-size: auto 80px;
}

.recruit-aboutus .data-area ul li.date-01 > div .date {
	background-image: url("../img/date-icon01.svg") ;
}

.recruit-aboutus .data-area ul li.date-02 > div .date {
	background-image: url("../img/date-icon02.svg") ;
}

.recruit-aboutus .data-area ul li.date-03 > div .date {
	background-image: url("../img/date-icon03.svg") ;
}

.recruit-aboutus .data-area ul li.date-04 > div .date {
	background-image: url("../img/date-icon04.svg") ;
}

.recruit-aboutus .data-area ul li.date-05 > div .date {
	background-image: url("../img/date-icon05.svg") ;
}

.recruit-aboutus .data-area ul li.date-06 > div .date {
	background-image: url("../img/date-icon06.svg") ;
}

.recruit-aboutus .data-area ul li.date-07 > div .date {
	padding:0;
}

.recruit-aboutus .data-area ul li > div .date em {
	font-size: 6.0rem;
	font-weight: bold;
	font-family: var(--basefont-en);
	line-height: 1;
	padding: 0 5px;
}

.recruit-aboutus .data-area ul li.date-07 > div .date em {
	font-size: 4.0rem;
}

.recruit-aboutus .data-area ul li.date-01 > div .date em {
	color: var(--blue);
}

.recruit-aboutus .data-area ul li.date-02 > div .date em {
	color: var(--pink);
}

.recruit-aboutus .data-area ul li.date-03 > div .date em {
	color: var(--yellowgreen);
}

.recruit-aboutus .data-area ul li.date-04 > div .date em {
	color: var(--yellow);
}

.recruit-aboutus .data-area ul li.date-05 > div .date em {
	color: var(--orange);
}

.recruit-aboutus .data-area ul li.date-06 > div .date em {
	color: var(--purple);
}

.recruit-aboutus .data-area ul li.date-07 > div .date em {
	color: var(--green);
	padding: 0 5px 0 0;
}

.recruit-aboutus .data-area ul li > div .date span {
	font-weight: bold;
	font-size: 2.0rem;
}

.recruit-aboutus .data-area ul li.date-07 .box {
	text-align: left;
	background: var(--beige);
	border-radius: 10px;
	margin: 5px 0 0;
	padding: 35px 0 35px 95px;
	position: relative;
}

.recruit-aboutus .data-area ul li.date-07 .box.men {
	margin: 15px 0 0;
}

.recruit-aboutus .data-area ul li .box::after {
	content: "";
	width: 100px;
	height: 100px;
	background: var(--white);
	border-radius: 50px;
	position: absolute;
	top: 20px;
	left: 25px;
}

.recruit-aboutus .data-area ul li .box::before {
	content: "";
	width: 26px;
	height: 80px;
	background-position: center top;
	background-repeat: no-repeat;
	background-size: auto 80px;
	position: absolute;
	z-index: 1;
	left: 57px;
}

.recruit-aboutus .data-area ul li.date-07 .box.woma::before {
	background-image: url("../img/date-icon07.svg");
}

.recruit-aboutus .data-area ul li.date-07 .box.men::before {
	background-image: url("../img/date-icon08.svg");
}

.recruit-aboutus .data-area ul li .box .en ,
.recruit-aboutus .data-area ul li .box .date {
	position: relative;
	z-index: 1;
}
/*
.recruit-aboutus .data-area ul li.coming {
	font-family: var(--basefont-en);
	font-size: 2.0rem;
	font-weight: 700;
	color: var(--gray);
	text-align: center;
}

*/
@media screen and (max-width: 768px){

	.recruit-aboutus .data-area {
		padding: 50px 20px;
	}

	.recruit-aboutus .data-area ul {
		padding: 10px 0 0;
		display: block;
	}

	.recruit-aboutus .data-area ul li {
		width:100%;
		margin: 10px 0 0;
	}

	.recruit-aboutus .data-area ul li > div {
		padding: 30px 20px 0 0;
		text-align: left;
		border-radius: 5px;
		position: relative;
		min-height: 125px;
	}

	.recruit-aboutus .data-area ul li.date-07 > div {
		padding: 20px;
		min-height: auto;
	}

	.recruit-aboutus .data-area ul li > div::before {
		width: 100px;
		height: 100px;
		top: 10px;
		left: 10px;
		right: auto;
		margin: auto;
	}

	.recruit-aboutus .data-area ul li > div::after {
		width: 50px;
		height: 50px;
		top: 20px;
		left: 35px;
		right: auto;
		margin: 0;
	}

	.recruit-aboutus .data-area ul li > div .title {
		font-size: 1.6rem;
		padding: 0 0 0 130px;
	}

	.recruit-aboutus .data-area ul li.date-07 > div .title {
		padding: 0;
		text-align: center;
	}

	.recruit-aboutus .data-area ul li > div .date {
		padding: 20px 0 0 125px;
		background-size: auto 60px;
		position: absolute;
		z-index: 1;
		left: 0;
		top: 30px;
	}

	.recruit-aboutus .data-area ul li.date-01 > div .date {
		background-image: url("../img/date-icon01.svg") ;
		background-position: left 25px top 10px;
	}

	.recruit-aboutus .data-area ul li.date-02 > div .date {
		background-image: url("../img/date-icon02.svg") ;
		background-position: left 35px top 0;
	}

	.recruit-aboutus .data-area ul li.date-03 > div .date {
		background-image: url("../img/date-icon03.svg") ;
		background-position: left 25px top 5px;
	}

	.recruit-aboutus .data-area ul li.date-04 > div .date {
		background-image: url("../img/date-icon04.svg") ;
		background-position: left 15px top 5px;
	}

	.recruit-aboutus .data-area ul li.date-05 > div .date {
		background-image: url("../img/date-icon05.svg") ;
		background-position: left 30px top 0;
	}

	.recruit-aboutus .data-area ul li.date-06 > div .date {
		background-image: url("../img/date-icon06.svg") ;
		background-position: left 30px top 0;
	}

	.recruit-aboutus .data-area ul li.date-07 > div .date {
		padding:0;
		position: static;
		top: 0;
	}

	.recruit-aboutus .data-area ul li.date-07 .box {
		padding: 10px 0 10px 80px;
	}

	.recruit-aboutus .data-area ul li .box::after {
		width: 60px;
		height: 60px;
		top: 10px;
		left: 15px;
	}

	.recruit-aboutus .data-area ul li .box::before {
		content: "";
		width: 20px;
		height: 50px;
		background-position: center top 10px;
		background-repeat: no-repeat;
		background-size: auto 50px;
		position: absolute;
		z-index: 1;
		left: 35px;
	}

}

/* -----------------------------
	mv-area
-------------------------------- */

.recruit-works .mv-area {
	padding: 100px 0 70px; 
}

.recruit-works .mv-area .inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-direction: row-reverse;
}

.recruit-works .mv-area .box .copy {
	font-size: 4.0rem;
}

.recruit-works .mv-area .box .txt {
	line-height: 2.875;
	padding: 20px 0 0;
}

.recruit-works .mv-area .image img {
	border-radius: 20px;
}

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

	.recruit-works .mv-area {
		padding: 50px 20px; 
	}

	.recruit-works .mv-area .inner {
		display: block;
	}

	.recruit-works .mv-area .box .copy {
		font-size: 2.6rem;
		line-height: 1.4;
		padding: 20px 0 0;
	}

	.recruit-works .mv-area .box .txt {
		line-height: 1.8;
		padding: 10px 0 0;
	}

	.recruit-works .mv-area .image img {
		width: 100%;
		border-radius: 10px;
	}


}

/* -----------------------------
	system-area
-------------------------------- */

.recruit-works .system-area {
	padding: 100px 0;
	background: var(--beige02) url("../img/wave-02.svg") repeat-x center top / auto 11px;
}

.recruit-works .system-area .ttl-l {
	text-align: center;
}

.recruit-works .system-area .inner > .copy {
	text-align: center;
	padding: 30px 0 10px;
}

.recruit-works .system-area .inner > .txt {
	text-align: center;
}

.recruit-works .system-area ul {
	padding: 30px 0 0;
	display: flex;
	justify-content: space-between;
	gap:0 15px;
}

.recruit-works .system-area ul li {
	background: var(--white);
	width: calc((100% - 30px)/3);
	padding: 20px;
	border-radius: 10px;
}

.recruit-works .system-area ul li .image img {
	width: 100%;
	border-radius: 20px;
}

.recruit-works .system-area ul li h4 {
	font-size: 2.3rem;
	font-weight: bold;
	padding: 30px 0 20px;
	text-align: center;
}

.recruit-works .system-area ul li:nth-child(1) h4 {
	background: url("../img/mark-line01.svg") no-repeat center bottom / auto 7px;
}

.recruit-works .system-area ul li:nth-child(2) h4 {
	background: url("../img/mark-line05.svg") no-repeat center bottom / auto 7px;
}

.recruit-works .system-area ul li:nth-child(3) h4 {
	background: url("../img/mark-line03.svg") no-repeat center bottom / auto 7px;
}

.recruit-works .system-area ul li p {
	padding: 10px 0 0;
}

.recruit-works .system-area ul li .box {
	padding: 20px 0 0;
	position: relative;
}

.recruit-works .system-area ul li .box dl {
	display: flex;
	flex-wrap: wrap;
}

.recruit-works .system-area ul li .box dt {
	font-weight: bold;
	color: var(--beige05);
	font-size: 1.4rem;
	line-height: 1.5;
	padding: 0 0 5px;
	width: 100%;
	display: block;
}

.recruit-works .system-area ul li .box dd {
	font-feature-settings: "palt";
	display: inline-block;
	font-size: 1.4rem;
	line-height: 1.5;
}

.recruit-works .system-area ul li .box dd:nth-child(2n) {
	width: 45%;
}

.recruit-works .system-area ul li .box .att {
	font-size: 1.4rem;
	line-height: 1.5;
	position: absolute;
	right: 0;
	bottom: 0;
}

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

	.recruit-works .system-area {
		padding: 50px 20px;
	}

	.recruit-works .system-area .inner > .copy {
		text-align: left;
		padding: 20px 0 10px;
	}
	
	.recruit-works .system-area .inner > .txt {
		text-align: left;
	}

	.recruit-works .system-area ul {
		padding: 10px 0 0;
		display: block;
	}

	.recruit-works .system-area ul li {
		width: 100%;
		margin: 10px 0 0;
	}

	.recruit-works .system-area ul li .image img {
		border-radius: 10px;
	}

	.recruit-works .system-area ul li h4 {
		font-size: 2.0rem;
		padding: 20px 0 15px;
	}

	.recruit-works .system-area ul li p {
		padding: 5px 0 0;
	}

	.recruit-works .system-area ul li .box {
		padding: 10px 0 0;
		position: static;
	}

	.recruit-works .system-area ul li .box dl {
		display: block;
	}

	.recruit-works .system-area ul li .box dd:nth-child(2n) {
		width: 100%;
	}

	.recruit-works .system-area ul li .box .att {
		font-size: 1.2rem;
		padding: 10px 0 0;
		position: static;
	}

}

/* -----------------------------
	reason-area
-------------------------------- */

.recruit-works .reason-area {
	background-color: var(--blue);
    background-repeat: repeat-x, no-repeat, no-repeat, no-repeat, no-repeat;
    background-size: auto 11px,
		150px auto,
		270px auto,
		270px auto,
		270px auto;
    background-position: center bottom ,
		left 20px top 200px,
		right -100px top 300px,
		left -100px top 700px,
		right -150px top 1000px;
    background-image: url(../img/wave-01.svg),
		url("../img/square-01-white.svg"),
		url(../img/circle-01-white.svg), 
		url(../img/circle-02-white.svg), 
		url(../img/square-02-white.svg);
	padding: 100px 0;
}

.recruit-works .reason-area .sub-copy {
	font-weight: bold;
	color: var(--white);
	border: var(--white) solid 2px;
	/*background: var(--blue);*/
	width: 300px;
	margin: 0 auto;
	line-height: 40px;
	text-align: center;
	border-radius: 30px;
}

.recruit-works .reason-area .inner > .copy {
	color: var(--white);
	font-weight: bold;
	font-size: 3.0rem;
	padding: 20px 0 0;
	text-align: center;
	font-family: var(--basefont-jp-gothic);
}

.recruit-works .reason-area section {
	position: relative;
	background: var(--white);
	border-radius: 20px;
	display: flex;
	align-items: center;
	gap:0 50px;
	padding: 50px;
	margin: 40px 0 0;
}

.recruit-works .reason-area section::before {
	color: var(--blue);
	font-size: 13.0rem;
	font-weight: bold;
	font-style: italic;
	font-family: var(--basefont-en);
	position: absolute;
	left: 10px;
	bottom: -20px;
	line-height: 1;
	opacity: 0.2;
}

.recruit-works .reason-area .box-01::before {
	content: "POINT 01";
}

.recruit-works .reason-area .box-02::before {
	content: "POINT 02";
}

.recruit-works .reason-area .box-03::before {
	content: "POINT 03";
}

.recruit-works .reason-area section .image img {
	width: 400px;
	border-radius: 20px;
}

.recruit-works .reason-area section div {
	position: relative;
	z-index: 1;
}

.recruit-works .reason-area section h3 {
	padding: 0 0 10px;
}

.recruit-works .reason-area section h3 span {
	font-size: 2.0rem;
	display: inline-block;
	color: var(--white);
	padding: 5px 10px;
	border-radius: 5px;
	margin: 0 0 5px;
}

.recruit-works .reason-area .box-01 h3 span {
	background: var(--yellow);
}

.recruit-works .reason-area .box-02 h3 span {
	background: var(--pink);
}

.recruit-works .reason-area .box-03 h3 span {
	background: var(--yellowgreen);
}

.recruit-works .reason-area section p {
	line-height: 2.2;
}

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

	.recruit-works .reason-area {
		padding: 50px 20px;
		background-size: auto 11px,
			70px auto,
			100px auto,
			150px auto,
			150px auto;
		background-position: center bottom ,
			left -10px top 200px,
			right -60px top 500px,
			left -80px top 1000px,
			right -20px top 1500px;
		background-image: url(../img/wave-01.svg),
			url("../img/square-01-white.svg"),
			url(../img/circle-01-white.svg), 
			url(../img/circle-02-white.svg), 
			url(../img/square-02-white.svg);
	}

	.recruit-works .reason-area .sub-copy {
		width: 280px;
		line-height: 26px;
		border-radius: 26px;
		font-size: 1.4rem;
	}

	.recruit-works .reason-area .inner > .copy {
		font-size: 2.6rem;
		padding: 10px 0 0;
	}

	.recruit-works .reason-area section {
		border-radius: 10px;
		display: block;
		padding: 20px;
		margin: 20px 0 0;
	}

	.recruit-works .reason-area section::before {
		font-size: 6.0rem;
		bottom: -10px;
	}

	.recruit-works .reason-area section .image img {
		width: 100%;
		border-radius: 10px;
	}

	.recruit-works .reason-area section h3 {
		padding: 20px 0 10px;
		line-height: 1.3;
	}

	.recruit-works .reason-area section h3 span {
		font-size: 1.8rem;
	}

	.recruit-works .reason-area section p {
		line-height: 1.8;
	}

}

/* -----------------------------
	benefits-area
-------------------------------- */

.recruit-works .benefits-area {
	padding: 100px 0;
    position: relative;
    max-width: 1600px;
    margin: 0 auto;
}

.recruit-works .benefits-area .image {
	width: 43.75%;
    height: 700px;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

.recruit-works .benefits-area .image img {
	width: 100%;
    height: 100%;
    object-fit: cover;
	border-radius: 20px;
}

.recruit-works .benefits-area .inner {
    min-height: 700px;
    display: flex;
    align-items: center;
    padding: 0 0 0 550px;
}

.recruit-works .benefits-area .inner .copy {
    padding: 20px 0 10px;
}

.recruit-works .benefits-area .inner h4 {
	font-size: 1.4rem;
	background: var(--blue03);
	font-weight: bold;
	color: var(--blue);
	padding: 7px 10px;
	border-radius: 15px;
}

.recruit-works .benefits-area .inner .txt {
	font-size: 1.4rem;
	padding: 5px 0 0;
}

.recruit-works .benefits-area .inner dl {
	border-top: var(--blue02) dashed 1px;
	display: flex;
	flex-wrap: wrap;
	padding: 0 0 15px;
	margin: 10px 0 0;
}

.recruit-works .benefits-area .inner dl dt {
	width: 170px;
	line-height: 1.2;
	padding: 5px 0;
	border-bottom: var(--blue02) dashed 1px;
	font-size: 1.4rem;
	font-weight: bold;
}

.recruit-works .benefits-area .inner dl dd {
	width: 480px;
	line-height: 1.2;
	padding: 5px 0;
	border-bottom: var(--blue02) dashed 1px;
	font-size: 1.4rem;
}


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

	.recruit-works .benefits-area {
		padding: 50px 20px;
		max-width: 100%;
		position: static;
	}

	.recruit-works .benefits-area .image {
		width: 100%;
		height: auto;
		position: static;
	}

	.recruit-works .benefits-area .image img {
		border-radius: 10px;
	}

	.recruit-works .benefits-area .inner {
		min-height: auto;
		display: block;
		padding: 20px 0 0;
	}

	.recruit-works .benefits-area .inner .copy {
		padding: 10px 0 10px;
	}

}

/* -----------------------------
	office-area
-------------------------------- */

.recruit-works .office-area .area-box {
	position: relative;
	padding: 180px 0 100px;
}

.recruit-works .office-area .area-box.tokyo-area .ttl-l {
	text-align: right;
}

.recruit-works .office-area .area-box::before {
	content: "";
	width: 93.75%;
	background: var(--gradation-pink);
	height: 500px;
	position: absolute;
	top: 0;
	z-index: -2;
}

.recruit-works .office-area .area-box.osaka-area::before {
	background: var(--gradation-green);
	left: 0;
	border-radius: 0 20px 20px 0;
}

.recruit-works .office-area .area-box.tokyo-area::before {
	right: 0;
	border-radius: 20px 0 0 20px;
}

.recruit-works .office-area .area-box.tokyo-area::after {
	content: "";
	width: 200px;
	background: url("../img/square-02-pink.svg") no-repeat center / 200px;
	height: 200px;
	position: absolute;
	top: -50px;
	left: 50px;
	z-index: -1;
}

.recruit-works .office-area .area-box.osaka-area::after {
	content: "";
	width: 270px;
	background: url("../img/circle-01-green.svg") no-repeat center / 270px;
	height: 270px;
	position: absolute;
	top: -50px;
	right: 50px;
	z-index: -1;
}

.recruit-works .office-area .area-box .inner {
	position: relative;
}

.recruit-works .office-area .area-box .inner::before {
	font-size: 15.0rem;
	font-weight: bold;
	font-style: italic;
	font-family: var(--basefont-en);
	position: absolute;
	line-height: 1;
	color: var(--white);
	top:-80px;
	z-index: -1;
}

.recruit-works .office-area .area-box.osaka-area .inner::before {
	content: "OSAKA";
	left: -50px;
}

.recruit-works .office-area .area-box.tokyo-area .inner::before {
	content: "TOKYO";
	right: -50px;
}

.recruit-works .office-area .area-box ul {
	display: flex;
	flex-wrap: wrap;
	gap:25px;
	padding: 40px 0 0;
}

.recruit-works .office-area .area-box ul li {
	width: calc((100% - 50px)/3);
}

.recruit-works .office-area .area-box ul li img {
	width: 100%;
	border-radius: 20px;
}

.recruit-works .office-area .coming-txt {
	font-size: 4.0rem;
	font-weight: bold;
	font-family: var(--basefont-en);
	padding: 50px 0 200px;
	color: var(--beige05);
}


@media screen and (max-width: 768px){
	
	.recruit-works .office-area .area-box {
		padding: 50px 0;
	}

/*
	.recruit-works .office-area .area-box.tokyo-area .ttl-l {
		text-align: left;
	}
*/

	.recruit-works .office-area .area-box::before {
		height: 300px;
		width: calc(100% - 40px);
	}

	.recruit-works .office-area .area-box.osaka-area::before {
		border-radius: 0 10px 10px 0;
	}

	.recruit-works .office-area .area-box.tokyo-area::before {
		border-radius: 10px 0 0 10px;
	}
	
.recruit-works .office-area .area-box.tokyo-area::after {
	width: 100px;
	background: url("../img/square-02-pink.svg") no-repeat center / 100px;
	height: 100px;
	top: -50px;
	left: -25px;
}

.recruit-works .office-area .area-box.osaka-area::after {
	width: 100px;
	background: url("../img/circle-01-green.svg") no-repeat center / 100px;
	height: 100px;
	top: -50px;
	right: -25px;
}

	.recruit-works .office-area .area-box .inner {
		padding: 0 20px;
	}

	.recruit-works .office-area .area-box .inner::before {
		font-size: 6.0rem;
		top: -20px;
	}

	.recruit-works .office-area .area-box.osaka-area .inner::before {
		left:10px;
	}

	.recruit-works .office-area .area-box.tokyo-area .inner::before {
		right: 10px;
/*
		left: -20px;
		right: auto;
*/
	}

	.recruit-works .office-area .area-box ul {
		gap:10px 10px;
		padding: 20px 0 0;
	}

	.recruit-works .office-area .area-box ul li {
		width: calc((100% - 10px)/2);
	}

	.recruit-works .office-area .area-box ul li img {
		border-radius: 10px;
	}

	.recruit-works .office-area .coming-txt {
		font-size: 2.0rem;
		padding: 30px 0 200px;
	}

}