/* =========================================================
   Tailwind-like utilities for THIS PAGE ONLY
   scope: body.recruit-page2
   ========================================================= */

.recruit-page2 { box-sizing: border-box; }
.recruit-page2 *, .recruit-page2 *::before, .recruit-page2 *::after { box-sizing: inherit; }

/* -------- display / layout -------- */
.recruit-page2 .hidden{display:none;}
.recruit-page2 .block{display:block;}
.recruit-page2 .inline-flex{display:inline-flex;}
.recruit-page2 .flex{display:flex;}
.recruit-page2 .grid{display:grid;}

.recruit-page2 .flex-1{flex:1 1 0%;}
.recruit-page2 .flex-col{flex-direction:column;}
.recruit-page2 .flex-wrap{flex-wrap:wrap;}

.recruit-page2 .items-center{align-items:center;}
.recruit-page2 .items-end{align-items:flex-end;}
.recruit-page2 .justify-center{justify-content:center;}
.recruit-page2 .justify-between{justify-content:space-between;}
.recruit-page2 .justify-start{justify-content:flex-start;}

.recruit-page2 .text-left{text-align:left;}
.recruit-page2 .text-center{text-align:center;}
.recruit-page2 .text-right{text-align:right;}

.recruit-page2 .relative{position:relative;}
.recruit-page2 .absolute{position:absolute;}
.recruit-page2 .inset-0{top:0;right:0;bottom:0;left:0;}
.recruit-page2 .top-0{top:0;}
.recruit-page2 .top-4{top:1rem;}
.recruit-page2 .bottom-6{bottom:1.5rem;}
.recruit-page2 .left-0{left:0;}
.recruit-page2 .left-6{left:1.5rem;}
.recruit-page2 .right-6{right:1.5rem;}
.recruit-page2 .left-1\/2{left:50%;}

.recruit-page2 .z-0{z-index:0;}
.recruit-page2 .z-10{z-index:10;}

.recruit-page2 .overflow-hidden{overflow:hidden;}
.recruit-page2 .overflow-visible{overflow:visible;}

/* -------- sizing -------- */
.recruit-page2 .w-full{width:100%;}
.recruit-page2 .h-full{height:100%;}
.recruit-page2 .w-16{width:4rem;}
.recruit-page2 .w-12{width:3rem;}
.recruit-page2 .w-14{width:3.5rem;}
.recruit-page2 .w-4{width:1rem;}
.recruit-page2 .h-3{height:.75rem;}
.recruit-page2 .h-2{height:.5rem;}
.recruit-page2 .h-72{height:18rem;}
.recruit-page2 .w-24{width:6rem;}
.recruit-page2 .h-24{height:6rem;}
.recruit-page2 .h-12{height:3rem;}
.recruit-page2 .h-80{height:20rem;}
.recruit-page2 .max-w-7xl{max-width:80rem;}
.recruit-page2 .max-w-\[320px\]{max-width:320px;}
.recruit-page2 .mx-auto{margin-left:auto;margin-right:auto;}

/* arbitrary values used in your HTML */
.recruit-page2 .px-\[10vw\]{padding-left:10vw;padding-right:10vw;}
.recruit-page2 .w-\[140px\]{width:140px;}
.recruit-page2 .min-h-\[400px\]{min-height:400px;}
.recruit-page2 .leading-\[2\.2\]{line-height:2.2;}

/* -------- grid cols / span -------- */
.recruit-page2 .grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr));}
.recruit-page2 .grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.recruit-page2 .md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.recruit-page2 .md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.recruit-page2 .lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.recruit-page2 .lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.recruit-page2 .lg\:col-span-1{grid-column:span 1 / span 1;}
.recruit-page2 .lg\:col-span-2{grid-column:span 2 / span 2;}
.recruit-page2 .md\:col-span-2{grid-column:span 2 / span 2;}

/* -------- spacing (gap / padding / margin) -------- */
.recruit-page2 .gap-2{gap:.5rem;}
.recruit-page2 .gap-3{gap:.75rem;}
.recruit-page2 .gap-4{gap:1rem;}
.recruit-page2 .gap-5{gap:1.25rem;}
.recruit-page2 .gap-6{gap:1.5rem;}
.recruit-page2 .gap-8{gap:2rem;}
.recruit-page2 .gap-10{gap:2.5rem;}
.recruit-page2 .gap-12{gap:3rem;}
.recruit-page2 .gap-20{gap:5rem;}
.recruit-page2 .gap-x-4{column-gap:1rem;}
.recruit-page2 .gap-y-2{row-gap:.5rem;}
.recruit-page2 .gap-y-12{row-gap:3rem;}

