@charset "UTF-8";
/* ==========================================================================
   CBC 来場登録（/visit/）と QR表示ページ（/visit/pass/）
   - STYLEGUIDE.md に従う。トークンは #pageVisit / #pageVisitPass にスコープ
   - 文字サイズは 14 / 16 / 20 / 24 / 32 / 40 / 48px のみ（ヒーロー英字は他ページと同じ演出例外）
   - 入力欄は 16px 未満にしない。iOS Safari は 16px 未満の入力欄にフォーカスすると画面を拡大する
   ========================================================================== */

#pageVisit,
#pageVisitPass {
  --cbc-ink: #333333;
  --cbc-ink-2: #4a4a4a;
  --cbc-muted: #9a9a9a;
  --cbc-line: #e2e2e2;
  --cbc-bg: #ffffff;
  --cbc-bg-soft: #f4f3f1;
  --cbc-yellow: #f5cf3d;
  --cbc-yellow-soft: #fbe79f;
  --cbc-teal: #56b0ac;
  --cbc-teal-soft: #cfe9e7;
  --cbc-pink: #e88b8b;
  --cbc-accent: #d23b2f;
  --cbc-card-border: #cfcfcf;
  --cbc-footer: #3d3b39;
  --cbc-link: #3f9c98;
  /* ボタン文字の白は --cbc-teal（#56b0ac）上だとコントラスト 2.7:1 で足りないため、濃いティールを追加 */
  --cbc-teal-dark: #2f7f7b;
  --cbc-teal-darker: #266a67;
  --cbc-accent-soft: #fff7f6;
  /* 以下3つは WCAG AA を満たすための追加。--cbc-muted（2.8:1）・--cbc-card-border（1.6:1）・--cbc-accent
     （灰色地で4.3:1）は、この画面の文字・入力欄の枠には薄すぎる */
  --cbc-ink-3: #707070;        /* 補助テキスト。白地で 4.9:1 */
  --cbc-input-border: #858585; /* 入力欄の枠。白地 3.7:1・--cbc-bg-soft 地 3.3:1（非テキスト基準 3:1） */
  --cbc-accent-text: #b8322a;  /* エラー文字。--cbc-bg-soft 地 5.4:1 */

  margin: 0;
  padding: 0;
  color: var(--cbc-ink);
  background: var(--cbc-bg);
  font-family: 'Zen Kaku Gothic New', -apple-system, 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', sans-serif;
  font-size: 1.6rem;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}
#pageVisit *,
#pageVisit *::before,
#pageVisit *::after,
#pageVisitPass *,
#pageVisitPass *::before,
#pageVisitPass *::after {
  box-sizing: border-box;
}

/* ============ HERO ============ */
.visitHero {
  background: linear-gradient(100deg, #ffffff 0%, #ffffff 24%, var(--cbc-teal-soft) 62%, var(--cbc-teal) 100%);
}
.visitHeroInner {
  max-width: var(--cbc-hero-max);
  margin: 0 auto;
  padding: 40px 32px;
  padding-left: var(--cbc-hero-pad-l);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 173px;
  gap: 6px;
}
.visitHeroTitle {
  font-family: 'Akshar', sans-serif;
  font-weight: 600;
  font-size: 6.4rem;
  line-height: 1.05;
  letter-spacing: 0.02em;
  margin: 0;
}
.visitHeroSub {
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--cbc-ink-2);
  margin: 0;
}

/* ============ BODY ============ */
.visitBody {
  background: var(--cbc-bg-soft);
  padding: 64px 0 80px;
}
.visitBodyInner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 32px;
}
.visitPanel {
  max-width: 760px;
  margin: 0 auto;
  background: var(--cbc-bg);
  border: 2px solid var(--cbc-card-border);
  padding: 40px 48px 48px;
}
.visitNotice p { margin: 0; }

