@charset "UTF-8";
/**
 * スポキャリ 求人詳細ページ（detail.html）専用レスポンシブスタイルシート
 * PC表示のレイアウトを維持しつつ、タブレット・スマホ表示（768px以下）を劇的に最適化します。
 */

/* ==========================================================================
   タブレット・スマホ共通（画面幅 960px 以下）の調整
   ========================================================================== */
@media screen and (max-width: 980px) {
    #wrapper {
        width: 100% !important;
        min-width: 100% !important;
        box-sizing: border-box;
        overflow-x: hidden;
    }
    #content {
        width: 100% !important;
        box-sizing: border-box;
        padding: 0 15px;
    }
    #mainContent {
        width: 100% !important;
        float: none !important;
        box-sizing: border-box;
    }
}

/* ==========================================================================
   スマートフォン表示（画面幅 768px 以下）の完全最適化
   ========================================================================== */
@media screen and (max-width: 768px) {
    /* 1. 全体レイアウト・コンテナのリセット */
    body {
        -webkit-text-size-adjust: 100%;
        padding-bottom: 70px; /* 固定応募バー用の余白 */
    }

    #wrapper {
        padding: 0;
        margin: 0;
    }

    #contentHeader {
        display: none !important;
    }

    /* 2. パンくずリスト */
    #topics {
        width: 100% !important;
        padding: 10px 15px !important;
        box-sizing: border-box;
        font-size: 12px;
        line-height: 1.5;
        overflow-x: auto;
        white-space: nowrap;
        background: #f8fafc;
        border-bottom: 1px solid #e2e8f0;
    }
    #topics ol {
        display: flex;
        flex-wrap: nowrap;
        margin: 0;
        padding: 0;
    }
    #topics li {
        display: inline;
        white-space: nowrap;
    }
    #update {
        display: none;
    }

    /* 3. 求人タイトル・ヘッダーエリア (.detailBox) */
    .detailBox {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        height: auto !important;
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 12px !important;
        padding: 16px !important;
        box-sizing: border-box !important;
        margin-bottom: 20px !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
    }

    .detailBox .left {
        width: 100% !important;
        float: none !important;
        margin-bottom: 12px !important;
    }

    .detailBox .left h3 {
        font-size: 14px !important;
        color: #64748b !important;
        font-weight: 600 !important;
        margin: 0 0 6px 0 !important;
    }

    .detailBox .left h4 {
        font-size: 18px !important;
        line-height: 1.4 !important;
        color: #0f172a !important;
        font-weight: bold !important;
        margin: 0 0 10px 0 !important;
    }

    .detailBox .left p {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
        font-size: 13px;
        color: #2563eb;
        font-weight: bold;
        margin: 0;
    }

    .detailBox .right {
        width: 100% !important;
        float: none !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 8px !important;
    }

    .detailBox .right .update {
        font-size: 12px;
        color: #94a3b8;
        margin: 0 0 6px 0;
        text-align: center;
    }

    /* アクションボタンコンテナ */
    .detail-action-buttons {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        align-items: center !important;
    }

    .detail-action-buttons .inner {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    /* 検討中に追加ボタン（CSSスタイル・画像不要） */
    .btn-detail-bookmark {
        width: 100% !important;
        max-width: 320px !important;
        height: 40px !important;
        line-height: 40px !important;
        background: #fefce8 !important;
        border: 1px solid #fef08a !important;
        color: #854d0e !important;
        font-size: 13px !important;
        font-weight: bold !important;
        border-radius: 8px !important;
        text-align: center !important;
        cursor: pointer !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        box-sizing: border-box !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
        transition: all 0.2s ease !important;
    }

    .btn-detail-bookmark:active {
        background: #fef08a !important;
        transform: scale(0.98);
    }

    /* 求人応募フォームへボタン（CSSスタイル・画像不要・主役ボタン） */
    .btn-detail-entry {
        width: 100% !important;
        max-width: 320px !important;
        height: 48px !important;
        line-height: 48px !important;
        background: linear-gradient(135deg, #f97316, #ea580c) !important;
        color: #ffffff !important;
        font-size: 16px !important;
        font-weight: bold !important;
        border-radius: 8px !important;
        border: none !important;
        text-align: center !important;
        text-decoration: none !important;
        box-shadow: 0 3px 10px rgba(234, 88, 12, 0.35) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        box-sizing: border-box !important;
        transition: all 0.2s ease !important;
    }

    .btn-detail-entry:active {
        transform: scale(0.98);
        box-shadow: 0 1px 4px rgba(234, 88, 12, 0.4) !important;
    }

    .btn-detail-entry.disabled {
        background: #94a3b8 !important;
        color: #ffffff !important;
        box-shadow: none !important;
        cursor: not-allowed !important;
    }

    /* 電話予約ボックス */
    .yoyaku_tel_box {
        width: 100% !important;
        max-width: 320px !important;
        box-sizing: border-box !important;
        margin-bottom: 8px !important;
    }

    /* 4. メイン画像 & PRエリア (.infomation) */
    .infomation {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 12px !important;
        padding: 16px !important;
        box-sizing: border-box !important;
        margin-bottom: 20px !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
    }

    .infomation .left {
        width: 100% !important;
        float: none !important;
        margin-bottom: 14px !important;
    }

    .infomation .left img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        border-radius: 8px !important;
        display: block !important;
        object-fit: cover;
    }

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

    .infomation .right h3 {
        font-size: 16px !important;
        color: #1e3a8a !important;
        font-weight: bold !important;
        line-height: 1.4 !important;
        margin: 0 0 10px 0 !important;
        border-left: 4px solid #3b82f6;
        padding-left: 8px;
    }

    .infomation .right p {
        font-size: 14px !important;
        line-height: 1.7 !important;
        color: #334155 !important;
        margin: 0 !important;
    }

    /* 5. サブ写真ギャラリー (.detailImage) */
    .detailImage {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
        width: 100% !important;
        margin-bottom: 24px !important;
        box-sizing: border-box !important;
    }

    .detailImage .left,
    .detailImage .right {
        width: 100% !important;
        float: none !important;
        margin: 0 !important;
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        padding: 8px;
        box-sizing: border-box;
    }

    .detailImage .img {
        width: 100% !important;
        aspect-ratio: 4/3;
        overflow: hidden;
        border-radius: 6px;
        margin-bottom: 6px;
    }

    .detailImage .img img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
    }

    .detailImage p {
        font-size: 12px !important;
        line-height: 1.4 !important;
        color: #475569 !important;
        margin: 0 !important;
    }

    /* 6. 募集要項 ＆ 企業情報テーブル (.jobInfo) */
    h3.mb10 img {
        width: 100% !important;
        height: auto !important;
        border-radius: 6px;
        margin-bottom: 12px;
    }

    .jobInfo {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 20px !important;
        margin-bottom: 24px !important;
    }

    /* 募集内容テーブル（左） */
    .jobInfo table.left {
        width: 100% !important;
        float: none !important;
        border: 1px solid #cbd5e1 !important;
        border-radius: 8px !important;
        overflow: hidden;
        border-collapse: separate !important;
        border-spacing: 0 !important;
        background: #fff;
    }

    .jobInfo table.left tr {
        display: flex !important;
        flex-direction: column !important;
        border-bottom: 1px solid #e2e8f0 !important;
    }
    .jobInfo table.left tr:last-child {
        border-bottom: none !important;
    }

    .jobInfo table.left th {
        width: 100% !important;
        background: #f1f5f9 !important;
        color: #334155 !important;
        font-size: 13px !important;
        font-weight: bold !important;
        padding: 8px 12px !important;
        text-align: left !important;
        box-sizing: border-box;
        border: none !important;
    }

    .jobInfo table.left td {
        width: 100% !important;
        padding: 12px !important;
        font-size: 14px !important;
        line-height: 1.6 !important;
        color: #0f172a !important;
        box-sizing: border-box;
        border: none !important;
    }

    /* 企業情報テーブル（右） */
    .jobInfo table.right {
        width: 100% !important;
        float: none !important;
        border: 1px solid #cbd5e1 !important;
        border-radius: 8px !important;
        overflow: hidden;
        border-collapse: separate !important;
        border-spacing: 0 !important;
        background: #fff;
    }

    .jobInfo table.right th {
        background: #e2e8f0 !important;
        color: #1e293b !important;
        font-size: 14px !important;
        font-weight: bold !important;
        padding: 10px 12px !important;
        border: none !important;
        text-align: left !important;
    }

    .jobInfo table.right td {
        padding: 14px !important;
        box-sizing: border-box;
        border: none !important;
    }

    /* 7. 企業からのメッセージ (.companyMessage) */
    .companyMessage {
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 16px !important;
        background: #f8fafc !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 8px !important;
        margin-bottom: 20px !important;
    }
    .companyMessageFooter {
        display: none !important;
    }

    /* 8. 応募情報テーブル (.recruitInfoTable) */
    .recruitInfoTable {
        width: 100% !important;
        border: 1px solid #cbd5e1 !important;
        border-radius: 8px !important;
        overflow: hidden;
        border-collapse: separate !important;
        border-spacing: 0 !important;
        background: #fff;
        margin-bottom: 24px !important;
    }

    .recruitInfoTable tr {
        display: flex !important;
        flex-direction: column !important;
        border-bottom: 1px solid #e2e8f0 !important;
    }
    .recruitInfoTable tr:last-child {
        border-bottom: none !important;
    }

    .recruitInfoTable th.top {
        background: #0284c7 !important;
        color: #ffffff !important;
        font-size: 15px !important;
        padding: 10px 14px !important;
        text-align: left !important;
    }

    .recruitInfoTable th.w130 {
        width: 100% !important;
        background: #f1f5f9 !important;
        color: #334155 !important;
        font-size: 13px !important;
        padding: 8px 12px !important;
        text-align: left !important;
        box-sizing: border-box;
    }

    .recruitInfoTable td {
        width: 100% !important;
        padding: 12px !important;
        font-size: 14px !important;
        line-height: 1.6 !important;
        box-sizing: border-box;
    }

    /* 地図を表示ボタンのスマホ最適化 */
    p.map a {
        display: inline-block;
        background: #2563eb;
        color: #ffffff !important;
        padding: 8px 16px;
        border-radius: 6px;
        text-decoration: none;
        font-weight: bold;
        font-size: 13px;
        margin-top: 6px;
    }

    /* 9. スマホ画面下部へのフローティング応募バー */
    .sp-floating-cta {
        display: flex !important;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        background: rgba(255, 255, 255, 0.96);
        backdrop-filter: blur(8px);
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12);
        padding: 10px 16px;
        box-sizing: border-box;
        z-index: 99999;
        align-items: center;
        gap: 12px;
    }

    .sp-floating-cta .btn-bookmark {
        flex: 1;
        background: #f1f5f9;
        border: 1px solid #cbd5e1;
        color: #334155;
        border-radius: 8px;
        font-size: 12px;
        font-weight: bold;
        padding: 12px 0;
        text-align: center;
        text-decoration: none;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
    }

    .sp-floating-cta .btn-entry {
        flex: 2;
        background: linear-gradient(135deg, #f97316, #ea580c);
        color: #ffffff !important;
        border-radius: 8px;
        font-size: 15px;
        font-weight: bold;
        padding: 12px 0;
        text-align: center;
        text-decoration: none;
        box-shadow: 0 2px 8px rgba(234, 88, 12, 0.35);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }
}