.recruit-page2 .p-8{padding:2rem;}
.recruit-page2 .p-10{padding:2.5rem;}
.recruit-page2 .px-4{padding-left:1rem;padding-right:1rem;}
.recruit-page2 .px-10{padding-left:2.5rem;padding-right:2.5rem;}
.recruit-page2 .py-4{padding-top:1rem;padding-bottom:1rem;}
.recruit-page2 .py-5{padding-top:1.25rem;padding-bottom:1.25rem;}
.recruit-page2 .py-16{padding-top:4rem;padding-bottom:4rem;}
.recruit-page2 .py-20{padding-top:5rem;padding-bottom:5rem;}
.recruit-page2 .pt-4{padding-top:1rem;}
.recruit-page2 .pt-10{padding-top:2.5rem;}
.recruit-page2 .pt-16{padding-top:4rem;}
.recruit-page2 .pb-8{padding-bottom:2rem;}
.recruit-page2 .pb-10{padding-bottom:2.5rem;}
.recruit-page2 .pl-6{padding-left:1.5rem;}
.recruit-page2 .pl-10{padding-left:2.5rem;}
.recruit-page2 .pl-16{padding-left:4rem;}
.recruit-page2 .mt-2{margin-top:.5rem;}
.recruit-page2 .mt-5{margin-top:1.25rem;}
.recruit-page2 .mt-8{margin-top:2rem;}
.recruit-page2 .mt-12{margin-top:3rem;}
.recruit-page2 .mt-16{margin-top:4rem;}
.recruit-page2 .mb-2{margin-bottom:.5rem;}
.recruit-page2 .mb-3{margin-bottom:.75rem;}
.recruit-page2 .mb-4{margin-bottom:1rem;}
.recruit-page2 .mb-6{margin-bottom:1.5rem;}
.recruit-page2 .mb-10{margin-bottom:2.5rem;}
.recruit-page2 .mb-12{margin-bottom:3rem;}
.recruit-page2 .mb-16{margin-bottom:4rem;}
.recruit-page2 .ml-1{margin-left:.25rem;}
.recruit-page2 .ml-2{margin-left:.5rem;}
.recruit-page2 .ml-3{margin-left:.75rem;}
.recruit-page2 .mx-1{margin-left:.25rem;margin-right:.25rem;}
.recruit-page2 .mx-3{margin-left:.75rem;margin-right:.75rem;}

/* space-y utilities */
.recruit-page2 .space-y-2 > :not([hidden]) ~ :not([hidden]){margin-top:.5rem;}
.recruit-page2 .space-y-3 > :not([hidden]) ~ :not([hidden]){margin-top:.75rem;}
.recruit-page2 .space-y-5 > :not([hidden]) ~ :not([hidden]){margin-top:1.25rem;}
.recruit-page2 .space-y-6 > :not([hidden]) ~ :not([hidden]){margin-top:1.5rem;}
.recruit-page2 .space-y-12 > :not([hidden]) ~ :not([hidden]){margin-top:3rem;}
.recruit-page2 .space-y-16 > :not([hidden]) ~ :not([hidden]){margin-top:4rem;}
.recruit-page2 .space-y-20 > :not([hidden]) ~ :not([hidden]){margin-top:5rem;}
.recruit-page2 .space-y-28 > :not([hidden]) ~ :not([hidden]){margin-top:7rem;}
.recruit-page2 .space-y-32 > :not([hidden]) ~ :not([hidden]){margin-top:8rem;}
.recruit-page2 .space-y-40 > :not([hidden]) ~ :not([hidden]){margin-top:10rem;}

/* -------- typography -------- */
.recruit-page2 .text-xs{font-size:.75rem;line-height:1rem;}
.recruit-page2 .text-sm{font-size:.875rem;line-height:1.25rem;}
.recruit-page2 .text-base{font-size:1rem;line-height:1.5rem;}
.recruit-page2 .text-lg{font-size:1.125rem;line-height:1.75rem;}
.recruit-page2 .text-xl{font-size:1.25rem;line-height:1.75rem;}
.recruit-page2 .text-2xl{font-size:1.5rem;line-height:2rem;}
.recruit-page2 .text-3xl{font-size:1.875rem;line-height:2.25rem;}
.recruit-page2 .text-4xl{font-size:2.25rem;line-height:2.5rem;}
.recruit-page2 .text-5xl{font-size:3rem;line-height:1;}
.recruit-page2 .text-6xl{font-size:3.75rem;line-height:1;}

.recruit-page2 .font-medium{font-weight:500;}
.recruit-page2 .font-bold{font-weight:700;}
.recruit-page2 .font-black{font-weight:900;}
.recruit-page2 .font-mono{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;}

