/*==================================================
Recruit Detail
==================================================*/

/*==============================
カラー
==============================*/

:root{

    --recruit-primary:#6E8F71;

    --recruit-text:#444D4D;

    --recruit-chip:#FCF9F5;

    --recruit-line:#E7E7E7;

    --recruit-radius:20px;

    --recruit-container:1080px;

}


/*==============================
共通
==============================*/

.recruit-single{

    color:var(--recruit-text);

}

.recruit-single img{

    max-width:100%;

    height:auto;

    display:block;

}

.recruit-single .vk-container{

    max-width:var(--recruit-container);

}

.recruit-header .vk-container {
    width: 100%;
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
}
/*==============================
見出し
==============================*/

.recruit-heading{

    color:#fff;

    font-size:32px;

    font-weight:600;

    margin:0 0 30px;

}


/*==============================
セクション
==============================*/

.recruit-section{

    background:var(--recruit-primary);

    border-radius:var(--recruit-radius);

    padding:60px;

    margin-bottom:60px;

}


/*==============================
テーブル
==============================*/

.recruit-table{

    width:100%;

    border-collapse:collapse;

    background:#fff;

    border-radius:16px;

    overflow:hidden;

}

.recruit-table th{

    width:180px;

    background:#FCF9F5;

    color:#444D4D;

    padding:18px;

    text-align:left;

    border-bottom:1px solid var(--recruit-line);

}

.recruit-table td{

    padding:18px 24px;

    border-bottom:1px solid var(--recruit-line);

}


/*==============================
チップ
==============================*/

.recruit-chip{

    display:inline-block;

    padding:8px 16px;

    background:var(--recruit-chip);

    border-radius:999px;

    margin-right:10px;

    margin-bottom:10px;

    font-size:14px;

}


/*==============================
LINEボタン
==============================*/

.recruit-line-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:100%;

    background:#00C300;

    color:#fff;

    border-radius:999px;

    padding:18px;

    font-weight:700;

    text-decoration:none;

    transition:.3s;

}

.recruit-line-btn:hover{

    opacity:.85;

}


/*==============================
スマホ
==============================*/

@media (max-width:991px){

.recruit-section{

    padding:30px 20px;

}

.recruit-heading{

    font-size:26px;

}

.recruit-table th,

.recruit-table td{

    display:block;

    width:100%;

}

}

/*==========================================
Header
==========================================*/

/* ========================================
   Recruit Header
======================================== */

.recruit-header {
    padding: 40px 0 60px;
    color: #444D4D;
}

.recruit-header .vk-container {
    max-width: 1080px;
}


/* 更新日
-------------------------------- */

.recruit-header__date {
    text-align: right;
    font-size: 14px;
    margin-bottom: 10px;
    color: #666;
}


/* カード
-------------------------------- */

.recruit-header__card {
    background: #fff;
    border: 3px solid #6E8F71;
    border-radius: 20px;
    padding: 40px;
    overflow: hidden;
}


/* チップ
-------------------------------- */

.recruit-header__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}


.recruit-chip {
    display: inline-flex;
    align-items: center;
    padding: 7px 18px;
    background: #FCF9F5;
    border-radius: 30px;
    font-size: 14px;
    color: #444D4D;
    font-weight: 500;
}


/* タイトル
-------------------------------- */

.recruit-header__title {
    margin: 0 0 8px;
    font-size: 36px;
    line-height: 1.4;
    font-weight: 700;
    color: #444D4D;
}


.recruit-header__company {
    margin: 0 0 35px;
    font-size: 18px;
    font-weight: 500;
}


/* メインエリア
-------------------------------- */

.recruit-header__wrap {
    display: flex;
    gap: 50px;
    align-items: flex-start;
}


/* 画像
-------------------------------- */

.recruit-header__image {
    width: 38%;
}


.recruit-header__image img {
    width:100%;
    height:auto;
    aspect-ratio:auto;
    object-fit:contain;
    border-radius:15px;
    display:block;
}


/* 右側
-------------------------------- */

.recruit-header__content {
    width:62%;
}


/* LINEボタン
-------------------------------- */

.recruit-line-btn {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 100%;
    padding: 16px 20px;

    background: #00C300;
    color: #fff;

    border-radius: 50px;

    font-size: 16px;
    font-weight: 700;

    text-decoration: none;

    margin-bottom: 30px;

    transition: .3s;
}


.recruit-line-btn:hover {
    opacity: .8;
    color: #fff;
}


/* 求人情報
-------------------------------- */

