/* =========================================================
   recruit-detail.css（整理版 / B案）
   目的：
   - 固定ページ本文に：ヒーロー + 左メニュー + section id
   - PC：2カラム（左メニューはstickyで追従）
   - SP：左メニュー非表示（本文のみ）
   備考：
   - 「詳細を見る」ボタン（recruit-top側のCTA固定）はこのCSSに入れない
========================================================= */

:root{
  --rd-sky:#58B6E8;
  --rd-line:#8fd1ff;
  --rd-blue:#2F6FD6;
  --rd-ink:#111;
  --rd-muted:rgba(0,0,0,.55);
  --rd-max:1100px;

  /* ヘッダー高さ＋余白（sticky/scroll-margin用） */
  --rd-sticky-top: 120px;
}

/* ページ全体 */
.rd{ color: var(--rd-ink); }

/* =========================
   HERO
========================= */
.rd-hero{ background: var(--rd-sky); }

.rd-hero__inner{
  width:min(var(--rd-max), calc(100% - 32px));
  margin:0 auto;
  padding:34px 0 22px;
}

.rd-hero__brand{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
}

.rd-hero__logo{
  display:inline-block;
  font-weight:900;
  color:#fff;
  text-decoration:none;
  background: rgba(255,255,255,.18);
  padding:8px 12px;
  border-radius:6px;
}

.rd-hero__title{
  margin:10px 0 14px;
  font-size: clamp(22px, 3.2vw, 34px);
  line-height:1.25;
  font-weight:900;
  color:#fff;
}

.rd-hero__tags{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:0 0 16px;
}

.rd-tag{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  border:2px solid rgba(255,255,255,.85);
  color:#fff;
  font-weight:900;
  font-size:12px;
  background: rgba(255,255,255,.12);
}

.rd-hero__meta-row{ display:flex; gap:10px; align-items:flex-start; color:#fff; margin:6px 0; }
.rd-hero__meta-icon{ width:20px; opacity:.95; }
.rd-hero__meta-val{ margin:0; font-weight:900; }

.rd-hero__updated{
  color: rgba(255,255,255,.92);
  font-weight:800;
  margin-top:12px;
  font-size:13px;
}

.rd-hero__cta{ margin-top:18px; }

.rd-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:54px;
  padding:0 18px;
  border-radius:8px;
  font-weight:900;
  text-decoration:none;
  width:min(520px, 100%);
}

.rd-btn--primary{
  background:#77C6EE;
  color:#fff;
  border:2px solid rgba(255,255,255,.45);
}

.rd-hero__visual{
  width:min(var(--rd-max), calc(100% - 32px));
  margin:0 auto;
  height: clamp(240px, 38vw, 420px);
  background-size: cover;
  background-position: 50% 50%;
}

