/* ========== Design Tokens ========== */
:root{
  --maxw:1280px; --nav-h:72px;
  --radius:16px; --radius-lg:22px;
  --shadow-1:0 8px 30px rgba(0,0,0,.10);
  --shadow-2:0 16px 60px rgba(0,0,0,.18);
  --ink:#111; --ink-weak:#666;
  --bg-dark:#0f0f10; --bg-light:#f4f4f5; --card:#fff;
}

/* ========== Reset & Base ========== */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 24px); }
body{
  margin:0; color:var(--ink);
  font-family:'Manrope','Noto Sans JP',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,'Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;
  line-height:1.6; background:var(--bg-dark); overflow-x:hidden;
  padding-bottom:env(safe-area-inset-bottom);
}
img,svg,video,canvas{ max-width:100%; height:auto; }
:where(h1,h2,h3,h4,p,li){ overflow-wrap:anywhere; }

.site{ position:relative; min-height:100dvh; }
.container{ width:min(var(--maxw),100%); margin-inline:auto; padding-inline:clamp(16px,4vw,24px); }

/* ========== Header (glass) ========== */
header{ position:sticky; top:max(12px, env(safe-area-inset-top)); z-index:50; display:flex; justify-content:center; padding-inline:16px; }
.nav{
  width:min(var(--maxw),100%); height:var(--nav-h);
  background:rgba(255,255,255,.92); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid rgba(0,0,0,.06); border-radius:12px; box-shadow:var(--shadow-1);
  display:flex; align-items:center; justify-content:space-between; gap:10px; padding-inline:18px;
}
.brand-wrap{ display:flex; align-items:center; gap:14px; }
.brand{ display:flex; align-items:center; gap:12px; font-weight:800; letter-spacing:.2px; color:#111; text-decoration:none; font-size:22px; }
.brand img{ width:clamp(28px,5vw,34px); height:clamp(28px,5vw,34px); object-fit:contain; }

.lang-switch{ display:flex; align-items:center; gap:6px; padding:4px; background:#f0f0f0; border-radius:999px; border:1px solid rgba(0,0,0,.08); box-shadow:0 1px 0 rgba(0,0,0,.05) inset; }
.lang-btn{ appearance:none; border:0; background:transparent; padding:6px 10px; border-radius:999px; font-weight:800; font-size:12px; letter-spacing:.04em; cursor:pointer; color:#333; }
.lang-btn[aria-pressed="true"]{ background:#111; color:#fff; }

.nav ul{ display:flex; list-style:none; margin:0; padding:0; gap:28px; }
.nav a{ color:#111; text-decoration:none; font-weight:700; font-size:14px; opacity:.8; }
.nav a:hover{ opacity:1; }
.nav a.active{ position:relative; opacity:1; }
.nav a.active::after{ content:""; position:absolute; left:0; right:0; bottom:-14px; margin:auto; width:26px; height:2px; background:#111; border-radius:2px; }
.menu-btn{ display:none; border:0; background:transparent; padding:8px; cursor:pointer; }
.menu-btn span{ display:block; width:24px; height:2px; background:#222; margin:5px 0; border-radius:2px; }

@media (max-width:880px){
  :root{ --nav-h:64px; }
  .nav{ height:auto; padding:10px 14px; flex-wrap:wrap; }
  .nav ul{ display:none; width:100%; flex-direction:column; gap:12px; padding:10px 6px 12px; max-height:70vh; overflow:auto; }
  .nav.open ul{ display:flex; }
  .menu-btn{ display:block; }
}

/* ========== Hero ========== */
.hero{
  position:relative; min-height:100svh;
  margin-top:calc(-1 * (var(--nav-h) + 24px));
  padding-top:calc(clamp(60px,8vh,120px) + var(--nav-h) + 24px);
  padding-bottom:clamp(60px,8vh,120px);
  display:flex; align-items:center; color:#fff; overflow:hidden;
}
.hero::before{ content:""; position:absolute; inset:0; background:url('../img/hero.jpg') center/cover no-repeat; filter:brightness(.78); }
@media (min-width:881px){ .hero::before{ background-attachment:fixed; } }
.hero::after{ content:""; position:absolute; inset:0; background:linear-gradient(to bottom, rgba(0,0,0,.48), rgba(0,0,0,.45)); }
.hero .inner{ position:relative; z-index:1; }
.hero h1{ font-size:clamp(36px,9vw,96px); line-height:.98; margin:0 0 18px; font-weight:800; letter-spacing:.2px; }
.hero p{ max-width:740px; font-size:clamp(15px,2.6vw,20px); opacity:.92; }
.actions{ margin-top:28px; display:flex; gap:14px; flex-wrap:wrap; }
.btn{ display:inline-flex; align-items:center; justify-content:center; padding:14px 22px; border-radius:999px; border:1px solid rgba(255,255,255,.5); font-weight:800; text-decoration:none; letter-spacing:.2px; }
.btn-primary{ background:#fff; color:#111; border-color:transparent; box-shadow:var(--shadow-2); }
.scroll-indicator{ position:absolute; right:24px; top:50%; transform:translateY(-50%); writing-mode:vertical-rl; text-orientation:mixed; display:flex; align-items:center; gap:12px; letter-spacing:4px; font-size:12px; opacity:.85; }
.scroll-indicator::after{ content:""; width:1px; height:160px; background:rgba(255,255,255,.65); border-radius:1px; margin-top:12px; }
@media (max-width:880px){ .scroll-indicator{ display:none; } }

/* ========== Section base ========== */
section{ padding:100px 0; scroll-margin-top:calc(var(--nav-h) + 24px); }
.eyebrow{ display:inline-flex; align-items:center; gap:12px; color:#b5b5b6; font-weight:800; letter-spacing:.2em; text-transform:uppercase; font-size:12px; }
.eyebrow::before{ content:""; width:46px; height:2px; background:currentColor; opacity:.6; border-radius:2px; }
.h-section{ font-size:clamp(28px,5vw,56px); margin:10px 0 10px; line-height:1.1; letter-spacing:.2px; }
.section-lead{ color:#666; max-width:68ch; }
@media (max-width:520px){ section{ padding:64px 0; } }

/* ========== About (dark split) ========== */
.about{ background:#111; color:#f3f3f3; }
.about .grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,48px); align-items:start; }
.about h2{ font-size:clamp(24px,4vw,44px); line-height:1.2; margin:0 0 12px; }
.about p{ color:#d0d0d0; }
.about .ph{
  width:100%; aspect-ratio:16/10; max-height:360px;
  border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-2);
  background:#333 url('../img/about.jpg') center/cover no-repeat;
}
@media (max-width:980px){
  .about .grid{ grid-template-columns:1fr; }
  .about .ph{ max-height:clamp(160px,44vw,280px); margin:6px 0; }
}

/* About: 代表メッセージ画像と順序 */
#message article.grid{ align-items:start !important; }
#message .ph{ padding:0 !important; min-height:0 !important; height:auto !important; aspect-ratio:16/10; width:100%; max-height:360px; background-size:cover; background-position:center; border-radius:24px; }
#message .ph::before, #message .ph::after{ content:none !important; display:none !important; }
@media (max-width:980px){
  #message article.grid{ display:flex !important; flex-direction:column; gap:14px; align-items:stretch !important; }
  #message article.grid:has(> figure.ph:first-child){ flex-direction:column-reverse; }
}

/* About: 記事間の余白・カード群 */
.about .container > article + article, #message .container > article + article{ margin-top:clamp(22px,3vw,40px); }
@media (max-width:980px){ .about .container > article + article, #message .container > article + article{ margin-top:clamp(16px,4vw,28px); } }
#message .cards{ margin-bottom:clamp(32px,6vw,72px); }
#message .container > :where(article,.cards) + :where(article,.cards){ margin-top:clamp(32px,5vw,72px); }

/* 高校の四つの挑戦 */
#message .cards .mini-card:nth-child(1){ background-image:url('../img/story4-1.png') !important; }
#message .cards .mini-card:nth-child(2){ background-image:url('../img/story4-2.png') !important; }
#message .cards .mini-card:nth-child(3){ background-image:url('../img/story4-3.png') !important; }
#message .cards .mini-card:nth-child(4){ background-image:url('../img/story4-4.png') !important; }
@media (min-width:981px){
  #message .cards{ display:grid !important; grid-template-columns:repeat(2, minmax(0,1fr)); gap:22px; }
  #message .mini-card{ aspect-ratio:auto; height:clamp(200px,24vw,450px); background-size:cover; background-position:center; }
  #message .mini-card:nth-child(1){ background-position:top right; }
  #message .mini-card:nth-child(2){ background-position:top left; }
  #message .mini-card:nth-child(3){ background-position:bottom right; }
  #message .mini-card:nth-child(4){ background-position:bottom left; }
}
#message .mini-card .overlay{
  background:linear-gradient(180deg, rgba(0,0,0,.30) 0%, rgba(0,0,0,.62) 70%, rgba(0,0,0,.78) 100%) !important;
}
#message .mini-card h4, #message .mini-card p{ color:#fff !important; text-shadow:0 2px 12px rgba(0,0,0,.6), 0 0 1px rgba(0,0,0,.8); }
#message .mini-card p{ line-height:1.75; }

/* 代表メッセージ署名（About内） */
#message .sigline{ margin-top:12px; text-align:right; font-weight:800; letter-spacing:.02em; color:#e8e8e8; opacity:.9; }
@media (max-width:980px){ #message .sigline{ font-size:.95rem; margin-top:10px; } }

/* ========== Project (light cards) ========== */
.project{ background:var(--bg-light); color:var(--ink); }
.cards{ display:grid; gap:26px; }
.hero-card{
  position:relative; border-radius:18px; overflow:hidden; aspect-ratio:16/8.8;
  background:#cfd3d7 url('../img/project-1.jpg') center/cover no-repeat; box-shadow:var(--shadow-1);
}
.hero-card .overlay{ position:absolute; inset:0; background:linear-gradient(to bottom, rgba(0,0,0,.08), rgba(0,0,0,.35)); display:flex; align-items:flex-end; justify-content:center; text-align:center; padding:clamp(14px,4vw,24px); }
.hero-card h3{ color:#fff; font-size:clamp(22px,4vw,40px); margin:0 0 6px; }
.hero-card p{ color:rgba(255,255,255,.9); margin:0 0 18px; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:26px; }
.mini-card{
  position:relative; border-radius:18px; overflow:hidden; aspect-ratio:16/9;
  background:#cfd3d7 url('../img/project-2.jpg') center/cover no-repeat; box-shadow:var(--shadow-1);
}
.mini-card:nth-child(2){ background-image:url('../img/project-3.jpg'); }
.mini-card .overlay{ position:absolute; inset:0; background:linear-gradient(to bottom, rgba(0,0,0,.08), rgba(0,0,0,.35)); display:flex; align-items:flex-end; padding:clamp(16px,4vw,24px); }
.mini-card h4{ color:#fff; font-size:clamp(18px,3vw,28px); margin:0; }
@media (max-width:980px){ .grid-2{ grid-template-columns:1fr; } }
@media (max-width:600px){ .hero-card{ aspect-ratio:auto; min-height:56vw; } .mini-card{ aspect-ratio:auto; min-height:52vw; } }

/* ========== Team (dark gallery) ========== */
.team{ background:#1b1b1d; color:#fff; }
.team .group{ margin-top:32px; }
.team .subhead{ font-weight:900; font-size:clamp(18px,2.6vw,22px); margin:0 0 12px; opacity:.95; }
.members-7{ display:grid; grid-template-columns:repeat(4, 1fr); gap:26px; margin-top:14px; }
.supporters-3{ display:grid; grid-template-columns:repeat(3, 1fr); gap:26px; margin-top:14px; }
.member,.supporter{ background:#262629; border-radius:16px; overflow:hidden; box-shadow:var(--shadow-1); display:flex; flex-direction:column; }
.member .ph,.supporter .ph{ background:#555 center/cover no-repeat; aspect-ratio:4/5; }
.member .txt,.supporter .txt{ padding:16px; }
.member .name-ja,.supporter .name-ja{ font-weight:900; }
.member .name-en,.supporter .name-en{ opacity:.85; margin-bottom:10px; }
.member .desc,.supporter .desc{ color:#c9c9c9; font-size:14px; }
@media (max-width:1180px){ .members-7{ grid-template-columns:repeat(3, 1fr); } }
@media (max-width:860px){ .members-7{ grid-template-columns:repeat(2, 1fr); } .supporters-3{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:520px){ .members-7{ grid-template-columns:1fr; } .supporters-3{ grid-template-columns:1fr; } }

/* ========== News (light cards) ========== */
.news{ background:var(--bg-light); color:var(--ink); }
.news-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:26px; margin-top:26px; }
.post{ background:var(--card); border-radius:16px; overflow:hidden; box-shadow:var(--shadow-1); display:flex; flex-direction:column; }
.post .ph{ background:#ddd url('../img/news-1.jpg') center/cover no-repeat; aspect-ratio:16/10; }
.post:nth-child(2) .ph{ background-image:url('../img/news-2.jpg'); }
.post:nth-child(3) .ph{ background-image:url('../img/news-3.jpg'); }
.post .txt{ padding:16px; }
.post .title{ font-weight:900; font-size:clamp(16px,2.4vw,18px); }
.post .snippet{ color:var(--ink-weak); font-size:14px; }
.post-link{ display:flex; flex-direction:column; height:100%; color:inherit; text-decoration:none; }
.post-link:focus-visible{ outline:3px solid #000; outline-offset:-3px; }
@media (max-width:980px){ .news-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .news-grid{ grid-template-columns:1fr; } }

/* ========== Support (stacked) ========== */
.support.stacked{ background:#0f0f10; color:#fff; }
.support.stacked .section-lead{ color:#d7d7d7; }
.support-block + .support-block{ margin-top:42px; }

/* A) 企業・団体カード */
.support-block.org .support-cards{ display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; margin-top:26px; }
@media (max-width:980px){ .support-block.org .support-cards{ grid-template-columns:1fr; } }

.support-card{
  background:#fff; color:#333; border-radius:16px; overflow:hidden;
  box-shadow:var(--shadow-1); border:1px solid #ececec; display:flex; flex-direction:column;
}
.support-card .hd{ background:#3b3b3d; color:#fff; padding:18px 20px; font-weight:900; font-size:20px; }
.support-card .hd small{ display:block; opacity:.9; font-weight:800; margin-top:6px; }
.support-card .bd{ padding:18px 20px; color:#555; }

/* Contact CTA */
.center-cta{ margin-top:18px; display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; }
.contact-btn{ background:#fff; color:#111; border:1px solid #ddd; padding:14px 22px; border-radius:999px; font-weight:800; text-decoration:none; box-shadow:var(--shadow-1); }
.center-cta small{ color:#cfcfcf; }

/* B) 個人向けプラン */
.support-block.cf .subhead{ margin:6px 0 4px; font-size:20px; font-weight:900; color:#fff; }
.cf-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; margin-top:18px; align-items:stretch; }
@media (max-width:1080px){ .cf-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:600px){ .cf-grid{ grid-template-columns:1fr; } }
.cf-card{
  position:relative; background:#fff; border:1px solid #ececec; border-radius:16px;
  box-shadow:var(--shadow-1); overflow:hidden; display:flex; flex-direction:column; height:100%;
  transition:transform .15s ease, box-shadow .15s ease;
}
.cf-card:hover{ transform:translateY(-2px); box-shadow:0 10px 34px rgba(0,0,0,.16); }
.cf-hd{ background:#3b3b3d; color:#fff; padding:18px 20px; min-height:112px; }
.cf-card.popular .cf-hd{ background:#111; }
.cf-plan{ margin:0; font-size:18px; font-weight:900; letter-spacing:.2px; }
.cf-desc{ margin:6px 0 0; color:#eee; font-size:14px; line-height:1.5; }
.cf-body{ padding:20px; background:#fff; display:flex; flex-direction:column; gap:12px; color:#333; flex:1 1 auto; }
.price{ display:flex; align-items:baseline; gap:8px; font-weight:900; color:#111; }
.price .amt{ font-size:32px; line-height:1; }
.price .unit,.price .per{ font-size:14px; color:#777; font-weight:800; letter-spacing:.04em; }
.cf-list{ margin:0; padding:0; list-style:none; color:#555; }
.cf-list li{ margin:8px 0; padding-left:24px; position:relative; }
.cf-list li::before{ content:"✔"; position:absolute; left:0; top:0; transform:translateY(2px); font-weight:900; font-size:14px; color:#111; }
.cf-cta{ margin-top:auto; align-self:flex-start; }
.support-block.cf > .cf-actions{ margin:28px 0 0; display:grid; place-items:center; width:100%; text-align:center; }
.support-block.cf > .cf-actions .btn{ justify-self:center; }

/* ========== Sponsors (light) ========== */
/* ===== Sponsors (サイズ差 + 中央揃え) ===== */
.sponsors{ background:var(--bg-light); color:var(--ink); }
.sponsors .section-lead{ color:#666; }
.spon-tier{ margin-top:24px; text-align:center; }
.tier-title{ margin:4px 0 10px; font-size:18px; letter-spacing:.04em; color:#333; font-weight:800; }

/* 中央揃えしやすいよう、Grid → Flexに */
.logo-grid{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:18px;
  justify-content:center;           /* 全体を中央揃え */
  align-items:center;
}

/* 共通のカード見た目 */
.logo-grid li{
  background:#fff; border:1px solid #ececec; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  aspect-ratio: 5 / 2;              /* 横長カード */
  padding:10px;
  box-shadow:var(--shadow-1);
  width:var(--cell-w);               /* ← 幅でサイズ差を出す */
}

/* 画像は段ごとに高さを変える（実ロゴの見た目差） */
.logo-grid img{ max-width:90%; height:auto; filter:grayscale(100%); opacity:.9; transition:.25s ease; }
.logo-grid img:hover{ filter:none; opacity:1; }

/* ---- 段別サイズ（PC）---- */
.logo-grid.logo-lg{ --cell-w: 320px; }
.logo-grid.logo-md{ --cell-w: 240px; }
.logo-grid.logo-sm{ --cell-w: 180px; }

.logo-lg img{ max-height:72px; }     /* 大きめ */
.logo-md img{ max-height:54px; }     /* 中 */
.logo-sm img{ max-height:40px; }     /* 小 */

/* ---- レスポンシブ ---- */
@media (max-width:1180px){
  .logo-grid.logo-lg{ --cell-w: 280px; }
  .logo-grid.logo-md{ --cell-w: 220px; }
  .logo-grid.logo-sm{ --cell-w: 170px; }
}
@media (max-width:720px){
  .logo-grid.logo-lg,
  .logo-grid.logo-md,
  .logo-grid.logo-sm{ --cell-w: min(300px, 44vw); } /* 2列中心・中央揃えのまま */
}


/* ========== Footer ========== */
footer{ background:#0f0f10; color:#bdbdbd; padding:80px 0 40px; }
.foot-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.cta{ background:#171717; border:1px solid rgba(255,255,255,.06); border-radius:16px; padding:28px; display:flex; justify-content:space-between; align-items:center; box-shadow:var(--shadow-1); }
.cta h3{ margin:0; color:#fff; font-size:clamp(20px,3vw,32px); }
.cta .arrow{ font-size:28px; }
.foot-bottom{ margin-top:28px; display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }
.foot-nav{ display:flex; gap:18px; flex-wrap:wrap; }
.foot-nav a{ color:#bdbdbd; text-decoration:none; font-size:14px; }
@media (max-width:900px){ .foot-grid{ grid-template-columns:1fr; } }

/* ========== Utilities / Buttons ========== */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }
.reveal{ opacity:0; transform:translateY(18px); transition:.7s ease; }
.reveal.show{ opacity:1; transform:none; }
.btn,.btn:link,.btn:visited{ color:#111; text-decoration:none; }
.cf-secondary,.cf-secondary:link,.cf-secondary:visited{ background:#fff; color:#111; border:1px solid #ddd; box-shadow:var(--shadow-1); }
.cf-secondary:hover,.cf-secondary:focus-visible{ background:#f6f6f7; border-color:#d0d0d0; }
.btn-light,.btn-light:link,.btn-light:visited{ background:#fff; color:#111; border:1px solid #ddd; }
.story a,.grid a{ overflow-wrap:anywhere; }

/* ========== Page Title Band (About) ========== */
.page-title-band{ position:relative; background:#0f0f10; padding:clamp(32px,6vw,72px) 0 clamp(10px,2vw,16px); }
.page-title-band::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:linear-gradient(90deg, rgba(255,255,255,.85), rgba(255,255,255,.25)); opacity:.9; }
.page-title{ margin:0; font-size:clamp(36px,6vw,72px); line-height:.98; font-weight:900; letter-spacing:.02em; color:#fff; text-shadow:0 6px 28px rgba(0,0,0,.45); }
.page-title-sub{ margin:6px 0 0; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:#bdbdbd; opacity:.9; font-size:clamp(11px,1.6vw,12px); }
#profile{ padding-top:clamp(24px,3vw,32px); }

/* ========== Profile (About top) ========== */
.profile .head{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(24px,4vw,40px); align-items:center; }
.profile .photo{ width:100%; max-width:360px; aspect-ratio:1/1; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-2); background:#333; }
.profile .photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.profile .name{ margin:0 0 4px; font-size:clamp(24px,4vw,40px); line-height:1.1; font-weight:900; }
.profile .name .en{ font-size:.55em; font-weight:700; opacity:.8; margin-left:.3em; }
.profile .lead{ margin:6px 0 14px; color:#d6d6d6; font-weight:700; }
.profile .meta{ display:grid; grid-template-columns:1fr; gap:10px; margin:0 0 12px; padding:0; }
.profile .meta > div{ display:grid; grid-template-columns:72px 1fr; gap:10px; }
.profile .meta dt{ margin:0; color:#bdbdbd; font-weight:800; letter-spacing:.02em; }
.profile .meta dd{ margin:0; color:#eaeaea; }
.profile .meta a{ color:#fff; text-decoration:underline; text-underline-offset:3px; }
.profile .bio{ margin:12px 0 0; padding-left:18px; color:#d0d0d0; }
.profile .bio li{ margin:6px 0; }
@media (max-width:880px){ .profile .head{ grid-template-columns:1fr; text-align:left; } .profile .photo{ max-width:220px; margin:0 auto; } }

/* ========== Coordinator (white section) ========== */
#coordinator{ background:#fff; color:#111; }
#coordinator h2,#coordinator h3,#coordinator .co-name,#coordinator .co-sub{ color:#111; }
#coordinator p,#coordinator li{ color:#444; }
#coordinator .co-lead{ color:#333; }
#coordinator .eyebrow{ color:#6b7280; }
#coordinator .eyebrow::before{ background:currentColor; opacity:.35; }
#coordinator .list-check li::before{ content:"✔"; position:absolute; left:0; top:.15em; font-weight:900; color:#0ea5e9; }
#coordinator .voice{ margin:10px 0 0; padding:12px 14px; background:#f7f7f8; border-left:4px solid #0ea5e9; color:#333; border-radius:10px; }
#coordinator .ph{ border:1px solid #eee; box-shadow:0 10px 30px rgba(0,0,0,.08); background-position:center; background-size:cover; border-radius:var(--radius-lg); overflow:hidden; }
#coordinator a{ color:#0ea5e9; }
@media (max-width:980px){ #coordinator article.grid{ display:flex !important; flex-direction:column; gap:14px; } #coordinator .ph{ max-height:260px; } }

/* ========== Organization (dark section) ========== */
#org{ background:#0f0f10; color:#f3f3f3; }
#org h2{ margin:0 0 10px; font-size:clamp(24px,4vw,44px); line-height:1.2; }
#org p{ color:#d0d0d0; }
.org-mission{ margin:14px 0 0; padding:12px 16px; border-left:4px solid rgba(255,255,255,.18); background:linear-gradient(90deg, rgba(255,255,255,.07), rgba(255,255,255,0)); color:#fff; font-weight:800; letter-spacing:.02em; border-radius:10px; }
#org .ph{ width:100%; aspect-ratio:16/10; max-height:360px; background-size:cover; background-position:center; border-radius:var(--radius-lg); box-shadow:var(--shadow-2); overflow:hidden; }
@media (max-width:980px){ #org .grid{ grid-template-columns:1fr !important; } #org .ph{ max-height:260px; } }

/* ========== Home About summary ========== */
#about article .actions{ display:none !important; }
#about .about-cta-bottom{ margin-top:18px; display:flex; justify-content:center; }
#about .about-cta-bottom .btn{ padding:16px 28px; font-weight:900; box-shadow:var(--shadow-2); }
#about .ph-portrait{ max-height:clamp(240px,30vw,400px); aspect-ratio:3/4; background-position:50% 22%; }
@media (max-width:880px){
  #about .container > article:nth-of-type(2){ display:flex !important; flex-direction:column; gap:14px; }
  #about .container > article:nth-of-type(2) > div:not(.ph){ order:1; }
  #about .container > article:nth-of-type(2) > .ph{
    order:2; width:clamp(200px,62vw,320px); aspect-ratio:1/1; max-height:none; margin:6px auto 0;
    background-size:cover; background-position:50% 24%; border-radius:var(--radius-lg); box-shadow:var(--shadow-2);
  }
}

/* ========== Voices (Supporter slider) — cleaned ========== */

/* container & layout */
.voices-spotlight{
  background: var(--card);
  padding: clamp(16px, 3vw, 36px) 0;
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.voices{
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
}
.voices-viewport{ overflow: hidden; outline: none; }
.voices-track{ display: flex; will-change: transform; transition: transform .5s ease; }
.voice-slide{
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: clamp(14px, 3vw, 28px);
  padding: clamp(6px, 1vw, 10px) 2px;
}

/* avatar */
.avatar{ width: min(280px, 36vw); aspect-ratio: 1/1; background-size: cover; background-position: center; }
.ph-round{ border-radius: 9999px; box-shadow: 0 8px 30px rgba(0,0,0,.10); }

/* quote text */
.quote{
  position: relative;
  margin: 0;
  font-size: clamp(15px, 2.1vw, 18px);
  line-height: 1.75;
  padding-left: 22px;                 /* “ と本文が重ならない余白 */
}
.quote p{ margin: 0 0 .75em; }
.quote p:last-child{ margin-bottom: 0; }

/* decorative opening quote “ */
.quote::before{
  content: "\201C";
  position: absolute;
  left: 0;
  top: .10em;
  transform: translateY(-.08em);
  font-size: 2em;
  line-height: 1;
  font-weight: 800;
  font-family: Manrope, Inter, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: rgba(0,0,0,.18);             /* 黒系に統一 */
  pointer-events: none;
  z-index: 0;
}
.quote p{ position: relative; z-index: 1; }

/* signature (right aligned under the quote) */
.voices .sigline{
  grid-column: 2;
  justify-self: end;
  text-align: right;
  margin-top: 12px;
  color: #111;
  font-weight: 800;
  letter-spacing: .02em;
}
.voices .sigline .affil{ color: #555; }

/* arrows */
.voices-btn{
  display: inline-grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.20);
  background: #fff;
  color: #111;
  cursor: pointer;
  transition: transform .12s ease, background .2s;
}
.voices-btn:hover{ transform: translateY(-1px); background: #f6f6f7; }
.voices-btn:active{ transform: translateY(0); }
.voices-btn[disabled]{ opacity: .4; cursor: default; }

/* dots */
.voices-dots{ display: flex; gap: 8px; justify-content: center; margin-top: 12px; }
.voices-dots [role="tab"]{ width: 8px; height: 8px; border-radius: 999px; background: #d1d5db; border: 0; padding: 0; cursor: pointer; }
.voices-dots [role="tab"][aria-selected="true"]{ background: #111; width: 22px; }

/* responsive */
@media (max-width: 860px){
  .voice-slide{ grid-template-columns: 1fr; }
  .avatar{ width: 160px; margin: 0 auto; }
  .quote{ padding-left: 16px; }       /* 余白だけ少し控えめに */
  .voices .sigline{ grid-column: 1; }
}

/* dark mode */
@media (prefers-color-scheme: dark){
  .voices-spotlight{ background: var(--bg-dark); border-bottom-color: rgba(255,255,255,.08); }
  .voices-btn{ background: var(--bg-dark); color: #e5e7eb; border-color: rgba(255,255,255,.24); }
  .voices-btn:hover{ background: #171717; }
  .voices-dots [role="tab"]{ background: #475569; }
  .voices-dots [role="tab"][aria-selected="true"]{ background: #fff; }
  .voices .sigline{ color: #e5e7eb; }
  .voices .sigline .affil{ color: #cbd5e1; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){ .voices-track{ transition: none; } }

/* === Team: Ambassadors =============================== */
.ambassadors-group { margin-top: 48px; }

.ambassadors-group .subhead {
  margin: 0 0 14px;
  font-weight: 800;
}

/* 4列グリッド（タブレット＝2列／モバイル＝1列） */
.ambassadors-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
@media (max-width: 1024px) {
  .ambassadors-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .ambassadors-4 { grid-template-columns: 1fr; }
}

/* カード本体（Members/Supportersと質感を近づける） */
.ambassador {
  background: var(--card-bg, rgba(255,255,255,0.04));
  border: 1px solid var(--card-border, rgba(0,0,0,0.08));
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  transition: transform .2s ease, box-shadow .2s ease;
}
@media (prefers-color-scheme: light) {
  .ambassador {
    background: var(--card-bg-light, #fff);
    border-color: rgba(0,0,0,0.06);
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
  }
}
.ambassador:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

/* 画像プレースホルダ */
.ambassador .ph {
  width: 100%;
  aspect-ratio: 16 / 9;               /* 画像が無くても比率キープ */
  background-size: cover;
  background-position: center;
}

/* テキスト */
.ambassador .txt { padding: 14px 16px; }
.ambassador .name-ja { font-weight: 700; }
.ambassador .name-en {
  font-size: .9rem;
  opacity: .75;
  margin-bottom: 8px;
}
.ambassador .desc {
  font-size: .95rem;
  line-height: 1.6;
  color: var(--muted-fg, #6b7280);
}
```css
/* ========== Sponsors Section ========== */
.sponsors{
  background: var(--bg-light);
  color: var(--ink);
}
.sponsors .section-lead{ color: var(--ink-weak); }

/* Tier block */
.spon-tier{
  margin-top: 26px;
  text-align: center;
}
.tier-title{
  margin: 6px 0 12px;
  font-size: 18px;
  letter-spacing: .04em;
  color: #333;
  font-weight: 800;
}

/* Grid (Flex) */
.logo-grid{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: center;
  align-items: center;
}

/* Card */
.logo-grid li{
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 5 / 2;
  padding: 10px 14px;
  box-shadow: var(--shadow-1);
  width: var(--cell-w);
}

/* Text label (when no image logo) */
.logo-grid li strong{
  font-weight: 900;
  color: #111;
  letter-spacing: .02em;
  font-size: 16px;
}

/* Logo image */
.logo-grid img{
  max-width: 90%;
  height: auto;
  max-height: var(--logo-h);
  filter: grayscale(100%);
  opacity: .92;
  transition: .25s ease;
}
.logo-grid img:hover{
  filter: none;
  opacity: 1;
}

/* Size presets */
.logo-grid.logo-lg{ --cell-w: 320px; --logo-h: 72px; }
.logo-grid.logo-md{ --cell-w: 240px; --logo-h: 54px; }
.logo-grid.logo-sm{ --cell-w: 180px; --logo-h: 40px; }

/* Responsive */
@media (max-width:1180px){
  .logo-grid.logo-lg{ --cell-w: 280px; }
  .logo-grid.logo-md{ --cell-w: 220px; }
  .logo-grid.logo-sm{ --cell-w: 170px; }
}
@media (max-width:720px){
  .logo-grid.logo-lg,
  .logo-grid.logo-md,
  .logo-grid.logo-sm{
    --cell-w: min(300px, 44vw); /* 2列ベース */
  }
}
@media (max-width:420px){
  .logo-grid.logo-lg,
  .logo-grid.logo-md,
  .logo-grid.logo-sm{
    --cell-w: 100%;            /* 1列 */
  }
}

/* Dark mode (prefers-color-scheme) */
@media (prefers-color-scheme: dark){
  .sponsors{ background: var(--bg-dark); color: #e5e7eb; }
  .sponsors .section-lead{ color: #cbd5e1; }
  .tier-title{ color: #e5e7eb; }

  .logo-grid li{
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.14);
    box-shadow: none;
  }
  .logo-grid li strong{ color: #f3f4f6; }
  .logo-grid img{ opacity: .95; }
}
/* ===== Sponsors fix: 見出しの右寄り/改行 & カードの中央揃え崩れを修正 ===== */

/* 1) セクション上部（eyebrow / h2 / lead）は必ず左揃えに固定 */
.sponsors .eyebrow,
.sponsors .h-section,
.sponsors .section-lead{
  text-align: left !important;
}

/* eyebrow は inline-flex なので中身も左に寄せる */
.sponsors .eyebrow{
  justify-content: flex-start !important;
}

/* 2) tier 見出しは中央に（ここは中央が自然） */
.sponsors .tier-title{
  text-align: center;
}

/* 3) ロゴ/名前の “塊” 自体を中央に寄せて、間延びを防ぐ */
.sponsors .logo-grid{
  width: min(980px, 100%);      /* ← ここが効く：幅いっぱいに広がるのを止める */
  margin-inline: auto;
  justify-content: center;
}

/* 4) li が縮んだり伸びたりしてズレるのを防ぐ（flexの癖を殺す） */
.sponsors .logo-grid li{
  flex: 0 0 var(--cell-w);      /* ← widthだけだと縮む/伸びることがある */
  max-width: 100%;
}

/* 5) “1枚だけの行” が変に右に寄る事故を防止 */
.sponsors .logo-grid{
  justify-content: center !important;
  align-content: center;
}

/* 6) モバイルでのカード幅を少し扱いやすく */
@media (max-width:720px){
  .sponsors .logo-grid{
    width: 100%;
  }
  .sponsors .logo-grid.logo-lg,
  .sponsors .logo-grid.logo-md,
  .sponsors .logo-grid.logo-sm{
    --cell-w: min(320px, 90vw); /* 1〜2列で気持ちよく */
  }
}

