@charset "UTF-8";
/*
*各CSSファイルの読み込み
*/

@import url('base.css?var=200403');
@import url('style.css?var=200403');
@import url('company.css');
@import url('hack.css');
@import url('landingp.css');
@import url('//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
@import url('responsive-common.css?v=261019k');
@charset "UTF-8";
/**
 * スポキャリ 求人一覧ページ（search.html, new.html）完全最適化スタイルシート
 * PC・タブレット・スマホ全デバイスで表記ずれ・文字被り・黄色テーブル・ボタン見切れを徹底解消
 */

/* ==========================================================================
   1. 求人カード全体（#wrapper #content #mainContent 詳細度完全制圧）
   ========================================================================== */
#wrapper #content #mainContent .bookmarkEntry,
.bookmarkEntry {
    width: 100% !important;
    max-width: 779px !important;
    background: #ffffff !important;
    background-image: none !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 4px !important;
    margin: 0 0 20px 0 !important;
    padding: 16px 18px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

/* 2. カードヘッダー（タイトル ＆ 検討中に追加ボタンの見切れ完全防止） */
#wrapper #content #mainContent .bookmarkEntry .bookmarkEntryHead,
.bookmarkEntryHead {
    width: 100% !important;
    max-width: 100% !important;
    background: none !important;
    background-image: none !important;
    margin: 0 0 12px 0 !important;
    padding: 0 0 10px 0 !important;
    border-bottom: 1px solid #e2e8f0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 10px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

#wrapper #content #mainContent .bookmarkEntry .bookmarkEntryHead h3,
.bookmarkEntryHead h3 {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    margin: 0 !important;
    line-height: 1.4 !important;
    float: none !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 1 1 auto !important;
    min-width: 200px !important;
}

#wrapper #content #mainContent .bookmarkEntry .bookmarkEntryHead h3 span,
.bookmarkEntryHead h3 span {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #64748b !important;
}

/* 検討中に追加ボタン（見切れ解消・上品な白ボタン） */
.btn-detail-bookmark,
#wrapper #content #mainContent .bookmarkEntry .bookmarkEntryHead .btn-detail-bookmark {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 6px 12px !important;
    background: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    color: #334155 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    border-radius: 3px !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.btn-detail-bookmark:hover {
    background: #f8fafc !important;
    border-color: #94a3b8 !important;
    color: #0f172a !important;
}

/* 3. 学校名/屋号 */
.schoolTit,
#wrapper #content #mainContent .bookmarkEntry .schoolTit {
    margin: 0 0 6px 0 !important;
    padding: 0 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #475569 !important;
    text-indent: 0 !important;
    background: none !important;
}

/* 4. 虫眼鏡画像の文字被りを完全解消（h4） */
#wrapper #content #mainContent .bookmarkEntry h4,
.bookmarkEntry h4 {
    background: none !important;
    background-image: none !important;
    text-indent: 0 !important;
    padding-left: 0 !important;
    margin: 0 0 12px 0 !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    letter-spacing: normal !important;
}

#wrapper #content #mainContent .bookmarkEntry h4 a,
.bookmarkEntry h4 a {
    color: #105ea1 !important;
    text-decoration: underline !important;
    font-weight: 700 !important;
    display: inline !important;
}

#wrapper #content #mainContent .bookmarkEntry h4 a:hover,
.bookmarkEntry h4 a:hover {
    color: #0d4a80 !important;
}

/* 5. 求人スペックテーブル（黄色背景完全撤廃・清潔感ある白とグレー） */
#wrapper #content #mainContent .bookmarkEntry table,
.bookmarkEntry table {
    margin: 0 !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-collapse: collapse !important;
    box-sizing: border-box !important;
}

#wrapper #content #mainContent .bookmarkEntry table tr th,
.bookmarkEntry table tr th {
    background: #f8fafc !important;
    color: #475569 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    padding: 8px 12px !important;
    border: 1px solid #e2e8f0 !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
    width: 95px !important;
}

#wrapper #content #mainContent .bookmarkEntry table tr td,
.bookmarkEntry table tr td {
    background: #ffffff !important;
    color: #334155 !important;
    font-size: 13px !important;
    padding: 8px 12px !important;
    border: 1px solid #e2e8f0 !important;
    line-height: 1.5 !important;
    vertical-align: middle !important;
}

/* 6. 右カラム（求人画像 & 詳細ボタン & 更新日） */
#wrapper #content #mainContent .bookmarkEntry .right,
.bookmarkEntry .right {
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    box-sizing: border-box !important;
}

#wrapper #content #mainContent .bookmarkEntry .right img,
.bookmarkEntry .right img {
    max-width: 180px !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    border-radius: 2px !important;
    object-fit: cover !important;
}

/* 詳細ボタン（モダンオレンジボタン：文字消失を完全防止する::after生成） */
.btn-job-detail,
a.btn-job-detail,
#wrapper #content #mainContent .bookmarkEntry .right a.btn-job-detail,
#wrapper #content #mainContent .bookmarkEntry .right a,
.bookmarkEntry .right a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 180px !important;
    height: 44px !important;
    background: #ea580c !important;
    color: #ffffff !important;
    font-size: 0 !important; /* HTML内の生テキストや空白を非表示にして重複防止 */
    text-decoration: none !important;
    border-radius: 3px !important;
    box-sizing: border-box !important;
    transition: all 0.15s ease !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) !important;
    margin: 4px 0 !important;
    cursor: pointer !important;
}

