@charset "UTF-8";
/* =========================================================================
   refine.css  ―  大進電設さま v5.3 仕上げ調整（2026-09-12）
   style.css は一行も変更していません。調整はすべてこのファイルで上書きします。
   読み込み順：style.css → refine.css（index.html の </head> 直前）

   ① 明るさの改善（写真に掛けていた暗幕・モノクロ・色転びを外す）
   ② マウスオンの効果（写真は拡大、カードは浮く、枠が伸びる）
   ③ リンク・ボタンの動き（暗転して背景と同化していたものを明転に統一）
   ④ 業務内容の番号ラベル（写真左上へ独立・数字を大きく）
   ⑤ 採用情報のハローワーク案内パネル
   ========================================================================= */

/* =========================================================================
   ① 明るさの改善
   ------------------------------------------------------------------------
   素材写真そのものは暗くない（平均輝度 112〜171／255）。
   暗く見えていたのは上に重ねた処理のほう。そこだけを外す。
   ========================================================================= */

/* ヒーロー：左からのネイビーの幕を 56% → 34% に。下の幕も 34% → 22% に。
   白文字の可読性は、面ではなく文字側の影で確保する。 */
.heroOverlay {
  background:
    linear-gradient(90deg, rgba(3, 31, 61, 0.34) 0%, rgba(3, 31, 61, 0.12) 58%, rgba(3, 31, 61, 0.02) 100%),
    linear-gradient(180deg, rgba(3, 31, 61, 0.02), rgba(3, 31, 61, 0.22));
}

.heroCopy h1 {
  text-shadow: 0 2px 10px rgba(3, 31, 61, 0.5), 0 10px 30px rgba(0, 0, 0, 0.32);
}

.heroLead {
  background: rgba(3, 31, 61, 0.42);
  text-shadow: 0 1px 6px rgba(3, 31, 61, 0.4);
}

/* 背景の大きな英字。青が写真に沈んで濁っていたので、白寄りにして浮かせる。 */
.heroBigType {
  color: rgba(255, 255, 255, 0.26);
}

/* 業務内容カード：写真を 0.74 → 0.94 に戻す。文字の下敷きは下側だけに寄せる。 */
.serviceCard img {
  opacity: 0.94;
  filter: saturate(1);
  transition: transform 0.55s ease, opacity 0.4s ease;
}

.serviceCardText {
  padding-top: 54px;
  background: linear-gradient(180deg, rgba(3, 31, 61, 0) 0%, rgba(3, 31, 61, 0.58) 34%, rgba(3, 31, 61, 0.93) 100%);
}

/* 施工実績のモザイク：ほぼモノクロ（0.82）だったのを、色を戻す。 */
.worksMosaic img {
  filter: grayscale(0.14) contrast(1.02);
  opacity: 1;
}

/* 資格取得支援の写真：モノクロ 0.72 を外す。 */
.growthPhoto img {
  filter: none;
}

/* リクルートの写真：色相を 178 度回していたため全体が青緑に転んでいた。素の色に戻す。 */
.recruitPhotos img {
  filter: none;
  opacity: 1;
}

/* リクルートの地の幕も右側を少し抜いて、写真まわりの重さを減らす。 */
.recruitBg {
  background:
    linear-gradient(90deg, rgba(3, 31, 61, 0.95) 0%, rgba(3, 31, 61, 0.78) 52%, rgba(3, 31, 61, 0.46) 100%);
}

/* =========================================================================
   ② マウスオンの効果
   ------------------------------------------------------------------------
   場所ごとに「止まったときの絵」を変える。
   カード＝明るく＋枠／モザイク＝色が戻る／写真カード＝浮く。
   ========================================================================= */

/* 業務内容カード：写真が寄って明るくなり、青い枠が締める */
.serviceCard::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border: 0 solid var(--color-bright);
  pointer-events: none;
  transition: border-width 0.28s ease;
}

.serviceCard:hover::after {
  border-width: 3px;
}

.serviceCard:hover img {
  opacity: 1;
  transform: scale(1.06);
}

/* 施工実績のモザイク：色が戻り、少しだけ前に出る */
.worksMosaic img {
  position: relative;
  transition: filter 0.35s ease, transform 0.45s ease;
}

