/* =========================================================
   recruit-top.css（全文・整理版）
   - 競合していた .ks-recruit-workstyle 定義を一本化
   - Swiper矢印を「画像の中央」に固定（文章に重ならない）
   - SPで画像/ラベル/余白が崩れない
========================================================= */

/* -------------------------
   HERO（画像1枚）
------------------------- */
.ks-recruit-hero{
  height: clamp(260px, 55vw, 520px);
  background-image: url("https://kubosetsubi1974.com/wp-content/uploads/2025/12/YOUR_IMAGE_URL_HERE.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
}

/* PCで目の位置を少し右寄せ */
@media (min-width: 900px){
  .ks-recruit-hero{ background-position: 60% 50%; }
}

/* SP：高さを比率で固定して “デカすぎ” を防ぐ */
@media (max-width: 768px){
  .ks-recruit-hero{
    height: auto !important;
    min-height: 220px !important;
    aspect-ratio: 16 / 9 !important;

    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-color: #ffffff !important;
  }
}


/* -------------------------
   2段目：About Us
   （※あなたのHTMLが __panel 系ならこちらが効く）
------------------------- */
.ks-about{
  padding: 28px 0 40px;
  background: #fff;
}

.ks-about__inner{
  width: min(1100px, calc(100% - 32px));
  margin: 0 auto;
}

.ks-about__panel{
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: #d9d9d9;
  padding: 26px 22px 22px;
}

/* 左上→右下の斜め帯（白） */
.ks-about__panel::before{
  content:"";
  position:absolute;
  inset: -40px -60px auto auto;
  width: 140%;
  height: 140%;
  background: #fff;
  transform: rotate(-35deg);
  transform-origin: top right;
  opacity: 0.95;
}

/* 右上の紫アクセント */
.ks-about__panel::after{
  content:"";
  position:absolute;
  top: 0;
  right: 0;
  width: 120px;
  height: 120px;
  background: #3b4cff;
  clip-path: polygon(100% 0, 0 0, 100% 100%);
  opacity: .85;
}

.ks-about__head,
.ks-about__qa,
.ks-about__body{
  position: relative;
  z-index: 1;
}

.ks-about__head{
  display:flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.ks-about__title{
  font-size: clamp(28px, 5vw, 44px);
  font-weight: 800;
  letter-spacing: .02em;
  color:#111;
  margin: 0;
}

.ks-about__sub{
  font-size: 14px;
  font-weight: 700;
  color:#111;
  opacity:.9;
  margin: 0;
}

.ks-about__qa{
  display:grid;
  gap: 10px;
  margin-bottom: 14px;
}

.ks-about__q,
.ks-about__a{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  line-height: 1.55;
  font-weight: 700;
  color:#111;
}

.ks-about__mark{
  display:inline-grid;
  place-items:center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #111;
  color:#fff;
  font-size: 14px;
  flex: 0 0 28px;
}

.ks-about__a .ks-about__mark{ background:#1d4ed8; }

.ks-about__body{
  font-size: 14px;
  line-height: 1.9;
  color:#111;
  opacity:.92;
}

/* SP：読みやすさ */
@media (max-width: 768px){
  .ks-about{ padding: 16px 0 22px !important; }
  .ks-about__panel{ padding: 16px 14px 14px !important; border-radius: 14px !important; }
  .ks-about__panel::after{ width: 90px; height: 90px; }
  .ks-about__sub{ font-size: 12px; line-height: 1.2; }
  .ks-about__body{ font-size: 13px; line-height: 1.85; }
}


/* =========================================================
   3段目：WORKSTYLE（Swiper）
   ここを一本化（競合していた定義を全整理）
========================================================= */
.ks-recruit-workstyle{
  padding: 48px 0;
  background: #fff;
}

/* Swiper自体を基準に矢印を絶対配置したいので relative */
.ks-recruit-workstyle .swiper{
  position: relative;
}

/* スライド：PCは横並び */
.ks-recruit-workstyle .swiper-slide.ks-step-slide{
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 32px 24px;
  max-width: 1100px;
  margin: 0 auto;
  box-sizing: border-box;
}

/* 画像ブロック（figureがある前提。無い場合も後ろで救済） */
.ks-recruit-workstyle .ks-step-image{
  flex: 0 0 460px;
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  /* 画像高を安定させて矢印のYズレを止める */
  aspect-ratio: 16 / 9;
  background: #eee;
}

.ks-recruit-workstyle .ks-step-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* もし <img> 直置きのスライドが混ざっても “同じ扱い” にする救済 */
.ks-recruit-workstyle .swiper-slide > img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}

/* テキスト */
.ks-recruit-workstyle .ks-step-content{
  flex: 1;
  min-width: 0;
}

.ks-recruit-workstyle .ks-badge{
  display:inline-block;
  background:#1d4ed8;
  color:#fff;
  padding:10px 16px;
  border-radius: 8px;
  font-weight:700;
  margin: 0 0 10px;
  white-space: nowrap;
}

.ks-recruit-workstyle .ks-step-title{
  margin: 0 0 14px;
  font-size: 28px;
  line-height: 1.35;
}

.ks-recruit-workstyle .ks-step-text{
  margin: 0 0 12px;
  line-height: 1.9;
  font-size: 15px;
}

/* ページャ */
.ks-recruit-workstyle .swiper-pagination-bullet-active{
  background:#1d4ed8;
}

/* -------------------------
   ★矢印：文章に重ならない位置へ（画像中央）
   ボタンが “スライド外” に居る実装でも効くように
------------------------- */
.ks-recruit-workstyle .swiper-button-prev,
.ks-recruit-workstyle .swiper-button-next{
  color: #1d4ed8;
  width: 44px;
  height: 44px;
  z-index: 20;
  top: 32px;                 /* 一旦上からの基準を置く */
  transform: none;
}

/* 画像枠（16:9）の中央に合わせる：画像の高さ = 画像幅 * 9/16
   ただし Swiperボタンは “スライド全体” 基準なので、
   スライド上端 + 画像高さ/2 を狙うために擬似的に計算する。

   ここでは「画像高さの半分」をざっくり固定してズレにくくする：
   - PC：画像幅が460px相当 → 高さ約259px → 半分約130px
*/
@media (min-width: 769px){
  .ks-recruit-workstyle .swiper-button-prev,
  .ks-recruit-workstyle .swiper-button-next{
    top: 32px;                         /* スライドの上余白 */
    margin-top: 130px;                 /* 画像高さ/2 ぶん下げる */
    transform: translateY(-50%);
  }
  .ks-recruit-workstyle .swiper-button-prev{ left: 12px; }
  .ks-recruit-workstyle .swiper-button-next{ right: 12px; }
}

/* SP：縦積み＋矢印は画像の中央 */
@media (max-width: 768px){

  .ks-recruit-workstyle{
    padding: 24px 16px !important;
  }

  .ks-recruit-workstyle .swiper-slide.ks-step-slide{
    display: block !important;
    padding: 0 !important;
    max-width: 720px;
  }

  .ks-recruit-workstyle .ks-step-image{
    width: 100%;
    flex: none;
    margin: 0 0 12px;
    border-radius: 12px;
    /* SPは縦長になりやすいので少しだけ比率を変えて見栄え優先 */
    aspect-ratio: 4 / 3;
  }

  /* SPの矢印：上から画像の “半分” へ（4:3 → 高さは幅*3/4）
     幅が画面いっぱいになるので、半分はだいたい 35vw 前後が安定 */
  .ks-recruit-workstyle .swiper-button-prev,
  .ks-recruit-workstyle .swiper-button-next{
    width: 36px;
    height: 36px;
    top: 0;
    margin-top: 35vw;
    transform: translateY(-50%);
  }
  .ks-recruit-workstyle .swiper-button-prev{ left: 8px; }
  .ks-recruit-workstyle .swiper-button-next{ right: 8px; }

  /* テキスト（ボタンに干渉しないよう上余白を確保） */
  .ks-recruit-workstyle .ks-step-content{
    padding: 0 2px 18px;
  }

  .ks-recruit-workstyle .ks-step-title{ font-size: 20px; }
  .ks-recruit-workstyle .ks-badge{ max-width: 100%; }
}


/* =========================================================
   4段目：4枚カード（働きやすさ）
========================================================= */
.ks-features{
  padding: 56px 0;
  background: #fff;
}

.ks-features__inner{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

.ks-feature{
  background: #d9d9d9;
  border-radius: 14px;
  padding: 26px 22px 22px;
  position: relative;
  overflow: hidden;
}

.ks-feature::after{
  content:"";
  position:absolute;
  top:-22px;
  right:-34px;
  width: 120px;
  height: 60px;
  background: rgba(29,78,216,.45);
  transform: rotate(35deg);
}

.ks-feature__icon{ font-size: 40px; line-height: 1; margin-bottom: 10px; }
.ks-feature__title{ margin: 0 0 10px; font-size: 18px; line-height: 1.4; }
.ks-feature__text{ margin: 0; font-size: 13px; line-height: 1.9; }

@media (max-width: 768px){
  .ks-features__inner{ grid-template-columns: 1fr; }
}


/* =========================================================
   5段目：Message
========================================================= */
.ks-message{
  padding: 70px 0;
  background: #fff;
}

.ks-message__inner{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 26px;
  align-items: center;
}

.ks-message__eyebrow{
  font-size: 64px;
  font-weight: 800;
  letter-spacing: .02em;
  margin: 0;
}

.ks-message__sub{ margin: 6px 0 18px; font-weight: 700; }
.ks-message__title{ margin: 0 0 18px; font-size: 20px; }
.ks-message__text{ margin: 0 0 12px; line-height: 2; font-size: 14px; }

.ks-message__visual{
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  background-image:
    linear-gradient(135deg, rgba(255,255,255,.0) 0 48%, rgba(255,255,255,.92) 48% 56%, rgba(255,255,255,.0) 56% 100%),
    url("https://kubosetsubi1974.com/wp-content/uploads/2023/01/staff_03.jpg");
  background-size: cover;
  background-position: center;
  filter: grayscale(100%);
  position: relative;
  overflow: hidden;
}

@media (max-width: 768px){
  .ks-message__inner{ grid-template-columns: 1fr; }
  .ks-message__eyebrow{ font-size: 44px; }
}


/* -------------------------
   仕上げ：画像はみ出し保険
------------------------- */
.ks-recruit-workstyle img,
.ks-message img{
  max-width: 100%;
  height: auto;
}

/* =========================================================
   Swiper 矢印デザイン（オリジナル寄せ：青い四角＋白矢印）
   ※「位置」は触らず、見た目だけ上書き
========================================================= */
.ks-recruit-workstyle .swiper{
  position: relative; /* 念のため（矢印の基準） */
}

/* ボタン本体：青い四角 */
.ks-recruit-workstyle .swiper-button-prev,
.ks-recruit-workstyle .swiper-button-next{
  width: 48px !important;
  height: 48px !important;
  background: #1d4ed8 !important;
  border-radius: 0px !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

/* 矢印（Swiperの疑似要素）を白く・太く */
.ks-recruit-workstyle .swiper-button-prev::after,
.ks-recruit-workstyle .swiper-button-next::after{
  font-size: 18px !important;
  font-weight: 900 !important;
  color: #fff !important;
}

/* 画像や文章に“乗って見える”のを防ぐ（必要なら） */
.ks-recruit-workstyle .swiper-button-prev,
.ks-recruit-workstyle .swiper-button-next{
  z-index: 20 !important;
}

/* SPは少し小さく（オリジナルっぽく） */
@media (max-width: 768px){
  .ks-recruit-workstyle .swiper-button-prev,
  .ks-recruit-workstyle .swiper-button-next{
    width: 44px !important;
    height: 44px !important;
  }
  .ks-recruit-workstyle .swiper-button-prev::after,
  .ks-recruit-workstyle .swiper-button-next::after{
    font-size: 16px !important;
  }
}

/* recruit-top：Message 斜め帯を消し、写真は残す */
body.page-id-4154 .ks-message__visual{
  background-image: url("https://kubosetsubi1974.com/wp-content/uploads/2023/01/staff_03.jpg") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: cover !important;
}

/* =========================================================
   WORKSTYLE（Swiper）PCの「適切なシフト」復活パッチ
========================================================= */
@media (min-width: 769px){
  .ks-recruit-workstyle,
  .ks-recruit-workstyle .swiper,
  .ks-recruit-workstyle .swiper-wrapper{
    overflow: visible !important;
  }

  .ks-recruit-workstyle .swiper-slide.ks-step-slide{
    width: 920px;
    max-width: 92vw;
    margin: 0 auto;
    box-sizing: border-box;
  }
}

/* =========================================================
   WORKSTYLE 二段表示（写真→文章）
========================================================= */
.ks-recruit-workstyle .swiper-slide.ks-step-slide{
  display:flex;
  flex-direction:column;
}

/* 写真を上に */
.ks-recruit-workstyle .ks-step-image{
  order:1;
  width:100%;
  margin-bottom:16px;
}

/* 文章を下に */
.ks-recruit-workstyle .ks-step-content{
  order:2;
  width:100%;
}

/* =========================================================
   WORKSTYLE：PCで「写真＋文章」1セットを中央に固定
========================================================= */
@media (min-width: 769px){

  .ks-recruit-workstyle,
  .ks-recruit-workstyle .swiper,
  .ks-recruit-workstyle .swiper-wrapper{
    overflow: visible !important;
  }

  .ks-recruit-workstyle .swiper-slide.ks-step-slide{
    width: 900px !important;
    max-width: calc(100vw - 220px) !important;
    box-sizing: border-box !important;

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

    padding: 0 !important;
    margin: 0 !important;
  }

  .ks-recruit-workstyle .ks-step-image{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    flex: none !important;
  }

  .ks-recruit-workstyle .ks-step-image img{
    width: 100% !important;
    display: block !important;
  }

  .ks-recruit-workstyle .ks-step-content{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    flex: none !important;
  }

  .ks-recruit-workstyle .ks-step-content *{
    max-width: 100%;
    box-sizing: border-box;
  }
}

/* =========================================================
   固定「詳細を見る」ボタン（このブロックだけ有効）
   - 既存の .rd-detail-btn は消す
   - 追加した .rd-detail-btn-fixed だけを使う
========================================================= */
.ks-recruit-hero .rd-detail-btn{
  display: none !important;
}

.rd-detail-btn-fixed{
  position: fixed !important;
  top: 60px !important;
  right: 1px !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 999999 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 110px !important;
  height: 48px !important;
  padding: 0 !important;
  margin: 0 !important;

  background: #1f33ff !important;
  color: #fff !important;
  text-decoration: none !important;

  font-weight: 800 !important;
  font-size: 13px !important;
  line-height: 1 !important;
  letter-spacing: .04em !important;

  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

.rd-detail-btn-fixed:hover{
  background: #1626c9 !important;
  color: #fff !important;
}

/* =========================================
   recruit-top PC版レイアウト補正
   - WORKSTYLE の横幅・高さ崩れ修正
   - 画面幅に合わせる
========================================= */

@media (min-width: 769px){

  /* セクション全体 */
  .ks-recruit-workstyle{
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 48px 24px !important;
    overflow: hidden !important;
  }

  /* Swiper本体 */
  .ks-recruit-workstyle .swiper{
    width: 100% !important;
    max-width: 1100px !important;
    margin: 0 auto !important;
    overflow: hidden !important;
  }

  /* ラッパ */
  .ks-recruit-workstyle .swiper-wrapper{
    align-items: stretch !important;
  }

  /* 1スライド */
  .ks-recruit-workstyle .swiper-slide.ks-step-slide{
    width: 100% !important;
    max-width: 1100px !important;
    margin: 0 auto !important;
    padding: 0 !important;

    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 28px !important;
    align-items: start !important;
    box-sizing: border-box !important;
  }

  /* 画像側 */
  .ks-recruit-workstyle .ks-step-image{
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    margin: 0 !important;
    overflow: hidden !important;
    border-radius: 12px !important;
  }

  .ks-recruit-workstyle .ks-step-image img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* テキスト側 */
  .ks-recruit-workstyle .ks-step-content{
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  /* 左右矢印 */
  .ks-recruit-workstyle .swiper-button-prev,
  .ks-recruit-workstyle .swiper-button-next{
    top: 220px !important;
    transform: translateY(-50%) !important;
  }

  .ks-recruit-workstyle .swiper-button-prev{
    left: 8px !important;
  }

  .ks-recruit-workstyle .swiper-button-next{
    right: 8px !important;
  }
}