/* ==========================================================
   METAP ハブ（自治観測所 特務機関 METAP）専用スタイル
   metap.css のあとに読み込む。すべて .metap-hub の中だけに効く。
   クラス名は mh- で始まる（読書会ページの m- と衝突しない）。

   目次
   1. 変数・土台
   2. 観測モニター（ヒーロー・観測ログ共通）
   3. ヒーロー
   4. セクション共通
   5. コンセプト・ミッション
   6. 観測ログ
   7. ビジョン（街とピン、ポップアップ）
   8. プロフィール・構想・観測員
   9. フォローのボタン（note・X）
   10. レスポンシブ・動きを減らす設定
   ========================================================== */


/* 1. 変数・土台 ============================================ */
.metap-lp.metap-hub{
  --mh-bg:#0a0e1a; --mh-bg2:#111834; --mh-surface:#141a30;
  --mh-ink:#ebe8df; --mh-mute:#8d93a8; --mh-line:rgba(235,232,223,.11);
  --mh-accent:#e3a845; --mh-casing:#151b2d; --mh-casing-hi:#283050; --mh-screen:#05070d;
  --mh-campus:#8aa4ff; --mh-book:#ffb84d; --mh-bar:#ff6a5c; --mh-online:#ff1a35;
  --mh-yt:#e5304a; --mh-yellow:#f2c037;
  --mh-glow:rgba(130,110,255,.28);
  --mh-rainbow:linear-gradient(90deg,#ff4f7a,#ffc24a,#5be38f,#46c8ff,#a77bff);

  background:var(--mh-bg);
  color:var(--mh-ink);
  font-family:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho","YuMincho",serif;
  font-size:16px;
  line-height:1.95;
  font-feature-settings:"palt" 1;
}
.metap-hub::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:40; opacity:.07;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.metap-hub img, .metap-hub svg{ max-width:100%; }
.metap-hub a:focus-visible, .metap-hub button:focus-visible{ outline:2px solid var(--mh-accent); outline-offset:4px; border-radius:6px; }
.metap-hub .mh-mono{ font-family:"DotGothic16","Osaka-Mono",monospace; }
.metap-hub .mh-stars{
  background-color:var(--mh-bg);
  background-image:
    radial-gradient(1px 1px at 12% 18%,var(--mh-mute),transparent),radial-gradient(1px 1px at 82% 12%,var(--mh-mute),transparent),
    radial-gradient(1.4px 1.4px at 68% 78%,var(--mh-mute),transparent),radial-gradient(1px 1px at 24% 72%,var(--mh-mute),transparent),
    radial-gradient(1.2px 1.2px at 90% 54%,var(--mh-mute),transparent),radial-gradient(1px 1px at 6% 46%,var(--mh-mute),transparent),
    radial-gradient(1px 1px at 44% 30%,var(--mh-mute),transparent),radial-gradient(1px 1px at 58% 92%,var(--mh-mute),transparent);
}


/* 2. 観測モニター ========================================== */
.metap-hub .mh-monitor{ position:relative; width:min(940px,90vw,max(520px,calc((100svh - 420px) * 1.5))); margin:0 auto; }
.metap-hub .mh-casing{
  background:linear-gradient(160deg,var(--mh-casing-hi),var(--mh-casing) 70%);
  border-radius:20px; padding:clamp(7px,1vw,11px) clamp(7px,1vw,11px) 0;
  box-shadow:0 0 0 1px rgba(255,255,255,.04),0 50px 110px -40px rgba(0,0,0,.8),0 0 120px var(--mh-glow),inset 0 1px 0 rgba(255,255,255,.09);
}
.metap-hub .mh-screen{ position:relative; aspect-ratio:3/2; border-radius:13px/15px; overflow:hidden; background:var(--mh-screen); container-type:inline-size; }
.metap-hub .mh-screen canvas{ position:absolute; inset:0; width:100%; height:100%; image-rendering:pixelated; opacity:.09; transition:opacity .16s linear; }
.metap-hub .mh-screen::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:3;
  background:
    linear-gradient(115deg,rgba(255,255,255,.07),transparent 32%),
    repeating-linear-gradient(to bottom,rgba(255,255,255,.035) 0 1px,transparent 1px 3px),
    radial-gradient(ellipse at center,transparent 52%,rgba(0,0,0,.62));
  box-shadow:inset 0 0 70px rgba(0,0,0,.9);
}
.metap-hub .mh-screen.is-tuning canvas{ opacity:.92; }
.metap-hub .mh-scene{ position:absolute; inset:0; z-index:2; padding:6cqw 7cqw; display:flex; flex-direction:column; justify-content:space-between; color:#f1eee6; transition:opacity .18s linear; }
.metap-hub .mh-screen.is-tuning .mh-scene, .metap-hub .mh-screen.is-fade .mh-scene,
.metap-hub .mh-screen.is-tuning .mh-cover, .metap-hub .mh-screen.is-fade .mh-cover{ opacity:0; }
.metap-hub .mh-readout{ display:flex; justify-content:space-between; align-items:center; gap:1em; font-size:clamp(10px,2.2cqw,17px); line-height:1.4; color:#aeb8cf; letter-spacing:.04em; }
.metap-hub .mh-ch{ color:#ffd27a; }
.metap-hub .mh-rec::before{ content:""; display:inline-block; width:.6em; height:.6em; border-radius:50%; background:#ff4f6d; margin-right:.45em; vertical-align:.05em; animation:mh-blink 2.4s ease-in-out infinite; }
@keyframes mh-blink{ 0%,100%{opacity:1} 50%{opacity:.25} }
.metap-hub .mh-scene__body{ text-align:center; position:relative; }
.metap-hub .mh-scene__main{ margin:0; font-size:clamp(18px,5.4cqw,52px); font-weight:700; line-height:1.4; letter-spacing:.02em; color:#f1eee6; text-shadow:2px 0 rgba(255,40,100,.55),-2px 0 rgba(40,220,255,.55); }
.metap-hub .mh-scene__sub{ margin:.9em 0 0; font-size:clamp(11px,2.4cqw,19px); color:#c4c9d6; line-height:1.6; }

.metap-hub .mh-screen-link{ position:absolute; inset:0; z-index:4; display:flex; align-items:flex-end; justify-content:center; padding-bottom:13%; text-decoration:none; cursor:pointer; border-radius:inherit; }
.metap-hub .mh-screen-cta{ font-size:clamp(10px,1.9cqw,15px); color:#fff; background:rgba(5,7,13,.72); border:1px solid rgba(255,255,255,.35); padding:.45em 1.1em; border-radius:99px; letter-spacing:.06em; opacity:0; transform:translateY(6px); transition:opacity .25s,transform .25s; }
.metap-hub .mh-screen-link:hover .mh-screen-cta, .metap-hub .mh-screen-link:focus-visible .mh-screen-cta{ opacity:1; transform:none; }
.metap-hub .mh-screen-link:focus-visible{ outline:2px solid var(--mh-accent); outline-offset:-4px; }
@media (hover:none){ .metap-hub .mh-screen-cta{ opacity:.9; transform:none; } }
.metap-hub .mh-screen.is-tuning .mh-screen-cta{ opacity:0; }

.metap-hub .mh-bezel{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:5px 4px 6px; }
.metap-hub .mh-plate{ font-size:10px; letter-spacing:.32em; color:#c9cfe0; opacity:.75; }
.metap-hub .mh-grille{ flex:1; height:9px; max-width:180px; background:radial-gradient(circle,rgba(0,0,0,.55) 1.3px,transparent 1.6px) 0 0/7px 7px; opacity:.9; }
.metap-hub .mh-dials{ display:flex; align-items:center; gap:12px; }
.metap-hub .mh-led{ width:6px; height:6px; border-radius:50%; background:#5be38f; box-shadow:0 0 8px #5be38f; }
.metap-hub .mh-knob{
  --r:0deg; width:22px; height:22px; border-radius:50%; border:0; padding:0; cursor:pointer; position:relative;
  background:radial-gradient(circle at 35% 30%,#4a5578,#1c2236 70%);
  box-shadow:0 2px 0 rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.15);
  transform:rotate(var(--r)); transition:transform .35s cubic-bezier(.2,1.4,.4,1);
}
.metap-hub .mh-knob::after{ content:""; position:absolute; left:50%; top:3px; width:2px; height:7px; margin-left:-1px; border-radius:2px; background:#ffd27a; }
.metap-hub .mh-knob:hover{ box-shadow:0 2px 0 rgba(0,0,0,.4),0 0 0 3px rgba(255,210,122,.25); }
.metap-hub .mh-neck{ width:16%; height:26px; margin:0 auto; background:linear-gradient(90deg,var(--mh-casing),var(--mh-casing-hi),var(--mh-casing)); }
.metap-hub .mh-foot{ width:40%; height:12px; margin:0 auto; border-radius:12px 12px 4px 4px; background:var(--mh-casing-hi); }
.metap-hub .mh-floor{ width:76%; height:28px; margin:4px auto 0; background:radial-gradient(ellipse,rgba(150,120,255,.3),rgba(60,210,255,.08) 45%,transparent 70%); filter:blur(6px); }

.metap-hub .mh-sticker{
  position:absolute; z-index:5; right:clamp(-28px,-3vw,-14px); top:clamp(-30px,-3.4vw,-18px);
  width:clamp(88px,13vw,124px); aspect-ratio:1; transform:rotate(-12deg);
  text-decoration:none; filter:drop-shadow(0 8px 14px rgba(0,0,0,.35)); transition:transform .3s cubic-bezier(.2,1.4,.4,1);
}
.metap-hub .mh-sticker:hover{ transform:rotate(-4deg) scale(1.06); }
.metap-hub .mh-sticker__ring{ transform-origin:50% 50%; animation:mh-spin 22s linear infinite; }
@keyframes mh-spin{ to{ transform:rotate(360deg); } }


/* 3. ヒーロー ============================================== */
/* 上は固定ヘッダーの高さぶん空ける */
.metap-hub .mh-hero{ position:relative; min-height:100svh; display:grid; place-items:center; padding:calc(96px + 3vh) 5vw 14vh; overflow:hidden; }
.metap-hub .mh-hero::before{ content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse at 50% 40%,color-mix(in srgb,var(--mh-accent) 10%,transparent),transparent 62%); }
.metap-hub .mh-stage{ position:relative; display:flex; flex-direction:column; align-items:center; gap:clamp(24px,4.5vh,52px); width:100%; }
.metap-hub .mh-title{ margin:0; text-align:center; font-weight:400; line-height:1; color:var(--mh-ink); }
.metap-hub .mh-title__kicker{ display:block; font-size:clamp(13px,1.5vw,17px); letter-spacing:.55em; margin-right:-.55em; color:var(--mh-mute); }
.metap-hub .mh-title__mark{ display:block; margin:.28em -.2em 0 0; font-size:clamp(52px,9vw,112px); font-weight:900; letter-spacing:.2em; }
.metap-hub .mh-title__kana{ display:block; margin-top:.9em; font-size:clamp(12px,1.2vw,14px); letter-spacing:.8em; margin-right:-.8em; color:var(--mh-mute); }
.metap-hub .mh-hero.is-glitch .mh-title__mark{ text-shadow:4px 0 rgba(255,50,110,.55),-4px 0 rgba(40,220,255,.55); transform:translateX(1px); }
.metap-hub .mh-scroll{ position:absolute; left:50%; bottom:26px; transform:translateX(-50%); display:grid; justify-items:center; gap:6px; text-decoration:none; color:var(--mh-mute); font-size:12px; letter-spacing:.3em; }
.metap-hub .mh-scroll svg, .metap-hub .mh-bridge svg{ animation:mh-bob 2.2s ease-in-out infinite; }
@keyframes mh-bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(7px); } }


/* 4. セクション共通 ======================================== */
.metap-hub .mh-section{ padding-block:clamp(96px,15vh,168px); position:relative; }
.metap-hub .mh-wrap{ max-width:1280px; margin:0 auto; padding-inline:6vw; }
.metap-hub .mh-h2{ margin:0 0 1.1em; font-family:inherit; font-size:clamp(27px,4.2vw,46px); font-weight:700; line-height:1.5; letter-spacing:.04em; color:var(--mh-ink); }
.metap-hub .mh-section p{ margin:0 0 1.5em; font-size:clamp(15px,1.15vw,17px); line-height:2.15; }
.metap-hub .mh-section .mh-lead{ margin:0 0 2.4em; color:var(--mh-mute); font-size:clamp(15px,1.2vw,17px); max-width:38em; line-height:2; }
.metap-hub .mh-text-link{ display:inline-block; font-size:15px; text-decoration:none; padding-bottom:3px; background:var(--mh-rainbow) left bottom/100% 2px no-repeat; transition:background-size .3s,color .3s; }
.metap-hub .mh-text-link:hover{ background-size:100% 100%; color:#0a0e1a; }


/* 5. コンセプト・ミッション ================================= */
.metap-hub .mh-concept{ padding-bottom:0; }
.metap-hub .mh-bridge{ display:flex; flex-direction:column; align-items:center; gap:10px; padding-top:72px; color:var(--mh-mute); }
.metap-hub .mh-bridge__line{ width:1px; height:96px; background:linear-gradient(to bottom,transparent,#ff4f7a,#ffc24a,#46c8ff,#a77bff); }
.metap-hub .mh-bridge__text{ font-size:14px; letter-spacing:.5em; margin-right:-.5em; color:var(--mh-ink); }
.metap-hub .mh-missions-sec{ padding-top:clamp(64px,9vh,104px); }

.metap-hub .mh-missions{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid var(--mh-line); margin:0; padding:0; list-style:none; }
.metap-hub .mh-mission{ position:relative; padding:44px 32px 8px; border-right:1px solid var(--mh-line); }
.metap-hub .mh-mission:first-child{ padding-left:0; }
.metap-hub .mh-mission:last-child{ border-right:0; padding-right:0; }
.metap-hub .mh-num{ position:relative; display:grid; place-items:center; width:54px; height:54px; border-radius:50%; font-size:24px; font-weight:300; color:var(--mh-accent); border:1px solid var(--mh-line); transition:box-shadow .5s; }
.metap-hub .mh-num::before{
  content:""; position:absolute; inset:-1px; border-radius:50%; padding:1px; opacity:0; transition:opacity .5s;
  background:conic-gradient(#ff4f7a,#ffc24a,#5be38f,#46c8ff,#a77bff,#ff4f7a);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
}
.metap-hub .mh-mission::after{ content:""; position:absolute; left:0; right:0; top:-1px; height:1px; background:var(--mh-rainbow); opacity:0; transition:opacity .5s; }
.metap-hub .mh-mission:hover .mh-num::before, .metap-hub .mh-mission:hover::after{ opacity:.55; }
.metap-hub .mh-mission:hover .mh-num{ box-shadow:0 0 26px -8px rgba(167,123,255,.5); }
.metap-hub .mh-mission h3{ margin:.8em 0 .5em; font-family:inherit; font-size:22px; font-weight:600; letter-spacing:.06em; color:var(--mh-ink); }
.metap-hub .mh-mission p{ color:var(--mh-mute); margin-bottom:0; }


/* 6. 観測ログ ============================================== */
.metap-hub .mh-log__grid{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr); gap:clamp(40px,6vw,80px); align-items:center; }
.metap-hub .mh-log .mh-monitor{ width:100%; }
.metap-hub .mh-log .mh-scene__main{ text-shadow:2px 0 rgba(255,40,100,.5),-2px 0 rgba(40,220,255,.5),0 2px 16px rgba(0,0,0,.95); }
.metap-hub .mh-log .mh-scene__sub{ color:#e6e9f0; text-shadow:0 1px 10px rgba(0,0,0,.95); }
.metap-hub .mh-cover{
  position:absolute; z-index:1; left:50%; top:50%; width:28cqw; transform:translate(-50%,-50%) rotate(4deg);
  opacity:.24; border-radius:3px; overflow:hidden; transition:opacity .18s linear; box-shadow:0 12px 30px rgba(0,0,0,.6);
}
.metap-hub .mh-cover img{ display:block; width:100%; height:auto; }
.metap-hub .mh-live{ display:inline-flex; align-items:center; gap:.4em; color:#fff; }
.metap-hub .mh-live::before{ content:"LIVE"; background:var(--mh-yt); color:#fff; padding:.18em .5em; border-radius:3px; font-size:.85em; letter-spacing:.08em; }
.metap-hub .mh-controls{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:2em; }
.metap-hub .mh-btn{ font:inherit; font-size:14px; color:var(--mh-ink); background:transparent; cursor:pointer; border:1px solid var(--mh-line); border-radius:999px; padding:.55em 1.3em; transition:border-color .2s,transform .2s; }
.metap-hub .mh-btn:hover{ border-color:var(--mh-accent); transform:translateY(-1px); }
.metap-hub .mh-count{ font-size:13px; color:var(--mh-mute); margin-left:4px; }
.metap-hub .mh-watch{ display:inline-flex; align-items:center; gap:.7em; margin-top:22px; text-decoration:none; font-size:15px; font-weight:600; padding:.7em 1.3em .7em .8em; border-radius:999px; background:var(--mh-yt); color:#fff; transition:transform .2s,box-shadow .2s; }
.metap-hub .mh-watch:hover{ transform:translateY(-2px); box-shadow:0 10px 24px -10px rgba(229,48,74,.7); }
.metap-hub .mh-log__foot{ margin-top:1.6em; }


/* 7. ビジョン ============================================== */
.metap-hub .mh-vision{ background:linear-gradient(to bottom,var(--mh-bg),var(--mh-bg2)); }
.metap-hub .mh-figure{ margin:0; }
.metap-hub .mh-vision__scroll{ overflow-x:auto; margin-top:48px; -webkit-overflow-scrolling:touch; padding-bottom:6px; }
.metap-hub .mh-vision__canvas{ position:relative; min-width:860px; }
.metap-hub .mh-vision__canvas svg{ display:block; width:100%; height:auto; }
.metap-hub .mh-figure figcaption{ margin-top:16px; font-size:13px; color:var(--mh-mute); }
.metap-hub .mh-section .mh-hint{ display:inline-flex; align-items:center; gap:.6em; font-size:14px; color:var(--mh-mute); margin:0; }
.metap-hub .mh-hint i{ display:inline-block; width:14px; height:14px; border-radius:50%; background:conic-gradient(#ff4f7a,#ffc24a,#5be38f,#46c8ff,#a77bff,#ff4f7a); }
.metap-hub .mh-flow{ stroke-dasharray:3 9; animation:mh-flow 1.6s linear infinite; }
@keyframes mh-flow{ to{ stroke-dashoffset:-24; } }
.metap-hub .mh-spot{
  position:absolute; width:28px; height:28px; margin:-14px 0 0 -14px; border-radius:50%; border:0; padding:0; cursor:pointer;
  background:var(--c); color:#fff; display:grid; place-items:center; font:600 16px/1 "Noto Serif JP",serif;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 30%,transparent),0 8px 18px -6px rgba(0,0,0,.5);
  transition:transform .3s cubic-bezier(.2,1.4,.4,1);
}
.metap-hub .mh-spot::after{ content:""; position:absolute; inset:0; border-radius:50%; border:2px solid var(--c); animation:mh-pulse 2.4s ease-out infinite; }
@keyframes mh-pulse{ 0%{ transform:scale(1); opacity:.8; } 100%{ transform:scale(2); opacity:0; } }
.metap-hub .mh-spot:hover, .metap-hub .mh-spot:focus-visible{ transform:scale(1.15); }
.metap-hub .mh-spot--tower{ background:conic-gradient(#ff4f7a,#ffc24a,#5be38f,#46c8ff,#a77bff,#ff4f7a); }

.metap-hub .mh-dialog{ border:0; padding:0; width:min(440px,92vw); border-radius:24px; background:var(--mh-surface); color:var(--mh-ink); box-shadow:0 30px 80px -20px rgba(0,0,0,.6); overflow:hidden; }
.metap-hub .mh-dialog::backdrop{ background:rgba(5,7,13,.55); backdrop-filter:blur(3px); }
.metap-hub .mh-dialog[open]{ animation:mh-pop .34s cubic-bezier(.2,1.4,.4,1); }
@keyframes mh-pop{ from{ transform:scale(.86) translateY(14px); opacity:0; } to{ transform:none; opacity:1; } }
.metap-hub .mh-dlg__band{ height:8px; background:var(--c,var(--mh-accent)); }
.metap-hub .mh-dlg__band.is-rainbow{ background:var(--mh-rainbow); }
.metap-hub .mh-dlg__body{ padding:26px 28px 28px; position:relative; }
.metap-hub .mh-dlg__status{ display:inline-block; font-size:12px; line-height:1; padding:.5em .9em; border-radius:99px; background:color-mix(in srgb,var(--c,var(--mh-accent)) 18%,transparent); color:var(--c,var(--mh-accent)); font-weight:600; }
.metap-hub .mh-dlg__title{ margin:.6em 0 .2em; font-family:inherit; font-size:24px; font-weight:700; letter-spacing:.04em; line-height:1.4; color:var(--mh-ink); }
.metap-hub .mh-dlg__place{ margin:0 0 1em; font-size:13px; color:var(--mh-mute); }
.metap-hub .mh-dlg__text{ font-size:15px; line-height:2; margin:0 0 1.4em; }
.metap-hub .mh-dlg__links{ display:flex; flex-wrap:wrap; gap:10px; }
.metap-hub .mh-dlg__links a{ font-size:14px; text-decoration:none; padding:.55em 1.2em; border-radius:99px; border:1px solid var(--mh-line); }
.metap-hub .mh-dlg__links a:first-child{ background:var(--c,var(--mh-accent)); border-color:transparent; color:#fff; }
.metap-hub .mh-dlg__links span{ font-size:14px; color:var(--mh-mute); padding:.55em 0; }
.metap-hub .mh-dlg__close{ position:absolute; top:16px; right:16px; width:36px; height:36px; border-radius:50%; border:1px solid var(--mh-line); background:transparent; color:var(--mh-ink); cursor:pointer; font-size:18px; line-height:1; }


/* 8. プロフィール・構想・観測員 ============================= */
.metap-hub .mh-profile__grid{ display:grid; grid-template-columns:minmax(0,300px) minmax(0,1fr); gap:clamp(32px,5vw,64px); align-items:center; }
.metap-hub .mh-portrait{ position:relative; aspect-ratio:4/5; border-radius:18px; overflow:hidden; background:var(--mh-screen); box-shadow:0 0 0 6px var(--mh-casing),0 30px 70px -30px rgba(0,0,0,.7); }
.metap-hub .mh-portrait img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.metap-hub .mh-section .mh-pf__name{ margin:0; font-size:clamp(24px,3vw,32px); font-weight:700; letter-spacing:.06em; line-height:1.4; }
.metap-hub .mh-pf__name small{ font-family:"Josefin Slab",serif; font-weight:400; font-size:.62em; letter-spacing:.06em; color:var(--mh-mute); margin-left:.5em; }
.metap-hub .mh-section .mh-pf__role{ margin:.5em 0 1.4em; font-size:14px; color:var(--mh-accent); letter-spacing:.1em; }

.metap-hub .mh-phases{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); list-style:none; margin:0; padding:0; }
.metap-hub .mh-phase{ position:relative; padding:48px 28px 8px 0; }
.metap-hub .mh-phase::before{ content:""; position:absolute; left:0; right:0; top:15px; height:1px; background:var(--mh-line); }
.metap-hub .mh-phase::after{ content:""; position:absolute; left:0; top:10px; width:11px; height:11px; border-radius:50%; background:var(--mh-bg); border:1px solid var(--mh-mute); }
.metap-hub .mh-phase.is-now::before{ background:linear-gradient(90deg,var(--mh-accent),var(--mh-line)); }
.metap-hub .mh-phase.is-now::after{ background:var(--mh-accent); border-color:var(--mh-accent); animation:mh-here 2.2s ease-out infinite; }
@keyframes mh-here{ 0%{ box-shadow:0 0 0 0 color-mix(in srgb,var(--mh-accent) 60%,transparent); } 100%{ box-shadow:0 0 0 12px transparent; } }
.metap-hub .mh-phase.is-vision::after{ border:0; background:conic-gradient(#ff4f7a,#ffc24a,#5be38f,#46c8ff,#a77bff,#ff4f7a); }
.metap-hub .mh-phase__no{ font-size:13px; color:var(--mh-mute); letter-spacing:.08em; }
.metap-hub .mh-phase__no em{ font-style:normal; margin-left:.6em; padding:.15em .6em; border-radius:99px; font-size:11px; background:var(--mh-accent); color:var(--mh-bg); }
.metap-hub .mh-phase__title{ margin:.35em 0 .4em; font-family:inherit; font-size:21px; font-weight:700; line-height:1.5; letter-spacing:.04em; color:var(--mh-ink); }
.metap-hub .mh-section .mh-phase p{ margin:0; font-size:14px; line-height:1.9; color:var(--mh-mute); }

.metap-hub .mh-recruit{ padding-top:clamp(64px,9vh,104px); }
.metap-hub .mh-cards{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; margin-top:12px; }
.metap-hub .mh-idcard{ position:relative; background:var(--mh-surface); border-radius:16px; overflow:hidden; box-shadow:0 1px 0 var(--mh-line),0 30px 60px -30px rgba(0,0,0,.6); transition:transform .35s cubic-bezier(.2,1.4,.4,1); }
.metap-hub .mh-idcard:nth-child(1){ transform:rotate(-1.2deg); }
.metap-hub .mh-idcard:nth-child(3){ transform:rotate(1deg); }
.metap-hub .mh-idcard:hover{ transform:rotate(0) translateY(-6px); }
.metap-hub .mh-idcard.is-hiring{ box-shadow:0 0 0 2px var(--mh-yellow),0 30px 60px -30px rgba(0,0,0,.6); }
.metap-hub .mh-idcard__strip{ height:6px; background:var(--mh-rainbow); }
.metap-hub .mh-idcard__top{ display:flex; justify-content:space-between; align-items:center; padding:12px 18px 0; font-size:11px; color:var(--mh-mute); letter-spacing:.08em; }
.metap-hub .mh-hire{ font-family:"Noto Serif JP",serif; background:var(--mh-yellow); color:#151b2e; font-weight:700; font-size:11px; padding:.3em .9em; border-radius:99px; letter-spacing:.06em; }
.metap-hub .mh-idcard__main{ display:grid; grid-template-columns:72px minmax(0,1fr); gap:18px; padding:16px 18px 8px; align-items:center; }
.metap-hub .mh-idcard__photo{ width:72px; height:90px; border-radius:8px; position:relative; overflow:hidden; background:#05070d; }
.metap-hub .mh-idcard__photo::before{ content:""; position:absolute; inset:0; background:repeating-linear-gradient(to bottom,rgba(255,255,255,.08) 0 1px,transparent 1px 3px),linear-gradient(160deg,#ff4f7a,#ffc24a 30%,#46c8ff 65%,#a77bff); opacity:.55; }
.metap-hub .mh-idcard__photo::after{ content:"?"; position:absolute; inset:0; display:grid; place-items:center; color:#fff; font:700 30px/1 "Noto Serif JP",serif; text-shadow:2px 0 rgba(255,40,100,.6),-2px 0 rgba(40,220,255,.6); }
.metap-hub .mh-idcard__role{ margin:0; font-family:inherit; font-size:20px; font-weight:700; letter-spacing:.06em; line-height:1.4; color:var(--mh-ink); }
.metap-hub .mh-section .mh-idcard__field{ margin:.5em 0 0; font-size:12px; color:var(--mh-mute); line-height:1.6; border-bottom:1px solid var(--mh-line); padding-bottom:.3em; }
.metap-hub .mh-section .mh-idcard__text{ margin:6px 18px 0; font-size:14px; line-height:1.9; }
.metap-hub .mh-idcard__foot{ display:flex; justify-content:space-between; gap:10px; margin:14px 18px 0; padding:12px 0 16px; border-top:1px dashed var(--mh-line); font-size:12px; color:var(--mh-mute); }
.metap-hub .mh-section .mh-recruit__note{ margin:24px 0 0; font-size:13px; color:var(--mh-mute); }
.metap-hub .mh-recruit__cta{ display:flex; align-items:center; gap:24px; flex-wrap:wrap; margin-top:36px; }
.metap-hub .mh-join{ display:inline-block; text-decoration:none; font-size:16px; font-weight:700; letter-spacing:.06em; padding:2px; border-radius:999px; background:var(--mh-rainbow); transition:transform .25s,box-shadow .25s; }
.metap-hub .mh-join span{ display:block; padding:.85em 2em; border-radius:999px; background:var(--mh-bg); color:var(--mh-ink); }
.metap-hub .mh-join:hover{ transform:translateY(-2px); box-shadow:0 12px 30px -12px rgba(167,123,255,.7); }


/* 9. フォローのボタン（読書会ページでも使うなら metap.css に移してOK） */
.metap-lp .m-btn--note{ background:transparent; color:#41c9b4; border:1px solid #41c9b4; }
.metap-lp .m-btn--note:hover{ background:rgba(65,201,180,.12); }
.metap-lp .m-btn--x{ background:transparent; color:#fff; border:1px solid #fff; }
.metap-lp .m-btn--x:hover{ background:rgba(255,255,255,.1); }


/* 10. レスポンシブ・動きを減らす設定 ======================== */
@media (max-width:900px){
  .metap-hub .mh-phases{ grid-template-columns:1fr; }
  .metap-hub .mh-phase{ padding:0 0 32px 30px; }
  .metap-hub .mh-phase::before{ left:5px; right:auto; top:0; bottom:0; width:1px; height:auto; }
  .metap-hub .mh-phase.is-now::before{ background:linear-gradient(to bottom,var(--mh-accent),var(--mh-line)); }
  .metap-hub .mh-phase::after{ top:7px; }
  .metap-hub .mh-profile__grid{ grid-template-columns:1fr; }
  .metap-hub .mh-portrait{ max-width:260px; }
  .metap-hub .mh-cards{ grid-template-columns:1fr; max-width:460px; }
  .metap-hub .mh-idcard:nth-child(n){ transform:none; }
}
@media (max-width:820px){
  .metap-hub .mh-missions{ grid-template-columns:1fr; }
  .metap-hub .mh-mission, .metap-hub .mh-mission:first-child, .metap-hub .mh-mission:last-child{ padding:36px 0 28px; border-right:0; border-bottom:1px solid var(--mh-line); }
  .metap-hub .mh-log__grid{ grid-template-columns:1fr; }
  .metap-hub .mh-grille{ display:none; }
}
@media (max-width:560px){
  .metap-hub .mh-hero{ padding-top:120px; }
}
/* metap.css の「動きを減らす」設定が animation/transition を止めるので、ここでは追加不要 */

/* 11. 観測ログ・ビジョンを広く ============================== */
/* 観測ログ：モニター側を大きく取る（スマホでは1列のまま） */
@media (min-width:821px){
  .metap-hub .mh-log .mh-log__grid{
    max-width:1480px;
    padding-inline:4vw;
    grid-template-columns:minmax(0,.75fr) minmax(0,1.6fr);
    gap:clamp(40px,5vw,72px);
  }
}
/* ビジョン：街の図を広げる。文章は読みやすい幅のまま */
.metap-hub .mh-vision .mh-wrap{ max-width:1480px; padding-inline:4vw; }
.metap-hub .mh-vision .mh-narrow{ max-width:760px; }

/* 12. モーダル中央寄せ ============================== */
dialog#mh-dialog.mh-dialog {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(640px, calc(100vw - 32px));
  height: fit-content;
  max-height: calc(100dvh - 32px);
  overflow: auto;
}