@charset "UTF-8";
/* ==========================================================
   works_contact.scss  受託相談フォーム /works_contact/ を実績ページ /works/ の見た目に合わせる
   正本は m_scss（scss_name='works_contact'・個別指定 scss_use=5・対象ディレクトリ 104）。
   このファイルは DB の正本と同じ内容の写し。コンパイル結果が works_contact.css。
   ライト＝明るいアイソメトリック（/works/ の light）／ダーク＝星座ネットワーク（/works/ の dark）。
   どちらを出すかは html[data-design]（works と同じ localStorage「ac_work_design」）。
   ブレークポイントは 1024 / 900 / 640px（max-width で上書き）
   ========================================================== */
/* ---------- トークン（ライトが既定・ダークで上書き） ---------- */
.wc_page {
  --wc_bg: #eef0f4;
  --wc_bg_deep: #e3e6ec;
  --wc_surface: #ffffff;
  --wc_surface_hi: #ffffff;
  --wc_text: #1d2230;
  --wc_muted: #5a6172;
  --wc_soft: #8c93a3;
  --wc_line: rgba(29, 34, 48, 0.12);
  --wc_line_hi: rgba(59, 104, 181, 0.55);
  --wc_accent: #3b68b5;
  --wc_accent_hi: #3b68b5;
  --wc_char: #2b3140;
  --wc_char_dark: #1c2029;
  --wc_orange: #e8843c;
  --wc_ok: #2e8b6a;
  --wc_shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 18px 40px rgba(29, 34, 48, 0.08);
  --wc_radius: 10px;
  --wc_field_bg: #f7f8fa;
  --wc_header_bg: rgba(238, 240, 244, 0.92);
}
[data-design=dark] .wc_page {
  --wc_bg: #050b18;
  --wc_bg_deep: #02060f;
  --wc_surface: rgba(12, 24, 46, 0.82);
  --wc_surface_hi: rgba(20, 38, 70, 0.92);
  --wc_text: #e8eef9;
  --wc_muted: #9db0cb;
  --wc_soft: #6f84a3;
  --wc_line: rgba(130, 175, 255, 0.18);
  --wc_line_hi: rgba(140, 200, 255, 0.55);
  --wc_accent: #5aa9ff;
  --wc_accent_hi: #9fd4ff;
  --wc_char: #5aa9ff;
  --wc_char_dark: #2c6fc0;
  --wc_orange: #ffa45c;
  --wc_ok: #5fe0b4;
  --wc_shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 20px 50px rgba(0, 0, 0, 0.35);
  --wc_radius: 16px;
  --wc_field_bg: rgba(5, 12, 28, 0.7);
  --wc_header_bg: rgba(5, 11, 24, 0.72);
}

[data-design=dark] {
  color-scheme: dark;
}

/* ---------- ベース ---------- */
body.wc_page {
  position: relative;
  min-height: 100vh;
  margin: 0;
  background: var(--wc_bg);
  color: var(--wc_text);
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  font-size: 16px;
  line-height: 1.85;
  letter-spacing: 0.02em;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.5s, color 0.5s;
  /* autocamp 側の飾り（アイコン書体）はこのページでは使わない */
}
body.wc_page ::selection {
  background: var(--wc_accent);
  color: #ffffff;
}
body.wc_page a:focus-visible,
body.wc_page button:focus-visible,
body.wc_page input:focus-visible,
body.wc_page textarea:focus-visible {
  outline: 3px solid var(--wc_accent);
  outline-offset: 3px;
}
body.wc_page .skip_link {
  position: absolute;
  left: -9999px;
}
body.wc_page .skip_link:focus {
  left: 16px;
  top: 16px;
  z-index: 200;
  padding: 8px 16px;
  background: var(--wc_surface_hi);
  color: var(--wc_text);
}
body.wc_page main {
  position: relative;
  z-index: 2;
}
body.wc_page .material-symbols-outlined {
  display: none;
}

/* ---------- 背景（ライト：浮かぶ立方体と曲線／ダーク：星座のキャンバス） ---------- */
.wc_bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.wc_bg_canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.8s;
}
[data-design=dark] .wc_bg_canvas {
  opacity: 1;
}

.wc_bg_glow {
  position: absolute;
  width: 640px;
  height: 640px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(90, 169, 255, 0.16), transparent 62%);
  transform: translate(calc(var(--wc_mx, 50vw) - 320px), calc(var(--wc_my, 30vh) - 320px));
  opacity: 0;
  transition: opacity 0.6s;
}
[data-design=dark] .wc_bg_glow {
  opacity: 1;
}

.wc_bg_iso {
  position: absolute;
  inset: 0;
  opacity: 1;
  transition: opacity 0.8s;
  /* 斜めの方眼（アイソメトリックの床） */
}
[data-design=dark] .wc_bg_iso {
  opacity: 0;
}
.wc_bg_iso::before {
  content: "";
  position: absolute;
  inset: -50%;
  background-image: repeating-linear-gradient(30deg, rgba(29, 34, 48, 0.045) 0 1px, transparent 1px 46px), repeating-linear-gradient(150deg, rgba(29, 34, 48, 0.045) 0 1px, transparent 1px 46px);
  transform: translateY(calc(var(--wc_scroll, 0) * -0.08px));
}

.wc_cube {
  --s: 56px;
  position: absolute;
  width: var(--s);
  height: calc(var(--s) * 1.15);
  transform: translate(calc(var(--wc_px, 0) * var(--depth, 1) * 1px), calc(var(--wc_scroll, 0) * var(--depth, 1) * -0.18px + var(--wc_py, 0) * var(--depth, 1) * 1px));
  animation: wc_float 7s ease-in-out infinite;
  /* 上面・左面・右面の3枚で立方体に見せる */
}
.wc_cube i {
  position: absolute;
  display: block;
  width: 100%;
  height: 50%;
}
.wc_cube i:nth-child(1) {
  top: 0;
  left: 0;
  background: #ffffff;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  box-shadow: inset 0 0 0 1px rgba(43, 49, 64, 0.2);
}
.wc_cube i:nth-child(2) {
  top: 25%;
  left: 0;
  height: 75%;
  width: 50%;
  background: #2b3140;
  clip-path: polygon(0 0, 100% 33.3%, 100% 100%, 0 66.6%);
}
.wc_cube i:nth-child(3) {
  top: 25%;
  left: 50%;
  height: 75%;
  width: 50%;
  background: #596277;
  clip-path: polygon(0 33.3%, 100% 0, 100% 66.6%, 0 100%);
}
.wc_cube.is_blue i:nth-child(1) {
  background: #d9e4f7;
}
.wc_cube.is_blue i:nth-child(2) {
  background: #3b68b5;
}
.wc_cube.is_blue i:nth-child(3) {
  background: #5b86cf;
}
.wc_cube.is_glass i {
  opacity: 0.5;
}

