@charset "utf-8";

/*-----------------------------
人事DX（HRDX）とは
-----------------------------*/

/* 全体コンテナ */
.hr-dx-container {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px 0;
  box-sizing: border-box;
}

.hr-dx-container *,
.hr-dx-container *::before,
.hr-dx-container *::after {
  box-sizing: border-box;
}

/* フレックスボックス設定（PC/SP切り替え） */
.hr-dx-flex-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin-bottom: 30px;
}

/* カード共通スタイル */
.hr-dx-card {
  width: 100%;
  background-color: #f7f9fa;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

/* カード見出し */
.hr-dx-card-ttl {
  margin: 0;
  padding: 15px 20px;
  text-align: center;
  color: #ffffff;
  font-weight: bold;
}

.hr-dx-ttl-traditional {
  background-color: #008cc1;
}

.hr-dx-ttl-modern {
  background-color: #3b6b9c;
}

/* カード内部 */
.hr-dx-card-body {
  padding: 25px 20px;
}

.hr-dx-lead-text,
.hr-dx-desc-text {
  margin: 0 0 15px 0;
  line-height: 1.6;
}

.hr-dx-desc-text:last-child {
  margin-bottom: 0;
}

/* 【修正】リストスタイル（既存リセットCSSの影響を受けない実装） */
.hr-dx-list {
  margin: 0 0 20px 0;
  padding-left: 0; /* リセット */
  list-style: none !important; /* 強制非表示 */
}

.hr-dx-list li {
  position: relative;
  padding-left: 1.2em; /* ドットのスペースを確保 */
  margin-bottom: 8px;
  line-height: 1.5;
}

/* 疑似要素で「・」を強制的に描写 */
.hr-dx-list li::before {
  content: "・";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: bold;
}

.hr-dx-list li:last-child {
  margin-bottom: 0;
}

/* テキスト装飾 */
.hr-dx-highlight-blue {
  color: #2b6194;
  font-weight: bold;
}

.hr-dx-weight-bold {
  font-weight: bold;
}

/* 中央の矢印 */
.hr-dx-center-arrow {
  display: block;
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 15px solid #dcdcdc;
  margin: 5px 0;
}

/* 下部フッターバナー */
.hr-dx-footer-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  background-color: #fff3d4;
  border: 1px solid #ffe49e;
  border-radius: 50px;
  padding: 15px 20px;
  text-align: center;
}

.hr-dx-banner-arrow {
  display: inline-block;
  color: #fab100;
  font-size: 1.5em;
  font-weight: bold;
  line-height: 1;
}

.hr-dx-banner-text {
  margin: 0;
  color: #b01e14;
  font-weight: bold;
  line-height: 1.4;
}

/* -------------------------------------------
   メディアクエリ：PC対応（768px以上）
------------------------------------------- */
@media screen and (min-width: 768px) {
  .hr-dx-flex-box {
    flex-direction: row;
    align-items: stretch;
    justify-content: space-between;
    gap: 0;
  }

  .hr-dx-card {
    width: 46%;
  }

  /* PC時の矢印：右向きの三角形に変更 */
  .hr-dx-center-arrow {
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-left: 15px solid #e0e0e0;
    margin: auto 0;
  }

  .hr-dx-card-body {
    padding: 30px;
    height: calc(100% - 54px);
  }

  .hr-dx-footer-banner {
    padding: 20px;
  }
  
  .hr-dx-banner-text {
    font-size: 1.3em;
  }
}

/* 課題セクション 全体コンテナ */
.hr-problem-container {
  width: 100%;
  max-width: 1100px;
  padding: 20px 0;
  box-sizing: border-box;
}

.hr-problem-container *,
.hr-problem-container *::before,
.hr-problem-container *::after {
  box-sizing: border-box;
}

/* 点線枠のボックス */
.hr-problem-box {
  position: relative;
  border: 2px dashed #b5b5b5;
  border-radius: 8px;
  background-color: #ffffff;
  padding: 30px 20px 20px 20px;
  margin-top: 15px; /* バッジが飛び出る分の余白 */
}

/* 左上のグレーバッジ */
.hr-problem-badge {
  position: absolute;
  top: -18px;
  left: 15px;
  background-color: #9e9e9e;
  color: #ffffff;
  font-weight: bold;
  padding: 6px 20px;
  border-radius: 20px;
  line-height: 1;
  white-space: nowrap;
}

