:root {
  --bg-black: #020104;
  --bg-deep: #06010c;

  --panel: rgba(8, 3, 16, 0.96);
  --panel-soft: rgba(15, 5, 28, 0.88);
  --input: rgba(5, 2, 12, 0.94);

  --violet-dark: #3b0764;
  --violet: #7c3aed;
  --violet-main: #9333ea;
  --purple: #a855f7;
  --purple-light: #c084fc;
  --neon: #d946ef;
  --electric: #b65cff;

  --white: #ffffff;
  --white-soft: #eee9f5;

  --text: #f9f6ff;
  --text-soft: #c8bbd8;
  --text-muted: #887697;

  --border: rgba(177, 92, 255, 0.28);
  --border-strong: rgba(217, 150, 255, 0.7);

  --danger: #ff3c81;
}

/* =========================
   RESET
========================= */

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--bg-black);
}

body {
  min-height: 100vh;

  margin: 0;

  overflow-x: hidden;

  color: var(--text);

  font-family:
    "Noto Sans JP",
    "Yu Gothic",
    "Hiragino Kaku Gothic ProN",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  background:
    radial-gradient(
      circle at 50% -4%,
      rgba(130, 39, 255, 0.27),
      transparent 34%
    ),
    radial-gradient(
      circle at 15% 45%,
      rgba(99, 20, 160, 0.16),
      transparent 35%
    ),
    radial-gradient(
      circle at 90% 68%,
      rgba(170, 45, 255, 0.15),
      transparent 40%
    ),
    linear-gradient(
      180deg,
      #040006 0%,
      #07010d 48%,
      #010102 100%
    );
}


/* =========================
   STAR PARTICLES
========================= */

body::before {
  content: "";

  position: fixed;

  inset: 0;

  z-index: 0;

  pointer-events: none;

  opacity: 0.78;

  background-image:
    radial-gradient(
      circle at 12% 13%,
      rgba(255, 255, 255, 0.9) 0 1px,
      transparent 2px
    ),
    radial-gradient(
      circle at 22% 71%,
      rgba(192, 132, 252, 0.8) 0 1px,
      transparent 2px
    ),
    radial-gradient(
      circle at 76% 18%,
      rgba(255, 255, 255, 0.82) 0 1px,
      transparent 2px
    ),
    radial-gradient(
      circle at 90% 60%,
      rgba(217, 70, 239, 0.8) 0 1px,
      transparent 2px
    ),
    radial-gradient(
      circle at 52% 85%,
      rgba(196, 140, 255, 0.7) 0 1px,
      transparent 2px
    );

  background-size:
    190px 190px,
    250px 250px,
    220px 220px,
    270px 270px,
    230px 230px;

  animation: particleMove 28s linear infinite;
}


body::after {
  content: "";

  position: fixed;

  inset: 0;

  z-index: 0;

  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.55),
      transparent 18%,
      transparent 82%,
      rgba(0, 0, 0, 0.55)
    ),
    radial-gradient(
      ellipse at center,
      transparent 43%,
      rgba(0, 0, 0, 0.64) 100%
    );
}


/* =========================
   PAGE
========================= */

.page-shell {
  position: relative;

  z-index: 1;

  width: 100%;

  min-height: 100vh;

  display: flex;

  justify-content: center;

  align-items: flex-start;

  padding:
    max(24px, env(safe-area-inset-top))
    12px
    max(36px, env(safe-area-inset-bottom));
}


/* =========================
   MAIN CARD
========================= */

.form-card {
  position: relative;
  isolation: isolate;

  width: min(100%, 470px);

  overflow: hidden;

  padding: 20px;

  /*
   * 外枠を撤去
   */
  border: none;

  border-radius: 28px;

  background:
    linear-gradient(
      180deg,
      rgba(11, 4, 20, 0.975),
      rgba(3, 1, 8, 0.985)
    );

  box-shadow:
    0 30px 90px rgba(0, 0, 0, 0.82),
    0 0 70px rgba(145, 42, 255, 0.10),
    inset 0 0 55px rgba(162, 68, 255, 0.04);
}


