/* ========== Design Tokens ========== */
:root{
  --maxw:1280px; --nav-h:72px;
  --radius:8px; --radius-lg:14px;
  --shadow-1:0 1px 2px rgba(20,20,20,.05), 0 1px 6px rgba(20,20,20,.05);
  --shadow-2:0 6px 20px rgba(20,20,20,.09);
  --shadow-3:0 12px 32px rgba(20,20,20,.13);

  --ink:#171717;        /* headings */
  --ink-body:#3f3f3f;   /* body copy */
  --ink-weak:#6b6b6b;   /* muted / secondary */
  --line:#e3e1da;       /* borders & dividers */

  --bg:#ffffff;         /* primary page background */
  --bg-tint:#f6f5f1;    /* alternate section background (warm off-white) */
  --bg-dark:#16241c;    /* footer / dark anchor band */
  --card:#ffffff;

  --brand:#2b5d40;       /* primary brand — forest green (from logo) */
  --brand-dark:#1f4530;  /* hover / active */
  --brand-tint:#eaf2ea;  /* pale brand wash for emphasis sections */
  --accent:#b35a29;      /* secondary brand — terracotta (from logo) */
  --accent-tint:#f7ece2;
}

/* ========== 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-body);
  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); overflow-x:hidden;
  padding-bottom:env(safe-area-inset-bottom);
}
img,svg,video,canvas,figure{ max-width:100%; height:auto; margin:0; }
:where(h1,h2,h3,h4,p,li){ overflow-wrap:anywhere; }
h1,h2,h3,h4{ color:var(--ink); }

html.nav-lock-scroll,
body.nav-lock-scroll {
  overflow: hidden !important;
}

html.nav-lock-scroll header {
  position: fixed !important;
  top: max(12px, env(safe-area-inset-top)) !important;
  left: 0 !important;
  right: 0 !important;
  padding-inline: 16px !important;
  width: 100% !important;
}


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

/* ========== Header ========== */
header{ position:sticky; top:max(12px, env(safe-area-inset-top)); z-index:50; display:flex; justify-content:center; padding-inline:16px; }
.nav{
  position:relative;
  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;
  display:flex; align-items:center; justify-content:space-between; gap:10px; padding-inline:18px;
}
.nav::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  box-shadow:var(--shadow-1);
  z-index:-1;
  pointer-events:none;
}
.brand-wrap{ display:flex; align-items:center; gap:14px; }
.brand{ display:flex; align-items:center; gap:12px; font-weight:800; letter-spacing:.2px; color:var(--ink); text-decoration:none; font-size:22px; }
.brand:hover, .brand:focus, .brand:active{ text-decoration:none !important; }
.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:#f0f0ec; 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; text-decoration:none; }
.lang-btn:hover, .lang-btn:focus, .lang-btn:active, .lang-btn:visited{ text-decoration:none !important; outline:none; }
.lang-btn[aria-pressed="true"]{ background:var(--brand); color:#fff; }

.nav #menu{ display:flex; list-style:none; margin:0; padding:0; gap:8px; }
.nav #menu a{ position:relative; display:inline-block; padding:24px 18px; color:var(--ink); text-decoration:none; font-weight:700; font-size:14px; opacity:.75; transition: opacity .2s, transform .2s, color .2s; }
.nav #menu a:hover{ opacity:1; transform: scale(1.1); }
.nav #menu a.active{ opacity:1; color:var(--brand); }
.nav #menu a::after{
  content:"";
  position:absolute;
  left:18px;
  right:18px;
  bottom:20px;
  height:2px;
  background:var(--brand);
  border-radius:2px;
  transform: scaleX(0);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center;
}
.nav #menu a:hover::after,
.nav #menu a.active::after{
  transform: scaleX(1);
}

