@charset "utf-8";

.jobs_archive_wrapper {
    background-color: #F3F8FB;
    padding: 8rem 0 12rem;
    position: relative;
    z-index: 2;
}

.jobs_archive_lead {
    text-align: center;
    font-size: 1.6rem;
    margin-bottom: 4rem;
    line-height: 2;
}

.more_contents {
    margin-top: -4rem;
}

/* ============================================================
  専用コンテナ (MAX 1440px)
============================================================ */
.jobs_container {
    max-width: 1520px;
    margin: 0 auto;
    padding: 0 4rem;
    /* 左右の余白 */
    width: 100%;
}

@media (max-width: 767px) {
    .jobs_container {
        padding: 0 2rem;
    }
}

/* ============================================================
  検索エリア（上部）
============================================================ */
.jobs_search_area {
    background-color: #FFF;
    border-radius: 20px;
    padding: 4rem 6rem;
    margin-bottom: 16rem;
    border: 1px solid #D6E4F5;
}

.jobs_search_form {
    display: flex;
    gap: 2rem;
    align-items: center;
}

/* 親要素のpaddingをなくし、枠全体を使えるようにする */
.jobs_search_select_wrap {
    flex: 1;
    position: relative;
    background-color: #FFF;
    border: 1px solid #D6E4F5;
    border-radius: 4px;
    height: 5.6rem;
    /* 枠の高さを固定 */
}

/* アイコンは左端に絶対配置（クリック不可） */
.jobs_search_icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 3.6rem;
    height: 3.6rem;
    pointer-events: none;
    z-index: 2;
}

.jobs_search_icon svg {
    width: 100%;
    height: auto;
}

/* 矢印は右端に絶対配置（クリック不可） */
.jobs_search_arrow {
    position: absolute;
    right: 1.2rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 2;
    height: auto;

    svg {
        display: block;

    }
}

/* セレクトボックスを枠の100%に広げる */
.jobs_search_select_inner {
    width: 100%;
    height: 100%;
}

.jobs_search_select_inner select {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    height: 100%;
    background: transparent;
    border: none;
    font-size: 1.6rem;
    font-weight: 500;
    color: #4A4A4A;
    cursor: pointer;
    padding: 0 4.8rem 0 5.6rem;
    border-radius: 2px;
}

.jobs_search_select_inner select:focus {
    outline: none;
}

/* --- 検索ボタン (c_btn_arrow の上書き調整) --- */
.jobs_search_btn {
    border: none;
    cursor: pointer;
    font-family: inherit;
    /* セレクトボックスと高さを合わせる */
    height: 5.6rem;
    margin: 0;
    /* c_btn_arrow のデフォルトpaddingを上書きして左右余白を調整 */
    padding: 0 2.4rem 0 4rem;
}

.jobs_search_btn .c_btn_arrow_label {
    font-size: 1.6rem;
    font-weight: bold;
}

/* SVG用の専用クラス。ホバー時に c_btn_arrow_icon と同じ動きをさせる */
.jobs_search_btn_icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease;
}

.jobs_search_btn_icon svg {
    display: block;
}

.c_btn_arrow:hover .jobs_search_btn_icon {
    transform: translateX(0.8rem);
}

@media (hover: hover) {
    .jobs_search_btn:hover {
        opacity: 0.8;
    }
}
/* ============================================================
  Responsive: Layout & Search Area
============================================================ */
@media (max-width: 1440px) {
    .jobs_search_area {
        margin-bottom: 8rem;
    }
    .jobs_layout {
        gap: 4rem;
    }
    .jobs_sidebar {
        width: 32rem;
    }
    .jobs_main {
        width: calc(100% - 32rem - 4rem);
    }
}

