/* パンくずリスト表示 */
.breadcrumb {
  margin-bottom: 50px;
  font-size: 16px;
}

.breadcrumb a {
  text-decoration: none;
  color: #333;
}

.breadcrumb span {
  color: #333;
}

/* --- Contactフォーム全体の幅・余白 --- */
.contact {
  margin-top: 50px;
  margin: 40px auto;
  padding: 40px 30px;
}

.contact .container {
  background-color: #fff;
}

.contact h2 {
  margin-bottom: 50px;
  margin-left: 0;
}

.contact h2::after {
  content: "お問い合わせ";
  right: -67px;
}

p.contact-information-text {
  margin-bottom: 165px;
}

.contact h3 {
  position: relative;
  margin-bottom: 60px;
  font-size: 23px;
}

.contact h3::before {
  content: "";
  position: absolute;
  bottom: -7px;
  left: 0;
  width: 55px;
  height: 2px;
  background-color: #204862;
}

p.contact-announcement {
  margin-top: 75px;
  margin-bottom: 75px;
}

/* --- Contact Form 7の項目全体 --- */
.contact .wpcf7-form label {
  margin-bottom: 18px;
  font-size: 1.04rem;
  color: #353535;
}

.contact-form-label {
  display: flex;
  align-items: center;
  width: 100%;
}

.contact-form-head {
  width: 20%;
}

.contact-form-decoration {
  width: 14%;
}

.contact-form-decoration p {
  display: inline-block;
  padding: 6px 12px;
  color: #efefef;
  background-color: #B69D79;
}

.contact-form-input {
  width: 61%;
}

.contact .wpcf7-form .required {
  color: #b88b1a;
  margin-left: 4px;
  font-size: 0.93em;
}

.contact .wpcf7-form input[type="text"],
.contact .wpcf7-form input[type="email"],
.contact .wpcf7-form input[type="tel"],
.contact .wpcf7-form textarea,
.contact .wpcf7-form select {
  width: 100%;
  font-size: 1.05rem;
  border: 0.25px solid rgba(93, 134, 161, 0.3);
  padding: 13px 11px;
  margin-top: 8px;
  margin-bottom: 6px;
  box-sizing: border-box;
}

/* --- テキストエリアの高さ調整 --- */
.contact .wpcf7-form textarea {
  min-height: 110px;
  resize: vertical;
}

.contact-border {
  width: 80%;
  margin: 40px auto 25px;
  border-bottom: 1px dotted rgba(204, 204, 204, 0.8);
}

.form-button {
  position: relative;
  display: block;
  margin: 0 auto;
  width: 500px;
  /* height: 215px; */
  overflow: hidden;
}

.form-button::before {
  content: "";
  position: absolute;
  bottom: -50%;
  left: -103%;
  width: 300px;
  height: 200px;
  background-image: linear-gradient(to right, transparent, #fff);
  opacity: 1;
  transform: rotate(55deg);
}

/* 親要素にホバーした時の、擬似要素のスタイル */
.form-button:hover::before {
  /* ★ホバー時にだけアニメーション設定を適用する */
  transition: transform 0.3s linear;
  /* ★要素を1.2倍に拡大 */
  transform: translateX(1600px) scale(1.2) rotate(55deg);
  opacity: 0.9;
}

/* --- 送信ボタンのグラデーション＆デザイン --- */
.contact .wpcf7-submit {
  width: 100%;
  height: auto;
  max-width: 100%;
  margin: 135px auto 0;
  font-size: 29px;
  color: #efefef;
  background: conic-gradient(from 88.66deg at 69.09% 58.7%, #B69D79 -10.8deg, #614620 144deg, #E6D0B0 288deg, #B69D79 349.2deg, #614620 504deg);
  border: none;
  border-radius: 45px;
  padding: 15px 0;
  cursor: pointer;
  letter-spacing: 0.08em;
}





/* --- フォーム内のエラーメッセージ調整 --- */
.contact .wpcf7-not-valid-tip {
  color: #d8000c;
  font-size: 0.96rem;
  margin-top: 2px;
}

.contact .wpcf7-response-output {
  margin-top: 24px;
  font-size: 1.06rem;
}

/* ------------------------
   レスポンシブ対応 追加CSS
------------------------- */
/* 1. 画面幅 1024px以下（タブレット） */
@media (max-width: 1024px) {
  .contact h2::before {
    display: none;
  }
}



/* 2. 画面幅 767px以下（スマホ） */
@media (max-width: 767px) {
  .contact {
    padding: 0 7px;
  }

  .contact h2 {
    margin: 0 auto 40px 1%;
    padding-right: 35px;
  }

  p.contact-information-text {
    margin-bottom: 65px;
    font-size: 18px;
  }

  .contact h3::before {
    left: 80px;
  }

  .contact-border {
    width: 90%;
  }

  p.contact-announcement {
    margin: 50px auto;
    font-size: 18px;
  }

  .contact-form-label {
    flex-direction: column;
  }

  .contact-form-head {
    display: flex;
    justify-content: start;
    align-items: center;
    width: 90%;
    font-size: 19px;
  }



  .contact-form-decoration {
    width: 30%;
    margin-left: 20px;
    font-size: 14px;
  }

  .contact-form-input {
    width: 90%;
  }

  .form-button {
    width: 100%;
  }

  .contact .wpcf7-submit {
    display: block;
    width: 80%;
    font-size: 20px;
    margin-top: 55px;
    padding: 13px 0;
  }

}