/* PC（769px以上）のボタンスタイルおよびフローティングバー非表示 */
@media screen and (min-width: 769px) {
    .sp-floating-cta {
        display: none !important;
    }

    .detail-action-buttons {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }

    .btn-detail-bookmark {
        display: block;
        width: 180px;
        height: 38px;
        line-height: 38px;
        background: linear-gradient(to bottom, #fffde7, #fff59d);
        border: 1px solid #fbc02d;
        border-radius: 6px;
        color: #78350f;
        font-size: 13px;
        font-weight: bold;
        text-align: center;
        cursor: pointer;
        margin-bottom: 8px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
        box-sizing: border-box;
    }

    .btn-detail-bookmark:hover {
        background: #fff59d;
    }

    .btn-detail-entry {
        display: block;
        width: 180px;
        height: 54px;
        line-height: 54px;
        background: linear-gradient(135deg, #f97316, #ea580c);
        border: none;
        border-radius: 6px;
        color: #ffffff !important;
        font-size: 16px;
        font-weight: bold;
        text-align: center;
        text-decoration: none;
        box-shadow: 0 2px 6px rgba(234, 88, 12, 0.35);
        box-sizing: border-box;
    }

    .btn-detail-entry:hover {
        filter: brightness(1.05);
    }

    .btn-detail-entry.disabled {
        background: #94a3b8;
        color: #ffffff;
        box-shadow: none;
        cursor: not-allowed;
    }
}