.worksMosaic img:hover {
  filter: none;
  transform: scale(1.04);
  z-index: 1;
}

/* 安全の取り組み／資格取得支援の写真カード：カードごと浮き上がる */
.safetyPhotoCard,
.qualificationPhotos figure {
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.safetyPhotoCard img,
.qualificationPhotos img {
  transition: transform 0.5s ease;
}

.safetyPhotoCard:hover,
.qualificationPhotos figure:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 54px rgba(3, 31, 61, 0.2);
}

.safetyPhotoCard:hover img,
.qualificationPhotos figure:hover img {
  transform: scale(1.05);
}

/* リクルートの4枚：明るさだけが動く（ここで枠や拡大を足すと賑やかになりすぎる） */
.recruitPhotos img {
  transition: filter 0.35s ease, opacity 0.35s ease;
}

.recruitPhotos img:hover {
  filter: brightness(1.1) saturate(1.08);
}

/* 会社紹介カード：面ではなく影で応える */
.profileCard {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.profileCard:hover {
  transform: translateY(-4px);
  box-shadow: 0 34px 70px rgba(3, 31, 61, 0.22);
}

/* =========================================================================
   ③ 一覧の行をマウスオンで見分けやすく
   ------------------------------------------------------------------------
   施工実績28件・有資格者48件は行が細かい。触れている行だけ色を変える。
   ========================================================================= */

.worksItem {
  margin: 0 -12px;
  padding-right: 12px;
  padding-left: 12px;
  border-left: 3px solid transparent;
  transition: background 0.22s ease, border-left-color 0.22s ease;
}

.worksItem:hover {
  border-left-color: var(--color-bright);
  background: var(--color-pale);
}

.worksItem span {
  transition: color 0.22s ease;
}

.worksItem:hover span {
  color: var(--color-blue);
}

/* 会社概要・採用情報の表も、見ている行が分かるように */
.profileCard dl div,
.recruitData div {
  transition: background 0.22s ease;
}

.profileCard:not(.profileCardBlue) dl div:hover,
.recruitData div:hover {
  background: var(--color-pale);
}

.profileCardBlue dl div:hover,
.profileCardBlue .healthBlock:hover,
.profileCardBlue .partnerBlock:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* =========================================================================
   ④ リンク・ボタンの動き
   ------------------------------------------------------------------------
   これまでは触れると軒並みネイビーへ「暗転」していた。
   暗い地の上のボタンは背景と同化するので、明るい青へ「明転」に統一する。
   明るい青（#1f9bff）の上は白文字だと薄いので、文字は濃紺にしてコントラストを確保。
   ========================================================================= */

.smallButton,
.lineButton {
  gap: 10px;
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.smallButton::after,
.lineButton::after {
  content: "→";
  display: inline-block;
  font-size: 1.05em;
  line-height: 1;
  transition: transform 0.3s ease;
}

.smallButton:hover,
.lineButton:hover {
  background: var(--color-bright);
  color: #03233f;
  box-shadow: 0 14px 30px rgba(31, 155, 255, 0.32);
}

.smallButton:hover::after,
.lineButton:hover::after {
  transform: translateX(7px);
}

/* ヘッダーの「お問い合わせ」も明転に */
.globalNav .navEntry:hover {
  background: var(--color-bright);
  color: #03233f;
}

/* グローバルナビ：下線が左から伸びる */
.globalNav a {
  position: relative;
}

.globalNav a::after {
  content: "";
  position: absolute;
  right: 14px;
  bottom: 14px;
  left: 14px;
  height: 2px;
  background: var(--color-blue);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.28s ease;
}

.globalNav a:hover::after {
  transform: scaleX(1);
}

.globalNav .navEntry::after {
  display: none;
}

/* ステータスバーの「お問い合わせ」：矢印が動く */
.statusLink::after {
  content: "→";
  margin-left: 10px;
  display: inline-block;
  transition: transform 0.3s ease;
}

.statusLink:hover {
  color: #03233f;
}

.statusLink:hover::after {
  transform: translateX(7px);
}

/* お問い合わせセクションの2つのボタンは、あえて別の動きにして区別する
   電話（白）＝濃紺に反転／フォーム（青）＝明るい青に */
.contactActionButton:hover {
  background: var(--color-navy);
  color: var(--color-white);
}

.contactActionButtonBlue:hover {
  background: var(--color-bright);
  color: #03233f;
}

.contactFormSubmit:hover {
  background: var(--color-bright);
  color: #03233f;
}

.pageTopButton:hover {
  background: var(--color-bright);
  color: #03233f;
}

/* フッターのリンクは下線で応える */
.footerNav a {
  position: relative;
  transition: color 0.22s ease;
}

.footerNav a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -4px;
  left: 0;
  height: 1px;
  background: var(--color-bright);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.26s ease;
}

.footerNav a:hover::after {
  transform: scaleX(1);
}

/* キーボード操作でも同じ手応えになるように */
.smallButton:focus-visible,
.lineButton:focus-visible,
.statusLink:focus-visible,
.contactActionButton:focus-visible,
.hwGuideButton:focus-visible,
.globalNav a:focus-visible {
  outline: 3px solid var(--color-bright);
  outline-offset: 3px;
}

/* =========================================================================
   ⑤ 業務内容の番号ラベル（01 / COMMUNICATION など）
   ------------------------------------------------------------------------
   写真の中に溶けて読めなかったため、写真の左上へ独立させ、数字を大きくする。
   ========================================================================= */

.serviceTag {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 12px 22px 12px 17px;
  border-left: 5px solid var(--color-bright);
  background: rgba(3, 31, 61, 0.82);
  color: var(--color-white);
  font-family: var(--font-en);
}

.serviceTag em {
  color: var(--color-bright);
  font-size: 30px;
  font-style: normal;
  font-weight: 800;
  line-height: 1;
}

.serviceTag i {
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.1em;
}

/* =========================================================================
   ⑥ 採用情報：ハローワークの案内
   ========================================================================= */

.hwGuide {
  margin-top: 26px;
  padding: 30px 34px 32px;
  border-left: 6px solid var(--color-blue);
  background: var(--color-white);
}

.hwGuideTitle {
  color: var(--color-navy);
  font-family: var(--font-title);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.35;
}

.hwGuideText {
  margin-top: 10px;
  color: var(--color-muted);
  font-weight: 400;
}

.hwGuideData {
  display: grid;
  margin-top: 20px;
}

.hwGuideData div {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--color-line);
}