@media (max-width: 1024px) {
    .jobs_layout {
        flex-direction: column;
        gap: 4rem;
    }
    .jobs_sidebar {
        position: static;
        width: 100%;
        display: flex;
        gap: 2rem;
        padding: 2.4rem;
    }
    .jobs_sidebar_block {
        flex: 1;
        border-bottom: none;
        padding-bottom: 0;
        margin-bottom: 0;
        border-right: 1px dotted #D6E4F5;
        padding-right: 2rem;
    }
    .jobs_sidebar_block:last-child {
        border-right: none;
        padding-right: 0;
    }
    .jobs_main {
        width: 100%;
    }
    .jobs_search_form {
        flex-wrap: wrap;
    }
    .jobs_search_select_wrap {
        min-width: calc(33.333% - 1.6rem);
    }
}

@media (max-width: 767px) {
    .jobs_archive_lead {
        padding: 0 1rem;
        margin-bottom: 2rem;
        font-size: 1.4rem;
    }
    .jobs_archive_wrapper {
        padding: 4rem 0 8rem;
    }
    .jobs_search_area {
        padding: 1.6rem;
        border-radius: 12px;
        margin-bottom: 4rem;
    }
    .jobs_search_form {
        flex-direction: column;
        gap: 1.2rem;
    }
    .jobs_search_select_wrap {
        width: 100%;
        min-width: 100%;
        padding: 0;
    }
    .jobs_search_btn {
        width: 100%;
        padding: 1.6rem;
    }
    .jobs_sidebar {
        display: none; /* スマホ時はサイドバーを非表示 */
    }
}
/* ============================================================
  2カラムレイアウト (左460px + 隙間80px + 右900px = 1440px)
============================================================ */
.jobs_layout {
    display: flex;
    justify-content: space-between;
    gap: 8rem;
    align-items: flex-start;
}

/* --- 左側：サイドバー --- */
.jobs_sidebar {
    width: 46rem;
    flex-shrink: 0;
    background-color: #FFF;
    border-radius: 12px;
    padding: 4rem;
    border: 1px solid #D6E4F5;
    position: sticky;
    top: 120px;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
}

.jobs_sidebar::-webkit-scrollbar {
    width: 6px;
}

.jobs_sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.jobs_sidebar::-webkit-scrollbar-thumb {
    background: #D6E4F5;
    border-radius: 6px;
}

.jobs_sidebar_block {
    margin-bottom: 2.2rem;
    padding-bottom: 2rem;
    border-bottom: 1px dashed #D6E4F5;
}

.jobs_sidebar_block:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.jobs_sidebar_ttl {
    font-size: 1.6rem;
    font-weight: 500;
    margin-bottom: 1.2rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.jobs_sidebar_ttl_icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.6rem;
    height: 3.6rem;
    flex-shrink: 0;

    svg {
        display: block;
        width: 100%;
        height: auto;
    }
}

.jobs_sidebar_list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.jobs_sidebar_list a {
    font-size: 1.4rem;
    color: #4A4A4A;
    line-height: 2;
    text-decoration: none;
    display: flex;
    align-items: center;
    transition: color 0.15s ease, font-weight 0s;
}

/* 青い横棒（マイナス） */
.jobs_sidebar_list a::before {
    content: "−";
    /* 全角マイナス */
    margin-right: 8px;
    color: #3583C6;
    font-weight: bold;
}

.jobs_sidebar_list a:hover,
.jobs_sidebar_list a.is-active {
    color: #3583C6;
    font-weight: bold;
}




/* --- 右側：メインコンテンツ --- */
.jobs_main {
    width: 90rem;
    flex-shrink: 0;
}

.jobs_result_head {
    margin-bottom: 4rem;
}

.jobs_result_head_ttl {
    font-size: 2.4rem;
    font-weight: bold;
    margin-bottom: 4.3rem;
    line-height: normal;
}

.jobs_result_count {
    font-size: 1.6rem;
    color: #4A4A4A;
    display: flex;
    align-items: baseline;
    padding-bottom: 2.4rem;
    border-bottom: 1px solid #D6E4F5;
    gap: 1.2rem;

    .text {
        line-height: 2;
    }
}

