@layer components {
  .lower-page {
    padding: 40px 0;
    background: var(--green, #A0B792) url('/ex/aid/2026/assets/img/lower-bg.webp') no-repeat center top;
    section {
      padding: 40px 0;
    }
  }
  .link-menu {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    @media (768px <= width) {
      gap: 16px;
    }
    a {
      display: grid;
      grid-template-columns: 1fr auto;
      border-radius: 16px;
      background: #fff;
      border: 4px solid var(--green, #A0B792);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      &:focus-visible {
        outline: 2px solid var(--dark-green);
        outline-offset: 2px;
      }
      &:hover {
        transform: translateY(-4px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      }
    }
    .text-area {
      color: var(--black, #111);
      text-align: center;
      font-size: var(--fz-16);
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      @media (768px <= width) {
        font-size: var(--fz-20);
      }
    }
    .link-area {
      background: var(--green, #A0B792);
      padding: 10px;
      display: flex;
      align-items: center;
      span {
        display: block;
        border-radius: 50px;
        background: var(--pail-green);
        @media (768px <= width) {
          padding: 10px 6px;
        }
        @media (width < 768px) {
          padding: 6px 4px;
        }
        img {
          transform: rotate(90deg);
          width: 8px;
          @media (768px <= width) {
            width: 12px;
          }
        }
      }
    }
  }
  .box-white {
    .btn {
      margin-top: 16px;
    }
  }
  .activity-history-list {
    display: grid;
    grid-template-columns: repeat( 2, 1fr );
    gap: 8px;
    @media (768px <= width) {
      gap: 32px;
    }
    li {
      * + * {
        margin-top: 8px;
      }
    }
  }
  .img-box {
    img {
      margin-inline: auto
    }
  }
  * + .link-menu, * + .title-border {
    margin-top: 32px;
  }
  .title-sub + *, * + .title-maru, * + .box-inner, * + .box-white {
    margin-top: 40px;
  }
}