/* /contact/ ページ固有スタイル
   1. ヒーロー: オーロラドリフト背景 + 円環モチーフ（すべての事業への入口）
   2. 「ご相談内容から選ぶ」: メニュー行パターン（.contact-menu）
   3. フォームカード: 枠を与えて背景から浮かせすぎず「まとまり」を出す＋スクロール連動フェード＋スケール */

/* ==========================================================================
   1. ヒーロー
   ========================================================================== */
.contact-hero::before,
.contact-hero::after {
  content: "";
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  pointer-events: none;
}

/* ブランド色のオーロラが2つ、超低速・左右非対称に漂う */
.contact-hero::before {
  width: clamp(420px, 46vw, 780px);
  height: clamp(420px, 46vw, 780px);
  left: -14%;
  top: -32%;
  background: radial-gradient(circle, rgba(43, 92, 255, 0.11) 0%, transparent 62%);
  animation: contactAurora1 26s ease-in-out infinite alternate;
}

.contact-hero::after {
  width: clamp(340px, 38vw, 640px);
  height: clamp(340px, 38vw, 640px);
  right: -12%;
  bottom: -40%;
  background: radial-gradient(circle, rgba(0, 196, 204, 0.09) 0%, transparent 62%);
  animation: contactAurora2 33s ease-in-out infinite alternate;
}

@keyframes contactAurora1 {
  to { transform: translate3d(5vw, 4vh, 0) scale(1.14); }
}

@keyframes contactAurora2 {
  to { transform: translate3d(-4vw, -5vh, 0) scale(1.1); }
}

.contact-hero > .container {
  position: relative;
  z-index: 1;
}

/* 円環モチーフ: 3本の同心円＝EC・福祉・AI の3事業。異なる速度でゆっくり回り、
   ときどき重なる＝「すべての事業への入口」であることを示す */
.contact-hero-rings {
  position: absolute;
  z-index: 0;
  right: -8%;
  top: 4%;
  width: clamp(340px, 40vw, 600px);
  aspect-ratio: 1;
  color: rgba(43, 92, 255, 0.13);
  pointer-events: none;
}

.contact-hero-rings svg {
  display: block;
  width: 100%;
  height: 100%;
}

.contact-hero-ring {
  transform-origin: 300px 300px;
}

.contact-hero-ring circle[stroke] {
  stroke-width: 1;
}

.contact-hero-ring--1 { animation: contactRingSpin 58s linear infinite; }
.contact-hero-ring--2 { animation: contactRingSpin 84s linear infinite reverse; }
.contact-hero-ring--3 { animation: contactRingSpin 118s linear infinite; }

@keyframes contactRingSpin {
  to { transform: rotate(360deg); }
}

.contact-hero-ring-dot {
  opacity: 0.8;
}

@media (max-width: 760px) {
  .contact-hero-rings {
    top: auto;
    bottom: -8%;
    right: -24%;
    width: 300px;
    opacity: 0.6;
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact-hero::before,
  .contact-hero::after,
  .contact-hero-ring {
    animation: none;
  }
}

/* ==========================================================================
   2. 「ご相談内容から選ぶ」: メニュー行パターン
   ========================================================================== */
.contact-menu {
  display: flex;
  flex-direction: column;
}

.contact-menu-row {
  --row-accent: var(--c-brand);
  position: relative;
  display: grid;
  grid-template-columns: 52px 1fr 40px;
  align-items: center;
  gap: 6px 14px;
  padding-block: 26px;
  border-bottom: 1px solid var(--c-line);
  color: inherit;
  text-decoration: none;
  overflow: hidden;
}

.contact-menu-row:first-child {
  border-top: 1px solid var(--c-line);
}

.contact-menu-row[data-accent="ec"] { --row-accent: var(--c-ec); }
.contact-menu-row[data-accent="welfare"] { --row-accent: var(--c-welfare); }
.contact-menu-row[data-accent="ai"] { --row-accent: var(--c-ai); }

.contact-menu-row::before {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--row-accent) 7%, transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease-out);
  z-index: 0;
}

