@charset "utf-8";

/* ==========================
   施工の流れ
========================== */
.section--flow {
  background: #fffdf5;
}
.flow {
  position: relative;
}
.flow__step {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 30px;
  margin-bottom: 100px;
}
/* ▼ 矢印 */
.flow__step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -60px; /* 好きに調整できる */
  width: 0;
  height: 0;
  /* ▼ 三角形（下向き） */
  border-left: 32px solid transparent; /* ← 横幅 */
  border-right: 32px solid transparent; /* ← 横幅 */
  border-top: 32px solid #e6c94f; /* ← 色＆高さ */
  /* OPTIONAL: 影（必要なら） */
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.15));
}
/* STEP：左側ラベル */
.flow__label {
  flex: 0 0 130px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 0 0 85px;
}
.flow__step-num {
  font-size: var(--font-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 5px;
  color: #8b7f43;
}
.flow__step-no {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  font-family: "Montserrat", "Noto Sans JP", sans-serif;
  font-size: 26px;
  font-weight: 700;
  color: #fff;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.12);
}
/* STEP：右側カード */
.flow__body {
  position: relative;
  flex: 1;
  background: #fff;
  border-radius: 16px;
  padding: 20px 22px;
  box-shadow: 0 8px 20px rgba(229, 192, 73, 0.18);
  overflow: hidden;
}
/* 右端の斜めライン */
.flow__body::after {
  content: "";
  position: absolute;
  top: -20%;
  right: -80px;
  width: 180px;
  height: 140%;
  transform: rotate(14deg);
  opacity: 0.13;
}
/* STEP：テキスト + 写真 */
.flow__inner {
  display: flex;
  gap: 18px;
  align-items: stretch;
}
.flow__text-area {
  flex: 1 1 0;
}
.flow__photo-area {
  flex: 0 0 200px;
  border-radius: 12px;
  overflow: hidden;
}
.flow__photo-area img {
  width: 100%;
  height: 100%;
  max-height: 180px;
  object-fit: cover;
}
.flow__heading {
  font-family: "Zen Old Mincho", "Noto Sans JP", serif;
  font-size: var(--font-m);
  margin-bottom: 8px;
  font-weight: bold;
  color: #4a3d19;
}
.flow__text {
  font-size: var(--font-s);
  line-height: 1.9;
  color: #555;
}
/* STEP カラー */
.flow__step--01 .flow__step-no {
  background: linear-gradient(135deg, #ffd95e, #f2b600);
}
.flow__step--01 .flow__body::after {
  background: linear-gradient(135deg, #ffd95e, #f2b600);
}
.flow__step--02 .flow__step-no {
  background: linear-gradient(135deg, #ffdd8b, #f4b67f);
}
.flow__step--02 .flow__body::after {
  background: linear-gradient(135deg, #ffdd8b, #f4b67f);
}
.flow__step--03 .flow__step-no {
  background: linear-gradient(135deg, #ffe8a9, #f1c55e);
}
.flow__step--03 .flow__body::after {
  background: linear-gradient(135deg, #ffe8a9, #f1c55e);
}
.flow__step--04 .flow__step-no {
  background: linear-gradient(135deg, #ffd57b, #f5a74b);
}
.flow__step--04 .flow__body::after {
  background: linear-gradient(135deg, #ffd57b, #f5a74b);
}
.flow__step--05 .flow__step-no {
  background: linear-gradient(135deg, #ffe46e, #e8b833);
}
.flow__step--05 .flow__body::after {
  background: linear-gradient(135deg, #ffe46e, #e8b833);
}
.flow__step--06 .flow__step-no {
  background: linear-gradient(135deg, #ffe9a0, #f3c164);
}
.flow__step--06 .flow__body::after {
  background: linear-gradient(135deg, #ffe9a0, #f3c164);
}
/* ボタン */
.flow__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}
.flow-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 350px;
  min-width: 160px;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 13px;
  transition: 0.2s;
  border: 1px solid transparent;
}
.flow-btn--tel {
  background: #ffdf6b;
  border-color: #f0c636;
  color: #4a3900;
}
.flow-btn--tel:hover {
  background: #f7cf42;
}
.flow-btn--mail {
  background: #fff;
  border-color: #f0c636;
  color: #8b7f43;
}
.flow-btn--mail:hover {
  background: #fff7d2;
}
/* ==========================
   レスポンシブ
========================== */
@media screen and (max-width: 900px) {
  .flow__step {
    flex-direction: column;
    padding-left: 0; /* 左の余白をリセット */
    margin-bottom: 130px;
  }
  .flow__step:not(:last-child)::after {
    bottom: -85px;
    transform: translateX(-50%);
    font-size: 50px;
  }
  .flow__step:last-of-type {
    margin-bottom: 0;
  }
  /* タブはカードの左上にかぶせる */
  .flow__label {
    position: absolute;
    top: -68px;
    left: -30px;
    z-index: 5; /* カードより上に表示 */
    flex-direction: column;
    padding: 0;
  }
  .flow__body {
    padding: 42px 14px 16px; /* ← タブ分の余白を増やす（重要） */
  }
  .flow__step-num {
    margin-bottom: 0;
    padding: 2px 6px;
    background: rgba(255, 255, 255, 0.8); /* 任意：少し見やすく */
    border-radius: 0 0 4px 0;
  }
  .flow__step-no {
    width: 75px;
    height: 75px;
    padding: 6px 10px;
    border-radius: 0 0 8px 0; /* 左上角にぴったり合う形 */
    background: #ffeb8c;
    color: #4a3900;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  }
  .flow__inner {
    flex-direction: column;
  }
  .flow__photo-area {
    flex: initial;
    max-height: none !important;
  }
  .flow__photo-area img {
    max-height: none;
  }
  .flow__buttons {
    justify-content: center;
  }
  .flow-btn {
    width: 100%;
  }
}

@media screen and (max-width: 540px) {
  .flow__label {
    left: -15px;
  }
  .flow__step-no {
    width: 60px;
    height: 60px;
  }
}