/* =========================================================
   基礎学部（/basic）
   style.css を読み込んだ「あと」に読む。上書きだけを書く。
   ========================================================= */

/* ---------- 1) 色を緑に差し替える ----------
   style.css は色がほぼ全部トークン化されているので、
   :root の定義だけ差し替えれば参照側（var(--red) など77箇所）は一切触らなくてよい。
   実測で確認済み（2026-09-07）。 */
:root{
  --red:#089781;        /* 基礎学部の主色。team-mir.ai の実測値 */
  --red-dp:#0b7f6d;
  --kv-red:#089781;
  --au-red:#0AA98F;
  --au-vermilion:#089781;
  --au-orange:#3FC9B2;
  --au-orange-lt:#64D8C6;
  --au-purple:#0B6E5E;
}

/* ---------- 2) ヘッダー ----------
   expert.html は背景が濃い色なので既定が白。こちらは白地なので既定を --ink にし、
   暗いセクション（フッター）の上にいるときだけ白へ反転させる。 */
.site-brand{color:var(--ink)}
.site.on-dark .site-brand{color:#fff}

/* ---------- 3) 動画アーカイブ（YouTubeの再生リスト風） ---------- */
/* 🔑 2026-09-07 方針変更: ショートの縦長ではなく、通常のYouTube（16:9）に1本化。
   左に大きなプレーヤー、右に一覧、というYouTubeの視聴画面と同じ見せ方にする。
   本物の再生リスト埋め込みだと、この右の一覧が出せないので自前で組んでいる。
   サムネイルは i.ytimg.com から自動で取れるので、手で用意する必要はない。 */
.tube{margin-top:30px;display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:900px){
  .tube{grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start}
}

/* 左：プレーヤー */
.tube-player{
  position:relative;aspect-ratio:16/9;background:#000;
  border-radius:12px;overflow:hidden;
}
.tube-player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.tube-now{margin-top:12px;font-weight:900;font-size:clamp(17px,3.6vw,20px);line-height:1.5}

/* 右：一覧 */
.tube-list{
  border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--paper);
}
.tube-head{
  padding:14px 16px 12px;border-bottom:1px solid var(--line);background:var(--gray);
}
.tube-head b{display:block;font-size:15px;font-weight:900;letter-spacing:.02em}
.tube-head span{display:block;margin-top:3px;font-size:12px;color:var(--sub);font-variant-numeric:tabular-nums}
.tube-items{
  list-style:none;margin:0;padding:0;
  max-height:none;overflow:visible;
}
@media (min-width:900px){
  .tube-items{max-height:392px;overflow-y:auto;overscroll-behavior:contain}
}
.tube-items li + li{border-top:1px solid var(--line)}
.tube-item{
  width:100%;display:grid;grid-template-columns:112px 1fr;gap:10px;
  padding:10px;background:none;border:0;text-align:left;cursor:pointer;
  font:inherit;color:inherit;transition:background .15s;
}
.tube-item[aria-current="true"]{background:var(--gray)}
@media (hover:hover) and (pointer:fine){ .tube-item:hover{background:var(--gray)} }
.tube-item:focus-visible{outline:2px solid var(--red);outline-offset:-2px}
.tube-thumb{position:relative;aspect-ratio:16/9;border-radius:6px;overflow:hidden;background:var(--gray)}
.tube-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.tube-dur{
  position:absolute;right:4px;bottom:4px;
  background:rgba(20,20,22,.82);color:#fff;
  font-size:10.5px;font-weight:700;padding:2px 5px;border-radius:3px;
  font-variant-numeric:tabular-nums;
}
.tube-tx{min-width:0}
.tube-tt{
  font-size:13px;line-height:1.5;font-weight:700;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.tube-ch{margin-top:4px;font-size:11.5px;color:var(--sub)}
.tube-item[aria-current="true"] .tube-tt{color:var(--red)}

/* 「教材：札幌市」と見出しのあいだ */
.sapporo h2{margin-top:20px}

/* 学べること（5つの問い） */
.asks{margin:26px 0 0;padding:0;list-style:none;display:grid;gap:10px}
@media (min-width:760px){ .asks{grid-template-columns:1fr 1fr;gap:10px 28px} }
.asks li{position:relative;padding-left:22px;font-size:16.5px;line-height:1.8}
.asks li::before{
  content:"";position:absolute;left:0;top:.72em;
  width:8px;height:8px;border-radius:2px;background:var(--red);
}
.asks + p{margin-top:24px}

/* ---------- 4) ヒーロー ---------- */
/* expert.html のヒーローは「地方政治革命」6文字＋2027 の文字数を前提にした組みなので、
   そのままは使えない。背景（緑ベタ＋流れるグラデ）だけ同じ作りにして、文字は組み直す。 */
.hero-b{
  position:relative;overflow:hidden;background:var(--kv-red);
  min-height:clamp(420px,72vh,640px);
  display:flex;align-items:center;
  padding:clamp(96px,14vw,140px) 22px clamp(56px,9vw,88px);
}
.hero-b .grd-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero-b-body{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;width:100%}
.hero-b-eyebrow{
  font-weight:900;font-size:clamp(13px,3.2vw,15px);letter-spacing:.22em;
  color:rgba(255,255,255,.9);margin-bottom:clamp(12px,2.4vw,18px);
}
.hero-b-logo{
  font-weight:900;line-height:1.02;letter-spacing:-.045em;color:var(--kv-ink);
  font-size:clamp(64px,17vw,152px);
}
.hero-b-cat{
  margin-top:clamp(20px,3.6vw,30px);
  font-weight:900;font-size:clamp(20px,5vw,30px);line-height:1.5;
  letter-spacing:-.01em;color:var(--kv-ink);
}
.hero-b-sub{
  margin-top:clamp(10px,1.8vw,14px);
  font-weight:700;font-size:clamp(14px,3.6vw,18px);line-height:1.75;
  color:rgba(255,255,255,.94);
}

/* ---------- 5) ステートメント ＋ 宣言（1セクションに統合） ---------- */
/* 左＝基礎学部とは何か（主張）／右＝校長は誰か（人）。
   役割が違うものを横に並べる形は expert.html の .decl と同じ考え方。 */
.join{padding:clamp(64px,11vw,104px) 22px}
.join .wrap{max-width:var(--maxw)}
.join-grid{display:grid;gap:clamp(44px,6vw,64px);grid-template-columns:1fr}
@media (min-width:900px){
  .join-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,4.4vw,56px)}
}

