@import url("https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css");
/* The following line is used to measure usage of this code. You can remove it if you want. */
@import url("https://px.animaapp.com/6963392116d0072ae88ec3c4.6963392216d0072ae88ec3c7.gEv98XS.hcp.png");

/* Force Yu Gothic consistently across all SP pages */
html,
body,
.sp-view,
.sp-view *,
.iphone-14-pro-home2,
.iphone-14-pro-home2 * {
  font-family: "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif !important;
}

.screen a {
  display: contents;
  text-decoration: none;
}

.container-center-horizontal {
  display: flex;
  flex-direction: row;
  justify-content: center;
  pointer-events: none;
  width: 100%;
}

.container-center-horizontal>* {
  flex-shrink: 0;
  pointer-events: auto;
}

.overlay-base {
  display: none;
  height: 100%;
  opacity: 0;
  position: fixed;
  top: 0;
  width: 100%;
}

.overlay-base.animate-appear {
  align-items: center;
  animation: reveal 0.3s ease-in-out 1 normal forwards;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0;
}

.overlay-base.animate-disappear {
  animation: reveal 0.3s ease-in-out 1 reverse forwards;
  display: block;
  opacity: 1;
  pointer-events: none;
}

.overlay-base.animate-disappear * {
  pointer-events: none;
}

@keyframes reveal {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

* {
  box-sizing: border-box;
}

.x426 {
  height: 24px;
  position: absolute;
  right: calc(4.83% - 1px);
  top: calc(50.00% - 12px);
  width: 31px;
}

.x5 {
  height: 4px;
  left: -2px;
  object-fit: cover;
  position: absolute;
  top: -2px;
  width: calc(100% + 4px);
}

.x6 {
  height: 4px;
  left: -2px;
  object-fit: cover;
  position: absolute;
  top: calc(50.00% - 2px);
  width: calc(100% + 4px);
}

.x7 {
  bottom: -2px;
  height: 4px;
  left: -2px;
  object-fit: cover;
  position: absolute;
  width: calc(100% + 4px);
}

.x427 {
  align-items: flex-end;
  bottom: calc(47.37% - 17px);
  cursor: pointer;
  display: flex;
  height: 36px;
  justify-content: space-between;
  left: 13px;
  position: absolute;
  width: 170px;
}

.logo-w {
  object-fit: cover;
  width: 35px;
}

.x153 {
  align-items: center;
  display: flex;
  height: 29px;
  margin-bottom: 0px;
  width: 128px;
}

.image {
  height: 44px;
  left: calc(50.00% - 79px);
  object-fit: cover;
  position: absolute;
  top: calc(9.00% - 4px);
  width: 158px;
}

.x2-3-15 {
  bottom: calc(47.21% - 17px);
  height: 37px;
  left: calc(44.93% - 134px);
  letter-spacing: 0;
  line-height: 20.6px;
  position: absolute;
  text-align: center;
  white-space: nowrap;
  width: 298px;
}

.copyright {
  bottom: calc(9.34% - 1px);
  height: 16px;
  left: calc(47.82% - 67px);
  letter-spacing: 0;
  line-height: 21.6px;
  position: absolute;
  white-space: nowrap;
  width: 141px;
}

.x439 {
  background-image: url('../img/cardboard-texture_200px.png'), url(../img/file---35@1x.png);
  background-position: left top, 50% 50%;
  background-size: auto, cover;
  background-repeat: repeat, no-repeat;
  background-blend-mode: multiply;
  height: 209px;
  width: 393px;
}

/* New Hamburger Menu Styles (Global) */
#mobile-menu {
  position: fixed;
  top: 0;
  left: auto;
  /* Unset left */
  right: 0;
  /* Align to right */
  width: 80%;
  /* Partial width */
  max-width: 300px;
  /* Max width for larger screens */
  height: 100vh;
  background-color: var(--white);
  z-index: 9999;
  transform: translateX(100%);
  transition: transform 0.3s ease-in-out;
  display: flex;
  flex-direction: column;
  box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
  /* Shadow to separate from content */
}

#mobile-menu.menu-open {
  transform: translateX(0);
}

#mobile-menu .menu-header {
  height: 55px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* To push close button to right if we add one */
  padding: 0 16px;
  position: relative;
}

#mobile-menu .menu-header .logo-area {
  display: flex;
  align-items: center;
}

#mobile-menu .logo-w {
  width: 35px;
  margin-right: 10px;
}

#mobile-menu .best {
  font-family: var(--font-family-yugothic-medium);
  font-size: var(--font-size-l);
  color: var(--fuscous-gray);
  font-weight: 500;
}

/* Close button - reuse the hamburger icon area but maybe make it an X? 
   For now, strictly following the design of the old menu which reused the header.
   We will make the header clickable to close, or add a specific close action.
*/
#mobile-menu .close-btn {
  /* Using the same position as the hamburger menu trigger */
  position: absolute;
  right: 16px;
  top: 16px;
  cursor: pointer;
  font-size: 24px;
}

#mobile-menu .menu-links {
  display: flex;
  flex-direction: column;
  padding: 40px 20px;
  gap: 30px;
}

#mobile-menu .menu-link-item {
  text-decoration: none;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
}

#mobile-menu .menu-text {
  font-family: var(--font-family-yugothic-bold);
  font-size: 26px;
  color: var(--fun-green);
  font-weight: 700;
}

#mobile-menu .ai-text {
  font-family: var(--font-family-yugothic-bold);
  font-size: 26px;
  color: var(--fun-green);
  font-weight: 700;
  /* padding-left: 20px; Removed to fix alignment */
}