@charset "utf-8";

.inner {
    width: 1390px;
    padding-bottom: 160px;
}

.joblist_ttl {
    margin-bottom: 125px;
}

.joblist_ttl h2 {
    font-size: 6.2rem;
}

.joblist_ttl p {
    font-family: 'Noto Serif JP', serif;
    font-size: 3.2rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    line-height: 1.5625;
}

.joblist_h3 { 
    color: #2E538D;
}

.joblist_column_txt ul {
    margin-left: -3px;
}

.joblist_column_txt ul li {
    padding-left: 3px;
}

.joblist_column_txt ul li::marker {
    content: '⚫︎';
    font-size: 1.2em;
    color: #2E538D;
}

/* pl btn */
.pl_box{
	margin-top: 115px;
}

/*
.job_pl_list_btn {
	display: flex;
	justify-content: center;
}

.job_pl_item {
    margin: 0 15px;
	position: relative;
}

.job_pl_item::before {
    content: "";
    position: absolute;
    top: calc(50% - 6px);
    right: 33px;
    display: block;
    width: 13px;
    height: 13px;
    border-top: solid 1px;
    border-right: solid 1px;
    transform: rotate(135deg);
    transition: all 0.2s ease-out;
    color: #222;
    z-index: 10;
}

.job_pl_link {
    align-items: center;
    font-family: 'Noto Serif JP', serif;
    font-size: 2.4rem;
    font-weight: 500;
    line-height: 1.666;
    letter-spacing: 0.2em;
    text-align: center;
    text-decoration: none !important;
    color: #222;
    height: 100px;
    padding: 33px 150px 33px 150px;
    margin: 0 0 20px;
    position: relative;
    transition: opacity .3s ease;
}

.job_pl_link::before {
    position: absolute;
    content: "";
    width: 85%;
    height: 100%;
    top: 0;
    left: 30px;
    background: #fff;
    opacity: .9;
}

.job_pl_link::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url(https://mc.groworks.link/wp-content/themes/mc/img/pl_link_btn_side_l.svg) no-repeat top left / auto 100%, url(https://mc.groworks.link/wp-content/themes/mc/img/pl_link_btn_side_r.svg) no-repeat top right / auto 100%;
    opacity: .9;
}

.job_pl_link span {
    position: relative;
    color: #222;
}

.job_pl_item:hover {
    opacity: .7;
    transition: opacity .3s ease;
}
*/

/* column */
.joblist_column {
    display: flex;
/*     flex-wrap: wrap; */
    margin-bottom: 57px;
	min-height: 530px;
}

.joblist_column_txt {
    width: 568px;
    max-width: calc(50% - 2.466%);
    margin: 0 2.466% 0 auto;
}

.joblist_column_txt .sec_h3 {
    margin: 40px 0 27px;
}

.joblist_column_img {
    width: 55%;
    position: relative;
}

.joblist_column_img_inner {
	position: relative;
}

.joblist_column_img img {
    width: 100%;
}


/* more btn */
.more_link_btn {
    position: absolute;
    bottom: 43px;
    right: 25px;
	z-index: 1;
}

.more_link_item::before {
    content: "";
    position: absolute;
    top: calc(50% - 6px);
    right: 33px;
    display: block;
    width: 13px;
    height: 13px;
    border-top: solid 1px;
    border-right: solid 1px;
    transform: rotate(45deg);
    transition: all 0.2s ease-out;
    color: #fff;
    z-index: 10;
}

.more_link {
    align-items: center;
    font-family: 'Noto Serif JP', serif;
    font-size: 2.0rem;
    font-weight: 500;
    line-height: 1.666;
    letter-spacing: 0;
    text-align: center;
    text-decoration: none !important;
    color: #fff;
    height: 80px;
    padding: 25px 90px 25px 30px;
    margin: 0 0 20px;
    position: relative;
    transition: opacity .3s ease;
}

.more_link::before {
    position: absolute;
    content: "";
    width: 82.9%;
    height: 100%;
    top: 0;
    left: 29px;
    background: #0F2F61;
    opacity: .9;
}

.more_link::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url(https://mc.groworks.link/wp-content/themes/mc/img/joblist_more_link_btn_side_l.svg) no-repeat top left / auto 100%, url(https://mc.groworks.link/wp-content/themes/mc/img/joblist_more_link_btn_side_r.svg) no-repeat top right / auto 100%;
    opacity: .9;
}

.more_link span {
    position: relative;
    color: #fff;
}

.more_link:hover {
    opacity: .7;
    transition: opacity .3s ease;
}




/* loop img */

.loop_img li {
    list-style: none;
}

.loop_img_box {
    display: flex;
    width: calc(1974px * 3);
    min-width: 1024px;
    height: auto;
    overflow: hidden;
    margin: -119px 0 88px;
    /* 	    top: 310px; */
    position: relative;
}

.bg_grey {
	margin: -304px 0 0;
	padding: 250px 0 0;
}

.bg_grey::before {
	height: calc(100% - 220px);
}

.loop_img {
	padding-left: 13px;
    display: flex;
    margin-bottom: 0;
}

.loop_img img {
    display: block;
    width: auto;
    height: auto;
}

@keyframes loop {
    0% {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(100%);
    }
}

@keyframes loop2 {
    0% {
        transform: translateX(-200%);
    }

    to {
        transform: translateX(0%);
    }
}

.loop_img:first-child {
    animation: loop 100s -50s linear infinite;
}

.loop_img:last-child {
    animation: loop2 100s linear infinite;
}

_:-ms-lang(x)::-ms-backdrop,
.loop_img_box {
    display: -ms-grid;
    overflow: hidden;
}

@media screen and (max-width: 767px) {
	.inner {
		padding-bottom: 126px;
	}
	
	.bg_grey {
		margin: -125px 0 0;
		padding: 70px 0 30px;
	}
	
	.bg_grey::before {
		height: calc(100% - 95px);
	}
	
	.job_pl_box {
    margin-top: 50px;
/* 	padding: 0 20px; */
	}
	
	.job_pl_list_btn {
    display: inline;
	}
	
	.joblist_ttl h2 {
    font-size: 3.8rem;
	}
	
	.joblist_ttl p {
    font-size: 2rem;
	}
	
	.joblist_ttl {
    margin: 45px auto 25px;;
	}
	
	.joblist_column {
    display: inline;
	}
	
	.joblist_column_txt {
    	width: 100%;
    	max-width: 100%;
    	margin: 0 0 25px;
	}
	
	.joblist_column_txt .sec_h3 {
    margin: 20px 0 16px;
	}
	
	.joblist_column_img {
    width: 100%;
	}
	
	.more_link {
    font-size: 1.5rem;
	}
	
	.loop_img_box {
        width: calc(400px* 3);
        min-width: auto;
        height: auto;
        top: 30px;
	}
	
	.job_pl_item::before {
    width: 10px;
    height: 10px;
	}
	
	.joblist_column {
    flex-wrap: nowrap;
	}
	
	.more_link_btn {
    	position: relative;
    	top: auto;
    	right: auto;
		bottom: auto;
		margin-top: 50px;
    	text-align: center;
	}
	
	.more_link::before {
    width: 81.6%;
    left: 26px;
	}
	
	.more_link_item {
		position: relative;
		display: inline-block;
	}

	.more_link_item::before {
		top: calc(50% - 7px);
		right: 30px;
		width: 10px;
		height: 10px;
	}
	
	.loop_img {
    padding-left: 4px;

}