.recruit-page2 .uppercase{text-transform:uppercase;}
.recruit-page2 .tracking-tight{letter-spacing:-.025em;}
.recruit-page2 .tracking-wider{letter-spacing:.05em;}
.recruit-page2 .tracking-widest{letter-spacing:.1em;}
.recruit-page2 .tracking-\[0\.2em\]{letter-spacing:.2em;}

.recruit-page2 .leading-none{line-height:1;}
.recruit-page2 .leading-relaxed{line-height:1.625;}
.recruit-page2 .tracking-tighter{letter-spacing:-.04em;}

/* -------- colors (slate) -------- */
.recruit-page2 .bg-white{background:#fff;}
.recruit-page2 .bg-slate-50{background:#f8fafc;}
.recruit-page2 .bg-slate-100{background:#f1f5f9;}
.recruit-page2 .text-white{color:#fff;}
.recruit-page2 .text-slate-300{color:#cbd5e1;}
.recruit-page2 .text-slate-400{color:#94a3b8;}
.recruit-page2 .text-slate-500{color:#64748b;}
.recruit-page2 .text-slate-600{color:#475569;}
.recruit-page2 .text-slate-700{color:#334155;}
.recruit-page2 .text-slate-800{color:#1f2937;}

.recruit-page2 .text-\[\#9B111E\]{color:#9B111E;}

/* opacity */
.recruit-page2 .opacity-5{opacity:.05;}
.recruit-page2 .opacity-50{opacity:.5;}
.recruit-page2 .opacity-60{opacity:.6;}
.recruit-page2 .text-white\/70{color:rgba(255,255,255,.7);}
.recruit-page2 .text-white\/80{color:rgba(255,255,255,.8);}

/* -------- borders / radius -------- */
.recruit-page2 .border{border-width:1px;border-style:solid;}
.recruit-page2 .border-2{border-width:2px;border-style:solid;}
.recruit-page2 .border-b-2{border-bottom-width:2px;border-bottom-style:solid;}
.recruit-page2 .border-t{border-top-width:1px;border-top-style:solid;}
.recruit-page2 .border-l-4{border-left-width:4px;border-left-style:solid;}
.recruit-page2 .border-l-\[10px\]{border-left-width:10px;border-left-style:solid;}
.recruit-page2 .border-dashed{border-style:dashed;}

.recruit-page2 .border-slate-100{border-color:#f1f5f9;}
.recruit-page2 .border-slate-200{border-color:#e2e8f0;}
.recruit-page2 .border-slate-300{border-color:#cbd5e1;}
.recruit-page2 .hover\:border-slate-300:hover{border-color:#cbd5e1;}

.recruit-page2 .rounded{border-radius:.25rem;}
.recruit-page2 .rounded-sm{border-radius:.125rem;}
.recruit-page2 .rounded-full{border-radius:9999px;}
.recruit-page2 .rounded-xl{border-radius:.75rem;}
.recruit-page2 .rounded-2xl{border-radius:1rem;}
.recruit-page2 .rounded-3xl{border-radius:1.5rem;}
.recruit-page2 .rounded-\[2rem\]{border-radius:2rem;}
.recruit-page2 .rounded-\[2\.5rem\]{border-radius:2.5rem;}
.recruit-page2 .rounded-\[3rem\]{border-radius:3rem;}

/* -------- shadows -------- */
.recruit-page2 .shadow-sm{box-shadow:0 1px 2px rgba(0,0,0,.06);}
.recruit-page2 .shadow-lg{box-shadow:0 10px 20px rgba(0,0,0,.10);}
.recruit-page2 .shadow-xl{box-shadow:0 18px 35px rgba(0,0,0,.14);}
.recruit-page2 .shadow-2xl{box-shadow:0 25px 45px rgba(0,0,0,.18);}
.recruit-page2 .shadow-inner{box-shadow:inset 0 2px 8px rgba(0,0,0,.08);}
.recruit-page2 .hover\:shadow-md:hover{box-shadow:0 10px 18px rgba(0,0,0,.10);}
.recruit-page2 .hover\:shadow-xl:hover{box-shadow:0 18px 35px rgba(0,0,0,.14);}

/* -------- transforms / transitions -------- */
.recruit-page2 .transition{transition:all .2s ease;}
.recruit-page2 .transition-all{transition:all .2s ease;}
.recruit-page2 .transition-transform{transition:transform .25s ease;}
.recruit-page2 .duration-500{transition-duration:.5s;}

.recruit-page2 .-translate-x-1\/2{transform:translateX(-50%);}
.recruit-page2 .-translate-y-1\/2{transform:translateY(-50%);}

.recruit-page2 .hover\:-translate-y-2:hover{transform:translateY(-.5rem);}
.recruit-page2 .hover\:scale-105:hover{transform:scale(1.05);}

/* group-hover */
.recruit-page2 .group:hover .group-hover\:scale-105{transform:scale(1.05);}
.recruit-page2 .group:hover .group-hover\:scale-110{transform:scale(1.10);}

/* -------- images / object -------- */
.recruit-page2 .object-cover{object-fit:cover;}

/* -------- underline decorations used -------- */
.recruit-page2 .underline{text-decoration:underline;}
.recruit-page2 .underline-offset-8{text-underline-offset:8px;}
.recruit-page2 .decoration-4{text-decoration-thickness:4px;}
.recruit-page2 .decoration-biz-color{ text-decoration-color: var(--biz-color); }

/* -------- gradients -------- */
.recruit-page2 .bg-gradient-to-t{
  background-image: linear-gradient(to top, var(--tw-gradient-from), var(--tw-gradient-to));
}
.recruit-page2 .from-slate-900\/60{ --tw-gradient-from: rgba(15,23,42,.60); }
.recruit-page2 .to-transparent{ --tw-gradient-to: rgba(0,0,0,0); }

/* -------- responsive variants (min-width) -------- */
@media (min-width:640px){
  .recruit-page2 .sm\:px-6{padding-left:1.5rem;padding-right:1.5rem;}
  .recruit-page2 .sm\:p-10{padding:2.5rem;}
  .recruit-page2 .sm\:text-xs{font-size:.75rem;}
  .recruit-page2 .sm\:h-80{height:20rem;}
  .recruit-page2 .sm\:text-lg{font-size:1.125rem;line-height:1.75rem;}
  .recruit-page2 .sm\:p-16{padding:4rem;}
  .recruit-page2 .sm\:h-96{height:24rem;}
}
@media (min-width:768px){
  .recruit-page2 .md\:block{display:block;}
  .recruit-page2 .md\:flex-row{flex-direction:row;}
  .recruit-page2 .md\:items-end{align-items:flex-end;}
  .recruit-page2 .md\:gap-5{gap:1.25rem;}
  .recruit-page2 .md\:text-lg{font-size:1.125rem;line-height:1.75rem;}
  .recruit-page2 .md\:text-5xl{font-size:3rem;line-height:1;}
  .recruit-page2 .md\:text-right{text-align:right;}
}
@media (min-width:1024px){
  .recruit-page2 .lg\:px-8{padding-left:2rem;padding-right:2rem;}
  .recruit-page2 .lg\:p-20{padding:5rem;}
  .recruit-page2 .lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr));}
}

/* =========================================================
   Project-specific fixes (non-responsive)
   ※ 値は「現状効いている最終値」を維持
   ========================================================= */

/* ヒーロー〜STEP1（#business-recruitment の上側） */
.recruit-page2 #business-recruitment{
  padding-top: 0px;
  padding-bottom: 64px;
}

/* container系の上余白を強制ゼロ（他CSSが強い可能性があるのでここだけ最小限 important） */
body.recruit-page2 #container2,
body.recruit-page2 #container,
body.recruit-page2 main{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* PC：福利厚生の丸アイコン（translateX/Y を合成して中央固定）
   -translate-x と -translate-y が別々に transform を上書きする対策 */
.recruit-page2 .biz-card .absolute.top-0.left-1\/2.-translate-x-1\/2.-translate-y-1\/2{
  transform: translate(-50%, -50%);
}

/* ENTRY INFORMATION のリンク文字色（idで勝てるので !important 不要） */
.recruit-page2 #entry-section a{
  color: var(--biz-color);
}

/* 社員インタビュー：写真カード枠線を消す（idで勝てるので !important 不要） */
.recruit-page2 #interview-grid button,
.recruit-page2 #interview-grid .interview-person-wrapper{
  border: 0;
}
.recruit-page2 #interview-grid button *,
.recruit-page2 #interview-grid .interview-person-wrapper *{
  border-color: transparent;
  border-width: 0;
}

/* 社員インタビュー：Q&A 余白（吹き出し内） */
body.recruit-page2 #interview-expansion-container .interview-person-content h6,
body.recruit-page2 #interview-expansion-container .interview-person-content p{
  margin: 0;
}
body.recruit-page2 #interview-expansion-container .interview-person-content .space-y-12 > :not([hidden]) ~ :not([hidden]){
  margin-top: 3.5rem; /* 現状値維持 */
}
body.recruit-page2 #interview-expansion-container .interview-person-content .border-t{
  padding-top: 2rem;
}
body.recruit-page2 #interview-expansion-container .interview-person-content .flex.flex-col.gap-4{
  gap: 2rem;
}

/* キャリアアップ：番号バッジの影を消す */
body.recruit-page2 .timeline-line .biz-bg-solid.shadow-xl{
  box-shadow: none;
}

/* 福利厚生：その他の文字サイズ */
body.recruit-page2 #content-area .text-center.pt-8.border-t.border-slate-200
.flex.flex-wrap.justify-center.gap-6.text-sm{
  font-size: 1rem;
  line-height: 1.8;
}

/* 労働条件：左右の高さ揃え（lc-card運用前提） */
body.recruit-page2 .lc-card{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
body.recruit-page2 .lc-card .text-4xl.font-black.biz-accent{
  margin-bottom: 8px;
}
body.recruit-page2 .lc-card .lc-meta{
  margin-top: 0;
  margin-bottom: 1.25rem; /* 現状の最終値を採用 */
}
body.recruit-page2 .lc-card .lc-divider{
  padding-top: 16px;
  margin-top: 0;
}
@media (min-width:768px){
  body.recruit-page2 .lc-card .lc-top{
    min-height: 210px;
  }
}

/* =========================================================
   Mobile (<= 767px) : ルールは1か所に統合
   ========================================================= */
@media (max-width: 767px){

  /* 全体の左右余白 */
  body.recruit-page2 #header-top2,
  body.recruit-page2 #header-top3,
  body.recruit-page2 footer{
    padding-left: 16px;
    padding-right: 16px;
  }

  /* メイン余白（モバイル最終値維持） */
  body.recruit-page2 #business-recruitment{
    padding-top: 40px;
    padding-bottom: 56px;
  }

  /* 見出し（モバイル） */
  body.recruit-page2 #business-recruitment h2{
    font-size: 2rem;
    line-height: 1.15;
    letter-spacing: .02em;
  }
  body.recruit-page2 #business-recruitment h3{
    font-size: 2.25rem;
    line-height: 1.1;
  }
  body.recruit-page2 #business-recruitment h4{
    font-size: 1.5rem;
    line-height: 1.2;
  }
  body.recruit-page2 #business-recruitment h5,
  body.recruit-page2 #business-recruitment h6{
    line-height: 1.3;
  }

  /* カード padding（モバイル） */
  body.recruit-page2 .p-8{ padding: 1.25rem; }
  body.recruit-page2 .p-10{ padding: 1.5rem; }

  /* space-y 圧縮（モバイル） */
  body.recruit-page2 .space-y-28 > :not([hidden]) ~ :not([hidden]){ margin-top: 3.5rem; }
  body.recruit-page2 .space-y-32 > :not([hidden]) ~ :not([hidden]){ margin-top: 4rem; }
  body.recruit-page2 .space-y-40 > :not([hidden]) ~ :not([hidden]){ margin-top: 4.5rem; }

  /* STEPボタン：縦積み */
  body.recruit-page2 .tab-btn{
    width: 100%;
    min-width: 0;
    padding-top: 14px;
    padding-bottom: 14px;
  }
  body.recruit-page2 #business-recruitment .flex.flex-wrap.justify-center{
    flex-direction: column;
    align-items: stretch;
  }

  /* md / lg grid utilities をスマホでは1列へ */
  .recruit-page2 .md\:grid-cols-2,
  .recruit-page2 .md\:grid-cols-3,
  .recruit-page2 .lg\:grid-cols-2,
  .recruit-page2 .lg\:grid-cols-3{
    grid-template-columns: 1fr;
  }

  /* 社員インタビュー：カード高さ */
  body.recruit-page2 .h-72{ height: 14.5rem; }
  body.recruit-page2 .h-80{ height: 16rem; }

  /* 社員インタビュー：写真（タップカード）を縦積み */
  body.recruit-page2 #interview-grid{
    grid-template-columns: 1fr;
    gap: 16px;
  }
  body.recruit-page2 #interview-grid .interview-person-wrapper{
    width: 100%;
  }

  /* 吹き出し（展開）はカードの直下に全幅 */
  body.recruit-page2 #interview-expansion-container{
    grid-column: 1 / -1;
    width: 100%;
    margin-top: 14px;
    border-radius: 1.5rem;
  }
  body.recruit-page2 #interview-tail{
    left: calc(50% - 18px);
  }

  /* interview-photo-grid の mt-16 を無効化（スマホ段差解除） */
  body.recruit-page2 .interview-photo-grid{
    grid-template-columns: 1fr;
  }
  body.recruit-page2 .interview-photo-grid .mt-16{
    margin-top: 0;
  }

  /* ワークライフバランス：縦積み */
  body.recruit-page2 .wlb-grid{
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  body.recruit-page2 .wlb-calendar{ order: 1; }
  body.recruit-page2 .wlb-data{ order: 2; }
/* body.recruit-page2 .wlb-data .max-w-\[320px\]{ max-width: 100%; } */
  body.recruit-page2 .wlb-data > div{ width: 100%; }





  /* キャリアアップ：写真を下＆横並び解除 */
  body.recruit-page2 .career-wrap{
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  body.recruit-page2 .career-timeline{ order: 1; }
  body.recruit-page2 .career-photos{
    order: 2;
    grid-template-columns: 1fr;
  }
  body.recruit-page2 .career-photos .mt-16{
    margin-top: 0;
  }

  /* カレンダー：読みやすさ */
  body.recruit-page2 .calendar-grid{ gap: 4px; }

  body.recruit-page2 .calendar-day{
    font-size: 11px;      /* 現状最終値 */
    line-height: 1.05;
    padding: 6px 0;
  }

  /* 曜日ヘッダー（Mon〜Sun） */
  .recruit-page2 .calendar-grid.text-\[10px\]{
    font-size: 9px;
    line-height: 1.1;
    letter-spacing: .08em;
  }

  /* 応募ボタン：縦積み */
  body.recruit-page2 #entry-buttons-container{
    flex-direction: column;
    align-items: stretch;
  }
  body.recruit-page2 #entry-buttons-container a{
    width: 100%;
    box-sizing: border-box;
  }

  /* 凡例（一般）：横並び（折り返しOK） */
  .recruit-page2 .mt-12.flex.justify-center.flex-wrap.gap-6{
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    row-gap: 10px;
    column-gap: 14px;
  }
  .recruit-page2 .mt-12.flex.justify-center.flex-wrap.gap-6 > div{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
  }

  /* WLB凡例：横1列固定（入り切らなければ横スクロール） */
  body.recruit-page2 .wlb-calendar .mt-12{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 10px;
  }
  body.recruit-page2 .wlb-calendar .mt-12 > div{
    flex: 0 0 auto;
  }
}

