@charset "UTF-8";

/* ==========================================================================
   求人サイト 福利厚生パーツ専用スタイル
   ========================================================================== */

/* 既存の共通設定（PCベース） */
.benefits-section {
  background-color: #f4f5f7; /* 背景：グレー */
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  color: #333333;
  line-height: 1.6;
  padding-bottom: 60px;
  margin-top: 50px; /* PC用：家族写真が上に50pxはみ出すための余白 */
  position: relative;
  box-sizing: border-box;
}

.benefits-section *,
.benefits-section *::before,
.benefits-section *::after {
  box-sizing: border-box;
}

/* 1100px幅のインナーコンテナ */
.benefits-container {
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
  padding: 0 20px;
}

/* 上部エリア（キャッチコピーと家族写真） */
.benefits-top {
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin-bottom: 50px;
}

@media (min-width: 768px) {
  .benefits-top {
    flex-direction: row;
    align-items: flex-end; /* PC時は下揃え */
    justify-content: space-between;
  }
}

.benefits-message {
  flex: 1;
  z-index: 2;
  padding-top: 40px;
}

.benefits-message h2 {
  font-size: 20px;
  color: #1e50a2; /* コーポレート用ブルー */
  font-weight: bold;
  margin-bottom: 15px;
  margin-top: 0;
}

.benefits-message .main-lead {
  font-size: 24px;
  font-weight: bold;
  color: #007bc3;
  margin-bottom: 25px;
  margin-top: 0;
}

.benefits-message .sub-lead {
  font-size: 18px;
  font-weight: bold;
  color: #007bc3;
  margin-bottom: 10px;
  margin-top: 0;
}

.benefits-message .highlight {
  font-size: 28px;
  font-weight: bold;
  color: #007bc3;
  display: block;
  margin-top: 10px;
}

