/* Modernist design tokens — source: Claude Design system "modernist" (project 90218a72-9f15-465b-8558-4fe7f5a81a2e) */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;600;800&display=swap');

:root {
  --color-bg: #f3f2f2;
  --color-surface: #eae9e9;
  --color-text: #201e1d;
  --color-accent: #ec3013;
  --color-divider: color-mix(in srgb, #201e1d 40%, transparent);

  --color-neutral-200: #eae7e7;

  --color-accent-100: #fff2ef;
  --color-accent-700: #ae1800;

  --font-heading: "Archivo", system-ui, sans-serif;
  --font-heading-weight: 800;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;

  --radius-md: 0px;

  --shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent);
}

* , *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  -webkit-font-smoothing: antialiased;
}

p {
  overflow-wrap: break-word;
}


h1, h2, h3, h4, summary {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 900;
  letter-spacing: -0.02em;
  margin: 0;
}

a { color: var(--color-accent-700); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--color-accent); }

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

summary::-webkit-details-marker { display: none; }
summary { list-style: none; cursor: pointer; }

/* — buttons — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: "Noto Sans JP", sans-serif; font-weight: 700;
  font-size: 14px; line-height: 1.2; color: var(--color-text);
  background: transparent; border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: var(--radius-md);
}
.btn-primary { background: var(--color-accent); color: var(--color-bg); }
.btn-primary:hover { background: var(--color-accent-700); }
.btn-block { width: 100%; margin-top: var(--space-2); justify-content: flex-start; text-align: left; }

/* — tags — */
.tag {
  display: inline-flex; align-items: center; font-size: 11px;
  letter-spacing: 0.02em; padding: 3px 10px;
  border-radius: calc(var(--radius-md) * 0.75);
}
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-700); }
.tag-neutral { background: var(--color-neutral-200); color: var(--color-text); }

/* — navigation — */
.nav {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: 2px solid var(--color-divider);
}
.nav-brand {
  font-family: "Noto Sans JP", sans-serif; font-weight: 900;
  font-size: 14px; margin-right: auto; letter-spacing: -0.01em;
}
.nav a { color: inherit; text-decoration: none; }

/* — image placeholder (photo not yet supplied) — */
.photo-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-neutral-200);
  padding: 8px;
}
.photo-placeholder span {
  font-size: 11px; line-height: 1.5; text-align: center;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}

.cover-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* — ハンバーガーメニュー（全幅共通） — */
.nav-toggle {
  display: flex; align-items: center;
  background: transparent; border: none; cursor: pointer;
  padding: 8px; color: var(--color-text);
}
.nav-toggle-box { display: flex; flex-direction: column; gap: 5px; width: 22px; }
.nav-toggle-box span {
  display: block; height: 3px; width: 100%; background: currentColor;
  transition: transform .2s ease, opacity .2s ease;
}

.nav-menu {
  position: fixed; top: 0; right: 0; z-index: 40;
  width: min(84vw, 320px); height: 100%;
  background: var(--color-bg);
  border-left: 2px solid var(--color-divider);
  box-shadow: var(--shadow-md);
  padding: 78px 24px 24px;
  display: flex; flex-direction: column; gap: 2px;
  transform: translateX(100%);
  transition: transform .25s ease;
}
.nav-menu a {
  color: var(--color-text); text-decoration: none;
  font-size: 16px; font-weight: 700;
  padding: 14px 4px;
  border-bottom: 1px solid var(--color-divider);
}
.nav-menu-cta {
  margin-top: 18px; justify-content: center;
  font-weight: 900; padding: 13px 16px; border-bottom: none !important;
}

.nav-scrim {
  position: fixed; inset: 0; z-index: 35;
  background: color-mix(in srgb, var(--color-text) 45%, transparent);
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease;
}

body.nav-open .nav-menu { transform: translateX(0); }
body.nav-open .nav-scrim { opacity: 1; pointer-events: auto; }
body.nav-open { overflow: hidden; }

/* ==========================================================================
   PC / タブレット表示（スマホ表示は 767px 以下でそのまま維持）
   インラインstyleの max-width:480px 等を上書きするため !important を用いる
   ========================================================================== */

