/* Roomie v6 / 2026-10-13
   Follow the annotated TOP instructions. All rules are scoped to the real
   elements used by the page and override conflicting v2-v4 declarations.
   The footer button fixes apply to the shared footer on every page. */

/* 01: The left card must be "お悩み01" and the right one "お悩み02".
   Earlier correction files reversed the DOM's correct native order. */
@media (min-width: 769px) {
  html body#index .mv .box_mv { display: flex !important; flex-direction: row !important; }
  html body#index .mv .box_mv .item1 { order: 1 !important; }
  html body#index .mv .box_mv .item2 { order: 2 !important; }
}

/* 02: Vertically center the three pieces of hero copy as a single stack,
   preserving the original artwork and the absolutely positioned right panel. */
@media (min-width: 1151px) {
  html body#index .mv {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding-top: 0 !important;
  }
  html body#index .mv > .mv_brand_logo,
  html body#index .mv > .txt_mv1,
  html body#index .mv > .mv_txt {
    top: 28px !important;
    transform: none !important;
  }
}

/* 03: The topmost duplicate AI roundel was incorrectly created by ::after.
   The ORIGINAL yellow roundel is ::before. Restore ::after to its mascot art;
   do not hide that illustration or the CTA itself. */
html body#index .mv-primary-actions > .mv-primary-actions__inner .mv-primary-action--ai::after {
  content: "" !important;
  background: url('../images/u_ic_pick2.png') center / contain no-repeat !important;
  left: auto !important;
  top: auto !important;
  right: 12px !important;
  bottom: -8px !important;
  width: 88px !important;
  height: 88px !important;
  border: 0 !important;
  border-radius: 0 !important;
  transform: none !important;
  display: block !important;
  font-size: 0 !important;
  color: transparent !important;
  pointer-events: none !important;
}

/* 04 + 13: A thin white contour follows the transparency of the purchase
   illustration; neither the button's border nor its yellow background changes. */
html body#index .mv-primary-actions > .mv-primary-actions__inner .mv-primary-action--buy::before,
html body .site-footer .footer-cta__item--buy::before {
  filter: drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff)
          drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff)
          drop-shadow(1px 1px 0 #fff) drop-shadow(-1px -1px 0 #fff) !important;
}

/* 05 + 06 + 08: The two black slash decorations and the circular
   "いえうる一押し" graphic must ACTUALLY blink. Animate the actual
   ::before/::after images, never their enclosing text or whole card. */
@keyframes roomie-v6-blinking {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
html body#index .sec01 .ttl .tt::before,
html body#index .sec01 .ttl .tt::after,
html body#index .sec02 .info_sec02 .box_info .tt::after {
  animation: roomie-v6-blinking 1s ease-in-out infinite alternate !important;
}

/* 07: "売る？" remains continuously visible, including its background icon.
   v4 animated the whole text element, making the word blink too. */
html body#index .sec02 .tt2 .bg_txt_ic,
html body#index .sec02 .tt2 .bg_txt_ic::before,
html body#index .sec02 .tt2 .bg_txt_ic::after {
  animation: none !important;
  opacity: 1 !important;
}

/* 09 + 10: POINT01 bubble floats; its letters never blink.
   A movement on the bubble parent moves the background and letters together. */
@keyframes roomie-v6-bubble-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
html body#index .sec03 .info_sec03 .item1 .tt_popup.tt2 {
  animation: roomie-v6-bubble-float 2s ease-in-out infinite !important;
  opacity: 1 !important;
}
html body#index .sec03 .info_sec03 .item1 .tt_popup.tt2 .txt,
html body#index .sec03 .info_sec03 .item1 .tt_popup.tt2 .txt2 {
  animation: none !important;
  opacity: 1 !important;
}

/* 11: Only the small mascot on the pink FOOTER quick-assessment CTA:
   reduce its old ~3px outline to ~1.5px. Do not touch the sticky footer. */
html body .site-footer .footer-cta__item--ai::after {
  filter: drop-shadow(1.5px 0 0 #fff) drop-shadow(-1.5px 0 0 #fff)
          drop-shadow(0 1.5px 0 #fff) drop-shadow(0 -1.5px 0 #fff) !important;
}

/* 12: Move ONLY the round yellow AI badge in that footer CTA ~1 full-width
   character (16px) to the right. Do not move the whole button or footer nav. */
html body .site-footer .footer-cta__item--ai::before {
  left: 20px !important;
}

/* Respect users who disable motion; normal settings retain the requested
   blinking and floating animations. */
@media (prefers-reduced-motion: reduce) {
  html body#index .sec01 .ttl .tt::before,
  html body#index .sec01 .ttl .tt::after,
  html body#index .sec02 .info_sec02 .box_info .tt::after,
  html body#index .sec03 .info_sec03 .item1 .tt_popup.tt2 {
    animation: none !important;
  }
}