/* ============ 手順表示 ============ */
.visitSteps {
  display: flex;
  gap: 8px;
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
  counter-reset: visitStep;
}
.visitStepsItem {
  flex: 1;
  counter-increment: visitStep;
  padding-top: 10px;
  border-top: 4px solid var(--cbc-line);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--cbc-ink-3);
}
.visitStepsItem::before { content: counter(visitStep) ". "; }
.visitStepsItem.is-done { border-top-color: var(--cbc-teal-soft); color: var(--cbc-ink-2); }
.visitStepsItem.is-current { border-top-color: var(--cbc-teal); color: var(--cbc-ink); }

.visitStepTitle {
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.5;
  margin: 0 0 8px;
}
.visitStepTitle:focus { outline: none; }
.visitLead {
  margin: 0 0 24px;
  color: var(--cbc-ink-2);
}
/* 人数選択の上に置く規約の案内。直前の .visitLead との間は詰め、人数ボタンとの間は空ける */
.visitLead + .visitTermsNote { margin-top: -16px; }
.visitTermsNote {
  margin: 0 0 24px;
  font-size: 1.4rem;
  color: var(--cbc-ink-2);
}

/* ============ 人数 ============ */
.visitCounts {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}
.visitCount {
  height: 72px;
  font-family: 'Akshar', sans-serif;
  font-size: 3.2rem;
  font-weight: 600;
  color: var(--cbc-ink);
  background: var(--cbc-bg);
  border: 2px solid var(--cbc-card-border);
  cursor: pointer;
}
.visitCount small {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: 1.4rem;
  margin-left: 2px;
}
.visitCount[aria-pressed="true"] {
  color: #ffffff;
  background: var(--cbc-teal-dark);
  border-color: var(--cbc-teal-dark);
}