/* =========================================================
   PC only: WLB legend size-up (>= 768px)
   ========================================================= */
@media (min-width: 768px){
  body.recruit-page2 .wlb-calendar .mt-12.flex{
    font-size: .9rem;
    gap: 18px;
  }
  body.recruit-page2 .wlb-calendar .mt-12.flex > div{
    gap: 10px;
  }
  body.recruit-page2 .wlb-calendar .mt-12.flex .w-4.h-4{
    width: 18px;
    height: 18px;
  }
}


/* ===== Shift bar (勤務時間の横棒) ===== */
body.recruit-page2 .shift-bar{
  flex: 1;
  height: 12px;
  background: #eef2f7;      /* ベースの薄グレー */
  border-radius: 999px;
  position: relative;
  overflow: hidden;
}

body.recruit-page2 .shift-bar__fill{
  position: absolute;
  inset: 0 auto 0 0;        /* top/right/bottom/left のショートカット */
  height: 100%;
  border-radius: 999px;
}

/* ここは見た目の好みで色/濃さ調整OK */
body.recruit-page2 .shift-bar__fill--early{
  width: 60%;
  left: 0%;
  background: rgba(245, 158, 11, .55); /* amber系 */
}

body.recruit-page2 .shift-bar__fill--mid{
  width: 60%;
  left: 20%;
  background: rgba(249, 115, 22, .45); /* orange系 */
}

