@charset "utf-8";
/**
 * 古めのスマホ・WebView向けフォールバック
 * - clamp / min / max は main.css 側で固定値を先行指定（未対応ブラウザは2行目を無視）
 * - ここでは aspect-ratio / gap / inset / dvh と、feature detect クラスを補強
 */

/* ---- html.no-*（js/legacy-support.js）---- */
html.no-clamp .mainimage-text {
  font-size: 4.8rem;
}

html.no-clamp .mainimage-title {
  font-size: 1em;
}

html.no-dvh .mainimage,
html.no-dvh .mainimage-wrap {
  height: 100vh;
  min-height: 100vh;
}

html.no-aspect-ratio .information-card {
  height: 36rem;
}

html.no-aspect-ratio .mainimage-access {
  width: 14rem;
  height: 14rem;
}

html.no-aspect-ratio .guide-card {
  min-height: 28rem;
}

html.no-gap .access-sns > * + *,
html.no-gap .access-meta > * + *,
html.no-gap .greeting-btns > * + * {
  margin-left: 1.6rem;
}

/* aspect-ratio 非対応 */
@supports not (aspect-ratio: 1 / 1) {
  .information-card {
    height: 36rem;
  }

  .mainimage-access {
    width: 14rem;
    height: 14rem;
  }

  .guide-card {
    min-height: 28rem;
  }

  .point-visual {
    position: relative;
    height: 0;
    padding-bottom: 75%;
  }

  .point-visual img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

/* flex/grid gap 非対応（古い WebKit） */
@supports not (gap: 1rem) {
  .access-sns > * + *,
  .access-meta > * + *,
  .greeting-btns > * + * {
    margin-left: 1.6rem;
  }
}

/* inset 非対応 */
@supports not (inset: 0) {
  .mainimage-inner,
  .mainimage-bg-swiper,
  .mainimage::before,
  .greeting-section-bg,
  .point-section-bg,
  .point-section-bg::after,
  .greeting-section-bg::after,
  .swiper-mainimage .swiper-slide {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
}

/* dvh / svh 非対応時の画面高（main.css の vh 先行指定を補強） */
@supports not (height: 100dvh) {
  .mainimage,
  .mainimage-wrap {
    height: 100vh;
    min-height: 100vh;
  }
}

/* セーフエリア（対応端末のみ） */
@supports (padding: env(safe-area-inset-top)) {
  .site-header,
  header {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}