@charset "UTF-8";

/* ページタイトル
--------------------------------*/
.topimg
{
	background-image: url(../img/recruit-topimg.webp);
	background-size: cover;
margin-bottom: 35px;
}

/* 見出し
--------------------------------*/
h3
{
	text-align: center;
	font-size: 2.5rem;
	font-weight: 400;
	padding-bottom: 3rem;
}
@media screen and (max-width: 1100px)
{
h3{
font-size: 2rem;
padding-bottom: 1rem;
}
}

/* アンカーボタン
--------------------------------*/
.anchor-btn{
display: flex;
justify-content: center;
margin-bottom: 70px;
}
.anchor-btn a{
display: flex;
justify-content: center;
align-items: center;
font-size: 1.5rem;
color: #fff;
padding:0.6rem 1.6rem;
border-radius: 9999px;
background: linear-gradient(90deg,#8ae1a7 0%, #81a5bc 100%);
margin:0 1rem;
}
.anchor-btn a img{
width: 8.74px;
height: 5px;
margin-left: 1rem;
}
@media screen and (max-width: 1100px){
.anchor-btn
	{
width: 85%;
margin:0 auto 30px;
flex-wrap: wrap;
justify-content: flex-start;
	}
.anchor-btn a{
margin:0 1.5rem 1.5rem 0;
font-size: 1.4rem;
}
}

/* 求める人材
--------------------------------*/
.human{
text-align: center;
}
.human p{
line-height: 2;
font-size: 1.6rem;
}
.human p.title{
font-size: 1.8rem;
font-weight: 400;
padding-bottom: 1.5rem;
}
.message-head{
position: relative;
margin-right: 10%;
	margin-bottom: 40px;
	display: flex;
	justify-content: space-between;
	background: linear-gradient(-90deg, #ddf6e6 0%, #dbe6ec 100%);
}
.message-head .left
{
	padding: 36px 0 26px 12%;
	font-size: 1.7rem;
	font-weight: 400;
line-height: 2;
	letter-spacing: 0.1em;
text-align: left;
width: 80%;
}
.txtarea{
font-weight: 300;
text-align: left;
padding:20px 0 0;
}
.txtarea p{
font-size: 1.4rem;
}
.name
{
padding-top: 0.5em;
	font-weight: 400;
font-size: 1.5rem;
}
.imgarea
{
position: absolute;
right: 0;
bottom: -20px;
width: 280px;
}
.message-body .btn-area
{
	display: flex;
	justify-content: center;
	margin: 7rem auto 0;
}

.message-body .btn-area a
{
display: block;
	width: 230px;
	height: 50px;
	line-height: 50px;
	background: linear-gradient(90deg, #81a2bd 0%, #8be2a7 100%);
	margin: 0 2rem;
	font-size: 1.6rem;
	font-weight: 400;
	color: #fff;
}
@media screen and (max-width: 1100px){
.human p
	{
		text-align: left;
line-height: 1.7;
font-size: 1.4rem;
	}
.human p.title{
font-size: 1.6rem;
text-align: center;
padding-bottom: 0.5em;
}
.message-head{
display: block;
margin-bottom: 90px;
}
.message-head .left{
padding:30px 7.5% 80px;
width: 100%;
line-height: 1.7;
}
.txtarea{
padding: 15px 0 0;
}
.txtarea p{
line-height: 1.6;
}
.name{
padding-top: 1em;}
.imgarea{
width: 150px;
right: -10%;
bottom: -25px;
}
.message-body{
padding-bottom: 0.5em;
font-size: 1.4rem;
}
.message-body .btn-area{
display: block;
margin:3rem auto 0;
}
.message-body .btn-area a{
width: 258px;
margin:0 auto 2rem;
font-size: 1.5rem;
}
}


/* 募集情報
--------------------------------*/
.requirements{
position: relative;
background: #F7F7F7;
padding:96px 0;
z-index: 1;
}
.requirements.career{
background: #fff;
}
.requirements hgroup
{
	position: relative;
}

.requirements hgroup p
{
	position: absolute;
	top: -4.5rem;
	right: 0;
	color: #8A9CAA;
opacity: 0.29;
	font-size: 8rem;
	font-family: 'en';
	z-index: 2;
}
.requirements hgroup h3
{
	position: relative;
	padding-bottom: 5rem;
	padding-top: 2rem;
	font-size: 2.5rem;
text-align: right;
z-index: 3;
}
.requirements hgroup h3::after
{
	position: absolute;
	content: '';
	right: 0;
	top: 7rem;
	width: 10rem;
	height: 6px;
	background: linear-gradient(90deg, #8be2a7 0%, #81a2bd 100%);
}
.requirements.career hgroup p{
left:0;
}
.requirements.career hgroup h3{
text-align: left;
}
.requirements.career hgroup h3::after{
left:0;
}
.requirements dl
{
	display: flex;
	border-bottom: 1px solid #B4C0C9;
	padding-bottom: 2rem;
	padding-top: 2rem;
}
.requirements dt
{
	width: 20%;
}
.requirements dd
{
	width: 80%;
	line-height: 1.7;
}
.requirements dd a
{
	text-decoration: underline;
}
.requirements .flow{
margin-top: 7rem;
text-align: center;
}
.requirements .flow h4{
font-size: 2rem;
font-weight: 400;
padding-bottom: 3rem;
}
.requirements .flow ul{
display: flex;
justify-content: center;
}
.requirements .flow ul li{
position: relative;
border:1px solid #fff;
margin:0 2.5rem;
padding-top: 35px;
height:129px;
width: 210px;
letter-spacing: 0.1em;
font-size: 1.8rem;
font-weight: 400;
color: #fff;
}

.requirements .flow ul li.flex{
display: flex;
	align-items: center;
	justify-content: center;
padding:0;
}
.requirements .flow ul li:nth-child(1){
background: #8BE1A8;
}
.requirements .flow ul li:nth-child(2)
{
	background: #88CCAF;
}
.requirements .flow ul li:nth-child(3)
{
	background: #84B4B6;
}
.requirements .flow ul li:nth-child(4)
{
	background: #80A4BC;
}
.requirements .flow ul li span{
font-size: 1.4rem;
font-weight: 300;
display: block;
width: 100%;
}
.requirements .flow ul li::after{
position: absolute;
content: '';
top:45%;
right:-35px;
width: 19.92px;
height: 6.29px;
background-image: url(../img/recruit-ten.svg);
}
.requirements .flow ul li.last::after{
background-image: none;
}
.requirements .flow ul li::before{
position: absolute;
content: '';
top:-0.3em;
left:-0.3em;
height: 129px;
width: 210px;
border:2px solid #fff;
}

.requirements .btn-area{
display: flex;
justify-content: center;
margin:7rem auto 0;
}
.requirements .btn-area a{
display: block;
width: 230px;
height: 50px;
line-height: 50px;
background: #5FCE84;
margin:0 2rem;
font-size: 1.6rem;
font-weight: 400;
color: #fff;
}
.requirements .btn-area a.more{
width: 280px;
background: #6A6A6A;
background-image: url(../img/icon-arrow.svg);
background-repeat: no-repeat;
background-position: center right 15px;
}
@media screen and (max-width: 1280px)
{
.requirements hgroup h3{
font-size: 2rem;
}
.requirements hgroup p{
font-size: 7rem;
top:-4rem;
}
.requirements hgroup h3::after{
height: 4px;
}
}
@media screen and (max-width: 1100px){
.requirements
	{
		padding: 50px 0 25px;
	}
.requirements hgroup h3
	{
		padding-top: 1rem;
padding-bottom: 2.5rem;
	}
.requirements hgroup h3::after
{
top:5.5rem
}
.requirements hgroup p
{
font-size: 6rem;
top:-3rem
}
.requirements dl{
display: block;
padding-bottom: 1rem;
padding-top: 1rem;
}
.requirements dt,.requirements dd{
width: 100%;
}
.requirements .flow{
margin-top: 4rem;
}
.requirements .flow h4{
font-size: 1.8rem;
padding-bottom: 1.5rem;
}
.requirements .flow ul{
display: block;
}
.requirements .flow ul li{
width: 210px;
height: 77px;
font-size: 1.6rem;
padding-top: 14px;
margin:0 auto 2rem;
}
.requirements .flow ul li::after{
top:auto;
bottom:-1.5rem;
left:0;
right:0;
margin:auto;
transform: rotate(90deg);
}
.requirements .flow ul li::before
{
width: 210px;
height:77px;
}
.requirements .btn-area{
margin:4rem auto 0;
display: block;
}
.requirements .btn-area a{
width: 258px;
height: 50px;
margin:0 auto 2rem;
font-size: 1.5rem;
}
.requirements .btn-area a.more{
width: 258px;
height: 50px;
margin-bottom: 0;
}
.requirements .flow ul li span{
font-size: 1.2rem;
}
}

/* 研修制度
--------------------------------*/
.training{
margin-top: 50px;
padding:63px 0;
background: linear-gradient(-90deg, #ddf6e6 0%, #dbe6ec 100%);
}
.training .container{
width: 576px;
margin:0 auto;
padding-left: 24px;
}
.training p{
position: relative;
padding-bottom: 0.5em;
}
.training p::after{
position: absolute;
content:'◎';
left:-25px;
top:0;
}
@media screen and (max-width: 1100px){
.training{
padding:30px 8%;
}
.training .container{
width: 100%;
}
}

/* 福利厚生・社内行事
--------------------------------*/
.welfare{
background: #F7F7F7;
padding-bottom: 83px;
}
.welfare .flex{
display: flex;
justify-content: center;
}
.welfare .flex .item
{
width: 30%;
margin:0 2%;
padding:10px 38px 30px;
background: #fff;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
}
.welfare .flex .item img{
display: block;
width: 116px;
margin:20px auto;
}
.welfare .flex .item h4{
font-size: 2rem;
font-weight: 400;
text-align: center;
padding-bottom: 0.5em;
}
.welfare .flex .item p{
line-height: 1.8;}
@media screen and (max-width: 1100px){
.welfare{
padding-bottom: 30px;}
.welfare .flex{
display: block;
margin:0 auto;
}
.welfare .flex .item{
width: 100%;
margin:2rem auto;
padding:20px;
}
.welfare .flex .item img{
width: 40px;
display: inline;
margin:0;
}
.welfare .flex .item h4{
font-size: 1.7rem;
text-align: left;
display: inline-block;
padding-left: 1em;
margin-bottom: 0.3em;
}
.welfare .flex .item p{
padding-top: 1em;
line-height: 1.7;
}
}

/* 先輩の声
--------------------------------*/
.colleague-box{
display: flex;
justify-content: space-between;
margin-bottom: 6rem;
}
.colleague-box .left{
width: 128px;
text-align: center;
padding-top: 15px;
}
.colleague-box .right{
width: calc(100% - 170px);
}
.colleague-box dl{
padding-bottom: 23px;
}
.colleague-box dt{
position: relative;
font-size: 1.7rem;
padding-bottom: 0.3em;
padding-left: 1.5em;
}
.colleague-box dt::after{
position: absolute;
content: '●';
top:-0.1em;
left: 0;
font-size: 2rem;
color: #84B4B6;
}
.colleague-box dd{
border:1px solid #8A9CAB;
padding: 0.8em 1em;
}
@media screen and (max-width: 1100px){
.colleague-box{
display: block;
margin-bottom: 1rem;
}
.colleague-box .left{
display: flex;
align-items: center;
width: 100%;
padding-top: 0;
margin-bottom: 2rem;
font-size: 1.6rem;
}
.colleague-box .left img{
width: 70px;
margin-right: 3rem;
}
.colleague-box dl{
padding-bottom: 18px;
}
.colleague-box dt{
font-size: 1.4rem;
padding-bottom: 5px;
}
.colleague-box dt::after{
font-size: 1.6rem;
top:0;
}
.colleague-box .right{
width: 100%;
}
}