/* ============ 入力 ============ */
.visitPerson {
  margin: 0 0 24px;
  padding: 24px 24px 8px;
  border: 1px solid var(--cbc-line);
  background: var(--cbc-bg-soft);
}
.visitPersonTitle {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--cbc-teal-darker);
  margin: 0 0 16px;
  padding: 0;
}
.visitRow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
}
.visitField {
  display: block;
  margin: 0 0 16px;
}
.visitFieldLabel {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--cbc-ink-2);
  margin-bottom: 4px;
}
.visitRequired,
.visitOptional {
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.4;
  padding: 0 6px;
}
.visitRequired { color: #ffffff; background: var(--cbc-accent); }
.visitOptional { color: var(--cbc-ink-2); background: var(--cbc-line); }
.visitInput {
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 1.6rem;
  color: var(--cbc-ink);
  background: var(--cbc-bg);
  border: 1px solid var(--cbc-input-border);
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}
select.visitInput {
  background-image: linear-gradient(45deg, transparent 50%, var(--cbc-ink-2) 50%), linear-gradient(135deg, var(--cbc-ink-2) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
  padding-right: 32px;
}
.visitInput:focus {
  outline: 3px solid var(--cbc-teal-soft);
  border-color: var(--cbc-teal-dark);
}
.visitInput[aria-invalid="true"] {
  border-color: var(--cbc-accent);
  background: var(--cbc-accent-soft);
}
.visitFieldError {
  margin: 4px 0 0;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--cbc-accent-text);
}
.visitError {
  margin: 0 0 24px;
  padding: 12px 16px;
  font-weight: 700;
  color: var(--cbc-accent-text);
  background: var(--cbc-accent-soft);
  border: 1px solid var(--cbc-accent);
}
.visitNote {
  margin: 0 0 24px;
  padding: 12px 16px;
  font-size: 1.4rem;
  color: var(--cbc-ink-2);
  background: var(--cbc-bg-soft);
}
/* 画面外に置く。display:none にすると入力しない機械もあるため */
.visitHoneypot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ============ 確認 ============ */
.visitReview { margin: 0 0 24px; }
.visitReview dl { margin: 0; }
.visitReviewRow {
  display: flex;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid var(--cbc-line);
}
.visitReviewRow dt {
  flex: none;
  width: 8em;
  font-size: 1.4rem;
  color: var(--cbc-ink-2);
}
.visitReviewRow dd {
  margin: 0;
  word-break: break-all;
}
.visitAgree {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 32px 0 8px;
  padding: 16px;
  border: 2px solid var(--cbc-card-border);
  cursor: pointer;
}
.visitAgree input {
  flex: none;
  width: 24px;
  height: 24px;
  margin: 2px 0 0;
  accent-color: var(--cbc-teal-dark);
}
/* 開催案内の受け取り。規約の同意のすぐ下に続けて置く（最初からチェックありなので、見落とされない位置と大きさを保つ） */
.visitAgree.is-optin {
  margin-top: 0;
  font-size: 1.4rem;
}
/* 同行者の「代表者と別の会社の方」。押しやすいよう文字まで含めて 44px 以上の高さにする */
.visitCheck {
  display: flex;
  gap: 12px;
  align-items: center;
  min-height: 44px;
  margin: 0 0 16px;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--cbc-ink);
  cursor: pointer;
}
.visitCheck input {
  flex: none;
  width: 24px;
  height: 24px;
  margin: 0;
  accent-color: var(--cbc-teal-dark);
}
/* 代表者だけの任意の質問。必須欄と混ざって「全部答えないと進めない」と思われないよう、線と見出しで区切る */
.visitOptionalGroup {
  margin: 8px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--cbc-line);
}
.visitOptionalGroupTitle {
  margin: 0 0 16px;
  font-size: 1.4rem;
  font-weight: 700;
  /* --cbc-ink-3 は --cbc-bg-soft 地だと 4.47:1 で AA に届かない */
  color: var(--cbc-ink-2);
}
/* 来場目的（複数選択）。legend は fieldset の枠に乗る既定の位置を外し、他の欄の見出しと同じ並びにする */
.visitChoiceGroup {
  margin: 0 0 16px;
  padding: 0;
  border: 0;
  min-width: 0;
}
.visitChoiceGroup legend { float: left; width: 100%; padding: 0; }
.visitChoiceList {
  clear: both;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
}
.visitCheck.is-choice {
  margin: 0;
  font-weight: 500;
}

/* サイト共通の --cbc-link（3.3:1）は本文リンクとして薄いので、この画面では濃いティールを使う */
.visitLink {
  color: var(--cbc-teal-dark);
  text-decoration: underline;
}
/* --cbc-teal-dark は灰色地（--cbc-bg-soft）だと 4.3:1 で AA に届かない */
.visitNote .visitLink { color: var(--cbc-teal-darker); }

/* ============ ボタン ============ */
.visitActions {
  display: flex;
  gap: 16px;
  margin-top: 32px;
}
.visitButton {
  flex: 1;
  min-height: 56px;
  padding: 12px 24px;
  font-family: inherit;
  font-size: 1.6rem;
  font-weight: 700;
  color: #ffffff;
  background: var(--cbc-teal-dark);
  border: 2px solid var(--cbc-teal-dark);
  cursor: pointer;
  transition: background-color .2s, border-color .2s;
}
.visitButton:hover { background: var(--cbc-teal-darker); border-color: var(--cbc-teal-darker); }
.visitButton.is-ghost { color: var(--cbc-teal-dark); background: var(--cbc-bg); }
.visitButton.is-ghost:hover { background: var(--cbc-teal-soft); }
.visitButton:disabled { opacity: .45; cursor: not-allowed; }
.visitButton:focus-visible,
.visitCount:focus-visible,
.visitAgree input:focus-visible,
.visitCheck input:focus-visible {
  outline: 3px solid var(--cbc-yellow);
  outline-offset: 2px;
}