.form-card::before {
  content: "";

  position: absolute;

  inset: 0;

  z-index: -2;

  pointer-events: none;

  background:
    radial-gradient(
      circle at 50% 1%,
      rgba(174, 74, 255, 0.21),
      transparent 29%
    ),
    linear-gradient(
      120deg,
      transparent 0 38%,
      rgba(214, 161, 255, 0.035) 48%,
      transparent 56%
    );
}

/* =========================
   HERO
========================= */

.hero {
  position: relative;

  z-index: 1;

  padding: 0 4px;

  margin-bottom: 26px;

  text-align: center;
}

/* =========================
   EYEBROW
========================= */

.eyebrow {
  margin: 2px 0 10px;

  color: var(--purple-light);

  font-size: 11px;

  font-weight: 900;

  letter-spacing: 0.22em;

  text-shadow:
    0 0 12px rgba(188, 97, 255, 0.7);
}


/* =========================
   TITLE
========================= */

.page-title {
  margin: 0;

  line-height: 1.25;
}


.page-title__brand,
.page-title__main {
  display: block;
}


.page-title__brand {
  margin-bottom: 5px;

  color: #d9b7ff;

  font-family:
    "Segoe UI",
    sans-serif;

  font-size: clamp(27px, 7vw, 34px);

  font-weight: 800;

  letter-spacing: 0.07em;

  text-shadow:
    0 0 16px rgba(175, 87, 255, 0.48);
}


.page-title__main {
  color: white;

  font-size: clamp(25px, 7vw, 31px);

  font-weight: 950;

  letter-spacing: 0.03em;

  text-shadow:
    0 0 18px rgba(200, 140, 255, 0.13);
}


.lead {
  max-width: 385px;

  margin: 18px auto 0;

  color: var(--text-soft);

  font-size: 13px;

  font-weight: 500;

  line-height: 1.95;
}


/* =========================
   FORM BOX
========================= */

.application-form {
  position: relative;

  z-index: 1;

  padding: 18px 16px 17px;

  border: 1px solid rgba(174, 91, 255, 0.25);

  border-radius: 22px;

  background:
    linear-gradient(
      180deg,
      rgba(12, 5, 23, 0.9),
      rgba(4, 2, 8, 0.94)
    );

  box-shadow:
    inset 0 0 30px rgba(146, 54, 255, 0.04),
    0 18px 42px rgba(0, 0, 0, 0.35);
}


.field {
  margin-bottom: 21px;
}


/* =========================
   LABEL
========================= */

.label-row {
  min-height: 24px;

  display: flex;

  align-items: center;

  gap: 8px;

  margin-bottom: 9px;
}


.label-row label,
.field-label {
  color: white;

  font-size: 15px;

  font-weight: 900;

  letter-spacing: 0.02em;
}


/* =========================
   BADGES
========================= */

.status-badge {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-width: 40px;

  height: 21px;

  padding: 0 9px;

  border-radius: 999px;

  font-size: 10px;

  font-weight: 900;

  line-height: 1;

  letter-spacing: 0.08em;
}


.status-badge--required {
  color: white;

  border:
    1px solid
    rgba(255, 113, 166, 0.55);

  background:
    linear-gradient(
      135deg,
      #7d1345,
      #d71d69 60%,
      #ff5b96
    );

  box-shadow:
    0 0 14px
    rgba(228, 34, 112, 0.3);
}


.status-badge--optional {
  color: #dfcef0;

  border:
    1px solid
    rgba(194, 148, 233, 0.3);

  background:
    linear-gradient(
      180deg,
      rgba(65, 37, 85, 0.72),
      rgba(21, 12, 29, 0.9)
    );
}


/* =========================
   INPUTS
========================= */

