/*--------------------------------
  共通設定
--------------------------------*/
body {
  font-family: "M PLUS Rounded 1c", sans-serif;
  background: #fdf6f5;
  color: #084d46;
  margin: 0;
  padding: 0;
}

/* セクション共通 */
.section-wrapper {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 0;
}

/* タイトル */
.section-title {
  text-align: center;
  font-size: 48px;
  font-weight: 700;
  margin-bottom: 40px;
  color: #084d46;
}

/*--------------------------------
  レイアウト（PC）
--------------------------------*/
.business-row {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 60px;
  margin-bottom: 100px;
}

/* イラスト左側 */
.business-illust-left img,
.business-illust-right img {
  width: 260px;
  height: auto;
}

/* テキスト部分 */
.business-text {
  max-width: 650px;
}

.business-text h3 {
  font-size: 36px;
  margin-bottom: 20px;
}

.business-text .sub-list p {
  font-size: 28px;
  line-height: 1.8;
  margin: 5px 0;
}

.business-desc {
  margin-top: 30px;
  font-size: 18px;
  line-height: 2;
}

/*--------------------------------
  ご利用の流れ
--------------------------------*/
.flow-section {
  background: #fde7df;
  padding: 100px 0;
  position: relative;
  background-color: #fde8e3; /* 既存の背景色そのまま */
  overflow: hidden;
}

.flow-title {
  text-align: center;
  font-size: 40px;
  margin-bottom: 60px;
}

.flow-steps {
  display: flex;
  justify-content: center;
  gap: 40px;
}

.flow-box {
  width: 260px;
  background: #fff;
  padding: 30px;
  border-radius: 8px;
  text-align: center;
}

.flow-box img {
  width: 60px;
  margin-bottom: 10px;
}

.flow-arrow {
  width: 40px;
  align-self: center;
}

.flow-desc {
  font-size: 15px;
  line-height: 1.7;
  margin-top: 10px;
}

/*--------------------------------
  お問い合わせボックス
--------------------------------*/
.contact-box {
  width: 500px;
  background: #fff;
  margin: 80px auto 0;
  padding: 40px;
  border-radius: 10px;
  text-align: center;
}

.contact-box h3 {
  font-size: 32px;
  margin-bottom: 15px;
}

.contact-phone {
  font-size: 28px;
  color: #c23b8a;
  font-weight: 700;
  margin: 10px 0 25px;
}

.contact-btn {
  display: block;
  background: #c23b8a;
  padding: 16px 10px;
  color: #fff;
  border-radius: 6px;
  font-size: 18px;
  text-decoration: none;
}

/*--------------------------------
  イラスト右下（足あと）
--------------------------------*/
/* ご利用の流れ：足あと飾り */
/* 左上の足あと */
.flow-section::before {
    content: "";
    position: absolute;
    top: -40px;
    left: -40px;
    width: 260px;
    height: 260px;
    background: url("../img/illust_foot.png") no-repeat center/contain;
    opacity: 0.85;
    pointer-events: none;
}

/* 右下の足あと */
.flow-section::after {
    content: "";
    position: absolute;
    right: -40px;
    bottom: -40px;
    width: 260px;
    height: 260px;
    background: url("../img/illust_foot.png") no-repeat center/contain;
    opacity: 0.85;
    pointer-events: none;
}
/* PC版（768px以上）の足あと調整 */
@media (min-width: 769px) {

    /* 左上の足あと */
    .flow-section::before {
        width: 340px;    /* ←大きさ */
        height: 340px;
        top: -20px;      /* ←見えるように内側へ */
        left: -20px;
    }

    /* 右下の足あと */
    .flow-section::after {
        width: 340px; 
        height: 340px;
        right: -10px;   /* ←ほぼ画面内 */
        bottom: -10px;  /* ←少しだけはみ出す */
    }
}

/* ============================
   スマホ（幅768px以下）調整
============================ */
@media (max-width: 768px) {

    /* 左上の足あと */
    .flow-section::before {
        width: 160px;       /* ←スマホでは小さめが自然 */
        height: 160px;
        top: -10px;         /* ←ほぼ画面内に見せる */
        left: -10px;
        opacity: 0.75;      /* ←スマホではやや控えめ */
    }

    /* 右下の足あと */
    .flow-section::after {
        width: 160px;
        height: 160px;
        right: -10px;       /* ←少しだけはみ出し */
        bottom: -10px;
        opacity: 0.75;
    }
}


.flow-section {
    position: relative;   /* ← 必須！！ */
}

/*--------------------------------
  SP（スマホ）
--------------------------------*/
@media screen and (max-width: 768px) {

  .section-title {
    font-size: 36px;
  }

  .business-row {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 30px;
  }

  .business-illust-left img,
  .business-illust-right img {
    width: 180px;
  }

  .business-text h3 {
    font-size: 30px;
  }
  .business-text .sub-list p {
    font-size: 22px;
  }

  .flow-steps {
    flex-direction: column;
    gap: 30px;
  }

  .contact-box {
    width: 90%;
  }

}


/* ===============================
   スマホ最適化（幅 768px 以下）
================================ */
@media screen and (max-width: 768px) {

  /* （1）セクションの余白をコンパクトに */
  .section-wrapper {
    padding: 40px 0;   /* ←デフォルト80px → 40pxへ */
  }

  .flow-section {
    padding: 50px 0;   /* ←ご利用の流れセクションの余白も削減 */
  }

  /* （2）事業案内の説明文を左揃えに */
  .business-desc {
    text-align: left !important;
    margin-left: 0;
    padding: 0 20px;   /* ←左右に少し余白だけ追加（読みやすく） */
  }

  /* （3）ご利用の流れ：縦並びの中央寄せ */
  .flow-steps {
    flex-direction: column;
    align-items: center;  /* ←中央揃え */
    gap: 25px;
  }

  .flow-box {
    width: 85%;          /* 横幅を少し広げる */
    max-width: 380px;    /* 大きすぎ防止 */
  }

  .flow-arrow {
    transform: rotate(90deg);  /* ←縦並びに合うよう矢印を縦向き */
    width: 30px;
  }

  /* 足あと位置を微調整（必要あれば調整可） */
  .flow-section::before {
    top: -20px;
    left: -10px;
    width: 150px;
    height: 150px;
  }
  .flow-section::after {
    bottom: -20px;
    right: -10px;
    width: 150px;
    height: 150px;
  }
}


/* ===============================
   タイトルがヘッダーに隠れないように
================================ */
@media screen and (max-width: 768px) {

  /* 事業案内のタイトルが隠れる問題 */
  .section-title {
    padding-top: 80px;   /* ← ヘッダー高さぶん余白を追加 */
    margin-top: 0;
  }

/* セクションの上下余白を小さくする */
  .section-wrapper {
    padding: 40px 0 50px;  /* 上40, 下50（好みで調整可） */
  }

  /* イラストの余白も調整 */
  .business-illust-left img,
  .business-illust-right img {
    margin: 0 auto 10px;
    width: 150px;
  }

}