@charset "utf-8";

/* JSやOptimize未読込時は従来バナーのみ。非表示側は操作対象にも含めない。 */
[data-home-inquiry-original][hidden],
[data-home-inquiry-variant][hidden] {
  display: none !important;
}

/* TOP専用。共通CTA・式場詳細のスタイルには依存しない。 */
.home-inquiry-banner {
  padding: 30px 0;
  background: #0f8f3e;
}

.home-inquiry-banner__inner {
  position: relative;
  width: 94%;
  max-width: 1200px;
  margin: 0 auto;
}

.home-inquiry-banner picture,
.home-inquiry-banner img {
  display: block;
  width: 100%;
}

.home-inquiry-banner img {
  height: auto;
}

.home-inquiry-banner__background {
  aspect-ratio: 2048 / 404;
}

/* 画像内の電話番号とボタン用余白に合わせた比率。 */
.home-inquiry-banner__telephone {
  position: absolute;
  top: 16%;
  left: 32.5%;
  width: 35%;
  height: 75%;
  border-radius: 8px;
}

.home-inquiry-banner__actions {
  position: absolute;
  top: 11.814346%;
  right: 1.666667%;
  bottom: 10.548523%;
  left: 71.666667%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.home-inquiry-banner__action {
  display: block;
  width: 100%;
  border-radius: 8px;
}

.home-inquiry-banner a:focus-visible {
  outline: 3px solid #172d64;
  outline-offset: 3px;
}

.home-inquiry-banner__action:hover {
  opacity: 0.8;
}

@media (max-width: 767px) {
  .home-inquiry-banner {
    padding: 0;
    background: #fff;
  }

  .home-inquiry-banner__inner {
    width: 100%;
  }

  .home-inquiry-banner__background {
    aspect-ratio: 1221 / 953;
  }

  .home-inquiry-banner__telephone {
    top: 41.5%;
    left: 28.7%;
    width: 67.6%;
    height: 17%;
  }

  .home-inquiry-banner__actions {
    top: 66.736621%;
    right: 2.948403%;
    bottom: auto;
    left: 2.948403%;
    flex-direction: row;
  }

  .home-inquiry-banner__action {
    width: 48.998259%;
  }
}