/* ::after で常にクッキリ鮮明な純白太字を描画（HTMLに文字が無くても絶対に文字が消えない） */
#wrapper #content #mainContent .bookmarkEntry .right a::after,
.bookmarkEntry .right a::after {
    content: "求人情報の詳細を見る >" !important;
    color: #ffffff !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
    text-decoration: none !important;
    display: inline-block !important;
}

.btn-job-detail:hover,
a.btn-job-detail:hover,
#wrapper #content #mainContent .bookmarkEntry .right a.btn-job-detail:hover,
#wrapper #content #mainContent .bookmarkEntry .right a:hover,
.bookmarkEntry .right a:hover {
    background: #c2410c !important;
    color: #ffffff !important;
    text-decoration: none !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important;
}

/* 古い画像ボタンは完全非表示 */
#wrapper #content #mainContent .bookmarkEntry .right a img,
.bookmarkEntry .right a img {
    display: none !important;
}

#wrapper #content #mainContent .bookmarkEntry .right .update,
.bookmarkEntry .right .update {
    font-size: 11px !important;
    color: #64748b !important;
    margin: 0 !important;
}
/* 7. 古いカードフッター画像の完全非表示（不自然な二重下線を解消） */
#wrapper #content #mainContent .bookmarkEntry .bookmarkEntryFooter,
.bookmarkEntryFooter {
    display: none !important;
}

/* 8. ページネーション（.pagingList）モダン化 */
.pagingList {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin: 30px 0 !important;
    padding: 0 !important;
}

.pagingList a,
.pagingList span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 36px !important;
    height: 36px !important;
    padding: 0 10px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    border-radius: 2px !important;
    box-sizing: border-box !important;
}

.pagingList a {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #334155 !important;
}

.pagingList a:hover {
    background: #f1f5f9 !important;
    border-color: #94a3b8 !important;
    color: #0f172a !important;
}

.pagingList span {
    background: #105ea1 !important;
    border: 1px solid #0d4a80 !important;
    color: #ffffff !important;
}

/* ==========================================================================
   PCレイアウト（769px以上）：テーブルと右カラムの2カラム並列
   ========================================================================== */
@media screen and (min-width: 769px) {
    #wrapper #content #mainContent .bookmarkEntry table,
    .bookmarkEntry table {
        width: calc(100% - 200px) !important;
        float: left !important;
    }

    #wrapper #content #mainContent .bookmarkEntry .right,
    .bookmarkEntry .right {
        width: 180px !important;
        float: right !important;
    }
}

/* ==========================================================================
   スマートフォン対応（768px以下）：完全縦並びレスポンシブ
   ========================================================================== */