body.recruit-page2 .shift-bar__fill--late{
  width: 60%;
  left: 40%;
  background: rgba(239, 68, 68, .35);  /* red系 */
}



/* シフト横棒グラフ（テーマ色で表示する） */
.shift-track {
  background: #eef2f7;
  border-radius: 9999px;
  height: 12px;
  position: relative;
  overflow: hidden;
}
.shift-fill {
  position: absolute;
  top: 0; bottom: 0;
  background: var(--biz-color);
  opacity: 0.22; /* 早番/日勤の薄さ */
  border-radius: 9999px;
}
.shift-fill.is-strong { opacity: 0.38; } /* 遅番/夜勤など濃いめ */




/* ============================
   ホテル：shift-bar をテーマ色で表示（壊れない版）
   ※既存 shift-bar 定義の「後ろ」に置く
   ============================ */
body.recruit-page2 .theme-hotel .shift-bar{
  background: #eef2f7; /* ベースは既存と同じ */
}

/* 保険：HTML側で shift-bar__fill が抜けても表示されるようにする */
body.recruit-page2 .theme-hotel .shift-bar__fill--early,
body.recruit-page2 .theme-hotel .shift-bar__fill--mid,
body.recruit-page2 .theme-hotel .shift-bar__fill--late{
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 999px;
}