.wc_cube_1 {
  --s: 74px;
  --depth: 0.6;
  top: 16%;
  left: 6%;
}

.wc_cube_2 {
  --s: 40px;
  --depth: 1.2;
  top: 64%;
  left: 3%;
  animation-delay: -2s;
}

.wc_cube_3 {
  --s: 92px;
  --depth: 0.4;
  top: 28%;
  right: 5%;
  animation-delay: -4s;
}

.wc_cube_4 {
  --s: 34px;
  --depth: 1.5;
  top: 78%;
  right: 12%;
  animation-delay: -1s;
}

.wc_cube_5 {
  --s: 26px;
  --depth: 2;
  top: 9%;
  right: 30%;
  animation-delay: -5s;
}

@keyframes wc_float {
  0%, 100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -14px;
  }
}
@media (max-width: 900px) {
  .wc_cube_1,
  .wc_cube_3 {
    --s: 46px;
  }
  .wc_cube_5 {
    display: none;
  }
}
/* ---------- 読んだ量の線 ---------- */
.wc_read {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 60;
  width: 100%;
  height: 3px;
  pointer-events: none;
}
.wc_read span {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, var(--wc_accent), var(--wc_orange));
  transform: scaleX(var(--wc_read, 0));
  transform-origin: left;
}

/* ---------- ヘッダー（/works/ と同じ組み） ---------- */
.wc_header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--wc_header_bg);
  border-bottom: 1px solid var(--wc_line);
  backdrop-filter: blur(10px);
  transition: box-shadow 0.3s, background-color 0.5s;
}
.wc_header.is_scrolled {
  box-shadow: 0 8px 24px rgba(29, 34, 48, 0.08);
}

.wc_header_inner {
  display: flex;
  align-items: center;
  gap: 24px;
  max-width: 1120px;
  height: 68px;
  margin-inline: auto;
  padding-inline: 40px;
}
@media (max-width: 640px) {
  .wc_header_inner {
    gap: 12px;
    height: 60px;
    padding-inline: 16px;
  }
}

.wc_logo {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: var(--wc_text);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
}
@media (max-width: 640px) {
  .wc_logo {
    gap: 8px;
    font-size: 12px;
  }
}

.wc_logo_mark {
  flex-shrink: 0;
  transition: transform 0.6s cubic-bezier(0.3, 1.45, 0.5, 1);
}
.wc_logo_mark .mark_top {
  fill: #ffffff;
  stroke: #2b3140;
  stroke-width: 1;
  stroke-linejoin: round;
}
.wc_logo_mark .mark_left {
  fill: #2b3140;
}
.wc_logo_mark .mark_right {
  fill: #596277;
}
[data-design=dark] .wc_logo_mark {
  filter: drop-shadow(0 0 6px rgba(90, 169, 255, 0.7));
}
[data-design=dark] .wc_logo_mark .mark_top {
  fill: #9fd4ff;
  stroke: #9fd4ff;
}
[data-design=dark] .wc_logo_mark .mark_left {
  fill: #2c6fc0;
}
[data-design=dark] .wc_logo_mark .mark_right {
  fill: #5aa9ff;
}
.wc_logo:hover .wc_logo_mark {
  transform: rotate(-120deg);
}

.wc_nav {
  margin-left: auto;
}
.wc_nav ul {
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.wc_nav li {
  flex-shrink: 0;
}
.wc_nav a {
  position: relative;
  display: block;
  padding: 8px 12px;
  border-radius: 4px;
  color: var(--wc_text);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s, color 0.2s;
}
.wc_nav a:hover {
  background: rgba(90, 120, 170, 0.1);
  color: var(--wc_accent);
}
@media (max-width: 900px) {
  .wc_nav {
    display: none;
  }
}

.wc_header_btn {
  flex-shrink: 0;
  margin-left: auto;
  padding: 9px 20px;
  border-radius: 4px;
  background: #2b3140;
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 3px 0 #1c2029;
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.3s;
}
.wc_nav + .wc_header_btn {
  margin-left: 0;
}
@media (max-width: 900px) {
  .wc_nav + .wc_header_btn {
    margin-left: auto;
  }
}
.wc_header_btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 0 #1c2029;
}
[data-design=dark] .wc_header_btn {
  border: 1px solid var(--wc_line_hi);
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
}
[data-design=dark] .wc_header_btn:hover {
  background: rgba(90, 169, 255, 0.18);
  box-shadow: none;
}
@media (max-width: 640px) {
  .wc_header_btn {
    padding: 8px 14px;
    font-size: 13px;
  }
}

/* ---------- 冒頭（CMS の page_head を作り替える） ---------- */
.wc_page .page_head {
  position: relative;
  padding: 88px 0 24px;
  background: none;
  color: var(--wc_text);
  border: 0;
}
@media (max-width: 640px) {
  .wc_page .page_head {
    padding: 56px 0 8px;
  }
}
.wc_page .page_head::before, .wc_page .page_head::after {
  display: none;
}

.wc_page .page_head_inner {
  max-width: 880px;
  margin-inline: auto;
  padding-inline: 40px;
}
@media (max-width: 640px) {
  .wc_page .page_head_inner {
    padding-inline: 16px;
  }
}

.wc_page .breadcrumb {
  margin: 0 0 22px;
}

.wc_page .breadcrumb_list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  letter-spacing: 0.08em;
}

.wc_page .breadcrumb_item {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--wc_soft);
}
.wc_page .breadcrumb_item + .breadcrumb_item::before {
  content: "/";
  color: var(--wc_soft);
}
.wc_page .breadcrumb_item::after {
  display: none;
}

.wc_page .breadcrumb_link {
  color: var(--wc_muted);
  text-decoration: none;
}
.wc_page .breadcrumb_link:hover {
  color: var(--wc_accent);
}

