@charset "UTF-8";
/* CSS Document */
/* プロセス全体 */
.process {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}
.step {
  display: flex;
  align-items: center;
}
.step + .step {
  position: relative;
}
.step + .step::before {
  content: "・・・▶";
  position: relative;
  top: -1px;
  left: 0;
  margin-right: 4px;
  margin-left: -4px;
  color: #666;
  font-weight: 700;
  letter-spacing: -0.1rem
}
.pill {
  width: 50px;
  height: 200px;
  border-radius: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: .12em;
  writing-mode: vertical-rl;
  text-orientation: upright;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .08);
}
.pink {
  background: #ff96ab;
} /* フォーム/TEL */
.orange {
  background: #ff9a1f;
}
.green {
  background: #9BC200;
}
.leaf {
  background: #6bb07c;
}
.sky {
  background: #43b9ec;
}
.blue {
  background: #6b8fcb;
}
.purple {
  background: #9470b5;
}
.first-step-frame {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px;
  border: 2px solid #f7b5c9;
  border-radius: 28px;
  background: #fff;
}
.first-step .pill {
  height: 240px;
} /* 1個目は少し背を高く */
.or {
  color: #666;
  font-weight: 700;
  letter-spacing: .2em;
}
.container p {
  line-height: 1.9;
}

@media (max-width: 1080px) {
  .process {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 22px; /* 間隔はお好みで */
  }
  .step {
    flex-direction: column;
    align-items: center;
  }
  /* ← これがポイント：PCの矢印をそのまま回転して中央に置く */
  .step + .step::before {
    content: "・・・▶";
    display: block;
    top: -10px;
    left: 0;
    margin-right: 4px;
    margin-left: -4px;
    text-align: center;
    font-size: 14px;
    letter-spacing: -0.25rem;
    transform: rotate(90deg);
    transform-origin: center center;
    margin: 4px 0 8px;
  }
  .pill {
    width: 240px;
    height: 50px;
    border-radius: 25px;
    font-size: 1.05rem;
    writing-mode: initial;
    text-orientation: mixed;
  }
  .first-step-frame {
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border-width: 2px;
  }
  .first-step .pill {
    width: 260px;
    height: 50px;
  }
}
.voices {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.voices.re {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
}
.voices .img {
  position: relative;
  width: 66.67%;
  padding-top: 44.44%;
  border-radius: 15px;
  overflow: hidden;
  margin: 10px auto !important;
}
.fukidashi-l, .fukidashi-r {
  position: relative;
  border-radius: 10px;
  padding: 20px 20px 50px 20px;
  width: 50%;
  background: #FFCB8E;
}
.voices h4 {
  font-size: 26px !important;
  letter-spacing: 0.01em;
}
.voices p {
  font-size: 19px !important;
  letter-spacing: -0.025em;
  line-height: 1.4;
}
.fukidashi-l {
  margin: auto 0 auto -60px;
}
.fukidashi-r {
  margin: auto -60px auto 0;
}
.fukidashi-l:before {
  content: "";
  position: absolute;
  top: 15%;
  left: -36px;
  margin-top: 10px;
  border: 20px solid transparent;
  border-right: 20px solid #FFCB8E;
  z-index: 200;
}
.fukidashi-r:after {
  content: "";
  position: absolute;
  right: -36px;
  margin-top: -210px;
  border: 20px solid transparent;
  border-left: 20px solid #FFCB8E;
  z-index: 200;
}
.fukidashi-l h4, .fukidashi-r h4 {
  font-family: 'APJapanesefont', sans-serif;
  font-size: 22px;
  line-height: 1 !important;
}
.fukidashi-l p, .fukidashi-r p {
  font-family: 'APJapanesefont', sans-serif;
  font-size: 18px;
  line-height: 1.35 !important;
}
.fukidashi-l p.staffinfo, .fukidashi-r p.staffinfo {
  position: absolute;
  right: 15px;
  bottom: 15px;
  font-weight: normal;
  margin: 0;
  text-align: right;
}
@media (max-width: 979px) {
  .voices {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 0 auto 25px;
  }
  .voices.re {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .voices .img {
    position: relative;
    width: 90%;
    padding-top: 60%;
    border-radius: 15px;
    overflow: hidden;
    margin: 0 auto 20px !important;
  }
  .fukidashi-l, .fukidashi-r {
    position: relative;
    border-radius: 10px;
    padding: 20px 20px 50px 20px;
    width: 75%;
    background: #FFCB8E;
    margin: -50px auto 10px;
  }
  /* ★ PC版矢印の影響を確実に消すため、まず非表示にする */
  .fukidashi-l:before, .fukidashi-r:after {
    all: unset; /* ←ここが重要！すべての既存プロパティをリセット */
    content: "";
    display: block;
    position: absolute;
    top: -18px; /* 微調整可能（-17〜-20px） */
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 20px solid #FFCB8E;
    z-index: 200;
  }
}