/* 空飛ぶクルマが飛んでくる（/ar/）。文字は 15px 以上・本文 #374151（サイトの決まり） */
.arx { position: relative; height: min(76svh, 760px); min-height: 460px; overflow: hidden;
  background: linear-gradient(180deg, #bcd3ea 0%, #dfe9f3 48%, #f1efe9 74%, #ebe7df 100%); }
.arx__stage { position: absolute; inset: 0; touch-action: none; }
.arx__stage canvas { display: block; width: 100%; height: 100%; }
.arx__hud { position: absolute; left: 0; right: 0; top: 0; padding: 18px 16px 0; pointer-events: none; text-align: center; }
.arx__title { margin: 0; font-size: clamp(26px, 6vw, 44px); line-height: 1.3; font-weight: 900; color: var(--ink, #14253d); letter-spacing: .02em; }
.arx__status { margin: 8px auto 0; max-width: 34em; font-size: 16px; line-height: 1.6; font-weight: 700; color: #374151; min-height: 1.6em; }
.arx__bar { position: absolute; left: 0; right: 0; bottom: 18px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; padding: 0 16px; }
.arx__btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 10px 22px;
  border-radius: 999px; border: 0; background: #fff; color: var(--ink, #14253d); font: inherit; font-size: 17px; font-weight: 800;
  box-shadow: 0 6px 18px rgba(20, 37, 61, .18); cursor: pointer; }
.arx__btn:hover { background: #f3f6fa; }
.arx__btn:focus-visible { outline: 3px solid #0369a1; outline-offset: 2px; }
.arx__btn--main { background: #c2410c; color: #fff; }
.arx__btn--main:hover { background: #a3360a; }
.arx__btn[hidden] { display: none; }
.arx__note { position: absolute; left: 16px; right: 16px; bottom: 80px; margin: 0; text-align: center; font-size: 15px; font-weight: 700; color: #374151; }
.arx.is-error .arx__bar { display: none; }
.sp { display: none; }
@media (max-width: 600px) { .sp { display: inline; } }

/* パソコンで見たとき：スマホで開く QR */
.arx-qr { display: flex; gap: 18px; align-items: center; max-width: 760px; margin: 24px auto 0; padding: 0 16px; }
.arx-qr[hidden] { display: none; }
.arx-qr img { flex: none; background: #fff; padding: 6px; }
.arx-qr p { margin: 0; font-size: 15px; color: #374151; }
.arx-qr .arx-qr__h { font-size: 18px; font-weight: 800; color: var(--ink, #14253d); margin-bottom: 4px; }

.arx-text { padding-top: 8px; padding-bottom: 32px; }

/* カメラを使う前の説明 */
.arx-sheet { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center; background: rgba(20, 37, 61, .45); }
.arx-sheet[hidden] { display: none; }
.arx-sheet__in { width: 100%; max-width: 520px; background: #fff; padding: 24px 20px calc(20px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 30px rgba(0, 0, 0, .2); }
.arx-sheet__in p { margin: 0 0 10px; font-size: 17px; line-height: 1.7; color: #374151; }
.arx-sheet__in .arx-sheet__h { font-size: 22px; font-weight: 900; color: var(--ink, #14253d); }
.arx-sheet__btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.arx-sheet__btns .arx__btn { flex: 1 1 160px; }
.arx-sheet__btns .arx__btn:not(.arx__btn--main) { box-shadow: none; background: #eef2f7; }
@media (min-width: 640px) { .arx-sheet { align-items: center; } }

/* AR の間の覆い（カメラの映像の上） */
.arx-arui { position: fixed; inset: 0; pointer-events: none; font-family: var(--font, sans-serif); }
.arx-arui[hidden] { display: none; }
.arx-arui__status { pointer-events: none; margin: calc(14px + env(safe-area-inset-top)) 14px 0; padding: 10px 14px; background: rgba(10, 20, 34, .62); color: #fff; font-size: 17px; line-height: 1.6; font-weight: 700; text-align: center; }
.arx-arui__btns { position: absolute; left: 0; right: 0; bottom: calc(18px + env(safe-area-inset-bottom)); display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; padding: 0 14px; }
.arx-arui__btns .arx__btn { pointer-events: auto; }

@media (prefers-reduced-motion: reduce) { .arx__btn { transition: none; } }