@charset "UTF-8";
/* =========================================================
   create-account.css — Create Account 専用
   Figma: PC 1669:21654 / TB 1672:22401 / SP 1672:23010
   値は Figma 実値（px ÷ 10 = rem）。トークンは common.css :root
   ========================================================= */

/* ---------- Create account section（PC: row / gap60 / items-center） ---------- */
.create-account {
  display: flex; align-items: center; gap: 6rem;
  background: var(--color-bg);
}
/* 画像カラム：flex-1 × セクション全高（self-stretch）・cover 中央 */
.create-account__media { flex: 1 1 0; min-width: 0; align-self: stretch; position: relative; }
.create-account__media img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
/* フォームカラム：flex-1 / col / gap40 / py100 / items-start */
.create-account__body {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: 4rem;
  padding: 10rem 0;
}
.create-account__head { width: 46rem; display: flex; flex-direction: column; gap: 2rem; }
.create-account__title { font-weight: 600; font-size: var(--fs-h2); line-height: var(--lh-h2); }
.create-account__lead { font-size: var(--fs-sub); line-height: var(--lh-sub); }

/* Form：w330 / col / gap30、Typeforms：gap15 */
.create-account__form { width: 33rem; display: flex; flex-direction: column; gap: 3rem; }
.create-account__fields { display: flex; flex-direction: column; gap: 1.5rem; }
.create-account__field {
  display: flex; align-items: center; gap: 1.2rem;
  height: 4.6rem; padding: 0 1.9rem; /* Figma：内側ストローク1px込みで20 */
  background: var(--color-white);
  border: 1px solid var(--color-caption); border-radius: var(--radius);
}
.create-account__field:focus-within { outline: 2px solid var(--color-cta); outline-offset: 2px; }
.create-account__icon { width: 2rem; height: 2rem; flex-shrink: 0; }
.create-account__input {
  flex: 1 1 0; min-width: 0; height: 100%; padding: 0;
  border: 0; background: transparent;
  font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-bg);
}
.create-account__input:focus-visible { outline: none; }
.create-account__input::placeholder { color: var(--color-bg); opacity: 1; }
.create-account__submit { width: 100%; height: 4.6rem; }

/* ---------- Tablet（834基準）：gap40 / py80 / 列幅325 ---------- */
@media (max-width: 1279.98px) {
  .create-account { gap: 4rem; }
  .create-account__body { padding: 8rem 0; }
  .create-account__head, .create-account__form { width: 32.5rem; }
}

/* ---------- SP（375基準）：画像上232 → フォーム315（pt30 / pb40 / gap30） ---------- */
@media (max-width: 833.98px) {
  .create-account { flex-direction: column; justify-content: center; gap: 0; }
  .create-account__media { flex: none; align-self: stretch; width: 100%; height: 23.2rem; }
  .create-account__body {
    flex: none; width: var(--content-w);
    align-items: center; gap: 3rem;
    padding: 3rem 0 4rem;
  }
  .create-account__head, .create-account__form { width: 100%; }
}