@charset "UTF-8";
/* =====================================================================
   手机端样式（Figma 390px 设计稿，1rem = 100px @390 视口）
   节点：1:4156 首页 / 1:2890 侧滑菜单
   ===================================================================== */

@media screen and (max-width: 768px) {
  /* 1rem = 100px @390px 视口 */
  html { font-size: 25.641vw; }

  .page {
    max-width: none;
    width: 100%;
  }

  /* ---------- 页眉 ---------- */
  .header__topbar { height: 0.45rem; }
  .header__topbar-inner {
    max-width: none;
    padding: 0 0.1rem;
    justify-content: center;
  }
  .header__topbar-text {
    font-size: 0.11rem;
    line-height: 0.16rem;
    white-space: normal;
    text-align: center;
  }
  .header__topbar-links { display: none; }

  .header__main { height: 0.71rem; }
  .header__main-inner {
    max-width: none;
    padding: 0 0.1rem;
    gap: 0;
    flex-wrap: nowrap;
  }

  /* 汉堡 MENU / 閉じる（设计稿：图标+文字黑色，打开时同位切换） */
  .header__menu-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 0.52rem;
    height: 0.5rem;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    color: #000;
    line-height: 1;
  }
  .header__menu-icon {
    display: block;
    flex-shrink: 0;
  }
  .header__menu-icon--bars {
    width: 0.22rem;
    height: 0.14rem;
    background:
      linear-gradient(#000, #000) 0 0 / 100% 0.02rem no-repeat,
      linear-gradient(#000, #000) 0 50% / 100% 0.02rem no-repeat,
      linear-gradient(#000, #000) 0 100% / 100% 0.02rem no-repeat;
  }
  .header__menu-icon--close {
    display: none;
    position: relative;
    width: 0.22rem;
    height: 0.22rem;
  }
  .header__menu-icon--close::before,
  .header__menu-icon--close::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.22rem;
    height: 0.02rem;
    background: #000;
    transform-origin: center;
  }
  .header__menu-icon--close::before {
    transform: translate(-50%, -50%) rotate(45deg);
  }
  .header__menu-icon--close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
  }
  .header__menu-text {
    margin-top: 0.04rem;
    font-size: 0.1rem;
    letter-spacing: 0.002rem;
    line-height: 1;
  }
  .header__menu-text--menu {
    font-family: var(--ff-en);
    font-weight: 700;
  }
  .header__menu-text--close {
    display: none;
    font-family: var(--ff-jp);
    font-weight: 500;
  }
  body.is-menu-open .header {
    position: relative;
    z-index: 301;
  }
  body.is-menu-open .header__menu-icon--bars,
  body.is-menu-open .header__menu-text--menu {
    display: none;
  }
  body.is-menu-open .header__menu-icon--close,
  body.is-menu-open .header__menu-text--close {
    display: block;
  }

  .brand {
    flex: 1;
    align-items: center;
    text-align: center;
  }
  .brand__name {
    font-size: 0.284rem;
    line-height: 0.25rem;
  }
  .brand__sub {
    font-size: 0.1rem;
    margin-top: 0.02rem;
    letter-spacing: 0;
  }

  .header__contact { display: none; }
  .navbar { display: none; }

  .header__actions {
    margin-left: 0;
    gap: 0.06rem;
    flex-shrink: 0;
  }
  .header__action {
    width: 0.52rem;
    height: 0.5rem;
    border-radius: 0.04rem;
    gap: 0.02rem;
  }
  .header__action img {
    width: 0.2rem;
    height: 0.2rem;
  }
  .header__action span {
    font-size: 0.1rem;
    letter-spacing: 0;
  }

  /* ---------- Hero ---------- */
  .hero {
    --hero-slides-per-view: 1;
    padding: 0;
    background: var(--c-gray-bg);
  }
  .hero-swiper {
    height: 1.57rem;
  }
  .hero-swiper .swiper-slide {
    border-radius: 0;
  }
  .hero__slider {
    overflow: visible;
  }
  .hero__nav {
    display: flex;
    width: 0.36rem;
    height: 0.36rem;
    z-index: 10;
  }
  .hero__nav--prev { left: 0; }
  .hero__nav--next { right: 0; }
  .hero__dots {
    gap: 0.08rem;
    padding: 0.1rem 0 0.12rem;
  }
  .hero__dot {
    width: 0.08rem;
    height: 0.08rem;
  }

  /* ---------- 主体布局 ---------- */
  .layout {
    flex-direction: column;
    padding: 0.2rem 0.1rem 0;
    gap: 0;
  }
  .sidebar { display: none; }
  .content {
    width: 100%;
    gap: 0.3rem;
  }
  .panel {
    padding: 0.3rem 0.1rem 0.35rem;
  }
  .panel--gray { padding-top: 0.35rem; }
  .cat-hero.panel--gray,
  .tpl-head.panel {
    padding-top: 0.3rem;
  }
  .tpl-head {
    padding: 0.3rem 0.1rem 0;
  }
  .login,
  .register,
  .password {
    padding-top: 0.3rem;
  }
  .page--checkout .layout--checkout {
    padding-top: 0.2rem;
  }
  .checkout.panel {
    padding: 0.3rem 0.1rem 0.35rem;
  }
  .checkout .section-head {
    margin-bottom: 0.25rem;
  }
  .checkout-order {
    border-top: 0.01rem solid #afafaf;
  }
  .cart-order {
    border-top: 0.01rem solid #afafaf;
  }

  .section-head {
    height: 0.45rem;
    margin-bottom: 0.25rem;
  }
  .section-head__en {
    font-size: 0.36rem;
    line-height: 0.19rem;
  }
  .section-head__jp {
    top: 0.15rem;
    font-size: 0.24rem;
    line-height: 0.27rem;
  }
  .section-head__jp--lg {
    font-size: 0.2rem;
  }

  /* ---------- 商品 2 列 ---------- */
  .product-grid {
    grid-template-columns: repeat(2, 1.8rem);
    justify-content: space-between;
    column-gap: 0.1rem;
    row-gap: 0.2rem;
  }
  .product-card { gap: 0.12rem; }
  .product-card__tag {
    min-width: 0;
    height: 0.23rem;
    font-size: 0.14rem;
    padding: 0 0.08rem;
  }
  .product-card__tag--wide { min-width: 0; }
  .product-card__name {
    font-size: 0.14rem;
    line-height: 0.18rem;
  }
  .product-card__price { font-size: 0.14rem; }
  .product-card__price small { font-size: 0.1rem; }

  /* ---------- 促销 / 特集 单列 ---------- */
  .sale-grid {
    grid-template-columns: 1fr;
    gap: 0.15rem;
    margin-top: 0.3rem;
  }
  .sale-card__slider { height: 1.2rem; }
  .feature-grid {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }
  .feature-card__slider,
  .feature-card__slider .sale-swiper,
  .feature-card__slider .swiper-wrapper,
  .feature-card__slider .swiper-slide {
    height: auto;
  }
  .feature-card__img {
    height: auto;
    overflow: visible;
  }
  .feature-card__img img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  /* ---------- 尺寸展示（人物对比行 + 4×2 标签格） ---------- */
  .size-showcase {
    margin-top: 0.2rem;
    padding: 0;
    background: transparent;
  }
  .size-showcase__visual {
    display: flex;
    align-items: flex-end;
    gap: 0.04rem;
    margin-bottom: 0.14rem;
    padding: 0;
    overflow: visible;
  }
  .size-showcase__person {
    flex: 0 0 0.59rem;
    width: 0.59rem;
    height: 1.26rem;
    object-fit: contain;
    object-position: bottom;
  }
  .size-showcase__flags {
    display: flex;
    align-items: flex-end;
    gap: 0.02rem;
    flex: 1;
    min-width: 0;
  }
  .size-showcase__flags li {
    flex: 1 1 0;
    min-width: 0;
  }
  .size-showcase__flags img {
    display: block;
    width: 100%;
    height: 1.27rem;
    object-fit: contain;
    object-position: bottom;
  }
  .size-showcase__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.056rem;
  }
  .size-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: 0.61rem;
    padding: 0.06rem 0.04rem 0.05rem;
    background: #fff;
    border: 0.01rem solid var(--c-primary);
    border-radius: 0.05rem;
    box-shadow: 0 0.02rem 0.02rem rgba(0, 0, 0, 0.14), 0 0.01rem 0.05rem rgba(0, 0, 0, 0.12);
    gap: 0;
    flex: none;
  }
  .size-card__img { display: none; }
  .size-card__num {
    display: block;
    font-weight: 700;
    font-size: 0.14rem;
    line-height: 0.21rem;
    color: #231815;
    text-align: center;
  }
  .size-card__name {
    display: block;
    width: 100%;
    margin-top: 0.02rem;
    padding-bottom: 0.04rem;
    border-bottom: 0.01rem solid #231815;
    font-size: 0.098rem;
    line-height: 0.147rem;
    color: #231815;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .size-card__dim {
    display: block;
    width: auto;
    margin-top: 0.04rem;
    padding: 0;
    border: none;
    font-weight: 400;
    font-size: 0.098rem;
    line-height: 0.147rem;
    color: #231815;
    text-align: center;
    white-space: nowrap;
  }

  /* ---------- ご利用方法：4 步单行并排（Figma 92×166px） ---------- */
  .howto-steps {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: space-between;
    gap: 0;
    overflow: visible;
    padding: 0;
    margin-bottom: 0.15rem;
  }
  .howto-step {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
    height: 1.66rem;
    padding: 0.14756rem 0.02rem;
    gap: 0.11067rem;
    box-shadow: none;
  }
  .howto-step__num {
    width: 0.391rem;
    height: 0.391rem;
    font-size: 0.177rem;
    line-height: 0.146rem;
    flex-shrink: 0;
  }
  .howto-step__num small {
    font-size: 0.081rem;
    line-height: 0.099rem;
  }
  .howto-step__icon {
    flex: 0 0 auto;
    height: 0.5rem;
    width: auto;
    max-width: 0.52rem;
    object-fit: contain;
  }
  .howto-step__label {
    flex-shrink: 0;
    font-size: 0.13rem;
    line-height: 0.184rem;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
  }
  .howto-arrow {
    flex: 0 0 0;
    width: 0;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    position: relative;
    z-index: 2;
    margin: 0 -0.055rem;
  }
  .howto-arrow img {
    display: none;
  }
  /* 步骤间箭头：白底圆 + 蓝色 chevron（Figma 1:4296） */
  .howto-arrow::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 0.295rem;
    height: 0.295rem;
    background: #fff;
    border: 0.01rem solid #d7d7d7;
    border-radius: 50%;
    box-shadow: none;
  }
  .howto-arrow::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0.06rem;
    height: 0.06rem;
    margin-top: -0.025rem;
    margin-left: -0.042rem;
    border-top: 0.015rem solid var(--c-primary);
    border-right: 0.015rem solid var(--c-primary);
    transform: rotate(45deg);
  }
  .howto .more-btn--outline {
    width: 100%;
    max-width: none;
    margin-top: 0.12rem;
    padding: 0.1rem;
    font-size: 0.16rem;
    font-weight: 500;
    gap: 0.1rem;
  }
  .cart-howto {
    min-height: auto;
  }

  /* ---------- 新闻（Figma：标签+日期一行，标题另起一行） ---------- */
  .news-list {
    margin-bottom: 0.2rem;
  }
  .news-item a {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    height: auto;
    padding: 0.18rem 0;
    gap: 0.06rem 0.1rem;
  }
  .news-item__cat {
    grid-column: 1;
    grid-row: 1;
    width: auto;
    height: auto;
    padding: 0.01rem 0.06rem;
    font-size: 0.12rem;
    font-weight: 500;
    line-height: 1.4;
  }
  .news-item__date {
    grid-column: 2;
    grid-row: 1;
    font-weight: 400;
    font-size: 0.12rem;
    line-height: 1.4;
    color: #000;
  }
  .news-item__title {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    margin: 0.02rem 0 0;
    font-size: 0.14rem;
    font-weight: 700;
    line-height: 1.45;
    color: #000;
  }
  .news .more-btn--solid {
    width: 100%;
    max-width: none;
  }

  /* ---------- 商品详情页 ---------- */
  .page--product {
    overflow-x: hidden;
  }
  .page--product .layout--product {
    padding-top: 0;
  }
  .pd-head {
    padding: 0.1rem 0.1rem 0;
  }
  .pd-overview {
    padding: 0.16rem 0.1rem 0.24rem;
  }
  .pd-overview__inner {
    grid-template-columns: 1fr;
    row-gap: 0.16rem;
    padding: 0.16rem 0.1rem;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
  }
  .pd-gallery {
    margin-left: 0;
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
  .pd-gallery__main {
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
  }
  .pd-gallery__thumbs {
    gap: 0.06rem;
    margin-top: 0.08rem;
    max-width: 100%;
  }
  .pd-gallery__thumb {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    height: auto;
    aspect-ratio: 1 / 1;
  }
  .pd-info {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
  .pd-info__title,
  .pd-info__lead,
  .pd-info__desc {
    max-width: 100%;
    width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .pd-info__cta {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin-bottom: 0.2rem;
  }

  /* ---------- 新規登録 ---------- */
  .register-form-table__code {
    flex-wrap: nowrap;
    gap: 0.04rem;
    min-width: 0;
  }
  .register-form-table__input--code {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
    width: auto;
  }
  .register-form-table__code-btn {
    flex: 0 0 0.5rem;
    width: 0.5rem;
    min-width: 0.5rem;
    max-width: 0.5rem;
    padding: 0 0.02rem;
    font-size: 0.09rem;
    line-height: 1.1;
    white-space: normal;
    word-break: keep-all;
  }

  /* ---------- マイページ注文：缩略图与 opts 同行对齐 ---------- */
  .page--mypage-order .mypage-order__row,
  .page--mypage-order .mypage-order__row--alt {
    grid-template-columns: minmax(0, 1fr) !important;
    min-height: 0 !important;
    align-items: start !important;
  }
  .page--mypage-order .mypage-order__product {
    display: grid !important;
    grid-template-columns: 1.2rem minmax(0, 1fr) !important;
    grid-template-areas:
      "badge badge"
      "name name"
      "thumb opts" !important;
    column-gap: 0.1rem;
    row-gap: 0.04rem;
    align-items: center;
    padding: 0.1rem 0.12rem;
    border-right: none;
    border-bottom: 0.01rem solid #afafaf;
  }
  .page--mypage-order .mypage-order__product:not(:has(.mypage-order__opts)) {
    grid-template-areas:
      "badge badge"
      "thumb name" !important;
  }
  .page--mypage-order .mypage-order__product:not(:has(.mypage-order__badge)) {
    grid-template-areas:
      "name name"
      "thumb opts" !important;
  }
  .page--mypage-order .mypage-order__product:not(:has(.mypage-order__badge)):not(:has(.mypage-order__opts)) {
    grid-template-areas:
      "thumb name" !important;
  }
  .page--mypage-order .mypage-order__thumb {
    grid-area: thumb !important;
    width: 1.2rem !important;
    height: 1.2rem !important;
    object-fit: contain;
    background: #f5f5f5;
    border: 0.01rem solid #e9e9e9;
    margin: 0 !important;
    align-self: center !important;
  }
  .page--mypage-order .mypage-order__product:not(:has(.mypage-order__opts)) .mypage-order__thumb {
    align-self: start !important;
  }
  .page--mypage-order .mypage-order__badge {
    grid-area: badge !important;
    margin: 0 0 0.02rem !important;
  }
  .page--mypage-order .mypage-order__name {
    grid-area: name !important;
    margin: 0 0 0.04rem !important;
  }
  .page--mypage-order .mypage-order__opts {
    grid-area: opts !important;
    margin: 0 !important;
    align-self: center;
    font-size: 0.13rem;
    line-height: 1.45;
  }

  /* ---------- 联系 / 页脚 ---------- */
  .contact {
    padding: 0.35rem 0.1rem;
  }
  .contact .section-head {
    margin-bottom: 0.3rem;
  }
  .contact__cols {
    flex-direction: column;
    gap: 0.15rem;
  }
  .contact__box {
    width: 100%;
    padding: 0.2rem;
  }
  .contact__tel { font-size: 0.28rem; }
  .contact__tel span { font-size: 0.2rem; }
  .contact__form-title { font-size: 0.18rem; }
  .contact__box--form .contact__form-arrow {
    display: none;
  }

  /* ---------- 页脚 footer__main-wrap（Figma #ebf1fa 居中布局） ---------- */
  .footer__main-wrap {
    margin-top: 0;
    background: #ffffff;
  }
  .footer__main {
    flex-direction: column;
    align-items: center;
    max-width: none;
    padding: 0.4rem 0.1rem 0.35rem;
    gap: 0;
  }
  .footer__brandcol {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .brand--footer {
    margin-bottom: 0.15rem;
    align-items: center;
  }
  .brand--footer .brand__name {
    font-size: 0.512rem;
    line-height: 0.448rem;
  }
  .brand--footer .brand__sub {
    font-size: 0.2048rem;
    line-height: 0.2592rem;
    margin-top: 0.04rem;
    letter-spacing: 0.0064rem;
  }
  .footer__addr {
    font-size: 0.16rem;
    line-height: 0.28rem;
    text-align: center;
    margin-bottom: 0.2rem;
  }
  .footer__social {
    justify-content: center;
    gap: 0.174rem;
    margin-bottom: 0.22rem;
  }
  .footer__social img {
    width: 0.337rem;
    height: 0.337rem;
  }
  .footer__rightcol {
    width: 100%;
    align-items: center;
  }
  .footer__links {
    display: none;
  }
  .footer__pays {
    align-items: center;
    width: 100%;
    margin-top: 0;
    gap: 0.1rem;
  }
  .footer__pays-row {
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.032rem;
  }
  .footer__pays-row img {
    height: 0.229rem;
  }
  .footer__top {
    font-size: 0.15rem;
    padding: 0.1rem;
    gap: 0.1rem;
  }
  .footer__top img {
    width: 0.3rem;
    height: auto;
  }
  .footer__copyright {
    height: 0.55rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.12rem;
    font-weight: 500;
    padding: 0.1rem;
  }

  /* ---------- 浮窗 ---------- */
  .floats {
    right: 0.1rem;
    bottom: 0.2rem;
    gap: 0.12rem;
  }
  .float__img { width: 1.2rem; }
  .float__close {
    right: -0.1rem;
    top: -0.1rem;
    width: 0.25rem;
    height: 0.25rem;
  }

  /* ---------- 手机侧滑菜单（Figma 1:2890） ---------- */
  .mobile-menu {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 300;
    pointer-events: none;
    visibility: hidden;
  }
  .mobile-menu.is-open {
    pointer-events: auto;
    visibility: visible;
  }
  .mobile-menu__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  .mobile-menu.is-open .mobile-menu__overlay {
    opacity: 1;
  }
  .mobile-menu__panel {
    position: absolute;
    top: 0;
    left: 0;
    width: 3.12rem;
    max-width: 85vw;
    height: 100%;
    background: #fff;
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    box-shadow: 0.04rem 0 0.2rem rgba(0, 0, 0, 0.12);
  }
  .mobile-menu.is-open .mobile-menu__panel {
    transform: translateX(0);
  }

  /* 顶部：搜索区（关闭按钮在页眉 MENU 位切换） */
  .mobile-menu__head {
    flex-shrink: 0;
    padding: 0.16rem 0.1rem 0;
  }
  .mobile-menu__faq-bar {
    border-bottom: 0.01rem solid #a9a9a9;
    padding: 0.07rem 0.168rem;
    margin-top: 0.01rem;
  }
  .mobile-menu__faq {
    display: block;
    line-height: 0;
  }
  .mobile-menu__faq img {
    display: block;
    width: 100%;
    max-width: 2.784rem;
    height: auto;
  }

  /* ---------- catalog 区（Figma 1:3991，宽 310px） ---------- */
  .mobile-menu__catalog {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    width: 3.1rem;
    margin: 0 auto;
    padding: 0 0 0.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.203rem;
  }

  .mobile-menu__catalog .side-search {
    width: 2.6rem;
    height: 0.4rem;
    flex-shrink: 0;
  }
  .mobile-menu__catalog .side-search__input {
    font-size: 0.16rem;
    line-height: 0.24rem;
    padding-left: 0.1rem;
  }
  .mobile-menu__catalog .side-search__btn {
    width: 0.27rem;
    height: 0.27rem;
    margin-right: 0.06rem;
  }
  .mobile-menu__catalog .side-search__btn img {
    width: 0.27rem;
    height: 0.27rem;
  }

  .mobile-menu__catalog .side-recommend {
    gap: 0;
  }

  .mobile-menu__catalog .side-block__title {
    height: 0.62rem;
    font-size: 0.215rem;
    line-height: 0.322rem;
    border: 0.012rem solid #2661ce;
    margin-top: 20px;
  }

  .mobile-menu__catalog .side-cat {
    width: 100%;
    height: 1rem;
    border-width: 0.012rem;
  }
  .mobile-menu__catalog .side-cat__badge {
    left: 0.167rem;
    top: 0.167rem;
    height: 0.203rem;
    min-width: 0.763rem;
    padding: 0 0.12rem;
    font-size: 0.131rem;
    line-height: 0.119rem;
    letter-spacing: 0.012rem;
    background: #bf1323;
  }
  .mobile-menu__catalog .side-cat__name {
    left: 0.167rem;
    top: 0.572rem;
    font-size: 0.2rem;
    line-height: 0.238rem;
    max-width: 2.1rem;
  }
  .mobile-menu__catalog .side-cat__arrow {
    left: auto;
    right: 0.25rem;
    top: 0.489rem;
    width: 0.25rem;
    height: auto;
   /* height: 0.08rem;*/
  }

  .mobile-menu__catalog .rank-list {
    width: 100%;
  }
  .mobile-menu__catalog .rank-item {
    width: 100%;
    height: 0.64rem;
    padding-left: 0.14rem;
    gap: 0.11rem;
    border-color: #b3b3b3;
  }
  .mobile-menu__catalog .rank-item:first-child {
    border-top: 0.01rem solid #b3b3b3;
  }
  .mobile-menu__catalog .rank-item--active {
    background: #e7f0ff;
  }
  .mobile-menu__catalog .rank-item__name {
    font-size: 0.16rem;
    line-height: 0.2rem;
    padding-right: 0.7rem;
  }
  .mobile-menu__catalog .rank-item__thumb {
    width: 0.64rem;
    height: 0.64rem;
    background: #f1f1f1;
  }
  .mobile-menu__catalog .rank-item__medal {
    width: 0.27rem;
    height: 0.41rem;
  }
  .mobile-menu__catalog .rank-item__medal-num {
    left: 0.1rem;
    top: 0.14rem;
    font-size: 0.11rem;
    line-height: 0.16rem;
  }

  .mobile-menu__catalog .calendar {
    border-width: 0.01rem;
    border-color: #d9d9d9;
    padding: 0.156rem;
  }
  .mobile-menu__catalog .calendar__head {
    margin-bottom: 0.1rem;
    gap: 0.6rem;
  }
  .mobile-menu__catalog .calendar__nav {
    width: 0.351rem;
    height: 0.351rem;
    font-size: 0.156rem;
  }
  .mobile-menu__catalog .calendar__month {
    font-size: 0.156rem;
  }
  .mobile-menu__catalog .calendar__dow {
    font-size: 0.098rem;
    line-height: 0.16rem;
  }
  .mobile-menu__catalog .calendar__day {
    font-size: 0.12rem;
  }

  .mobile-menu__catalog .side-links a {
    height: 0.668rem;
    font-size: 0.167rem;
    line-height: 0.25rem;
    padding: 0 0.189rem;
    border-color: #ddd;
    border-width: 0.01rem;
  }
  .mobile-menu__catalog .side-links__arrow {
    right: 0.189rem;
    width: 0.12rem;
    height: 0.12rem;
    border-color: #284d89;
    border-width: 0.01rem;
  }

  body.is-menu-open {
    overflow: hidden;
  }
}