* { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: 'M PLUS 2', sans-serif;
      background-color: #eef1f5;
      color: #333;
      line-height: 1.6;
      scroll-behavior: smooth;
    }
    header {
      position: sticky; top: 0;
      backdrop-filter: blur(12px);
      background-color: rgba(255,255,255,0.8);
      padding: 20px; text-align: center; z-index: 100;
    }
    header h1 {
      font-family: 'Montserrat', sans-serif;
      font-weight: 700;
      font-size: 2rem;
      letter-spacing: 0.15em;
      color: #1a1a1a;
    }
    main {
      max-width: 1280px;
      margin: 24px auto;
      padding: 0 24px;
    }
    .articles {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 28px;
    }
    .card {
      display: flex;
      flex-direction: column;
      background-color: #fff;
      border-radius: 14px;
      overflow: hidden;
      box-shadow: 0 4px 10px rgba(0,0,0,0.08);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      text-decoration: none;
      color: inherit;
    }
    .topcard {
      display: flex;
      flex-direction: column;
      background-color: #fff;
      border-radius: 14px;
      overflow: hidden;
      box-shadow: 0 4px 10px rgba(0,0,0,0.08);
      text-decoration: none;
      color: inherit;
      margin-bottom:24px;
    }
    .topcard img {
      width: 100%;
      height: 180px;
      object-fit: cover;
      filter: brightness(0.92);
    }
    .card:hover {
      transform: translateY(-8px) rotate(-1deg) scale(1.02);
      box-shadow: 0 8px 20px rgba(0,0,0,0.12);
    }
    .card img {
      width: 100%;
      height: 180px;
      object-fit: cover;
      filter: brightness(0.92);
    }
    .card-content {
      padding: 20px;
      display: flex;
      flex-direction: column;
      flex-grow: 1;
    }
    .card-title {
      font-family: 'WDXL Lubrifont JP N', sans-serif;
      font-size: 1.5rem;
      margin-bottom: 6px;
      color: #1a1a1a;
      font-weight:400;
    }
    h3.card-title {
      font-size: 1.2rem;
    }
    .card-info {
      font-size: 1rem;
      color: #5f5f5f;
      margin-bottom: 12px;
      font-style: italic;
    }
    .card-excerpt {
      font-size: 0.95rem;
      color: #555;
      margin-bottom: 16px;
      flex-grow: 1;
    }
    .scroll-ball {
      position: fixed;
      top: 50%;
      right: 40px;
      transform: translateY(-50%);
      width: 60px;
      height: 60px;
      background: linear-gradient(145deg, #ff9800, #e67e22);
      border-radius: 50%;
      z-index: 1000;
      cursor: grab;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.4s cubic-bezier(0,.35,0,1), top 0.4s cubic-bezier(0,.35,0,1);
      touch-action: none;
      box-shadow: 0px 16px 32px 0px rgba(0, 0, 0, 25%), inset 5px 5px 6px 0px #fea38c, inset -5px -5px 10px 0px #a6040f;
    }
    .scroll-ball:active {
      cursor: grabbing;
      transform: scale(0.95);
    }