@charset "UTF-8";


/* btn style */
/* ベース */
.c-btn {
position:relative;
cursor:pointer;
text-align: center;
display:inline-block;
margin:0 auto;
}
.c-btn:before,
.c-btn:after {
position:absolute;
content:"";
top:0;
left:0;
transition: .3s ease;
width: 100%;
height: 100%;
}
.c-btn:before {
z-index: 1;
}
.c-btn:after {
z-index: 0;
}
.c-btn__text {
text-decoration:none;
display: inline-block;
padding:18px 50px 18px 30px;
color:#fff;
font-size:1.8rem;
font-weight:bold;
position:relative;
transition: .3s ease;
z-index: 2;
width: 100%;
}
.c-btn__text:after {
content: "";
position: absolute;
top: 50%;
right:30px;
display: inline-block;
width: 9px;
height: 9px;
border-top: 3px solid #fff;
border-right: 3px solid #fff;
transform: rotate(45deg) translateY(-50%);
transition: .3s ease;
}
.c-btn:hover:before {
opacity:0;
}
.c-btn:hover .c-btn__text:after{
right:25px;
}
.c-btn__text[target="_blank"]:after {
font-family: "Font Awesome 6 Free";
margin: 0 3px 5px;
content: "\f35d";
font-weight:900;
display: inline-block;
font-size: 1.4rem;
border-top: 0;
border-right:0;
transform: rotate(0deg) translateY(-60%);
}
.c-btn:hover .c-btn__text[target="_blank"]:after{
right:30px;
}
/* 共通 */

.l-header .c-btn__text {
padding: 8px 30px 8px 15px;
color: #fff;
  font-size: calc(1.3 * var(--rem));
}
.l-header .c-btn__text::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 20px;
  display: inline-block;
  width: 6px;
  height: 6px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg) translateY(-50%);
  transition: .3s ease;
}
.s-cta .c-btn {
border:2px solid #fff;
}
/* キャリア */
.p-spcareer .l-header .c-btn:before {
background: linear-gradient(to right,#333 0%, #505050 50%, #eee 120%);
}
.p-spcareer .l-header .c-btn:after {
background: linear-gradient(to right,#505050 0%, #eee 100%);
}
.p-spcareer .s-cta .c-btn:before {
background: #fff;
}
.p-spcareer .s-cta .c-btn:after{
background: linear-gradient(to right,#333 0%, #eee 100%);
}
.p-spcareer .s-cta .c-btn__text {
color:#333;
}
.p-spcareer .s-cta .c-btn:hover .c-btn__text {
color:#fff;
}
.p-spcareer .s-cta .c-btn__text:after {
border-top: 3px solid #333;
border-right: 3px solid #333;
}
.p-spcareer .s-cta .c-btn:hover .c-btn__text:after {
border-top: 3px solid #fff;
border-right: 3px solid #fff;
}
/* 新卒 */
.p-spnewgrad .c-btn:before {
background: linear-gradient(to right,#5dc7ce 0%, #505050 100%);
}
.p-spnewgrad .c-btn:after {
background: linear-gradient(to right,#333 0%, #505050 100%);
}
/* 3分でわかる */
.p-spaboutus .c-btn:before {
background: linear-gradient(to right,#505050 0%, #8c8c8e 48%, #505050 100%);
}
.p-spaboutus .c-btn:after {
background: linear-gradient(to right,#333 0%, #505050 65%, #333 150%);
}
/* s-link */
.s-link .c-btn:before,
.s-link .c-btn:after {
border-radius: 5px!important;	
}
.s-link .c-btn:before {
background: #fff;
}
.s-link .c-btn:after {
background: linear-gradient(to right,#fff 0%, #eee 100%);
}
.s-link .c-btn {
border:2px solid #505050;
}
.s-link .c-btn__text {
color:#333;
font-size: calc(1.5 * var(--rem));
padding:18px 50px 18px 20px;
text-align: left;
}
.s-link .c-btn__text:after {
border-top: 3px solid #333;
border-right: 3px solid #333;
}
@media screen and (max-width:810px) {
.s-cta .c-btn {
	width: 100%;
	}
}