.top-account-info {
  padding: var(--spacing-10);
  .c-user {
    display: flex;
    gap: var(--spacing-4);
  }
  .user-text {
    padding-top: var(--spacing-1);
    color: var(--color-text-inverse-high);
    text-shadow: 0 0 16px rgba(var(--color-grey-rgb), 0.5);
    .greeting {
      font-size: var(--font-size-2);
    }
    .user-name {
      font-size: var(--font-size-6);
      .unit {
        font-size: var(--font-size-4);
      }
    }
  }
}
.l-schedules {
  display: grid;
  padding-left: 28px;
  gap: var(--spacing-16);
}
.l-recommend-carousel {
  margin: 0 -20px;
  .inner {
    display: flex;
    gap: var(--spacing-6);
    padding: 0 var(--spacing-10) var(--spacing-8);
    width: 100vw;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    > .member-card {
      scroll-snap-align: center;
      flex: 0 0 200px;
    }
  }
}
/* PCの時は折り返し表示 */
@media screen and (min-width: 481px) {
  .l-recommend-carousel {
    margin: 0;
    .inner {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: var(--spacing-6);
      padding: 0 0 var(--spacing-8);
      width: 100%;
      overflow-x: auto;
      > .member-card {
        max-width: unset;
      }
    }
  }
}
.l-category-block-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-6);
  .category-block-item {
    position: relative;
    border-radius: var(--radius-4);
    overflow: hidden;
    min-height: 72px;
    box-shadow: 0 8px 24px -4px rgba(75, 35, 43, 0.25);
    background: radial-gradient(
      at 100% 0%,

      rgba(210, 175, 141, 1) 40%,
      rgba(137, 161, 129, 1) 100%
    );

    a {
      display: flex;
      align-items: center;
      width: 100%;
      height: 100%;
      padding-block: var(--spacing-8);
      padding-inline: var(--spacing-6) var(--spacing-10);
      text-decoration: none;
      &:before {
        content: "";
        width: 8px;
        height: 8px;
        border-top: 1.5px solid #fff;
        border-right: 1.5px solid #fff;
        transform: rotate(45deg);
        position: absolute;
        right: 10px;
        top: calc(50% - 4px);
        z-index: 2;
      }
      .category-label {
        z-index: 1;
        position: relative;
        color: var(--color-text-inverse-high);
        font-size: var(--font-size-3);
        line-height: 1.5;
        font-weight: 700;
        text-shadow: 0 0 32px rgba(0, 0, 0, 0.1);
      }
      img {
        object-fit: cover;
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        mix-blend-mode: multiply;
      }
      &:after {
        content: "";
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        background: radial-gradient(
          at 100% 0%,
          rgba(245, 203, 216, 1) 0%,
          rgba(210, 175, 141, 1) 66%,
          rgba(137, 161, 129, 1) 100%
        );
        opacity: 0.4;
      }
    }
  }
}