@charset "UTF-8";
/* CSS Document */



/*======================================
 外部求人サイトへの導線（共通）
======================================*/
#requirement .req_lead { color: #1a1a1a; font-weight: 500; text-align: center; }

#requirement ul.req_btn_list {
background: none;
padding: 0;
margin: 0 auto;
max-width: 900px;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
#requirement ul.req_btn_list li { margin: 0; color: inherit; }

#requirement .req_btn {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
box-sizing: border-box;
background: linear-gradient(90deg, #00488a, #087fba);
color: #fff;
font-weight: 700;
line-height: 1.4;
letter-spacing: .05em;
text-decoration: none;
border-radius: 6px;
transition: opacity .3s ease, transform .3s ease, box-shadow .3s ease;
}
#requirement .req_btn:hover,
#requirement .req_btn:focus-visible {
opacity: .85;
color: #fff;
transform: translateY(-3px);
box-shadow: 0 8px 18px rgba(0,0,0,.18);
}
#requirement .req_btn:focus-visible { outline: 3px solid #087fba; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
#requirement .req_btn { transition: none; }
#requirement .req_btn:hover,
#requirement .req_btn:focus-visible { transform: none; }
}


/*PC*/
@media print, screen and (min-width: 769px) {

#requirement {width: 1000px; margin: 120px auto; }

#requirement h3 { position: relative; font-size: 2em; margin: 100px 0 20px; padding: 0 70px 0 0; display: inline-block; }
#requirement h3::after {
content: '';
background: linear-gradient(90deg, #00488a, #087fba);
width: 60px; height: 2px;
position: absolute;
top: 50%; right: 0;
}

#requirement ul { padding: 50px; background: linear-gradient(90deg, #00488a, #087fba); }
#requirement ul li { margin-bottom: 70px; color: #fff; }
#requirement ul li h4 {
position: relative;
border-bottom: 1px solid #888;
padding: 0 0 10px;
margin: 0 0 20px;
font-size: 1.2em;
}
#requirement ul li h4::after {
content: "";
width: 100px; height: 1px;
background-color: #fff;
position: absolute;
bottom: -1px; left: 0;
}

#requirement ul li p { font-size: 0.9em; }
#requirement ul li p span { display: block; padding-top: 20px; font-size: 1.1em; }
#requirement ul li p span:first-child { padding-top: 0px; }


/*外部求人サイトへの導線*/
#requirement .req_lead { font-size: 1.75rem; line-height: 1.9; margin: 0 0 50px; }
#requirement ul.req_btn_list { gap: 24px; }
#requirement ul.req_btn_list li { flex: 1 1 380px; max-width: 440px; }
#requirement .req_btn { min-height: 110px; padding: 24px 32px; font-size: 1.625rem; }


}


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

#requirement { width: 90%; margin: 80px auto; }

#requirement h3 { position: relative; font-size: 1.4em; margin: 80px 0 20px; padding: 0 50px 0 0; display: inline-block; }
#requirement h3::after {
content: '';
background: linear-gradient(90deg, #00488a, #087fba);
width: 40px; height: 2px;
position: absolute;
top: 50%; right: 0;
}

#requirement ul { padding: 30px; background: linear-gradient(90deg, #00488a, #087fba); }
#requirement ul li { margin-bottom: 50px; color: #fff; }
#requirement ul li h4 {
position: relative;
border-bottom: 1px solid #888;
padding: 0 0 10px;
margin: 0 0 20px;
font-size: 1em;
}
#requirement ul li h4::after {
content: "";
width: 100px; height: 1px;
background-color: #fff;
position: absolute;
bottom: -1px; left: 0;
}

#requirement ul li p { font-size: 0.9em; }
#requirement ul li p span { display: block; padding-top: 20px; font-size: 1.1em; }
#requirement ul li p span:first-child { padding-top: 0px; }

/*外部求人サイトへの導線*/
#requirement .req_lead { font-size: 1.3125rem; line-height: 1.8; text-align: left; margin: 0 0 35px; }
#requirement ul.req_btn_list { gap: 16px; }
#requirement ul.req_btn_list li { flex: 1 1 100%; max-width: none; }
#requirement .req_btn { min-height: 90px; padding: 20px 16px; font-size: 1.25rem; }


}