/* =========================
   BODY
========================= */
.rd-body{ background:#fff; padding:26px 0 70px; }

.rd-body__inner{
  width:min(var(--rd-max), calc(100% - 32px));
  margin:0 auto;
  display:grid;
  grid-template-columns: 280px 1fr;
  column-gap: 48px;
  align-items:start;
}

/* 左メニュー（PCのみ） */
.rd-side{
  position: sticky;
  top: var(--rd-sticky-top);
  align-self: start;

  /* 画面内に収める：長い時はメニューだけスクロール */
  max-height: calc(100vh - var(--rd-sticky-top) - 20px);
  overflow: auto;

  padding: 6px 0;
  z-index: 2;
}

.rd-nav{ display:flex; flex-direction:column; gap:4px; }

.rd-nav__item{
  display:block;
  padding: 7px 10px;
  border-radius: 8px;
  text-decoration:none;
  color: var(--rd-muted);
  background: transparent;
  line-height: 1.1;   /* 行間を詰める */
  margin: 0;
}

.rd-nav__item:hover{
  background: rgba(88,182,232,.15);
  color:#0b3f5c;
}

/* 選択中（is-active） */
.rd-nav__item.is-active{
  background: rgba(88,182,232,.18);
  color:#0b3f5c;
  font-weight:900;
  box-shadow: inset 4px 0 0 0 var(--rd-blue);
}

/* 右本文 */
.rd-content{ min-width:0; }

.rd-content .rd-heading,
.rd-content h2{
  margin:0 0 14px;
  font-size:22px;
  font-weight:900;
}

.rd-content .rd-heading::after,
.rd-content h2::after{
  content:"";
  display:block;
  height:2px;
  background: var(--rd-line);
  margin-top:12px;
  width:100%;
}

.rd-section{ padding:22px 0 26px; }

.rd-bodytext{ line-height:1.95; }
.rd-bodytext p, .rd-bodytext li{ line-height:1.95; }

/* アンカーずれ補正（固定ヘッダー分） */
.rd-content [id]{ scroll-margin-top: var(--rd-sticky-top); }

/* =========================
   SP：メニュー非表示
========================= */
@media (max-width: 899.98px){
  .rd-body__inner{ grid-template-columns: 1fr; column-gap:0; }
  .rd-side{ display:none !important; }

  .rd-hero__inner{ padding:24px 0 16px; }
  .rd-hero__visual{ height:56vw; }

  .rd-section{ padding:18px 0 22px; }
  .rd-content [id]{ scroll-margin-top: 90px; }
}

/* =========================================================
body や main は触らない
ヒーローより下の .rd-body__inner だけ解除
sticky を aside に直接与える
========================================================= */
@media (min-width: 900px){
  body.page-template-page-recruit-detail 
  .rd-body__inner {
    overflow: visible !important;
  }

  body.page-template-page-recruit-detail 
  .rd-body__inner > aside {
    position: sticky;
    top: 120px;
    align-self: flex-start;
  }
}

/* 応急：ヒーローが消える系を全部打ち消す */
body.page-template-page-recruit-detail .rd-hero,
body.page-template-page-recruit-detail .rd-hero *{
  visibility: visible !important;
}

body.page-template-page-recruit-detail .rd-hero{
  display: block !important;
  position: relative !important;
  height: auto !important;
  min-height: 420px;        /* まず高さを確保 */
  overflow: visible !important;
  background: #9ad2f2;      /* 見えるように仮背景（後で消してOK） */
}

/* 画像が <img> で入ってる場合に備えて強制表示 */
body.page-template-page-recruit-detail .rd-hero img{
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
}

/* 画像は疑似要素で敷く（上に文字が乗る） */
body.page-template-page-recruit-detail .rd-hero{
  position: relative;
  overflow: hidden;
  background: #7fc6ea; /* 画像が落ちた時の保険 */
}

body.page-template-page-recruit-detail .rd-hero::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("ここに画像URLを入れる");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.35;       /* ここで“薄さ”調整 */
  z-index: 0;
}

/* ヒーロー内の文字・ボタンを前面へ */
body.page-template-page-recruit-detail .rd-hero__inner{
  position: relative;
  z-index: 1;
}

/* ===== recruit-detail ヒーロー復活（末尾に追加） ===== */
body.page-template-page-recruit-detail .rd-hero{
  position: relative;
  background: #6fbde6; /* 水色ベース */
}

/* 右側（画像枠）: ここが空divなのでCSSで絵を出す */
body.page-template-page-recruit-detail .rd-hero__visual{
  width: 100%;
  min-height: 260px;          /* ← まずは潰れ防止 */
  background-image: url("https://kubosetsubi1974.com/wp-content/uploads/2025/12/YOUR_IMAGE_URL_HERE.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* PCで左右2カラムにする（あなたのスクショ構成） */
@media (min-width: 900px){
  body.page-template-page-recruit-detail .rd-hero{
    display: grid;
    grid-template-columns: 1fr 1.2fr; /* 左：文字 / 右：画像 */
    align-items: stretch;
  }
  body.page-template-page-recruit-detail .rd-hero__inner{
    padding: 56px 48px;
  }
  body.page-template-page-recruit-detail .rd-hero__visual{
    min-height: 420px;
  }
}

/* =========================================================
   recruit-detail：左メニュー sticky を殺す要因（overflow/transform等）を解除（最終行に置く）
========================================================= */
@media (min-width: 900px){
  body.page-template-page-recruit-detail body,
  body.page-template-page-recruit-detail main,
  body.page-template-page-recruit-detail #js-container,
  body.page-template-page-recruit-detail .l-container,
  body.page-template-page-recruit-detail .l-main{
    overflow: visible !important;
    transform: none !important;
    filter: none !important;
    contain: none !important;
  }

  /* 左メニューを固定（PCのみ） */
  body.page-template-page-recruit-detail .rd-side{
    position: sticky !important;
    top: 120px !important;
    align-self: flex-start !important;
  }
}