/* 見出しの上の小さなラベル（JS が付ける） */
.wc_eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  padding: 4px 14px 4px 10px;
  border: 1px solid var(--wc_line_hi);
  border-radius: 999px;
  color: var(--wc_accent);
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
}
.wc_eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--wc_orange);
  box-shadow: 0 0 0 0 var(--wc_orange);
  animation: wc_ping 2s ease-out infinite;
}
[data-design=dark] .wc_eyebrow {
  color: var(--wc_accent_hi);
}

@keyframes wc_ping {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 164, 92, 0.6);
  }
  100% {
    box-shadow: 0 0 0 12px rgba(255, 164, 92, 0);
  }
}
.wc_page .page_head_title {
  margin: 0;
  padding: 0;
  border: 0;
  word-break: normal;
  color: var(--wc_text);
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  font-size: clamp(34px, 5vw, 60px);
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: 0.03em;
  /* 1文字ずつ落ちてくる（JS が span に分ける） */
}
.wc_page .page_head_title .wc_char {
  display: inline-block;
  opacity: 0;
  transform: translateY(-0.6em) rotate(-8deg);
  animation: wc_drop 0.7s cubic-bezier(0.3, 1.45, 0.5, 1) forwards;
  animation-delay: calc(var(--i) * 45ms + 120ms);
}
[data-design=dark] .wc_page .page_head_title {
  color: #ffffff;
  text-shadow: 0 0 28px rgba(90, 169, 255, 0.35);
}
[data-design=dark] .wc_page .page_head_title .wc_char {
  transform: none;
  animation: wc_fade 0.4s forwards;
  animation-delay: calc(var(--i) * 45ms + 120ms);
}

@keyframes wc_drop {
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes wc_fade {
  to {
    opacity: 1;
  }
}
.wc_page .page_head_lead {
  max-width: 640px;
  margin: 22px 0 0;
  color: var(--wc_muted);
  font-size: 16px;
  line-height: 2;
}
@media (max-width: 640px) {
  .wc_page .page_head_lead {
    font-size: 15px;
  }
}

/* autocamp の本文用の指定（明朝の見出し・下線・リストの字下げ）をこのページでは打ち消す */
.wc_page .page_head_title::after {
  display: none;
}

.wc_page .article_body h2 {
  position: static;
  margin: 0;
  padding: 0;
  border: 0;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
}
.wc_page .article_body h2::after {
  position: static;
  background: var(--wc_char);
}

.wc_page .article_body ul,
.wc_page .article_body ol {
  padding-left: 0;
  line-height: inherit;
}

.wc_page .article_body li,
.wc_page .article_body li + li {
  margin: 0;
}

/* ---------- 本文の枠 ---------- */
.wc_page .article {
  padding: 0 0 120px;
  background: none;
}
@media (max-width: 640px) {
  .wc_page .article {
    padding-bottom: 88px;
  }
}

.wc_page .article_inner {
  max-width: 880px;
  margin-inline: auto;
  padding: 0 40px;
  background: none;
  box-shadow: none;
}
@media (max-width: 640px) {
  .wc_page .article_inner {
    padding: 0 16px;
  }
}

.wc_page .article_body {
  padding: 0;
  background: none;
}

/* 冒頭の案内文（CMS の本文ブロック） */
.wc_page .mod_cont .editor {
  color: var(--wc_text);
  font-size: 15px;
}
.wc_page .mod_cont .editor p {
  margin: 0 0 14px;
  color: var(--wc_muted);
  line-height: 2;
}
.wc_page .mod_cont .editor a:not([class]) {
  color: var(--wc_accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 相談から納品までの4段（本文ブロックの .wc_flow） */
.wc_page .wc_flow {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 36px 0 32px;
  padding: 0;
  list-style: none;
  counter-reset: wc_flow;
}
.wc_page .wc_flow::before {
  content: "";
  position: absolute;
  top: 21px;
  left: 6%;
  right: 6%;
  height: 2px;
  background: var(--wc_line);
}
.wc_page .wc_flow::after {
  content: "";
  position: absolute;
  top: 21px;
  left: 6%;
  width: 88%;
  height: 2px;
  background: linear-gradient(90deg, var(--wc_accent), var(--wc_orange));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.wc_page .wc_flow.is_in::after {
  transform: scaleX(1);
}
@media (max-width: 640px) {
  .wc_page .wc_flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 22px;
  }
  .wc_page .wc_flow::before, .wc_page .wc_flow::after {
    display: none;
  }
}

.wc_flow_item {
  position: relative;
  counter-increment: wc_flow;
  text-align: center;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s, transform 0.6s cubic-bezier(0.3, 1.45, 0.5, 1);
  transition-delay: calc(var(--i, 0) * 0.28s + 0.2s);
}
.is_in .wc_flow_item {
  opacity: 1;
  transform: none;
}
.wc_flow_item::before {
  content: counter(wc_flow, decimal-leading-zero);
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0 auto 10px;
  border: 2px solid var(--wc_accent);
  border-radius: 10px;
  background: var(--wc_bg);
  color: var(--wc_accent);
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px;
  font-weight: 500;
  transform: rotate(45deg);
}
[data-design=dark] .wc_flow_item::before {
  border-radius: 50%;
  transform: none;
  box-shadow: 0 0 16px rgba(90, 169, 255, 0.45);
}
.wc_flow_item b {
  display: block;
  color: var(--wc_text);
  font-size: 15px;
}
.wc_flow_item span {
  display: block;
  margin-top: 2px;
  color: var(--wc_muted);
  font-size: 12px;
  line-height: 1.7;
}

/* 利用目的の囲み */
.wc_page .contact_purpose {
  margin: 28px 0 18px;
  padding: 22px 26px;
  border: 1px solid var(--wc_line);
  border-radius: var(--wc_radius);
  background: var(--wc_surface);
  box-shadow: var(--wc_shadow);
}

.wc_page .contact_purpose_title {
  margin: 0 0 10px;
  color: var(--wc_accent);
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  letter-spacing: 0.12em;
}

.wc_page .contact_purpose_list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.wc_page .contact_purpose_list li {
  position: relative;
  padding-left: 18px;
  color: var(--wc_muted);
  font-size: 14px;
  line-height: 1.9;
}
.wc_page .contact_purpose_list li::before {
  content: "";
  position: absolute;
  top: 0.8em;
  left: 0;
  width: 8px;
  height: 2px;
  background: var(--wc_accent);
}

.wc_page .article_relate {
  margin: 0;
  color: var(--wc_muted);
  font-size: 13px;
}

.wc_page .article_relate_link {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--wc_accent);
  font-size: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.wc_page .article_relate_link::after, .wc_page .article_relate_link::before {
  display: none;
}

/* 確認・完了の画面では冒頭の案内を畳む */
.wc_step_2 .mod_cont,
.wc_step_3 .mod_cont {
  display: none;
}
.wc_step_2 .page_head_lead,
.wc_step_3 .page_head_lead {
  display: none;
}

/* ---------- フォームの枠 ---------- */
.wc_page .form_page_wrap {
  position: relative;
  max-width: none;
  margin: 56px 0 0;
  padding: 48px 48px 44px;
  border: 1px solid var(--wc_line);
  border-radius: calc(var(--wc_radius) + 6px);
  background: var(--wc_surface);
  box-shadow: var(--wc_shadow);
  transition: background-color 0.5s, border-color 0.5s;
  /* 枠を光が一周する（ダーク） */
  /* 立体の厚み（ライト） */
}
[data-design=dark] .wc_page .form_page_wrap {
  backdrop-filter: blur(6px);
}
.wc_page .form_page_wrap::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--wc_spin, 0deg), transparent 0 70%, var(--wc_accent_hi) 80%, var(--wc_orange) 86%, transparent 92%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  pointer-events: none;
}
[data-design=dark] .wc_page .form_page_wrap::before {
  opacity: 1;
  animation: wc_spin 6s linear infinite;
}
.wc_page .form_page_wrap::after {
  content: "";
  position: absolute;
  left: 10px;
  right: -10px;
  bottom: -10px;
  height: 10px;
  border-radius: 0 0 calc(var(--wc_radius) + 6px) calc(var(--wc_radius) + 6px);
  background: #d4d8e0;
  transform: skewX(45deg);
  transform-origin: top;
  z-index: -1;
}
[data-design=dark] .wc_page .form_page_wrap::after {
  display: none;
}
@media (max-width: 900px) {
  .wc_page .form_page_wrap {
    padding: 36px 28px 32px;
  }
}
@media (max-width: 640px) {
  .wc_page .form_page_wrap {
    margin-top: 40px;
    padding: 28px 18px 26px;
  }
}

@property --wc_spin {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
@keyframes wc_spin {
  to {
    --wc_spin: 360deg;
  }
}
/* ステップ表示 */
.wc_page .form_steps {
  position: relative;
  display: flex;
  gap: 0;
  margin: 0 0 36px;
  padding: 0;
  list-style: none;
}
.wc_page .form_steps::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--wc_line);
}

