@charset "UTF-8";
/*
  /asuracore/asset/css/layout/l-bg-gradation.css
  ブランド背景（グラデーション＋ノイズ＋曲線装飾）

  ヘッダーとmainをまとめて覆うラッパー。フッターは白背景のまま残す。
  フォーム・完了ページなど、着地ページ共通で使用する。
*/

/* bodyへ付与し、コンテンツが少なくてもフッターを最下部に固定する */
.l-bg-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: var(--white);
}

/* 背景は2層構造（::before=グラデーション画像 ／ ::after=曲線装飾SVG）。高さはコンテンツ量に追従する */
.l-bg-gradation {
  position: relative;
  z-index: 0;
  flex: 1 0 auto;
  overflow: hidden;

  /* ベース背景（グラデーション＋ノイズ） */
  &::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -20;
    background-image: url("/asuracore/asset/image/form/bg-form.webp");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;

    @media screen and (max-width: 840px) {
      background-image: url("/asuracore/asset/image/form/bg-form-sp.webp");
    }
  }

  /* 曲線装飾。右上から見切れる形で重ねる */
  &::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    z-index: -10;
    width: 1000px;
    max-width: 90%;
    aspect-ratio: 1769 / 2060;
    background-image: url("/asuracore/asset/image/form/deco-curve.svg");
    background-repeat: no-repeat;
    background-position: right top;
    background-size: contain;
    opacity: .1;
    pointer-events: none;

    @media screen and (max-width: 840px) {
      width: 450px;
      max-width: 120%;
    }
  }
}