@charset "UTF-8";

/* =========================================================================
   ストレスチェックサービス共通スタイル（sc-common.css）
   SCサービス全ページで共有する見出し・レイアウトパーツ
========================================================================= */


/* =========================================================
   下層ページ共通モジュール
========================================================= */
/* --- 下層共通：2カラムボタンエリア（可変対応版） --- */
.twoColumnArea {
  /* gap は flex gap と各アイテムの width 計算(calc(50% - gap/2)) の両方で使う。
     em は要素ごとの font-size で解決が変わり（例: li は共通の dt,dd,li 規則で 12.8px、
     ul は 16px）、幅の差し引きと実 gap がズレて折り返す。rem(=ルート基準)で単位を統一する。 */
  --two-col-gap: 2rem;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--two-col-gap);
  width: 90%;
}

.twoColumnArea > * {
  width: 100%;
  min-width: 0;
}

.twoColumnArea > .twoColItem {
  width: calc(50% - var(--two-col-gap) / 2);
}

.twoColumnArea>li>a,
.threeColumnArea>li>a{
  display: block;
  padding: 16px 48px;
  text-align: center;
  border: solid 2px var(--c-btn);
  border-radius: 8px;
  text-decoration: none;
  color: var(--c-btn);
  font-size: clamp(14px, 2vw + 10px, 24px);
  font-weight: 700;
  position: relative;
  line-height: 1.4;
}

