/* PHP版で追加した独自スタイル（テーマのadd.cssには手を入れない） */

/* FVヒーロー（トップ・2026-07再構成）
   背景画像が決まったら background-image をここに追加するだけで差し替え可能 */
.sp-hero {
  padding: 80px 20px 60px;
  text-align: center;
  background: linear-gradient(160deg, #dff1ee 0%, #f2faf8 55%, #ffffff 100%);
}
.sp-hero__en {
  font-size: 1.4rem;
  color: #2b4a73;
  margin-bottom: 10px;
}
.sp-hero__catch {
  font-size: 3.6rem;
  font-weight: bold;
  line-height: 1.5;
  letter-spacing: .08em;
  color: #2b4a73;
}
.sp-hero__lead {
  margin-top: 16px;
  font-size: 1.6rem;
  line-height: 2;
}
.sp-hero__stats {
  margin-top: 35px;
}
.sp-hero__buttons {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 18px;
}
/* テーマの .p-btn は単独中央寄せ用の margin:auto を持つため、flex内では打ち消す */
.sp-hero__buttons .p-btn,
.sp-cta__buttons .p-btn {
  margin: 0;
}

/* オレンジ→紺のグラデーションボタンを単色の紺に変更（2026-07 塙さん要望） */
.p-btn.p-btn--gradient {
  background-image: none;
  background-color: #2b4a73;
}
html:not(.sp) .p-btn:focus.p-btn--gradient,
html:not(.sp) .p-btn:hover.p-btn--gradient {
  background-color: #3a5f8f;
}
@media (max-width: 768px) {
  .sp-hero {
    padding: 50px 15px 40px;
  }
  .sp-hero__catch {
    font-size: 2.4rem;
  }
  .sp-hero__lead {
    font-size: 1.4rem;
  }
}

/* はじめての方へ（トップ・不安の先回りブロック） */
.sp-first {
  max-width: 960px;
  margin: 0 auto;
}
.sp-first__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.sp-first__item {
  background: #fff;
  border-radius: 10px;
  padding: 22px 20px;
}
.sp-first__title {
  font-size: 1.6rem;
  font-weight: bold;
  color: #2b4a73;
  margin-bottom: 6px;
}
.sp-first__title::before {
  content: "✓ ";
  color: #12a496;
}
.sp-first__text {
  font-size: 1.4rem;
  line-height: 1.9;
}
@media (max-width: 768px) {
  .sp-first__list {
    grid-template-columns: 1fr;
  }
}

/* 受講の道筋（トップ）: sp-steps を流用し「その先へ」の色を追加 */
.sp-steps__box--next { background: #56789e; }
.sp-steps--wide .sp-steps__box {
  max-width: 280px;
  flex-basis: 220px;
}

/* 実績数字セクション（トップ） */
.sp-stats {
  padding: 50px 20px 10px;
  text-align: center;
}
.sp-stats__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px 60px;
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 960px;
}
.sp-stats__item {
  min-width: 220px;
}
.sp-stats__number {
  display: block;
  font-size: 4.4rem;
  font-weight: bold;
  line-height: 1.2;
  color: #2b4a73;
}
.sp-stats__number small {
  font-size: 2rem;
}
.sp-stats__label {
  display: block;
  margin-top: 4px;
  font-size: 1.5rem;
  letter-spacing: .05em;
}

/* 法人研修バナー（トップ） */
.sp-corp {
  max-width: 960px;
  margin: 35px auto 10px;
  padding: 30px 25px;
  border: 2px solid #2b4a73;
  border-radius: 10px;
  text-align: center;
  background: #fff;
}
.sp-corp__title {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 10px;
}
.sp-corp__text {
  font-size: 1.5rem;
  line-height: 2;
  margin-bottom: 18px;
}

/* 相談CTAブロック（各ページ下部） */
.sp-cta {
  margin: 60px auto 20px;
  padding: 35px 25px;
  max-width: 860px;
  background: #eff8f7;
  border-radius: 10px;
  text-align: center;
}
.sp-cta__title {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 8px;
}
.sp-cta__text {
  font-size: 1.4rem;
  line-height: 2;
  margin-bottom: 18px;
}
.sp-cta__buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 18px;
}

