html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      background: #f8f8f6;
      color: #111;
      font-family: Helvetica, Arial, sans-serif;
      font-weight: 400;
      letter-spacing: 0.02em;
      line-height: 1.7;
      -webkit-font-smoothing: antialiased;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    img {
      width: 100%;
      display: block;
    }

    /* ---------- language switch ---------- */

    .language-switch {
      position: absolute;
      top: 24px;
      right: 24px;
      z-index: 300;

      font-size: 11px;

      opacity: 0.25;

      transition: opacity 0.3s ease;
    }

    .language-switch:hover {
      opacity: 0.8;
    }

    .language-switch span {
      cursor: pointer;
    }

    .en {
      display: none;
    }

    /* ---------- top navigation ---------- */

    nav {
      position: absolute;
      top: 24px;
      left: 24px;
      z-index: 100;
      font-size: 12px;
    }

    nav a {
      display: block;
      margin-bottom: 6px;
      opacity: 0.55;
      transition: opacity 0.3s ease;
    }

    nav a:hover {
      opacity: 1;
    }

    /* ---------- floating menu ---------- */

    .menu-button {
      position: fixed;
      right: 22px;
      bottom: 22px;
      z-index: 200;

      font-size: 11px;

      opacity: 0;
      pointer-events: none;

      cursor: pointer;

      transform: translateY(6px);

      transition:
        opacity 0.4s ease,
        transform 0.4s ease;
    }

    .menu-button.visible {
      opacity: 0.4;
      pointer-events: auto;
      transform: translateY(0px);
    }

    .menu-button:hover {
      opacity: 1;
    }

    .popup-menu {
      position: fixed;
      right: 22px;
      bottom: 50px;

      background: rgba(248,248,246,0.94);

      padding: 14px 16px;

      font-size: 11px;

      opacity: 0;
      pointer-events: none;

      transition: opacity 0.4s ease;

      backdrop-filter: blur(8px);
    }

    .popup-menu.active {
      opacity: 1;
      pointer-events: auto;
    }

    .popup-menu a {
      display: block;
      margin-bottom: 8px;
      opacity: 0.65;
      transition: opacity 0.3s ease;
    }

    .popup-menu a:last-child {
      margin-bottom: 0;
    }

    .popup-menu a:hover {
      opacity: 1;
    }

    /* ---------- hero ---------- */

    .hero {
      min-height: 100vh;
      display: flex;
      align-items: center;
      padding-left: 24px;
    }

    .hero-title {
      font-size: 32px;
      letter-spacing: 0.05em;
    }

    /* ---------- year navigation ---------- */

    .year-nav {
      width: 92%;
      max-width: 700px;
      text-align: left;
      margin: 0 auto;
      padding-bottom: 180px;
      font-size: 14px;
    display: flex;          /* ←追加 */

  flex-direction: column; /* ←追加 */

  gap: 18px;              /* ←marginじゃなくてgapに統一 */

}

    .year-nav a {
      display: block;
     

      opacity: 0.35;

      transition: opacity 0.3s ease;
    }

    .year-nav a:hover {
      opacity: 1;
    }

    /* ---------- works ---------- */

.work-image {
  margin-bottom: 24px;
}
    .works {
      width: 92%;
      max-width: 700px;
      margin: 0 auto;
      padding-bottom: 240px;
    }

    .year-section {
      margin-bottom: 220px;
    }

    .year-title {
      font-size: 18px;
      margin-bottom: 80px;
      opacity: 0.35;
    }

    .work {
      margin-bottom: 180px;
    }

    .work-image {
      overflow: hidden;
    }

    .work-image img {
      transition: transform 8s ease;
    }

    .work:hover .work-image img {
      transform: scale(1.015);
    }

    .work-info {
      margin-top: 14px;
      max-width: 640px;
    }

    .work-title {
      font-size: 14px;
      margin-bottom: 6px;
    }

    .work-meta {
      font-size: 11px;
      opacity: 0.55;
      margin-bottom: 18px;
    }

    .work-text {
      font-size: 13px;
      opacity: 0.85;
     white-space: pre-line;
 max-width: 520px;
}

/* ---------- image caption ---------- */

.image-caption {

  margin-top: 10px;
  margin-bottom: 42px;

  font-size: 11px;

  opacity: 0.45;

  line-height: 1.6;

}
/* ---------- horizontal gallery ---------- */

.gallery-scroll {
  display: flex;
  gap: 28px;
  overflow-x: auto;
  align-items: center;
  padding-bottom: 20px;
  scroll-behavior: smooth;
}

.gallery-scroll::-webkit-scrollbar {
  height: 5px;
}

.gallery-scroll::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.05);
}

.gallery-item {
  flex: 0 0 50%;
  position: relative;
}

.gallery-item.large-work {
  flex: 0 0 85%;
}

.gallery-item img {
  width: 100%;
  display: block;
}

.photo-credit-inline {

  display: block;

  margin-top: 4px;

  font-size: 10px;

  opacity: 0.6;

}

.about-image {
  width: 100%;
  max-width: 420px;
  margin: 0 0 40px 0;
}

.about-image img {
  width: 100%;
  display: block;
}
    /* ---------- section ---------- */

    .section {
      width: 92%;
      max-width: 700px;
      margin: 0 auto;
      padding-bottom: 180px;
    }

    .section-title {
      font-size: 12px;
      opacity: 0.5;
      margin-bottom: 50px;
    }

    .news-entry {
      margin-bottom: 34px;
    }

    .news-date {
      font-size: 11px;
      opacity: 0.5;
      margin-bottom: 4px;
    }

    .news-text {
      font-size: 13px;
    }

    .news-text a {

  opacity: 0.7;

  transition: opacity 0.3s ease;

}

.news-text a:hover {

  opacity: 1;

}

/* ---------- Lightbox ---------- */

#lightbox {

  position: fixed;
  inset: 0;

  background: rgba(0,0,0,0.92);

  display: flex;
  justify-content: center;
  align-items: center;

  opacity: 0;
  pointer-events: none;

  transition: opacity 0.3s ease;

  z-index: 9999;
}

#lightbox.active {

  opacity: 1;
  pointer-events: auto;
}

#lightbox img {

  max-width: 90vw;
  max-height: 90vh;

  width: auto;
  height: auto;

  display: block;
}

#close-lightbox {

  position: absolute;
  top: 24px;
  right: 30px;

  color: white;
  font-size: 32px;
  cursor: pointer;
}
.lightbox-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#lightbox-caption {
  margin-top: 14px;

  color: rgba(255,255,255,0.75);

  font-size: 11px;
  line-height: 1.6;

  text-align: center;

  max-width: 800px;
}
    /* ---------- animation ---------- */

    .float {
      animation: drift 10s ease-in-out infinite;
    }

    @keyframes drift {

      0% {
        transform: translateY(0px);
      }

      50% {
        transform: translateY(1.5px);
      }

      100% {
        transform: translateY(0px);
      }

    }

    /* ---------- mobile ---------- */

    @media (max-width: 768px) {

      nav {
        top: 18px;
        left: 18px;
      }

      .language-switch {
        top: 18px;
        right: 18px;
      }

      .hero {
        padding-left: 18px;
      }

      .hero-title {
        font-size: 22px;
      }

      .year-title {
        margin-bottom: 50px;
      }

      .work {
        margin-bottom: 110px;
      }
        .gallery-item {
  flex: 0 0 85%;
}

.gallery-item.large-work {
  flex: 0 0 95%;
}

.gallery-scroll {
  gap: 16px;
}

    }