/* 左 */
.join .big{
  margin-top:26px;font-weight:900;font-size:clamp(20px,4.4vw,24px);
  line-height:1.7;letter-spacing:-.015em;
  text-wrap:pretty;word-break:normal;line-break:strict;overflow-wrap:anywhere;
}
.join .big:first-of-type{text-wrap:balance}
.join .big .em{color:var(--red)}
/* 左の罫はトルツメ（2026-09-07 たもつ）。
   style.css の .mono-rule は罫を border ではなく background(border-box) で描いているので、
   border-left だけでなく background も戻す必要がある */
.join .mono-rule{
  margin-top:30px;padding:18px 0 0;
  border-left:0;background:none;
}
.join .mr-t{font-weight:700;font-size:16px;line-height:1.85}
.join .mr-b{margin-top:10px;font-size:15px;line-height:1.85;color:var(--sub)}

/* 右。左の縦罫は expert.html の .decl-bar と同じ組み立て（色はトークン差し替えで緑） */
.join-bar{
  margin-top:26px;padding-left:20px;
  border-left:5px solid transparent;
  background:linear-gradient(var(--paper),var(--paper)) padding-box,
             linear-gradient(180deg,var(--au-red),var(--au-orange) 60%,var(--au-purple)) border-box;
}
.join-top{display:flex;gap:20px;align-items:flex-start}
.join-photo{flex:none;width:132px;margin:0;border-radius:6px;overflow:hidden}
.join-photo img{width:100%;height:auto;display:block}
.join-fin{flex:1 1 auto;min-width:0}
/* 🔑 フォントは expert.html の .decl-fin .fin / .decl-msg / .decl-prof と同じ値にしている */
.join-fin .fin{
  font-size:clamp(20px,1.6vw,26px);font-weight:900;line-height:1.72;
  letter-spacing:-.015em;color:var(--ink);margin:0;
}
.join-fin .sig{
  margin-top:22px;font-size:15px;font-weight:900;letter-spacing:.2em;
  line-height:1.8;color:var(--red);
}
.join-msg{margin-top:34px;font-size:17.5px;line-height:1.95;color:#464243}
.join-msg b{font-weight:900;color:var(--ink)}
@media (max-width:1099px){
  .join-fin .fin{font-size:16px}
  .join-msg{line-height:1.5}
}

/* プロフィール（expert.html の .decl-prof をトレース） */
.join-prof{margin-top:5px;text-align:right}
.join-prof summary{
  display:inline-flex;align-items:center;gap:9px;
  cursor:pointer;list-style:none;
  font-size:14px;font-weight:800;color:var(--ink);letter-spacing:.03em;
}
.join-prof summary::-webkit-details-marker{display:none}
.join-prof summary::after{
  content:"＋";color:var(--red);font-size:15px;font-weight:900;line-height:1;
}
.join-prof[open] summary::after{content:"−"}
.join-prof.closing summary::after{content:"＋"}   /* 閉じるアニメ中は先に＋へ戻す */
.join-prof summary:hover{color:var(--red)}
.join-prof summary:focus-visible{outline:3px solid var(--red);outline-offset:4px;border-radius:4px}
.join-prof-body{
  margin-top:14px;padding-top:16px;
  border-top:1px solid rgba(0,0,0,.1);
  text-align:left;
}
.join-prof .pf{margin-top:12px;font-size:13.5px;line-height:1.95;color:#5b5658}
.join-prof .pf:first-child{margin-top:0}
.join-id{
  margin-top:22px;text-align:right;
  font-size:21px;font-weight:900;letter-spacing:.02em;color:var(--ink);
}
.join-id .num{
  display:block;margin-top:4px;
  font-family:"Satoshi",sans-serif;font-size:11px;font-weight:900;
  letter-spacing:.2em;color:var(--sub);
}