/* ========================================
   aboutセクション
   ======================================== */
.maintenance-about {
  display: flex; /* フレックスボックスで柔軟なレイアウト */
  align-items: center; /* 子要素を上下中央に配置 */
  padding-top: 60px;
  padding-bottom: 100px;
}

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

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

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

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

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

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

@media screen and (max-width: 768px) {
  .maintenance-description {
    padding-top: 10px;
  }
}

/* ========================================
   maintenance-flowセクション
   ======================================== */

.maintenance-card {
  display: flex;
  flex-direction: column;
  padding-top: 60px;
  padding-bottom: 60px;
}

.maintenance-image-area {
  display: flex;
  justify-content: space-between;
  padding-top: 30px;
  padding-bottom: 60px;
  gap: 15px;
}
@media screen and (max-width: 768px) {
  .maintenance-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .maintenance-image-area {
    flex-direction: column;
    align-items: center;
    max-width: 90%;
    padding-bottom: 30px;
  }
}
.maintenance-image-area .pattern-image {
  display: flex;
  padding-top: 30px;
  padding-bottom: 60px;
}
.pattern-image {
  justify-content: space-between;
  max-width: 748px;
  margin: 0 auto;
}

.common-contents-outer .maintenance-last-card {
  padding-bottom: 100px;
}