@charset "UTF-8";
/*
  /asuracore/asset/css/page/p-top.css
  TOPページ（/asuracore/）固有のスタイル

  841px以上は1440pxのデザインを基準に、幅へ連動して全体を縮小する。
  文字サイズ・余白は clamp() で最小値を持たせ、縮みすぎないようにしている。
  840px以下はSPレイアウト（1カラム）へ切り替える。
*/

/* ファーストビュー。DOM順はSPの並び、PCは grid-template-areas で2カラムへ組み替える */
.p-top-fv {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "title image"
    "lead  image";
  gap: clamp(20px, 2.5vw, 36px) clamp(20px, 2.2vw, 32px);

  /* 左カラムは上詰め、画像は2行にまたがり下端で揃える */
  @media screen and (min-width: 841px) {
    grid-template-rows: auto 1fr;
    align-items: start;

    .p-top-fv__image-wrap {
      align-self: end;
    }
  }

  @media screen and (max-width: 840px) {
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "image"
      "lead";
    gap: 32px;
    align-items: start;
    max-width: 350px;
    margin: 0 auto;
  }
}
.p-top-fv__section {
  padding-top: 50px;
}
.p-top-fv__lead {
  grid-area: lead;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(20px, 2.5vw, 36px);

  @media screen and (max-width: 840px) {
    gap: 24px;
  }
}

/* 1440pxで58px、841pxで34pxまで縮む */
.p-top-fv__title {
  grid-area: title;

  /* 画像を重ねたとき、見出しが隠れないよう前面に置く */
  position: relative;
  z-index: 2;
  font-size: clamp(34px, 4.03vw, 58px);
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
  letter-spacing: 5px;
  color: var(--navy);

  @media screen and (max-width: 840px) {
    font-size: 31px;
    letter-spacing: 2px;
  }
}

/* 1440pxで20px、841pxで16pxまで縮む */
.p-top-fv__text {
  font-size: clamp(16px, 1.39vw, 20px);
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.05em;
  color: var(--navy);

  @media screen and (max-width: 840px) {
    font-size: 18px;
  }
}

/* CTA。吹き出しをボタン上端へ重ねる分の上余白を確保する */
.p-top-fv__cta {
  position: relative;
  width: 100%;
  max-width: 362px;
  padding: 17px 0 0;

  @media screen and (max-width: 840px) {
    max-width: 350px;
    padding: 16px 0 0;
  }
}

/* 吹き出し。ホバーを揃えるため a の内側に置き、ボタン上端の外へ出す */
.p-top-fv-balloon {
  position: absolute;
  bottom: 100%;
  left: 50%;
  z-index: 10;
  padding: 4px 20px;
  border: 1px solid var(--magenta);
  border-radius: 20px;
  background-color: var(--white);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.05em;
  color: var(--navy);
  white-space: nowrap;
  transition:
    200ms ease background-color,
    200ms ease color;

  /* ボタン上端への重なり（17px）を保つため下へ戻す */
  transform: translate(-50%, 15px);

  @media screen and (max-width: 840px) {
    padding: 3px 16px;
    font-size: 13px;
    transform: translate(-50%, 14px);
    bottom: unset;
    top: -34px;
  }

  &::before,
  &::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    border-style: solid;
  }

  /* 枠線側（外） */
  &::before {
    border-width: 8px 8px 0 8px;
    border-color: var(--magenta) transparent transparent transparent;
    transform: translate(-50%, 0);
  }

  /* 塗り側（内）。枠線の分だけ上へ戻す */
  &::after {
    border-width: 10px 6px 0 6px;
    border-color: var(--white) transparent transparent transparent;
    transition: 200ms ease border-top-color;
    transform: translate(-50%, -2px);
  }
}

/* 強調箇所。反転時に差し替えるためUtility（!important）を使わない */
.p-top-fv-balloon__em {
  color: var(--magenta);
  transition: 200ms ease color;
}

/* 吹き出しの反転。ボタンと発火を揃えるため起点は .c-button に置く */
.c-button:hover .p-top-fv-balloon {
  background-color: var(--magenta);
  color: var(--white);

  /* 三角の塗り側も追従させる */
  &::after {
    border-top-color: var(--magenta);
  }

  .p-top-fv-balloon__em {
    color: var(--white);
  }
}