/* ---- Dropdown (About / Team) ---- */
.has-dropdown{ position:relative; }
.has-dropdown > .dropdown-toggle{ display:inline-flex; align-items:center; }
.dropdown-toggle.no-link{ cursor:default; }
.dropdown-caret{
  display:inline-block; width:8px; height:8px; margin-top:-3px; margin-left:14px;
  border-right:2.5px solid currentColor; border-bottom:2.5px solid currentColor;
  transform:rotate(45deg); transition:transform .2s ease;
}
.has-dropdown:hover > .dropdown-toggle .dropdown-caret,
.has-dropdown:focus-within > .dropdown-toggle .dropdown-caret{ transform:rotate(225deg); margin-top:2px; }
.dropdown-menu{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
@media (min-width:881px){
  .dropdown-menu{
    position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(4px);
    min-width:230px; background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:12px;
    padding:8px; box-shadow:var(--shadow-2);
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .18s ease, transform .18s ease, visibility .18s;
    z-index:60;
  }
  .has-dropdown:hover > .dropdown-menu,
  .has-dropdown:focus-within > .dropdown-menu{
    opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0);
  }
  .dropdown-menu a{ display:block; padding:10px 14px !important; border-radius:8px; font-size:13px !important; opacity:1 !important; white-space:nowrap; transform:none !important; }
  .dropdown-menu a:hover{ background:var(--bg-tint); }
  .dropdown-menu a::after{ content:none !important; }
  .dropdown-menu a.active{ color:var(--brand); font-weight:800; }
}
@media (max-width:880px){
  .has-dropdown > .dropdown-toggle{ display:flex; justify-content:center; }
  .dropdown-toggle::after{ content:none !important; }
  .dropdown-caret{ transition:transform .2s ease; }
  .has-dropdown.open > .dropdown-toggle .dropdown-caret{ transform:rotate(225deg); margin-top:2px; }
  .dropdown-menu{ display:none; padding:0 0 10px; margin-top:2px; }
  .has-dropdown.open > .dropdown-menu{ display:flex; }
  .dropdown-menu a{ padding:10px 20px !important; font-size:15px !important; opacity:.8; }
}
.menu-btn{ display:none; border:0; background:transparent; padding:8px; cursor:pointer; transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1); }
.menu-btn:hover{ transform: scale(1.15); }
.menu-btn span{ display:block; width:24px; height:2px; background:#222; margin:5px 0; border-radius:2px; transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease, background-color 0.25s ease; transform-origin: center; }

/* Hamburger Open Animation */
.nav.open .menu-btn span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav.open .menu-btn span:nth-child(2) {
  opacity: 0;
  transform: scale(0);
}
.nav.open .menu-btn span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width:880px){
  :root{ --nav-h:64px; }
  .nav{
    height:var(--nav-h); padding:0 14px;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }
  /* Closed: frosted white bar so the logo stays readable over hero images */
  .nav::before{
    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;
  }
  .nav.open::before{ display:none; }
  .brand-wrap, .menu-btn{ position:relative; z-index:110; }

  /* Open menu: full-screen white panel below the header bar */
  .nav #menu{
    display:flex; flex-direction:column; gap:4px;
    position:fixed; inset:0; z-index:100;
    padding:calc(var(--nav-h) + max(12px, env(safe-area-inset-top)) + 12px) 12px 32px;
    background:#fff !important;
    opacity:0; pointer-events:none; visibility:hidden;
    transition:opacity .15s ease, visibility .15s;
    overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  }
  .nav.open #menu{ opacity:1; pointer-events:auto; visibility:visible; }
  .menu-btn{ display:block; }

  /* Mobile menu full width clickable area */
  .nav #menu a {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 14px 20px;
    text-align: center;
  }
  .nav #menu a::after {
    left: 0;
    right: 0;
    width: 40px;
    margin: 0 auto;
    bottom: 6px;
  }
}

/* Desktop: flatten the floating glass pill into a plain corporate bar */
@media (min-width:881px){
  header{
    top:0;
    padding-inline:0;
    background:#fff;
    border-bottom:1px solid rgba(0,0,0,.08);
  }
  .nav{
    background:transparent;
    border:0;
    border-radius:0;
    padding-inline:clamp(16px,4vw,24px);
  }
  .nav::before{ display:none; }
}

/* ========== 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;
}
/* Rotating hero background (3 cross-fading photos) */
.hero-bg{ position:absolute; inset:0; z-index:-2; }
.hero-bg .layer{
  position:absolute; inset:0;
  background-size:cover; background-position:center; background-repeat:no-repeat;
  filter:brightness(.95);
  opacity:0; transition:opacity 1.8s ease;
}
.hero-bg .layer.is-active{ opacity:1; }
@media (min-width:881px){ .hero-bg .layer{ background-attachment:fixed; } }
@media (prefers-reduced-motion: reduce){ .hero-bg .layer{ transition:none; } }
.hero::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(to bottom, rgba(14,24,17,.34), rgba(14,24,17,.26)); }
.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; color:#fff; text-shadow:0 2px 20px rgba(0,0,0,.5), 0 1px 4px rgba(0,0,0,.55); }
.hero p{ max-width:740px; font-size:clamp(15px,2.6vw,20px); opacity:.96; text-shadow:0 1px 12px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.5); }
.hero .eyebrow, .subpage-hero .eyebrow{ color:rgba(255,255,255,.85); }
.actions{ margin-top:28px; display:flex; gap:14px; flex-wrap:wrap; }
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 26px;
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.5);
  font-weight:800;
  text-decoration:none;
  letter-spacing:.2px;
  transition: background .2s, border-color .2s, transform .2s, box-shadow .2s, color .2s;
}
.btn-primary{ background:var(--brand); color:#fff; border-color:transparent; box-shadow:var(--shadow-1); }
.hero .btn-primary{ background:#fff; color:var(--ink); 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{ padding:100px 0; scroll-margin-top:calc(var(--nav-h) + 24px); }
.subpage-hero + section{ padding-top: clamp(40px, 6vw, 60px); }
.eyebrow{ display:inline-flex; align-items:center; gap:12px; color:var(--brand); font-weight:800; letter-spacing:.2em; text-transform:uppercase; font-size:12px; }
.eyebrow::before{ content:""; width:46px; height:2px; background:currentColor; opacity:.7; border-radius:2px; }
.h-section{ font-size:clamp(28px,5vw,56px); margin:10px 0 10px; line-height:1.1; letter-spacing:.2px; color:var(--ink); }
.section-lead{ color:var(--ink-weak); max-width:none; }
@media (max-width:520px){
  section{ padding:64px 0; }
  .subpage-hero + section{ padding-top: clamp(24px, 5vw, 36px); }
}

/* ========== About (light editorial split) ========== */
.about{ background:var(--bg); color:var(--ink-body); }
.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; color:var(--ink); }
.about p{ color:var(--ink-body); }
.about .ph{
  width:100%; aspect-ratio:16/10; max-height:360px;
  border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-2);
  background:#e5e3dc 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; }
}

