@charset "utf-8";

/* ==========================================================
   EO TOKYO EAST
   色は「藍」（江戸・東京東部の色）を基調に、
   アクセントはチャプターの花サクラソウの色を一点だけ使う。
   ========================================================== */

:root{
  --ai:        #16264A;  /* 藍 — 基調 */
  --ai-deep:   #0E1A34;  /* 濃藍 — フッター・ヒーロー */
  --ai-mid:    #2E4477;  /* 中藍 — 罫・補助 */
  --sakura:    #C8709B;  /* 桜草 — アクセント（唯一の差し色） */
  --paper:     #EFF1F4;  /* 紙 — 背景 */
  --paper-lo:  #E2E6EC;  /* 紙（沈） */
  --ink:       #1A1F2B;  /* 本文 */
  --ink-soft:  #55607A;  /* 補助文 */

  --w-wide: 1120px;
  --w-text: 34em;

  --step: clamp(1rem, 0.5rem + 1.2vw, 1.35rem);
}

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

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", sans-serif;
  font-size:var(--step);
  line-height:1.9;
  font-feature-settings:"palt" 1;
}

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

a{ color:var(--ai); text-decoration:none; border-bottom:1px solid var(--sakura); }
a:hover{ color:var(--sakura); }

:focus-visible{ outline:3px solid var(--sakura); outline-offset:3px; }

.skip{
  position:absolute; left:-9999px; top:0;
  background:var(--sakura); color:#fff; padding:.6em 1em; z-index:99;
}
.skip:focus{ left:0; }

.wrap{ width:min(100% - 2.5rem, var(--w-wide)); margin-inline:auto; }
.narrow{ max-width:var(--w-text); margin-right:auto; margin-left:0; }
.wrap.narrow{
  width:min(100% - 2.5rem, var(--w-wide));
  max-width:none;
  margin-inline:auto;
}
.wrap.narrow > *{ max-width:var(--w-text); }

/* ---------- 見出し ---------- */

.mincho{
  font-family:"Zen Old Mincho", "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-weight:600;
}

h1,h2,h3{ line-height:1.45; margin:0; letter-spacing:.01em; }

.h-sec{
  font-family:"Zen Old Mincho", "Yu Mincho", serif;
  font-weight:600;
  font-size:clamp(1.6rem, 1.1rem + 1.8vw, 2.4rem);
  margin-bottom:1.6rem;
}
.h-sec .en{
  display:block;
  font-family:"Zen Kaku Gothic New", sans-serif;
  font-weight:500;
  font-size:.62em;
  color:var(--sakura);
  letter-spacing:.06em;
  margin-bottom:.15em;
}

/* ---------- ヘッダー ---------- */