.contact-menu-row:hover::before,
.contact-menu-row:focus-visible::before {
  transform: scaleX(1);
}

.contact-menu-num {
  position: relative;
  z-index: 1;
  font-family: "Inter", var(--font-sans);
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.2px color-mix(in srgb, var(--row-accent) 55%, transparent);
  transition: color 0.3s, -webkit-text-stroke-color 0.3s;
}

.contact-menu-row:hover .contact-menu-num,
.contact-menu-row:focus-visible .contact-menu-num {
  -webkit-text-stroke: 0 transparent;
  color: var(--row-accent);
}

.contact-menu-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.contact-menu-title {
  font-size: 1.12rem;
  font-weight: 800;
  color: var(--c-ink);
  transition: transform 0.35s var(--ease-out);
}

.contact-menu-row:hover .contact-menu-title,
.contact-menu-row:focus-visible .contact-menu-title {
  transform: translateX(4px);
}

.contact-menu-text {
  font-size: 0.9rem;
  color: var(--c-text-sub);
  line-height: 1.75;
}

.contact-menu-arrow {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--row-accent);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out);
}

.contact-menu-row:hover .contact-menu-arrow,
.contact-menu-row:focus-visible .contact-menu-arrow {
  opacity: 1;
  transform: translateX(0);
}

@media (min-width: 880px) {
  .contact-menu-row {
    grid-template-columns: 52px 240px 1fr 40px;
  }
  .contact-menu-body {
    display: contents;
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact-menu-row::before,
  .contact-menu-num,
  .contact-menu-title,
  .contact-menu-arrow {
    transition: none;
  }
  .contact-menu-row:hover .contact-menu-title,
  .contact-menu-row:focus-visible .contact-menu-title,
  .contact-menu-row:hover .contact-menu-arrow,
  .contact-menu-row:focus-visible .contact-menu-arrow {
    transform: none;
  }
}

/* ==========================================================================
   3. フォームカード
   ========================================================================== */
.contact-form-card {
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: clamp(28px, 4vw, 48px);
  opacity: calc(0.55 + var(--progress, 1) * 0.45);
  transform: scale(calc(0.94 + var(--progress, 1) * 0.06));
  will-change: opacity, transform;
}

@media (prefers-reduced-motion: reduce) {
  .contact-form-card {
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   4. フォーム送信機能: ハニーポット・エラー表示・送信中の状態
   ========================================================================== */

/* ハニーポット: 人間の目には見えない位置に飛ばす（画面内容としては存在しない扱い） */
.form-hp {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* フィールド直下のエラーメッセージ。中身が無いときは場所を取らない */
.form-error {
  font-size: 0.85rem;
  font-weight: 600;
  color: #e11d48;
  line-height: 1.6;
}

.form-error:empty {
  display: none;
}

/* エラーがある入力欄の枠を赤系トークンで強調 */
.form-input[aria-invalid="true"],
.form-select[aria-invalid="true"],
.form-textarea[aria-invalid="true"] {
  border-color: #e11d48;
}

.form-input[aria-invalid="true"]:focus,
.form-select[aria-invalid="true"]:focus,
.form-textarea[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 4px rgba(225, 29, 72, 0.14);
}

/* 個別項目に紐づかない全体エラー（レート制限・送信失敗など） */
.form-alert {
  padding: 14px 18px;
  border-radius: var(--r-sm);
  background: rgba(225, 29, 72, 0.08);
  border: 1px solid rgba(225, 29, 72, 0.3);
  color: #9f1239;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.7;
}

.form-alert[hidden] {
  display: none;
}

.form-alert--static {
  margin-bottom: 20px;
}

/* 送信中はボタンを押せなくし、視覚的にも分かるようにする（二重送信防止） */
.contact-form-card .btn[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}