#message{ background:var(--bg-tint); }
#message article.grid{ align-items:center !important; }
#message .ph{ padding:0 !important; min-height:0 !important; aspect-ratio:16/10; width:100%; max-height:360px; background-size:cover; background-position:center; border-radius:var(--radius-lg); }
#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:last-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; }
#message .mini-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  aspect-ratio: auto !important;
  min-height: 280px;
  background-size: cover;
  background-position: center;
}
@media (max-width: 980px) {
  #message .mini-card { height: auto !important; min-height: 240px; }
}
@media (max-width: 600px) {
  #message .mini-card { min-height: 220px; }
}
@media (min-width:981px) {
  #message .cards { display:grid !important; grid-template-columns:repeat(2, minmax(0,1fr)); grid-template-rows:repeat(2, 1fr); gap:22px; }
  #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 {
  position: relative !important;
  inset: auto !important;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 24px;
  background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.75) 60%, rgba(0,0,0,.88) 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 h4 { margin: 0; }
#message .mini-card p { line-height:1.75; margin: 8px 0 0; }

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

/* ========== Project (light cards) ========== */
.project{ background:var(--bg-tint); color:var(--ink-body); }
.cards{ display:grid; gap:26px; }
.hero-card{
  position:relative; border-radius:var(--radius-lg); 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:var(--radius-lg); 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 (light gallery) ========== */
.team{ background:var(--bg); color:var(--ink-body); }
.team .group{ margin-top:32px; }
.team .subhead{ font-weight:900; font-size:clamp(18px,2.6vw,22px); margin:0 0 12px; color:var(--ink); }
.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:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-1); display:flex; flex-direction:column; }
.member .ph,.supporter .ph{ background:#e5e3dc center/cover no-repeat; aspect-ratio:4/5; }
.member .txt,.supporter .txt{ padding:16px; }
.member .name-ja,.supporter .name-ja{ font-weight:900; color:var(--ink); }
.member .name-en,.supporter .name-en{ opacity:.75; margin-bottom:10px; color:var(--ink-weak); }
.member .desc,.supporter .desc{ color:var(--ink-weak); 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; } }

/* ========== Member Slider (Home page — one member card at a time) ========== */
.member-slider{
  position:relative; display:grid; grid-template-columns:auto 1fr auto;
  align-items:center; gap:clamp(14px,3vw,28px); margin-top:26px;
}
/* Height is set in px by JS (main.js) to match only the active slide, so a
   short bio doesn't inherit blank space from the track's tallest neighbor. */
.member-viewport{ overflow:hidden; outline:none; touch-action:pan-y; transition:height .35s ease; }
.member-track{ display:flex; align-items:flex-start; will-change:transform; transition:transform .5s ease; }
.member-track .member-plate{
  flex:0 0 100%; box-sizing:border-box;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg);
  overflow:hidden; box-shadow:var(--shadow-1);
  display:grid; grid-template-columns:minmax(200px,320px) minmax(0,1fr);
}
.member-plate .ph{ background:var(--bg-tint) center/contain no-repeat; height:100%; min-height:280px; }
.member-plate .txt{ padding:clamp(20px,3vw,32px); display:flex; flex-direction:column; justify-content:center; }
.member-plate .name-ja{ font-weight:900; font-size:clamp(18px,2vw,22px); color:var(--ink); }
.member-plate .name-en{ font-weight:700; opacity:.7; font-size:14px; color:var(--ink-weak); margin-top:2px; }
.member-plate .role-tag{ display:inline-block; margin-left:6px; padding:2px 10px; border-radius:999px; background:var(--brand); color:#fff; font-size:11px; font-weight:800; vertical-align:middle; }
.member-plate .affil{ color:var(--ink-weak); font-size:14px; margin:10px 0 12px; font-weight:700; }
.member-plate .desc{ color:var(--ink-body); font-size:14px; line-height:1.8; margin:0; }
.member-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:var(--ink); cursor:pointer;
  transition:transform .2s ease, background .2s, box-shadow .2s; z-index:10;
}
.member-btn:hover{ transform:translateY(-2px); background:var(--bg-tint); box-shadow:var(--shadow-1); }
.member-btn:active{ transform:translateY(0); box-shadow:none; }
.member-btn[disabled]{ opacity:.4; cursor:default; }
.member-dots{ display:flex; gap:8px; justify-content:center; margin-top:16px; }
.member-dots [role="tab"]{ width:8px; height:8px; border-radius:999px; background:#d1d5db; border:0; padding:0; cursor:pointer; transition:width .2s, background-color .2s, transform .2s; }
.member-dots [role="tab"][aria-selected="true"]{ background:var(--brand); width:22px; }
.member-dots [role="tab"]:hover:not([aria-selected="true"]){ background-color:#9ca3af; transform:scale(1.2); }
.member-slider.no-slide{ grid-template-columns:1fr; }
.member-slider.no-slide .member-btn,
.member-slider.no-slide + .member-dots{ display:none; }
@media (max-width:640px){
  .member-slider{ grid-template-columns:1fr; padding-bottom:54px; }
  .member-viewport{ margin-bottom:12px; }
  /* Buttons sit centered inside the slider's own bottom padding, well clear
     of the dots (a separate element below, with its own margin-top). */
  .member-btn{ position:absolute; bottom:7px; top:auto; transform:none; }
  .member-btn.prev{ left:calc(50% - 70px); }
  .member-btn.next{ right:calc(50% - 70px); }
  .member-track .member-plate{ grid-template-columns:minmax(0,1fr); }
  .member-plate .ph{ aspect-ratio:4/3; height:auto; min-height:0; width:100%; }
}
@media (prefers-reduced-motion: reduce){ .member-track, .member-viewport{ transition:none; } }

/* ========== Past Members grid (Member / History pages) ========== */
.past-members-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(80px,1fr)); gap:12px; margin-top:14px; margin-bottom:24px; }
.past-member-card{ background:var(--bg); border:1px solid var(--line); border-radius:6px; overflow:hidden; text-align:center; box-shadow:none; display:flex; flex-direction:column; }
.past-member-card .ph{ width:100%; aspect-ratio:1/1; background-size:cover; background-position:center; background-color:#e5e3dc; }
.past-member-card .name{ padding:6px 4px; font-size:11px; font-weight:700; color:var(--ink); line-height:1.2; }
.past-member-card .name-en{ font-size:9px; opacity:.7; margin-top:1px; display:block; color:var(--ink-weak); }

/* ========== News (light cards & slider) ========== */
.news{ background:var(--bg-tint); color:var(--ink-body); }
.news-slider{
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(14px, 3vw, 28px);
  margin-top: 26px;
}
.news-viewport{
  overflow: hidden;
  outline: none;
  touch-action: pan-y;
}
.news-track{
  display: flex;
  gap: 26px;
  will-change: transform;
  transition: transform .5s ease;
  list-style: none;
  margin: 0;
  padding: 0;
}
.news-track .post {
  flex: 0 0 calc((100% - 52px) / 3);
  box-sizing: border-box;
}

.news-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: var(--ink);
  cursor: pointer;
  transition: transform .2s ease, background .2s, box-shadow .2s;
  z-index: 10;
}
.news-btn:hover{ transform: translateY(-2px); background: var(--bg-tint); box-shadow: var(--shadow-1); }
.news-btn:active{ transform: translateY(0); box-shadow: none; }
.news-btn[disabled]{ opacity: .4; cursor: default; }