.hwGuideData dt {
  color: var(--color-blue);
  font-weight: 900;
}

.hwGuideData dd {
  color: #3d4f60;
  font-weight: 400;
}

.hwGuideData dd a {
  border-bottom: 1px solid var(--color-line);
  font-weight: 700;
}

.hwGuideData dd a:hover {
  border-bottom-color: var(--color-blue);
  color: var(--color-blue);
}

.hwGuideActions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 18px;
  align-items: center;
  margin-top: 24px;
}

.hwGuideButton {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 10px 24px;
  background: var(--color-blue);
  color: var(--color-white);
  font-weight: 800;
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.hwGuideButton::after {
  content: "↗";
  display: inline-block;
  font-size: 1.05em;
  line-height: 1;
  transition: transform 0.3s ease;
}

.hwGuideButton:hover {
  background: var(--color-bright);
  color: #03233f;
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(31, 155, 255, 0.32);
}

.hwGuideButton:hover::after {
  transform: translate(4px, -4px);
}

.hwGuideLink {
  color: var(--color-blue);
  font-weight: 800;
  border-bottom: 2px solid transparent;
  transition: border-bottom-color 0.25s ease;
}

.hwGuideLink:hover {
  border-bottom-color: var(--color-blue);
}

.hwGuideNote {
  margin-top: 18px;
  color: #657484;
  font-size: 0.85rem;
  font-weight: 400;
  line-height: 1.7;
}

/* =========================================================================
   動きを減らす設定の端末では、拡大・移動をしない
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {

  .serviceCard:hover img,
  .worksMosaic img:hover,
  .safetyPhotoCard:hover,
  .safetyPhotoCard:hover img,
  .qualificationPhotos figure:hover,
  .qualificationPhotos figure:hover img,
  .profileCard:hover,
  .smallButton:hover,
  .lineButton:hover,
  .hwGuideButton:hover {
    transform: none;
  }

  .smallButton:hover::after,
  .lineButton:hover::after,
  .statusLink:hover::after,
  .hwGuideButton:hover::after {
    transform: none;
  }
}

@media screen and (max-width: 768px) {

  .serviceTag {
    padding: 10px 18px 10px 14px;
  }

  .serviceTag em {
    font-size: 26px;
  }

  .hwGuide {
    padding: 24px 20px 26px;
  }

  .hwGuideData div {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .hwGuideActions {
    display: grid;
  }

  .hwGuideButton {
    justify-content: center;
  }

  .hwGuideLink {
    text-align: center;
  }
}

/* =========================================================================
   確認用：マウスオンと同じ見え方を .hv クラスで再現する（.hv 併記）
   ------------------------------------------------------------------------
   要素に class="hv" を足すと、マウスを乗せたときと同じ状態になります。
   静止画でマウスオンの効果を確認・共有するためのものです。
   通常の表示には影響しません。
   ========================================================================= */

.serviceCard.hv::after {
  border-width: 3px;
}
.serviceCard.hv img {
  opacity: 1;
  transform: scale(1.06);
}
.worksMosaic img.hv {
  filter: none;
  transform: scale(1.04);
  z-index: 1;
}
.safetyPhotoCard.hv,
.qualificationPhotos figure.hv {
  transform: translateY(-6px);
  box-shadow: 0 26px 54px rgba(3, 31, 61, 0.2);
}
.safetyPhotoCard.hv img,
.qualificationPhotos figure.hv img {
  transform: scale(1.05);
}
.recruitPhotos img.hv {
  filter: brightness(1.1) saturate(1.08);
}
.profileCard.hv {
  transform: translateY(-4px);
  box-shadow: 0 34px 70px rgba(3, 31, 61, 0.22);
}
.worksItem.hv {
  border-left-color: var(--color-bright);
  background: var(--color-pale);
}
.worksItem.hv span {
  color: var(--color-blue);
}
.profileCard:not(.profileCardBlue) dl div.hv,
.recruitData div.hv {
  background: var(--color-pale);
}
.profileCardBlue dl div.hv,
.profileCardBlue .healthBlock.hv,
.profileCardBlue .partnerBlock.hv {
  background: rgba(255, 255, 255, 0.08);
}
.smallButton.hv,
.lineButton.hv {
  background: var(--color-bright);
  color: #03233f;
  box-shadow: 0 14px 30px rgba(31, 155, 255, 0.32);
}
.smallButton.hv::after,
.lineButton.hv::after {
  transform: translateX(7px);
}
/* ヘッダーの「お問い合わせ」も明転に */
.globalNav .navEntry.hv {
  background: var(--color-bright);
  color: #03233f;
}
.globalNav a.hv::after {
  transform: scaleX(1);
}
.statusLink.hv {
  color: #03233f;
}
.statusLink.hv::after {
  transform: translateX(7px);
}
/* お問い合わせセクションの2つのボタンは、あえて別の動きにして区別する
   電話（白）＝濃紺に反転／フォーム（青）＝明るい青に */
.contactActionButton.hv {
  background: var(--color-navy);
  color: var(--color-white);
}
.contactActionButtonBlue.hv {
  background: var(--color-bright);
  color: #03233f;
}
.contactFormSubmit.hv {
  background: var(--color-bright);
  color: #03233f;
}
.pageTopButton.hv {
  background: var(--color-bright);
  color: #03233f;
}
.footerNav a.hv::after {
  transform: scaleX(1);
}
.hwGuideData dd a.hv {
  border-bottom-color: var(--color-blue);
  color: var(--color-blue);
}
.hwGuideButton.hv {
  background: var(--color-bright);
  color: #03233f;
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(31, 155, 255, 0.32);
}
.hwGuideButton.hv::after {
  transform: translate(4px, -4px);
}
.hwGuideLink.hv {
  border-bottom-color: var(--color-blue);
}
.serviceCard.hv img,
  .worksMosaic img.hv,
  .safetyPhotoCard.hv,
  .safetyPhotoCard.hv img,
  .qualificationPhotos figure.hv,
  .qualificationPhotos figure.hv img,
  .profileCard.hv,
  .smallButton.hv,
  .lineButton.hv,
  .hwGuideButton.hv {
    transform: none;
}
.smallButton.hv::after,
  .lineButton.hv::after,
  .statusLink.hv::after,
  .hwGuideButton.hv::after {
    transform: none;
}

/* モーダルの閉じるボタンにも手応えを足す */
.contactModalClose {
  transition: background 0.25s ease, color 0.25s ease;
}

.contactModalClose:hover,
.contactModalClose.hv {
  background: var(--color-bright);
  color: #03233f;
}


/* =========================================================================
   ★ ベタ塗りの地の色そのものを明るくする（2026-09-12 追加）
   ------------------------------------------------------------------------
   幕や写真の処理を外したあとも重く見えていた原因は、紺のベタ塗り面そのもの。
   ステータスバー・会社紹介の下半分・青いカード・リクルート・フッターが、
   ほぼ黒に近い紺（#031f3d／明度 12）で塗られていた。

     紺   #031f3d（明度 12） → #12426e（明度 27）
     濃紺 #071118（明度  5） → #0c2c4c（明度 18）

   文字の下敷きになっている帯（業務内容の説明・番号ラベル・ヒーローの幕）は
   読みやすさが優先なので、暗いまま据え置いています。
   白文字とのコントラストは 9.9対1 で、この用途の基準 4.5対1 を満たします。
   ========================================================================= */

:root {
  --color-navy: #12426e;
  --color-deep: #0c2c4c;
}

/* リクルートの幕も同じ紺に合わせ、右側をさらに抜く */
.recruitBg {
  background:
    linear-gradient(90deg, rgba(18, 66, 110, 0.93) 0%, rgba(18, 66, 110, 0.74) 52%, rgba(18, 66, 110, 0.42) 100%);
}

/* =========================================================================
   ハローワーク案内を「採用情報」見出しの下（左カラム）へ置いたための調整
   ------------------------------------------------------------------------
   カラム幅が約400pxになるため、項目とボタンを縦に積む。
   ========================================================================= */

.entryWrap > div:first-child .hwGuide {
  margin-top: 30px;
  padding: 26px 24px 28px;
}

.entryWrap > div:first-child .hwGuideData div {
  grid-template-columns: 1fr;
  gap: 4px;
  padding: 11px 0;
}

.entryWrap > div:first-child .hwGuideActions {
  display: grid;
  gap: 14px;
}

.entryWrap > div:first-child .hwGuideButton {
  justify-content: center;
  padding: 12px 18px;
  text-align: center;
}

.entryWrap > div:first-child .hwGuideLink {
  text-align: center;
}

/* 左カラムでは見出しが折り返すため、少しだけ小さくする */
.entryWrap > div:first-child .hwGuideTitle {
  font-size: 1.3rem;
}

/* =========================================================================
   ★ 形の重複をほどく（2026-09-12 追加）
   ------------------------------------------------------------------------
   「左に色線を引いて見出しを置く」形が、ヒーロー・業務内容の番号・有資格者・
   ハローワーク案内の4か所で繰り返されていた。同じ型を並べると既製品に見える。
   左の色線はヒーローの1か所だけに残し、他は別の見せ方に置き換える。

     ヒーロー       左に太い線（ここだけに残す）
     業務内容の番号  線と帯をやめ、数字そのものを大きく見せる
     有資格者       見出しの下に線を引く
     ハローワーク    上辺に帯を渡して囲う
     有資格者一覧    罫線の4列組みをやめ、資格ごとの札を並べる
   ========================================================================= */

/* --- 地の色をもう一段明るく ------------------------------------------- */

:root {
  --color-navy: #1a5688;
  --color-deep: #123c62;
}

.recruitBg {
  background:
    linear-gradient(90deg, rgba(26, 86, 136, 0.93) 0%, rgba(26, 86, 136, 0.74) 52%, rgba(26, 86, 136, 0.42) 100%);
}

/* 地の色を明るくしても、白地の上に載る文字は濃いまま保つ */
.siteLogo,
.profileCard:not(.profileCardBlue) h3,
.worksItem span,
.licenseTitle,
.licenseIntroTitle,
.sectionCatch,
.safetyPhotoCard figcaption,
.qualificationPhotos figcaption,
.hwGuideTitle,
.contactSec,
.contactWrap h2,
.contactModalTitle,
.contactFormLabel,
.contactActionButton,
.resultTitle,
.signature {
  color: #0d3a63;
}

/* 濃紺のカードの中の文字は、明るい地に合わせて少し強める */
.profileCardBlue dd {
  color: rgba(255, 255, 255, 0.9);
}

/* --- 業務内容の番号：帯と線をやめ、数字を大きく見せる ------------------- */

/* 写真の左上だけ、光の当たり方のように暗さを残して数字を読ませる */
.serviceCard::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 52%;
  height: 190px;
  background: linear-gradient(148deg, rgba(3, 31, 61, 0.72) 0%, rgba(3, 31, 61, 0.34) 46%, rgba(3, 31, 61, 0) 78%);
  pointer-events: none;
}

