/* =========================
   RECRUIT ページ専用スタイル
   ========================= */

/* ページ全体 */
.recruit {
  position: relative;
  background: linear-gradient(#eaf3ff 0%, #f6fbff 35%, #ffffff 80%);
  overflow: hidden;
}

/* -------------------------
   KV
------------------------- */
.page-kv {
  position: relative;
  width: 100%;
  height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  overflow: hidden;
}
.page-kv__bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.page-kv__inner { position: relative; z-index: 2; }
.page-kv__title {
  font-family: "游明朝", "Yu Mincho", YuMincho,
    "Hiragino Mincho ProN", "Hiragino Mincho Pro",
    HGS明朝E, メイリオ, Meiryo, serif;
  font-size: 3.4em;
  font-weight: bold;
  letter-spacing: 0.08em;
  line-height: 1.3;
}
.page-kv__subtitle {
  display: block;
  font-size: 0.35em;
  margin-top: 0.4em;
  letter-spacing: 0.15em;
}

/* -------------------------
   パンくず
------------------------- */
.bread {
  font-size: 0.9em;
  margin: 20px auto;
  width: 90%;
  color: #666;
}
.bread a { color: #666; text-decoration: none; }
.bread a:hover { text-decoration: underline; }

/* -------------------------
   セクション
------------------------- */
.recruit .section {
  width: 1100px;
  max-width: 92%;
  margin: 0 auto;
  padding: 64px 0;
}
@media screen and (max-width: 768px) {
  .recruit .section { padding: 44px 0; }
}

/* -------------------------
   見出し
------------------------- */
./* midashi（PC共通） */
.recruit .midashi {
  text-align: center;
  color: #0d2b5b;
  font-family: "游明朝", "Yu Mincho", YuMincho,
    "Hiragino Mincho ProN", "Hiragino Mincho Pro",
    HGS明朝E, メイリオ, Meiryo, serif !important;
  font-weight: bold;
  font-size: 2.6em;
  line-height: 1.6;
  letter-spacing: .08em;
  margin: 0 0 1em;
}

/* midashi のアンダーラインを完全に無効化 */
.recruit .midashi::before,
.recruit .midashi::after {
  content: none !important;
  display: none !important;
  border: none !important;
}

/* スマホ（フォントサイズ変更） */
@media screen and (max-width: 479px) {
  .recruit .midashi {
    font-size: 1.8em !important;
    line-height: 1.4 !important;
    margin: 0 auto 0 !important;
    text-align: center !important;
  }
}

/* アンダーライン付き見出し（キャッチコピー用） */
.section--catch { text-align: center; }
.recruit .midashi-line {
  display: inline-block;
  text-align: center;
  color: #0d2b5b;
  font-family: 游明朝,"Yu Mincho",YuMincho,
    "Hiragino Mincho ProN","Hiragino Mincho Pro",
    HGS明朝E,メイリオ,Meiryo,serif;
  font-weight: bold;
  font-size: 2.8em;
  line-height: 1.6;
  letter-spacing: .06em;
  margin: 0 0 28px;
}
.recruit .midashi-line::after { content:none !important; }
.recruit .midashi-line .u-accent {
  display:inline;
  padding-bottom:.08em;
  background-image:linear-gradient(#bcd9f0,#bcd9f0);
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:100% 8px;
}
/* スマホ用 */
@media screen and (max-width: 479px) {
  .recruit .midashi-line {
    font-size: 1.8em;
    line-height: 1.4;
    margin: 0 auto 20px;
    text-align: center;
  }
}

/* -------------------------
   本文
------------------------- */
.recruit .prose {
  max-width: 820px;
  margin: 0 auto;
  font-size: 15px;
  line-height: 2.2;
  color: #2d3b4a;
  text-align: center;
}
.recruit .prose p { margin-bottom: 1.8em; }
.recruit .prose p + p { margin-top: 1.1em; }
.recruit .prose p:last-of-type { margin-bottom: 3em; }

/* -------------------------
   箇条書き
------------------------- */
.recruit .list-dash {
  list-style: none !important;
  padding: 0;
  margin: 14px auto 24px;
  max-width: 780px;
  color: #2d3b4a;
  text-align: center;
}
.recruit .list-dash li {
  position: relative;
  margin: .6em 0;
  padding-left: 0 !important;
}
.recruit .list-dash li::before { content: none !important; }

 /* ========================= バナー 背景（右下ずらし） ========================= */ 
.recruit #recruit02 ul.thumbs {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 0 0 32px;
  padding: 0;
  list-style: none;
  width: 1100px;
  max-width: 92%;
  margin-left: auto;
  margin-right: auto;
}

.recruit #recruit02 ul.thumbs li {
  position: relative;
}

.recruit #recruit02 ul.thumbs a.thumbs__link {
  display: block;
  position: relative;
  overflow: hidden;
  /* 角丸や余計な背景は入れない */
  border-radius: 0;
  background: none;
}