.wc_page .form_step {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 10px 6px;
  border: 0;
  background: none;
  color: var(--wc_soft);
  font-size: 14px;
  white-space: nowrap;
}
.wc_page .form_step::after {
  display: none;
}
.wc_page .form_step .form_step_num {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--wc_line);
  border-radius: 8px;
  background: var(--wc_surface);
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  transition: background-color 0.4s, color 0.4s, box-shadow 0.4s;
}
[data-design=dark] .wc_page .form_step .form_step_num {
  border-radius: 50%;
}
.wc_page .form_step .form_step_label {
  padding: 0 4px;
  background: var(--wc_surface);
}
.wc_page .form_step.is_done {
  color: var(--wc_muted);
}
.wc_page .form_step.is_done .form_step_num {
  border-color: var(--wc_accent);
  color: var(--wc_accent);
}
.wc_page .form_step.is_current {
  color: var(--wc_text);
  font-weight: 700;
}
.wc_page .form_step.is_current .form_step_num {
  border-color: var(--wc_accent);
  background: var(--wc_accent);
  color: #ffffff;
  box-shadow: 0 0 0 6px rgba(90, 140, 220, 0.18);
  animation: wc_step 2.4s ease-in-out infinite;
}

@keyframes wc_step {
  50% {
    box-shadow: 0 0 0 11px rgba(90, 140, 220, 0);
  }
}
/* フォームの見出し */
.wc_page .form_page_head {
  margin: 0 0 30px;
  padding: 0;
  border: 0;
  text-align: left;
}
.wc_page .form_page_head::after {
  display: none;
}

.wc_page .form_page_label {
  display: block;
  margin: 0 0 8px;
  color: var(--wc_accent);
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.wc_page .form_page_label::before {
  content: "// ";
  color: var(--wc_orange);
}

.wc_page .form_page_title {
  margin: 0;
  color: var(--wc_text);
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 900;
  line-height: 1.4;
}
.wc_page .form_page_title::after {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  margin-top: 14px;
  background: var(--wc_char);
}

.wc_page .form_page_text {
  margin: 14px 0 0;
  color: var(--wc_muted);
  font-size: 14px;
}

/* エラー表示 */
.wc_page .form_error_box {
  margin: 0 0 26px;
  padding: 16px 20px;
  border: 1px solid var(--wc_orange);
  border-radius: var(--wc_radius);
  background: rgba(232, 132, 60, 0.08);
  color: var(--wc_text);
  animation: wc_shake 0.5s;
}

@keyframes wc_shake {
  20%, 60% {
    transform: translateX(-6px);
  }
  40%, 80% {
    transform: translateX(6px);
  }
}
/* ---------- 入力欄 ---------- */
.wc_page .form_field_list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}