.form-input {
  width: 100%;

  height: 54px;

  padding: 0 15px;

  outline: none;

  border:
    1px solid
    rgba(167, 85, 255, 0.38);

  border-radius: 14px;

  color: white;

  background:
    linear-gradient(
      180deg,
      rgba(6, 2, 12, 0.97),
      rgba(12, 4, 21, 0.96)
    );

  font: inherit;

  font-size: 15px;

  caret-color: #c680ff;

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}


.form-input::placeholder {
  color:
    rgba(208, 191, 222, 0.42);
}


.form-input:hover {
  border-color:
    rgba(199, 129, 255, 0.6);
}


.form-input:focus {
  border-color: #bb6cff;

  background:
    linear-gradient(
      180deg,
      rgba(13, 4, 23, 0.98),
      rgba(18, 5, 31, 0.98)
    );

  box-shadow:
    0 0 0 3px
    rgba(170, 79, 255, 0.11),

    0 0 25px
    rgba(167, 67, 255, 0.17),

    inset 0 0 15px
    rgba(223, 175, 255, 0.025);
}


/* =========================
   BIRTHDAY
========================= */

.birth-row {
  display: grid;

  grid-template-columns:
    minmax(0, 1.2fr)
    auto
    minmax(0, 0.85fr)
    auto
    minmax(0, 0.85fr);

  align-items: center;

  gap: 8px;
}


.birth-input {
  padding: 0 7px;

  text-align: center;
}


.birth-separator {
  color: #a66ee4;

  font-size: 16px;

  font-weight: 900;
}


/* =========================
   GUIDE BUTTON
========================= */

.guide-button,
.external-link {
  width: 100%;

  min-height: 49px;

  margin-top: 10px;

  padding: 11px 13px;

  border-radius: 14px;

  display: flex;

  align-items: center;

  gap: 9px;

  color: #e3c9fb;

  font-size: 13px;

  font-weight: 900;

  line-height: 1.45;

  text-align: left;

  text-decoration: none;

  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}


.guide-button {
  border:
    1px solid
    rgba(166, 85, 255, 0.35);

  background:
    linear-gradient(
      180deg,
      rgba(31, 13, 52, 0.86),
      rgba(10, 4, 18, 0.95)
    );

  cursor: pointer;
}


.external-link {
  justify-content: center;

  border:
    1px solid
    rgba(202, 135, 255, 0.48);

  background:
    linear-gradient(
      135deg,
      rgba(81, 31, 131, 0.8),
      rgba(28, 10, 48, 0.95)
    );
}


.guide-button:hover,
.external-link:hover {
  transform: translateY(-1px);

  border-color:
    rgba(220, 174, 255, 0.78);

  box-shadow:
    0 8px 22px
    rgba(0, 0, 0, 0.35),

    0 0 20px
    rgba(160, 66, 255, 0.15);
}


.guide-icon,
.external-link-icon {
  flex: 0 0 auto;

  color: #c786ff;

  text-shadow:
    0 0 10px
    rgba(196, 120, 255, 0.78);
}


.guide-arrow {
  margin-left: auto;

  color: #d9acff;

  font-size: 18px;

  transition:
    transform 0.22s ease;
}


.guide-button.is-open
.guide-arrow {
  transform:
    rotate(180deg);
}


.external-arrow {
  margin-left: auto;
}


/* =========================
   GUIDE PANEL
========================= */

.guide-panel {
  margin-top: 12px;

  padding: 12px;

  overflow: hidden;

  border:
    1px solid
    rgba(168, 91, 255, 0.26);

  border-radius: 16px;

  background:
    linear-gradient(
      180deg,
      rgba(15, 5, 26, 0.98),
      rgba(5, 2, 9, 0.98)
    );

  box-shadow:
    inset 0 0 25px
    rgba(156, 63, 255, 0.045);

  animation:
    guideReveal
    0.28s ease both;
}


.guide-panel[hidden] {
  display: none !important;
}


