@charset "utf-8";

/* お問い合わせページ ページ全体レイアウト
   （フォーム内部のスタイルは mailform.css 側） */

/*=================================================================
  ページタイトル (共通 .page-title を継承。個別調整のみ)
=================================================================*/
.page-title-contact {
  height: 445px;
}

.page-title-contact .page-title-bg img {
  object-position: center center;
}
.page-title-contact .page-title-gradient {
  display: none;
}

/*=================================================================
  お問い合わせフォーム セクション
=================================================================*/
.mail {
  padding: 90px 0 100px;
  background: var(--color-white);
}
.mail .h2-outer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 20px;
}
.mail h2 {
  font-size: 3.2rem;
  font-weight: 700;
  color: #1C5E33;
  letter-spacing: 0.05em;
}
.mail .h2-outer .eng {
  font-family: "Damion", cursive;
  font-weight: 400;
  display: inline-block;
  transform: rotate(-5deg);
  transform-origin: center;
  font-size: 2.4rem;
  color: #FE8BA7;
}
.mail .lead {
  text-align: center;
  font-size: 1.4rem;
  line-height: 1.9;
  color: #231815;
  margin-bottom: 50px;
}
.content-narrow {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
}

/*=================================================================
  お電話でのお問い合わせ セクション
  実測: 横長バナー（左右に作業員写真、中央に白ボタン）
=================================================================*/
.tel {
  padding: 190px 0 200px;
  background:
    url('../images/border_back.png') no-repeat top center / 100% auto,
    linear-gradient(#EFF7EC, #EFF7EC) no-repeat 0 calc(100vw / 3 - var(--wave-fill-overlap)) / 100% calc(100% + var(--wave-fill-overlap));
  position: relative;
}
.tel .h2-outer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 20px;
}
.tel h2 {
  font-size: 3.2rem;
  font-weight: 700;
  color: #1C5E33;
  letter-spacing: 0.05em;
}
.tel .h2-outer .eng {
  font-family: "Damion", cursive;
  font-weight: 400;
  display: inline-block;
  transform: rotate(-5deg);
  transform-origin: center;
  font-size: 2.4rem;
  color: #FE8BA7;
}
.tel .lead {
  text-align: center;
  font-size: 1.4rem;
  color: #231815;
  margin-bottom: 35px;
  line-height: 1.8;
}

/* --- 横長バナー --- */
.tel-banner {
  position: relative;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  aspect-ratio: 2160 / 560;
  border-radius: 20px;
  overflow: hidden;
}
.tel-banner-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.tel-banner-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- 中央の白いボタン --- */
.tel-card {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 20px;
  background: var(--color-white);
  border-radius: 15px;
  padding: 25px 45px;
  text-decoration: none;
  color: #231815;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
  transition: opacity 0.3s ease;
  min-width: 460px;
  justify-content: center;
}
.tel-card:hover { opacity: 0.9; }
.tel-card .icon {
  flex: 0 0 auto;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tel-card .icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.tel-card .body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
/* 電話番号: 実測 上向きサンセリフ Bold (Cormorant italic ではない) */
.tel-card .num {
  font-family: "Zen Maru Gothic", "Noto Sans JP", sans-serif;
  font-weight: 900;
  font-size: 3.4rem;
  color: #1C5E33;
  letter-spacing: 0.1em;
  line-height: 1.1;
  font-feature-settings: "palt";
}
.tel-card .hours {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.3rem;
  font-weight: 500;
  color: #231815;
  letter-spacing: 0.05em;
}

/*=================================================================
  お問い合わせページはページ末尾に footer-contact を出さない
=================================================================*/
.footer-contact-page .footer-contact { display: none; }


/*=================================================================
  SP 対応（≤ 768px）
=================================================================*/
@media screen and (max-width: 768px) {

.page-title-contact { height: 220px; }
.page-title-contact .h2-outer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}

.page-title-contact .h2-outer h2 {
  font-size: 32px;
  line-height: 1.2;
}
.page-title-contact .h2-outer .eng {
  display: block;
  margin: 0;
  font-size: 24px;
  line-height: 1;
}
.page-title-contact .lead,
.mail .lead,
.tel .lead {
  text-align: left;
}

.mail {
  padding: 50px 15px 60px;
}
.mail .h2-outer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  text-align: center;
  margin-bottom: 12px;
}
.mail h2 {
  font-size: 26px;
  display: block;
  margin: 0;
}
.mail .h2-outer .eng {
  font-size: 19px;
  display: block;
  margin: 0;
}
.mail .lead {
  font-size: 1.25rem;
  margin-bottom: 30px;
}
.content-narrow { padding: 0 5px; }

.tel {
  padding: 110px 15px 120px;
  background:
    url('../images/border_back.png') no-repeat top center / 100% auto,
    linear-gradient(#EFF7EC, #EFF7EC) no-repeat 0 calc(100vw / 3 - var(--wave-fill-overlap)) / 100% calc(100% + var(--wave-fill-overlap));
}
.tel .h2-outer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  text-align: center;
  margin-bottom: 12px;
}
.tel h2 {
  font-size: 26px;
  display: block;
  margin: 0;
}
.tel .h2-outer .eng {
  font-size: 19px;
  display: block;
  margin: 0;
}
.tel .lead {
  font-size: 1.25rem;
  margin-bottom: 25px;
}
.tel-banner {
  aspect-ratio: auto;
  height: 220px;
  min-height: 0;
}
.tel-card {
  min-width: 0;
  width: calc(100% - 30px);
  max-width: 360px;
  padding: 15px 20px;
  gap: 12px;
}
.tel-card .num {
  font-size: 30px;
  white-space: nowrap;
  position: relative;
  left: -5px;
}
.tel-card .hours { font-size: 12px; }
.tel-card .icon { width: 67.5px; height: 67.5px; }

}

/* 1200px基準の各コンテンツ寸法を中間幅で比例縮小する。 */
@media screen and (min-width: 769px) and (max-width: 1200px) {
  .page-title-contact { height: 37.0833vw; }
  .page-title-contact h2 { font-size: 3.3333vw; }
  .mail { padding: 7.5vw 0 8.3333vw; }
  .mail .h2-outer, .tel .h2-outer { gap: 1.6667vw; }
  .mail h2, .tel h2 { font-size: 2.6667vw; }
  .mail .lead, .tel .lead { font-size: calc(12px + 0.1667vw); }
  .tel { padding: 15.8333vw 0 16.6667vw; }
  .tel-banner { max-width: 90vw; }
  .tel-card { gap: 1.6667vw; padding: 2.0833vw 3.75vw; min-width: 38.3333vw; }
  .tel-card .icon { width: 5vw; height: 5vw; }
}