/* 家族写真の配置調整 */
.benefits-visual-wrap {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

@media (min-width: 768px) {
  .benefits-visual-wrap {
    justify-content: flex-end;
  }
}

/* 家族写真のスタイル（PC時は50px上にはみ出させる） */
.benefits-family-img {
  width: 100%;
  max-width: 480px;
  height: auto;
  display: block;
  position: relative;
  top: -50px; /* PC時は50px上にはみ出す */
  margin-bottom: -50px;
  z-index: 3;
}

/* 下部エリア（統合画像）の調整（PCベース） */
.benefits-bottom-zone {
  width: 100%;
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.benefits-main-content-img {
  width: 100%;
  height: auto;
  max-width: 1100px;
  display: block;
}


/* ==========================================================================
   スマートフォン表示時の最適化（767px以下）
   ========================================================================== */
@media (max-width: 767px) {
  .benefits-section {
    margin-top: 0; /* はみ出しがクリアになるため、セクション上の不要なマージンをリセット */
    padding-top: 40px; /* スマホ時の適切な上部余白 */
    padding-bottom: 40px;
  }
  
  .benefits-top {
    gap: 25px;
    margin-bottom: 20px; /* 下部コンテンツとの距離を調整 */
  }

  .benefits-message {
    padding-top: 0;
    text-align: center; /* スマホ時はテキストをセンター寄せ */
  }
  
  .benefits-message h2 { font-size: 18px; }
  .benefits-message .main-lead { font-size: 20px; margin-bottom: 15px; }
  .benefits-message .sub-lead { font-size: 16px; }
  .benefits-message .highlight { font-size: 22px; }
  
  /* スマホ表示時：家族写真の「50pxはみ出し」をクリアし、横幅60%のセンター揃え */
  .benefits-family-img {
    width: 60%; /* 横幅60%に変更 */
    top: 0; /* はみ出しの50pxをクリア（位置を戻す） */
    margin-bottom: 0; /* ネガティブマージンをクリア */
    margin-left: auto;
    margin-right: auto;
  }
  
  /* スマホ表示時：下部レイアウトは横幅90%のセンター、上のマージンを5pxにする */
  .benefits-bottom-zone {
    width: 90%; /* 横幅90%に設定 */
    margin-top: 5px; /* 上のマージンを5pxに指定 */
    margin-left: auto; /* センター揃え */
    margin-right: auto; /* センター揃え */
  }

  .benefits-main-content-img {
    max-width: 100%; /* 90%の親要素（benefits-bottom-zone）に対して100%幅でフィット */
  }
}



@charset "UTF-8";

/* ==========================================================================
   求人サイト 福利厚生項目リスト専用スタイル（完全版）
   ========================================================================== */

/* 全体の基本設定 */
.blist-section {
  background-color: #ffffff;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  color: #333333;
  line-height: 1.7;
  padding: 80px 0;
  box-sizing: border-box;
}

.blist-section *,
.blist-section *::before,
.blist-section *::after {
  box-sizing: border-box;
}

/* コンテナ設定（PC時は最大1100px） */
.blist-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

/* --------------------------------------------------------------------------
   前半：カプセルヘッダーが半分上にはみ出すカードデザイン
   -------------------------------------------------------------------------- */
.blist-card-group {
  display: flex;
  flex-direction: column;
  gap: 50px; /* はみ出しを考慮し、カード同士の縦の隙間を広めに確保 */
  margin-top: 25px; /* 先頭カードのはみ出し分の余白 */
  margin-bottom: 70px;
}

.blist-card {
  background: #f1f6ff;
  border: 1px solid #d4e3ff;
  border-radius: 12px;
  padding: 35px 45px 30px 45px;
  position: relative;
  min-height: 140px; /* ★PC表示時の最小高さを確保 */
}
/* 枠から半分上にはみ出す絶対配置 */
.blist-capsule-header {
  position: absolute;
  top: 0;
  left: 45px; /* カードの左パディングの位置に合わせる */
  transform: translateY(-50%); /* 自身の高さの半分だけ上へずらしてはみ出させる */
  z-index: 10;
}

.blist-capsule-title {
  background-color: #ffffff;
  color: #1a4fa0;
  font-size: 18px;
  font-weight: bold;
  border: 2px solid #1a4fa0;
  border-radius: 50px;
  padding: 10px 35px;
  display: inline-block;
  box-shadow: 0 3px 6px rgba(26, 79, 160, 0.1);
  white-space: nowrap;
}

/* カード内のテキスト */
.blist-card-text {
  list-style: none;
  padding-left: 0;
  margin-top: 10px;
  font-size: 16px;
  color: #333333;
  position: relative;
  z-index: 2;
}

.blist-card-text li {
  margin-bottom: 5px;
  text-indent: -1.2em;
  padding-left: 1.2em; /* 「●」の文字だけ左側に綺麗に整列させる処理 */
}

.blist-card-text li:last-child {
  margin-bottom: 0;
}

/* 赤背景のアクセントバッジ */
.blist-badge-red {
 text-indent: 0 !important;
  background-color: #e60012;
  color: #ffffff;
  font-size: 15px;
  font-weight: bold;
  padding: 5px 10px;
  border-radius: 4px;
  margin-left: 8px;

  /* display と vertical-align を以下に変更 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* 資格取得支援制度内の、カンプの一段下げたインデントレイアウト */
.blist-card-indent-box {
  margin-top: 15px;
  padding-left: 22px;
  position: relative;
  z-index: 2;
}

.blist-card-indent-box .indent-lead {
  background-color:#ffffff;
  padding:20px;
  font-size: 16px;
  color: #444444;
  margin: 0;
}

.blist-card-indent-box .blist-note-inline {
  font-size: 14px;
  color: #666666;
  margin-left: 8px;
  display: inline-block;
}

/* 背景透かしアイコン（共通設定：位置を右上に変更） */
.blist-watermark-icon {
  position: absolute;
  right: 25px;   /* 右端からの距離 */
  top: 20px;     /* 上（top）から少し余白を確保 */
  width: 90px;
  height: 90px;
  opacity: 1;
  pointer-events: none;
  z-index: 1;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center top; /* イラスト自体の基準も上揃えに設定 */
}
/* ★各カードごとの画像パスを指定（指定のパスへ書き換え完了） */
.blist-icon-award { 
  background-image: url("../images/benefits/award.webp"); 
}
.blist-icon-license { 
  background-image: url("../images/benefits/license.webp"); 
}
.blist-icon-family { 
  background-image: url("../images/benefits/family.webp"); 
}
.blist-icon-health { 
  background-image: url("../images/benefits/health.webp"); 
}
.blist-icon-calendar { 
  background-image: url("../images/benefits/calendar.webp"); 
}
.blist-icon-drink { 
  background-image: url("../images/benefits/drink.webp"); 
}
.blist-icon-chat { 
  background-image: url("../images/benefits/chat.webp"); 
}

/* --------------------------------------------------------------------------
   中央見出し
   -------------------------------------------------------------------------- */
.blist-main-title {
  font-size: 26px;
  color: #222222;
  font-weight: bold;
  text-align: left;
  margin-top: 40px;
  margin-bottom: 40px;
  letter-spacing: 0.02em;
}

/* --------------------------------------------------------------------------
   後半：カンプ再現 縦1カラム（1列）で繋がるレイアウト
   -------------------------------------------------------------------------- */
.blist-single-column-flow {
  display: flex;
  flex-direction: column;
  gap: 50px;
  margin-left:50px;
}

.blist-block-segment {
  width: 100%;
}

/* 平行四辺形風の斜めリボン見出し */
.blist-ribbon-title {
  color: #ffffff;
  font-size: 20px;
  font-weight: 900;
  padding: 10px 24px;
  margin-top: 0;
  margin-bottom: 25px;
  display: inline-block;
  transform: skewX(-15deg);
  border-radius: 2px;
}

.blist-ribbon-title span {
  display: block;
  transform: skewX(15deg);
  letter-spacing: 0.05em;
  font-weight: 900;
}

.blist-bg-blue {
  background-color: #1a4fa0;
}

.blist-bg-skyblue {
  background-color: #3b7fc4;
}

/* 項目リストのレイアウト（縦に連続） */
.blist-block-content {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.blist-item {
  padding-bottom: 5px;
}

/* 先頭に□（四角）のアイコンが入るタイトル */
.blist-item-title {
  font-size: 18px;
  color: #1a4fa0;
  font-weight: bold;
  margin-top: 0;
  margin-bottom: 12px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

/* 先頭の「□」を正確にCSS描写 */
.blist-item-title::before {
  content: "✓";
  display: inline-block;
  width: 25px;
  height: 25px;
  border: 1.5px solid #1a4fa0;
  background-color: #ffffff;
  flex-shrink: 0;
}

/* 下部リスト内の箇条書きのスタイリング */
.blist-item-bullets {
  list-style: none;
  padding-left: 26px; /* □の幅分インデント */
  margin: 0;
}

.blist-item-bullets li {
  font-size: 16px;
  color: #444444;
  margin-bottom: 8px;
  text-indent: -1.1em;
  padding-left: 1.1em;
}

.blist-item-bullets li:last-child {
  margin-bottom: 0;
}
/* 「社会保険完備」の部分を横並びにする設定 */
.blist-item-bullets.blist-inline-bullets {
  display: flex;
  flex-wrap: wrap; /* 画面幅が狭い時に自動で折り返すように設定 */
  gap: 0 20px;     /* 項目同士の横の間隔（20px） */
  padding-left: 26px; /* □マークの幅に合わせたインデントを維持 */
}

.blist-item-bullets.blist-inline-bullets li {
  margin-bottom: 0;   /* 横並びにするため下マージンをリセット */
  text-indent: 0;     /* 折り返しを考慮しない単発配置のためリセット */
  padding-left: 0;    /* リセット */
  white-space: nowrap; /* 各項目（●雇用保険 など）が途中で改行されるのを防ぐ */
}
/* ※専門運輸部は除く などの別途注釈テキスト */
.blist-note {
  font-size: 14px;
  color: #555555;
  margin: 8px 0 0 26px;
}

/* カンプ内の「赤背景白文字」とは異なる、「赤枠に赤文字」のGマーク専用バッジ設定 */
.blist-badge-red-outline {
  border: 1.5px solid #e60012;
  color: #e60012;
  background-color: #ffffff;
  font-size: 12px;
  font-weight: bold;
  padding: 2px 6px;
  border-radius: 2px;
  display: inline-block;
}



/* ==========================================================================
   スマートフォン表示時の最適化（767px以下）
   ========================================================================== */
@media (max-width: 767px) {
  /* スマホ表示時は「横幅90%・センター揃え」 */
  .blist-container {
    width: 90%;
    max-width: none;
    padding: 0;
    margin-left: auto;
    margin-right: auto;
  }

  .blist-section {
    padding: 50px 0;
  }

  .blist-card-group {
    gap: 35px;
  }

  .blist-card {
    padding: 35px 20px 20px 20px;
    min-height: 110px; /* ★スマホ表示時の最小高さを調整 */
  }
  /* ★スマホ表示時：イラストが枠からはみ出ないようサイズを縮小 */
  .blist-watermark-icon {
    top: 15px;      /* スマホ用に上の余白を少し詰める */
    right: 15px;    /* スマホ用に右の余白を少し詰める */
    width: 65px;    /* ★90pxから65pxに縮小 */
    height: 65px;   /* ★90pxから65pxに縮小 */
  }
.blist-badge-red {
  font-size: 13px;
  font-weight: bold;
  padding: 2px 5px;
  border-radius: 4px;
  margin-left: 2px;
}

  /* スマホ時もタイトル枠が「半分はみ出す」比率を完全に維持 */
  .blist-capsule-header {
    left: 20px; 
  }

  .blist-capsule-title {
    font-size: 14px;
    padding: 4px 20px;
  }

  .blist-card-text {
    font-size: 13.5px;
  }

  .blist-card-indent-box {
    padding-left: 14px;
  }

  .blist-main-title {
    font-size: 20px;
    margin-bottom: 30px;
  }

  .blist-single-column-flow {
    gap: 40px;
  }

  .blist-ribbon-title {
    font-size: 15px;
    padding: 8px 18px;
  }

  .blist-item-title {
    font-size: 14.5px;
  }

  .blist-item-bullets li {
    font-size: 13px;
  }
  .blist-item-bullets.blist-inline-bullets {
    gap: 4px 15px; /* スマホ画面では項目間の隙間を少し詰めて、綺麗に収まりやすくする */
  }
}


@charset "UTF-8";

/* ==========================================================================
   福利厚生ページ 最後のセクション（スマホ位置逆転・完全対応版）
   ========================================================================== */

/* セクション全体の基本設定 */
.bbottom-section {
  background-color: #ffffff;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  padding: 80px 0;
  box-sizing: border-box;
}

.bbottom-section *,
.bbottom-section *::before,
.bbottom-section *::after {
  box-sizing: border-box;
}

/* コンテンツの幅上限は 800px 固定 */
.bbottom-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 20px;
}

/* --------------------------------------------------------------------------
   PC表示時の重なり・高さ制御（CSS Grid）
   -------------------------------------------------------------------------- */
.bbottom-grid-layout {
  display: grid;
  grid-template-columns: 12fr;
  position: relative;
}

/* 家族写真ボックス（背面） */
.bbottom-image-box {
  grid-column: 1;
  grid-row: 1;
  width: 70%; /* 横幅は全体の70% */
  margin-top: 130px; /* 青い箱の高さ（約230px）から下100pxの重なりを逆算した配置余白 */
  margin-left: 0;
  margin-right: auto;
  z-index: 1; /* 背面 */
}

.bbottom-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

/* 青背景のメッセージボックス（前面） */
.bbottom-message-box {
  grid-column: 1;
  grid-row: 1;
  background-color: #3b7fc4;
  padding: 50px 45px; /* 上下のパディングでカンプ通りの高さを確保 */
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(26, 79, 160, 0.15);
  
  /* PC設定：同じマス目に重ねて右上に吸着 */
  width: 55%; /* 横幅を55%に絞り、カンプ通りの縦長感を出す */
  margin-left: auto; /* 右寄せ */
  margin-right: 0;
  margin-top: 0; /* 上端に固定 */
  
  align-self: start; /* 写真の縦幅に引っ張られて下まで伸びるのを防止 */
  position: relative;
  z-index: 2; /* 写真の上に重なって乗る（前面） */
}

/* メッセージテキストのスタイリング */
.bbottom-text {
  color: #ffffff;
  font-size: 17px;
  font-weight: bold;
  line-height: 2.0; /* 行間をゆったり2.0に広げる */
  margin: 0;
  letter-spacing: 0.04em;
}


/* ==========================================================================
   スマートフォン表示時の最適化（767px以下）
   ========================================================================== */
@media (max-width: 767px) {
  .bbottom-container {
    width: 100%;
    max-width: none;
    padding: 0;
  }

  .bbottom-section {
    padding: 40px 0 80px 0; /* 下にメッセージボックスがずれる分の余白を拡張 */
  }

  /* スマホ時のレイアウト（写真が上、メッセージが下になる通常の縦並び） */
  .bbottom-grid-layout {
    display: flex;
    flex-direction: column; /* ★column-reverseを廃止し、通常順（写真➔メッセージ）の縦並びに修正 */
    align-items: center;    /* センター揃え */
  }

  /* ★スマホ時：家族写真エリア「横幅90%・センター揃え」 */
  .bbottom-image-box {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0; /* PC用の余白をリセット */
    position: relative;
    z-index: 1; /* 背面（メッセージボックスの下に潜り込む） */
  }

  /* ★スマホ時：青背景のメッセージテキストボックス「横幅80%・センター揃え」 */
  /* 「50px 家族写真エリアに重ねる（写真の下端の上に被さる）」 */
  .bbottom-message-box {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    margin-top: -50px; /* ★上方向にマイナス50px移動させ、上の写真の下端に50px分被せる */
    padding: 30px 25px;
    align-self: center;
    position: relative;
    z-index: 2; /* ★写真の上に重なって乗る（前面） */
  }

  .bbottom-text {
    font-size: 15px;
    line-height: 1.8;
    text-align: center;
  }
  
  /* スマホ時はインラインの改行タグを無視させて自然に折り返し */
  .bbottom-text br {
    display: none;
  }
}