.guide-image-link {
  display: block;

  overflow: hidden;

  border:
    1px solid
    rgba(216, 168, 255, 0.17);

  border-radius: 12px;

  background: white;

  box-shadow:
    0 12px 30px
    rgba(0, 0, 0, 0.48);
}


.guide-image {
  display: block;

  width: 100%;

  height: auto;

  object-fit: contain;
}


.guide-description {
  margin: 13px 2px 0;

  color: var(--text-soft);

  font-size: 12px;

  line-height: 1.8;
}


.guide-description strong {
  color: #d7a7ff;
}


.guide-note {
  margin: 8px 2px 0;

  color: var(--text-muted);

  font-size: 11px;

  line-height: 1.6;
}


.guide-steps {
  margin: 14px 0 0;

  padding-left: 25px;

  color: var(--text-soft);

  font-size: 12px;

  line-height: 1.85;
}


.guide-steps li::marker {
  color: #bd75ff;

  font-weight: 900;
}


/* =========================
   SUBMIT BUTTON
========================= */

.submit-button {
  position: relative;

  isolation: isolate;

  width: 100%;

  height: 62px;

  overflow: hidden;

  margin-top: 5px;

  border:
    1px solid
    rgba(234, 202, 255, 0.72);

  border-radius: 16px;

  color: white;

  background:
    linear-gradient(
      135deg,
      #5b21b6 0%,
      #7c3aed 28%,
      #b45cff 58%,
      #7c3aed 78%,
      #4c1d95 100%
    );

  font: inherit;

  font-size: 17px;

  font-weight: 950;

  letter-spacing: 0.08em;

  cursor: pointer;

  box-shadow:
    0 15px 36px
    rgba(107, 37, 191, 0.36),

    0 0 22px
    rgba(189, 98, 255, 0.2),

    inset 0 1px 0
    rgba(255, 255, 255, 0.4);

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    filter 0.2s ease;
}


.submit-button::before {
  content: "";

  position: absolute;

  inset: 3px;

  z-index: -1;

  border:
    1px solid
    rgba(255, 255, 255, 0.2);

  border-radius: 12px;
}


.submit-button-glow {
  position: absolute;

  top: -60%;

  left: -30%;

  width: 26%;

  height: 220%;

  transform: rotate(18deg);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.73),
      transparent
    );

  animation:
    buttonShine
    3.8s ease-in-out infinite;
}


.submit-button:hover {
  transform:
    translateY(-2px);

  filter:
    brightness(1.08);

  box-shadow:
    0 20px 45px
    rgba(115, 39, 205, 0.46),

    0 0 34px
    rgba(195, 100, 255, 0.28);
}


.submit-button:disabled {
  opacity: 0.55;

  cursor: not-allowed;

  transform: none;
}


/* =========================
   MESSAGE
========================= */

.form-message {
  min-height: 20px;

  margin: 12px 0 0;

  color: #d7abff;

  text-align: center;

  font-size: 12px;

  font-weight: 800;

  line-height: 1.6;
}


.form-message:empty {
  min-height: 0;

  margin-top: 0;
}


.form-message.is-error {
  color: #ff759f;
}


.form-message.is-success {
  color: #dcaeff;
}


/* =========================
   PRIVACY
========================= */

.privacy {
  position: relative;

  z-index: 1;

  display: flex;

  align-items: flex-start;

  justify-content: center;

  gap: 8px;

  margin-top: 20px;

  padding: 0 10px;

  color: var(--text-muted);

  text-align: center;

  font-size: 11px;

  line-height: 1.85;
}


.privacy p {
  margin: 0;
}


.privacy-icon {
  color: #a66ae4;
}


/* =========================
   THANKS PAGE
========================= */

.thanks-page
.page-shell {
  align-items: center;
}


.thanks-card {
  min-height:
    min(
      760px,
      calc(100vh - 48px)
    );

  display: flex;

  flex-direction: column;

  justify-content: center;
}