/* ホテル色（= var(--biz-color)）で濃淡を作る */
body.recruit-page2 .theme-hotel .shift-bar__fill--early{
  background: var(--biz-color);
  opacity: .22;
}

body.recruit-page2 .theme-hotel .shift-bar__fill--mid{
  background: var(--biz-color);
  opacity: .30;
}

body.recruit-page2 .theme-hotel .shift-bar__fill--late{
  background: var(--biz-color);
  opacity: .40;
}




/* =========================
   リサイクル：shift-bar をテーマ色で表示
   ========================= */
body.recruit-page2 .theme-recycle .shift-bar{
  background: #eef2f7; /* ベース */
}

body.recruit-page2 .theme-recycle .shift-bar__fill--early,
body.recruit-page2 .theme-recycle .shift-bar__fill--mid,
body.recruit-page2 .theme-recycle .shift-bar__fill--late{
  background: var(--biz-color);
}

/* 濃淡（必要なら） */
body.recruit-page2 .theme-recycle .shift-bar__fill--early{ opacity: .22; }
body.recruit-page2 .theme-recycle .shift-bar__fill--mid{   opacity: .30; }
body.recruit-page2 .theme-recycle .shift-bar__fill--late{  opacity: .40; }








/* =========================
   Card spacing controls
   ========================= */
