* { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
      background: #000;
      color: #333;
    }
    a { text-decoration: none; color: inherit; }

    /* ── Header ── */
    header {
      background: #111;
      padding: 0 40px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 70px;
      position: sticky;
      top: 0;
      z-index: 100;
    }
    .logo {
      font-size: 1.5rem;
      font-weight: 900;
      color: #6abf4b;
      letter-spacing: 0.05em;
      font-style: italic;
      cursor: pointer;
    }
    nav { display: flex; }
    nav a {
      color: #ccc;
      font-size: 0.72rem;
      letter-spacing: 0.12em;
      padding: 0 16px;
      height: 70px;
      display: flex;
      align-items: center;
      border-bottom: 3px solid transparent;
      transition: color 0.2s, border-color 0.2s;
      text-transform: uppercase;
      white-space: nowrap;
    }
    nav a:hover, nav a.active { color: #fff; border-bottom-color: #6abf4b; }

    /* ── Hero Banner ── */
    .hero-banner {
      background: #3a8c2a;
      padding: 28px 40px 22px;
      display: flex;
      align-items: center;
      gap: 28px;
    }
    .hero-logo-mark svg { width: 120px; height: 110px; }
    .hero-text h1 {
      font-size: 2.8rem;
      font-weight: 900;
      color: #fff;
      letter-spacing: 0.05em;
      font-style: italic;
      line-height: 1;
    }
    .hero-text p {
      font-size: 0.72rem;
      color: rgba(255,255,255,0.85);
      letter-spacing: 0.22em;
      margin-top: 8px;
    }

    /* ── Page BG ── */
    .page-bg {
      background: #3a8c2a;
      padding: 20px 40px 40px;
      min-height: calc(100vh - 70px - 140px);
    }

    /* ── Card ── */
    .card {
      background: #f5f5f0;
      border-radius: 4px;
      padding: 36px 44px;
      margin-bottom: 20px;
    }

    /* ── Section label ── */
    .sec-label {
      font-size: 0.65rem;
      letter-spacing: 0.28em;
      color: #6abf4b;
      font-weight: 700;
      text-transform: uppercase;
      margin-bottom: 8px;
      border-left: 3px solid #6abf4b;
      padding-left: 10px;
    }
    .sec-title {
      font-size: 1.35rem;
      font-weight: 700;
      color: #222;
      margin-bottom: 14px;
    }
    .sec-body {
      font-size: 0.9rem;
      line-height: 2.0;
      color: #444;
      max-width: 760px;
      margin-bottom: 14px;
    }
    .more-link {
      display: inline-block;
      font-size: 0.82rem;
      color: #3a8c2a;
      font-weight: 600;
      border-bottom: 1px solid #3a8c2a;
      padding-bottom: 2px;
      cursor: pointer;
      transition: color 0.2s;
    }
    .more-link:hover { color: #6abf4b; border-color: #6abf4b; }

    /* ── Works grid (HOME) ── */
    .works-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 6px 24px;
      margin-bottom: 4px;
    }
    .works-item {
      font-size: 0.86rem;
      color: #333;
      padding: 9px 0;
      border-bottom: 1px solid #ddd;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .works-tag {
      display: inline-block;
      background: #3a8c2a;
      color: #fff;
      font-size: 0.6rem;
      letter-spacing: 0.08em;
      padding: 2px 6px;
      border-radius: 2px;
      flex-shrink: 0;
    }

    /* ── SNS placeholder ── */
    .sns-row {
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
      margin-top: 8px;
    }
    .sns-post {
      flex: 1;
      min-width: 200px;
      background: #fff;
      border: 1px solid #ddd;
      border-radius: 8px;
      padding: 16px;
      font-size: 0.8rem;
      color: #888;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .sns-post .sns-icon {
      font-size: 1.1rem;
      color: #3a8c2a;
      font-weight: 700;
    }
    .sns-post .sns-placeholder {
      background: #f0f0ec;
      border-radius: 4px;
      height: 80px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.72rem;
      color: #aaa;
    }

    /* ── HOME about detail ── */
    #home-about-detail {
      scroll-margin-top: 90px;
    }

    /* ── WORKS page ── */
    .works-category { margin-bottom: 32px; }
    .works-cat-title {
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.2em;
      color: #fff;
      background: #3a8c2a;
      display: inline-block;
      padding: 4px 16px;
      margin-bottom: 0;
      border-radius: 2px 2px 0 0;
    }
    .works-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.86rem;
    }
    .works-table thead tr {
      background: #e8e8e2;
    }
    .works-table th {
      padding: 8px 14px;
      font-size: 0.72rem;
      letter-spacing: 0.1em;
      color: #666;
      font-weight: 600;
      text-align: left;
      border-bottom: 2px solid #3a8c2a;
    }
    .works-table td {
      padding: 9px 14px;
      border-bottom: 1px solid #e0e0d8;
      color: #333;
      vertical-align: middle;
    }
    .works-table tr:last-child td { border-bottom: none; }
    .works-table tr:hover td { background: #f0f6ee; }
    .works-year {
      color: #888;
      font-size: 0.78rem;
      white-space: nowrap;
    }
    .works-composer { color: #555; }

    /* ── MEMBER page ── */
    .member-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
      gap: 20px;
    }
    .member-card {
      background: #fff;
      border: 1px solid #e0e0d8;
      border-radius: 4px;
      padding: 24px 20px;
      transition: border-color 0.2s;
    }
    .member-card:hover { border-color: #6abf4b; }
    .member-photo {
      width: 72px; height: 72px;
      border-radius: 50%;
      background: #d0d0c8;
      margin-bottom: 14px;
      display: flex; align-items: center; justify-content: center;
      font-size: 1.6rem; color: #fff;
    }
    .member-name {
      font-size: 1.05rem;
      font-weight: 700;
      color: #222;
      margin-bottom: 4px;
    }
    .member-role {
      font-size: 0.68rem;
      letter-spacing: 0.18em;
      color: #6abf4b;
      text-transform: uppercase;
      margin-bottom: 10px;
    }
    .member-bio {
      font-size: 0.8rem;
      line-height: 1.9;
      color: #555;
    }

    /* ── ARTISTS page ── */
    .artists-list {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      gap: 16px;
    }
    .artist-card {
      background: #fff;
      border: 1px solid #e0e0d8;
      border-radius: 4px;
      padding: 20px;
      transition: border-color 0.2s;
    }
    .artist-card:hover { border-color: #6abf4b; }
    .artist-photo {
      width: 60px; height: 60px;
      border-radius: 50%;
      background: #c8d8c0;
      margin-bottom: 12px;
      display: flex; align-items: center; justify-content: center;
      font-size: 1.3rem; color: #fff;
    }
    .artist-name {
      font-size: 0.98rem;
      font-weight: 700;
      color: #222;
      margin-bottom: 3px;
    }
    .artist-inst {
      font-size: 0.72rem;
      letter-spacing: 0.12em;
      color: #6abf4b;
      margin-bottom: 8px;
    }
    .artist-note { font-size: 0.78rem; color: #666; line-height: 1.8; }

    /* ── PROFILE page ── */
    .profile-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.88rem;
    }
    .profile-table tr { border-bottom: 1px solid #e0e0d8; }
    .profile-table th {
      padding: 14px 20px 14px 0;
      width: 160px;
      font-weight: 600;
      color: #3a8c2a;
      vertical-align: top;
      white-space: nowrap;
    }
    .profile-table td {
      padding: 14px 0;
      color: #444;
      line-height: 1.9;
    }

    /* ── Photo grid ── */
    .photo-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 4px;
    }
    .photo-ph {
      aspect-ratio: 4/3;
      display: flex; align-items: center; justify-content: center;
      font-size: 0.68rem; color: rgba(255,255,255,0.3);
    }
    .photo-ph:nth-child(1) { background: linear-gradient(135deg,#6b4c2a,#3a2510); }
    .photo-ph:nth-child(2) { background: linear-gradient(135deg,#5a3d28,#2e1e0e); }
    .photo-ph:nth-child(3) { background: linear-gradient(135deg,#4a4a4a,#2a2a2a); }
    .photo-ph:nth-child(4) { background: linear-gradient(135deg,#3d3020,#1e1508); }
    .photo-ph:nth-child(5) { background: linear-gradient(135deg,#2a2a2a,#141414); }
    .photo-ph:nth-child(6) { background: linear-gradient(135deg,#3a3530,#1a1510); }
    .photo-ph:nth-child(7) { background: linear-gradient(135deg,#6a5040,#3a2820); }
    .photo-ph:nth-child(8) { background: linear-gradient(135deg,#4a3828,#2a1e10); }

    /* ── Contact form ── */
    .contact-form { margin-top: 8px; max-width: 600px; }
    .form-row { display: flex; flex-direction: column; margin-bottom: 16px; }
    .form-row label {
      font-size: 0.82rem; font-weight: 600; color: #333;
      margin-bottom: 5px; display: flex; align-items: center; gap: 8px;
    }
    .req {
      background: #3a8c2a; color: #fff; font-size: 0.6rem;
      padding: 2px 5px; border-radius: 2px; font-weight: 400;
    }
    .form-row input, .form-row textarea {
      border: 1px solid #ccc; border-radius: 3px;
      padding: 9px 12px; font-size: 0.88rem; font-family: inherit;
      color: #333; background: #fff; outline: none; transition: border-color 0.2s;
    }
    .form-row input:focus, .form-row textarea:focus { border-color: #3a8c2a; }
    .form-row textarea { resize: vertical; }
    .btn-submit {
      background: #3a8c2a; color: #fff; border: none;
      padding: 11px 36px; font-size: 0.88rem; font-family: inherit;
      letter-spacing: 0.12em; border-radius: 3px; cursor: pointer; transition: background 0.2s;
    }
    .btn-submit:hover { background: #6abf4b; }
    .form-success {
      margin-top: 14px; padding: 12px 16px;
      background: #eafbe6; border: 1px solid #3a8c2a;
      border-radius: 3px; color: #2a6a1a; font-size: 0.86rem;
    }
    .contact-alt { margin-top: 18px; font-size: 0.82rem; color: #666; }
    .contact-alt a { color: #2a7abf; text-decoration: underline; }

    /* ── Map ── */
    .map-container { height: 420px; border-radius: 4px; overflow: hidden; }
    .map-container iframe { width: 100%; height: 100%; border: none; }

    /* ── Tab system ── */
    .tab-content { display: none; }
    .tab-content.active { display: block; }

    /* ── Hamburger button ── */
    .hamburger {
      display: none;
      flex-direction: column;
      justify-content: center;
      gap: 5px;
      width: 36px; height: 36px;
      cursor: pointer;
      background: none;
      border: none;
      padding: 4px;
      flex-shrink: 0;
    }
    .hamburger span {
      display: block;
      height: 2px;
      background: #ccc;
      border-radius: 2px;
      transition: all 0.3s;
    }
    .hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .hamburger.open span:nth-child(2) { opacity: 0; }
    .hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    /* ── Responsive ── */
    @media (max-width: 900px) {
      header {
        padding: 0 16px;
        height: 56px;
        position: sticky;
        top: 0;
        z-index: 200;
      }
      .hamburger { display: flex; }
      nav {
        display: none;
        position: fixed;
        top: 56px; left: 0; right: 0;
        background: #111;
        flex-direction: column;
        z-index: 199;
        box-shadow: 0 4px 12px rgba(0,0,0,0.5);
      }
      nav.open { display: flex; }
      nav a {
        height: 52px;
        padding: 0 24px;
        font-size: 0.82rem;
        border-bottom: 1px solid #222;
        border-left: none;
        letter-spacing: 0.15em;
      }
      nav a.active, nav a:hover {
        background: #1a1a1a;
        border-bottom-color: #222;
        color: #6abf4b;
      }
      .hero-banner { padding: 18px 16px; }
      .hero-logo-mark svg { width: 80px; height: 74px; }
      .hero-text h1 { font-size: 1.6rem; }
      .hero-text p { font-size: 0.62rem; letter-spacing: 0.12em; }
      .page-bg { padding: 14px 12px 30px; }
      .card { padding: 22px 18px; }
      .works-grid { grid-template-columns: 1fr; }
      .photo-grid { grid-template-columns: repeat(2,1fr); }
      .works-table th:nth-child(3),
      .works-table td:nth-child(3) { display: none; }
      .member-grid { grid-template-columns: 1fr; }
      .artists-list { grid-template-columns: repeat(2,1fr); }
      .sns-row { flex-direction: column; }
    }
  
.logo img{display:block;width:235px;height:auto}.hero-banner>img{width:620px;max-width:100%;height:auto}.hero-banner{margin:0}.home-photo{position:relative;aspect-ratio:2.4 / 1;overflow:hidden;margin-bottom:20px}.home-photo img{position:absolute;top:0;right:0;width:114%;max-width:none;height:100%;object-fit:cover;object-position:50% 60%}.card p{font-size:.9rem;line-height:2;color:#444;max-width:900px;margin-bottom:14px}.card p a,.sns a{color:#3a8c2a;text-decoration:underline;text-underline-offset:4px}.card h2{font-size:1.35rem;margin-bottom:14px}.card .sns h2{font-size:1rem}.sns{display:grid;grid-template-columns:1fr 1fr;gap:24px}.sec-label{display:block}.skip{position:absolute;left:-9999px}.skip:focus{left:10px;top:10px;background:white;padding:12px;z-index:200}footer{text-align:center;background:#111;color:#ccc;padding:30px;font-size:12px}footer p{margin-top:14px}:focus-visible{outline:2px solid #6abf4b;outline-offset:4px}@media(max-width:768px){.logo img{width:210px}.hero-banner>img{width:420px}.home-photo{aspect-ratio:1.6 / 1}.home-photo img{object-position:50% 58%}.sns{grid-template-columns:1fr}}

/* Match the 1280px content container and gutters used by the other main pages. */
body{background:#3a8c2a}.page-bg{box-sizing:border-box;max-width:1280px;margin:0 auto;padding:32px 4%}.hero-banner{box-sizing:border-box;max-width:1280px;margin:0 auto;padding:28px 4% 22px}@media(max-width:420px){.page-bg{padding:20px 12px}.hero-banner{padding:18px 12px}}