.thanks-card
.logo-stage {
  min-height: 225px;
}


.thanks-panel {
  position: relative;

  z-index: 1;

  padding:
    24px
    17px
    19px;

  border:
    1px solid
    rgba(177, 93, 255, 0.28);

  border-radius: 22px;

  text-align: center;

  background:
    linear-gradient(
      180deg,
      rgba(17, 6, 31, 0.9),
      rgba(5, 2, 10, 0.95)
    );

  box-shadow:
    inset 0 0 30px
    rgba(158, 65, 255, 0.04);
}

.thanks-heading {
  margin:
    0 0 13px;

  color: #dfbbff;

  font-size: 20px;

  font-weight: 900;
}


.thanks-copy {
  margin: 0;

  color: var(--text-soft);

  font-size: 13px;

  line-height: 1.95;
}


.thanks-copy
+
.thanks-copy {
  margin-top: 12px;
}


.return-button {
  width: 100%;

  min-height: 54px;

  display: flex;

  justify-content: center;

  align-items: center;

  margin-top: 22px;

  border:
    1px solid
    rgba(220, 174, 255, 0.56);

  border-radius: 15px;

  color: white;

  background:
    linear-gradient(
      135deg,
      #522091,
      #a650e5 52%,
      #6421a6
    );

  font-size: 14px;

  font-weight: 950;

  text-decoration: none;

  box-shadow:
    0 13px 30px
    rgba(102, 29, 170, 0.3);
}


/* =========================
   ANIMATIONS
========================= */

@keyframes particleMove {
  from {
    transform:
      translateY(0);
  }

  to {
    transform:
      translateY(-70px);
  }
}


@keyframes logoFloat {
  0%,
  100% {
    transform:
      translateY(0);
  }

  50% {
    transform:
      translateY(-4px);
  }
}


@keyframes logoPulse {
  0%,
  100% {
    opacity: 0.65;

    transform:
      scale(0.96);
  }

  50% {
    opacity: 1;

    transform:
      scale(1.04);
  }
}


@keyframes buttonShine {
  0%,
  28% {
    left: -30%;
  }

  58%,
  100% {
    left: 125%;
  }
}


@keyframes guideReveal {
  from {
    opacity: 0;

    transform:
      translateY(-8px);
  }

  to {
    opacity: 1;

    transform:
      translateY(0);
  }
}


/* =========================
   MOBILE
========================= */

@media (max-width: 480px) {

  .page-shell {
    padding:
      max(
        14px,
        env(safe-area-inset-top)
      )
      8px
      max(
        24px,
        env(safe-area-inset-bottom)
      );
  }


  .form-card {
    padding: 13px;

    border-radius: 22px;
  }

  .page-title__brand {
    font-size: 27px;
  }


  .page-title__main {
    font-size: 25px;
  }


  .lead {
    padding: 0 5px;

    font-size: 12px;
  }


  .application-form {
    padding:
      16px 13px;
  }


  .form-input {
    height: 53px;

    font-size: 16px;
  }


  .birth-row {
    gap: 6px;
  }


  .birth-input {
    padding: 0 4px;
  }


  .guide-button,
  .external-link {
    font-size: 12px;
  }


  .guide-panel {
    padding: 9px;
  }


  .submit-button {
    height: 60px;

    font-size: 16px;
  }

}


/* =========================
   REDUCED MOTION
========================= */

@media (
  prefers-reduced-motion: reduce
) {

  *,
  *::before,
  *::after {
    animation-duration:
      0.01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      0.01ms !important;
  }

}

/* =========================================================
   VISIONÄR ロゴ統合・フォント強化
   必ず style.css の最後に配置
========================================================= */

/* ---------------------------------------------------------
   基本フォント
--------------------------------------------------------- */

body {
  font-family:
    "Noto Sans JP",
    "Yu Gothic UI",
    "Yu Gothic",
    "Hiragino Kaku Gothic ProN",
    system-ui,
    sans-serif;

  font-synthesis: none;
}