/* テキスト全体の調整 */
.hr-problem-content {
  text-align: center;
  color: #333333;
}

/* 課題箇所の強調テキスト（薄いブルーの背景） */
.hr-problem-main-text {
  margin: 0 0 12px 0;
  font-weight: bold;
  line-height: 1.8;
  word-break: keep-all; /* 単語の途中で改行されるのを防ぐ */
  overflow-wrap: break-word;
}

.hr-problem-marker {
  background: linear-gradient(transparent 0%, #e3f2fd 0%); /* 文字全体を薄い青背景に */
  padding: 2px 4px;
  display: inline-block; /* スマホで綺麗に折り返すため */
  margin: 2px 0;
}

/* 結びの文章 */
.hr-problem-sub-text {
  margin: 0;
  line-height: 1.6;
}

/* -------------------------------------------
   メディアクエリ：PC対応（768px以上）
------------------------------------------- */
@media screen and (min-width: 768px) {
  .hr-problem-box {
    padding: 35px 40px 25px 40px;
  }

  .hr-problem-badge {
    left: 25px;
    padding: 8px 25px;
  }

  .hr-problem-main-text {
    font-size: 1.25em; /* PC環境でメインメッセージを少し大きく */
    margin-bottom: 15px;
  }

  .hr-problem-sub-text {
    font-size: 1.1em;
  }
}



/*-----------------------------
船井総研の人事DX（HRDX）コンサルティングの特長
-----------------------------*/

/* 全体コンテナ */
.hr-points-container {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 0 0;
  box-sizing: border-box;
}

.hr-points-container *,
.hr-points-container *::before,
.hr-points-container *::after {
  box-sizing: border-box;
}

/* メイン見出し（上部リボン風背景） */
.hr-points-main-ttl {
  margin: 0 0 30px 0;
  text-align: center;
  font-weight: bold;
  color: #c00000; /* 赤文字 */
  line-height: 1.5;
  background: linear-gradient(transparent 70%, #fff0d4 70%); /* 下部の薄いオレンジの敷物風 */
  display: block;
  padding-bottom: 5px;
}

/* カード並び（スマホは縦並び、PCは横並び） */
.hr-points-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* カードの基本設定 */
.hr-points-card {
  display: flex;
  flex-direction: column;
  flex: 1;
  background-color: #f7f9fa; /* 左右のカードの薄いグレー背景 */
  border-radius: 4px;
  padding: 20px;
}

/* Point 2（中央のカード）のみ背景を薄い青に */
.hr-points-card-highlight {
  background-color: #eef7ff;
}

/* カード内ヘッダー（バッジとタイトル） */
.hr-points-card-header {
  margin-bottom: 15px;
}

/* Point 1~3 の丸角バッジ */
.hr-points-badge {
  display: inline-block;
  background-color: #0099d8;
  color: #ffffff;
  font-weight: bold;
  padding: 8px 15px;
  border-radius: 20px;
  margin-bottom: 20px;
  line-height: 1;
}

/* カードの見出し */
.hr-points-card-ttl {
  margin: 0;
  color: #2b6194; /* 濃い青 */
  font-weight: bold;
  line-height: 1.4;
}

/* カードのメインコンテンツ領域 */
.hr-points-card-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

/* 先ほどの「・」対応リストスタイルを採用 */
.hr-points-list {
  margin: 0 0 20px 0;
  padding-left: 0;
  list-style: none !important;
}

.hr-points-list li {
  position: relative;
  padding-left: 1.2em;
  margin-bottom: 12px;
  line-height: 1.6;
  color: #333333;
}

.hr-points-list li::before {
  content: "・";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: bold;
}

.hr-points-list li:last-child {
  margin-bottom: 0;
}

/* 太字強調箇所 */
.hr-points-text-bold {
  font-weight: bold;
}

/* 画像配置用ラッパー（緑の■部分の親） */
.hr-points-img-wrap {
  text-align: center;
  margin-top: auto; /* コンテンツが少なくても画像を下に押し下げる */
  padding-top: 15px;
}

/* 画像自体の設定（後から画像を入れた際に枠からはみ出さないように設定） */
.hr-points-img {
  max-width: 100%;
  height: auto;
  display: inline-block;
  /* 画像が入るまでは仮の緑のブロックとして見えるようにしています（本番反映時は削除してもOK） */
  height: auto;
}

/* -------------------------------------------
   メディアクエリ：PC対応（768px以上）
------------------------------------------- */
@media screen and (min-width: 768px) {
  .hr-points-main-ttl {
    font-size: 1.4em;
    display: inline-block;
    margin: 0 auto 40px auto;
    left: 50%;
    transform: translateX(-50%);
    position: relative;
  }

  .hr-points-grid {
    flex-direction: row; /* 横並びに変更 */
    align-items: stretch; /* すべてのカードの高さを一番高いものに揃える */
    gap: 15px;
  }
  
  .hr-points-card {
    padding: 25px 20px;
  }

  .hr-points-card-ttl {
    font-size: 110%;
    min-height: 2.8em; /* 2行分の高さを確保してタイトルの高さを揃える */
  }
}


/*-----------------------------
よくあるご相談内容
-----------------------------*/

/* 「システム導入」〜の薄い黄色のアンダーマーカー */
.hr-intro-marker {
  background: linear-gradient(transparent 60%, #fff0cc 60%); /* 下側40%に薄い黄色マーカー */
  padding: 0 2px;
}

/* 全体のコンテナ設定 */
.hr-issues-container {
  width: 100%;
  box-sizing: border-box;
}

.hr-issues-container *,
.hr-issues-container *::before,
.hr-issues-container *::after {
  box-sizing: border-box;
}

/* グリッドレイアウト（PC時の並び順を制御） */
.hr-issues-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

/* PC（2列）のときに左列が1・2・3、右列が4・5・6になるよう配置を固定 */
.hr-issues-order-1 { grid-column: 1; grid-row: 1; }
.hr-issues-order-2 { grid-column: 1; grid-row: 2; }
.hr-issues-order-3 { grid-column: 1; grid-row: 3; }
.hr-issues-order-4 { grid-column: 2; grid-row: 1; }
.hr-issues-order-5 { grid-column: 2; grid-row: 2; }
.hr-issues-order-6 { grid-column: 2; grid-row: 3; }

/* 共通のカードスタイル */
.hr-issues-card {
  display: flex;
}

.hr-issues-card-inner {
  padding: 24px;
  width: 100%;
}

/* 共通の見出し・テキスト */
.hr-issues-title {
  margin: 0 0 12px 0;
  font-weight: bold;
  line-height: 1.4;
}

.hr-issues-number {
  margin-right: 4px;
}

.hr-issues-text {
  color: #000000;
  margin: 0;
  line-height: 1.6;
}

/* --- 1, 3, 5 用：濃い色（ダークトーン）のスタイル --- */
.hr-issues-card-dark {
  background-color: #f1f5f9; /* やや青みのあるグレー背景 */
  border-left: 12px solid #2b6cb0; /* 太めの濃い青線 */
}

.hr-issues-title-dark {
  color: #2b6cb0; /* 濃い青色の文字 */
}

/* --- 2, 4, 6 用：薄い色（ライトトーン）のスタイル --- */
.hr-issues-card-light {
  background-color: #f8fafc; /* すっきりした薄いグレー背景 */
  border-left: 12px solid #4ea8de; /* 太めの鮮やかな水色の線 */
}

.hr-issues-title-light {
  color: #2c6a9e; /* 少しだけ明るい青の文字 */
}

/* レスポンシブ対応（タブレット・スマホサイズ） */
@media (max-width: 768px) {
  .hr-issues-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  /* スマホのときは上から 1→2→3→4→5→6 の順にきれいに流れるようリセット */
  .hr-issues-order-1 { grid-column: auto; grid-row: auto; order: 1; }
  .hr-issues-order-2 { grid-column: auto; grid-row: auto; order: 2; }
  .hr-issues-order-3 { grid-column: auto; grid-row: auto; order: 3; }
  .hr-issues-order-4 { grid-column: auto; grid-row: auto; order: 4; }
  .hr-issues-order-5 { grid-column: auto; grid-row: auto; order: 5; }
  .hr-issues-order-6 { grid-column: auto; grid-row: auto; order: 6; }
  
  .hr-issues-card-inner {
    padding: 16px;
  }
}


/*-----------------------------
ご支援イメージ
-----------------------------*/

/* 全体コンテナ */
.hp-step-flow-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  box-sizing: border-box;
  padding-bottom: 20px;
}

.hp-step-flow-container *,
.hp-step-flow-container *::before,
.hp-step-flow-container *::after {
  box-sizing: border-box;
}

/* カード共通 */
.hp-step-flow-card {
  position: relative;
  flex: 1;
  background-color: #f9f9f9;
  padding: 20px 15px;
  border-radius: 4px;
}

/* ステップバッジ */
.hp-step-flow-badge {
  display: inline-block;
  padding: 4px 16px;
  border-radius: 20px;
  font-weight: bold;
  color: #ffffff;
  margin-bottom: 20px;
}

/* バッジのカラーバリエーション */
.hp-step-flow-badge-1 { background-color: #d1e3f8; color: #1d50a2; }
.hp-step-flow-badge-2 { background-color: #8cb4e2; }
.hp-step-flow-badge-3 { background-color: #0091c5; }
.hp-step-flow-badge-4 { background-color: #006da7; }
.hp-step-flow-badge-5 { background-color: #31589b; }

/* タイトル */
.hp-step-flow-title {
  font-weight: bold;
  color: #1d50a2;
  line-height: 1.4;
  margin-bottom: 20px;
  letter-spacing: 0;
}

/* 説明文 */
.hp-step-flow-text {
  color: #333333;
  line-height: 1.6;
}

/* PCレイアウト（ブレイクポイントは必要に応じて調整してください） */
@media screen and (min-width: 769px) {
  .hp-step-flow-container {
    flex-direction: row;
    gap: 12px; /* 矢印スペースを考慮して狭めに設定 */
  }

  .hp-step-flow-card {
    /* 右側に矢印を出すためのスペースを確保（最後のカード以外） */
    margin-right: 12px;
  }
  .hp-step-flow-card:last-child {
    margin-right: 0;
  }

  /* 擬似要素でカードの右側に右向きの三角形（矢印）を作成 */
  .hp-step-flow-card:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -18px; /* カードの外側中央に配置 */
    transform: translateY(-50%);
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-left: 12px solid #e0e0e0; /* 矢印の色 */
    z-index: 2;
  }
}

/* スマホレイアウトでの調整（縦並びの時の矢印） */
@media screen and (max-width: 768px) {
  .hp-step-flow-card:not(:last-child)::after {
    content: "";
    position: absolute;
    bottom: -18px; /* カードの下側中央に配置 */
    left: 50%;
    transform: translateX(-50%);
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 12px solid #e0e0e0; /* 矢印の色 */
    z-index: 2;
  }
}


/*-----------------------------
アウトプットイメージ
-----------------------------*/



/* 画像ギャラリー全体コンテナ */
.hp-gallery-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* 画像同士の隙間（縦・横共通） */
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  box-sizing: border-box;
}

.hp-gallery-container *,
.hp-gallery-container *::before,
.hp-gallery-container *::after {
  box-sizing: border-box;
}

/* 各画像アイテムの枠 */
.hp-gallery-item {
  width: 100%; /* デフォルト（スマホ）は1カラム */
  background-color: #ffffff;
  /* 必要に応じて、うっすら枠線をつける場合は下記コメントアウトを解除してください */
  /* border: 1px solid #e0e0e0; */
}

/* 画像自体のレスポンシブ設定 */
.hp-gallery-image {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain; /* 画像が歪まないように保持 */
}

/* タブレットレイアウト（2列×3行） */
@media screen and (min-width: 561px) and (max-width: 960px) {
  .hp-gallery-item {
    width: calc((100% - 20px) / 2); /* 隙間1つ分を引いて2等分 */
  }
}

/* PCレイアウト（3列×2行） */
@media screen and (min-width: 961px) {
  .hp-gallery-container {
    gap: 24px; /* PC時は隙間を少し広げる */
  }

  .hp-gallery-item {
    width: calc((100% - (24px * 2)) / 3); /* 隙間2つ分を引いて3等分 */
  }
}


/*-----------------------------
文字間PCのみツメ
-----------------------------*/


.short-space {
  letter-spacing: 0;
}

@media screen and (max-width: 768px) {
.short-space {
  letter-spacing: normal;
}
}