/* メインビジュアル */
.p-top-fv__image-wrap {
  grid-area: image;
  position: relative;
  z-index: 1;
  width: calc(100% + clamp(40px, 6.94vw, 75px));
  margin-left: calc(clamp(40px, 6.94vw, 80px) * -1);

  /* SPは中央へ置くため、はみ出しを打ち消す */
  @media screen and (max-width: 840px) {
    align-self: center;
    justify-self: center;
  }

  @media screen and (max-width: 1000px) {
    width: 100%;
    max-width: 470px;
    margin-left: auto;
    margin-right: auto;
  }

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

.p-top-fv__image {
  width: 100%;
  height: auto;
  max-width: 650px;
}

/*
  ふわっと表示（JSが is-show を付けるまで隠す）。
  FVの画像と、ASURACOREでシステム構築はこう変わるの円に使う。
  JSが動かない環境では隠れたままになるため、noscript側で打ち消している。
*/
.p-top-fadein {
  opacity: 0;
  transform: translate(0, 16px);
  transition:
    800ms ease opacity,
    800ms ease transform;

  &.is-show {
    opacity: 1;
    transform: translate(0, 0);
  }

  /* 動きを減らす設定のときは、移動させず表示だけ切り替える */
  @media (prefers-reduced-motion: reduce) {
    transform: none;
    transition: 400ms ease opacity;

    &.is-show {
      transform: none;
    }
  }
}

/* 中央の円 → POINT.1 → POINT.2 の順に出す */
.p-top-fadein--delay1 {
  transition-delay: 300ms;
}

.p-top-fadein--delay2 {
  transition-delay: 600ms;
}

/* ASURACOREでシステム構築はこう変わる。Figma実寸（1081×627）を％へ置き換え、正円と重なり量を保つ */
.p-top-change {
  position: relative;
  width: 100%;
  max-width: 1081px;
  margin: 0 auto;

  @media screen and (max-width: 840px) {
    max-width: 390px;
  }
}

.p-top-padding {
  padding: 0;
}
/* 中央の円（592 / 1081 = 54.76%） */
.p-top-change__core {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 54.76%;
  margin: 0 auto;
  padding: 11% 4% 0;
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: #F0EEF4;
  background-image: url("/asuracore/asset/image/top/change-core.webp");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 85%;

  @media screen and (max-width: 840px) {
    width: 230.77%;
    margin: 0 -65.38%;
    padding: 22% 0 0;
    background-size: 94%;
  }
}

.p-top-change__title {
  font-size: clamp(24px, 2.22vw, 32px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 2.8px;
  color: var(--white);
  text-align: center;

  @media screen and (max-width: 840px) {
    font-size: 28px;
  }
}

/* POINTの円。PCは左右2つ（40.7%）を中央の円へ重ね、SPは縦に積む */
.p-top-point-list {
  display: grid;
  grid-template-columns: repeat(2, 40.7%);
  justify-content: space-between;
  margin: -37.47% 0 0 0;

  /*
    SPは縦積み。円は 350 / 390 = 89.74%。
    中央の円の下端（1643px）から POINT.1 の上端（1006px）まで戻す（637 / 390 = 163.33%）
  */
  @media screen and (max-width: 840px) {
    grid-template-columns: 1fr;
    width: 89.74%;
    margin: -163.33% auto 0;
  }
}

/* 外周のリング */
.p-top-point {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: #F0EEF4;
  box-shadow: 0 0 10px rgb(29 43 86 / 10%);

  /* SPは円同士を少し重ねる（44 / 350 = 12.57%） */
  @media screen and (max-width: 840px) {
    &:not(:first-child) {
      margin: -12.57% 0 0 0;
    }
  }
}

/* 内側の円（93.2%）。枠線のグラデーションは背景2枚を塗り分けて表現する */
.p-top-point__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(12px, 1.25vw, 18px);
  width: 93.2%;
  padding: 9% 12% 0;
  aspect-ratio: 1;
  border: 3px solid transparent;
  border-radius: 50%;
  background-image: linear-gradient(var(--white), var(--white)), var(--gradation-sub);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

.p-top-point__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 0.83vw, 12px);
}

/* POINT.1 などのラベル */
.p-top-point__label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 89px;
  padding: 1px 12px 3px;
  background-color: var(--purple);
  font-size: clamp(12px, 1.11vw, 16px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--white);

  @media screen and (max-width: 840px) {
    min-width: 74px;
    font-size: 12px;
  }
}