/* ---------------------------------------------------------
   英字ブランド名
--------------------------------------------------------- */

.page-title__brand {
  margin-bottom: 8px;

  font-family:
    "Orbitron",
    "Bahnschrift",
    "Arial Black",
    sans-serif;

  font-size:
    clamp(
      29px,
      7.5vw,
      37px
    );

  font-weight: 900;

  line-height: 1.1;

  letter-spacing: 0.035em;

  color: transparent;

  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #f4e9ff 24%,
      #dcb6ff 48%,
      #a94cff 78%,
      #6e1ca6 100%
    );

  -webkit-background-clip: text;
  background-clip: text;

  -webkit-text-stroke:
    0.35px
    rgba(255, 255, 255, 0.46);

  text-shadow:
    0 2px 0 rgba(38, 3, 63, 0.92),
    0 0 12px rgba(193, 99, 255, 0.56),
    0 0 30px rgba(126, 35, 210, 0.36);
}


/* ---------------------------------------------------------
   日本語メインタイトル
--------------------------------------------------------- */

.page-title__main {
  font-family:
    "Noto Sans JP",
    "Yu Gothic UI",
    "Yu Gothic",
    sans-serif;

  font-size:
    clamp(
      27px,
      7.2vw,
      34px
    );

  font-weight: 900;

  line-height: 1.35;

  letter-spacing: 0.065em;

  color: #ffffff;

  -webkit-text-stroke:
    0.25px
    rgba(255, 255, 255, 0.55);

  text-shadow:
    0 3px 0 rgba(48, 5, 75, 0.95),
    0 0 12px rgba(196, 110, 255, 0.23),
    0 0 26px rgba(122, 34, 191, 0.16);
}


/* ---------------------------------------------------------
   英字サブタイトル
--------------------------------------------------------- */

.eyebrow {
  margin-top: 3px;
  margin-bottom: 12px;

  font-family:
    "Orbitron",
    "Bahnschrift",
    sans-serif;

  font-size: 11px;

  font-weight: 800;

  letter-spacing: 0.23em;

  color: #dcaeff;

  text-shadow:
    0 0 10px rgba(208, 133, 255, 0.75),
    0 0 23px rgba(131, 36, 207, 0.34);
}


/* ---------------------------------------------------------
   説明文
--------------------------------------------------------- */

.lead {
  font-family:
    "Noto Sans JP",
    "Yu Gothic UI",
    sans-serif;

  font-weight: 600;

  color: #d3c7dc;
}


/* ---------------------------------------------------------
   フォームラベル
--------------------------------------------------------- */

.label-row label,
.field-label {
  font-family:
    "Noto Sans JP",
    "Yu Gothic UI",
    sans-serif;

  font-weight: 900;

  letter-spacing: 0.045em;

  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.8),
    0 0 8px rgba(161, 76, 224, 0.1);
}


/* ---------------------------------------------------------
   ボタン類
--------------------------------------------------------- */

.guide-button,
.external-link,
.submit-button,
.return-button {
  font-family:
    "Noto Sans JP",
    "Yu Gothic UI",
    sans-serif;

  font-weight: 900;

  letter-spacing: 0.035em;
}


.submit-button {
  font-size: 17px;

  letter-spacing: 0.085em;

  text-shadow:
    0 1px 0 rgba(39, 3, 62, 0.8),
    0 0 7px rgba(255, 255, 255, 0.14);
}


/* ---------------------------------------------------------
   ロゴの微細な呼吸演出
--------------------------------------------------------- */

@keyframes visionarLogoBreath {
  0%,
  100% {
    filter:
      brightness(1)
      saturate(1.04);
  }

  50% {
    filter:
      brightness(1.07)
      saturate(1.13);
  }
}


/* ---------------------------------------------------------
   スマートフォン
--------------------------------------------------------- */

