/* アンカーをなめらかに＆着地点の見切れ防止 */
html{ scroll-behavior:smooth; }
#spec, #entry{ scroll-margin-top:96px; }

/* ===== ベース ===== */
    *,*::before,*::after{ box-sizing:border-box; }
    html,body{ margin:0; padding:0; }
    body{
    background-image: url('../pc-fixed-bg.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    }

    .container{
        max-width:960px;
        margin:0 auto;
        padding:40px 16px 72px;
    }
    h1,h2,h3{ margin:0 0 16px; color:#111; }
    p{ margin:0 0 16px; color:#222; }

/* ===== カード ===== */
    .recruit-card,
    .recruit-spec,
    .recruit-entry{
        background: rgba(255,255,255,0.28);
        backdrop-filter: blur(30px) saturate(180%);
        -webkit-backdrop-filter: blur(30px) saturate(180%);

        border: 1px solid rgba(255,255,255,0.45);
        border-radius: 20px;
        box-shadow:
        0 8px 32px rgba(31,38,135,0.15),
        inset 0 0 0.5px rgba(255,255,255,0.9),
        inset 0 0 20px rgba(255,255,255,0.25);

    padding: 42px 28px 50px;
    }

    /* 募集要項カードとエントリーカードの間にギャップ */
    .recruit-spec{ margin-bottom:80px; }
    .recruit-entry{ margin-top:8px; }

    /* 見出し */
    .recruit-spec h2,
    .recruit-entry h2{
        text-align: center;
        font-size:22px;
        font-weight:800;
        color:#333;
        margin:0 0 24px;
    }

    /* ===== 募集要項 行レイアウト ===== */
    .recruit-rows{
        display:grid;
        gap:15px;
    }

    /* 行そのものを “ピル型” に */
    .recruit-row{
        display:grid;
        grid-template-columns: 8em 1fr;
        align-items:center;
        gap:12px;
        padding:15px 16px;
        border-radius:10px;
        background:#f8f8f8;
        border:1px solid #e7e7e7;
    }

    /* 左のラベル */
    .recruit-term{
        margin:0;
        font-weight:700;
        color:#555;
        white-space:nowrap;
        padding-left: 20px;
    }

    /* 右のテキスト */
    .recruit-desc{
        margin:0;
        color:#111;
        padding-left: 20px;
}

/* ===== CF7：応募フォーム用スタイル ===== */
    .wpcf7{ margin-top:16px; }
    .wpcf7 form{
        display:grid;
        gap:18px;
    }

    /* 1項目ぶんの枠 */
    .form-row{
        display:flex;
        flex-direction:column;
        gap:6px;
    }

    /* ─ ラベル行（設問＋バッジ） ─ */
    .form-label{
        display:flex;
        align-items:center;
        gap:8px;
        font-size:14px;
        font-weight:700;
        color:#444;
        line-height:1;
        margin:0;
    }

    /* 必須 / 任意バッジ */
    .badge{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        padding:0 10px;
        margin-top: 12px;
        min-width:40px;
        height:22px;
        border-radius:999px;
        font-size:11px;
        line-height:1;
        box-sizing:border-box;
    }
    .badge-required{
        background:#ff4b4b;
        color:#fff;
    }
    .badge-optional{
        background:#e9ecf1;
        color:#555;
    }

    /* ─ 入力系パーツ共通 ─ */
    .form-control,
    .wpcf7 input[type="text"],
    .wpcf7 input[type="email"],
    .wpcf7 input[type="tel"],
    .wpcf7 textarea,
    .wpcf7 select{
        width:100%;
        padding:12px 14px;
        border-radius:8px;
        border:1px solid #ddd;
        background:#fff;
        color:#111;
        font-size:14px;
        outline:none;
        box-sizing:border-box;
    }

    .wpcf7 textarea,
    .form-control.wpcf7-textarea{
        min-height:140px;
        resize:vertical;
    }

    .wpcf7 ::placeholder{ color:#9aa1a7; }

    /* フォーカス */
    .wpcf7 input:focus,
    .wpcf7 textarea:focus,
    .wpcf7 select:focus{
        border-color:#4f7cff;
        box-shadow:0 0 0 3px rgba(79,124,255,.15);
    }

    /* ─ ラジオ/チェック：pill ─ */
    .form-options{
        display:flex;
        flex-wrap:wrap;
        gap:30px;
    }

    /* CF7 ラッパーの余白リセット */
    .form-options .wpcf7-list-item{
        margin:0;
    }

    /* ラベル全体を pill にする */
    .form-options .wpcf7-list-item label{
        display:inline-flex;
        align-items:center;
        gap:6px;
        margin: 7px;
        padding:6px 14px;
        border-radius:999px;
        background:#f5f7fa;
        border:1px solid #e0e3ea;
        font-size:13px;
        line-height:1.2;
        cursor:pointer;
        transition:background .15s ease, border-color .15s ease;
    }

    /* 実際のラジオ/チェック */
    .form-options input[type="radio"],
    .form-options input[type="checkbox"]{
        accent-color:#111;
        margin-bottom: 4px;
    }

    /* hover時の変化 */
    .form-options .wpcf7-list-item label:hover{
        background:#edf1ff;
        border-color:#4f7cff;
    }

    /* ─ドロップダウン用─ */
    .wpcf7 select{
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 40px;
    background-color: #fff;

    /* 下向き三角アイコン（より自然な▼） */
    background-image: 
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='%23999'><path d='M7 10l5 5 5-5z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 14px;
    }

    /* ─ 送信ボタン行 ─ */
    .form-row-submit{
        margin-top: 24px;
        text-align: center;
        width: 100%;
    }

    /* ─ 送信ボタン本体 ─ */
    .form-submit,
    .wpcf7 input[type="submit"],
    .wpcf7 button{
        appearance:none;
        border:0;
        border-radius:999px;
        padding:14px 48px;
        min-width: 400px;
        background:#111;
        color:#fff;
        font-weight:700;
        font-size:16px;
        cursor:pointer;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        gap:6px;
        transition:transform .15s ease, opacity .15s ease, filter .15s ease;
        margin: 0 auto;
    }

    /* ホバー */
    .wpcf7 input[type="submit"]:hover{
        filter:brightness(1.05);
        transform:translateY(-2px);
        background:#FAF9FA;
        color:#333;
        border: 1px solid #333;
    }

    /* メッセージ */
    .wpcf7-response-output{
    margin-top:8px;
    padding:10px 12px;
    border-radius:8px;
    border:1px solid #e6e6e6;
    font-size:13px;
    }

    /* エラー */
    .wpcf7-not-valid-tip{
    margin-top:4px;
    font-size:12px;
    color:#d93025;
    }
    .wpcf7 form.invalid .wpcf7-response-output{
    border-color:#d93025;
    background:#fff5f5;
    }

/* ===== タブUI ===== */
    .recruit-tabs{
        margin: 0 0 24px;
    }

    /* タブボタンの外側 */
    .recruit-tabs .tab-buttons{
        display:flex;
        flex-wrap:wrap;
        gap:8px;
        margin:0 0 16px;
        padding:4px;
        list-style:none;
        justify-content:center;
    }

    /* 1コ1コのタブボタン */
    .recruit-tabs .tab-buttons li{
        padding:8px 18px;
        border-radius:999px;
        cursor:pointer;
        background:rgba(255,255,255,0.9);
        color:#222;
        font-size:13px;
        font-weight:600;
        border:1px solid rgba(226,232,240,0.9);
        user-select:none;
        transition:
            background .15s ease,
            color .15s ease,
            border-color .15s ease,
            box-shadow .15s ease,
            transform .15s ease;
        white-space:nowrap;
    }

    /* hover */
    .recruit-tabs .tab-buttons li:hover{
        background:#111;
        color:#fff;
        border-color:#111;
        box-shadow:0 8px 18px rgba(15,23,42,0.25);
        transform:translateY(-1px);
    }

    /* 選択中タブ */
    .recruit-tabs .tab-buttons li.is-active{
        background:#111;
        color:#fff;
        border-color:#111;
        box-shadow:0 8px 20px rgba(15,23,42,0.3);
    }

    /* 中身の切り替え */
    .tab-content{
        display:none;
    }
    .tab-content.is-active{
        display:block;
    }

/*===== リキャプチャ =====*/
    .grecaptcha-badge {
        visibility: hidden;
    }

    .recaptcha-notice {
    font-weight: 700;
    font-size: 8px;
    color: #4E4D52;
    text-align: center;
    width: 100%;
    display: block;
    margin: 8px auto 0;
    }

/* ===== レスポンシブ ===== */
@media (max-width:767px){
    .container{ padding: 40px 12px 56px; }
    .recruit-card,
    .recruit-spec,
    .recruit-entry{
    padding: 20px;
    }
    .recruit-row{
        grid-template-columns: 1fr;
        gap: 4px;
        border-radius: 14px;
        padding: 10px 12px;
    }
    .recruit-tabs .tab-buttons{
        border-radius:16px;
    }
    .recruit-tabs .tab-buttons li{
        flex:1 0 auto;
        font-size:12px;
        padding:8px 12px;
    }
    .wpcf7 form{ gap:16px; }
    .form-label{ font-size:13px; }
    .form-row-submit{
        margin-top: 24px;
        width: 100%;
        display: flex;
        justify-content: center;
    }
    .form-submit,
    .wpcf7 input[type="submit"],
    .wpcf7 button{
        min-width: 240px;
    }
}

/* ===== ダークモード ===== */
@media (prefers-color-scheme: dark) {
    body{
        background-image:
            linear-gradient(rgba(0,0,0,0.40), rgba(0,0,0,0.40)),
            url('../pc-fixed-bg.png');
        background-size: cover;
        background-position: center;
        background-attachment: fixed;
        color:#e6e6e6;
    }

    /* カード類（グラス感維持） */
    .recruit-card,
    .recruit-spec,
    .recruit-entry{
        background: rgba(255,255,255,0.05);
        backdrop-filter: blur(22px) saturate(130%);
        border-color: rgba(255,255,255,0.10);
        box-shadow:
        0 8px 30px rgba(0,0,0,0.45),
        inset 0 0 0.5px rgba(255,255,255,0.15);
    }

    .recruit-spec h2,
    .recruit-entry h2{
        color:#f2f2f2;
    }

    /* 行 */
    .recruit-row{
        background:rgba(255,255,255,0.08);
        border-color:rgba(255,255,255,0.12);
    }

    .recruit-term{
        color:#ccc;
    }
    .recruit-desc{
        color:#f5f5f5;
    }

    /* タブボタン */
    .recruit-tabs .tab-buttons li{
        background:rgba(255,255,255,0.08);
        color:#f2f2f2;
        border-color:rgba(255,255,255,0.12);
    }

    .recruit-tabs .tab-buttons li:hover{
        background:#f2f2f2;
        color:#111;
        border-color:#f2f2f2;
    }

    .recruit-tabs .tab-buttons li.is-active{
        background:#f2f2f2;
        color:#111;
        border-color:#f2f2f2;
    }

    .dm-text,
    .dm-text p{
        color:#f5f5f5 !important;
    }

    /* ── フォームの質問 ── */
    .form-label{
        color:#f5f5f5 !important;
    }

    /* 「氏名」「メールアドレス」等タイトル */
    .form-row label,
    .wpcf7-form .form-row label{
        color:#f5f5f5 !important;
    }

    /* 必須・任意バッジ */
    .badge-required{
        background:#ef4444;
        color:#fff !important;
    }
    .badge-optional{
        background:#e5e7eb;
        color:#111 !important;
    }

    /* フォーム（入力欄） */
    .wpcf7 input[type="text"],
    .wpcf7 input[type="email"],
    .wpcf7 input[type="tel"],
    .wpcf7 textarea,
    .wpcf7 select{
        background:#1a1a1a;
        border-color:#333;
        color:#eee;
    }

    .wpcf7 ::placeholder{
        color:#777;
    }

    /* ラジオ・チェック */
    .form-options .wpcf7-list-item label{
        background:#1a1a1a;
        border-color:#2a2a2a;
        color:#eee;
    }

      /* 選択系のhover時は文字を黒にする */
    .form-options .wpcf7-list-item label:hover{
        color:#f5f5f5 !important;
        border-color:#4f7cff !important;
        background:#111 !important;
    }

    /* チェック済み or 選択済みの状態も黒文字に揃える */
    .form-options input[type="radio"]:checked + span,
    .form-options input[type="checkbox"]:checked + span{
        background:#111 !important;
        border-color:#4f7cff;
    }

      /* ドロップダウンの通常表示 */
      background: #1a1a1a !important;
      border: 1px solid #333 !important;
      color: #f5f5f5 !important;

      /* ▼白い矢印 */
      background-image: url("data:image/svg+xml;utf8,<svg xmlns=%27http://www.w3.org/2000/svg%27 width=%2712%27 height=%2712%27 viewBox=%270 0 24 24%27 fill=%27%23ffffff%27><path d=%27M7 10l5 5 5-5z%27/></svg>");
      background-repeat: no-repeat;
      background-position: right 14px center;
      background-size: 12px;

      /* 余白（既に上で指定してるなら省略OK） */
      padding-right: 40px;
    }

    /* プレースホルダー */
    .wpcf7 select option[disabled],
    .wpcf7 select option[hidden]{
        color:#999 !important;
    }

    /* ホバー時（背景と文字が潰れないように） */
    .wpcf7 select:hover{
        background:#f5f5f5 !important;
        color:#111 !important;
        border-color:#f5f5f5 !important;
    }

    /* フォーカス時（クリックされた状態） */
    .wpcf7 select:focus{
        background:#f5f5f5 !important;
        color:#111 !important;
        border-color:#f5f5f5 !important;
        box-shadow:0 0 0 3px rgba(255,255,255,0.2) !important;
    }

    /* select の ↓ 矢印アイコンも白化 */
    .wpcf7 select{
        background-image:
        linear-gradient(45deg, transparent 50%, #f5f5f5 50%),
        linear-gradient(135deg, #f5f5f5 50%, transparent 50%);
        background-position:
        right 14px center,
        right 9px center;
        background-size:8px 8px;
        background-repeat:no-repeat;
    }

    /* 送信ボタン */
    .form-submit,
    .wpcf7 input[type="submit"],
    .wpcf7 button{
        background:#f5f5f5;
        color:#111;
        border:1px solid transparent;
    }

    .wpcf7 input[type="submit"]:hover{
        background:#111;
        color:#f5f5f5;
        border-color:#f5f5f5;
    }

    .wpcf7 form.invalid .wpcf7-response-output{
    background:#111;
    }

    .recaptcha-notice{color:#fff !important;}
    .recaptcha-notice a{color:#ccc !important;}

}