.news-dots {
  display: flex; gap: 8px; justify-content: center; margin-top: 16px;
}
.news-dots [role="tab"] {
  width: 8px; height: 8px; border-radius: 999px; background: #d1d5db; border: 0; padding: 0; cursor: pointer; transition: width .2s, background-color .2s, transform .2s;
}
.news-dots [role="tab"][aria-selected="true"] {
  background: var(--brand); width: 22px;
}
.news-dots [role="tab"]:hover:not([aria-selected="true"]) {
  background-color: #9ca3af; transform: scale(1.2);
}

/* no-slide state (when all items fit in 1 row, hide controls) */
.news-slider.no-slide {
  grid-template-columns: 1fr;
}
.news-slider.no-slide .news-btn,
.news-slider.no-slide + .news-dots {
  display: none;
}

.post{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-1); display:flex; flex-direction:column; }
.post .ph{ background:#e5e3dc 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); color:var(--ink); }
.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 var(--brand); outline-offset:-3px; }

@media (max-width: 980px){
  .news-track .post {
    flex: 0 0 calc((100% - 26px) / 2);
  }
}
@media (max-width: 640px){
  .news-slider {
    grid-template-columns: 1fr;
    padding-bottom: 54px;
  }
  .news-viewport {
    margin-bottom: 12px;
  }
  .news-btn {
    position: absolute;
    bottom: -36px;
    top: auto;
    transform: none;
  }
  .news-btn.prev {
    left: calc(50% - 70px);
  }
  .news-btn.next {
    right: calc(50% - 70px);
  }
  .news-track .post {
    flex: 0 0 100%;
  }
}


/* ========== Instagram Feed Section ========== */
.insta-section {
  margin-top: 48px;
  border-top: 1px solid var(--line);
  padding-top: 40px;
}
.insta-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}
.insta-logo-wrap {
  width: 42px;
  height: 42px;
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(214, 36, 159, 0.3);
}
.insta-logo-wrap img {
  width: 24px;
  height: 24px;
  filter: brightness(0) invert(1);
}
.insta-title {
  font-size: clamp(20px, 3.5vw, 24px);
  font-weight: 800;
  margin: 0;
  color: var(--ink);
}
.insta-handle {
  display: block;
  font-size: 14px;
  color: var(--ink-weak);
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s;
}
.insta-handle:hover {
  color: #d6249f;
}
.insta-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 2.5vw, 22px);
  margin-bottom: 30px;
}
.insta-item {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-1);
  background-color: #e5e3dc;
  background-size: cover;
  background-position: center;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
}
.insta-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-2);
}
.insta-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.65);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 16px;
  opacity: 0;
  transition: opacity 0.3s ease;
  color: #fff;
  font-size: 13px;
  line-height: 1.5;
}
.insta-item:hover .insta-overlay {
  opacity: 1;
}
.insta-caption {
  font-weight: 600;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0 0 10px 0;
}
.insta-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 800;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.9;
}
.insta-meta span {
  display: flex;
  align-items: center;
  gap: 4px;
}