@media (max-width: 480px) {
  .logo-stage {
    min-height: 255px;

    margin:
      -13px
      -13px
      5px;

    border-radius:
      21px
      21px
      0
      0;

    /*
     * スマホでは画像を少し大きくして、
     * 左右の黒い余白をさらに外へ追い出す。
     */
    background-size:
      120% auto,
      cover,
      cover;

    background-position:
      center 47%,
      center,
      center;
  }

  .page-title__brand {
    font-size: 30px;
  }

  .page-title__main {
    font-size: 27px;

    letter-spacing: 0.055em;
  }
}

/* =========================================================
   VISIONÄR LOGO FINAL
   横長楕円フェード・重複整理済み
========================================================= */

/* ---------------------------------------------------------
   ロゴ表示領域
--------------------------------------------------------- */

.logo-stage {
  position: relative;

  width: 100%;
  aspect-ratio: 3 / 2;

  display: flex;
  align-items: center;
  justify-content: center;

  margin:
    -4px
    0
    4px;

  overflow: visible;

  /*
   * 長方形の背景を作らない。
   * 画像の外側はカード背景をそのまま見せる。
   */
  background: transparent;

  border: none;
  box-shadow: none;
}


/* ---------------------------------------------------------
   紫グロー
   長方形ではなく楕円だけを発光させる
--------------------------------------------------------- */

.logo-glow {
  position: absolute;
  z-index: 0;

  left: 50%;
  top: 48%;

  width: 82%;
  height: 58%;

  transform:
    translate(-50%, -50%);

  pointer-events: none;

  border-radius: 50%;

  background:
    radial-gradient(
      ellipse at center,

      rgba(199, 105, 255, 0.24) 0%,

      rgba(163, 66, 245, 0.16) 28%,

      rgba(103, 29, 173, 0.08) 48%,

      rgba(60, 13, 102, 0.025) 65%,

      transparent 78%
    );

  filter: blur(24px);

  animation:
    visionarGlowPulse
    5s ease-in-out infinite;
}


/* ---------------------------------------------------------
   ロゴ画像本体
--------------------------------------------------------- */

.brand-logo {
  position: relative;
  z-index: 1;

  display: block;

  width: 100%;
  max-width: 100%;
  height: auto;

  margin: 0;

  transform: none;

  object-fit: contain;

  /*
   * 元画像の黒をカード背景へなじませる
   */
  mix-blend-mode: screen;

  /*
   * ★ 横長楕円フェード
   *
   * 重要：
   * 以前の 76% × 66% よりかなり小さな楕円にする。
   *
   * これによって、
   * ・左右端
   * ・上端
   * ・下端
   * ・四隅
   *
   * が確実に透明になる。
   */
  -webkit-mask-image:
    radial-gradient(
      ellipse 54% 44% at 50% 48%,

      #000 0%,
      #000 48%,

      rgba(0, 0, 0, 0.98) 55%,

      rgba(0, 0, 0, 0.90) 62%,

      rgba(0, 0, 0, 0.72) 69%,

      rgba(0, 0, 0, 0.48) 76%,

      rgba(0, 0, 0, 0.26) 83%,

      rgba(0, 0, 0, 0.11) 89%,

      rgba(0, 0, 0, 0.03) 94%,

      transparent 100%
    );

  mask-image:
    radial-gradient(
      ellipse 54% 44% at 50% 48%,

      #000 0%,
      #000 48%,

      rgba(0, 0, 0, 0.98) 55%,

      rgba(0, 0, 0, 0.90) 62%,

      rgba(0, 0, 0, 0.72) 69%,

      rgba(0, 0, 0, 0.48) 76%,

      rgba(0, 0, 0, 0.26) 83%,

      rgba(0, 0, 0, 0.11) 89%,

      rgba(0, 0, 0, 0.03) 94%,

      transparent 100%
    );

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;

  -webkit-mask-position: center;
  mask-position: center;

  filter:
    contrast(1.11)
    brightness(1.09)
    saturate(1.12)

    drop-shadow(
      0 0 10px
      rgba(199, 105, 255, 0.31)
    )

    drop-shadow(
      0 0 28px
      rgba(108, 25, 187, 0.17)
    );
}