.masthead{
  background:var(--ai-deep);
  color:#fff;
  position:sticky; top:0; z-index:50;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.masthead .wrap{
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem; flex-wrap:wrap; padding-block:.85rem;
}
.brand{
  color:#fff; border:0;
  font-family:"Zen Old Mincho", serif; font-weight:600;
  font-size:1.05rem; letter-spacing:.09em; line-height:1.3;
}
.brand small{
  display:block; font-family:"Zen Kaku Gothic New",sans-serif;
  font-size:.62rem; letter-spacing:.22em; color:var(--sakura);
  font-weight:500;
}
.nav{ display:flex; gap:1.4rem; flex-wrap:wrap; }
.nav a{
  color:#D8DEEA; border:0; font-size:.86rem; letter-spacing:.04em;
  padding-block:.3em; border-bottom:2px solid transparent;
}
.nav a:hover{ color:#fff; border-bottom-color:var(--sakura); }
.nav a[aria-current="page"]{ color:#fff; border-bottom-color:var(--sakura); }

/* ---------- ヒーロー ---------- */

.hero{
  background:var(--ai-deep);
  color:#fff;
  position:relative;
  overflow:hidden;
}
.hero-photo{ display:block; }
.hero-photo img{
  width:100%;
  height:auto;
  display:block;
}
/* 旧実装（hero.jpg を背景に敷く方式）。戻す場合はコメントを解除し、
   index.html の .hero-photo を <div class="hero-img"> に戻すこと。
.hero-img{
  position:absolute; inset:0;
  background:var(--ai) url("images/hero.jpg") center/cover no-repeat;
  opacity:.34;
}
*/
.hero .wrap{
  position:relative;
  padding-block:clamp(2.5rem,6vw,4.5rem);
}
.hero-band{
  position:relative;
  overflow:hidden;
  background:var(--ai-deep);
}
.hero-map{
  position:absolute; right:0; bottom:0;
  width:min(58%, 1100px);
  height:100%;
  background-image:url("images/map-tokyo-east-mark.png");
  background-image:
    image-set(url("images/map-tokyo-east-mark.webp") type("image/webp"),
              url("images/map-tokyo-east-mark.png") type("image/png"));
  background-position:right bottom;
  background-size:contain;
  background-repeat:no-repeat;
  pointer-events:none;
  z-index:0;
}
.hero .wrap{ position:relative; z-index:1; }

@media (max-width:1200px){
  .hero-map{
    width:46%;
    background-position:right center;
  }
}
@media (max-width:900px){
  .hero-map{
    width:64%;
    background-position:right center;
  }
}

.hero-lead{
  font-size:.78rem; letter-spacing:.24em; color:var(--sakura);
  margin:0 0 1.6rem;
}
.hero h1{
  font-family:"Zen Old Mincho", serif; font-weight:600;
  font-size:clamp(2.1rem, 1.1rem + 4.6vw, 4.1rem);
  line-height:1.35; margin:0;
  text-shadow:0 2px 24px rgba(0,0,0,.35);
}
.hero-rule{
  width:4.5rem; height:2px; background:var(--sakura);
  margin:2.2rem 0 1.6rem;
}
.hero p{ max-width:30em; color:#D3DAE8; margin:0; font-size:.96rem; }

/* ---------- セクション ---------- */

.band{ padding-block:clamp(3.5rem,7vw,6rem); }
.band-paper{ background:var(--paper); }
.band-sink{ background:var(--paper-lo); }
.band-ai{ background:var(--ai); color:#EAEEF6; }
.band-ai .h-sec{ color:#fff; }
.band-ai a{ color:#fff; }

.lede{ font-size:1.06em; }

/* ---------- 三点セット（Purpose / Ambition / Values） ---------- */

.triad{ display:grid; gap:2.6rem; margin-top:2.6rem; }
@media (min-width:820px){ .triad{ grid-template-columns:repeat(3,1fr); gap:3rem; } }

.triad section{ border-top:2px solid var(--sakura); padding-top:1.1rem; }
.triad h3{
  font-family:"Zen Old Mincho", serif;
  font-size:1.25rem; margin-bottom:.5rem;
}
.triad h3 span{
  display:block; font-family:"Zen Kaku Gothic New",sans-serif;
  font-size:.68rem; letter-spacing:.18em; font-weight:500;
  color:var(--sakura); margin-bottom:.35em;
}
.triad p{ margin:0; font-size:.94rem; }
.triad .orig{ color:var(--ink-soft); font-size:.82rem; margin-top:.7rem; font-style:italic; }
.band-ai .triad p{ color:#D3DAE8; }
.band-ai .triad .orig{ color:#93A2C0; }

/* ---------- 値・活動などのリスト ---------- */

.rows{ margin-top:2.4rem; border-top:1px solid var(--paper-lo); }
.band-ai .rows{ border-top-color:rgba(255,255,255,.18); }

.rows > li{
  list-style:none;
  border-bottom:1px solid var(--paper-lo);
  padding-block:1.5rem;
  display:grid; gap:.4rem 2.5rem;
}
.band-ai .rows > li{ border-bottom-color:rgba(255,255,255,.18); }
@media (min-width:760px){
  .rows > li{ grid-template-columns:15rem 1fr; }
}
.rows{ padding-left:0; }
.rows h3{
  font-family:"Zen Old Mincho", serif; font-size:1.12rem; margin:0;
}
.rows h3 span{
  display:block; font-size:.68rem; letter-spacing:.14em;
  font-family:"Zen Kaku Gothic New",sans-serif; font-weight:500;
  color:var(--sakura); margin-top:.25em;
}
.rows p{ margin:0; font-size:.92rem; color:var(--ink-soft); }
.band-ai .rows p{ color:#C2CCE0; }

/* ---------- 三語（Connect / Engage / Elevate） ---------- */

.cee{ display:grid; gap:2rem 1.6rem; margin-top:2rem; }
@media (min-width:760px){ .cee{ grid-template-columns:repeat(3,1fr); } }
.cee > div{ border-left:2px solid var(--sakura); padding-left:1.2rem; }
.cee h3{ font-size:1.35rem; font-family:"Zen Old Mincho",serif; margin-bottom:.3rem; }
.cee p{ margin:0; font-size:.9rem; color:var(--ink-soft); }

/* 写真（未設定のあいだは div.ph が同じ枠で場所を取る） */
.cee img, .cee .ph{
  width:100%; aspect-ratio:1/1; margin-bottom:1.1rem;
}
.cee img{ object-fit:cover; background:var(--paper); }
.cee .ph{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.35em; text-align:center; padding:1rem;
  background:var(--paper); border:1px dashed #A9B3C6; color:var(--ink-soft);
  font-size:.74rem; letter-spacing:.03em; line-height:1.6;
}
.cee .ph b{
  font-family:"Zen Old Mincho",serif; font-weight:600;
  font-size:.82rem; color:var(--ai);
}

/* ---------- 年表 ---------- */

.chrono{ margin:2.4rem 0 0; padding:0; list-style:none; }
.chrono li{
  display:grid; gap:.2rem 1.8rem; padding-block:.85rem;
  border-bottom:1px solid var(--paper-lo);
}
@media (min-width:640px){ .chrono li{ grid-template-columns:5.5rem 1fr; } }
.chrono b{
  font-family:"Zen Old Mincho",serif; color:var(--sakura);
  font-size:1.02rem; font-weight:600;
}
.chrono p{ margin:0; font-size:.92rem; }

/* ---------- 数字 ---------- */

.figures{ display:grid; gap:2rem; margin-top:2.4rem; }
@media (min-width:700px){ .figures{ grid-template-columns:repeat(4,1fr); } }
.figures div{ border-top:1px solid rgba(255,255,255,.28); padding-top:1rem; }
.figures b{
  display:block; font-family:"Zen Old Mincho",serif;
  font-size:2.1rem; line-height:1.2; color:#fff;
}
.figures span{ font-size:.82rem; color:#A9B7D2; }

/* ---------- 例会一覧 ---------- */

.tbl{ width:100%; border-collapse:collapse; margin-top:2.2rem; font-size:.92rem; }
.tbl caption{
  text-align:left; color:var(--ink-soft); font-size:.86rem;
  padding-bottom:.9rem;
}
.tbl th, .tbl td{
  text-align:left; padding:1rem .9rem 1rem 0;
  border-bottom:1px solid var(--paper-lo); vertical-align:top;
}
.tbl thead th{
  border-bottom:2px solid var(--ai); font-weight:600; font-size:.8rem;
  letter-spacing:.06em; white-space:nowrap;
}
.tbl td:first-child{
  white-space:nowrap; font-family:"Zen Old Mincho",serif; color:var(--ai);
}
.tbl .done td{ color:var(--ink-soft); }
.tbl .done td:first-child{ color:var(--ink-soft); }

.tag{
  display:inline-block; font-size:.7rem; letter-spacing:.08em;
  padding:.15em .7em; border:1px solid var(--sakura); color:var(--sakura);
  border-radius:2px; white-space:nowrap;
}
.tag.past{ border-color:var(--ink-soft); color:var(--ink-soft); }

/* 例会表は4列あり会場名も長い。狭い画面では表だけを横スクロールさせ、
   ページ本体は横に動かさない。 */
.tbl-scroll{ overflow-x:auto; }
.tbl-scroll .tbl{ min-width:36rem; margin-top:.9rem; }

/* 日付セルは「日付 + タグ」を1行に横並びにする。
   .tbl td:first-child が white-space:nowrap なので日付とタグの間で折り返さず、
   狭い画面ではセルを潰さずに .tbl-scroll 側で表ごと横スクロールする。
   vertical-align はベースライン既定だとタグ枠が下に出るため、
   日付のオプティカルセンターに合わせて少し持ち上げている。 */
.tbl td .tag{ margin-left:.55em; vertical-align:.24em; }

/* 表の説明文。<caption> だとスクロール領域に巻き込まれて狭い画面で
   読めなくなるため、表の外に出して aria-describedby で紐づけている。 */
.tbl-cap{
  color:var(--ink-soft); font-size:.86rem;
  margin:2.2rem 0 0; max-width:44em;
}

/* 濃色 band（band-ai）に置いた表。
   素の .tbl は紙地前提で、日付列が var(--ai)、罫が var(--paper-lo) のため、
   藍地ではどちらも背景に沈む。他ブロック（.rows / .triad / .hl）と同じ
   反転の手順に合わせ、明色側へ振り直す。
   明色トーンは :root に変数が無く band-ai 側で直値運用のため、ここでも
   既存と同じ値を使っている（#fff → #D3DAE8 → #93A2C0 の順に落とす）。 */
.band-ai .tbl th, .band-ai .tbl td{
  border-bottom-color:rgba(255,255,255,.18);
}
.band-ai .tbl thead th{
  color:#fff; border-bottom-color:rgba(255,255,255,.38);
}
.band-ai .tbl td{ color:#D3DAE8; }
.band-ai .tbl td:first-child{ color:#fff; }

/* 終了回は紙地と同じく一段沈める。 */
.band-ai .tbl .done td,
.band-ai .tbl .done td:first-child{ color:#93A2C0; }

.band-ai .tbl-cap{ color:#C2CCE0; }

/* .tag は桜草色のまま。.hl-date と同じく濃藍地でも十分に読める。
   past だけは var(--ink-soft) が沈むため明色へ。 */
.band-ai .tag.past{ border-color:#93A2C0; color:#93A2C0; }

/* ---------- 会長挨拶 ---------- */

.greeting{
  display:grid; gap:2.4rem; margin-top:2.4rem; align-items:start;
}
@media (min-width:820px){ .greeting{ grid-template-columns:16rem 1fr; } }
.greeting figure{ margin:0; }
.greeting figcaption{
  font-size:.82rem; color:var(--ink-soft); margin-top:.7rem;
}
.greeting figcaption b{ display:block; font-size:1rem; color:var(--ink); }
.greeting .sig{
  font-family:"Zen Old Mincho",serif; margin-top:1.6rem; font-size:.95rem;
}

/* ---------- 写真 ---------- */

.shot{ margin:0; background:var(--ai); }
.shot img{ width:100%; aspect-ratio:16/9; object-fit:cover; }
.gallery{ display:grid; gap:1rem; margin-top:2.4rem; }
@media (min-width:700px){ .gallery{ grid-template-columns:repeat(3,1fr); } }

/* ---------- 導線 ---------- */

.more{
  display:inline-block; margin-top:2rem; border:0;
  border-bottom:2px solid var(--sakura); padding-bottom:.2em;
  font-size:.92rem; letter-spacing:.04em;
}

.pair{ display:grid; gap:2.4rem; }
@media (min-width:820px){ .pair{ grid-template-columns:1fr 1fr; gap:3.5rem; align-items:center; } }

/* ---------- 入会について ---------- */

.note{
  border-left:2px solid var(--sakura);
  padding:.2rem 0 .2rem 1.4rem;
  margin-top:2rem;
  font-size:.92rem;
  color:var(--ink-soft);
}
.band-ai .note{ color:#C2CCE0; }

/* ---------- フッター ---------- */

.foot{
  background:var(--ai-deep); color:#93A2C0;
  padding-block:3rem 2.2rem; font-size:.84rem;
}
.foot a{ color:#D8DEEA; border:0; }
.foot a:hover{ color:var(--sakura); }
.foot-nav{ display:flex; gap:1.4rem; flex-wrap:wrap; margin-bottom:1.8rem; padding:0; list-style:none; }
.foot .copy{ border-top:1px solid rgba(255,255,255,.14); padding-top:1.5rem; margin:0; }

/* 行長の調整（1行が長くなりすぎないように） */
.rows p{ max-width:40em; }
.chrono p{ max-width:44em; }

/* 会長ポートレートの比率を固定（画像未設定でもレイアウトが動かないように） */
.greeting figure{ max-width:16rem; }
.greeting img{ aspect-ratio:4/5; object-fit:cover; background:var(--paper-lo); width:100%; }

/* ---------- コア・バリュー（トップのダイジェスト用カード） ---------- */
/* band-ai（藍地）の中で使う前提。文字色は白系で固定している。
   詳しい本文は about-eo.html#values 側に置き、ここは1行要約だけ。 */
.values{
  display:grid; gap:2.2rem 1.6rem;
  margin-top:2.6rem;
  grid-template-columns:repeat(2,1fr);
}
@media (min-width:760px){ .values{ grid-template-columns:repeat(4,1fr); } }

.values img{
  width:100%; aspect-ratio:1/1; object-fit:cover;
  background:var(--ai-deep);
  margin-bottom:1.1rem;
}
.values h3{
  font-family:"Zen Old Mincho",serif;
  font-size:1.08rem; color:#fff; margin:0 0 .15rem;
  line-height:1.4;
}
.values .en-v{
  display:block; font-family:"Zen Kaku Gothic New",sans-serif;
  font-size:.64rem; letter-spacing:.1em; font-weight:500;
  color:#93A2C0; margin-bottom:.6rem;
}
.values p{ margin:0; font-size:.84rem; line-height:1.75; color:#C2CCE0; }

/* ---------- 直近の例会（トップのダイジェスト用） ---------- */

.upcoming{
  list-style:none; padding:0; margin:2.6rem 0 0;
  border-top:1px solid var(--paper-lo);
}
.upcoming li{
  display:grid; gap:.15rem 1.6rem;
  padding-block:1rem;
  border-bottom:1px solid var(--paper-lo);
}
@media (min-width:700px){
  .upcoming li{ grid-template-columns:15rem 1fr auto; align-items:baseline; }
}
.upcoming .u-date{
  font-family:"Zen Old Mincho",serif; color:var(--ai); font-size:.94rem;
}
.upcoming .u-title{ font-size:.94rem; }
.upcoming .u-place{ font-size:.86rem; color:var(--ink-soft); }

/* 固定ヘッダーに隠れないよう、アンカーの着地位置を下げる */
.band[id]{ scroll-margin-top:4.5rem; }

/* ---------- 期のハイライト（events.html#highlights） ---------- */
/* 1件 = article.hl。今後 article.hl を複製して増やしていく前提なので、
   件数に依存するスタイル（:first-child での見た目の作り分けなど）は
   区切り線まわり以外では使わない。 */

.highlights{ margin-top:2.6rem; }

/* 2件目以降だけ、上に余白と細い区切り線を置く */
.hl + .hl{
  margin-top:clamp(3rem,5vw,4.5rem);
  padding-top:clamp(3rem,5vw,4.5rem);
  border-top:1px solid var(--paper-lo);
}

.hl-date{
  font-family:"Zen Old Mincho", "Yu Mincho", serif;
  font-weight:600;
  color:var(--sakura);
  font-size:1.02rem;
  letter-spacing:.04em;
  margin:0 0 .25rem;
}

.hl-title{
  font-family:"Zen Old Mincho", "Yu Mincho", serif;
  font-weight:600;
  font-size:clamp(1.2rem, 1rem + .7vw, 1.5rem);
  margin:0;
}

.hl-place{
  font-size:.86rem;
  color:var(--ink-soft);
  margin:.45rem 0 0;
}

.hl-body{
  max-width:44rem;
  line-height:2.05;
  margin:1.4rem 0 0;
  font-size:.96rem;
}

/* 本文中の強調。斜体にはせず、字面の太さだけで立たせる。
   色を変えるとリンクに見えるため、本文色をそのまま継承する。 */
.hl-body em{
  font-style:normal;
  font-weight:600;
  color:inherit;
}

/* 写真は3列。元画像は長辺1200pxの3:2で書き出しているので、
   aspect-ratio を固定して読み込み前後でレイアウトを動かさない。 */
.hl-shots{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1rem;
  margin-top:1.8rem;
}
.hl-shot{ margin:0; }
.hl-shot picture{ display:block; }
.hl-shot img{
  width:100%;
  aspect-ratio:3/2;
  object-fit:cover;
  background:var(--paper-lo);
}
.hl-shot figcaption{
  font-size:.8rem;
  line-height:1.7;
  color:var(--ink-soft);
  margin-top:.6rem;
}

/* 900px以下は2列にして、1枚目だけ全幅で見せる */
@media (max-width:900px){
  .hl-shots{ grid-template-columns:repeat(2,1fr); }
  .hl-shots > .hl-shot:first-child{ grid-column:1 / -1; }
}

/* 600px以下は1列。全幅指定は不要になるので戻す */
@media (max-width:600px){
  .hl-shots{ grid-template-columns:1fr; }
  .hl-shots > .hl-shot:first-child{ grid-column:auto; }
}

/* 濃色 band（band-ai）に移した場合の文字色。
   他ブロック（.rows / .triad / .values）と同じ反転の手順に合わせている。 */
.band-ai .hl + .hl{ border-top-color:rgba(255,255,255,.18); }
.band-ai .hl-title{ color:#fff; }
.band-ai .hl-body{ color:#D3DAE8; }
.band-ai .hl-place{ color:#93A2C0; }
.band-ai .hl-shot figcaption{ color:#A9B7D2; }
.band-ai .hl-shot img{ background:var(--ai-deep); }
/* .hl-date は桜草色のまま。濃藍地でも十分に読める。
   .hl-body em は color:inherit なので、濃藍地では上の .hl-body の色に追随する。 */

/* ---------- ヘッダーロゴ ---------- */
.brand{ display:block; border:0; line-height:0; flex:0 0 auto; }
.brand img{ height:2.5rem; width:auto; display:block; }
@media (max-width:700px){
  .brand img{ height:1.9rem; }
  .masthead .wrap{ gap:.9rem; }
  .nav{ gap:1rem; }
}