@media (max-width: 980px) {
  .insta-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .insta-grid {
    grid-template-columns: 1fr;
  }
}


/* ========== Support (light) ========== */
.support.stacked{ background:var(--bg); color:var(--ink-body); }
.support.stacked .section-lead{ color:var(--ink-weak); }
.support-block + .support-block{ margin-top:42px; }

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

.support-card{
  background:transparent; color:var(--ink-body); border-radius:0;
  box-shadow:none; border:0; border-top:2px solid var(--brand);
  display:flex; flex-direction:column;
}
.support-card .hd{ background:none; color:var(--ink); padding:18px 0 0; font-weight:800; font-size:19px; }
.support-card .hd small{ display:block; color:var(--ink-weak); font-weight:700; margin-top:6px; font-size:12px; letter-spacing:.06em; text-transform:uppercase; }
.support-card .bd{ padding:12px 0 0; color:var(--ink-body); }

/* Contact CTA */
.center-cta{ margin-top:18px; display:flex; flex-direction:row; justify-content:center; align-items:center; gap:12px; flex-wrap:wrap; text-align:center; }
.center-cta small{ color:var(--ink-weak); }
@media (max-width:600px){ .center-cta{ flex-direction:column; } }

/* B) 個人向けプラン */
.support-block.cf .subhead{ margin:6px 0 4px; font-size:20px; font-weight:900; color:var(--ink); }
.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 var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-1); overflow:hidden; display:flex; flex-direction:column; height:100%;
  transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.cf-card:hover{ border-color:#c9c9c0; box-shadow:var(--shadow-2); transform:translateY(-2px); }
.cf-hd{ background:none; color:var(--ink); padding:20px 20px 14px; min-height:0; border-bottom:1px solid var(--line); }
.cf-plan{ margin:0; font-size:17px; font-weight:800; letter-spacing:.2px; color:var(--ink); }
.cf-desc{ margin:6px 0 0; color:var(--accent); font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.cf-body{ padding:20px; background:#fff; display:flex; flex-direction:column; gap:12px; color:var(--ink-body); flex:1 1 auto; }
.price{ display:flex; align-items:baseline; gap:8px; font-weight:800; color:var(--ink); }
.price .amt{ font-size:28px; line-height:1; }
.price .unit,.price .per{ font-size:14px; color:var(--ink-weak); font-weight:700; letter-spacing:.04em; }
.cf-list{ margin:0; padding:0; list-style:none; color:var(--ink-body); }
.cf-list li{ margin:8px 0; padding-left:18px; position:relative; }
.cf-list li::before{ content:"–"; position:absolute; left:0; top:0; font-weight:700; font-size:14px; color:var(--brand); }
.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{ background:var(--bg); color:var(--ink-body); }
.sponsors .section-lead{ color:var(--ink-weak); }
.spon-tier{ margin-top:24px; text-align:center; }
.tier-title{ margin:4px 0 10px; font-size:18px; letter-spacing:.04em; color:var(--ink); font-weight:800; }

.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 var(--line); border-radius:var(--radius);
  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; }

.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); }
}