.wc_page .form_field {
  position: relative;
  display: block;
  margin: 0;
  padding: 18px 20px 20px;
  border: 1px solid transparent;
  border-radius: var(--wc_radius);
  transition: border-color 0.3s, background-color 0.3s, transform 0.4s cubic-bezier(0.3, 1.45, 0.5, 1), box-shadow 0.3s;
  /* 下から順に現れる（JS が wc_reveal を付ける） */
  /* 入力済みの印（右上に小さな立方体／光る点） */
}
.wc_page .form_field.wc_reveal {
  opacity: 0;
  transform: translateY(18px);
}
.wc_page .form_field.wc_reveal.is_in {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s, transform 0.7s cubic-bezier(0.3, 1.45, 0.5, 1), border-color 0.3s, background-color 0.3s, box-shadow 0.3s;
  transition-delay: calc(var(--i, 0) * 70ms), calc(var(--i, 0) * 70ms), 0s, 0s, 0s;
}
.wc_page .form_field.is_focus {
  border-color: var(--wc_line);
  background: var(--wc_field_bg);
  transform: translateY(-2px);
  box-shadow: 0 10px 0 -4px rgba(43, 49, 64, 0.08), 0 14px 30px rgba(29, 34, 48, 0.07);
}
[data-design=dark] .wc_page .form_field.is_focus {
  border-color: var(--wc_line_hi);
  background: rgba(20, 38, 70, 0.45);
  box-shadow: 0 0 0 1px rgba(90, 169, 255, 0.2), 0 0 30px rgba(90, 169, 255, 0.12);
  transform: none;
}
.wc_page .form_field::after {
  content: "";
  position: absolute;
  top: 22px;
  right: 18px;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--wc_ok);
  transform: scale(0) rotate(45deg);
  transition: transform 0.45s cubic-bezier(0.3, 1.45, 0.5, 1);
}
[data-design=dark] .wc_page .form_field::after {
  border-radius: 50%;
  box-shadow: 0 0 12px var(--wc_ok);
}
.wc_page .form_field.is_filled::after {
  transform: scale(1) rotate(45deg);
}
@media (max-width: 640px) {
  .wc_page .form_field {
    padding: 14px 12px 16px;
  }
  .wc_page .form_field::after {
    top: 18px;
    right: 12px;
  }
}

.wc_page .form_field_label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  padding: 0;
  color: var(--wc_text);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}

.wc_page .required_mark {
  display: inline-block;
  padding: 1px 8px;
  border: 1px solid var(--wc_orange);
  border-radius: 999px;
  background: transparent;
  color: var(--wc_orange);
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.6;
}

.wc_page .form_field_input {
  position: relative;
  width: 100%;
}
.wc_page .form_field_input input[type=text],
.wc_page .form_field_input input[type=email],
.wc_page .form_field_input input[type=tel],
.wc_page .form_field_input input[type=number],
.wc_page .form_field_input textarea {
  width: 100%;
  margin: 0;
  padding: 14px 16px;
  border: 1px solid var(--wc_line);
  border-radius: 8px;
  background: var(--wc_surface_hi);
  color: var(--wc_text);
  font-family: inherit;
  font-size: 16px;
  line-height: 1.7;
  box-shadow: 0 2px 0 rgba(29, 34, 48, 0.04) inset;
  transition: border-color 0.25s, box-shadow 0.25s, background-color 0.25s;
}
.wc_page .form_field_input input[type=text]::placeholder,
.wc_page .form_field_input input[type=email]::placeholder,
.wc_page .form_field_input input[type=tel]::placeholder,
.wc_page .form_field_input input[type=number]::placeholder,
.wc_page .form_field_input textarea::placeholder {
  color: var(--wc_soft);
}
.wc_page .form_field_input input[type=text]:focus,
.wc_page .form_field_input input[type=email]:focus,
.wc_page .form_field_input input[type=tel]:focus,
.wc_page .form_field_input input[type=number]:focus,
.wc_page .form_field_input textarea:focus {
  outline: 0;
  border-color: var(--wc_accent);
  box-shadow: 0 0 0 4px rgba(59, 104, 181, 0.14);
}
[data-design=dark] .wc_page .form_field_input input[type=text],
[data-design=dark] .wc_page .form_field_input input[type=email],
[data-design=dark] .wc_page .form_field_input input[type=tel],
[data-design=dark] .wc_page .form_field_input input[type=number],
[data-design=dark] .wc_page .form_field_input textarea {
  background: rgba(2, 6, 15, 0.6);
  box-shadow: none;
}
[data-design=dark] .wc_page .form_field_input input[type=text]:focus,
[data-design=dark] .wc_page .form_field_input input[type=email]:focus,
[data-design=dark] .wc_page .form_field_input input[type=tel]:focus,
[data-design=dark] .wc_page .form_field_input input[type=number]:focus,
[data-design=dark] .wc_page .form_field_input textarea:focus {
  box-shadow: 0 0 0 1px var(--wc_accent), 0 0 22px rgba(90, 169, 255, 0.35);
}
.wc_page .form_field_input textarea {
  min-height: 200px;
  resize: vertical;
}

.wc_page .form_field_help {
  margin: 8px 0 0;
  color: var(--wc_soft);
  font-size: 12px;
  line-height: 1.8;
}

/* 入力欄の下を走る線（入力中だけ） */
.wc_scan {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 0;
  height: 2px;
  overflow: hidden;
  border-radius: 2px;
  pointer-events: none;
}
.wc_scan::before {
  content: "";
  position: absolute;
  top: 0;
  left: -40%;
  width: 40%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--wc_accent), var(--wc_orange), transparent);
  opacity: 0;
}
.is_focus .wc_scan::before {
  opacity: 1;
  animation: wc_scan 1.4s linear infinite;
}

@keyframes wc_scan {
  to {
    left: 100%;
  }
}
/* 文字数・確認一致の表示（JS が足す） */
.wc_page .wc_meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 8px;
  color: var(--wc_soft);
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  letter-spacing: 0.06em;
}

.wc_count_bar {
  position: relative;
  flex: 0 1 140px;
  height: 4px;
  border-radius: 4px;
  background: var(--wc_line);
  overflow: hidden;
}
.wc_count_bar span {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--wc_accent), var(--wc_ok));
  transform: scaleX(var(--wc_count, 0));
  transform-origin: left;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.wc_count_hint {
  color: var(--wc_muted);
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  letter-spacing: 0;
}
@media (max-width: 640px) {
  .wc_count_hint {
    flex: 1 1 100%;
    text-align: right;
  }
}

.wc_count_num {
  flex-shrink: 0;
  white-space: nowrap;
}

.wc_match {
  color: var(--wc_soft);
  transition: color 0.3s;
}
.wc_match.is_ok {
  color: var(--wc_ok);
}
.wc_match.is_ng {
  color: var(--wc_orange);
}