body.recruit-page2{
  --card-pt: 22px;   /* ← カード上の余白（ここだけで一気に変わる） */
  --card-px: 32px;   /* ← 左右余白 */
  --card-pb: 32px;   /* ← 下余白 */

  --kicker-mb: 10px;  /* ← 小さい英文の下の余白 */
  --title-mb: 15px;  /* ← 見出しの下の余白（＝金額との距離） */
  --value-mb: 5px;  /* ← 金額の下の余白 */
}

/* 1) カード本体の padding を一括で上書き
   - .biz-left-border を使ってるカード
   - bg-white + p-8 を使ってるカード（募集要項など）
*/
body.recruit-page2 .tab-content .biz-left-border,
body.recruit-page2 .tab-content .bg-white.p-8{
  padding: var(--card-pt) var(--card-px) var(--card-pb) !important;
}

/* 2) card-kicker / 見出し / 金額周りの余白を一括調整 */
body.recruit-page2 .tab-content .card-kicker{
  margin: 0 0 var(--kicker-mb) 0 !important;
}

body.recruit-page2 .tab-content .card-kicker + h5,
body.recruit-page2 .tab-content .card-kicker + h6{
  margin: 0 0 var(--title-mb) 0 !important;
}



/* ===== Q&A余白：value-mb方式（ここだけ数字調整） ===== */

/* まず Tailwindの space-y / gap を無効化（これが効かない原因の本丸） */
body.recruit-page2 .qa-wrap > :not([hidden]) ~ :not([hidden]) { margin-top: 0 !important; } /* space-y-* を潰す */
body.recruit-page2 .qa-wrap .gap-4 { row-gap: 0 !important; } /* gap-4 を潰す（念のため） */

/* Q → 回答の間 */
body.recruit-page2 .qa-q { margin-bottom: 12px !important; }   /* ←ここ調整 */

/* 回答 → 次のQ（次ブロック）の間 */
body.recruit-page2 .qa-a { margin-bottom: 12px !important; }   /* ←ここ調整 */

/* 最後の回答だけは下余白いらない場合 */
body.recruit-page2 .qa-wrap > div:last-child .qa-a { margin-bottom: 0 !important; }




/* ✅ スマホでは is-open でも 1カラム固定にする（カードが横並びにならない） */
[data-interview-grid].is-open{
  grid-template-columns: 1fr !important;
}