/* 画面が広いときの地の色。中央カラムとの境目を出す */
@media (min-width: 768px) {
  body { background: var(--color-surface); }

  .page {
    max-width: 880px !important;
    padding-bottom: 110px !important;
    border-left: 2px solid var(--color-divider);
    border-right: 2px solid var(--color-divider);
  }

  /* — ナビ — */
  .site-nav { padding: 14px 32px !important; }
  .nav-brand { font-size: 17px; }

  /* — ヒーロー：画像を大きく、コピーを中央寄せの読みやすい幅に — */
  .hero-media { height: 420px !important; }
  .hero-copy { padding: 34px 32px 36px !important; }
  .hero-copy h1 { font-size: 44px !important; }
  .hero-copy > p { font-size: 16.5px !important; max-width: 46em; }
  .hero-copy .btn-block { width: auto !important; padding: 15px 28px !important; }

  /* — 数字3本 — */
  .stats > div { padding: 22px 24px 24px !important; }
  .stats p:first-child { font-size: 40px !important; }
  .stats p:last-child { font-size: 12.5px !important; }

  .sec-head { padding-left: 32px !important; padding-right: 32px !important; }
  .sec-activities { padding: 44px 0 12px !important; }
  .sec-voices, .sec-faq { padding-left: 0 !important; padding-right: 0 !important; }
  .sec-voices { padding-top: 44px !important; }
  .sec-faq { padding-top: 44px !important; padding-bottom: 46px !important; }
  .sec-head h2 { font-size: 30px !important; }

  /* — 年間活動：横スクロールをやめて2列グリッドに — */
  .card-rail {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    overflow-x: visible !important;
    padding: 24px 32px !important;
    gap: 16px !important;
  }
  .act-card { width: auto !important; }

  .schedule { padding: 4px 32px 0 !important; }
  .schedule + p, .schedule p { font-size: 12.5px; }

  /* — 写真ギャラリー：帯（横長）2枚＋中サイズ4枚。4枚は2列のまま高さだけ上げる — */
  .sec-photos .sec-head { padding: 40px 32px 18px !important; }
  .sec-photos h2 { font-size: 26px !important; }
  .photo-grid .pg-wide:first-child { height: 300px !important; }
  .photo-grid .pg-wide:last-child { height: 280px !important; }
  .photo-grid .pg-cell { height: 215px !important; }
  .photo-note { padding: 12px 32px 32px !important; font-size: 12.5px !important; }

  /* — メンバーの声：全幅1列で統一し枠線を画面端まで伸ばす — */
  .voice-list {
    display: block !important;
  }
  .voice {
    border-bottom: 1px solid var(--color-divider) !important;
    padding: 22px 32px !important;
  }
  .voice:last-child {
    border-bottom: 2px solid var(--color-divider) !important;
  }
  .voice p:first-child {
    font-size: 16px !important;
    line-height: 1.8 !important;
    text-wrap: wrap;
  }

  /* — FAQ：全幅1列で統一し枠線を画面端まで伸ばす — */
  .faq-list {
    display: block !important;
  }
  .faq-list details {
    border-bottom: 1px solid var(--color-divider) !important;
  }
  .faq-list details:last-child {
    border-bottom: 2px solid var(--color-divider) !important;
  }
  .faq-list summary {
    font-size: 16px !important;
    padding: 18px 32px !important;
  }
  .faq-list p {
    font-size: 15px !important;
    line-height: 1.85 !important;
    padding: 0 32px 18px 64px !important;
    text-wrap: wrap;
  }

  /* — 入会セクション：コピーと写真を左右に — */
  .sec-join { padding: 44px 32px 46px !important; }
  .sec-join > h2 { font-size: 38px !important; }
  .join-media { height: 260px !important; }
  .join-lead { font-size: 16px !important; max-width: 46em; }
  .join-steps { grid-template-columns: repeat(3, 1fr); column-gap: 0; }
  .join-steps > div { border-bottom: 2px solid var(--color-bg) !important; }
  .join-cta .btn-block { width: auto !important; padding: 15px 30px !important; }

  .site-footer { padding: 26px 32px 34px !important; font-size: 12.5px !important; }

  /* — 下部固定バー：画面幅いっぱいに広げ、中身だけコンテンツ幅に揃える — */
  .stickybar-inner {
    max-width: none !important;
    padding: 12px 32px 14px !important;
    justify-content: center;
    gap: 24px !important;
  }
  .stickybar-inner > div:first-child { flex: none !important; }
  .stickybar-inner p:first-child { font-size: 14px !important; }
  .stickybar-inner p:last-child { font-size: 12px !important; }
}

/* — さらに広い画面：活動カードを3列、写真を3列に — */
@media (min-width: 1100px) {
  .page { max-width: 1080px !important; }

  .site-nav { padding: 16px 44px !important; }
  .hero-media { height: 480px !important; }

  /* ヒーローは見出しと本文を左右に振り分ける */
  .hero-copy {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    column-gap: 48px;
    align-items: start;
    padding: 44px 44px 46px !important;
  }
  .hero-copy h1 { font-size: 52px !important; grid-row: span 2; }
  .hero-copy > p { margin-top: 6px !important; }
  .hero-copy > div { margin-top: 22px !important; }

  .stats > div { padding: 26px 32px 28px !important; }
  .stats p:first-child { font-size: 46px !important; }

  .sec-head { padding-left: 44px !important; padding-right: 44px !important; }
  .sec-voices, .sec-faq { padding-left: 0 !important; padding-right: 0 !important; }
  .voice { padding-left: 44px !important; padding-right: 44px !important; }
  .faq-list summary { padding-left: 44px !important; padding-right: 44px !important; }
  .faq-list p { padding-left: 76px !important; padding-right: 44px !important; }

  .card-rail { grid-template-columns: repeat(3, 1fr); padding: 28px 44px !important; }
  .schedule { padding: 8px 44px 0 !important; }

  .sec-photos .sec-head { padding: 44px 44px 20px !important; }
  .photo-note { padding: 14px 44px 36px !important; }

  /* 写真ギャラリー：中サイズ4枚を4列に並べ、帯（横長）2枚は横幅いっぱいのまま。
     3列だと4枚が割り切れず1枚だけ取り残されるため、4列にする */
  .photo-grid { grid-template-columns: repeat(4, 1fr) !important; }
  .photo-grid .pg-wide:first-child { height: 340px !important; }
  .photo-grid .pg-wide:last-child { height: 320px !important; }
  .photo-grid .pg-cell { height: 210px !important; }


  .sec-join { padding: 52px 44px 54px !important; }
  .join-media { height: 320px !important; }
  .site-footer { padding: 30px 44px 38px !important; }

  .stickybar-inner { padding: 12px 44px 14px !important; }
}

/* PC ではホバーで少し持ち上げる（タッチ端末には効かせない） */
@media (hover: hover) and (min-width: 768px) {
  .act-card { transition: transform .18s ease, box-shadow .18s ease; }
  .act-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
}