.jobs_result_count .num {
    font-size: 2.4rem;
    font-family: "Saira", sans-serif;
    font-weight: bold;
    color: #F47F53;
    margin-right: 0.8rem;
    line-height: 1;
}

/* --- 求人カード --- */
.jobs_list {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.jobs_card {
    background-color: #FFF;
    border: 1px solid #D6E4F5;
    border-radius: 8px;
    padding: 4rem;
    display: block;
    color: inherit;
    text-decoration: none;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

@media (hover: hover) {
    .jobs_card:hover {
        box-shadow: 0 10px 30px rgba(53, 131, 198, 0.1);
        border-color: #3583C6;

        .jobs_card_ttl {
            color: #3583C6;
        }
    }
}

.jobs_card_ttl {
    font-size: 2.4rem;
    font-weight: bold;
    color: #4A4A4A;
    margin-bottom: 1.2rem;
    line-height: 1.4;
    transition: color 0.15s ease;
}

.jobs_card_badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-bottom: 2.4rem;
}

.jobs_badge {
    padding: 0.3rem 0.8rem;
    border-radius: 2px;
    font-size: 1.4rem;
    font-weight: 500;
}

/* 正社員（青背景） */
.jobs_badge.status {
    background-color: #3583C6;
    color: #FFF;
}

/* 職種・勤務地（白背景＋青枠） */
.jobs_badge.type,
.jobs_badge.loc {
    background-color: #FFF;
    color: #3583C6;
    border: 1px solid #3583C6;
}

.jobs_card_catch {
    font-size: 1.6rem;
    line-height: 2;
    color: #4A4A4A;
    margin-bottom: 2.4rem;
}

.jobs_card_location {
    display: flex;
    align-items: center;
    gap: 2.4rem;
    padding-top: 2.4rem;
    border-top: 1px dashed #D6E4F5;
}

.jobs_card_location_icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #F3F8FB;
    width: 6.4rem;
    height: 6.4rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.jobs_card_location_icon .icon_circle {
    width: 1.8rem;
    height: 2.2rem;
    margin-bottom: 0.4rem;
}

.jobs_card_location_icon .icon_txt {
    font-size: 1.2rem;
    color: #3583C6;
}

.jobs_card_location_txt {
    font-size: 1.6rem;
    line-height: 2;
    color: #4A4A4A;
}

.jobs_no_result {
    font-size: 1.6rem;
    text-align: center;
    padding: 8rem 0;
    color: #4A4A4A;
}

/* ============================================================
  Responsive (Tablet & SP)
============================================================ */
@media (max-width: 1440px) {

    /* 1440px以下になったら柔軟に縮小させる */
    .jobs_layout {
        gap: 4rem;
    }

    .jobs_sidebar {
        width: 32rem;
    }

    .jobs_main {
        width: calc(100% - 32rem - 4rem);
        /* 全体 - サイドバー - ギャップ */
    }
}

@media (max-width: 1024px) {
    .jobs_layout {
        flex-direction: column;
        gap: 4rem;
    }

    .jobs_sidebar {
        position: static;
        width: 100%;
        display: flex;
        gap: 2rem;
        padding: 2.4rem;
    }

    .jobs_sidebar_block {
        flex: 1;
        border-bottom: none;
        padding-bottom: 0;
        margin-bottom: 0;
        border-right: 1px dotted #D6E4F5;
        padding-right: 2rem;
    }

    .jobs_sidebar_block:last-child {
        border-right: none;
        padding-right: 0;
    }

    .jobs_main {
        width: 100%;
    }

    .jobs_search_form {
        flex-wrap: wrap;
    }

    .jobs_search_select_wrap {
        min-width: calc(33.333% - 1.6rem);
    }
}

@media (max-width: 767px) {
    .jobs_archive_wrapper {
        padding: 4rem 0 0rem;
    }

    .jobs_search_area {
        padding: 1.6rem;
        border-radius: 12px;
        margin-bottom: 4rem;
    }

    .jobs_search_form {
        flex-direction: column;
        gap: 1.2rem;
    }

    .jobs_search_select_wrap {
        width: 100%;
        min-width: 100%;
        padding: 1rem 1.6rem;
    }

    .jobs_search_btn {
        width: 100%;
        padding: 1.6rem;
        margin-top: 1rem;
    }

    .jobs_sidebar {
        display: none;
        /* スマホ時はサイドバーを非表示にし上部検索に依存 */
    }

    .jobs_card {
        padding: 2.4rem 1.6rem;
    }

    .jobs_card_ttl {
        font-size: 1.8rem;
    }

    .jobs_card_location {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .jobs_card_location_icon {
        flex-direction: row;
        width: auto;
        height: auto;
        background: none;
        gap: 0.8rem;
    }

    .jobs_card_location_icon .icon_circle {
        margin-bottom: 0;
    }
}




/* ============================================================
  Pagination / ページネーション (news.css完全一致)
============================================================ */
.news_pagination {
    margin-top: 8rem;
    display: flex;
    justify-content: center;
}

.news_pagination ul.page-numbers {
    display: flex;
    align-items: center;
    gap: 2.4rem;
}

.news_pagination a.page-numbers,
.news_pagination span.page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: 8px;
    font-family: "Saira", sans-serif;
    font-weight: bold;
    font-size: 2rem;
    color: #3583C6;
    transition: all 0.15s ease;
    text-decoration: none;
}

/* Current Page / 現在のページ */
.news_pagination .current {
    background-color: #3583C6;
    color: #FFF !important;
}

/* Prev・Next / 前へ・次へボタン共通設定 */
.news_pagination .prev,
.news_pagination .next {
    background-color: #3583C6;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease;
}

/* Center SVG / SVG矢印の配置調整 */
.news_pagination .prev svg,
.news_pagination .next svg {
    width: auto;
    height: 1rem;
    display: block;
}

/* Hover Effect / ホバー時の挙動 */
@media (hover: hover) {
    .news_pagination a.page-numbers:hover {
        background-color: #D6E4F5;
    }

    .news_pagination .prev:hover,
    .news_pagination .next:hover {
        background-color: #2F86C9 !important;
        opacity: 0.9;
    }
}

@media (any-hover: none) {
    .news_pagination a.page-numbers:active {
        background-color: #D6E4F5;
    }
}

/* --- Responsive --- */
@media (max-width: 767px) {
    .news_pagination ul.page-numbers {
        gap: 1.2rem;
    }

    .news_pagination a.page-numbers,
    .news_pagination span.page-numbers {
        width: 3.2rem;
        height: 3.2rem;
        font-size: 1.6rem;
    }

    .news_pagination .prev svg,
    .news_pagination .next svg {
        height: 0.8rem;
    }
}


/* 検索ボタンとクリアボタンをまとめるグループ */
.jobs_search_submit_group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
}

/* クリアボタンのスタイル */
.jobs_search_clear {
    font-size: 1.4rem;
    color: #4A4A4A;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: color 0.2s ease;
    position: relative;
}

.jobs_search_clear::before {
    content: "✕"; /* シンプルなバツ印 */
    margin-right: 0.6rem;
    font-size: 1.2rem;
}

.jobs_search_clear:hover {
    color: #3583C6;
    &::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 1px;
        background-color: #3583C6;
    }
}

/* タブレット・PCでのレイアウト調整 */
@media (min-width: 1025px) {
    .jobs_search_form {
        align-items: flex-start; 
    }
    
    .jobs_search_submit_group {
        flex-shrink: 0;
    }
}

/* スマホでの調整 */
@media (max-width: 767px) {
    .jobs_search_submit_group {
        width: 100%;
        margin-top: 1rem;
    }
    
    .jobs_search_clear {
        padding: 1rem; /* タップ領域の確保 */
    }
}