.step .red { background-color: var(--color-secondary) !important;}
.step .blue { background-color: var(--color-primary) !important;}
.step .dull-red { background-color: #C0605D !important;}
.step .dull-blue { background-color: #618EDB !important;}




/* グリッドレイアウト */
.kirei-merit-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3カラムの設定（PCの場合） */
gap: 30px; /* アイテム間のスペース */
padding: 20px;
max-width: 1200px;
margin: 0 auto;
}

/* 各アイテムの枠を追加し、背景色を#f4f4f4に変更 */
.kirei-merit-order {
background-color: #f4f4f4; /* 背景色を変更 */
padding: 20px; /* 内側の余白 */
border: 2px solid #f4f4f4; /* 枠線の色と太さ */
border-radius: 8px; /* 角を丸くする */
text-align: center; /* テキスト中央揃え */
box-shadow: 1px 2px 2px #DEE0E1;
}

/* 各タイトル */
.kirei-merit-order h2 {
font-size: 18px;
font-weight: bold;
margin-bottom: 10px;
color: #0589C4; /* 青系で信頼感UP */
border-bottom: 1px solid #ddd;
padding-bottom: 5px;
}

.kirei-merit-title{
font-size: 18px;
font-weight: bold;
padding-bottom: 10px;
}

/* 各テキスト */
.kirei-merit-order p {
font-size: 14px;
line-height: 1.5;
margin: 0;
}

/* レスポンシブ対応: 最大幅768pxで2列レイアウトにする */
@media screen and (max-width: 768px) {
.kirei-merit-container {
grid-template-columns: repeat(2, 1fr); /* 画面幅が狭い時は2カラムに変更 */
}
}

/* レスポンシブ対応: 最大幅480pxで1列レイアウトにする */
@media screen and (max-width: 480px) {
.kirei-merit-container {
grid-template-columns: 1fr; /* さらに画面幅が狭くなった場合は1列に */
}
}


/* グリッドレイアウト */
.kirei-merit4-container {
display: grid;
grid-template-columns: repeat(2, 1fr); /* 3カラムの設定（PCの場合） */
gap: 40px; /* アイテム間のスペース */
padding: 50px;
max-width: 1200px;
margin: 0 auto;
}

/* 各アイテムの枠を追加し、背景色を#f4f4f4に変更 */
.kirei-merit4-order {
background-color: #f4f4f4; /* 背景色を変更 */
padding: 20px; /* 内側の余白 */
border: 2px solid #f4f4f4; /* 枠線の色と太さ */
border-radius: 8px; /* 角を丸くする */
text-align: center; /* テキスト中央揃え */
box-shadow: 1px 2px 2px #DEE0E1;
}

/* 各タイトル */
.kirei-merit4-order h2 {
font-size: 18px;
font-weight: bold;
margin-bottom: 10px;
color: #0589C4; /* 青系で信頼感UP */
border-bottom: 1px solid #ddd;
padding-bottom: 5px;
}

.kirei-merit4-title{
font-size: 18px;
font-weight: bold;
padding-bottom: 10px;
}

/* 各テキスト */
.kirei-merit4-order p {
font-size: 14px;
line-height: 1.5;
margin: 0;
}

/* レスポンシブ対応: 最大幅768pxで2列レイアウトにする */
@media screen and (max-width: 768px) {
.kirei-merit4-container {
grid-template-columns: repeat(2, 1fr); /* 画面幅が狭い時は2カラムに変更 */
}
}

/* レスポンシブ対応: 最大幅480pxで1列レイアウトにする */
@media screen and (max-width: 480px) {
.kirei-merit4-container {
grid-template-columns: 1fr; /* さらに画面幅が狭くなった場合は1列に */
gap: 30px;
padding: 20px;
}
}


.home-strength-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 画面幅に応じてカラム数を自動調整 */
  gap: 20px; /* アイテム間のスペース */
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

/* 各アイテムのスタイル */
.home-strength-item {
  box-sizing: border-box;
  text-align: center;
  font-size: 16px;
  padding: 20px;
}

/* 画像のスタイル */
.home-strength-item picture {
  display: block;
  margin: 0 auto 10px;
  width: 100px;
  height: 100px;
  overflow: hidden;
}

.home-strength-item img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* アスペクト比を維持 */
}

/* 見出しのスタイル */
.home-strength-item h2 {
  margin-top: 10px;
  font-size: 16px; /* フォントサイズを少し大きく */
  font-weight: bold;
  text-align: center;
}

/* テキストのスタイル */
.home-strength-item p {
  font-size: 14px;
  line-height: 1.6;
  margin: 10px 0 0;
}

/* タブレット表示: 2カラム */
@media screen and (max-width: 1024px) {
  .home-strength-container {
    gap: 15px; /* アイテム間のスペースを調整 */
  }
}

/* スマホ表示: 1カラム */
@media screen and (max-width: 768px) {
  .home-strength-container {
    gap: 10px; /* アイテム間のスペースを調整 */
  }

  .home-strength-item picture {
    width: 80px;
    height: 80px;
  }
}