/* 受講ステップマップ（一般向けページ） */
.sp-steps {
  max-width: 860px;
  margin: 0 auto;
}
.sp-steps__row {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.sp-steps__box {
  flex: 1 1 150px;
  max-width: 200px;
  padding: 14px 10px;
  border-radius: 8px;
  color: #fff;
  text-align: center;
  font-weight: bold;
  line-height: 1.5;
  font-size: 1.4rem;
}
.sp-steps__box--basic { background: #f0b429; }
.sp-steps__box--applied { background: #2b4a73; }
.sp-steps__box small {
  display: block;
  font-weight: normal;
  font-size: 1.1rem;
  margin-top: 4px;
}
.sp-steps__arrow {
  align-self: center;
  font-size: 2rem;
  color: #2b4a73;
  font-weight: bold;
}
.sp-steps__note {
  margin-top: 14px;
  font-size: 1.3rem;
  line-height: 1.9;
}

/* 料金表（一般向けページ） */
.sp-price {
  width: 100%;
  max-width: 860px;
  margin: 20px auto 0;
  border-collapse: collapse;
  font-size: 1.4rem;
}
.sp-price th, .sp-price td {
  border: 1px solid #cfe3da;
  padding: 12px 14px;
  text-align: left;
}
.sp-price th {
  background: #eff8f7;
  white-space: nowrap;
}

/* 受付状況バッジ */
.sp-status {
  display: inline-block;
  margin-right: 8px;
  padding: 3px 12px;
  border-radius: 99px;
  font-size: 1.2rem;
  font-weight: bold;
  vertical-align: middle;
}
.sp-status--ok { background: #eaf6ee; color: #2b4a73; border: 1px solid #2b4a73; }
.sp-status--few { background: #fff3e6; color: #e07b00; border: 1px solid #e07b00; }
.sp-status--full { background: #f2f2f2; color: #888; border: 1px solid #aaa; }
.sp-status--closed { background: #f2f2f2; color: #888; border: 1px solid #aaa; }

/* カードの講師名 */
.sp-card-coach {
  margin-top: 2px;
  font-size: 1.25rem;
  color: #555;
}

/* カードの開催時間 */
.sp-card-timeofday {
  display: inline-block;
  margin-left: 10px;
  font-size: 1.25rem;
  color: #666;
}

/* 開催カードの「すべて見る」展開
   テーマの .c-grid.c-grid--fit > [class*='c-col'] { display:...!important } に勝つため
   それより高い詳細度で打ち消す */
.sp-card-hidden,
.c-grid.c-grid--fit > [class*='c-col'].sp-card-hidden {
  display: none !important;
}

/* 申し込みの流れステップ */
.sp-flow {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 760px;
}
.sp-flow__step {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 0 24px 0;
}
.sp-flow__step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 17px;
  top: 52px;
  bottom: 0;
  width: 2px;
  background: #cfe3da;
}
.sp-flow__num {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #2b4a73;
  color: #fff;
  font-weight: bold;
  font-size: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sp-flow__body {
  line-height: 1.9;
  font-size: 1.4rem;
}
.sp-flow__body strong {
  font-size: 1.5rem;
}

/* 企業研修ページ: FAQ */
.sp-faq {
  max-width: 860px;
  margin: 0 auto;
}
.sp-faq__item {
  border-bottom: 1px solid #dcefe2;
  padding: 18px 4px;
}
.sp-faq__q {
  font-size: 1.55rem;
  font-weight: bold;
  color: #2b4a73;
  margin-bottom: 8px;
}
.sp-faq__a {
  font-size: 1.4rem;
  line-height: 2;
}

/* 企業研修ページ: 導入事例 */
.sp-case {
  border: 1px solid #cfe3da;
  border-radius: 10px;
  padding: 24px 28px;
  background: #fff;
}
.sp-case__title {
  font-size: 1.7rem;
  font-weight: bold;
  margin-bottom: 14px;
  color: #2b4a73;
}
.sp-case__dl {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 8px 16px;
  font-size: 1.4rem;
  line-height: 1.9;
}
.sp-case__dl dt {
  font-weight: bold;
  color: #2b4a73;
  white-space: nowrap;
}
.sp-case__dl dd {
  margin: 0;
}
@media (max-width: 768px) {
  .sp-case__dl { grid-template-columns: 1fr; gap: 2px; }
  .sp-case__dl dt { margin-top: 8px; }
}

/* お客様の声のコース絞り込み */
.sp-voice-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin: 0 0 30px;
  padding: 0;
  list-style: none;
}
.sp-voice-filter a,
.sp-voice-filter span {
  display: inline-block;
  padding: 6px 16px;
  border: 1px solid #2b4a73;
  border-radius: 99px;
  font-size: 1.3rem;
  text-decoration: none;
  color: #2b4a73;
  background: #fff;
}
.sp-voice-filter .is-active span {
  background: #2b4a73;
  color: #fff;
}

@media (max-width: 768px) {
  .sp-stats__number { font-size: 3.4rem; }
  .sp-stats__item { min-width: 150px; }
  .sp-steps__arrow { width: 100%; text-align: center; transform: rotate(90deg); height: 24px; }
}

/* ========== 申込ページ /entry/ ========== */

/* 申し込みの流れ（横並びステップ） */
.sp-entry-flow {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sp-entry-flow li {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f4f9f1;
  border-radius: 99px;
  padding: 8px 18px 8px 8px;
  font-size: 1.4rem;
}
.sp-entry-flow__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #2b4a73;
  color: #fff;
  font-weight: bold;
  flex: none;
}

/* コース見出し */
.sp-entry-course {
  margin: 28px 0 10px;
}
.sp-entry-course .p-tag {
  font-size: 1.4rem;
  padding: 4px 18px;
}

/* 開催回の選択肢（ラジオカード） */
.sp-entry-options {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}
.sp-entry-option {
  display: flex;
  align-items: center;
  gap: 14px;
  border: 2px solid #dfe8dc;
  border-radius: 10px;
  padding: 14px 16px;
  cursor: pointer;
  background: #fff;
  transition: border-color .15s, background-color .15s;
}
.sp-entry-option:hover {
  border-color: #2b4a73;
}
.sp-entry-option:has(input:checked) {
  border-color: #2b4a73;
  background: #f0faf2;
  box-shadow: 0 0 0 1px #2b4a73 inset;
}
.sp-entry-option input[type="radio"],
.sp-entry-option input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: #2b4a73;
  flex: none;
}
/* 開催回ごとの受講区分（通常／再受講）: その回にチェックが入った時だけ表示 */
.sp-entry-option__type {
  display: none;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  margin: 6px 0 2px 34px;
  padding: 8px 12px;
  background: #f2f7f6;
  border-radius: 6px;
  font-size: 1.35rem;
}
.sp-entry-options li:has(.sp-entry-option input:checked) .sp-entry-option__type {
  display: flex;
}
.sp-entry-option__typeLabel {
  font-weight: bold;
  color: #2b4a73;
}
.sp-entry-option__type label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.sp-entry-option__type input[type="radio"] {
  width: 16px;
  height: 16px;
  accent-color: #2b4a73;
}
.sp-entry-option__date {
  flex: none;
  min-width: 9.5em;
  font-weight: bold;
  font-size: 1.5rem;
  line-height: 1.4;
}
.sp-entry-option__date small {
  display: block;
  font-weight: normal;
  font-size: 1.2rem;
  color: #666;
}
.sp-entry-option__body {
  flex: 1;
  min-width: 0;
}
.sp-entry-option__title {
  display: block;
  font-size: 1.4rem;
  line-height: 1.5;
}
.sp-entry-option__meta {
  display: block;
  font-size: 1.2rem;
  color: #666;
  margin-top: 2px;
}
.sp-entry-option--full {
  cursor: not-allowed;
  opacity: .55;
  background: #f5f5f5;
}
.sp-entry-option .sp-status {
  flex: none;
}
@media (max-width: 768px) {
  .sp-entry-option {
    flex-wrap: wrap;
    gap: 8px 12px;
  }
  .sp-entry-option__date { min-width: 0; }
  .sp-entry-option__body { flex-basis: 100%; order: 3; }
}

/* 受講区分・支払い方法のラジオ */
.sp-entry-radios {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}
.sp-entry-radios label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 1.5rem;
}
.sp-entry-radios input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: #2b4a73;
  flex: none;
}

/* 受講料の注意書き */
.sp-entry-note {
  border: 1px solid #dfe8dc;
  border-radius: 10px;
  background: #fafcf9;
  padding: 20px 26px;
  margin-top: 20px;
}
.sp-entry-note ul {
  margin: 0;
  padding-left: 1.4em;
}
.sp-entry-note li + li { margin-top: 6px; }

/* ヘッダーの申込ボタン（PC） */
.l-infonav__btn--entry {
  background-color: #e0552f !important;
}

/* スマホ固定の申込ボタン */
.sp-entry-fab {
  display: none;
}
@media (max-width: 768px) {
  .sp-entry-fab {
    position: fixed;
    right: 12px;
    bottom: 12px;
    z-index: 900;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #e0552f;
    color: #fff;
    font-size: 1.4rem;
    font-weight: bold;
    padding: 12px 20px;
    border-radius: 99px;
    box-shadow: 0 4px 14px rgba(0,0,0,.25);
    text-decoration: none;
  }
  .p-page-entry .sp-entry-fab { display: none; }
}

/* ========== デザインリフレッシュA案（ネイビー×ゴールド） ========== */

/* 下層ページヒーロー: 旧モザイク画像（制作会社素材）を自前グラデーションに置換 */
/* 下層ページの見出しは即表示にする。
   テーマは html:not(.complete) で opacity:0 + translateX(-15px) にし、
   0.3秒待ってから1秒かけて表示する設定だった（＝読み始めが1.3秒遅れる）。
   下層ページは目的を持って開くページなので、待たせないほうがよい。 */
.l-hero__title,
html:not(.complete) .l-hero__title {
  opacity: 1 !important;
  -webkit-transform: none !important;
  transform: none !important;
  -webkit-transition: none !important;
  transition: none !important;
}

.l-hero:before { background-image: none !important; }
/* 下層ヒーローの右側の装飾。旧テーマは右に画像が乗っていたので、その位置に
   カード・OGPと同じ星モチーフを置いて余白の間延びを防ぐ */
.l-hero:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 620px;
  max-width: 55%;
  height: 100%;
  background: url(../images/common/hero-deco.png) right center / contain no-repeat;
  pointer-events: none;
  z-index: 0;
}
.l-hero__inner { position: relative; z-index: 1; }
@media (max-width: 768px) {
  .l-hero:after { width: 300px; max-width: 62%; opacity: .85; }
}
.l-hero {
  background: linear-gradient(120deg, #2b4a73 0%, #3d6c9e 60%, #56789e 100%) !important;
  box-shadow: none !important;
}

/* ===== 購入写真への差し替え（2026-07-25 PIXTA） =====
   FVは A案(hero-a.jpg=グループワーク) を採用中。B案に切り替える場合は
   .sp-hero の url() を hero-b.jpg に変えるだけでよい。 */
.sp-hero {
  background-image:
    linear-gradient(rgba(255,255,255,.78), rgba(255,255,255,.78)),
    url(../images/home/hero-a.jpg);
  background-size: cover;
  background-position: center 38%;
  background-repeat: no-repeat;
}
/* スマホは画面が縦長なため cover だと写真の横幅の約1/4しか映らず、両端の人物が
   顔の途中で切れてしまう。そこで写真を ::before に逃がし、幅100%（＝左右を一切
   切り取らない）で敷いたうえで、上下をフェードさせて背景になじませる。
   （2026-07-28 スマホ表示の見切れ対策） */
@media (max-width: 768px) {
  .sp-hero {
    position: relative;
    overflow: hidden;
    background-image: linear-gradient(160deg, #dff1ee 0%, #f2faf8 55%, #ffffff 100%);
  }
  .sp-hero::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 50vw; /* 写真は2:1なので幅100%のとき高さは50vw */
    background-image: url(../images/home/hero-a.jpg);
    background-size: 100% 100%;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: .3;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000 18%, #000 82%, rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000 18%, #000 82%, rgba(0, 0, 0, 0) 100%);
  }
  .sp-hero__inner {
    position: relative;
    z-index: 1;
  }
}

/* aboutの帯・トップの背景写真 */
.str-labo .labo-imtx { background-image: url(../images/about/str-labo-bg-2026.jpg) !important; }
.p-home-contact      { background-image: url(../images/bg/contact-2026.jpg) !important; }
.p-home-coach        { background-image: url(../images/bg/coach-2026.jpg) !important; }
@media (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5) {
  .str-labo .labo-imtx { background-image: url(../images/about/str-labo-bg-2026@2x.jpg) !important; }
}

/* ===== セクションタイル・バナー背景の自作図案（2026-07-25） =====
   旧テーマの水色イラストを、開催カードと同じネイビー×ゴールドの図案に差し替え。 */
.p-card-width__heading.p-card-width__heading--sl {
  background-image: url(../images/home/sec-strengths-labo-photo.jpg) !important;
}
.p-card-width__heading.p-card-width__heading--sf {
  background-image: url(../images/home/sec-strengths-finder-photo.jpg) !important;
}
@media (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5) {
  .p-card-width__heading.p-card-width__heading--sl {
    background-image: url(../images/home/sec-strengths-labo-photo@2x.jpg) !important;
  }
  .p-card-width__heading.p-card-width__heading--sf {
    background-image: url(../images/home/sec-strengths-finder-photo@2x.jpg) !important;
  }
}
/* 見出しの下地。旧配色（濃緑#004919・濃teal#004544）が置換漏れだったため紺に統一 */
.p-card-width__heading.p-card-width__heading--bg-green,
.p-card-width__heading.p-card-width__heading--bg-blue,
.p-card-width__heading.p-card-width__heading--bg-navy {
  background-color: #22395a !important;
}
/* バナーの下地とホバー色も紺系に */
.p-banner { background-color: #22395a !important; }
html:not(.sp) .p-banner:focus,
html:not(.sp) .p-banner:hover { background-color: #3d6c9e !important; }

/* 区切り線も旧配色（薄緑#d0eeda）が残っていたので紺系グラデーションに */
.p-stgf-strength:before,
.p-stgf-strength__item:before {
  background-color: #dfe7f1 !important;
  background-image: linear-gradient(90deg, #b9c6da, #dfe7f1 90%) !important;
}

/* 3ステップの見出し。旧テーマは緑の画像文字だったのでテキスト化して紺に統一 */
.sp-step-title {
  display: inline-block;
  font-size: 2.0rem;
  font-weight: bold;
  line-height: 1.6;
  color: #2b4a73;
  letter-spacing: .04em;
}
@media (max-width: 768px) {
  .sp-step-title { font-size: 1.7rem; }
}

/* クリフトンストレングス紹介ページ 3ステップの写真（旧イラストの置き換え） */
.sp-step-photo {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(34, 57, 90, .16);
}

/* 開催カード：タイトルの行数が違ってもカードの高さを揃え、
   受付状況とコース種別のバッジを常にカード下端に揃える
   （テーマ側は既に u-mt-auto を付けているが、親がflexで伸びていないと効かない） */
.c-grid > .p-card { display: flex; }
.p-card > .p-card__skin { height: 100%; }
.p-card .p-card__container {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

/* ===== 開催形式バッジ（オンライン／対面）2026-07-25 ===== */
.sp-card-thumb { position: relative; }
.sp-card-format {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: inline-block;
  padding: 5px 14px;
  font-size: 1.2rem;
  font-weight: bold;
  line-height: 1.4;
  letter-spacing: .04em;
  border-bottom-right-radius: 8px;
}
.sp-card-format--online { background: #2b4a73; color: #fff; }
.sp-card-format--onsite { background: #f0b429; color: #22395a; }
@media (max-width: 768px) {
  .sp-card-format { font-size: 1.1rem; padding: 4px 10px; }
}

/* ヘッダーボタンの配色。青系が並んで区別しにくかったため、
   同じ寒色系のなかで色相をずらして見分けやすくした（白文字のコントラストは維持） */
.l-infonav__btn--orange  { background-color: #f0b429 !important; } /* 説明会 */
.l-infonav__btn--green   { background-color: #22395a !important; } /* 開催情報＝濃紺 */
.l-infonav__btn--emerald { background-color: #2f6f7a !important; } /* お問い合わせ＝ティール */
.l-infonav__btn--blue    { background-color: #3d6c9e !important; } /* メルマガ＝青 */
.l-infonav__btn--blueSub { background-color: #5a5f8a !important; } /* Q&A＝青紫 */

/* 課題別 研修メニューの見出し背景（旧素材の暗い画像 → 写真＋薄い紺ベール） */
.p-box-ws.p-box-ws--01 .p-box-ws__header { background-image: url(../images/page/ws-box01-2026.jpg) !important; }
.p-box-ws.p-box-ws--02 .p-box-ws__header { background-image: url(../images/page/ws-box02-2026.jpg) !important; }
.p-box-ws.p-box-ws--03 .p-box-ws__header { background-image: url(../images/page/ws-box03-2026.jpg) !important; }
.p-box-ws.p-box-ws--04 .p-box-ws__header { background-image: url(../images/page/ws-box04-2026.jpg) !important; }
.p-box-ws.p-box-ws--05 .p-box-ws__header { background-image: url(../images/page/ws-box05-2026.jpg) !important; }
.p-box-ws.p-box-ws--06 .p-box-ws__header { background-image: url(../images/page/ws-box06-2026.jpg) !important; }
@media (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5) {
  .p-box-ws.p-box-ws--01 .p-box-ws__header { background-image: url(../images/page/ws-box01-2026@2x.jpg) !important; }
  .p-box-ws.p-box-ws--02 .p-box-ws__header { background-image: url(../images/page/ws-box02-2026@2x.jpg) !important; }
  .p-box-ws.p-box-ws--03 .p-box-ws__header { background-image: url(../images/page/ws-box03-2026@2x.jpg) !important; }
  .p-box-ws.p-box-ws--04 .p-box-ws__header { background-image: url(../images/page/ws-box04-2026@2x.jpg) !important; }
  .p-box-ws.p-box-ws--05 .p-box-ws__header { background-image: url(../images/page/ws-box05-2026@2x.jpg) !important; }
  .p-box-ws.p-box-ws--06 .p-box-ws__header { background-image: url(../images/page/ws-box06-2026@2x.jpg) !important; }
}

/* ===== お客様の声（2026-07-26） =====
   人物のシルエットアイコン（顔が白抜き）が軽く見えていたため、イニシャルの
   モノグラムに変更。声はすべて匿名なので、実在の顔写真もストックの人物写真も使わない。
   カードの3配色（yellow/green/blue）も旧配色だったのでブランド配色に寄せた。 */

/* トップの声カード：アイコンの円を外したぶん、名前が上の色帯に近すぎたので余白を足す
   （一覧・詳細の --post は横並びレイアウトで余白が足りているため対象外） */
.p-card-voice:not(.p-card-voice--post) .p-card-voice__content {
  margin-top: 38px;
}
.p-card-voice:not(.p-card-voice--post) .p-card-voice__name {
  margin-bottom: 26px;
}

.p-card-voice.p-card-voice--yellow .p-card-voice__skin { background-color: #fdf7e8 !important; }
.p-card-voice.p-card-voice--yellow .p-card-voice__skin:before { background-color: #f6e8c6 !important; }

.p-card-voice.p-card-voice--green .p-card-voice__skin { background-color: #eef4fa !important; }
.p-card-voice.p-card-voice--green .p-card-voice__skin:before { background-color: #d9e6f2 !important; }

.p-card-voice.p-card-voice--blue .p-card-voice__skin { background-color: #eef1f7 !important; }
.p-card-voice.p-card-voice--blue .p-card-voice__skin:before { background-color: #dae0ec !important; }

/* ===== 企業研修ページ 最下部CTAの可読性（2026-07-26） =====
   文章が左寄せで見出しとずれていた／注記が濃紺の上に #666 で読めなかった／
   ボタンが背景に埋もれていた、の3点を修正 */
.cta-section { text-align: center; }
.cta-lead {
  margin-top: 1em;
  line-height: 2;
  color: #fff;
}
.cta-note {
  margin-top: 1.2em;
  font-size: 1.3rem;
  color: rgba(255, 255, 255, .85);
}
.sp-cta__buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 20px;
}
.sp-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 320px;
  min-height: 56px;
  padding: 0 28px;
  border-radius: 999px;
  font-size: 1.6rem;
  font-weight: bold;
  text-decoration: none;
  transition: opacity .3s, background-color .3s;
}
.sp-cta-btn:hover,
.sp-cta-btn:focus { opacity: .85; text-decoration: none; }
/* 主ボタン＝ゴールド。紺地の上で最も目立つ */
.sp-cta-btn--primary {
  background: #f0b429;
  color: #22395a !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}
/* 副ボタン＝白の枠線。主ボタンと役割の差が出る */
.sp-cta-btn--ghost {
  background: transparent;
  color: #fff !important;
  border: 2px solid rgba(255, 255, 255, .85);
}
.sp-cta-btn--ghost:hover { background: rgba(255, 255, 255, .12); }
@media (max-width: 768px) {
  .sp-cta-btn { min-width: 0; width: 100%; font-size: 1.4rem; }
}

/* ヒーローの英字見出しを1行に（テーマは .l-hero__textS が display:block で必ず改行される） */
.l-hero__textS {
  display: inline;
  margin-top: 0;
  margin-left: .3em;
}

/* 受講料表：応用一括の行（割引バッジ・注記） */
.sp-price__off {
  display: inline-block;
  margin-left: 10px;
  padding: 2px 10px;
  border-radius: 99px;
  background: #f0b429;
  color: #22395a;
  font-size: 1.2rem;
  font-weight: bold;
  vertical-align: middle;
}
.sp-price__note {
  display: inline-block;
  margin-top: 6px;
  font-size: 1.3rem;
  line-height: 1.8;
  color: #55606e;
}

/* フッターの装飾ドット。旧テーマのスプライト画像で緑のままだったので消す
   （地色のゴールドと相性が悪く、意味のある要素でもないため） */
.l-footer__skin:before,
.l-footer__skin:after {
  background-image: none !important;
}

/* HTMLサイトマップ */
.sp-sitemap {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  font-size: 1.45rem;
  line-height: 2.1;
}
.sp-sitemap li::before {
  content: "・";
  color: #3d6c9e;
}
.sp-sitemap a { text-decoration: none; }
.sp-sitemap a:hover { text-decoration: underline; }
.sp-sitemap--multi {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 20px;
}
@media (max-width: 768px) {
  .sp-sitemap--multi { grid-template-columns: repeat(2, 1fr); }
}

/* お客様の声：コース絞り込み。ヒーローに接し、左端にも寄っていたので
   下のカード（880px幅・中央寄せ）と位置を揃える */
.sp-voice-filter {
  width: 880px;
  max-width: 100%;
  margin: 40px auto 30px;
  padding: 0 20px;
  box-sizing: border-box;
}
@media (max-width: 768px) {
  .sp-voice-filter { margin-top: 26px; padding: 0 15px; }
}

/* ===== 紺→金グラデーションの一掃（2026-07-26） =====
   add_contact.css は6か所で linear-gradient(135deg,#2b4a73,#f0b429) を使っていたが、
   紺と金は色相が離れているため中間がオリーブ色に濁る。
   面は紺のグラデーションに統一し、金はリングや区切りとして重ねる形にした。 */
.value-icon,
.flow-number {
  background: linear-gradient(135deg, #2b4a73 0%, #3d6c9e 100%) !important;
  border: 3px solid #f0b429;
  box-shadow: 0 4px 14px rgba(34, 57, 90, .2);
}
.steps-section,
.cta-section,
.strength-points,
.achievement-summary {
  background: linear-gradient(135deg, #22395a 0%, #2b4a73 45%, #3d6c9e 100%) !important;
}
/* 面が紺一色になるぶん、金のアクセントを上辺に細く入れて締める */
.steps-section,
.cta-section,
.achievement-summary {
  border-top: 4px solid #f0b429;
}
/* 課題セクションの淡い緑も旧配色の残り。淡い紺に */
.challenges-section {
  background: linear-gradient(135deg, #f5f8fc 0%, #e3ecf6 100%) !important;
}