/* ================================================================
   femizemi-cafe theme — mission.css
   静的版 mission/index.html の <style> からページ固有ルールを移植。
   共通(reset/:root/a)・header/footer/nav/logo は共有 main.css を使用（重複定義を除去）。
   body 背景のみサブページのミント色に上書き。
   ================================================================ */
body { background: #D4E8E3; }
a { color: inherit; }
@media (max-width: 500px) { nav { display: none; } }
.page-hero { padding: 3.5rem 2rem 2rem; max-width: 800px; margin: 0 auto; }
.eyebrow { font-size: 0.6rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--text-light); margin-bottom: 0.75rem; }
.page-hero h1 { font-size: clamp(1.6rem, 4vw, 2.2rem); font-weight: 700; line-height: 1.3; }
.content { max-width: 800px; margin: 0 auto; padding: 0 2rem 5rem; }
.section-label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; color: var(--text-light); margin-bottom: 1.5rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--border); margin-top: 3rem; }
.section-label:first-child { margin-top: 0; }
.info-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.info-table th, .info-table td { padding: 0.75rem 1rem; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; }
.info-table th { font-weight: 600; color: var(--text-light); width: 10rem; white-space: nowrap; }
@media (max-width: 480px) { .info-table th { width: 7rem; font-size: 0.85rem; } .info-table td { font-size: 0.85rem; } }
.member-grid { display: flex; flex-direction: column; gap: 1.5rem; }
.member-card { background: var(--white); border-radius: var(--radius); padding: 2rem; box-shadow: 0 2px 12px rgba(0,0,0,0.06); border-left: 4px solid var(--sage); }
.member-name { font-size: 1.2rem; font-weight: 700; margin-bottom: 0.2rem; }
.member-reading { font-size: 0.8rem; color: var(--text-light); margin-bottom: 0.6rem; letter-spacing: 0.05em; }
.member-role { display: inline-block; font-size: 0.72rem; font-weight: 700; color: var(--sage-dark); background: #e8f0e8; border-radius: 100px; padding: 0.2rem 0.75rem; margin-bottom: 1rem; letter-spacing: 0.05em; }
.member-bio { font-size: 0.92rem; color: var(--text-mid); line-height: 2; }
.member-bio a { color: var(--sage-dark); text-decoration: underline; }
.member-bio a:hover { color: var(--deep); }
.mission-section {
      margin-top: 4rem;
      padding-top: 3rem;
      border-top: 1px solid var(--border);
    }
.mission-section h2 {
      font-size: 1.5rem;
      font-weight: 700;
      margin-bottom: 0.5rem;
      letter-spacing: 0.05em;
    }
.mission-section .section-intro {
      font-size: 0.9rem;
      color: var(--text-light);
      margin-bottom: 1.8rem;
      line-height: 1.8;
    }
.mission-visual {
      width: 100%;
      max-width: 720px;
      border-radius: 12px;
      box-shadow: 0 4px 20px rgba(0,0,0,0.08);
      display: block;
      margin: 0 auto 2rem;
    }
.mission-detail-toggle {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      background: none;
      border: 1px solid var(--border);
      border-radius: 20px;
      padding: 0.4rem 1.1rem;
      font-size: 0.78rem;
      font-family: inherit;
      color: var(--text-light);
      cursor: pointer;
      margin: 0 auto 2rem;
      display: block;
      transition: background 0.15s;
    }
.mission-detail-toggle:hover { background: var(--bg); }
.mission-detail { display: none; }
.mission-detail.open { display: block; }
.mission-list-about {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 1.2rem;
      margin-bottom: 1rem;
    }
.mission-item-about {
      display: flex;
      gap: 1rem;
      align-items: flex-start;
    }
.mission-num-about {
      width: 1.8rem;
      height: 1.8rem;
      border-radius: 50%;
      background: var(--sage);
      color: #fff;
      font-size: 0.75rem;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      margin-top: 0.1rem;
    }
.mission-item-about h4 {
      font-size: 0.9rem;
      font-weight: 700;
      margin-bottom: 0.3rem;
    }
.mission-item-about p {
      font-size: 0.83rem;
      color: var(--text-mid);
      line-height: 1.85;
    }
.approach-list-about {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }
.approach-item-about {
      border-left: 3px solid var(--border);
      padding-left: 1rem;
    }
.approach-item-about h4 {
      font-size: 0.9rem;
      font-weight: 700;
      margin-bottom: 0.3rem;
    }
.approach-item-about p {
      font-size: 0.83rem;
      color: var(--text-mid);
      line-height: 1.85;
    }
.expand-content-about { display: none; }
.expand-content-about.open { display: block; margin-top: 0.5rem; }
.expand-content-about p {
      font-size: 0.83rem;
      color: var(--text-mid);
      line-height: 1.85;
      margin-bottom: 0.6rem;
    }
.expand-btn-about {
      background: none;
      border: 1px solid var(--border);
      border-radius: 20px;
      padding: 0.25rem 0.8rem;
      font-size: 0.72rem;
      color: var(--text-light);
      cursor: pointer;
      margin-top: 0.4rem;
      font-family: inherit;
    }
.expand-btn-about:hover { background: var(--bg); }
.mission-visual {
      width: 100%;
      border-radius: 12px;
      box-shadow: 0 4px 24px rgba(0,0,0,0.09);
      display: block;
      margin: 0 auto 1.5rem;
    }
.mission-detail-toggle {
      display: block;
      margin: 0 auto 2rem;
      background: none;
      border: 1px solid var(--border);
      border-radius: 20px;
      padding: 0.4rem 1.2rem;
      font-size: 0.78rem;
      font-family: inherit;
      color: var(--text-light);
      cursor: pointer;
      transition: background 0.15s;
    }
.mission-detail-toggle:hover { background: var(--bg); }
.mission-detail { display: none; }
.mission-detail.open { display: block; }
.mission-list-m {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 1.2rem;
      margin-bottom: 1rem;
    }
.mission-item-m {
      display: flex;
      gap: 1rem;
      align-items: flex-start;
    }
.mission-num-m {
      width: 1.8rem;
      height: 1.8rem;
      border-radius: 50%;
      background: var(--sage);
      color: #fff;
      font-size: 0.75rem;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      margin-top: 0.1rem;
    }
.mission-item-m h4 {
      font-size: 0.9rem;
      font-weight: 700;
      margin-bottom: 0.3rem;
    }
.mission-item-m p {
      font-size: 0.83rem;
      color: var(--text-mid);
      line-height: 1.85;
    }
.approach-list-m {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 1.2rem;
    }
.approach-item-m {
      border-left: 3px solid var(--border);
      padding-left: 1rem;
    }
.approach-item-m h4 {
      font-size: 0.9rem;
      font-weight: 700;
      margin-bottom: 0.3rem;
    }
.approach-item-m p {
      font-size: 0.83rem;
      color: var(--text-mid);
      line-height: 1.85;
    }
.expand-wrap { display: none; margin-top: 0.5rem; }
.expand-wrap.open { display: block; }
.expand-wrap p {
      font-size: 0.83rem;
      color: var(--text-mid);
      line-height: 1.85;
      margin-bottom: 0.6rem;
    }
.expand-btn-m {
      background: none;
      border: 1px solid var(--border);
      border-radius: 20px;
      padding: 0.25rem 0.8rem;
      font-size: 0.72rem;
      color: var(--text-light);
      cursor: pointer;
      margin-top: 0.4rem;
      font-family: inherit;
    }
.expand-btn-m:hover { background: var(--bg); }
.section-divider {
      border: none;
      border-top: 1px solid var(--border);
      margin: 3rem 0;
    }