.p-top-point__title {
  font-size: clamp(19px, 1.81vw, 26px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--navy);
  text-align: center;

  @media screen and (max-width: 840px) {
    font-size: 20px;
  }
}

.p-top-point__text {
  font-size: clamp(14px, 1.18vw, 17px);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.8px;
  color: var(--navy);

  @media screen and (max-width: 840px) {
    font-size: 14px;
  }
}

/* AIで作れる時代だからこそ、作る「だけ」で終わらせない。 */
.p-top-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(20px, 2.22vw, 32px);
}

.p-top-message__title {
  font-size: clamp(32px, 3.33vw, 48px);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 5px;
  color: var(--navy);
  text-align: center;

  @media screen and (max-width: 840px) {
    font-size: 28px;
  }
}

.p-top-message__text {
  font-size: clamp(18px, 1.25vw, 18px);
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0.05em;
  color: var(--navy);
  text-align: center;

  @media screen and (max-width: 840px) {
    font-size: 16px;
  }
}

/* 背景と共通Moduleの調整（このページ限定）。841px以上は1440px基準から幅へ連動して縮める */
.p-top {
  /* ベース背景。ヘッダーを含むラッパー全体へ掛ける */
  .l-bg-gradation {
    &::before {
      background-position: center top;
      background-repeat: no-repeat;
      background-size: 100% 70%;
    }
  }

  /* 背景の終端。ムービーのセクション下端を基準に白で塗りつぶす */
  .p-top-bg-end {
    /* z-index は auto のまま。コンテキストを作ると白面の重なり順が壊れる */
    position: relative;

    /* 境目をセクション下端から引き上げる量。白面と湾曲で共有する */
    --bg-end-offset: 100px;

    @media screen and (max-width: 840px) {
      --bg-end-offset: -10px;
    }

    &::after {
      content: "";
      position: absolute;
      top: calc(100% - var(--bg-end-offset));
      right: 0;
      left: 0;
      /* 背景（-20）だけを覆い、曲線装飾（-10）は残すため装飾より奥に置く */
      z-index: -11;
      /* 以降のセクションをすべて覆う高さ */
      height: 300vh;
      background-color: var(--white);
      pointer-events: none;
    }
  }

  /* 下端の白い湾曲。背景と白面の境目に重ねる。元画像は 1440 × 539 */
  .p-top-bg-end__curve {
    position: absolute;
    right: 0;
    /* 白面と同じ位置へ合わせる */
    bottom: var(--bg-end-offset);
    left: 0;
    z-index: -5;
    width: 100%;
    /* 130%に拡大する分、高さも合わせる */
    aspect-ratio: 1440 / 700;
    background-image: url("/asuracore/asset/image/form/bg-curve-bottom.svg");
    background-repeat: no-repeat;
    background-position: center bottom;
    /* 拡大して左右を画面外へ逃がし、中央の緩いカーブだけを見せる */
    background-size: 115% auto;
    pointer-events: none;

    @media screen and (max-width: 840px) {
      /* 画面が狭いぶん、カーブは控えめに拡大する */
      aspect-ratio: 1440 / 560;
      background-size: 125% auto;
      width: 240%;
    }
  }

  /* ヘッダー */
  .l-header {
    padding: clamp(24px, 2.78vw, 40px) clamp(20px, 4.86vw, 70px);

    @media screen and (max-width: 840px) {
      padding: 20px;
    }
  }

  .l-header__logo {
    max-width: clamp(180px, 16.67vw, 240px);

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

  /* ブランドムービー */
  .m-movie {
    max-width: clamp(560px, 51.88vw, 747px);
    gap: clamp(20px, 2.22vw, 32px);
  }

  .m-movie__title {
    font-size: clamp(24px, 2.22vw, 32px);
  }

  /* 事前登録への誘導 */
  .m-cta {
    grid-template-columns: clamp(220px, 21.04vw, 303px) auto;
    gap: clamp(40px, 9.58vw, 138px);
    padding: clamp(24px, 2.08vw, 30px) clamp(40px, 12.57vw, 181px);

    @media screen and (max-width: 840px) {
      grid-template-columns: 1fr;
      gap: 24px;
      padding: 32px 20px;
    }
  }

  .m-cta__image-wrap {
    margin: 0 auto;
  }

  .m-cta__body {
    gap: clamp(20px, 1.67vw, 24px);
  }

  .m-cta__title {
    font-size: clamp(24px, 2.22vw, 32px);
  }
}