/* =========================
 フロー
============================*/

.flow{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: calc(var(--s-val) * 5.6);
}

.step{
  text-align: center;
  width: calc(var(--s-val) * 13);
}

.step p {
  margin-bottom:calc(var(--s-val) * 0.7);
  color: #FAE0D9;
  font-weight: bold;
  height: 2.5em; /* ← 行数を揃える */
  display: flex;
  align-items: flex-end;
  justify-content: center;
  line-height: 1.2;
}

.circle{
  width: calc(var(--s-val) * 3);
  height: calc(var(--s-val) * 3);
  border-radius: 50%;
  background: #FAE0D9;
  color: var(--color-white);
  padding: calc(var(--s-val) * 0.2) calc(var(--s-val) * 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  font-weight: bold;
  position: relative;
}

/* アクティブ時 */
.step.active .circle {
  background: var(--color-orange02);
}

.step.active p {
  color: var(--color-orange02);
}

/* 線（左右に伸ばす） */
.circle::before,
.circle::after {
  content: "";
  position: absolute;
  top: 50%;
  width: calc(var(--s-val) * 8);
  height: 2px;
  background: #F2B1A0;
  transform: translateY(-50%);
}


.circle::before {
  right: 100%; 
  margin-right: calc(var(--s-val) * 1);
}

.circle::after {
  left: 100%;
  margin-left: calc(var(--s-val) * 1);
}

.step:first-child .circle::before {
  display: none;
}

.step:last-child .circle::after {
  display: none;
}

/* 完了 .done */
.step.done .circle {
  background: var(--color-orange02);
}

.step.done p {
  color: var(--color-orange02);
}

.step.active .circle::before {
  background: var(--color-orange02);
}

.step.done .circle::before,
.step.done .circle::after {
  background: var(--color-orange02);
}

/* =========================
 入力画面
============================*/

.review__form-wrap{
  max-width: 531px;
  margin-inline: auto;
}

.page-heading{
  font-size: calc(var(--s-val) * 3.2);
  font-weight: bold;
  color: var(--color-orange02);
  text-align: center;
  margin-bottom: calc(var(--s-val) * 4.5);
}

.review__description{
  font-weight: bold;
  text-align: center;
  margin-bottom: calc(var(--s-val) * 7.4);
}

.review__description-text:first-child{
  display: inline-block;
  font-size: calc(var(--s-val) * 2.4);
  color: var(--color-white);
  background: var(--color-orange02);
  padding-block: calc(var(--s-val) * 0.3);
  padding-inline: calc(var(--s-val) * 1.6) calc(var(--s-val) * 1.3);
  margin-bottom: calc(var(--s-val) * 1.3);
}

.review__description-text:last-child{
  font-size: calc(var(--s-val) * 1.8);
  line-height: 1.6;
  color: #2b2b2b;
}

.review-form__group{
  margin-bottom: calc(var(--s-val) * 6.8);
}

.review__form-text{
  font-size: calc(var(--s-val) * 2.5);
  font-weight: bold;
  position: relative;
  padding-left: var(--s-val);
  margin-bottom: calc(var(--s-val) * 1.8);
}

.review__form-text::before{
  content: "";
  display: block;
  width: 4px;
  height: 100%;
  border-radius: calc(var(--s-val) * 5);
  background-color: var(--color-orange02);
  background-size: contain;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}

.review-form__item{
  margin-bottom: calc(var(--s-val) * 2);
}

.review-form__title{
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: var(--s-val);
  margin-bottom: var(--s-val);
}

.contact-form__radio-btn{
  margin-bottom: var(--s-val);
}

.review-form__title-text{
  font-size: calc(var(--s-val) * 2);
}

.review-form__title-required{
  background-color: var(--color-orange02);
  padding: 0 calc(var(--s-val) * 0.9);
  color: var(--color-white);
  border-radius: calc(var(--s-val) * 0.9);
  font-size: calc(var(--s-val) * 1.3);
  display: inline-block;
}

.review-form__input-area input[type="text"],
.review-form__input-area textarea {
  font-size: calc(var(--s-val) * 1.6);
  padding: calc(var(--s-val) * 1.6) calc(var(--s-val) * 2.4) calc(var(--s-val) * 1.8);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
}

.review-form__input-area input[type="text"] {
  width: 70%;
  border: 1px  solid #9a9a9a;
  border-radius: calc(var(--s-val) * 0.5);
}

.review-form__input-area input::placeholder,
.review-form__input-area textarea::placeholder {
  color: #c3c3c3
}

.review-form__input-area input:focus {
  outline: none;              
  border: 2px solid var(--color-orange02); 
}

.textarea-wrapper {
  border: 1px solid #9a9a9a;
  border-radius: calc(var(--s-val) * 0.5);
  overflow: hidden;
}

.textarea-wrapper:has(textarea:focus) {
  border: 2px solid var(--color-orange02);
}

.review-form__input-area textarea {
  border: none;
  border-radius: 0;
  display: block;
  box-sizing: border-box;
  resize: vertical;
  width: 100%;
  outline: none;
}

.title input[type="text"]{
  width: 100%;
}





/* ラジオ本体を隠す */
.radio-item input[type="radio"] {
  display: none;
}

/* ラベル全体 */
.radio-item {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  margin-right:  calc(var(--s-val) * 2);
  font-size: calc(var(--s-val) * 1.6);
}

/* 外側の丸 */
.radio-custom {
  width: calc(var(--s-val) * 1.8);
  aspect-ratio: 1/1;
  border: 1px solid #9a9a9a;
  border-radius: 50%;
  margin-right: calc(var(--s-val) * 0.3);
  position: relative;
}

/* 選択時の中の丸 */
.radio-custom::after {
  content: "";
  width:  calc(var(--s-val) * 1.2);
  aspect-ratio: 1/1;
  background: var(--color-orange02);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: 0.2s;
}

/* チェックされたら表示 */
.radio-item input[type="radio"]:checked + .radio-custom::after {
  transform: translate(-50%, -50%) scale(1);
}

/* 星評価 */
.rating-stars span {
  cursor: pointer;
  display: inline-flex;
  gap: calc(var(--s-val) * 0.8);
}

.rating-stars svg{
  width: calc(var(--s-val) * 4.4);
  height: calc(var(--s-val) * 4.4);
}

.star-path {
  fill: #FFC8B9;
  transition: fill 0.2s;
}

.rating-stars span.active .star-path {
  fill: var(--color-orange02);
}


/* チェックリンク */
.review-submit__description p {
  margin: 0;
}
.review-submit__description br {
  display: none;
}
.review-submit {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.review-submit:first-child{
  margin-bottom: calc(var(--s-val) * 2.3);
}

.review-submit__agree {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--s-val) * 0.5);
  line-height: normal;
  cursor: pointer;
  font-size:calc(var(--s-val) * 1.6);
}

