.p-60 {
  padding: 60px 0;
}
.pb-80 {
  padding-bottom: 80px;
}

/* ========================================
   aboutセクション
   ======================================== */
.safety-about {
  padding-top: 60px;
  padding-bottom: 100px;
}

.safety-wrapper {
  display: flex; /* フレックスボックスで横並びレイアウト */
  align-items: center; /* 子要素を下端で揃える */
  gap: 60px; /* 子要素間に60pxの間隔を設定 */
  margin: 0 auto;
}

.safety-about .about-image::after {
  display: none;
}

.safety-about .attention {
  font-size: 2rem;
  padding-top: 20px;
}

@media screen and (max-width: 768px) {
  .safety-wrapper {
    gap: 30px;
  }
}

.safety-about .text-area,
.safety-about .image-area {
  flex: 1; /* 親要素の幅を均等に分配 */
}

.safety-description {
  font-size: 1.8rem; /* 16px相当の文字サイズ */
  line-height: 1.8; /* 行の高さを文字サイズの1.8倍に設定（読みやすさ向上） */
}

/* ========================================
   平面駐車場の特長
   ======================================== */
.safety-flow-item {
  width: 95%;
  margin: 0 auto;
}

/* タイトル下の余白 */
.safety-flow-item .common-title-numbered {
  padding-bottom: 10px;
}

/* リストアイテムのフォントサイズ */
.safety-flow-item-content p {
  font-size: 2rem;
}

.safety-flow .section-content .button-wrapper {
  padding-bottom: 40px;
}

.safety-images-list {
  display: flex;
  gap: 20px;
  padding-top: 20px;
}


/* タブレット向け (1100px以下) */
@media screen and (max-width: 1100px) {
  .safety-about {
    padding: 40px 0; /* 上下の内側余白を40pxに縮小 */
  }

  .safety-wrapper {
    flex-direction: column; /* 縦並びレイアウトに変更 */
    align-items: center; /* 子要素を中央配置 */
    padding-bottom: 20px; /* 下の内側余白を20pxに縮小 */
  }

  .safety-about .about-image {
    width: 100%;
    max-width: 600px;
  }

  .safety-about .image-area img {
    width: 100%;
  }
}

@media screen and (max-width: 768px) {
  .p-60 {
    padding: 40px 0;
  }

  .pb-80 {
    padding-bottom: 50px;
  }

  .safety-about {
    padding-top: 40px;
    padding-bottom: 60px;
  }

  .safety-about .attention {
    font-size: 1.6rem;
  }

  .safety-description {
    padding-top: 10px;
    font-size: 1.6rem;
  }

  /* 平面駐車場の特長 */
  .safety-flow-item-content p {
    font-size: 1.6rem;
  }

  .safety-images-list {
    flex-direction: column;
    align-items: center;
  }

  .safety-images-list li img {
    width: 100%;
    max-width: 470px;
  }
}

/* ------------------------------------------
   480px以下（スマートフォン）
   ------------------------------------------ */
@media screen and (max-width: 480px) {
  .p-60 {
    padding: 30px 0;
  }

  .pb-80 {
    padding-bottom: 40px;
  }

  .safety-about {
    padding-top: 30px;
    padding-bottom: 40px;
  }

  .safety-about .attention {
    font-size: 1.4rem;
  }

  .safety-description {
    font-size: 1.4rem;
  }

  .safety-flow-item-content p {
    font-size: 1.4rem;
  }
}