main { overflow-x: clip; overflow-y: visible; }
main.enhanced-layout { overflow: hidden; }
/* Native behavior on top of the migrated visual baseline. */
.site-layout {
  overflow: visible !important;
}

.hero-phones {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: float-phones 8s ease-in-out infinite;
}

#container .legal-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px 16px;
  width: 300px;
  bottom: 65px;
}

#container .legal-links p {
  line-height: 18px;
}

#container .legal-links a {
  color: inherit;
  -webkit-text-fill-color: inherit;
  text-decoration: none;
}

.store-link { transition: translate .3s cubic-bezier(.7,-.4,.4,1.4); }
.store-link:hover { translate: 0 -8px; }
a:focus-visible, summary:focus-visible { outline: 3px solid #4d41f5; outline-offset: 5px; }

#container .faq-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: auto;
  font-family: "Noto Sans JP:Medium", sans-serif;
  color: #000;
}

.faq-item {
  width: 100%;
  border: 1px solid #e5e7eb;
  border-bottom-width: 2px;
  border-radius: 8px;
  background: #fff;
  transition: box-shadow .3s;
}
.faq-item:hover { box-shadow: 0 1px 3px #0000001a; }
.faq-item summary {
  position: relative;
  display: block;
  padding: 12px 53px 12px 16px;
  list-style: none;
  cursor: pointer;
  font-weight: 500;
  font-size: 16px;
  line-height: 25.6px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-marker { color: #4f46e5; margin-right: 8px; }
.faq-plus {
  position: absolute;
  right: 27px;
  top: 50%;
  width: 15px;
  height: 15px;
  display: grid;
  place-content: center;
  font: 23px/15px sans-serif;
  translate: 0 -50%;
  transition: rotate .3s;
}
.faq-item[open] .faq-plus { rotate: 45deg; }
.faq-answer {
  padding: 20px 11px;
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
  overflow-wrap: anywhere;
}

@keyframes float-phones {
  0%,100% { transform: translateY(-15px); }
  50% { transform: translateY(15px); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-phones { animation: none; }
  .store-link, .faq-plus, .faq-item { transition: none; }
}

/* This animated decoration is absent from Figma's pre-rendered HTML. */
.hero-orb { position:absolute; opacity:.6; aspect-ratio:1; pointer-events:none; }
.hero-orb-art { position:absolute; inset:2.4%; overflow:hidden; animation:spin-orb 12s linear infinite; }
.hero-orb-art img { position:absolute; width:137.8%; height:137.8%; max-width:none; left:-18.9%; top:-18.9%; }
.site-layout--mobile .hero-orb { left:10.7469px; right:3.0887px; top:44.2479px; }
.site-layout--tablet .hero-orb { width:454.2603px; left:calc(50% - 10px); top:152px; }
.site-layout--desktop .hero-orb { width:705.7386px; left:calc(50% - 101px); top:72.3891px; }
@keyframes spin-orb { from { transform:rotate(183deg); } to { transform:rotate(543deg); } }
@media(prefers-reduced-motion:reduce) { .hero-orb-art { animation:none; transform:rotate(183deg); } }

[data-reveal] { transition:opacity .6s ease, translate .6s ease; }
[data-reveal].reveal-pending { opacity:0 !important; translate:0 70px; }
@media(prefers-reduced-motion:reduce) { [data-reveal] { transition:none; } }

/* Card battle replaces the memory-card feature in all three compositions. */
#container .battle-feature { color: inherit; text-decoration: none; }
#container .battle-feature-title { text-decoration: underline; text-underline-offset: .2em; }
#container .battle-feature-image { width: 100%; height: 100%; top: 0; left: 0; object-fit: contain; }

/* Reserve room without changing the imported artboards' percentage anchors. */
#container { --battle-guide-space: 420px; padding-bottom: var(--battle-guide-space); }
#container .after-battle-guide { translate: 0 var(--battle-guide-space); }
#container .after-battle-guide.reveal-pending { translate: 0 calc(var(--battle-guide-space) + 70px); }
#container .battle-guide {
  position: absolute;
  left: 50%;
  width: min(694px, calc(100% - 48px));
  transform: translateX(-50%);
  padding: 24px;
  border: 1px solid #d9dcff;
  border-radius: 16px;
  background: #f4f4ff;
  color: #202020;
  font-family: "Noto Sans JP:Medium", sans-serif;
}
#container .battle-guide h2 { margin: 0 0 8px; font-size: 22px; line-height: 1.5; font-weight: 700; }
#container .battle-guide p { margin: 0 0 16px; font-size: 15px; line-height: 1.6; }
#container .battle-guide-phrase { display: inline-block; max-width: 100%; }
#container .battle-guide-link {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 44px;
  max-width: 100%;
  padding: 10px 16px;
  border-radius: 8px;
  background: #4d41f5;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
}
#container .battle-guide-link:hover { background: #3c31d5; }
#container .battle-guide--mobile { top: calc(50% + 305px); width: min(318px, calc(100% - 32px)); padding: 20px; }
#container .battle-guide--mobile .battle-guide-link { width: 100%; }
#container .battle-guide--tablet { top: calc(50% + 192.5px); }
#container .battle-guide--desktop { top: calc(50% + 294.5px); width: 964px; }

#container .battle-guide-visual { display: block; margin-bottom: 20px; border-radius: 10px; overflow: hidden; }
#container .battle-guide-visual img { display: block; width: 100%; height: auto; }
#container .battle-guide-copy { min-width: 0; }
@media (min-width: 800px) {
  #container { --battle-guide-space: 320px; }
  #container .battle-guide { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: center; }
  #container .battle-guide-visual { margin-bottom: 0; }
}
@media (min-width: 1440px) {
  #container { --battle-guide-space: 400px; }
}