.serviceTag {
  display: block;
  padding: 26px 0 0 26px;
  border-left: 0;
  background: none;
}

.serviceTag em {
  display: block;
  color: var(--color-white);
  font-size: 54px;
  line-height: 0.86;
  text-shadow: 0 2px 14px rgba(3, 31, 61, 0.55);
}

.serviceTag i {
  display: block;
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.94);
  font-size: 12px;
  letter-spacing: 0.24em;
  text-shadow: 0 1px 8px rgba(3, 31, 61, 0.5);
}

/* --- 有資格者：囲みをやめ、見出しの下に線を引く ------------------------- */

.licenseIntroBox {
  margin-top: 34px;
  padding: 0;
  border-left: 0;
  background: none;
}

.licenseIntroTitle {
  display: inline-block;
  padding-bottom: 12px;
  border-bottom: 3px solid var(--color-blue);
}

.licenseIntroText {
  margin-top: 14px;
}

/* --- ハローワーク案内：左線をやめ、上辺の帯で囲う ---------------------- */

.hwGuide {
  padding: 0;
  border: 1px solid var(--color-line);
  border-left: 0;
  background: var(--color-white);
}

.entryWrap > div:first-child .hwGuide {
  padding: 0;
}

.hwGuideTitle,
.entryWrap > div:first-child .hwGuideTitle {
  margin: 0;
  padding: 15px 22px;
  background: var(--color-navy);
  color: var(--color-white);
  font-family: var(--font-jp);
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.5;
}

