/* =============================================================================
   採用HP 共通テーマ（2026-11 リニューアル）
   採用TOP（/recruit/）の雰囲気に合わせるための共通スタイル。
   <body> に付けたクラスで色の系統を切り替える。
     theme-general … 会社を知る系（濃紺）
     theme-career  … 中途採用系（青）
     theme-part    … アルバイト・パート系（緑）
   ※新卒関連ページでは読み込まないこと
   ============================================================================= */

/* ---- テーマごとの色 ---- */
.theme-general {
    --th-header: linear-gradient(90deg, #141a54 0%, #0d2a7a 60%, #0f5cb8 100%);
    --th-header-solid: #141a54;
    --th-hero:
        radial-gradient(circle at 85% 20%, rgba(0, 122, 199, .55) 0%, rgba(0, 122, 199, 0) 45%),
        radial-gradient(circle at 10% 90%, rgba(255, 79, 0, .25) 0%, rgba(255, 79, 0, 0) 40%),
        linear-gradient(135deg, #141a54 0%, #0d2a7a 55%, #0f5cb8 100%);
    --th-main: #0f5cb8;
    --th-soft: #f3f7fc;
}

.theme-career {
    --th-header: linear-gradient(90deg, #0b3c86 0%, #0062b8 55%, #0a8fd8 100%);
    --th-header-solid: #0b4a99;
    --th-hero:
        radial-gradient(circle at 85% 20%, rgba(150, 205, 255, .45) 0%, rgba(150, 205, 255, 0) 45%),
        radial-gradient(circle at 10% 90%, rgba(255, 79, 0, .22) 0%, rgba(255, 79, 0, 0) 40%),
        linear-gradient(135deg, #0b3c86 0%, #0062b8 55%, #0a8fd8 100%);
    --th-main: #007ac7;
    --th-soft: #f0f7fd;
}

.theme-part {
    --th-header: linear-gradient(90deg, #063f2d 0%, #00804e 55%, #16a86a 100%);
    --th-header-solid: #075a3c;
    --th-hero:
        radial-gradient(circle at 85% 20%, rgba(160, 235, 190, .4) 0%, rgba(160, 235, 190, 0) 45%),
        radial-gradient(circle at 10% 90%, rgba(255, 79, 0, .22) 0%, rgba(255, 79, 0, 0) 40%),
        linear-gradient(135deg, #063f2d 0%, #00804e 55%, #16a86a 100%);
    --th-main: #008853;
    --th-soft: #f1f8f4;
}

/* ---- 書体 ---- */
.theme-general,
.theme-career,
.theme-part,
.theme-general .font-sans,
.theme-career .font-sans,
.theme-part .font-sans,
.theme-general .font-sawarabi,
.theme-career .font-sawarabi,
.theme-part .font-sawarabi {
    font-family: "Noto Sans JP", sans-serif !important;
}

.theme-general main h1,
.theme-general main h2,
.theme-career main h1,
.theme-career main h2,
.theme-part main h1,
.theme-part main h2 {
    font-weight: 900;
    letter-spacing: .02em;
}

/* ---- ヘッダー ---- */
.theme-general > header,
.theme-career > header,
.theme-part > header {
    background: var(--th-header) !important;
    border: 0 !important;
    box-shadow: 0 6px 24px -10px rgba(0, 0, 0, .45) !important;
}

/* ヘッダーの中身の横幅を採用TOP・中途TOPと同じ（最大1152px）に */
.theme-general > header > .container,
.theme-career > header > .container,
.theme-part > header > .container {
    max-width: 72rem !important;
}

/* テーマのグラデーション背景（ページ上部の帯などに使う） */
.th-hero {
    background: var(--th-hero) !important;
}

/* メニュー文字 */
.theme-general > header nav a,
.theme-career > header nav a,
.theme-part > header nav a {
    color: #fff !important;
    font-weight: 700;
    font-style: normal !important;
}

/* スマホで開くメニューの背景 */
@media (max-width: 767px) {

    .theme-general > header nav,
    .theme-career > header nav,
    .theme-part > header nav {
        background: var(--th-header-solid) !important;
        box-shadow: 0 12px 24px -12px rgba(0, 0, 0, .5);
    }

    .theme-general > header nav li,
    .theme-career > header nav li,
    .theme-part > header nav li {
        border-color: rgba(255, 255, 255, .12) !important;
    }
}

/* PCのメニュー：ホバーで少し明るく */
@media (min-width: 768px) {

    .theme-general > header nav a:hover,
    .theme-career > header nav a:hover,
    .theme-part > header nav a:hover {
        background: rgba(255, 255, 255, .14) !important;
        border-radius: 9999px;
    }

    /* エントリーボタンはオレンジの丸ボタンに */
    .theme-general > header nav a[href$="/recruit/line"],
    .theme-career > header nav a[href*="career-line"],
    .theme-part > header nav a[href*="part-time-line"] {
        background: #ff4f00 !important;
        border: 0 !important;
        border-radius: 9999px !important;
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
        margin-left: .5rem;
        box-shadow: 0 6px 16px -6px rgba(255, 79, 0, .7);
    }

    .theme-general > header nav a[href$="/recruit/line"]:hover,
    .theme-career > header nav a[href*="career-line"]:hover,
    .theme-part > header nav a[href*="part-time-line"]:hover {
        opacity: .9;
        background: #ff4f00 !important;
    }
}

/* ---- フッター ---- */
.theme-general footer,
.theme-career footer,
.theme-part footer {
    font-weight: 400;
}

/* 上段のリンクボタン（水色→半透明） */
.theme-general footer a.bg-\[\#e4f2ff\],
.theme-career footer a.bg-\[\#e4f2ff\],
.theme-part footer a.bg-\[\#e4f2ff\] {
    background: rgba(255, 255, 255, .1) !important;
    color: #fff !important;
    font-weight: 700;
    font-style: normal !important;
    border-radius: .5rem !important;
    box-shadow: none !important;
}

.theme-general footer a.bg-\[\#e4f2ff\]:hover,
.theme-career footer a.bg-\[\#e4f2ff\]:hover,
.theme-part footer a.bg-\[\#e4f2ff\]:hover {
    background: rgba(255, 255, 255, .2) !important;
    opacity: 1 !important;
}

/* ロゴは白い台の上に置いて見やすく */
.theme-general footer img[src*="10ff-logo"],
.theme-career footer img[src*="10ff-logo"],
.theme-part footer img[src*="10ff-logo"] {
    background: #fff;
    padding: .6rem .9rem;
    border-radius: .5rem;
    box-sizing: content-box;
}

/* ---- カード・角丸 ---- */
.theme-general main .rounded-lg,
.theme-career main .rounded-lg,
.theme-part main .rounded-lg {
    border-radius: 1rem !important;
}

.theme-general main .rounded-xl,
.theme-career main .rounded-xl,
.theme-part main .rounded-xl {
    border-radius: 1.25rem !important;
}

/* 職種カード（旧デザインの灰色＋下線カード） */
.theme-career .job-card,
.theme-part .job-card {
    background: var(--th-soft) !important;
    border: 0 !important;
    border-radius: 1rem !important;
    transition: transform .3s ease, box-shadow .3s ease, background-color .3s ease !important;
}

.theme-career .job-card:hover,
.theme-part .job-card:hover {
    background: #fff !important;
    transform: translateY(-4px);
    box-shadow: 0 20px 40px -18px rgba(20, 26, 84, .35);
}

/* ---- ページ上部の帯（濃い単色の帯をテーマのグラデーションに） ---- */
.theme-general main .bg-dark,
.theme-career main .bg-dark,
.theme-part main .bg-dark {
    background: var(--th-hero) !important;
}

/* ---- 旧デザインの水色背景（#96cdff）をやわらかい色に ---- */
body.theme-general.bg-bgblue {
    background: #fff !important;
}

.theme-general main section.bg-bgblue {
    background: var(--th-soft) !important;
}

/* 社員紹介などの半透明の青いタイトル帯をグラデーションに */
.theme-general main .bg-primary\/40 {
    background: var(--th-hero) !important;
    border: 0 !important;
    border-radius: 1.25rem !important;
    box-shadow: 0 20px 40px -20px rgba(20, 26, 84, .5) !important;
}

/* ---- アルバイト・パート：青系の名残を緑系に ---- */
.theme-part .bg-blue-50,
.theme-part .bg-blue-50\/80 {
    background-color: var(--th-soft) !important;
}

.theme-part .border-blue-100 {
    border-color: #d3eadc !important;
}

.theme-part .bg-blue-800 {
    background-color: #075a3c !important;
}

/* ---- 上に戻るボタン ---- */
.theme-general #scroll-top,
.theme-career #scroll-top,
.theme-part #scroll-top,
.theme-general #scroll-to-top,
.theme-career #scroll-to-top,
.theme-part #scroll-to-top {
    background: #ff4f00 !important;
    border-radius: 9999px !important;
}

/* ---- 日本語の改行位置の調整 ----
   jp-keep を付けた文字は、単語の途中で改行せず <wbr> の位置で改行する。
   収まらないときだけ途中で折り返す（はみ出し防止） */
.jp-keep {
    word-break: keep-all;
    overflow-wrap: anywhere;
}