@media screen and (max-width: 768px) {
    #content {
        width: 100% !important;
        padding: 0 12px 40px 12px !important;
        box-sizing: border-box !important;
    }

    #contentHeader {
        display: none !important;
    }

    #mainContent {
        width: 100% !important;
        float: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #mainContent > h2 img {
        max-width: 150px !important;
        height: auto !important;
        margin-bottom: 8px !important;
    }

    /* 求人カードスマホ化 */
    #wrapper #content #mainContent .bookmarkEntry,
    .bookmarkEntry {
        padding: 14px !important;
        margin-bottom: 16px !important;
    }

    #wrapper #content #mainContent .bookmarkEntry .bookmarkEntryHead,
    .bookmarkEntryHead {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }

    #wrapper #content #mainContent .bookmarkEntry .bookmarkEntryHead h3,
    .bookmarkEntryHead h3 {
        width: 100% !important;
        font-size: 15px !important;
    }

    .btn-detail-bookmark,
    #wrapper #content #mainContent .bookmarkEntry .bookmarkEntryHead .btn-detail-bookmark {
        width: 100% !important;
        height: 36px !important;
        font-size: 13px !important;
    }

    #wrapper #content #mainContent .bookmarkEntry table,
    .bookmarkEntry table {
        width: 100% !important;
        float: none !important;
        display: block !important;
        margin-bottom: 12px !important;
    }

    #wrapper #content #mainContent .bookmarkEntry table tbody,
    .bookmarkEntry table tbody {
        display: block !important;
        width: 100% !important;
    }

    #wrapper #content #mainContent .bookmarkEntry table tr,
    .bookmarkEntry table tr {
        display: flex !important;
        flex-direction: column !important;
        padding: 6px 0 !important;
        border-bottom: 1px solid #f1f5f9 !important;
    }

    #wrapper #content #mainContent .bookmarkEntry table tr:last-child,
    .bookmarkEntry table tr:last-child {
        border-bottom: none !important;
    }

    #wrapper #content #mainContent .bookmarkEntry table tr th,
    .bookmarkEntry table tr th {
        width: 100% !important;
        font-size: 11px !important;
        padding: 0 0 2px 0 !important;
        border: none !important;
        background: transparent !important;
    }

    #wrapper #content #mainContent .bookmarkEntry table tr td,
    .bookmarkEntry table tr td {
        width: 100% !important;
        font-size: 13px !important;
        padding: 0 !important;
        border: none !important;
    }

    #wrapper #content #mainContent .bookmarkEntry .right,
    .bookmarkEntry .right {
        width: 100% !important;
        float: none !important;
        margin-top: 10px !important;
        padding-top: 10px !important;
        border-top: 1px solid #e2e8f0 !important;
    }

    #wrapper #content #mainContent .bookmarkEntry .right img,
    .bookmarkEntry .right img {
        max-width: 100% !important;
        max-height: 200px !important;
    }

    .btn-job-detail,
    a.btn-job-detail,
    #wrapper #content #mainContent .bookmarkEntry .right a.btn-job-detail,
    .bookmarkEntry .right a {
        width: 100% !important;
        max-width: 100% !important;
        height: 46px !important;
        font-size: 15px !important;
    }
    /* 絞込検索フォーム・親コンテナのスマホ完全最適化（横はみ出し完全防止） */
    #wrapper #content #mainContent,
    #mainContent {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    #wrapper #content #mainContent .narrowingEntry,
    .narrowingEntry {
        width: 100% !important;
        max-width: 100% !important;
        padding: 6px !important;
        margin: 0 0 15px 0 !important;
        box-sizing: border-box !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 4px !important;
        background: #ffffff !important;
    }

    #wrapper #content #mainContent .narrowingEntry .narrowingFormBox,
    .narrowingFormBox {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .sp-filter-section {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .sp-chip-grid {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        padding: 10px 8px !important;
        box-sizing: border-box !important;
    }

    .sp-chip-item span {
        padding: 6px 10px !important;
        font-size: 12px !important;
        white-space: nowrap !important;
    }

    /* 検索結果ヘッダーのスマホ最適化 */
    .searchResult,
    .searchResult2,
    .searchResult3 {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        box-sizing: border-box !important;
    }

    .searchResult2 .search-condition-label {
        display: block !important;
        margin-bottom: 4px !important;
    }

    .searchResult2 .right {
        width: 100% !important;
        float: none !important;
    }
}

/* NEWバッジの超高視認性スタイル（鮮烈な赤 × 純白太字） */
.badge-new-pill,
#wrapper #content .badge-new-pill,
#wrapper #content #mainContent .bookmarkEntry .bookmarkEntryHead .badge-new-pill {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #dc2626 !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
    line-height: 1 !important;
    padding: 3px 6px !important;
    border-radius: 2px !important;
    vertical-align: middle !important;
    margin: 0 6px !important;
    text-shadow: none !important;
    box-shadow: 0 1px 2px rgba(220, 38, 38, 0.25) !important;
}

#wrapper #content .badge-new-pill *,
#wrapper #content #mainContent .bookmarkEntry .bookmarkEntryHead .badge-new-pill * {
    color: #ffffff !important;
}