.hwGuideText {
  margin: 0;
  padding: 20px 22px 0;
}

.hwGuideData {
  margin: 18px 22px 0;
}

.hwGuideActions,
.entryWrap > div:first-child .hwGuideActions {
  margin: 22px 22px 0;
}

.hwGuideNote {
  margin: 16px 0 0;
  padding: 14px 22px;
  border-top: 1px solid var(--color-line);
  background: #f6f9fc;
}

/* 小さいカードは番号を少し抑えて、見出しとの間を空ける */
.serviceCard:not(.serviceCardWide) .serviceTag {
  padding: 20px 0 0 22px;
}

.serviceCard:not(.serviceCardWide) .serviceTag em {
  font-size: 42px;
}

.serviceCard:not(.serviceCardWide)::before {
  height: 150px;
}

/* =========================================================================
   ★ 文字の見やすさを測って直す（2026-09-12 追加）
   ------------------------------------------------------------------------
   地の色を明るくしたぶん、その上に載る文字が沈んでいた。
   全ての文字について前景と背景のコントラスト比を測り、基準を割った5か所を直す。
   基準は本文 4.5対1、大きい文字 3対1（WCAG AA）。

     認定・地域活動の見出し   1.5 → 8.4   ※白地用の指定を巻き込んでいた
     同カードの項目名        2.6 → 6.6
     Since 1973            2.6 → 5.4
     著作権表示             4.1 → 5.6
     ハローワークの注記       4.5 → 5.3
   ========================================================================= */

.profileCardBlue h3 {
  color: var(--color-white);
}

.profileCardBlue dt {
  color: #9ad4ff;
}

.statusLabel {
  color: #86ccff;
}

.copyright {
  color: rgba(255, 255, 255, 0.68);
}

.hwGuideNote {
  color: #57677a;
}