.review-submit__agree input[type="checkbox"] {
  margin: 0;
  flex-shrink: 0;
}
.review-submit__privacy-policy {
  display: inline-flex;
  align-items: center;
  line-height: normal;
  padding: 0;
  color: #7b7b7b;
}
.review-submit__agree input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: calc(var(--s-val) * 2);
  height: calc(var(--s-val) * 2);
  border: 1.5px solid #7b7b7b;
  border-radius: calc(var(--s-val) * 0.4);   
  background: var(--color-white);
  cursor: pointer;
  vertical-align: middle;
  position: relative;
}
.review-submit__agree input[type="checkbox"]:checked {
  border-color: #9a9a9a;
}
.review-submit__agree input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  bottom: calc(var(--s-val) * 0.4);
  left: calc(var(--s-val) * 0.7);
  width: calc(var(--s-val) * 0.95);
  height: calc(var(--s-val) * 1.9);
  border: solid var(--color-orange02);
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}


/* 確認ボタン */
.button-wrap{
  margin-top: calc(var(--s-val) * 3);
  display: flex;
  justify-content: center;
}
.button-wrap a{
  text-decoration: none;
}
.contact-submit__button p {
  display: contents;
}
.contact-submit__button .wpcf7-spinner {
  display: none;
}
.contact-submit__button {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.button{
  width: calc(var(--s-val) * 23.5);
  background-color: var(--color-white);
  border: 1px solid var(--color-orange02);
  box-shadow: 0 4px 4px rgba(229, 100, 65, 0.1);
  color: var(--color-orange02);
  font-size: calc(var(--s-val) * 2);
  padding: calc(var(--s-val) * 1.4) calc(var(--s-val) * 6.6);
  border-radius:  calc(var(--s-val) * 2.7);
  transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.15s ease;
  text-align: center;
}

/* active */
.button:not(:disabled):active {
  box-shadow: 0 2px 4px #FBC5C5;
  transform: translateY(1px);
}
.contact-submit__button::after{
  content: "";
  width: calc(var(--s-val) * 1.6);
  height: calc(var(--s-val) * 1.6);
  aspect-ratio: 1 / 1;
  background: url(../images/contact/button-arrow_orange.png) no-repeat;
  background-size: contain;
  position: absolute;
  top: 50%;
  right: calc(var(--s-val) * 2);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  pointer-events: none;
}

.form-error-msg{
  color: #DC3232;
  margin-top: var(--s-val);
}

/* =========================
 確認画面
============================*/
.contact-bg{
  background: url(../images/contact/review-bg.webp) no-repeat center top / cover;
  width: 100%;
}

.review--confirmation.page-width {
  max-width: calc(590px + var(--p-inline) * 2);
}


.review--input,.review--confirmation,
.review--complete{
  padding-block: calc(var(--s-val) * 19) calc(var(--s-val) * 13.5);
}

.page-heading__title{
  text-align: center;
  color: var(--color-orange02);
  font-size: calc(var(--s-val) * 3.6);
}

.review--confirmation .page-heading__title{
  margin-bottom: calc(var(--s-val) * 0.8);
}
.confirm__notice{
  text-align: center;
  margin-bottom: calc(var(--s-val) * 6);
  font-weight: bold;
}
/* 確認内容（入力内容） */
.confirmation{
  margin-bottom: calc(var(--s-val) * 5.5);
}
.confirmation .review__form-text{
  margin-bottom: calc(var(--s-val) * 2.8);
}
.confirmation__item{
  display: flex;
  align-items: stretch;
  --w-title: calc(var(--s-val) * 30);
  border-bottom: 1px solid rgb(0 0 0 / 50%);
}
.confirmation__item:first-of-type {
  border-top: 1px solid rgb(0 0 0 / 50%);
}

.confirmation__title, .confirmation__detail{
  padding: calc(var(--s-val) * 2.5) calc(var(--s-val) * 4.6);
}
.confirmation__title{
  width: 50%;
  font-weight: bold;
  font-size: calc(var(--s-val) * 2);
}
.confirmation__detail{
  width: 50%;
  padding-left: calc(var(--s-val) * 6.5);
}
.confirmation:first-child .confirmation__detail{
  font-weight: bold;
  font-size: calc(var(--s-val) * 2);
}
.confirmation__item.review {
  --w-title: 100%;
  display: block;
  padding: calc(var(--s-val) * 2.3) calc(var(--s-val) * 2);
}
.review .confirmation__title, .review .confirmation__detail {
  padding: 0;
}
.review .confirmation__title {
  margin-bottom: calc(var(--s-val) * 0.6);
  line-height: 1.5;
}

.review .confirmation__detail {
  width: 100%;
}
/* textarea 行だけ */
.confirmation__item--textarea .confirmation__title {
  flex-shrink: 0;
}

.confirmation__item--textarea .confirmation__detail {
  flex: 1;
  word-break: break-word;
  white-space: pre-wrap;
}

.rating-stars--readonly {
  pointer-events: none;
}

.confirmation__item--rating {
  align-items: center;
}

.confirmation__item--rating .confirmation__title {
  padding: calc(var(--s-val) * 3.5) calc(var(--s-val) * 2.5) calc(var(--s-val) * 3.5) calc(var(--s-val) * 4.6);
  display: inline-block;
}

.confirmation__item--rating .rating-stars {
  width: 50%;
  display: flex;
  justify-content: center;
}

@media screen and (max-width: 768px){
  .review__description-text:first-child{
    display: block;
  }
  
  .contact-bg{
      background: none;
  }

  .review__form-wrap {
    max-width: 100%;
  }
  
  .contact--confirmation,
  .review--complete {
      padding-block: calc(var(--s-val) * 15) calc(var(--s-val) * 11);
  }
  .confirmation__item {
      --w-title: 100%;
      display: block;
      padding: calc(var(--s-val) * 2.3) calc(var(--s-val) * 2);
  }
  .confirmation__title, .confirmation__detail,
  .confirmation__item .rating-stars {
      padding: 0;
  }
  .confirmation__title {
      margin-bottom: calc(var(--s-val) * 0.6);
      line-height: 1.5;
      width: var(--w-title);
  }
  
  .confirmation__detail {
      width: 100%;
  }

  .confirmation__item--rating {
    align-items: flex-start;
  }
  .confirmation__item--rating .confirmation__title {
    padding: 0;
    margin-bottom: calc(var(--s-val) * 0.6);
  }

  .confirmation__item--rating .rating-stars {
    width: 100%;
    justify-content: flex-start
  }

  .confirmation:first-child  .confirmation__detail {
    font-size: calc(var(--s-val) * 1.8);
  }

  .page-heading{
    margin-bottom: calc(var(--s-val) * 4);
  }
}


.grecaptcha-text{
  margin-top: calc(var(--s-val) * 2);
  font-size: calc(var(--s-val) * 1.2);
  color: rgb(0 0 0 / 50%);
  text-align: center;
}
.grecaptcha-text a{
  color: rgb(0 0 0 / 50%);
}
.hover-opacity {
  transition: opacity 0.3s ease;
}
.hover-opacity:hover{
  opacity: 0.8;
}






/* =========================
送信完了画面
============================*/
.review--complete.page-width{
  max-width: calc(800px + var(--p-inline) * 2);
}

.review--complete .page-heading__title{
  margin-bottom: calc(var(--s-val) * 3.3);
}
.complete__description{
  text-align: center;
  margin-bottom: calc(var(--s-val) * 2.3);
  line-height: 1.7;
}

.review--complete .button{
  color: var(--color-white);
  background-color: var(--color-orange02);
}

.review--complete .button-wrap{
  margin-top: calc(var(--s-val) * 5.6);
}

.review--complete .contact-submit__button::after{
  content: "";
  width: calc(var(--s-val) * 1.6);
  height: calc(var(--s-val) * 1.6);
  aspect-ratio: 1 / 1;
  background: url(../images/contact/button-arrow.png) no-repeat;
  background-size: contain;
  position: absolute;
  top: 50%;
  right: calc(var(--s-val) * 2);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  pointer-events: none;
}

@media screen and (max-width: 768px){
  .page-heading__title {
      font-size: calc(var(--s-val) * 2.8);
  }
  .complete__description{
      text-align: left;
      margin-bottom: calc(var(--s-val) * 3);
  }
}