/* 背景アニメーション */
    body {
      margin: 0;
      font-family: 'Hiragino Kaku Gothic ProN', sans-serif;
      background: linear-gradient(to bottom, #fffaf5, #fdf9f4);
      position: relative;
      overflow-x: hidden;
    }

    .background-animation {
      position: fixed;
      top: 0;
      left: 0;
      width: 500%;
      height: 500%;
      background: radial-gradient(circle, rgba(200,30,60,0.12) 40%, transparent 70%) repeat;
      background-size: 600px 600px;
      animation: moveBG 70s linear infinite;
      z-index: -1;
      pointer-events: none;
    }

    @keyframes moveBG {
      0% { background-position: 0 0; }
      100% { background-position: -1200px 600px; }
    }


    header {
      padding: 1.5em;
      text-align: center;
      color: #7a2c3d;
    }

    header h1 {
      margin: 0 0 1em;
      font-size: 2em;
      font-family: 'Pacifico', cursive;
    }

    .tagline {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1rem;
      font-style: italic;
      color: #7a2c3d;
      margin-top: -1.5em;
      margin-bottom: 2em;
      opacity: 0;
      transform: translateY(10px);
      animation: fadeInUp 1s ease-out forwards;
      animation-delay: 0.6s;
    }


    header h1, header p {
      opacity: 0;
      transform: translateY(20px);
      animation: fadeInUp 1s ease-out forwards;
      animation-delay: 0.2s;
    }

    @keyframes fadeInUp {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }


    .menu {
      list-style: none;
      padding: 0;
      display: flex;
      justify-content: center;
      gap: 1em;
      flex-wrap: wrap;
    }

    .menu li {
      cursor: pointer;
      padding: 0.6em 1.5em;
      border-radius: 2em;
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05));
      border: 1px solid rgba(255, 255, 255, 0.4);
      color: #7a2c3d;
      backdrop-filter: blur(12px) saturate(160%);
      -webkit-backdrop-filter: blur(12px) saturate(160%);
      box-shadow: 0 10px 30px rgba(255, 255, 255, 0.1),
                  0 8px 24px rgba(0, 0, 0, 0.15);

      transition: all 0.3s ease;
      font-weight: 500;
      letter-spacing: 0.05em;
      text-shadow: 0 1px 1px rgba(255, 255, 255, 0.3);
    }


    .menu li.active,
    .menu li:hover {
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.15));
      border: 1px solid rgba(255, 255, 255, 0.6);
      box-shadow: 0 10px 30px rgba(255, 255, 255, 0.1),
                  0 8px 24px rgba(0, 0, 0, 0.15);
      font-weight: bold;
    }


    .gallery {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 1em;
      padding: 2em;
      max-width: 1200px;
      margin: auto;
      position: relative;
      z-index: 0;
    }

      .gallery img {
      width: 100%;
      max-width: 400px;
      border-radius: 0.5em;
      box-shadow: 0 0 8px rgba(0,0,0,0.1);
      object-fit: cover;
      margin: 0 auto;
      display: block;
    }

    .image-wrapper {
      position: relative;
      display: inline-block;
    }

    .image-wrapper:hover .caption {
      opacity: 1;
    }

    .source-tag {
      position: absolute;
      top: 8px;
      right: 8px;
      background: rgba(255, 255, 255, 0.8);
      padding: 3px 5px;
      font-size: 0.75em;
      border-radius: 4px;
      text-decoration: none;
      color: #7a2c3d;
      box-shadow: 0 0 2px rgba(0,0,0,0.2);
      transition: background 0.2s;
    }

    .source-tag:hover .caption{
      background: #fce6ea;
    }

    .caption {
      position: absolute;
      bottom: 40%;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(255, 255, 255, 0.8);
      padding: 4px 8px;
      font-size: 0.75em;
      border-radius: 4px;
      text-decoration: none;
      color: #7a2c3d;
      box-shadow: 0 0 2px rgba(0,0,0,0.2);
      transition: background 0.2s;
      pointer-events: none;

      opacity: 0;
      transition: opacity 0.3s ease;
    }


    .pagination {
      text-align: center;
      padding: 1em;
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 0.5em;
    }

    .pagination .page {
      display: inline-block;
      margin: 0 0.3em;
      padding: 0.5em 1.2em;
      border-radius: 2em;
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05));
      border: 1px solid rgba(255, 255, 255, 0.4);
      color: #7a2c3d;
      backdrop-filter: blur(12px) saturate(160%);
      -webkit-backdrop-filter: blur(12px) saturate(160%);
      box-shadow: inset 0 0 0.5px rgba(255, 255, 255, 0.4),
                  0 6px 12px rgba(0, 0, 0, 0.08);
      text-decoration: none;
      transition: all 0.3s ease;
      font-weight: 500;
      letter-spacing: 0.03em;
    }


    .pagination .page.current,
    .pagination .page:hover {
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.15));
      border: 1px solid rgba(255, 255, 255, 0.6);
      box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.5),
                  0 8px 16px rgba(0, 0, 0, 0.1);
      font-weight: bold;
    }



    @media (max-width: 600px) {
      header h1 {
        font-size: 1.5em;
      }
    }

    .modal {
      display: none;
      position: fixed;
      z-index: 999;
      padding: 60px 20px;
      left: 3%;
      top: 0;
      width: 90%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.534);
      overflow: auto;
    }


    .modal-content {
      margin: auto;
      display: block;
      max-width: 90vw;
      max-height: 90vh;
      box-shadow: 0 0 10px rgba(0,0,0,0.5);
      animation: fadeIn 0.3s ease-out;
      border-radius: 8px;
      object-fit: contain;
    }

    .caption {
      text-align: center;
      margin-top: 10px;
    }

    .caption a {
      color: #f0c0c0;
      text-decoration: underline;
    }

    .close {
      position: absolute;
      top: 30px;
      right: 40px;
      font-size: 2rem;
      color: #fff;
      cursor: pointer;
    }