/* ============ 完了・QR表示 ============ */
.visitPass {
  margin: 0 0 16px;
  padding: 24px;
  text-align: center;
  border: 2px solid var(--cbc-card-border);
}
.visitPassName {
  margin: 0;
  font-size: 2.4rem;
  font-weight: 700;
}
.visitPassSub {
  margin: 0 0 16px;
  font-size: 1.4rem;
  color: var(--cbc-ink-2);
}
/* QRは白地に余白を取る。余白が足りないと読み取り端末が位置を見失う */
.visitQr {
  display: inline-block;
  padding: 16px;
  background: #ffffff;
  border: 1px solid var(--cbc-line);
}
.visitQr img,
.visitQr canvas { display: block; }
.visitCode {
  margin: 12px 0 0;
  font-family: 'Akshar', sans-serif;
  font-size: 3.2rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}
/* 完了画面で複数名のQRを1枚ずつ切り替える */
.visitPass[hidden] { display: none; }
.visitPassOrder {
  margin: 0 0 4px;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--cbc-teal-darker);
}
.visitSliderNav {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 24px;
}
.visitSliderNav .visitButton { flex: none; min-width: 112px; min-height: 48px; }
/* 何人目かは各カードの上（.visitPassOrder）に見えているので、ここは読み上げ専用。
   ボタンの間に置くとスマホ幅で折り返して読みにくい */
.visitSliderCount {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.visitSubLink {
  margin: 16px 0 0;
  text-align: center;
  font-size: 1.4rem;
  color: var(--cbc-ink-2);
}

/* ============ 受付コードの再送（/visit/resend/） ============ */
.visitResendDone {
  margin: 0 0 24px;
  padding: 16px;
  font-weight: 700;
  color: var(--cbc-ink);
  background: var(--cbc-teal-soft);
}

/* ============ QR表示ページ（/visit/pass/） ============ */
#pageVisitPass { background: var(--cbc-bg-soft); }
.visitPassHeader {
  padding: 16px;
  text-align: center;
  background: var(--cbc-bg);
  border-bottom: 1px solid var(--cbc-line);
}
.visitPassLogo {
  display: inline-block;
  height: 32px;
  width: auto;
}
.visitPassMain { padding: 24px 16px 48px; }
.visitPassEyebrow {
  margin: 0 0 16px;
  text-align: center;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--cbc-teal-dark);
}
.visitPassNotes {
  margin: 24px 0;
  padding: 0 0 0 1.2em;
  font-size: 1.4rem;
  color: var(--cbc-ink-2);
}
.visitPassEvent { margin: 0; }

/* ============ 来場規約（/visit/terms/）の「確認中の案」帯 ============ */
/* このページの body は #pageTerms（terms.css）なので、#pageVisit のトークンは届かない。
   common.css の :root に既定値がある標準トークンだけを使う */
.visitDraftNotice {
  margin: 32px 0 0;
  padding: 12px 16px;
  font-weight: 700;
  color: var(--cbc-ink);
  background: var(--cbc-yellow-soft);
  border: 1px solid var(--cbc-yellow);
}

/* ============ SP ============ */
@media (max-width: 767px) {
  .visitHeroTitle { font-size: 4.8rem; }
  .visitBody { padding: 32px 0 48px; }
  .visitBodyInner { padding: 0 16px; }
  .visitPanel { padding: 24px 16px 32px; }
  .visitStepTitle { font-size: 2rem; }
  .visitCounts { grid-template-columns: repeat(3, 1fr); }
  .visitPerson { padding: 16px 16px 0; }
  .visitRow { grid-template-columns: 1fr; }
  .visitChoiceList { grid-template-columns: 1fr; }
  .visitReviewRow { flex-direction: column; gap: 0; }
  .visitReviewRow dt { width: auto; }
  .visitActions { flex-direction: column-reverse; gap: 12px; }
}

/* 動きを減らす設定の打ち消しは、打ち消す相手より後ろに置く（CLAUDE.md 基準43） */
@media (prefers-reduced-motion: reduce) {
  .visitButton { transition: none; }
}