/* ============================================================
   STAGE-X ASAKUSA — Contact
   LPと同じトークン／ブレークポイント（1200 / 900 / 640）
   ============================================================ */

/* --- header (contact: bottom border, no absolute) ---------------- */
.site-header{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:clamp(18px,2vw,28px) var(--pad-x);border-bottom:1px solid var(--line);
  position:relative;z-index:2;
}
.back{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;
  font-family:var(--font-en);font-size:clamp(14px,1.3vw,17px);letter-spacing:.22em;color:#dfe4ec;
  transition:color .3s;
}
.back:hover{color:var(--accent)}

/* --- page head --------------------------------------------------- */
.page-head{
  position:relative;overflow:hidden;
  padding:var(--section-y) var(--pad-x) clamp(40px,5vw,64px);
  display:flex;flex-direction:column;gap:clamp(14px,1.8vw,22px);
  z-index:2;
}
.page-head::before{
  content:"";position:absolute;right:-10%;top:-40%;width:60%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(36,179,255,.16) 0%,rgba(36,179,255,0) 62%);pointer-events:none;
}
.page-head h1{
  position:relative;margin:0;font-family:var(--font-en);font-weight:400;
  font-size:clamp(64px,9vw,128px);line-height:.92;letter-spacing:.02em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.page-head .lead{position:relative;margin:0;max-width:40em;font-size:clamp(14px,1.15vw,16px);line-height:2;color:#d5dbe5}

/* --- steps ------------------------------------------------------- */
.steps{
  list-style:none;margin:0;padding:0 var(--pad-x);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;
  position:relative;z-index:2;
}
.steps li{
  display:flex;align-items:center;gap:12px;padding:16px 0 14px;
  border-bottom:2px solid var(--line);color:var(--text-dim);
  font-size:clamp(13px,1.1vw,15px);letter-spacing:.06em;
  transition:color .3s,border-color .3s;
}
.steps .no{font-family:var(--font-en);font-size:clamp(18px,1.6vw,22px);letter-spacing:.14em}
.steps li[aria-current="step"]{color:#fff;border-bottom-color:var(--accent)}
.steps li[aria-current="step"] .no{color:var(--accent)}
.steps li.is-done{color:var(--text-mute);border-bottom-color:#1f5c6e}

/* --- form -------------------------------------------------------- */
.panel{padding:clamp(40px,5vw,72px) var(--pad-x) var(--section-y);position:relative;z-index:2}
.view{max-width:1040px;display:flex;flex-direction:column;gap:clamp(28px,3vw,40px)}
.view__title{margin:0;font-size:clamp(18px,1.6vw,22px);font-weight:700;letter-spacing:.06em}
.view__title:focus{outline:none}

.fields{display:flex;flex-direction:column}
.fieldset{border:0;margin:0;padding:0;min-width:0}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.field{
  display:grid;grid-template-columns:260px minmax(0,1fr);gap:12px 40px;
  padding:clamp(20px,2.2vw,28px) 0;border-top:1px solid var(--line);min-width:0;
}
.fields > :last-child .field,.fields > .field:last-child{border-bottom:1px solid var(--line)}
.field__label{
  display:flex;align-items:center;flex-wrap:wrap;gap:10px;align-self:start;
  padding-top:14px;font-size:15px;font-weight:700;letter-spacing:.04em;color:#fff;
}
.badge{
  display:inline-flex;align-items:center;height:22px;padding:0 8px;
  font-size:11px;font-weight:700;letter-spacing:.08em;line-height:1;
}
.badge--req{background:var(--accent);color:#07090f}
.badge--opt{border:1px solid var(--line-strong);color:var(--text-dim)}
.field__control{display:flex;flex-direction:column;gap:8px;min-width:0}
.hint{margin:0;font-size:12.5px;color:var(--text-dim)}

.input,.textarea{
  width:100%;min-height:56px;padding:14px 18px;
  background:var(--surface);color:#fff;border:1px solid var(--line-strong);border-radius:0;
  font:inherit;font-size:16px;line-height:1.6;
  transition:border-color .25s,background .25s,box-shadow .25s;
  -webkit-appearance:none;appearance:none;
}
.textarea{min-height:220px;resize:vertical}
.input::placeholder,.textarea::placeholder{color:#5f6a7a}
.input:hover,.textarea:hover{border-color:#3a4a5e}
.input:focus,.textarea:focus{
  outline:none;border-color:var(--accent);background:var(--surface-hi);
  box-shadow:0 0 0 3px rgba(94,224,255,.16);
}
.input[aria-invalid="true"],.textarea[aria-invalid="true"]{border-color:var(--error)}
.error{margin:0;display:flex;align-items:center;gap:6px;font-size:13px;color:var(--error)}
.error::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}

/* 種別（ラジオ） */
.choices{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.choice{position:relative;display:block;cursor:pointer}
.choice input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.choice span{
  display:flex;align-items:center;gap:12px;min-height:56px;padding:0 18px;
  background:var(--surface);border:1px solid var(--line-strong);
  font-size:15px;color:var(--text-mute);transition:border-color .25s,color .25s,background .25s;
}
.choice span::before{
  content:"";flex:none;width:16px;height:16px;border-radius:50%;
  border:1.5px solid #5f6a7a;transition:border-color .25s,box-shadow .25s,background .25s;
}
.choice:hover span{border-color:#3a4a5e}
.choice input:checked + span{border-color:var(--accent);color:#fff;background:var(--surface-hi)}
.choice input:checked + span::before{border-color:var(--accent);background:var(--accent);box-shadow:inset 0 0 0 3px var(--surface-hi)}
.choice input:focus-visible + span{outline:2px solid var(--accent);outline-offset:2px}
fieldset[aria-invalid="true"] .choice span{border-color:rgba(255,122,138,.55)}

/* 利用規約 */
.terms{display:flex;flex-direction:column;gap:14px}
.terms__title{margin:0;font-size:15px;font-weight:700;letter-spacing:.04em}
.terms__box{
  max-height:200px;overflow-y:auto;padding:20px 22px;
  background:var(--bg-alt);border:1px solid var(--line-strong);
  font-size:13px;line-height:1.95;color:var(--text-mute);
}
.terms__box p{margin:0 0 1em}
.terms__box p:last-child{margin-bottom:0}
.terms__box strong{color:#fff;font-weight:500}
.terms__box a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.terms__box ol{margin:0 0 1em 1.6em;padding:0}
.terms__box ol li{margin:.35em 0;padding-left:.3em}
.terms__box ol:last-child{margin-bottom:0}

.agree{position:relative;display:inline-flex;align-items:center;gap:14px;min-height:44px;cursor:pointer;align-self:flex-start}
.agree input{position:absolute;opacity:0;width:24px;height:24px;margin:0;cursor:pointer}
.agree .box{
  flex:none;width:24px;height:24px;border:1.5px solid #5f6a7a;background:var(--surface);
  display:grid;place-items:center;transition:border-color .25s,background .25s;
}
.agree .box svg{opacity:0;transition:opacity .2s}
.agree input:checked + .box{background:var(--accent);border-color:var(--accent)}
.agree input:checked + .box svg{opacity:1}
.agree input:focus-visible + .box{outline:2px solid var(--accent);outline-offset:3px}
.agree input[aria-invalid="true"] + .box{border-color:var(--error)}
.agree .txt{font-size:15px;font-weight:700;letter-spacing:.04em}

/* 送信エリア */
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.btn{min-width:280px;min-height:64px;padding:0 40px;font-size:16px;letter-spacing:.08em}

.summary{
  margin:0;padding:18px 22px;border:1px solid rgba(255,122,138,.5);background:rgba(255,122,138,.06);
  font-size:14px;color:#ffd3d9;
}
.summary:focus{outline:none}

/* 確認画面 */
.review{margin:0;display:flex;flex-direction:column}
.review .row{
  display:grid;grid-template-columns:260px minmax(0,1fr);gap:8px 40px;
  padding:clamp(18px,2vw,24px) 0;border-top:1px solid var(--line);
}
.review .row:last-child{border-bottom:1px solid var(--line)}
.review dt{font-size:14px;color:var(--text-dim);letter-spacing:.04em}
.review dd{margin:0;font-size:16px;color:#fff;white-space:pre-wrap;overflow-wrap:anywhere}
.review dd.empty{color:#5f6a7a}

/* 完了画面 */
.done{display:flex;flex-direction:column;gap:22px;max-width:40em}
.done__mark{
  width:64px;height:64px;border:1.5px solid var(--accent);display:grid;place-items:center;
}
/* 「送信完了」用に日本語フォントへ切替（Bebas Neue は欧文専用のため） */
.done h2{margin:0;font-family:var(--font-jp);font-weight:900;font-size:clamp(34px,4vw,52px);line-height:1.15;letter-spacing:.08em;color:#fff}
.done p{margin:0;font-size:15px;line-height:2;color:#d5dbe5}

/* ハニーポット（スパム対策） */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

/* ============================================================
   BREAKPOINT: 1200px
   ============================================================ */
@media (max-width:1200px){
  .field,.review .row{grid-template-columns:220px minmax(0,1fr);gap:12px 28px}
  .choices{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ============================================================
   BREAKPOINT: 900px — ラベルを入力欄の上へ
   ============================================================ */
@media (max-width:900px){
  .field,.review .row{grid-template-columns:1fr;gap:10px}
  .field__label{padding-top:0}
  .actions{flex-direction:column-reverse;align-items:stretch}
  .btn{width:100%;min-width:0}
}

/* ============================================================
   BREAKPOINT: 640px — スマホ
   ============================================================ */
@media (max-width:640px){
  .steps li{flex-direction:column;align-items:flex-start;gap:0;font-size:12px}
  .choices{grid-template-columns:1fr 1fr}
  .terms__box{max-height:240px;padding:16px 18px}
}

/* ============================================================
   CF7 マークアップ対応（追記）
   ・CF7 標準の応答表示は非表示
   ・radio / acceptance を既存デザインに寄せる
   ============================================================ */
.wpcf7-form{margin:0;padding:0}
.wpcf7-response-output{display:none !important}
.wpcf7-spinner{display:none !important}

/* radio ([radio category use_label_element ...]) */
.field__control .wpcf7-form-control-wrap[data-name="category"]{display:block;width:100%}
.wpcf7-radio{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.wpcf7-list-item{position:relative;margin:0;display:block;cursor:pointer}
.wpcf7-list-item > label{display:block;cursor:pointer;position:relative}
.wpcf7-list-item input[type="radio"]{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.wpcf7-list-item-label{
  display:flex;align-items:center;gap:12px;min-height:56px;padding:0 18px;
  background:var(--surface);border:1px solid var(--line-strong);
  font-size:15px;color:var(--text-mute);
  transition:border-color .25s,color .25s,background .25s;
}
.wpcf7-list-item-label::before{
  content:"";flex:none;width:16px;height:16px;border-radius:50%;
  border:1.5px solid #5f6a7a;
  transition:border-color .25s,box-shadow .25s,background .25s;
}
.wpcf7-list-item > label:hover .wpcf7-list-item-label{border-color:#3a4a5e}
.wpcf7-list-item input[type="radio"]:checked ~ .wpcf7-list-item-label,
.wpcf7-list-item input[type="radio"]:checked + .wpcf7-list-item-label{
  border-color:var(--accent);color:#fff;background:var(--surface-hi);
}
.wpcf7-list-item input[type="radio"]:checked ~ .wpcf7-list-item-label::before,
.wpcf7-list-item input[type="radio"]:checked + .wpcf7-list-item-label::before{
  border-color:var(--accent);background:var(--accent);box-shadow:inset 0 0 0 3px var(--surface-hi);
}
.wpcf7-list-item input[type="radio"]:focus-visible ~ .wpcf7-list-item-label,
.wpcf7-list-item input[type="radio"]:focus-visible + .wpcf7-list-item-label{
  outline:2px solid var(--accent);outline-offset:2px;
}

/* acceptance（[acceptance agree]） */
.wpcf7-acceptance .wpcf7-list-item{margin:0}
.wpcf7-acceptance .wpcf7-list-item > label{
  position:relative;display:inline-flex;align-items:center;gap:14px;
  min-height:44px;cursor:pointer;
}
.wpcf7-acceptance input[type="checkbox"]{
  position:absolute;opacity:0;width:24px;height:24px;margin:0;cursor:pointer;
}
.wpcf7-acceptance .wpcf7-list-item-label{
  display:inline-flex;align-items:center;gap:14px;
  font-size:15px;font-weight:700;letter-spacing:.04em;color:#fff;
  background:transparent;border:none;padding:0;min-height:0;
}
.wpcf7-acceptance .wpcf7-list-item-label::before{
  content:"";flex:none;width:24px;height:24px;border-radius:0;
  border:1.5px solid #5f6a7a;background:var(--surface);
  transition:border-color .25s,background .25s;
  box-shadow:none;
}
.wpcf7-acceptance input[type="checkbox"]:checked + .wpcf7-list-item-label::before{
  background:var(--accent);border-color:var(--accent);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2307090f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.5 4.5L19 7.5'/></svg>");
  background-repeat:no-repeat;background-position:center;background-size:16px 16px;
}
.wpcf7-acceptance input[type="checkbox"]:focus-visible + .wpcf7-list-item-label::before{
  outline:2px solid var(--accent);outline-offset:3px;
}

/* CF7 バリデーションチップ */
.wpcf7-not-valid-tip{
  margin:6px 0 0;display:flex;align-items:center;gap:6px;
  font-size:13px;color:var(--error);
}
.wpcf7-not-valid-tip::before{
  content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none;
}
.wpcf7-form-control.wpcf7-not-valid,
input.wpcf7-not-valid,
textarea.wpcf7-not-valid{border-color:var(--error) !important}

/* radio breakpoints */
@media (max-width:1200px){.wpcf7-radio{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.wpcf7-radio{grid-template-columns:1fr 1fr}}