/* ---------------------------------------------------------
   旧長方形オーバーレイを完全停止
--------------------------------------------------------- */

.logo-stage::after {
  content: none !important;
  display: none !important;
}


/*
 * ::before にも古い指定が残った場合に備えて停止。
 * グローは .logo-glow だけで担当する。
 */

.logo-stage::before {
  content: none !important;
  display: none !important;
}


/* ---------------------------------------------------------
   ロゴとタイトルの距離
--------------------------------------------------------- */

.logo-stage + .page-title {
  margin-top: -2px;
}


/* ---------------------------------------------------------
   メインカード旧外枠を完全停止
--------------------------------------------------------- */

.form-card {
  border: none !important;

  box-shadow:
    0 30px 90px rgba(0, 0, 0, 0.82),

    0 0 48px rgba(125, 35, 211, 0.09),

    inset 18px 0 45px rgba(139, 50, 215, 0.022),

    inset -18px 0 45px rgba(139, 50, 215, 0.022);
}


/*
 * 古い二重枠を確実に消す。
 * スマホ用の古い .form-card::after 指定が残っていても
 * 復活させない。
 */

.form-card::after {
  content: none !important;
  display: none !important;

  border: none !important;
}


/* ---------------------------------------------------------
   グローアニメーション
--------------------------------------------------------- */

@keyframes visionarGlowPulse {

  0%,
  100% {
    opacity: 0.7;

    transform:
      translate(-50%, -50%)
      scale(0.98);
  }

  50% {
    opacity: 1;

    transform:
      translate(-50%, -50%)
      scale(1.035);
  }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 480px) {

  .logo-stage {
    width: 100%;
    aspect-ratio: 3 / 2;

    margin:
      -2px
      0
      2px;

    overflow: visible;

    background: transparent;
  }


  .brand-logo {
    width: 100%;
    max-width: 100%;

    transform: none;

    /*
     * スマホも同じ楕円形。
     * PCより縦方向をわずかに広げて
     * 目の上側の粒子を残す。
     */
    -webkit-mask-image:
      radial-gradient(
        ellipse 54% 46% at 50% 48%,

        #000 0%,
        #000 47%,

        rgba(0, 0, 0, 0.98) 54%,

        rgba(0, 0, 0, 0.89) 62%,

        rgba(0, 0, 0, 0.70) 70%,

        rgba(0, 0, 0, 0.46) 77%,

        rgba(0, 0, 0, 0.24) 84%,

        rgba(0, 0, 0, 0.09) 90%,

        rgba(0, 0, 0, 0.025) 95%,

        transparent 100%
      );

    mask-image:
      radial-gradient(
        ellipse 54% 46% at 50% 48%,

        #000 0%,
        #000 47%,

        rgba(0, 0, 0, 0.98) 54%,

        rgba(0, 0, 0, 0.89) 62%,

        rgba(0, 0, 0, 0.70) 70%,

        rgba(0, 0, 0, 0.46) 77%,

        rgba(0, 0, 0, 0.24) 84%,

        rgba(0, 0, 0, 0.09) 90%,

        rgba(0, 0, 0, 0.025) 95%,

        transparent 100%
      );
  }

}

/* =========================================================
   Visionär ロゴ ゆっくり浮遊
========================================================= */

/* =========================================================
   Visionär ロゴ ゆっくり浮遊
========================================================= */

.brand-logo {
  animation:
    visionarFloat 6.5s ease-in-out infinite;
  transform-origin: center center;
}

@keyframes visionarFloat {
  0% {
    transform:
      translateY(0)
      scale(1);
  }

  50% {
    transform:
      translateY(-8px)
      scale(1.008);
  }

  100% {
    transform:
      translateY(0)
      scale(1);
  }
}