/* ✅ md以上だけ 2カラムにする（必要なら） */
@media (min-width: 768px){
  [data-interview-grid].is-open{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ✅ 吹き出しは常に全幅 */
[data-interview-expansion]{
  grid-column: 1 / -1 !important;
}

/* ✅ スマホ：吹き出しの上（tail〜Daily Work）と下（最後の回答〜下端）に余白 */
@media (max-width: 767px){
  [data-interview-expansion]{
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
  }
}

/* ✅ スマホ：Q見出しの行間を広げる */
@media (max-width: 767px){
  .qa-q{
    line-height: 2 !important;
  }
}




/* ====== tab-content の基本制御 ====== */
body.recruit-page2 .tab-content { display: none; }
body.recruit-page2 .tab-content.active { display: block; }

/* ====== STEP表示制御（showStepの.visible用） ====== */
body.recruit-page2 .selection-step { display: none; }
body.recruit-page2 .selection-step.visible { display: block; }

/* （念のため）content-area 自体も visible で制御してる場合 */
body.recruit-page2 #content-area { display: none; }
body.recruit-page2 #content-area.visible { display: block; }

body.recruit-page2 .coming-soon-overlay {
  position: relative; /* fixed をやめる */
}



/* =========================================================
   ComingSoon時：Entry Information 強制非表示（JSの補助）
   ========================================================= */
body.recruit-page2 #business-recruitment-container[data-entry-visible="0"] #entry-section,
body.recruit-page2 #business-recruitment-container[data-entry-visible="0"] [data-entry-info]{
  display: none !important;
  opacity: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
}






/* interview：短文スケジュール横の「縦並び画像」を低くする */
/* Interview photos (short schedule layout)
   - Mobile (<768): 2 images side-by-side under schedule (stack becomes 2-col grid)
   - Desktop (>=768): 2 images stacked vertically with max height + scroll
*/

body.recruit-page2 .interview-photo-stack{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;        /* gap-4相当：常に一定 */
  max-height:none; /* mobileはスクロールさせない */
  overflow:visible;
}

body.recruit-page2 .interview-photo-slim{
  height:140px;     /* mobile画像の高さ */
  border-radius:24px;
  overflow:hidden;
}

@media (min-width:768px){
  body.recruit-page2 .interview-photo-stack{
    display:flex;
    flex-direction:column;
    gap:16px;
    max-height:500px; /* 伸びすぎ防止 */
    overflow:auto;    /* はみ出したらスクロール */
  }

  body.recruit-page2 .interview-photo-slim{
    height:220px;     /* desktop画像の高さ */
  }
}

/* 画像2枚を「左スケジュール」に対して縦中央寄せ（PCのみ） */
@media (min-width:768px){
  body.recruit-page2 .interview-photo-col{
    display:flex;
    flex-direction:column;
    justify-content:center; /* ←縦中央 */
    height:100%;
  }
}

/* 短文レイアウト：左7：右3（PCのみ） */
@media (min-width:768px){
  body.recruit-page2 .interview-photo-grid--narrow{
    grid-template-columns: 6fr 4fr;
  }
}




/* WLB：有給カードだけ確実に「固定高さ + 中身まとめて縦中央」 */
body.recruit-page2 .wlb-metric-card{
  width: min(320px, 100%) !important;
  max-width: 320px !important;

  height: 210px !important;            /* ←縦を固定（好みで200〜240） */
  padding: 26px 32px !important;

  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 12px !important;

  box-sizing: border-box;
}

/* 既存の p margin や mt/mb 系でズレないように */
body.recruit-page2 .wlb-metric-card p{
  margin: 0 !important;
}



/* ================================
   Life/Condition cards：棒位置をCSSで統一
   ================================ */
body.recruit-page2 .lc-card{
  display:flex;
  flex-direction:column;
  height:100%;
}

/* 上段の高さを揃える：ここが「棒の位置が揃う」本体 */
@media (min-width:768px){
  body.recruit-page2 .lc-card .lc-head{
    min-height: 170px; /* ←好みで微調整（160〜190） */
  }
}

/* 下段：棒（border-top）を必ず同じ段の先頭に置く */
body.recruit-page2 .lc-card .lc-body{
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(226,232,240,1); /* slate-100相当 */
}

/* head内の縦余白を安定させる（Tailwindのmb/mt差でズレないように） */
body.recruit-page2 .lc-card .lc-meta{
  margin-top: 8px;
}

/* 休日カードの3交替：表っぽく整列 */
body.recruit-page2 .lc-dl{
  display:flex;
  flex-direction:column;
  gap: 10px;
}
body.recruit-page2 .lc-dl-row{
  display:grid;
  grid-template-columns: 3.5rem 1fr;
  gap: 12px;
  align-items:center;
}


/* Careerアップ：右のイラストを「切らない＆ひとまわり小さく」(HTML変更なし) */
body.recruit-page2 .career-photos img{
  width: 85% !important;      /* ひとまわり小さく（88〜95%で調整） */
  height: auto !important;    /* h-72 / sm:h-96 を無効化 */
  object-fit: contain !important; /* object-cover を無効化（切れ防止） */
  display: block;
  margin: 0 auto;             /* 中央寄せ */
}



body.recruit-page2 .lc-card .mt-8.pt-6.border-t p{
  margin: 10px 0;
}



/* Entry buttons：縦幅を少し広げる + 下線はホバー時だけ */
body.recruit-page2 #entry-buttons-container a{
  padding-top: 1.5rem;   /* ←好みで 1.25〜1.75rem */
  padding-bottom: 1.5rem;
  text-decoration: none;
}

body.recruit-page2 #entry-buttons-container a:hover{
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 3px;
}



/* 福利厚生カード右上の薄い番号だけ濃くする */
body.recruit-page2 .biz-card .absolute.top-4.right-6.opacity-5{
  opacity: .18 !important;  /* 0.08〜0.18くらいで調整 */
}