.twoColumnArea>li>a::after,
.threeColumnArea>li>a::after{
  content: "";
  position: absolute;
  top: 50%;
  left: 16px;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  background-color: var(--c-btn);
  -webkit-mask-image: url("/wp-content/themes/wk_altpaper_2026/common_img/link-cursol-under.svg");
  mask-image: url("/wp-content/themes/wk_altpaper_2026/common_img/link-cursol-under.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* --- 下層共通：CTAテキスト --- */
.ctaTxt {
  margin: 64px auto;
  color: var(--c-btn);
  text-align: center;
  font-size: var(--fs-24); /* Mobile-first base */
}

/* --- 下層共通：1カラムカードレイアウト --- */
.oneColumnArea {
  margin: 0 auto;
	width: 90%;
  max-width: 1200px;
}

.oneColumnCard {
  display: flex;
  flex-direction: column; /* Mobile-first base */
  gap: 24px;
  margin-bottom: 24px;
  padding: 24px;
  background-color: var(--c-white);
  border: solid 1px var(--c-border-dark);
  border-radius: 8px;
}

.blockBadge {
  display: block;
  padding: 0.5em;
  background-color: var(--c-accent);
  text-align: center;
  font-size: var(--fs-18);
  font-weight: 700;
  border-radius: 4px;
}

.blockBadgeBlue {
  display: block;
  padding: 0.5em;
  background-color: var(--c-primary);
	color: var(--c-white);
  text-align: center;
  font-size: var(--fs-18);
  font-weight: 700;
  border-radius: 4px;
}


.blockPrimaryBadge {
  display: block;
  padding: 0.5em;
  background-color: var(--c-primary);
	color: var(--c-white);
  text-align: center;
  font-size: var(--fs-18);
  font-weight: 700;
  border-radius: 400px;
}

.flowLeft {
  width: 100%;
  max-width: 100%; /* Mobile-first base */
}

.flowLeft img {
	width: 100%;
}


.flowRight>h3 {
  margin-bottom: 0.5em;
  padding: 0.5em 0;
  font-size: var(--fs-24);
  color: var(--c-primary);
  border-bottom: solid 1px var(--c-text);
}

.flowRight>p {
  margin-bottom: 1em;
}

.flowExtra {
  width: 100%;
  margin-top: 16px;
}

.extraTit{
	margin-bottom: 1em;
	padding: 0.5em 0;
	border: solid 4px var(--c-primary);
	color: var(--c-primary);
	text-align: center;
	font-size: var(--fs-24);
	font-weight: 700;
}

/* --- 下層共通：3カラムエリア --- */
.threeColumnArea {
  margin: 0 auto clamp(60px, 5vw, 120px);
  padding: 0;
  display: flex;
  flex-direction: column;
  width: 90%;
  max-width: 1200px;
  gap: clamp(16px, 4vw, 32px);
  list-style: none;
}

.threeColumnWrap {
  margin: 0 auto;
  padding: 0;
  display: flex;
	flex-wrap: wrap;
  width: 90%;
  max-width: 1200px;
  gap: clamp(16px, 4vw, 48px);
  list-style: none;
}

.searchResultCard{
	width: 100%;
}

.companythumb img{
	margin: auto;
	border: solid 1px var(--c-border);
}

/* --- 下層共通：4カラムエリア --- */
.fourColumnArea {
  margin: 0 auto clamp(60px, 10vw, 120px);
  padding: 0;
  display: flex;
  flex-direction: column;
  width: 90%;
  max-width: 1200px;
  gap: clamp(16px, 4vw, 32px);
  list-style: none;
}

/* =========================================================
   オプションサービスページ 固有スタイル
========================================================= */
/* --- ダイバーシティ推進オプション --- */
.boxWhite{
	padding: 24px;
	border: solid 1px var(--c-border);
	background-color: var(--c-white);
}

.innerTit{
	padding: 0 0 1em;
	text-align: center;
	font-size: var(--fs-24);
	color: var(--c-primary);
	font-weight: 700;
	font-feature-settings: "palt";
}

.innerPriceArea{
	padding: 0.5em 1em;
	border-radius: 1000px;
	border: solid 4px var(--c-primary);
	color: var(--c-primary);
	font-size: var(--fs-c-18-24);
	font-weight: 700;
	text-align: center;
}


/* --- 6. ボタン並びエリア --- */
.serviceCtaWrap {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  width: 90%;
  max-width: 1200px;
  gap: 1em;
  padding: 2em 0 4em;
}

.serviceCtaWrap>p {
  width: 100%;
}

.serviceCtaWrap img {
  width: 100%;
  height: auto;
  display: block;
}

.serviceCtaWrap .linkBtn {
  width: 100%;
  aspect-ratio: 576 / 64;
  min-height: auto;
}

.serviceCtaWrap .linkBtn .btnText {
  font-size: clamp(12px, 3vw, 22px);
  padding: 0 0.5em;
  white-space: nowrap;
}

.serviceCtaWrap .linkBtn .btnArrow {
  width: clamp(32px, 6vw, 48px);
}

/* --- 7. 紺色バナーエリア --- */
.serviceReadBanner {
  margin: 0 auto clamp(60px, 10vw, 120px);
  padding: clamp(24px, 4vw, 40px) 5%;
  width: 90%;
  max-width: 1200px;
  border-radius: 8px;
  background-color: var(--c-primary);
  color: var(--c-white);
  text-align: center;
}

.serviceReadBanner>h2,
.serviceReadBanner>.serviceReadBannerTit {
  margin: 0 0 0.5em;
  font-size: var(--fs-c-24-48);
  font-weight: 900;
  line-height: 1.4;
}

.serviceReadBanner>p {
  margin: 0;
  font-size: clamp(16px, 2vw + 4px, 26px);
  line-height: 1.6;
  text-align: center;
}

/* --- 報告会（フィードバック）オプション 固有スタイル --- */

.blueBack{
	padding: 0.5em 1em;
	border-radius: 8px;
	background-color: var(--c-primary);
	color: var(--c-white);
	font-weight: 700;
	font-feature-settings: "palt";
}

.blueBackB{
	margin: 1px;
	padding: 0.5em 1em;
	background-color: var(--c-primary);
	color: var(--c-white);
	font-size: var(--fs-24);
	font-weight: 700;
	font-feature-settings: "palt";
	text-align: center;
}


/* --- 無料体験版ページ 固有スタイル（使い方・注釈エリア） --- */
.howToUse{
	margin: 64px auto;
	padding: 24px;
	width: 90%;
	max-width: 960px;
	background-color: var(--c-bg-light);
	border: solid 1px var(--c-border);
}
.howToUse > h3{
	margin-bottom: 24px;
	text-align: center;
}
.howToUse > ol{
	margin: 0 auto;
	width: fit-content;
}
.howToUse > ol > li{
	margin-bottom: 0.5em;
}
.howToUse > ol > li::before{
	content: "●";
	color: var(--c-primary);
}

/* --- 無料体験版ページ 固有スタイル（CTAエリア） --- */
.htuCtaTit{
	margin-bottom: 32px;
	color: var(--c-primary);
	font-size: var(--fs-c-24-32);
	text-align: center;
	font-feature-settings: "palt";
}

.htuCtaP{
	margin: 0 auto;
	text-align: center;
}

/* 経年比較レポート */
.innerList{
	margin: 1em 0 0;
}
.innerList > li{
	line-height: 1.75;
}
.innerList > li::before{
	content: "●";
}

.whiteBoxR{
	margin: 0 auto;
  padding: 24px 16px;
  border-radius: 16px;
  background-color: var(--c-white);
  width: 100%;
  max-width: 1200px;
  box-sizing: border-box;
	display: flex;
	justify-content: center;
}

/* 配送関連 */
.deliveryPriceTable{
border-top: solid 1px var(--c-border);
border-left: solid 1px var(--c-border);
width: fit-content;
}

.deliveryPriceTable th,.deliveryPriceTable td{
border-bottom: solid 1px var(--c-border);
border-right: solid 1px var(--c-border);
padding: 0.5em 2em;
}

.dptH01{text-align: center;}
.dptH02{text-align: right;}

.deliveryPriceTable td{
	text-align: right;
	font-weight: bold;
}

/* 料金ページ */
.feeOptSubH{
	padding: 0.5em;
	background-color: var(--c-black);
	color: var(--c-white);
	text-align: center;
	font-size: var(--fs-c-14-18);
}

.feeOptSubL{
	margin: 1em auto;
}
.feeOptSubL li{
	margin-left: 1.75em;
	margin-bottom: 1em;
	list-style-type: decimal-leading-zero;
}

.innerOptTit{
	margin-bottom: 1em;
	padding: 0.5em;
	background-color: var(--c-pale-blue);
	color: var(--c-primary);
	text-align: center;
	font-size: var(--fs-c-18-24);
}

.feeOptOneColumn{
	margin: 64px auto;
	padding: 24px;
	width: 90%;
	max-width: 1200px;
	border: solid 1px var(--c-border);
}

.feeOptWrap{
	display: flex;
	flex: 1;
	gap: 64px;
}

.feeOptPriceTable{
border-top: solid 1px var(--c-border);
border-left: solid 1px var(--c-border);
width: fit-content;
}

.feeOptPriceTable th,.feeOptPriceTable td{
border-bottom: solid 1px var(--c-border);
border-right: solid 1px var(--c-border);
padding: 0.5em;
}

.feeOptPriceTable td{
	text-align: right;
	font-weight: bold;
}

/* 導入事例・アワード */
.caseSearchSelect{
	margin-bottom: 64px;
	border-bottom: solid 1px var(--c-border);
}

.searchSelectCategory{
	margin: 0 auto;
	width: 90%;
	max-width: 1200px;
	display: flex;
	flex-wrap: wrap;
}

.searchSelectCategory > dt,
.searchSelectCategory > dd{
	padding: 1.5em 0;
	border-top: solid 1px var(--c-border);
}

.searchSelectCategory > dt{
	width: 100%;
	max-width: 200px;
	font-weight: bold;
}

.searchSelectCategory > dd{
	width: 100%;
	max-width: 1000px;
}

.searchSelectCategory > dd > ul{
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
}

.searchSelectCategory > dd > ul li > button,
.searchSelectCategory > dd > ul li > a{
	display: inline-block;
	padding: 1em;
	background-color: var(--c-white);
	color: var(--c-btn);
	border: solid 2px var(--c-btn);
	border-radius: 8px;
	text-decoration: none;
	cursor: pointer;
}

.searchSelectCategory > dd > ul li > button.btnActive,
.searchSelectCategory > dd > ul li > a.btnActive{
background-color: var(--c-btn);
color: var(--c-white);
}

.searchResultCard a{
	text-decoration: none;
}

.srInnerTit{
	margin: 0.5em 0;
	color: var(--c-btn);
	font-size: var(--fs-c-18-24);
}

.companyTagList{
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.companyTagList li{
	padding: 0.25em 0.5em;
	font-size: clamp(10px, 2vw, 14px);
	background-color: var(--c-primary);
	color: var(--c-white);
}

.pagination{
	margin: 64px auto;
	width: 90%;
	max-width: 1200px;
}

.paginationList{
	display: flex;
	justify-content: center;
	gap: 8px;
}

.paginationList li button{
	padding: 0.25em 1em;
	border: solid 2px var(--c-btn);
	background-color: var(--c-white);
	color: var(--c-btn);
}

.paginationList li button.is-current{
	background-color: var(--c-btn);
	color: var(--c-white);
}

.companyCard{
	margin: 0 auto;
	padding: 16px;
	width: 90%;
	max-width: 1200px;
	border: solid 1px var(--c-border);
	background-color: var(--c-white);
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.ccLeftColumn{
	width: 100%;
	max-width: 100%;
}

.ccRightColumn{
	width: 100%;
	max-width: 100%;
}

.companyColumnTit{
	margin: 0 0 0.5em;
	font-feature-settings: "palt";
}

.companyTit{
	margin: 0.5em 0;
	color: var(--c-primary);
	font-size: var(--fs-c-18-24);
	font-weight: bold;
}

.companyData{
	display: flex;
	flex-wrap: wrap;
}

.companyData dt,
.companyData dd{
	margin-bottom: 1px;
	padding: 0.5em;
}
.companyData dt{
	width: 100%;
	text-align: left;
	background-color: var(--c-bg-gray);
}
.companyData dd{
	width: 100%;
	text-align: justify;
	font-feature-settings: "palt";
	line-height: 1.75;
}

.awardPostArea{
	margin: 40px auto;
	width: 90%;
	max-width: 1200px;
	display: flex;
	flex-direction: column;
}

.apLeftArea{
	padding: 16px;
	background-color: var(--c-primary);
	color: var(--c-white);
	font-feature-settings: "palt";
	width: 100%;
	max-width: 100%;
}

.apRightArea{
	padding: 16px;
	border: solid 1px var(--c-border);
	width: 100%;
	max-width: 100%;
	background-color: var(--c-bg-light);
}

.apLeftArea > h2{
	line-height: 1.5;
}

.awardsCommentArea{
	margin: 0 auto;
	padding: 24px;
	width: 90%;
	max-width: 1040px;
	border: solid 4px var(--c-primary);
	border-radius: 16px;
}

.awardsCommentArea h2{
	margin-bottom: 1em;
	color: var(--c-primary);
	border-bottom: solid 4px var(--c-primary);
}

.commentAuthor{
	text-align: right;
	font-weight: bold;
}

.commentDesc{
	margin: 0.5em auto 64px;
	width: 90%;
	max-width: 1040px;
	font-size: var(--fs-14);
}

.caseStudyTit{
	margin: 0 auto 32px;
	font-feature-settings: "palt";
	text-align: center;
  font-size: var(--fs-c-24-32);
}

.caseStudyBlock{
	margin: 40px auto;
	padding: 24px 0;
	background-color: var(--c-bg-yellow);
}

.caseStudyBlock a{
	text-decoration: none;
	display: block;
	margin-bottom: 4em;
}

.caseStudyBlock a:hover{
	opacity: 0.5;
}

.importCSTit{
	margin-bottom: 0.5em;
	color: var(--c-btn);
	font-size: var(--fs-c-18-24);
	font-feature-settings: "palt";
	text-align: justify;
	line-height: 1.5;
}

.apRightArea > h3{
	margin-bottom: 1em;
	padding: 1em;
	background-color: var(--c-bg-gray);
	text-align: justify;
	font-feature-settings: "palt";
}

.apRightArea > h4{
	margin-bottom: 1.75em;
	color: var(--c-primary);
	border-bottom: solid 4px var(--c-primary);
	font-feature-settings: "palt";
}

.scasPostArea p{
	margin: 0 auto 64px;
	width: 90%;
	max-width: 1040px;
}

.caseSearchReset{
	margin: 0 auto 64px;
	width: 90%;
	max-width: 1200px;
	text-align: right;
	font-size: var(--fs-c-12-14);
	color: var(--c-btn);
}

.caseSearchReset a:hover{
	opacity: 0.5;
}
/* =========================================================================
   メディアクエリ（PC・タブレット向け機能拡張 / モバイルファースト）
========================================================================= */

@media (min-width: 768px) {
  .companyCard {
    padding: 24px;
    flex-direction: row;
    gap: 24px;
  }

  .ccLeftColumn {
    max-width: 520px;
  }

  .ccRightColumn {
    max-width: 608px;
  }

  .companyData dt {
    width: 20%;
    text-align: center;
  }

  .companyData dd {
    width: 80%;
  }

  .awardPostArea {
    margin: 64px auto;
    flex-direction: row;
  }

  .apLeftArea {
    padding: 24px;
    max-width: 552px;
  }

  .apRightArea {
    padding: 24px;
    max-width: 648px;
  }

  .apLeftArea > h2 {
    position: sticky;
    top: 184px;
  }

  .awardsCommentArea {
    padding: 32px 64px;
  }

  .caseStudyTit {
    margin: 0 auto 64px;
    font-size: var(--fs-c-24-48);
  }

  .caseStudyBlock {
    margin: 64px auto;
    padding: 64px;
  }
	
	.searchResultCard{
		max-width: 368px;
	}


  /* 3カラムエリア */
  .threeColumnArea {
    flex-direction: row;
    gap: clamp(24px, 3vw, 48px);
  }
  .threeColumnArea > * {
    flex: 1; /* ★要素を等幅にする */
  }
	
  /* 3カラムBOX */
  .threeColumnWrap {
    flex-direction: row;
    gap: clamp(24px, 3vw, 48px);
  }

  /* 4カラムエリア */
  .fourColumnArea {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  .twoColumnArea {
		max-width: 1200px;
  }

	.twoColumnArea > * {
		width: calc(50% - var(--two-col-gap) / 2);
	}

  .ctaTxt {
    font-size: var(--fs-36);
  }

  /* ボタン並びエリア */
  .serviceCtaWrap {
    flex-direction: row;
    gap: 2em;
    align-items: center;
  }

  .serviceCtaWrap>p {
    width: 50%;
  }	
	
	.boxWhite{
		max-width: 568px;
	}

}

@media (min-width: 1025px) {
  /* 4カラムエリア */
  .fourColumnArea {
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }

  .oneColumnCard {
    flex-direction: row;
    flex-wrap: wrap;
  }
  
  .flowRight {
    flex: 1;
  }
	

  .flowLeft {
		width: 200%;
    max-width: 520px;
  }
	.flowLeft img {
	max-width: 520px;
	}
}


/* =========================================================================
   下層ページ共通パーツ（sc-page.cssより移動）
========================================================================= */

.imgAreaWrap{
	margin-bottom: 0.5em;
	display: flex;
	justify-content: space-between;
	gap: 1em;
}

.contentsTit {
    text-align: center;
    font-size: var(--fs-c-24-48);
    margin-bottom: 40px;
}

.contentsSubTit{
	padding: 0.5em 1em;
	background-color: var(--c-primary);
	color: var(--c-white);
	font-weight: 700;
}

.serviceSubMainVisual{
	margin: 0 auto;
	display: block; /* スマホではブロック表示 */
	max-width: 1920px;
}

.serviceSubMainVisual > .visualImgArea{
	flex: 1;
	display: none; /* スマホでは左の写真要素を隠す */
}

.serviceSubMainVisual > .visualRightTxt{
	width: 90%; /* スマホでは少し余白を持たせる */
	margin: 0 auto;
}

.serviceSubMainVisual > .visualImgArea img{
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

.visualRightTxt{
	padding: 16px 0 1em; /* スマホ: 上16px、下1emで背景の突き抜け防止 */
}

.subHeaderTit{
	margin-bottom: 12px;
	padding-bottom: 8px;
	font-size: var(--fs-c-20-28);
	color: var(--c-primary);
	border-bottom: solid 1px var(--c-primary);
}

.subHeaderTxt{
	font-family: "Noto Serif JP";
	font-size: var(--fs-c-20-26);
	font-weight: 700;
	font-feature-settings: "palt";
	line-height: 1.4;
	color: var(--c-primary);
}

.subHeaderDesc{
	margin-top: 12px;
	font-size: var(--fs-c-14-16);
	line-height: 1.7;
}

.pageCard{
	margin: 64px auto;
	padding: 16px;
	width: 90%;
	max-width: 1200px;
	border: solid 4px var(--c-accent);
	border-radius: 32px;
	background-color: var(--c-bg-yellow);
	display: flex;
	flex-flow: column;
	align-items: center;
	text-align: center;
}

.cardTit{
	font-size: var(--fs-c-24-48);
}

.cardTit + p{
	margin-bottom: 0;
	text-align: center;
	font-size: var(--fs-c-24-48);
	font-weight: 700;
}

@media (min-width: 768px) {
	.serviceSubMainVisual {
		display: flex;
		align-items: flex-start; /* 全体を上揃え（テキストを上にする） */
		justify-content: center; /* 2カラムをウィンドウ中央に */
	}
	.serviceSubMainVisual > .visualImgArea {
		display: block;
		flex: 0 1 auto; /* コンテンツに応じたサイズ */
		width: 50%;
		max-width: 960px;
		align-self: flex-end; /* 画像側のみ下揃え */
	}
	.serviceSubMainVisual > .visualRightTxt {
		flex: 0 1 auto; /* コンテンツに応じたサイズ */
		width: 50%;
		max-width: 960px;
		padding: 0;
		display: flex;
		align-items: flex-start; /* 中身のテキストも上寄りに配置 */
	}
	.subHeaderTit{
		margin-bottom: 12px;
		padding-bottom: 8px;
		font-size: var(--fs-c-18-24);
	}
	.subHeaderTxt{
		font-size: var(--fs-c-20-28);
		line-height: 1.4;
	}
	.subHeaderDesc{
		margin-top: 12px;
		font-size: var(--fs-c-14-16);
		line-height: 1.6;
	}
	.mvRihtTxtArea{
		max-width: 560px;
		padding: 24px 32px;
	}
}

@media (min-width: 1280px) {
  .subHeaderTit{
    font-size: var(--fs-36);
  }
  .subHeaderTxt{
    font-size: var(--fs-28);
    line-height: 1.45;
  }
  .subHeaderDesc{
    font-size: var(--fs-16);
    line-height: 1.7;
  }
  .mvRihtTxtArea{
    max-width: 560px;
    padding: 24px 0;
  }
}

.scproOptionService {
  margin: 0 auto clamp(60px, 10vw, 120px);
  padding: 0;
  width: 90%;
  max-width: 1200px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  list-style: none;
}

.scproOptionService .linkBtn {
  width: 100%;
  height: 100%;
}

.scproOptionService .linkBtn .btnText {
  white-space: normal;
  font-size: var(--fs-c-14-16);
  padding: 0.8em 1em;
}

@media (min-width: 768px) {
  .scproOptionService {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .scproOptionService {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
}

/* -----------------------------------------------------
   サービス共通カード (serviceReasonCard / serviceNeedsCard)
----------------------------------------------------- */
.serviceReasonCard {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.serviceReasonCard img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--c-border-light);
}

.serviceReasonCard h3,
.serviceReasonCard h4 {
  font-size: var(--fs-c-14-18);
  color: var(--c-primary);
  font-weight: bold;
  line-height: 1.5;
}

.serviceReasonCard h3 span,
.serviceReasonCard h4 span {
  display: inline-block;
  font-size: var(--fs-16);
}

.serviceReasonCard p {
  font-size: var(--fs-16);
}

.serviceNeedsCard {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background-color: var(--c-bg-light);
  border-radius: 8px;
  overflow: hidden;
}

.serviceNeedsCard img {
  width: 100%;
  height: auto;
  display: block;
}

.serviceNeedsCard p {
  padding: 0 16px 16px;
  font-size: var(--fs-c-14-16);
  font-weight: bold;
}