/*
Theme Name: BLAZE Child
Theme URI: https://tcd-theme.com/tcd120
Template: blaze_tcd120
Author: TCD
Author URI: https://tcd-theme.com/
Description: WordPress theme BLAZE lets you create a corporate website that works like a landing page. You can showcase your services alongside customer case studies, providing a powerful template to boost your sales.
Version: 1.4.1762775295
Updated: 2025-11-10 11:48:15

*/

.p-header-nav__list>li>a {
    display: grid;
    place-items: center;
    padding-inline: 20px;
}

/* ===========================================================
   採用Gem (ID:2427) サンクスページ：全要素・完全同期プロトコル
   ※テンプレート内の直書きダークモード設定を詳細度MAXで上書きします
=========================================================== */

/* 1. サイト全体の背景・ベースカラーの強制リセット */
html body.path-recruit-gem,
html body.path-recruit-gem .s-one-survivor,
html body.path-recruit-gem #main_contents,
html body.path-recruit-gem #contents {
    background-color: #ecf0f3 !important;
    background-image: url("https://s-one.ltd/wp/wp-content/uploads/2026/03/recruit-gem-bg-2.webp") !important;
    background-size: cover !important;
    background-position: center !important;
    background-attachment: fixed !important;
    color: #333333 !important;
}

/* 2. 背景の明るいオーバーレイ（光の広がり）を強制復活 */
html body.path-recruit-gem::before {
    content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;
    background-color: rgba(236, 240, 243, 0.8) !important;
    background-image: radial-gradient(circle, rgba(0, 119, 255, 0.12), transparent 70%) !important;
    display: block !important;
}

/* 3. 全てのテキストを「白」から「濃いグレー(#333)」へ反転 */
html body.path-recruit-gem *,
html body.path-recruit-gem p,
html body.path-recruit-gem span,
html body.path-recruit-gem li,
html body.path-recruit-gem address,
html body.path-recruit-gem label,
html body.path-recruit-gem .woocommerce-notice {
    color: #333333 !important;
    text-shadow: none !important;
}

/* 4. 各セクション（案内・注文・住所・DL・テーブル）を明るいガラス質感へ */
html body.path-recruit-gem .s1-checkout-guide,
html body.path-recruit-gem .woocommerce-order-received .woocommerce-order > p:first-child,
html body.path-recruit-gem .woocommerce-thankyou-order-details,
html body.path-recruit-gem .woocommerce-order-details,
html body.path-recruit-gem .woocommerce-customer-details,
html body.path-recruit-gem .woocommerce-order-downloads,
html body.path-recruit-gem section.woocommerce-columns,
html body.path-recruit-gem .shop_table,
html body.path-recruit-gem .shop_table.woocommerce-checkout-review-order-table,
html body.path-recruit-gem .woocommerce-table--custom-fields.shop_table.custom-fields {
    background: rgba(255, 255, 255, 0.4) !important;
    background-color: rgba(255, 255, 255, 0.4) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    border-radius: 20px !important;
    box-shadow: 12px 12px 24px rgba(203, 202, 209, 0.5), -12px -12px 24px #ffffff !important;
    margin-bottom: 30px !important;
    padding: 30px !important;
}

/* 5. テーブル内部の紺色背景・枠線を徹底排除 */
html body.path-recruit-gem .shop_table thead,
html body.path-recruit-gem .shop_table thead th,
html body.path-recruit-gem .shop_table tbody,
html body.path-recruit-gem .shop_table tbody td,
html body.path-recruit-gem .shop_table tfoot,
html body.path-recruit-gem .shop_table tfoot th,
html body.path-recruit-gem .shop_table tfoot td,
html body.path-recruit-gem .shop_table tr {
    background-color: transparent !important;
    background: transparent !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
    border-top: none !important;
}

/* 6. 見出し・リンク・アイコンを「信頼のブルー」へ */
html body.path-recruit-gem h2,
html body.path-recruit-gem h3,
html body.path-recruit-gem .shop_table thead th,
html body.path-recruit-gem .shop_table .product-name a,
html body.path-recruit-gem .download-product a,
html body.path-recruit-gem .s1-checkout-guide strong,
html body.path-recruit-gem .s1-checkout-guide i {
    color: #005bb5 !important;
}