.recruit-info {
    display: flex;
    flex-direction: column;
    gap: 0;
}


.recruit-info__item {
    display: flex;
    padding: 12px 0;
    border-bottom: 1px solid #eee;
}


.recruit-info__label {
    width: 100px;
    flex-shrink: 0;

    font-weight: 700;
    color: #6E8F71;
}


.recruit-info__value {
    flex: 1;
    line-height: 1.7;
}


/* 特徴タグ
-------------------------------- */

.recruit-feature {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    margin-top: 25px;
}


.recruit-chip--feature {
    background: #F28C8C;
    color: #fff;
    border-radius: 50px;
    max-width: 100%;
    overflow-wrap: anywhere;
    white-space: normal;
}


/* ========================================
   Tablet
======================================== */

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


    .recruit-header {
        padding: 30px 0 40px;
    }


    .recruit-header__card {
        padding: 30px;
    }


    .recruit-header__title {
        font-size: 30px;
    }


    .recruit-header__wrap {
        gap: 25px;
    }


}


/* ========================================
   Mobile
======================================== */

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

    .recruit-header .vk-container {
        padding-left: 20px;
        padding-right: 20px;
    }

    .recruit-header__card {
        padding: 25px 20px;
        border-width: 2px;
        border-radius: 15px;
    }

    .recruit-header__date {
        font-size: 13px;
    }

    .recruit-header__title {
        font-size: 26px;
    }

    .recruit-header__company {
        font-size: 16px;
        margin-bottom: 25px;
    }

    .recruit-header__wrap {
        flex-direction: column;
    }

    .recruit-header__image,
    .recruit-header__content {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
        box-sizing: border-box;
    }

    .recruit-header__image img {
        height: 220px;
    }

    .recruit-info__item {
        flex-direction: column;
        gap: 5px;
    }

    .recruit-info__label {
        width: auto;
    }

    .recruit-line-btn {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        font-size: 15px;
    }

}

/* ========================================
   Recruit Section Heading
======================================== */

.recruit-section {
    padding:60px 0 0;
    background-color:transparent !important;
}



.recruit-section__inner {
    max-width:1080px;
    margin:0 auto;
}

.recruit-section__heading {
    display:block;
    width:100%;
    background:#6E8F71;
    color:#fff;
    padding:12px 35px;
    border-radius:12px;
    font-size:22px;
    font-weight:600;
    box-sizing:border-box;
}


/* ========================================
   Recruit Detail
======================================== */


.recruit-detail {

    width:100%;

}


.recruit-detail__item {

    display:flex;

    padding:18px 0;

    border-bottom:1px solid #ddd;

}


.recruit-detail__label {

    width:150px;

    flex-shrink:0;

    font-weight:700;

    color:#6E8F71;

}


.recruit-detail__value {

    flex:1;

    color:#444D4D;

    line-height:1.8;

}



/* 長文項目 */

.recruit-detail__item--block {

    display:block;

}


.recruit-detail__item--block 
.recruit-detail__label {

    margin-bottom:10px;

}



@media(max-width:767px){


    .recruit-section {

        padding: 40px 20px 0;

    }


    .recruit-section__heading {

        font-size:20px;

        padding:10px 25px;

    }


    .recruit-detail__item {

        display:block;

    }


    .recruit-detail__label {

        width:auto;

        margin-bottom:8px;

    }


}
/* ========================================
   Facility
======================================== */

.recruit-map{

    margin-top:40px;

    border-radius:20px;

    overflow:hidden;

}

.recruit-map iframe{

    width:100%;

    height:420px;

    border:0;

    display:block;

}