/* ========== Footer ========== */
footer{ background:var(--bg-dark); color:#c3ccc6; padding:80px 0 40px; }
.foot-grid{ display:grid; grid-template-columns:1fr; gap:24px; }
.cta{ background:none; border:0; border-top:1px solid rgba(255,255,255,.14); border-radius:0; padding:28px 0; display:flex; justify-content:space-between; align-items:center; box-shadow:none; }
.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:#c3ccc6; text-decoration:none; font-size:14px; transition:color .2s; }
.foot-nav a:hover{ color:#fff; }
@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:#fff; text-decoration:none; }
.hero .btn,.hero .btn:link,.hero .btn:visited{ color:var(--ink); }
.cf-secondary,.cf-secondary:link,.cf-secondary:visited{ background:#fff; color:var(--ink); border:1px solid var(--line); box-shadow:none; }
.cf-secondary:hover,.cf-secondary:focus-visible{ background:var(--bg-tint); border-color:#c9c9c0; }
.btn-primary:hover, .btn-primary:link:hover, .btn-primary:visited:hover{ transform: translateY(-2px); background: var(--brand-dark); color: #fff !important; border-color: transparent; box-shadow: var(--shadow-2); }
.btn-primary:active, .btn-primary:link:active, .btn-primary:visited:active{ transform: translateY(0); box-shadow: var(--shadow-1); }
.hero .btn-primary:hover, .hero .btn-primary:link:hover, .hero .btn-primary:visited:hover{ background:var(--brand); color:#fff !important; }
.story a,.grid a{ overflow-wrap:anywhere; }

/* ========== Subpage Hero Layout ========== */
.subpage-hero{
  position:relative; min-height:40svh;
  margin-top:calc(-1 * (var(--nav-h) + 24px));
  padding-top:calc(clamp(40px,6vh,80px) + var(--nav-h) + 24px);
  padding-bottom:clamp(40px,6vh,80px);
  display:flex; align-items:center; color:#fff; overflow:hidden;
}
.subpage-hero::before{
  content:""; position:absolute; inset:0;
  background-position:center; background-size:cover; background-repeat:no-repeat;
  filter:brightness(.78); z-index:-2;
}
.subpage-hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(14,24,17,.55), rgba(14,24,17,.5)); z-index:-1;
}
.subpage-hero .inner{ position:relative; z-index:1; }
.subpage-hero h1{ font-size:clamp(28px,4.5vw,48px); line-height:1.1; margin:0 0 10px; font-weight:800; letter-spacing:.2px; color:#fff; }
.subpage-hero .lead-xl{ max-width:760px; font-size:clamp(14px,2.2vw,17px); opacity:.9; margin:0 0 14px; }
.subpage-hero .breadcrumbs{ font-size:13px; opacity:.85; letter-spacing:.02em; }
.subpage-hero .breadcrumbs a{ color:#fff; text-decoration:none; opacity:.85; font-weight: 700; }
.subpage-hero .breadcrumbs a:hover{ text-decoration:underline; opacity:1; }
.subpage-hero .breadcrumbs span{ margin-inline:8px; opacity:.6; }

/* Subpage Hero Backgrounds */
.hero--about::before{ background-image:url('../img/about.jpg'); }
.hero--message::before{ background-image:url('../img/world-travel-9872747_1280.jpg'); }
.hero--project::before{ background-image:url('../img/project-1.jpg'); }
.hero--team::before{ background-image:url('../img/story9.png'); }
.hero--news::before{ background-image:url('../img/news-1.png'); }
.hero--support::before{ background-image:url('../img/project-2.jpg'); }
.hero--activity::before{ background-image:url('../img/achievements/lesson-2025-12.jpg'); }
.hero--recruit::before{ background-image:url('../img/achievements/university-visit-2025-12.jpg'); }

/* Plain (image-less) subpage hero — used where no good photo exists:
   About, Message, Mission・Vision・Value, Origin of Ubunture, Team/Member. */
.subpage-hero--plain::before{ background-image:none; background-color:var(--bg-tint); filter:none; }
.subpage-hero--plain::after{ background:none; }
.subpage-hero--plain h1{ color:var(--ink) !important; text-shadow:none; }
.subpage-hero--plain .eyebrow{ color:var(--brand); }
.subpage-hero--plain .lead-xl{ color:var(--ink-body); opacity:1; }
.subpage-hero--plain .breadcrumbs{ color:var(--ink-weak); }
.subpage-hero--plain .breadcrumbs a{ color:var(--brand); opacity:1; }
.subpage-hero--plain .breadcrumbs span{ opacity:.6; }

#profile{ padding-top:clamp(24px,3vw,32px); }

/* ========== Article template (site-native News posts) ========== */
.article-meta{ display:flex; gap:14px; align-items:center; color:var(--ink-weak); font-weight:700; font-size:13px; letter-spacing:.03em; margin-bottom:18px; }
.article-hero{ width:100%; aspect-ratio:16/9; max-height:440px; border-radius:var(--radius-lg); background-size:cover; background-position:center; background-color:#e5e3dc; box-shadow:var(--shadow-2); margin-bottom:clamp(28px,4vw,44px); }
.article-body{ max-width:72ch; margin-inline:auto; }
.article-body h2{ margin:clamp(32px,5vw,48px) 0 14px; font-size:clamp(20px,2.6vw,28px); color:var(--ink); }
.article-body p{ margin:0 0 18px; line-height:1.9; color:var(--ink-body); }
.article-body blockquote{ margin:24px 0; padding:14px 20px; border-left:4px solid var(--brand); background:var(--brand-tint); color:var(--ink); font-weight:700; border-radius:var(--radius); }
.article-figure{ margin:28px 0; }
.article-figure img{ width:100%; border-radius:var(--radius-lg); box-shadow:var(--shadow-1); display:block; }
.article-figure figcaption{ margin-top:8px; font-size:13px; color:var(--ink-weak); text-align:center; }
@media (max-width:640px){ .article-hero{ max-height:280px; } }

/* ========== Representative message: intro photo + signature ========== */
.rep-msg-lead{ display:flex; align-items:center; gap:16px; margin:18px 0 26px; }
.rep-msg-photo{ width:84px; height:84px; margin:0; border-radius:50%; overflow:hidden; flex:0 0 auto; box-shadow:var(--shadow-1); background:#e5e3dc; }
.rep-msg-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.rep-msg-affil{ margin:0; font-weight:800; color:var(--ink); }
#representative .sigline{ margin-top:18px; text-align:right; font-weight:800; letter-spacing:.02em; color:var(--ink); opacity:.85; }
@media (max-width:520px){ #representative .sigline{ font-size:.95rem; } }

/* ========== Profile (About top) ========== */
.profile .head{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,40px); align-items:center; }
.profile .photo{ width:100%; max-width:440px; aspect-ratio:1/1; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-2); background:#e5e3dc; justify-self:center; }
.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; color:var(--ink); }
.profile .name .en{ font-size:.55em; font-weight:700; opacity:.7; margin-left:.3em; }
.profile .lead{ margin:6px 0 14px; color:var(--ink-weak); 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:var(--ink-weak); font-weight:800; letter-spacing:.02em; }
.profile .meta dd{ margin:0; color:var(--ink-body); }
.profile .meta a{ color:var(--brand); text-decoration:underline; text-underline-offset:3px; }
.profile .bio{ margin:12px 0 0; padding-left:18px; color:var(--ink-body); }
.profile .bio li{ margin:6px 0; }
@media (max-width:880px){ .profile .head{ grid-template-columns:1fr; text-align:left; } .profile .photo{ max-width:280px; margin:0 auto; } }

/* ========== Organization (name origin) ========== */
#org{ background:var(--bg); color:var(--ink-body); }
#org h2{ margin:0 0 10px; font-size:clamp(24px,4vw,44px); line-height:1.2; color:var(--ink); }
#org p{ color:var(--ink-body); }
.org-mission{ margin:14px 0 0; padding:14px 18px; border-left:4px solid var(--brand); background:var(--brand-tint); color:var(--ink); font-weight:800; letter-spacing:.02em; border-radius:var(--radius); }
#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; } }

/* ========== Mission & Vision (About page) ========== */
#mission{ background:var(--brand-tint); color:var(--ink-body); padding:clamp(48px,7vw,96px) 0; }
#mission .eyebrow{ color:var(--brand); }
#mission h2{ color:var(--ink); margin:6px 0 16px; font-size:clamp(22px,3.5vw,40px); }
#mission p{ color:var(--ink-body); line-height:1.85; }
#mission .mission-statement{ font-size:clamp(20px,3vw,36px); font-weight:900; color:var(--brand); line-height:1.4; letter-spacing:-.01em; margin:0 0 20px; }
#vision{ background:var(--bg); color:var(--ink-body); padding:clamp(48px,7vw,96px) 0; }
#vision .eyebrow{ color:var(--accent); }
#vision h2{ color:var(--ink); margin:6px 0 16px; font-size:clamp(22px,3.5vw,40px); }
#vision p{ color:var(--ink-body); line-height:1.85; }
#vision .vision-statement{ font-size:clamp(18px,2.5vw,30px); font-weight:800; color:var(--accent); line-height:1.45; margin:0 0 20px; }

/* ========== Values (About page) ========== */
#values{ background:var(--bg-tint); color:var(--ink-body); padding:clamp(48px,7vw,96px) 0; }
#values .eyebrow{ color:var(--brand); }
#values h2{ color:var(--ink); margin:6px 0 clamp(24px,4vw,48px); font-size:clamp(22px,3.5vw,40px); }
.values-grid{ display:flex; flex-direction:column; border-top:1px solid var(--line); }
.value-card{
  display:grid; grid-template-columns:56px 1fr; gap:20px; align-items:start;
  padding:26px 16px; margin:0 -16px; border-bottom:1px solid var(--line);
  border-radius:var(--radius);
  transition:background .2s ease;
}
.value-card:hover{ background:var(--bg); }
.value-card .v-icon{
  display:block;
  width:auto; height:auto; margin:0; padding:0;
  border:0; background:none; border-radius:0;
  color:var(--brand);
  font-size:26px;
  font-weight:800;
  line-height:1;
  letter-spacing:0;
  font-variant-numeric:tabular-nums;
}
.value-card h3{ grid-column:2; color:var(--ink); font-size:clamp(15px,1.4vw,18px); margin:2px 0 8px; }
.value-card p{ grid-column:2; color:var(--ink-weak); font-size:clamp(13px,1.1vw,15px); line-height:1.8; margin:0; }
@media (max-width:520px){
  .value-card{ grid-template-columns:40px 1fr; gap:14px; }
  .value-card .v-icon{ font-size:20px; }
}


/* ========== Home Activities: 3-stage summary ========== */
.activity-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:clamp(28px,4vw,44px); }
.activity-steps .step{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:24px; box-shadow:var(--shadow-1); }
.activity-steps .step .num{ color:var(--brand); font-weight:900; font-size:12px; letter-spacing:.1em; }
.activity-steps .step h3{ margin:8px 0 10px; font-size:clamp(17px,2vw,20px); color:var(--ink); }
.activity-steps .step p{ margin:0; color:var(--ink-weak); font-size:14px; line-height:1.75; }
@media (max-width:880px){ .activity-steps{ grid-template-columns:1fr; } }

/* ========== Home Team teaser: rotating avatars ========== */
.avatar-rotator{ position:relative; background:#e5e3dc; }
.avatar-rotator .layer{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  opacity:0; transition:opacity 1.4s ease;
}
.avatar-rotator .layer.is-active{ opacity:1; }
@media (prefers-reduced-motion: reduce){ .avatar-rotator .layer{ transition:none; } }

/* ========== About top (choice boxes) — always a centered 2x2 grid ========== */
.about-choice-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; max-width:640px; margin:clamp(28px,4vw,44px) auto 0; }
.about-choice-card{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-1); text-decoration:none; color:inherit; transition:transform .2s ease, box-shadow .2s ease; }
.about-choice-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-2); }
.about-choice-card .fig{ aspect-ratio:4/3; background-size:cover; background-position:center; background-color:#e5e3dc; }
.about-choice-card .body{ padding:18px; flex:1; display:flex; flex-direction:column; }
.about-choice-card .eyebrow{ margin-bottom:6px; font-size:11px; }
.about-choice-card h3{ margin:0; font-size:clamp(14px,2.4vw,20px); color:var(--ink); }
.about-choice-card p{ margin:8px 0 0; color:var(--ink-weak); font-size:14px; line-height:1.7; flex:1; }
.about-choice-card .go{ margin-top:16px; font-weight:800; color:var(--brand); font-size:13px; letter-spacing:.02em; }
@media (max-width:520px){
  .about-choice-grid{ gap:12px; }
  .about-choice-card .body{ padding:10px 12px; }
  .about-choice-card .eyebrow{ display:none; }
}

/* ========== 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-1); }
#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) ========== */
.voices-spotlight{
  background: var(--bg-tint);
  padding: clamp(16px, 3vw, 36px) 0;
  border-bottom: 1px solid var(--line);
}
.voices{
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
}
.voices-viewport{ overflow: hidden; outline: none; touch-action: pan-y; }
.voices-track{ display: flex; will-change: transform; transition: transform .5s ease; list-style: none; margin: 0; padding: 0; }
.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(220px, 25vw); 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;
  color: var(--ink-body);
}
.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: var(--brand);
  opacity: .3;
  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: var(--ink);
  font-weight: 800;
  letter-spacing: .02em;
}
.voices .sigline .affil{ color: var(--ink-weak); }

/* 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: var(--ink);
  cursor: pointer;
  transition: transform .2s ease, background .2s, box-shadow .2s;
}
.voices-btn:hover{ transform: translateY(-2px); background: var(--bg-tint); box-shadow: var(--shadow-1); }
.voices-btn:active{ transform: translateY(0); box-shadow: none; }
.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; transition: width .2s, background-color .2s, transform .2s; }
.voices-dots [role="tab"][aria-selected="true"]{ background: var(--brand); width: 22px; }
.voices-dots [role="tab"]:hover:not([aria-selected="true"]){ background-color: #9ca3af; transform: scale(1.2); }

/* responsive */
@media (max-width: 860px){
  .voices-spotlight { padding-bottom: 54px; }
  .voices { grid-template-columns: 1fr; }
  .voices-viewport { margin-bottom: 12px; }
  .voices-btn {
    position: absolute;
    bottom: -36px;
    top: auto;
    transform: none;
    z-index: 10;
  }
  .voices-btn.prev {
    left: calc(50% - 70px);
  }
  .voices-btn.next {
    right: calc(50% - 70px);
  }
  .voice-slide {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding-inline: 8px;
  }
  .avatar {
    width: 140px;
    margin: 0 auto;
    order: 1;
  }
  .voices .sigline {
    order: 2;
    text-align: center;
    margin-top: 12px;
    margin-bottom: 16px;
    font-size: 0.9rem;
    line-height: 1.4;
    height: 64px;
    display: block;
    width: 100%;
  }
  .quote {
    order: 3;
    padding: 0 8px 0 20px;
  }
}

/* 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;
  color: var(--ink);
}

.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; }
}

.ambassador {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  transition: transform .2s ease, box-shadow .2s ease;
}
.ambassador:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}

.ambassador .ph {
  width: 100%;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  background-color: #e5e3dc;
}

.ambassador .txt { padding: 14px 16px; }
.ambassador .name-ja { font-weight: 700; color: var(--ink); }
.ambassador .name-en {
  font-size: .9rem;
  opacity: .7;
  margin-bottom: 8px;
  color: var(--ink-weak);
}
.ambassador .desc {
  font-size: .95rem;
  line-height: 1.6;
  color: var(--ink-weak);
}

/* ========== Alternating Feature Grid (Home Teasers) ========== */
.teaser-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 6vw, 56px);
  align-items: center;
  margin-top: clamp(24px, 4vw, 40px);
}
.teaser-grid .ph {
  width: 100%;
  aspect-ratio: 16 / 10;
  max-height: 360px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-2);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #e5e3dc;
}
/* Opt-in: show the whole image at its native aspect ratio (no cropping),
   filling any leftover space with a light background — used for images like
   the Partnership diagram where cropping can hide part of the content. */