/* ---------- ご相談の種類（ラジオをタイルに） ---------- */
.wc_page .form_radio_group {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding-top: 4px;
}
@media (max-width: 900px) {
  .wc_page .form_radio_group {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .wc_page .form_radio_group {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
}

.wc_page .form_radio {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 64px;
  padding: 12px 14px;
  border: 1px solid var(--wc_line);
  border-radius: 8px;
  background: var(--wc_surface_hi);
  color: var(--wc_text);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  white-space: normal;
  cursor: pointer;
  box-shadow: 0 4px 0 #d4d8e0;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.25s, background-color 0.25s, color 0.25s;
  user-select: none;
  /* 丸は隠して、左に小さなアイコンの箱を出す */
}
.wc_page .form_radio:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 #d4d8e0;
}
.wc_page .form_radio input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
}
.wc_page .form_radio::before {
  content: attr(data-no);
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  background: var(--wc_bg);
  color: var(--wc_accent);
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  transition: background-color 0.25s, color 0.25s, transform 0.5s cubic-bezier(0.3, 1.45, 0.5, 1);
}
.wc_page .form_radio:has(input:focus-visible) {
  outline: 3px solid var(--wc_accent);
  outline-offset: 3px;
}
.wc_page .form_radio.is_checked {
  border-color: var(--wc_char);
  background: #2b3140;
  color: #ffffff;
  transform: translateY(4px);
  box-shadow: 0 0 0 #1c2029;
}
.wc_page .form_radio.is_checked::before {
  background: #3b68b5;
  color: #ffffff;
  transform: rotate(360deg);
}
[data-design=dark] .wc_page .form_radio {
  box-shadow: none;
  background: rgba(2, 6, 15, 0.5);
}
[data-design=dark] .wc_page .form_radio:hover {
  border-color: var(--wc_line_hi);
  box-shadow: 0 0 18px rgba(90, 169, 255, 0.15);
}
[data-design=dark] .wc_page .form_radio::before {
  border: 1px solid var(--wc_line_hi);
  border-radius: 50%;
  background: transparent;
}
[data-design=dark] .wc_page .form_radio.is_checked {
  border-color: var(--wc_accent);
  background: rgba(90, 169, 255, 0.14);
  color: #ffffff;
  transform: none;
  box-shadow: 0 0 0 1px var(--wc_accent), 0 0 26px rgba(90, 169, 255, 0.4);
}
[data-design=dark] .wc_page .form_radio.is_checked::before {
  border-color: var(--wc_accent);
  background: var(--wc_accent);
  color: #04101f;
}
@media (max-width: 640px) {
  .wc_page .form_radio {
    min-height: 52px;
    padding: 8px 12px;
    font-size: 14px;
  }
}

/* タイルを押した時に飛ぶ粒（JS） */
.wc_spark {
  position: fixed;
  z-index: 300;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--c, #3b68b5);
  pointer-events: none;
  animation: wc_spark 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes wc_spark {
  to {
    opacity: 0;
    transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(0.4);
  }
}
/* 選んだ種類の読み上げ（ダークは端末風） */
.wc_page .wc_readout {
  min-height: 1.8em;
  margin-top: 18px;
  color: var(--wc_muted);
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
}
.wc_page .wc_readout b {
  color: var(--wc_accent);
  font-weight: 500;
}
.wc_page .wc_readout::after {
  content: "_";
  margin-left: 2px;
  color: var(--wc_accent);
  animation: wc_blink 1s steps(1) infinite;
}

@keyframes wc_blink {
  50% {
    opacity: 0;
  }
}
/* ---------- 同意 ---------- */
.wc_page .form_agree {
  margin: 28px 0 0;
  padding: 22px 20px;
  border: 1px dashed var(--wc_line);
  border-radius: var(--wc_radius);
  background: none;
  text-align: left;
}

.wc_page .form_agree_label {
  display: block;
  margin: 0 0 8px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--wc_accent);
  text-align: left;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  letter-spacing: 0.12em;
}

.wc_page .form_agree_box {
  max-height: none;
  text-align: left;
  margin: 0 0 14px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--wc_muted);
  font-size: 13px;
  line-height: 1.9;
}
.wc_page .form_agree_box a {
  color: var(--wc_accent);
}

.wc_page .form_agree_check {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--wc_text);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.wc_page .form_agree_check input[type=checkbox] {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--wc_accent);
}

/* ---------- ボタン ---------- */
.wc_page .form_actions,
.wc_page .form_complete_actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px 20px;
  margin: 36px 0 0;
}
@media (max-width: 640px) {
  .wc_page .form_actions,
  .wc_page .form_complete_actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }
}

.wc_page .form_actions .btn,
.wc_page .form_complete_actions .btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 0;
  min-height: 56px;
  margin: 0;
  padding: 0 30px;
  border: 0;
  border-radius: 6px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.25s, color 0.25s;
}