@media(max-width:767px){

    .recruit-map iframe{

        height:300px;

    }

}
.recruit-feature{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

/* ========================================
   Recommend
======================================== */

.recruit-card-list{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

    margin-top:35px;

}

.recruit-card{

    background:#fff;

    border-radius:15px;

    overflow:hidden;

    box-shadow:0 5px 15px rgba(0,0,0,.08);

    transition:.3s;

    height:100%;

}

.recruit-card:hover{

    transform:translateY(-5px);

}

.recruit-card a{

    display:flex;

    flex-direction:column;

    height:100%;

    color:inherit;

    text-decoration:none;

}

.recruit-card__image img{

    width:100%;

    height:180px;

    object-fit:cover;

    display:block;

}

.recruit-card__body{

    padding:20px;

}

.recruit-card__title{

    font-size:20px;

    margin-bottom:15px;

    line-height:1.5;

}

.recruit-card__meta{

    list-style:none;

    margin:0;

    padding:0;

}

.recruit-card__meta li{

    margin-bottom:10px;

    font-size:14px;

}

.recruit-card__button{

    display:block;

    margin-top:20px;

    background:#00C300;

    color:#fff;

    text-align:center;

    padding:12px;

    border-radius:999px;

    font-weight:700;

}

@media(max-width:991px){

    .recruit-card-list{

        grid-template-columns:repeat(2,1fr);

    }

}

@media(max-width:767px){

    .recruit-card-list{

        grid-template-columns:1fr;

    }

}

/* ========================================
   Recruit Card
======================================== */

.recruit-card-list{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

    margin-top:35px;

}


.recruit-card{

    background:#fff;

    border:2px solid #6E8F71;

    border-radius:20px;

    overflow:hidden;

    transition:.3s;

}


.recruit-card:hover{

    transform:translateY(-5px);

    box-shadow:0 8px 20px rgba(0,0,0,.08);

}


.recruit-card a{

    display:block;

    color:inherit;

    text-decoration:none;

}


/* ========================================
   Image
======================================== */

.recruit-card__image{

    overflow:hidden;

}


.recruit-card__image img{

    width:100%;

    aspect-ratio:16 / 9;

    object-fit:cover;

    display:block;

}


/* ========================================
   Body
======================================== */

.recruit-card__body{

    padding:24px;

    display:flex;

    flex:1;

    flex-direction:column;

}


.recruit-card__title{

    font-size:24px;

    font-weight:700;

    line-height:1.5;

    color:#444D4D;

    margin-bottom:22px;

}


/* ========================================
   Item
======================================== */

.recruit-card__item{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:14px;

    color:#444D4D;

}


.recruit-card__icon{

    width:24px;

    color:#6E8F71;

    font-size:18px;

    text-align:center;

    flex-shrink:0;

}


.recruit-card__text{

    flex:1;

    line-height:1.7;

}


/* ========================================
   Button
======================================== */

.recruit-card__button{

    display:block;

    margin-top:auto;

    background:#6E8F71;

    color:#fff;

    text-align:center;

    padding:14px;

    border-radius:999px;

    font-weight:700;

    transition:.3s;

}


.recruit-card:hover .recruit-card__button{

    background:#5f7d62;

}


/* ========================================
   Tablet
======================================== */

@media (max-width:991px){

    .recruit-card-list{

        grid-template-columns:repeat(2,1fr);

    }

}


/* ========================================
   SP
======================================== */

@media (max-width:767px){

    .recruit-card-list{

        grid-template-columns:1fr;

    }

    .recruit-card__body{

        padding:20px;

    }

    .recruit-card__title{

        font-size:22px;

    }

}


/*==================================
Archive Recruit
==================================*/

.recruit-archive {
    --archive-green:#71967C;
    --archive-pink:#F28C8C;
    --archive-line:#00C817;
    color:#333;
}

.recruit-archive__inner {
    width:min(1080px,calc(100% - 40px));
    margin:0 auto;
    padding:54px 0 96px;
}

.recruit-archive__count {
    margin:0 0 28px;
    font-weight:700;
    text-align:center;
}

.recruit-archive__list {
    display:grid;
    gap:40px;
}

.recruit-archive-card {
    display:flex;
    flex-direction:column;
    min-height:480px;
    margin:0;
    padding:38px 42px 34px;
    border:3px solid var(--archive-green);
    border-radius:20px;
    background:#fff;
}

.recruit-archive-card__header {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:24px;
}

.recruit-archive-card__chips,
.recruit-archive-card__features {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.recruit-archive-card__chips span,
.recruit-archive-card__features span {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:112px;
    min-height:38px;
    padding:6px 20px;
    border:1px solid #A8B8AA;
    border-radius:999px;
    background:#FBFAF7;
    font-size:14px;
}

.recruit-archive-card__date {
    flex:0 0 auto;
    margin:0;
    font-size:12px;
    line-height:1.45;
    text-align:right;
}

.recruit-archive-card__date span,
.recruit-archive-card__date time {
    display:block;
}

.recruit-archive-card__heading {
    margin:24px 0 18px;
}

.recruit-archive-card__company {
    margin:0 0 6px;
    font-size:14px;
}

.recruit-archive-card__title {
    margin:0;
    font-size:clamp(20px,2.2vw,27px);
    font-weight:700;
    line-height:1.45;
}

.recruit-archive-card__title a {
    color:inherit;
    text-decoration:none;
}

.recruit-archive-card__title a:hover,
.recruit-archive-card__title a:focus-visible {
    color:var(--archive-green);
    text-decoration:underline;
}

.recruit-archive-card__body {
    display:grid;
    grid-template-columns:minmax(0,35fr) minmax(0,65fr);
    gap:38px;
}

.recruit-archive-card__image {
    display:block;
    height:210px;
    overflow:hidden;
    border-radius:14px;
    background:#D3D3D3;
}

.recruit-archive-card__image img,
.recruit-archive-card__no-image {
    display:block;
    width:100%;
    height:100%;
}

.recruit-archive-card__image img {
    object-fit:cover;
}

.recruit-archive-card__no-image {
    display:grid;
    place-items:center;
    color:#fff;
    font-size:13px;
    font-weight:700;
    letter-spacing:.12em;
    background:#C9C9C9;
}

.recruit-archive-card__info {
    display:grid;
    gap:15px;
    margin:3px 0 0;
}

.recruit-archive-card__info > div {
    display:grid;
    grid-template-columns:92px minmax(0,1fr);
    gap:12px;
}

.recruit-archive-card__info dt,
.recruit-archive-card__info dd {
    margin:0;
    font-size:14px;
    line-height:1.65;
}

.recruit-archive-card__info dt {
    font-weight:700;
}

.recruit-archive-card__features {
    margin-top:20px;
}

.recruit-archive-card__features span {
    min-width:auto;
    border:0;
    background:#FBF8F4;
}

.recruit-archive-card__buttons {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;
    margin-top:auto;
    padding-top:28px;
}

.recruit-archive-card__button {
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:56px;
    padding:12px 46px;
    border-radius:999px;
    color:#fff;
    font-size:17px;
    font-weight:700;
    text-align:center;
    text-decoration:none;
    transition:opacity .2s ease,transform .2s ease;
}

.recruit-archive-card__button--detail { background:var(--archive-pink); }
.recruit-archive-card__button--contact { background:var(--archive-line); }

.recruit-archive-card__button span {
    position:absolute;
    right:20px;
    display:grid;
    width:18px;
    height:18px;
    place-items:center;
    border-radius:50%;
    background:#fff;
    font-size:17px;
    line-height:1;
}

.recruit-archive-card__button--detail span { color:var(--archive-pink); }
.recruit-archive-card__button--contact span { color:var(--archive-line); }

.recruit-archive-card__button:hover,
.recruit-archive-card__button:focus-visible {
    color:#fff;
    opacity:.86;
    transform:translateY(-1px);
}

.recruit-archive .navigation.pagination {
    margin-top:52px;
}

.recruit-archive .nav-links {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:8px;
}

.recruit-archive .page-numbers {
    display:grid;
    min-width:42px;
    height:42px;
    padding:0 10px;
    place-items:center;
    border:1px solid var(--archive-green);
    border-radius:50%;
    color:var(--archive-green);
    text-decoration:none;
}

.recruit-archive .page-numbers.current,
.recruit-archive .page-numbers:hover,
.recruit-archive .page-numbers:focus-visible {
    background:var(--archive-green);
    color:#fff;
}

.recruit-archive .page-numbers.prev,
.recruit-archive .page-numbers.next {
    width:auto;
    border-radius:999px;
}

@media (max-width:767px) {
    .recruit-archive__inner {
        width:min(calc(100% - 28px),560px);
        padding:38px 0 64px;
    }

    .recruit-archive__list { gap:28px; }

    .recruit-archive-card {
        min-height:0;
        padding:24px 20px;
        border-width:2px;
        border-radius:16px;
    }

    .recruit-archive-card__header { gap:12px; }

    .recruit-archive-card__chips span {
        min-width:0;
        min-height:32px;
        padding:5px 14px;
        font-size:12px;
    }

    .recruit-archive-card__date { font-size:10px; }

    .recruit-archive-card__header { order:0; }

    .recruit-archive-card__heading {
        order:2;
        display:flex;
        flex-direction:column;
        margin:18px 0 15px;
    }

    .recruit-archive-card__title { order:1; }

    .recruit-archive-card__company {
        order:2;
        margin:8px 0 0;
    }

    .recruit-archive-card__body {
        display:contents;
    }

    .recruit-archive-card__image {
        order:1;
        height:210px;
        margin-top:20px;
    }

    .recruit-archive-card__content { order:3; }

    .recruit-archive-card__features { order:4; }

    .recruit-archive-card__buttons { order:5; }

    .recruit-archive-card__info {
        gap:12px;
    }

    .recruit-archive-card__info > div {
        grid-template-columns:78px minmax(0,1fr);
        gap:8px;
    }

    .recruit-archive-card__buttons {
        grid-template-columns:1fr;
        gap:12px;
        padding-top:22px;
    }

    .recruit-archive-card__button {
        min-height:52px;
        font-size:15px;
    }
}

/* Equal-height child-theme recruit cards. */
.recruit-card-list > .recruit-card {
    height:100%;
}

.recruit-card-list > .recruit-card > a {
    display:flex;
    flex-direction:column;
    height:100%;
}

.recruit-card-list > .recruit-card .recruit-card__body {
    display:flex;
    flex:1;
    flex-direction:column;
}

.recruit-card-list > .recruit-card .recruit-card__button {
    margin-top:auto;
}
/* ========================================
   Recruit Search
======================================== */

.recruit-search{

    background:#6E8F71;

    padding:80px 0;

    position:relative;

    left:50%;

    width:100vw;

    margin-left:-50vw;

}


.recruit-search .recruit-section__heading{

    display:block;

    width:fit-content;

    margin:0 auto 40px;

    background:none;

    color:#fff;

    padding:0;

    border-radius:0;

    font-size:42px;

    font-weight:600;

}

.recruit-search__box{

    max-width:1080px;

    margin:0 auto;

}


/* ========================================
   Search & Filter
======================================== */

.searchandfilter{

    width:100%;

}


.searchandfilter ul{

    display:grid;

    grid-template-columns:repeat(2,minmax(0,1fr));

    gap:20px;

    padding:0;

    margin:0;

    list-style:none;

    align-items:end;

}


.searchandfilter li{

    position:relative;

    margin:0;

}


/* ラベル */

.searchandfilter label{

    display:block;

    margin-bottom:8px;

    color:#fff;

    font-weight:700;

}


/* テキスト・プルダウン */

.searchandfilter select,
.searchandfilter input[type="text"]{

    width:100%;

    height:52px;

    padding:0 45px 0 16px;

    border:none;

    border-radius:10px;

    background:#fff;

    box-sizing:border-box;

    font-size:16px;

}


/* select矢印 */

.searchandfilter select{

    appearance:none;

    -webkit-appearance:none;

    -moz-appearance:none;

    cursor:pointer;

}


.searchandfilter li:has(select)::after{

    content:"▼";

    position:absolute;

    top:50%;

    right:18px;

    font-size:11px;

    color:#6E8F71;

    transform:translateY(-50%);

    pointer-events:none;

}


/* ボタン行 */

.searchandfilter li:last-child{

    grid-column:1 / -1;

    display:flex;

    justify-content:center;

    margin-top:15px;

}


/* ボタン */

.searchandfilter input[type="submit"]{

    width:80%;

    max-width:500px;

    min-width:280px;

    height:56px;

    border:none;

    border-radius:999px;

    background:#F28C8C;

    color:#fff;

    font-size:18px;

    font-weight:700;

    opacity:1;

    cursor:pointer;

    transition:opacity .3s ease;

}


.searchandfilter input[type="submit"]:hover{

    background:#F28C8C;

    opacity:.7;

}

.searchandfilter input[type="submit"]:focus-visible{

    outline:3px solid #fff;

    outline-offset:3px;

}


/* focus */

.searchandfilter select:focus,
.searchandfilter input[type="text"]:focus{

    outline:none;

    box-shadow:0 0 0 2px rgba(255,255,255,.5);

}


/* ========================================
   Tablet
======================================== */

@media (max-width:991px){

    .searchandfilter ul{

        grid-template-columns:repeat(2,1fr);

    }

}

/* The recommendation template contains taxonomy links inside each card.
   Keep it independent from the top-page Query Loop card layout. */
.recruit-recommend .recruit-card {
    display:block;
    height:auto;
}

.recruit-recommend .recruit-card > a {
    display:block;
    height:auto;
}

.recruit-recommend .recruit-card__body {
    display:block;
}

.recruit-recommend .recruit-card__button {
    margin-top:28px;
}


/* ========================================
   SP
======================================== */

@media (max-width:767px){

    .recruit-search{

        padding:60px 20px;

    }

    .searchandfilter ul{

        grid-template-columns:1fr;

        gap:16px;

    }

    .searchandfilter li:last-child{

        margin-top:10px;

    }

    .searchandfilter input[type="submit"]{

        width:100%;

    }

}


/* Job number in the recruit detail header. */
.recruit-header__job-number {
    margin: 0 0 20px;
    font-size: 14px;
    font-weight: 400;
    color: #444D4D;
}