.ph-contain {
  background-size: contain !important;
  background-color: var(--bg-tint) !important;
}
.teaser-grid .txt {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.teaser-grid h3 {
  font-size: clamp(20px, 3vw, 30px);
  margin: 0 0 14px;
  color: var(--ink);
}
.teaser-grid p {
  margin: 0 0 20px;
  color: var(--ink-body);
}
.teaser-grid .actions-home {
  margin-top: 0;
  display: flex;
  justify-content: flex-start;
}
.teaser-grid .btn {
  padding: 14px 28px;
  font-weight: 800;
  box-shadow: var(--shadow-1);
}

/* Alternate order on desktop */
.teaser-grid--reverse .txt {
  order: 2;
}
.teaser-grid--reverse .ph {
  order: 1;
}

@media (max-width: 980px) {
  .teaser-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .teaser-grid .txt {
    order: 2;
  }
  .teaser-grid .ph {
    order: 1;
    max-height: clamp(180px, 44vw, 280px);
  }
  .teaser-grid .actions-home {
    justify-content: center;
  }
}

/* Mobile footer CONTACT alignment */
@media (max-width: 768px) {
  .cta {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

/* Portrait crop fix for Representative image */
.teaser-grid .ph-portrait {
  aspect-ratio: 3 / 4;
  max-height: 380px;
  width: min(100%, 285px);
  margin-inline: auto;
  background-position: 50% 20%;
}
@media (max-width: 980px) {
  .teaser-grid .ph-portrait {
    width: clamp(200px, 55vw, 280px);
    aspect-ratio: 3 / 4;
    max-height: none;
    margin-inline: auto;
  }
}