/* 見出し横のアクセントラインをオレンジに */
html body.path-recruit-gem .woocommerce-order-details__title,
html body.path-recruit-gem .woocommerce-order-downloads__title,
html body.path-recruit-gem .woocommerce-column__title {
    border-left: 6px solid #ff6b00 !important;
    padding-left: 15px !important;
    border-bottom: none !important;
}

/* 7. 金額と重要ラベルを「活気のオレンジ」へ */
html body.path-recruit-gem .amount,
html body.path-recruit-gem .amount bdi,
html body.path-recruit-gem .woocommerce-Price-currencySymbol,
html body.path-recruit-gem .shop_table_responsive tr td::before {
    color: #ff6b00 !important;
    font-weight: 800 !important;
}

/* 8. ボタン類（ZIP・再注文）をオレンジグラデーションへ強制変更 */
html body.path-recruit-gem .button,
html body.path-recruit-gem .button.alt,
html body.path-recruit-gem a.woocommerce-MyAccount-downloads-file.button {
    background: linear-gradient(135deg, #ff6b00, #ff8c00) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 50px !important;
    box-shadow: 0 5px 15px rgba(255, 107, 0, 0.3) !important;
    padding: 12px 25px !important;
    font-weight: 900 !important;
    text-align: center !important;
    display: inline-block !important;
}

html body.path-recruit-gem .button:hover {
    filter: brightness(1.1);
    transform: translateY(-2px);
}

/* ===========================================================
   採用Gem (ID:2427) カスタムフィールドテーブルを強制白化
=========================================================== */

/* 1. テーブル・ボディ・行・セル全ての紺色背景を解除 */
html body.path-recruit-gem .woocommerce-table--custom-fields.shop_table.custom-fields,
html body.path-recruit-gem .woocommerce-table--custom-fields.shop_table.custom-fields tbody,
html body.path-recruit-gem .woocommerce-table--custom-fields.shop_table.custom-fields tr,
html body.path-recruit-gem .woocommerce-table--custom-fields.shop_table.custom-fields th,
html body.path-recruit-gem .woocommerce-table--custom-fields.shop_table.custom-fields td {
    background-color: transparent !important;
    background: transparent !important;
    color: #333333 !important; /* 文字を白から黒へ */
    border: none !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
}

/* 2. 「会社名：」のラベル部分を信頼のブルーに変更 */
html body.path-recruit-gem .woocommerce-table--custom-fields.shop_table.custom-fields th {
    color: #005bb5 !important;
    font-weight: bold !important;
    width: 30% !important;
}

/* 3. 入力された値（テスト等）の文字色を確定 */
html body.path-recruit-gem .woocommerce-table--custom-fields.shop_table.custom-fields td {
    color: #333333 !important;
}

/* ダウンロード残り・期限の値を表示 */
.shop_table .download-remaining,
.shop_table .download-expires {
    color: var(--text-main) !important;
}

/* 「小計」などの見出しラベル（th）を濃い青で表示 */
.shop_table th {
    color: var(--primary-dark) !important;
}

/* テーブル内のすべてのデータ（td）をメインテキスト色で表示 */
.shop_table td {
    color: var(--text-main) !important;
}

/* 「小計：」などの行見出し（th）を強制的に見えるようにする */
.shop_table th[scope="row"], 
.shop_table.order_details th {
    color: var(--primary-dark) !important;
    font-weight: 700 !important;
    background: transparent !important;
}


/* =============================================
   23. プラン比較表（Splide）修正
   ============================================= */

/* 右端の線、およびカード下の「変な下線」を防止するリセット */
.p-plan::after, 
.p-plan--slider::after, 
.p-plan_list_bg .p-plan::after, 
.p-cb-item::after,
.p-plan-card::after {
    content: none !important;
    display: none !important;
}

/* スライダー基本構造：共通設定からは「余白」を削除 */
.splide, .splide__track, .splide__list, .splide__slide {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* 【プラン専用】見切れ防止の余白を「#plan」の中だけに限定（これでティッカーの巨大化を防ぎます） */
#plan .splide__track {
    overflow: hidden !important;
    padding-top: 45px !important; 
    padding-bottom: 45px !important;
    margin-top: -45px !important;
    margin-bottom: -45px !important;
}

/* カード本体：下線を消去し、ホバー演出を維持 */
.p-plan-card {
    background-color: #ffffff !important;
    border: 1px solid #f0f0f0 !important;
    border-bottom: none !important; /* カード下の変な下線を防止 */
    border-radius: 16px !important;
    padding: 30px !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

/* 文字色の指定（見積・金額は含まず、ご指示のあった箇所のみ） */
.p-plan-card__title { color: #1a1a1a !important; font-size: 1.25rem !important; }
.p-plan-card__price-yen { color: #666 !important; font-size: 0.85rem !important; }
.p-plan-card__desc { color: #666 !important; font-size: 0.9rem !important; }
.p-plan-card__list-item { color: #444 !important; font-size: 0.85rem !important; padding-left: 28px !important; }

/* 装飾：チェックマークと価格下の線 */
.p-plan-card__price::after {
    content: "" !important;
    position: absolute;
    left: 0;
    width: 100%;
    background-color: #f0f0f0;
    bottom: -15px;
}

.p-plan-card__list-item::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #ccc;
}

@media (min-width: 768px) {
    .p-plan-card:hover {
        transform: translateY(-12px) !important;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12) !important;
        border-color: #333 !important;
        z-index: 10;
    }
}

/* =============================================
   24. ニュースティッカー
   ============================================= */

/* ティッカーエリア：巨大化を防ぐため padding を 0 に固定 */
.p-news_ticker_main .splide__track {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.p-news_ticker_main {
    position: absolute !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 150 !important;
    background: transparent !important;
    pointer-events: none !important;
}

.p-news-ticker__item {
    background-color: rgba(255, 255, 255, 0.9) !important; 
    display: inline-flex !important;
    align-items: center;
    padding: 6px 25px !important; 
    border-radius: 100px !important;
    margin: 0 auto !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    pointer-events: auto !important;
    text-decoration: none !important;
}

.p-news-ticker__date,
.p-news-ticker__title,
.c-date-item {
    color: #333333 !important;
    font-size: 14px !important;
}

.p-news_ticker_main .splide__slide {
    display: flex !important;
    justify-content: center !important;
    background: transparent !important;
}

/* =============================================
   25. メガメニュー：表示崩れの修正
   ============================================= */

/* メガメニューの文字色修正（中身の要素まで強制） */
.p-megamenu02__item-title,
.p-megamenu02__item-title *,
.p-service-megamenu02-item__chatch,
.p-service-megamenu02-item__chatch * {
    color: var(--tcd-header-base-font-color, #ffffff) !important;
}

/* ==========================================================================
   【修正・追加】グローバルメニュー 子メニュー表示安定化パッチ（初期状態対応版）
   ========================================================================== */

/* 1. スクロール前（初期状態）の広い隙間に合わせて「透明な橋」を延長 */
.p-global-nav .sub-menu::before,
.p-global-nav ul.sub-menu::before {
  content: "";
  position: absolute;
  /* topとheightの数値を大きくして、初期状態の広い隙間を完全に塞ぎます */
  top: -100px !important;  /* ★まだ途切れる場合は -100px などに広げてください */
  left: 0;
  width: 100%;
  height: 80px !important; /* ★topと同じ数値にします */
  background: transparent;
  pointer-events: auto;
}

/* 2. 初期状態のヘッダーコンテナが「はみ出し」を隠蔽しないよう強制許可 */
.l-header,
#js-header,
.p-header-bar,
.p-global-nav {
  overflow: visible !important;
}

/* 3. ホバーした瞬間に子メニューを強制表示（TCDのJS初期化遅延などをCSSで上書き） */
.p-global-nav li:hover > .sub-menu,
.p-global-nav li:hover > ul.sub-menu {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transition: opacity 0.3s ease !important; /* ふんわり表示させる場合 */
}

/* 4. 子メニュー自体を絶対的な最前面に引き上げ（前回同様） */
.p-global-nav .sub-menu,
.p-global-nav ul.sub-menu {
  z-index: 99999 !important;
}


.p-header-nav__list ul a {
    /* gridを維持してレイアウト崩れを防ぐ */
    display: grid;
    /* 上下中央を維持 */
    align-content: center; 
    /* 重要：クリック範囲を左右に「強制的に広げる」 */
    justify-content: stretch;
    /* grid-template-rows をやめ、高さを直接指定（崩れにくくなります） */
    height: 50px;
    /* 左右の余白（ここもクリック可能になります） */
    padding-inline: 20px;
    /* 文字の並び */
    text-align: left;
    white-space: nowrap;
}