.wc_page .btn_primary {
  background: #2b3140;
  color: #ffffff;
  box-shadow: 0 5px 0 #1c2029, 0 16px 30px rgba(29, 34, 48, 0.18);
}
.wc_page .btn_primary::after {
  content: "";
  width: 8px;
  height: 8px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.wc_page .btn_primary:hover {
  box-shadow: 0 8px 0 #1c2029, 0 24px 38px rgba(29, 34, 48, 0.2);
}
.wc_page .btn_primary:hover::after {
  transform: translateX(4px) rotate(45deg);
}
.wc_page .btn_primary:active {
  box-shadow: 0 1px 0 #1c2029, 0 6px 14px rgba(29, 34, 48, 0.16);
}
[data-design=dark] .wc_page .btn_primary {
  border-radius: 999px;
  background: #5aa9ff;
  color: #04101f;
  box-shadow: 0 0 0 1px rgba(159, 212, 255, 0.5), 0 0 24px rgba(90, 169, 255, 0.45);
}
[data-design=dark] .wc_page .btn_primary:hover {
  background: #9fd4ff;
  box-shadow: 0 0 0 1px rgba(159, 212, 255, 0.8), 0 0 40px rgba(90, 169, 255, 0.75);
}

.wc_page .btn_outline {
  border: 1px solid var(--wc_line) !important;
  background: transparent;
  color: var(--wc_text);
}
.wc_page .btn_outline:hover {
  background: rgba(90, 120, 170, 0.08);
}
[data-design=dark] .wc_page .btn_outline {
  border-radius: 999px;
}

/* 吸い付くボタン（JS が --mx/--my を入れる） */
.wc_magnet {
  transform: translate(var(--mx, 0), var(--my, 0));
}
.wc_page .wc_magnet:active {
  transform: translate(var(--mx, 0), calc(var(--my, 0px) + 4px));
}

/* 押せない時（必須がそろっていない）も押せるが、少し沈んで見せる */
.wc_page .btn_primary.is_wait {
  opacity: 0.55;
}

/* ---------- 確認画面 ---------- */
.wc_page .form_confirm {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

.wc_page .form_confirm_list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
}

.wc_page .form_confirm_row {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 16px;
  margin: 0;
  padding: 16px 18px;
  border: 1px solid var(--wc_line);
  border-radius: 8px;
  background: var(--wc_surface_hi);
  opacity: 0;
  transform: perspective(600px) rotateX(-70deg);
  transform-origin: top;
  animation: wc_flip 0.6s cubic-bezier(0.3, 1.45, 0.5, 1) forwards;
  animation-delay: calc(var(--i, 0) * 110ms + 150ms);
}
.wc_page .form_confirm_row dt {
  color: var(--wc_muted);
  font-size: 13px;
  font-weight: 700;
}
.wc_page .form_confirm_row dd {
  margin: 0;
  color: var(--wc_text);
  font-size: 15px;
  word-break: break-word;
}
[data-design=dark] .wc_page .form_confirm_row {
  background: rgba(2, 6, 15, 0.55);
  transform: none;
  animation-name: wc_fade;
}
[data-design=dark] .wc_page .form_confirm_row dt {
  color: var(--wc_accent_hi);
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  font-weight: 500;
}
[data-design=dark] .wc_page .form_confirm_row dt::before {
  content: "> ";
  color: var(--wc_orange);
}
@media (max-width: 640px) {
  .wc_page .form_confirm_row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

@keyframes wc_flip {
  to {
    opacity: 1;
    transform: none;
  }
}
.wc_page .form_confirm_empty {
  color: var(--wc_soft);
}

.wc_page .form_confirm_agree {
  margin: 20px 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--wc_muted);
  font-size: 13px;
}

.wc_page .form_confirm_agree_label {
  margin: 0;
  color: var(--wc_accent);
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  letter-spacing: 0.12em;
}

.wc_page .form_confirm_agree_text {
  margin: 4px 0 0;
}

/* ---------- 完了画面 ---------- */
.wc_page .form_complete {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

.wc_page .form_complete_card {
  position: relative;
  margin: 0;
  padding: 24px 0 0;
  border: 0;
  background: none;
  box-shadow: none;
  text-align: center;
}

/* JS が置く、閉じる箱（ライト）／広がる電波（ダーク） */
.wc_done {
  position: relative;
  width: 160px;
  height: 160px;
  margin: 0 auto 26px;
}

.wc_done_box {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
[data-design=dark] .wc_done_box {
  display: none;
}
.wc_done_box .wc_cube {
  --s: 96px;
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  animation: wc_land 0.9s cubic-bezier(0.3, 1.45, 0.5, 1) both;
}

.wc_done_lid {
  position: absolute;
  top: 25px;
  left: 50%;
  width: 96px;
  height: 55px;
  margin-left: -48px;
  filter: drop-shadow(0 0 1px #2b3140) drop-shadow(0 3px 0 rgba(43, 49, 64, 0.35));
  animation: wc_lid 0.8s 0.7s cubic-bezier(0.3, 1.45, 0.5, 1) both;
  /* 菱形は内側の要素で切り抜く（同じ要素で切ると影まで消える） */
}
.wc_done_lid::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #ffffff, #e6ecf6);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.wc_done_stamp {
  position: absolute;
  right: -6px;
  bottom: 4px;
  padding: 4px 10px;
  border: 3px solid #c8452f;
  border-radius: 6px;
  color: #c8452f;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.1em;
  transform: rotate(-14deg) scale(2.4);
  opacity: 0;
  animation: wc_stamp 0.35s 1.5s cubic-bezier(0.5, 0, 0.75, 0) forwards;
}
[data-design=dark] .wc_done_stamp {
  display: none;
}

@keyframes wc_land {
  from {
    opacity: 0;
    transform: translateY(-80px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes wc_lid {
  from {
    transform: translateY(-70px) rotate(-30deg);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes wc_stamp {
  to {
    opacity: 1;
    transform: rotate(-14deg) scale(1);
  }
}
.wc_done_radar {
  position: absolute;
  inset: 0;
  display: none;
}
[data-design=dark] .wc_done_radar {
  display: block;
}
.wc_done_radar i {
  position: absolute;
  inset: 0;
  border: 1px solid var(--wc_accent);
  border-radius: 50%;
  opacity: 0;
  animation: wc_radar 2.4s ease-out infinite;
}
.wc_done_radar i:nth-child(2) {
  animation-delay: 0.8s;
}
.wc_done_radar i:nth-child(3) {
  animation-delay: 1.6s;
}
.wc_done_radar b {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border-radius: 50%;
  background: var(--wc_accent_hi);
  box-shadow: 0 0 30px var(--wc_accent), 0 0 60px var(--wc_accent);
}

@keyframes wc_radar {
  from {
    opacity: 0.9;
    transform: scale(0.15);
  }
  to {
    opacity: 0;
    transform: scale(1);
  }
}
.wc_page .form_complete_icon {
  display: none;
}

.wc_page .form_complete_label {
  display: block;
  margin: 0 0 8px;
  color: var(--wc_accent);
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.wc_page .form_complete_title {
  margin: 0;
  color: var(--wc_text);
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 900;
  line-height: 1.4;
}
.wc_page .form_complete_title::after {
  display: none;
}

.wc_page .form_complete_text {
  margin: 16px 0 0;
  color: var(--wc_muted);
  font-size: 15px;
  line-height: 2;
}

/* ---------- 入力の進み具合（右下に固定） ---------- */
.wc_meter {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px 10px 12px;
  border: 1px solid var(--wc_line);
  border-radius: 12px;
  background: var(--wc_surface_hi);
  box-shadow: 0 12px 30px rgba(29, 34, 48, 0.14);
  color: var(--wc_text);
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  transform: translateY(140%);
  transition: transform 0.6s cubic-bezier(0.3, 1.45, 0.5, 1), background-color 0.5s;
}
.wc_meter.is_show {
  transform: none;
}
.wc_meter.is_full {
  border-color: var(--wc_ok);
}
[data-design=dark] .wc_meter {
  border-color: var(--wc_line_hi);
  border-radius: 999px;
  background: rgba(5, 11, 24, 0.85);
  box-shadow: 0 0 30px rgba(90, 169, 255, 0.25);
  backdrop-filter: blur(8px);
}
@media (max-width: 640px) {
  .wc_meter {
    right: 12px;
    bottom: 12px;
    padding: 8px 12px 8px 10px;
  }
}

.wc_meter_text {
  white-space: nowrap;
}
.wc_meter_text b {
  color: var(--wc_accent);
  font-size: 16px;
  font-weight: 500;
}

/* ライト：立方体が積み上がる／ダーク：電波の棒が立つ */
.wc_meter_stack {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 30px;
}

.wc_meter_cell {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--wc_line);
  transform: translateY(0) scale(0.9);
  transition: background-color 0.3s, transform 0.5s cubic-bezier(0.3, 1.45, 0.5, 1), height 0.5s cubic-bezier(0.3, 1.45, 0.5, 1);
}
.wc_meter_cell.is_on {
  background: #3b68b5;
  transform: translateY(-4px) rotate(45deg) scale(1);
}
[data-design=dark] .wc_meter_cell {
  width: 5px;
  border-radius: 2px;
  height: calc(8px + var(--n) * 4px);
}
[data-design=dark] .wc_meter_cell.is_on {
  background: var(--wc_accent_hi);
  box-shadow: 0 0 8px var(--wc_accent);
  transform: none;
}

/* 入力済みの欄からメーターへ飛ぶ光（JS） */
.wc_flyer {
  position: fixed;
  z-index: 290;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 2px;
  background: #3b68b5;
  pointer-events: none;
  transform: rotate(45deg);
}
[data-design=dark] .wc_flyer {
  border-radius: 50%;
  background: #9fd4ff;
  box-shadow: 0 0 12px #5aa9ff, 0 0 24px #5aa9ff;
}

/* ---------- デザインの切り替え（左下） ---------- */
.wc_switch {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 45;
  display: flex;
  align-items: center;
  gap: 0;
  padding: 4px;
  border: 1px solid var(--wc_line);
  border-radius: 999px;
  background: var(--wc_surface_hi);
  color: var(--wc_muted);
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(29, 34, 48, 0.12);
}
.wc_switch span {
  position: relative;
  z-index: 1;
  padding: 6px 12px;
  white-space: nowrap;
  transition: color 0.3s;
}
.wc_switch .wc_switch_light {
  color: #ffffff;
}
.wc_switch .wc_switch_knob {
  position: absolute;
  z-index: 0;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  padding: 0;
  border-radius: 999px;
  background: #2b3140;
  transition: transform 0.45s cubic-bezier(0.3, 1.45, 0.5, 1), background-color 0.3s;
}
[data-design=dark] .wc_switch {
  border-color: var(--wc_line_hi);
  background: rgba(5, 11, 24, 0.85);
}
[data-design=dark] .wc_switch .wc_switch_light {
  color: var(--wc_muted);
}
[data-design=dark] .wc_switch .wc_switch_dark {
  color: #04101f;
}
[data-design=dark] .wc_switch .wc_switch_knob {
  background: #5aa9ff;
  transform: translateX(100%);
  box-shadow: 0 0 16px rgba(90, 169, 255, 0.6);
}
@media (max-width: 640px) {
  .wc_switch {
    left: 12px;
    bottom: 12px;
  }
}

/* View Transitions：斜めのブラインドが左下から右上へ返って塗り替わる（実績ページ /works/ と同じ演出） */
@property --wc_slat {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --wc_sweep {
  syntax: "<percentage>";
  inherits: false;
  initial-value: -40%;
}
::view-transition-old(root) {
  animation: wc_old 0.95s cubic-bezier(0.65, 0, 0.25, 1) both;
  mix-blend-mode: normal;
}

::view-transition-new(root) {
  -webkit-mask-image: repeating-linear-gradient(-55deg, #000 0 var(--wc_slat), transparent var(--wc_slat) 56px), linear-gradient(35deg, #000 var(--wc_sweep), transparent calc(var(--wc_sweep) + 40%));
  mask-image: repeating-linear-gradient(-55deg, #000 0 var(--wc_slat), transparent var(--wc_slat) 56px), linear-gradient(35deg, #000 var(--wc_sweep), transparent calc(var(--wc_sweep) + 40%));
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  mix-blend-mode: normal;
  animation: wc_slat 0.95s cubic-bezier(0.55, 0, 0.3, 1) both, wc_sweep 0.8s cubic-bezier(0.45, 0, 0.25, 1) both;
}

@keyframes wc_slat {
  from {
    --wc_slat: 0px;
  }
  to {
    --wc_slat: 56px;
  }
}
@keyframes wc_sweep {
  from {
    --wc_sweep: -40%;
  }
  to {
    --wc_sweep: 100%;
  }
}
@keyframes wc_old {
  to {
    transform: scale(0.965);
    filter: brightness(0.75);
  }
}
/* ---------- 空いている所をクリックで波紋 ---------- */
.wc_ripple {
  position: fixed;
  z-index: 1;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid var(--wc_accent);
  border-radius: 4px;
  pointer-events: none;
  transform: rotate(45deg);
  animation: wc_ripple 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
[data-design=dark] .wc_ripple {
  border-radius: 50%;
}

@keyframes wc_ripple {
  to {
    opacity: 0;
    transform: rotate(45deg) scale(6);
  }
}
/* ---------- フッター ---------- */
.wc_footer {
  position: relative;
  z-index: 2;
  padding: 44px 0 96px;
  border-top: 1px solid var(--wc_line);
  background: var(--wc_bg_deep);
  color: var(--wc_muted);
  transition: background-color 0.5s;
}
@media (max-width: 640px) {
  .wc_footer {
    padding: 36px 0 88px;
  }
}

.wc_footer_inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: 40px;
}
@media (max-width: 640px) {
  .wc_footer_inner {
    flex-direction: column;
    align-items: flex-start;
    padding-inline: 16px;
  }
}

.wc_footer_logo {
  margin: 0;
  color: var(--wc_text);
  font-size: 14px;
  font-weight: 700;
}

.wc_footer_links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.wc_footer_links li {
  flex-shrink: 0;
}
.wc_footer_links a {
  color: var(--wc_muted);
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
}
.wc_footer_links a:hover {
  color: var(--wc_accent);
}

.wc_footer_copy {
  flex-basis: 100%;
  margin: 0;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
}