.recruit #recruit02 ul.thumbs img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* 背面の水色の四角（右下ずらし） */
.recruit #recruit02 ul.thumbs li::before {
  content: "";
  position: absolute;
  top: 30px;   /* ずらし量（縦） */
  left: 30px;  /* ずらし量（横） */
  width: 100%;
  height: 100%;
  background: #cfe6ff;
  z-index: 0;
}

.recruit #recruit02 ul.thumbs li > a {
  position: relative;
  z-index: 1; /* 背景より前に表示 */
}

/* 3つ目（ワイド画像用） */
.recruit #recruit02 ul.thumbs li.thumbs__item--wide {
  grid-column: 1 / -1;
}

/* スマホ時（縦1カラム） */
@media screen and (max-width: 768px) {
  .recruit #recruit02 ul.thumbs {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}
/* 募集要項バナー専用スタイル */
.recruit #recruit02 ul.thumbs li.thumbs__item--wide {
  grid-column: 1 / -1; /* 横幅いっぱい */
}

.recruit #recruit02 ul.thumbs li.thumbs__item--wide::before {
  content: "";
  position: absolute;
  top: 30px;     /* 縦ずらし量 */
  left: -30px;    /* 横ずらし量（通常より広めにずらす等も調整可） */
  width: 100%;
  height: 100%;
  background: #cfe6ff;
  z-index: 0;
}

.recruit #recruit02 ul.thumbs li.thumbs__item--wide > a {
  position: relative;
  z-index: 1;
}
@media screen and (max-width: 768px) {
  .recruit #recruit02 ul.thumbs li.thumbs__item--wide::before {
    top: 30px;
    left: -30px;  /* スマホでは余白を少し小さめに */
  }
}

/* -------------------------
   応募ボタン
------------------------- */
.recruit .fixedBtn {
  background: #171c61;
  color: #fff;
  width: 300px;
  padding: 20px;
  text-align: center;
  display: block;
  margin: 32px auto 0;
  font-weight: 700;
  letter-spacing: 0.2em;
  border-radius: 4px;
  box-shadow: 0 6px 18px rgba(13, 43, 91, 0.18);
  transition: 0.3s;
}
.recruit .fixedBtn:hover { opacity: 0.85; }

/* -------------------------
   パンくずリスト
------------------------- */
#bread-nav { width: 100%; }
#bread-nav-inr {
  margin: 0 auto;
  padding: 20px;
  font-size: 0.5em;
}
#bread-nav-inr a {
  text-decoration: none;
  color: #444;
}
#bread-nav-inr a:hover { text-decoration: underline; }

/* -------------------------
   ページタイトル背景
------------------------- */
.recruit .page-title {
  background: url("../img/kv-recruit.jpg") no-repeat center center;
  background-size: cover;
  padding: 100px 0 80px;
  text-align: center;
}
.recruit .page-title h2 {
  font-family: 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",
    "Hiragino Mincho Pro",HGS明朝E,メイリオ,Meiryo,serif;
  color: #fff;
  margin: 0;
  font-size: 4em;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.recruit .page-title h2 span {
  display: block;
  font-size: 0.3em;
  margin-top: 0.4em;
  letter-spacing: .1em;
}
/* midashi（見出し）修正版 */
#page-field.recruit h2.midashi {
  display: block;
  text-align: center !important; /* PC/スマホ両方で中央寄せ */
  color: #0d2b5b;
  font-family: "游明朝", "Yu Mincho", YuMincho,
    "Hiragino Mincho ProN", "Hiragino Mincho Pro",
    HGS明朝E, メイリオ, Meiryo, serif !important;
  font-weight: bold;
  font-size: 2.6em;
  line-height: 1.6;
  letter-spacing: .08em;
  margin: 0 auto 1em auto;
  width: 100%; /* ブロック幅を固定してテキスト中央寄せ */
}

/* アンダーライン完全無効化 */
#page-field.recruit h2.midashi::before,
#page-field.recruit h2.midashi::after {
  content: none !important;
  display: none !important;
  border: none !important;
}

/* スマホ調整 */
@media screen and (max-width: 479px) {
  #page-field.recruit h2.midashi {
    font-size: 1.8em !important;
    line-height: 1.4 !important;
    margin: 0 auto !important;
  }
}
/* 旧スマホ用スタイルを打ち消し */
@media screen and (max-width: 768px) {
  #page-field.recruit #recruit02 ul li a {
    border: none !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
  }
}
/* Recruit 3バナー：過去のカード風スタイルを無効化 */
#page-field.recruit #recruit02 ul li a{
  background: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* 擬似要素で付けている薄い枠（上部の細い線の正体）をOFF */
#page-field.recruit #recruit02 ul li a::after{
  content: none !important;
  border: 0 !important;
}
/* prose 全体はセンター寄せ */
.recruit .prose {
  text-align: center;
}

/* prose 全体はセンター寄せのまま、リストだけ左寄せにする */
.recruit .prose .list-wrapper {
  text-align: left;
  width: 80%;       /* ← 好きな幅に調整。例：80%、max-width:780px でもOK */
  max-width: 780px;
  margin: 1.5em auto;  /* ← 左右autoで全体中央に配置 */
}


/* （任意）■をきれいに左揃えしたい場合 */
.recruit .prose .list-dash li {
  margin: .6em 0;
  line-height: 2;
  padding-left: 1.2em;               /* 文字と■の間隔 */
  text-indent: -1.2em;               /* 行頭を■に揃える */
}
/* ===== リストだけ左寄せを“強制”する最終上書き（CSSの一番下に追加） ===== */

/* ラッパー自体は中央配置（幅は必要に応じて調整） */
#page-field.recruit .prose .list-wrapper {
  width: 80%;
  max-width: 780px;
  margin: 1.5em auto;
  text-align: left !important; /* ← 継承を断ち切る */
  display: block;
}

/* ul と li 両方に left を強制（上書き競合を完全に潰す） */
#page-field.recruit .prose .list-wrapper .list-dash,
#page-field.recruit .prose .list-wrapper .list-dash li {
  text-align: left !important;
}

/* 体裁（■をきれいに左揃え） */
#page-field.recruit .prose .list-wrapper .list-dash {
  list-style: none;
  padding: 0;
  margin: 0;
}
#page-field.recruit .prose .list-wrapper .list-dash li {
  margin: .6em 0;
  line-height: 2;
  padding-left: 1.2em;
  text-indent: -1.2em;
}
/* === RECRUIT：リスト包装だけ中央に置きつつ、内容は左寄せ === */
#page-field.recruit .prose .list-wrapper{
  width: 600px;                 /* PCでの見栄え用 */
  max-width: 100%;              /* 820pxのprose内で収まる */
  margin: 1.5em auto;           /* 中央配置 */
  text-align: left !important;  /* 親のcenterを打ち消し */
}

/* SPは全幅にする */
@media (max-width: 768px){
  #page-field.recruit .prose .list-wrapper{
    width: 100%;
    margin: 1.2em auto;
  }
}

/* リストを確実に左寄せ（競合対策） */
#page-field.recruit .prose .list-wrapper .list-dash,
#page-field.recruit .prose .list-wrapper .list-dash li{
  text-align: left !important;
}

/* 体裁：■の揃えをきれいにする（■を本文に書く方式のまま） */
#page-field.recruit .prose .list-wrapper .list-dash{
  list-style: none;
  padding: 0;
  margin: 0;
}
#page-field.recruit .prose .list-wrapper .list-dash li{
  margin: .6em 0;
  line-height: 2;
  padding-left: 1.2em;
  text-indent: -1.2em;  /* 行頭を■に揃える */
}
/* li内に■を書かない場合 */
#page-field.recruit .prose .list-wrapper .list-dash li{
  position: relative;
  padding-left: 1.2em;
  text-indent: 0;
}
#page-field.recruit .prose .list-wrapper .list-dash li::before{
  content: "■";
  position: absolute;
  left: 0;
  top: 0.1em;
  font-size: .9em;
  color: #2d3b4a;
}