/* ==========================================================
   METAP / メタップ シーズン1 LP
   ========================================================== */
body:has(.metap-lp){ margin:0; }
.metap-lp{
  --bg:#060b1e; --bg-2:#0c1430; --bg-3:#0d1638;
  --panel:rgba(20,40,90,0.32);
  --text:#d6dde8; --text-soft:#c5cdde; --text-dim:#8090a8; --text-faint:#3c465a;
  --rule:rgba(255,255,255,0.08);
  --blue:#3b6bd8; --blue-light:#82a8ff; --blue-accent:#9ad0ff;
  --quest:#4a9eff; --gold:#e6a839; --wanted:#ff7a3a; --wanted-soft:#ffa070;
  --max-w:1500px;
 
  position:relative;
  background:var(--bg);
  color:var(--text);
  font-family:'Noto Sans JP',sans-serif;
  font-weight:400;
  font-size:1.06em;
  line-height:1.9;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}
.metap-lp *{ box-sizing:border-box; margin:0; padding:0; }
.metap-lp a{ color:inherit; }
 
.metap-lp .m-stars{
position:absolute; inset:0; 
  z-index: 1;
  pointer-events:none;
  background-size: 180px 180px; /* 敷き詰めのサイズ */
  background-repeat: repeat;
  background-image:
    radial-gradient(1px 1px at 13% 7%, rgba(255,255,255,0.8), transparent 60%),
    radial-gradient(2px 2px at 41% 14%, rgba(255,255,255,0.85), transparent 60%),
    radial-gradient(1px 1px at 71% 5%, rgba(255,255,255,0.6), transparent 60%),
    radial-gradient(2px 2px at 89% 22%, rgba(255,255,255,0.7), transparent 60%),
    radial-gradient(1px 1px at 19% 33%, rgba(154,208,255,0.6), transparent 60%),
    radial-gradient(1px 1px at 77% 41%, rgba(154,208,255,0.5), transparent 60%),
    radial-gradient(2px 2px at 33% 47%, rgba(255,255,255,0.55), transparent 60%),
    radial-gradient(1px 1px at 60% 62%, rgba(255,255,255,0.45), transparent 60%),
    radial-gradient(1px 1px at 8% 74%, rgba(255,255,255,0.5), transparent 60%),
    radial-gradient(2px 2px at 92% 80%, rgba(255,255,255,0.55), transparent 60%),
    radial-gradient(1px 1px at 47% 90%, rgba(154,208,255,0.5), transparent 60%);
  opacity:0.4;
}
.metap-lp .m-wrap{ position:relative; z-index:1; }

/* JS未実行時は m-reveal を最初から表示（フェイルセーフ） */
.metap-lp .m-reveal{ opacity:1; transform:none; transition:opacity 0.8s, transform 0.8s; }
/* JSが動いた合図 .js-ready が付いたときだけ、初期を隠してアニメ有効化 */
.metap-lp.js-ready .m-reveal{ opacity:0; transform:translateY(22px); }
.metap-lp.js-ready .m-reveal.in{ opacity:1; transform:none; }

/* ===== 特設ヘッダー ===== */
.home-header.metap-header {
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100%;
}
 
/* セクション共通 */
.metap-lp .m-section{ padding:88px 28px; position:relative; }
.metap-lp .m-inner{ max-width:var(--max-w); margin:0 auto; }
.metap-lp .m-corner{ position:absolute; width:9px; height:9px; border-style:solid; border-color:var(--text-faint); border-width:0; }
.metap-lp .m-corner.tl{ top:-1px; left:-1px; border-top-width:1px; border-left-width:1px; }
.metap-lp .m-corner.tr{ top:-1px; right:-1px; border-top-width:1px; border-right-width:1px; }
.metap-lp .m-corner.bl{ bottom:-1px; left:-1px; border-bottom-width:1px; border-left-width:1px; }
.metap-lp .m-corner.br{ bottom:-1px; right:-1px; border-bottom-width:1px; border-right-width:1px; }
 
.metap-lp .m-eyebrow{
  font-family:'Josefin Slab',serif; font-size:11px; letter-spacing:0.25em;
  color:var(--blue-accent); margin-bottom:14px; display:inline-block; text-transform:uppercase;
}
.metap-lp .m-eyebrow::before{ content:""; display:inline-block; width:26px; height:1px; background:var(--blue-accent); vertical-align:middle; margin-right:12px; opacity:0.6; }
.metap-lp .m-title{
  font-family:'Noto Serif JP',serif; font-weight:500;
  font-size:clamp(24px,3.6vw,36px); line-height:1.4; letter-spacing:0.03em;
  color:#f1f4fb; margin-bottom:16px;
}
.metap-lp .m-lead{ color:var(--text-soft); font-size:1em; line-height:1.95; max-width:680px; letter-spacing:0.04em; }
 
/* ===== HERO ===== */
.metap-lp .m-hero{ position:relative; overflow:hidden; }
.metap-lp .m-hero__bg{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(ellipse at 28% 22%, rgba(74,158,255,0.28) 0%, transparent 55%),
    radial-gradient(ellipse at 82% 70%, rgba(59,107,216,0.30) 0%, transparent 55%),
    linear-gradient(180deg,var(--bg) 0%, #0a1338 100%);
}
.metap-lp .m-hero__particles{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background-image:
    radial-gradient(0.6px 0.6px at 5% 12%, rgba(255,255,255,0.9), transparent 50%),
    radial-gradient(0.5px 0.5px at 11% 47%, rgba(200,224,255,0.7), transparent 50%),
    radial-gradient(0.6px 0.6px at 17% 78%, rgba(255,255,255,0.8), transparent 50%),
    radial-gradient(0.5px 0.5px at 23% 28%, rgba(255,255,255,0.6), transparent 50%),
    radial-gradient(0.7px 0.7px at 29% 63%, rgba(200,224,255,0.8), transparent 50%),
    radial-gradient(0.5px 0.5px at 34% 9%, rgba(255,255,255,0.7), transparent 50%),
    radial-gradient(0.6px 0.6px at 41% 88%, rgba(255,255,255,0.75), transparent 50%),
    radial-gradient(0.5px 0.5px at 47% 38%, rgba(154,208,255,0.7), transparent 50%),
    radial-gradient(0.6px 0.6px at 53% 71%, rgba(255,255,255,0.85), transparent 50%),
    radial-gradient(0.5px 0.5px at 59% 18%, rgba(255,255,255,0.6), transparent 50%),
    radial-gradient(0.7px 0.7px at 64% 55%, rgba(200,224,255,0.8), transparent 50%),
    radial-gradient(0.5px 0.5px at 70% 84%, rgba(255,255,255,0.7), transparent 50%),
    radial-gradient(0.6px 0.6px at 76% 33%, rgba(255,255,255,0.8), transparent 50%),
    radial-gradient(0.5px 0.5px at 82% 66%, rgba(154,208,255,0.7), transparent 50%),
    radial-gradient(0.6px 0.6px at 88% 14%, rgba(255,255,255,0.75), transparent 50%),
    radial-gradient(0.5px 0.5px at 93% 49%, rgba(255,255,255,0.65), transparent 50%),
    radial-gradient(0.6px 0.6px at 97% 80%, rgba(200,224,255,0.7), transparent 50%),
    radial-gradient(0.5px 0.5px at 8% 92%, rgba(255,255,255,0.6), transparent 50%),
    radial-gradient(0.5px 0.5px at 44% 6%, rgba(255,255,255,0.6), transparent 50%),
    radial-gradient(0.6px 0.6px at 67% 96%, rgba(255,255,255,0.7), transparent 50%);
  background-repeat:no-repeat;
  animation:m-particle-tw 4.5s ease-in-out infinite alternate;
}
@keyframes m-particle-tw{ from{opacity:0.45;} to{opacity:0.95;} }
.metap-lp .m-hero__grid{
  position:relative; z-index:2; max-width:var(--max-w); margin:0 auto;
  padding:88px 28px 72px;
  display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center;
}
.metap-lp .m-hero__season{
  font-family:'Josefin Slab',serif; font-size:13px; letter-spacing:0.22em;
  color:var(--blue-accent); margin-bottom:20px;
}
 
.metap-lp .m-hslider{ position:relative; min-height:440px; }
.metap-lp .m-hslide{
  position:absolute; inset:0; opacity:0; visibility:hidden;
  transition:opacity 0.9s ease, visibility 0.9s; pointer-events:none;
  display:flex; flex-direction:column; justify-content:center;
}
.metap-lp .m-hslide.is-active{ opacity:1; visibility:visible; pointer-events:auto; }
.metap-lp .m-hslide__kicker{
  font-family:'Josefin Slab',serif; font-size:11px; letter-spacing:0.22em;
  color:var(--blue-accent); margin-bottom:16px;
}
.metap-lp .m-hslide__kicker::before{ content:"● "; }
 
.metap-lp .m-hero__title{
  font-family:'Noto Serif JP',serif; font-weight:700;
  font-size:clamp(30px,4.8vw,54px); line-height:1.35; letter-spacing:0.04em;
  color:#fff; text-shadow:0 2px 30px rgba(0,0,0,0.5), 0 0 50px rgba(60,107,216,0.25);
  margin-bottom:16px;
}
.metap-lp .m-hero__sub{
  font-family:'Noto Serif JP',serif; font-weight:300; font-size:clamp(14px,1.8vw,17px);
  letter-spacing:0.1em; color:var(--text-soft); margin-bottom:34px;
}
.metap-lp .m-signal{
  border-left:2px solid var(--quest); padding:6px 0 6px 18px; margin-bottom:30px;
}
.metap-lp .m-signal__label{ font-family:'Josefin Slab',serif; font-size:11px; letter-spacing:0.25em; color:var(--quest); margin-bottom:10px; }
.metap-lp .m-signal__label::before{ content:"● "; }
.metap-lp .m-signal__date{ font-family:'Josefin Slab',serif; font-size:1.05em; color:#fff; letter-spacing:0.05em; margin-bottom:8px; }
.metap-lp .m-signal__book b{ color:var(--blue-accent); font-weight:500; font-family:'Noto Serif JP',serif; }
.metap-lp .m-signal__book{ font-size:0.92em; color:var(--text-soft); }
.metap-lp .m-signal__pub{ font-size:0.8em; color:var(--text-dim); }
 
.metap-lp .m-hbooks{ display:flex; gap:14px; margin-bottom:28px; justify-content:flex-start; }
.metap-lp .m-hbooks__item{ width:84px; text-align:center; text-decoration:none; }
.metap-lp .m-hbooks__cover{
  width:84px; height:120px; border-radius:3px; overflow:hidden; margin:0 auto 8px;
  background:linear-gradient(135deg,#0e1a3a,#1a2c55); border:1px solid var(--rule);
  display:flex; align-items:center; justify-content:center; transition:transform 0.3s, border-color 0.3s;
}
.metap-lp .m-hbooks__item:hover .m-hbooks__cover{ transform:translateY(-3px); border-color:var(--quest); }
.metap-lp .m-hbooks__cover img{ width:100%; height:100%; object-fit:cover; }
.metap-lp .m-hbooks__cover .ph{ font-family:'Josefin Slab',serif; font-size:9px; color:var(--text-faint); letter-spacing:0.06em; }
.metap-lp .m-hbooks__no{ font-family:'Josefin Slab',serif; font-size:9px; letter-spacing:0.12em; color:var(--text-dim); }
 
.metap-lp .m-hintro__lead{ font-family:'Noto Serif JP',serif; font-weight:300; font-size:clamp(14px,1.7vw,16px); line-height:2.1; color:var(--text-soft); letter-spacing:0.04em; margin-bottom:28px; max-width:520px; }
 
.metap-lp .m-cta-row{ display:flex; gap:14px; flex-wrap:wrap; }
.metap-lp .m-btn{
  display:inline-flex; align-items:center; gap:9px; padding:13px 26px; border-radius:30px;
  font-family:'Noto Sans JP',sans-serif; font-weight:500; font-size:0.92em; letter-spacing:0.05em;
  text-decoration:none; transition:transform 0.25s, box-shadow 0.25s; cursor:pointer; border:0;
}
.metap-lp .m-btn:hover{ transform:translateY(-2px); }
.metap-lp .m-btn--primary{ background:var(--blue); color:#fff; box-shadow:0 4px 22px -4px rgba(59,107,216,0.6); }
.metap-lp .m-btn--primary:hover{ box-shadow:0 8px 30px -4px rgba(59,107,216,0.75); }
.metap-lp .m-btn--ghost{ background:transparent; color:var(--blue-accent); border:1px solid var(--quest); }
.metap-lp .m-btn--ghost:hover{ background:rgba(74,158,255,0.12); }
/* YouTube専用の赤ボタン */
.metap-lp .m-btn--youtube { 
  background: #FF0000; 
  color: #fff; 
  box-shadow: 0 4px 22px -4px rgba(255, 0, 0, 0.5); 
}
.metap-lp .m-btn--youtube:hover { 
  background: #e60000; /* マウスを乗せたら少しだけ濃い赤に */
  box-shadow: 0 8px 30px -4px rgba(255, 0, 0, 0.7); 
}
/* YouTube専用の赤ボタン（半透明/ゴースト版） */
.metap-lp .m-btn--youtube-ghost { 
  background: transparent; 
  color: #fff; 
  border: 1px solid #FF0000; 
}
.metap-lp .m-btn--youtube-ghost:hover { 
  background: rgba(255, 0, 0, 0.12); /* マウスを乗せたら薄い赤の背景に */
  color: #ff3333; /* 気持ち少しだけ明るい赤に */
  border-color: #ff3333; 
	-webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
}
 
.metap-lp .m-hctrl{ display:flex; align-items:center; gap:14px; margin-top:34px; }
.metap-lp .m-hdots{ display:flex; gap:10px; }
.metap-lp .m-hdot{ width:9px; height:9px; border-radius:50%; background:var(--text-faint); border:0; cursor:pointer; padding:0; transition:0.25s; }
.metap-lp .m-hdot.active{ background:var(--blue-accent); box-shadow:0 0 8px rgba(154,208,255,0.7); }
.metap-lp .m-harrows{ display:flex; gap:8px; margin-left:6px; }
.metap-lp .m-harrows button{ background:none; border:0; cursor:pointer; width:28px; height:28px; display:flex; align-items:center; justify-content:center; color:var(--text-soft); transition:color 0.2s; }
.metap-lp .m-harrows button:hover{ color:var(--blue-accent); }
.metap-lp .m-harrows svg{ width:18px; height:18px; fill:currentColor; }
.metap-lp .m-hcount{ font-family:'Josefin Slab',serif; font-size:12px; color:var(--text-dim); letter-spacing:0.08em; margin-left:auto; }
.metap-lp .m-hcount .cur{ color:var(--blue-accent); }
 
/* 星座マップ */
.metap-lp .m-constellation{ position:relative; width:100%; aspect-ratio:1/0.92; }
.metap-lp .m-constellation svg{ width:100%; height:100%; overflow:visible; }
.metap-lp .m-cn-line{ stroke:rgba(154,208,255,0.28); stroke-width:1; stroke-dasharray:3 4; }
.metap-lp .m-cn-star{ fill:#fff; transition:r 0.3s, fill 0.3s; }
.metap-lp .m-cn-node{ cursor:pointer; }
.metap-lp .m-cn-node circle.hit{ fill:transparent; }
.metap-lp .m-cn-node .core{ fill:var(--blue-accent); filter:drop-shadow(0 0 6px rgba(154,208,255,0.8)); transition:r 0.3s, fill 0.3s; }
.metap-lp .m-cn-node:hover .core,
.metap-lp .m-cn-node.active .core{ fill:var(--gold); r:7; filter:drop-shadow(0 0 12px rgba(230,168,57,0.9)); }
.metap-lp .m-cn-label{ font-family:'Josefin Slab',serif; font-size:11px; letter-spacing:0.18em; fill:var(--text-soft); pointer-events:none; transition:fill 0.3s; }
.metap-lp .m-cn-node:hover .m-cn-label,
.metap-lp .m-cn-node.active .m-cn-label{ fill:var(--gold); }
@keyframes m-twinkle{ from{opacity:0.6;} to{opacity:1;} }
.metap-lp .m-cn-star{ animation:m-twinkle 3.5s ease-in-out infinite alternate; }
 
/* ===== ABOUT ===== */
.metap-lp .m-about { 
  background: var(--bg); 
  border: none; 
  padding-bottom: 40px; 
}
.metap-lp .m-about__grid{ display:grid; grid-template-columns:1.4fr 1fr; gap:56px; align-items:center; }
.metap-lp .m-about__body{ font-family:'Noto Serif JP',serif; font-weight:300; font-size:clamp(14px,1.6vw,16px); line-height:2.25; letter-spacing:0.05em; color:var(--text-soft); }
.metap-lp .m-about__body p{ margin-bottom:1.4em; }
.metap-lp .m-about__body p:last-child{ margin-bottom:0; }
.metap-lp .m-about__meta{
  text-align:center; padding:40px 28px; position:relative;
  background:radial-gradient(ellipse at 50% 40%, rgba(74,158,255,0.12), transparent 70%);
}
.metap-lp .m-about__logo{ font-family:'Josefin Slab',serif; font-weight: bold; font-style:italic; font-size:34px; letter-spacing:0.08em; color:#fff; margin-bottom:4px; }
.metap-lp .m-about__logojp{ font-family:'Noto Serif JP',serif; font-size:13px; letter-spacing:0.2em; color:var(--blue-accent); margin-bottom:24px; }
.metap-lp .m-about__defn{ font-size:0.95em; line-height:2; color:var(--text-dim); letter-spacing:0.06em; }
 
/* ==========================================================
   ★ 問いジェネレーター（Metap Board）
   上部を円形に＋背景に小さな星の粒子
   ========================================================== */
.metap-lp .m-gen {
  position: relative;
  /* 奥行きのある宇宙・大気圏のグラデーション（上部の光＋右上の淡い星雲色） */
  background: 
    radial-gradient(ellipse at 50% 0%, rgba(154, 208, 255, 0.25) 0%, transparent 60%),
    radial-gradient(circle at 80% 20%, rgba(78, 42, 120, 0.15) 0%, transparent 50%),
    linear-gradient(180deg, var(--bg) 0%, #080d24 100%);
  
  /* 丸みを強調（vwを使うことで、画面幅に連動したダイナミックなアーチになります） */
  border-top-left-radius: 50% 12vw;
  border-top-right-radius: 50% 12vw;
  
  margin-top: -1px;
  overflow: hidden;
  
  /* 境界線をくっきりさせる「フチのハイライト（リムライト）」 */
  box-shadow: inset 0 2px 15px rgba(154, 208, 255, 0.25);
}low:hidden;
}
/* ==========================================================
   メタップボード ドーム内の記号浮遊＆接続アニメーション
   ========================================================== */
.metap-lp .m-gen__symbols {
  position: absolute;
  inset: 0;
  z-index: 1; /* 背景とコンテンツの間 */
  pointer-events: none;
  overflow: hidden;
}

/* 記号共通スタイル */
.metap-lp .m-sym {
  position: absolute;
  font-family: serif; /* 記号を綺麗に見せるため */
  font-size: 28px; /* 💡14pxから28pxに変更（ベースサイズ2倍） */
  color: var(--blue-accent);
  opacity: 0;
  filter: drop-shadow(0 0 8px var(--blue-accent)); /* 💡大きくした分、光のぼかしも少し強めに */
}

/* 接続線共通スタイル（記号の::afterで描画） */
.metap-lp .m-sym::after {
  content: "";
  position: absolute;
  background: linear-gradient(90deg, var(--blue-accent), transparent);
  height: 1px;
  width: 0;
  transform-origin: left center;
  opacity: 0;
}

/* --- 配置とアニメーション個別設定 --- */

/* 1. ◯（左上・大きく浮遊・時々右へ線） */
.metap-lp .s-circ:nth-child(1) {
  top: 20%; left: 15%;
  font-size: 36px; /* 💡18pxから36pxに */
  animation: m-float-circ 25s ease-in-out infinite, m-connect-line-1 25s ease-in-out infinite;
}
.metap-lp .s-circ:nth-child(1)::after {
  top: 50%; left: 100%;
  transform: rotate(10deg);
}

/* 2. △（中央上・小さく浮遊・線なし） */
.metap-lp .s-tri:nth-child(2) {
  top: 15%; left: 50%;
  font-size: 24px;
  animation: m-float-tri 20s ease-in-out infinite;
  opacity: 0.4;
}

/* 3. ×（右上・浮遊・時々左へ線） */
.metap-lp .s-x:nth-child(3) {
  top: 25%; left: 80%;
	font-size: 40px;
  animation: m-float-x 22s ease-in-out infinite, m-connect-line-2 22s ease-in-out infinite;
}
.metap-lp .s-x:nth-child(3)::after {
  top: 50%; right: 100%; /* 右から左へ伸ばすため */
  left: auto;
  background: linear-gradient(270deg, var(--blue-accent), transparent);
  transform-origin: right center;
  transform: rotate(-15deg);
}

/* 4. □（左下・浮遊・線なし） */
.metap-lp .s-sq:nth-child(4) {
  top: 60%; left: 20%;
  font-size: 32px;
  animation: m-float-sq 28s ease-in-out infinite;
  opacity: 0.5;
}

/* 5. ◯（右下・小さく浮遊・時々上へ線） */
.metap-lp .s-circ:nth-child(5) {
  top: 70%; left: 75%;
  font-size: 24px;
  animation: m-float-circ-small 18s ease-in-out infinite, m-connect-line-3 18s ease-in-out infinite;
}
.metap-lp .s-circ:nth-child(5)::after {
  bottom: 100%; left: 50%;
  top: auto;
  background: linear-gradient(0deg, var(--blue-accent), transparent);
  transform-origin: bottom center;
  height: 0; width: 1px; /* 縦の線 */
}

/* 6. △（中央下・浮遊・線なし） */
.metap-lp .s-tri:nth-child(6) {
  top: 75%; left: 45%;
  animation: m-float-tri 24s ease-in-out infinite;
  opacity: 0.3;
}

/* 7. □（中央・問いの裏・線なし） */
.metap-lp .s-sq:nth-child(7) {
  top: 45%; left: 55%;
  font-size: 40px;
  animation: m-float-sq 30s ease-in-out infinite;
  opacity: 0.2;
}


/* --- アニメーション定義 --- */

/* 浮遊アニメーション（フェードイン・移動・回転） */
@keyframes m-float-circ {
  0%, 100% { opacity: 0; transform: translate(0, 0) rotate(0deg); }
  10%, 90% { opacity: 0.6; }
  50% { transform: translate(20px, -30px) rotate(10deg); }
}
@keyframes m-float-tri {
  0%, 100% { opacity: 0; transform: translate(0, 0) rotate(0deg); }
  15%, 85% { opacity: 0.4; }
  50% { transform: translate(-15px, 20px) rotate(-15deg); }
}
@keyframes m-float-x {
  0%, 100% { opacity: 0; transform: translate(0, 0) rotate(0deg); }
  10%, 90% { opacity: 0.5; }
  50% { transform: translate(-25px, -15px) rotate(20deg); }
}
@keyframes m-float-sq {
  0%, 100% { opacity: 0; transform: translate(0, 0) rotate(0deg); }
  20%, 80% { opacity: 0.3; }
  50% { transform: translate(30px, 15px) rotate(15deg); }
}
@keyframes m-float-circ-small {
  0%, 100% { opacity: 0; transform: translate(0, 0) rotate(0deg); }
  10%, 90% { opacity: 0.5; }
  50% { transform: translate(10px, -20px) rotate(-10deg); }
}

/* 接続線アニメーション（時々伸びて、繋がった瞬間光る） */

/* 線1：右へ80px */
@keyframes m-connect-line-1 {
  0%, 38%, 45%, 100% { width: 0; opacity: 0; }
  40% { width: 80px; opacity: 1; } /* 伸びる */
  41% { width: 80px; opacity: 1; filter: brightness(2); } /* 繋がって光る */
}
/* 線2：左へ70px */
@keyframes m-connect-line-2 {
  0%, 68%, 75%, 100% { width: 0; opacity: 0; }
  70% { width: 70px; opacity: 1; }
  71% { width: 70px; opacity: 1; filter: brightness(2); }
}
/* 線3：上へ60px（縦線） */
@keyframes m-connect-line-3 {
  0%, 18%, 25%, 100% { height: 0; opacity: 0; }
  20% { height: 60px; opacity: 1; }
  21% { height: 60px; opacity: 1; filter: brightness(2); }
}
/* セクション背景に散らす小さな星の粒子 */
.metap-lp .m-gen__stars{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    radial-gradient(1px 1px at 7% 12%, rgba(255,255,255,0.85), transparent 55%),
    radial-gradient(1.4px 1.4px at 15% 33%, rgba(154,208,255,0.7), transparent 55%),
    radial-gradient(1px 1px at 23% 8%, rgba(255,255,255,0.6), transparent 55%),
    radial-gradient(1px 1px at 31% 52%, rgba(255,255,255,0.7), transparent 55%),
    radial-gradient(1.3px 1.3px at 39% 22%, rgba(255,255,255,0.8), transparent 55%),
    radial-gradient(1px 1px at 47% 70%, rgba(154,208,255,0.6), transparent 55%),
    radial-gradient(1px 1px at 55% 15%, rgba(255,255,255,0.65), transparent 55%),
    radial-gradient(1.4px 1.4px at 63% 44%, rgba(255,255,255,0.8), transparent 55%),
    radial-gradient(1px 1px at 71% 80%, rgba(255,255,255,0.6), transparent 55%),
    radial-gradient(1px 1px at 79% 28%, rgba(154,208,255,0.65), transparent 55%),
    radial-gradient(1.3px 1.3px at 87% 60%, rgba(255,255,255,0.75), transparent 55%),
    radial-gradient(1px 1px at 93% 18%, rgba(255,255,255,0.6), transparent 55%),
    radial-gradient(1px 1px at 11% 88%, rgba(255,255,255,0.55), transparent 55%),
    radial-gradient(1px 1px at 35% 92%, rgba(154,208,255,0.55), transparent 55%),
    radial-gradient(1.2px 1.2px at 59% 95%, rgba(255,255,255,0.6), transparent 55%),
    radial-gradient(1px 1px at 83% 90%, rgba(255,255,255,0.55), transparent 55%),
    radial-gradient(1px 1px at 5% 60%, rgba(255,255,255,0.6), transparent 55%),
    radial-gradient(1px 1px at 97% 78%, rgba(154,208,255,0.6), transparent 55%);
  background-repeat:no-repeat;
  opacity:0.7;
  animation:m-particle-tw 5s ease-in-out infinite alternate;
}
.metap-lp .m-gen .m-inner{ position:relative; z-index:1; }
.metap-lp .m-gen__head{ text-align:center; margin-bottom:44px; }
.metap-lp .m-gen__head .m-lead{ margin:0 auto; }
.metap-lp .m-gen__stage{
  position:relative; max-width:860px; margin:0 auto;
  background:linear-gradient(155deg, rgba(20,45,100,0.42), rgba(8,18,50,0.3) 75%);
  border:1px solid #1c3a6e; padding:40px 38px 44px;
}
.metap-lp .m-gen__stage .m-corner{ border-color:var(--quest); width:11px; height:11px; }
 
.metap-lp .m-gen__themes{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:32px; }
.metap-lp .m-chip{
  font-family:'Josefin Slab',serif; font-size:12px; letter-spacing:0.12em;
  color:var(--text-soft); background:rgba(255,255,255,0.04); border:1px solid var(--rule);
  padding:8px 16px; border-radius:24px; cursor:pointer; transition:0.25s;
}
.metap-lp .m-chip:hover{ border-color:var(--quest); color:var(--blue-accent); }
.metap-lp .m-chip.active{ background:rgba(74,158,255,0.16); border-color:var(--quest); color:#fff; }
 
.metap-lp .m-gen__qbox{ text-align:center; min-height:120px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:8px 0 4px; }
.metap-lp .m-gen__qkicker{ font-family:'Josefin Slab',serif; font-size:11px; letter-spacing:0.2em; color:var(--gold); margin-bottom:16px; }
 
.metap-lp .m-gen__qcard{ max-width:680px; width:100%; cursor:pointer; outline:none; }
.metap-lp .m-gen__qcard:hover .m-gen__q{ color:var(--blue-accent); transition:color 0.25s; }
.metap-lp .m-gen__q{
  font-family:'Noto Serif JP',serif; font-weight:500; font-size:clamp(19px,2.6vw,27px);
  line-height:1.7; letter-spacing:0.04em; color:#fff; max-width:640px; margin:0 auto;
  opacity:0; transform:translateY(10px); transition:opacity 0.5s, transform 0.5s;
}
.metap-lp .m-gen__q.show{ opacity:1; transform:none; }
.metap-lp .m-gen__ahint{
  font-family:'Josefin Slab',serif; font-size:13px; letter-spacing:0.1em; color:var(--quest);
  margin-top:16px; transition:opacity 0.25s ease; opacity:0.85;
}
.metap-lp .m-gen__qcard.open .m-gen__ahint{ opacity:0; }
 
.metap-lp .m-gen__answer{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows 0.4s cubic-bezier(.2,.8,.2,1), opacity 0.35s ease, margin-top 0.4s ease;
  opacity:0; margin-top:0;
}
.metap-lp .m-gen__qcard.open .m-gen__answer{
  grid-template-rows:1fr; opacity:1; margin-top:22px;
}
.metap-lp .m-gen__answer > .m-gen__inner{ overflow:hidden; min-height:0; display:flex; gap:16px; align-items:flex-start; text-align:left; }
.metap-lp .m-gen__avatar{
  flex-shrink:0; width:48px; height:48px; border-radius:50%; overflow:hidden;
  border:1px solid var(--rule); background:linear-gradient(135deg,#0e1a3a,#1a2c55);
  transform:translateY(6px) scale(0.9); opacity:0; transition:transform 0.4s ease 0.08s, opacity 0.4s ease 0.08s;
}
.metap-lp .m-gen__qcard.open .m-gen__avatar{ transform:none; opacity:1; }
.metap-lp .m-gen__avatar img{ width:100%; height:100%; object-fit:cover; }
.metap-lp .m-gen__bubble{
  position:relative; flex:1;
  background:rgba(230,168,57,0.07); border:1px solid rgba(230,168,57,0.25);
  border-radius:4px 12px 12px 12px; padding:16px 20px;
  transform:translateY(6px); opacity:0; transition:transform 0.4s ease 0.06s, opacity 0.4s ease 0.06s;
}
.metap-lp .m-gen__qcard.open .m-gen__bubble{ transform:none; opacity:1; }
.metap-lp .m-gen__bubble::before{
  content:""; position:absolute; left:-8px; top:14px; width:0; height:0;
  border-style:solid; border-width:7px 8px 7px 0; border-color:transparent rgba(230,168,57,0.25) transparent transparent;
}
.metap-lp .m-gen__bubble::after{
  content:""; position:absolute; left:-6px; top:15px; width:0; height:0;
  border-style:solid; border-width:6px 7px 6px 0; border-color:transparent #14233f transparent transparent;
}
.metap-lp .m-gen__alabel{
  font-family:'Josefin Slab',serif; font-size:12px; letter-spacing:0.12em; color:var(--gold);
  margin-bottom:8px;
}
.metap-lp .m-gen__bubble p{
  font-family:'Noto Sans JP',sans-serif; font-size:0.96em; line-height:1.95; color:var(--text-soft);
  letter-spacing:0.03em; margin:0;
}
 
.metap-lp .m-gen__actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin:30px 0 8px; }
.metap-lp .m-gen__roll{
  font-family:'Noto Sans JP',sans-serif; font-weight:500; font-size:0.95em; letter-spacing:0.05em;
  color:#fff; background:var(--blue); border:0; border-radius:30px; padding:12px 28px; cursor:pointer;
  transition:transform 0.25s, box-shadow 0.25s; box-shadow:0 4px 20px -4px rgba(59,107,216,0.5);
}
.metap-lp .m-gen__roll:hover{ transform:translateY(-2px); box-shadow:0 8px 28px -4px rgba(59,107,216,0.7); }
.metap-lp .m-gen__send{
  font-family:'Noto Sans JP',sans-serif; font-size:0.95em; letter-spacing:0.05em;
  color: #f5c518; background: transparent; border: 1px solid #f5c518; /* 文字と枠線を黄色（中身透明）に変更 */
  border-radius:30px; padding:12px 24px; cursor:pointer; transition:0.25s; text-decoration:none;
  display:inline-flex; align-items:center; gap:8px;
}
.metap-lp .m-gen__send:hover{ 
  background: rgba(245, 197, 24, 0.12); /* マウスを乗せたときは黄色の半透明背景に */
  color: #ffd633; 
  border-color: #ffd633; /* マウスを乗せたときは少し明るい黄色に変化 */
}
 
.metap-lp .m-gen__links{
  margin-top:30px; padding-top:26px; border-top:1px solid var(--rule);
  display:grid; grid-template-columns:repeat(3,1fr); gap:14px;
  opacity:0; transition:opacity 0.5s;
}
.metap-lp .m-gen__links.show{ opacity:1; }
.metap-lp .m-glink{
  display:flex; flex-direction:column; text-decoration:none;
  background:rgba(255,255,255,0.03); border:1px solid var(--rule); border-radius:6px;
  overflow:hidden; transition:0.25s;
}
.metap-lp .m-glink:hover{ border-color:var(--quest); background:rgba(74,158,255,0.08); transform:translateY(-3px); }
.metap-lp .m-glink__thumb{
  width:100%; aspect-ratio:16/9; background:linear-gradient(135deg,#0e1a3a,#1a2c55);
  display:flex; align-items:center; justify-content:center; overflow:hidden; flex-shrink:0;
  border-bottom:1px solid var(--rule);
}
.metap-lp .m-glink__thumb img{ width:100%; height:100%; object-fit:cover; }
/* 書籍（縦長）のサムネ設定：背景をグラデにし、本を縦にフィットさせて立体感を出す */
.metap-lp .m-glink--book .m-glink__thumb {
  background: linear-gradient(135deg, #10204a, #24407a);
}
.metap-lp .m-glink--book .m-glink__thumb img {
  width: auto;
  height: 88%; /* 上下に少し余白を持たせる */
  object-fit: contain;
  box-shadow: 4px 4px 12px rgba(0,0,0,0.4); /* 本っぽく影をつける */
  border-radius: 2px;
}

/* 例外の書籍（ワイド画像）は記事や動画と同じく全面カバー表示 */
.metap-lp .m-glink--book-wide .m-glink__thumb {
  background: linear-gradient(135deg, #10204a, #24407a);
}
.metap-lp .m-glink--book-wide .m-glink__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  box-shadow: none;
  border-radius: 0;
}
.metap-lp .m-glink__thumb .ph{ font-family:'Josefin Slab',serif; font-size:10px; color:var(--text-faint); letter-spacing:0.1em; }
.metap-lp .m-glink__txt{ padding:14px 16px 16px; }
.metap-lp .m-glink__type{ font-family:'Josefin Slab',serif; font-size:10px; letter-spacing:0.18em; color:var(--text-dim); margin-bottom:8px; }
.metap-lp .m-glink--book .m-glink__type{ color:var(--blue-accent); }
.metap-lp .m-glink--note .m-glink__type{ color:#8fd6b0; }
.metap-lp .m-glink--journal .m-glink__type{ color:var(--wanted-soft); }
.metap-lp .m-glink--video .m-glink__type{ color:var(--wanted-soft); }
.metap-lp .m-glink__title{ font-size:0.95em; line-height:1.6; color:var(--text-soft); letter-spacing:0.02em; }
.metap-lp .m-glink:hover .m-glink__title{ color:#fff; }
 
/* ==========================================================
   BOOKS（背景画像＋半透明カバー）
   ========================================================== */
.metap-lp .m-books{
  position:relative;
  background-image:url("https://www.turetiru.com/wp-content/uploads/2026/05/d0458b2d467811bf63e2cc698a7dae9f.jpg");
  background-size:cover; background-position:center; background-attachment:fixed;
}
.metap-lp .m-books::before{
  content:""; position:absolute; inset:0; z-index:0;
  background-color:rgba(0,0,0,0.3);
  pointer-events:none;
}
.metap-lp .m-books .m-inner{ position:relative; z-index:1; }
.metap-lp .m-books__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:44px; }
.metap-lp .m-bcard{
  position:relative; padding:24px 22px 22px;
  background:linear-gradient(155deg, rgba(20,40,90,0.55), rgba(8,18,50,0.45) 75%);
  backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
  border:1px solid #1c3a6e; display:flex; flex-direction:column;
  transition:transform 0.35s cubic-bezier(.2,.7,.2,1), box-shadow 0.35s, border-color 0.35s;
}
.metap-lp .m-bcard:hover{ transform:translateY(-4px); box-shadow:0 14px 38px -10px rgba(74,158,255,0.28); border-color:var(--quest); }
.metap-lp .m-bcard .m-corner{ border-color:var(--quest); width:10px; height:10px; }
.metap-lp .m-bcover{
  display:block; width:80%; max-width:170px; border-radius:3px; overflow:hidden; margin:0 auto 18px;
  background:rgba(255,255,255,0.04); border:1px solid var(--rule); padding:8px;
  box-shadow:0 8px 22px -10px rgba(0,0,0,0.7); transition:transform 0.3s, border-color 0.3s;
}
.metap-lp a.m-bcover:hover{ transform:translateY(-3px); border-color:var(--quest); }
.metap-lp .m-bcover img{ display:block; width:100%; height:auto; border-radius:2px; }
.metap-lp .m-bcover .ph{ display:block; padding:36px 6px; font-family:'Josefin Slab',serif; font-size:10px; color:var(--text-faint); letter-spacing:0.08em; text-align:center; }
.metap-lp .m-bno{ font-family:'Josefin Slab',serif; font-size:0.78em; letter-spacing:0.06em; color:var(--text-dim); margin-bottom:10px; }
.metap-lp .m-btitle{ font-family:'Noto Serif JP',serif; font-weight:500; font-size:1.1em; line-height:1.5; letter-spacing:0.02em; color:#f1f4fb; margin-bottom:6px; }
.metap-lp .m-bauthor{ font-size:0.86em; color:var(--text-soft); letter-spacing:0.03em; margin-bottom:16px; }
.metap-lp .m-bmeta{ font-size:0.82em; color:var(--text-dim); letter-spacing:0.03em; margin-bottom:16px; }
.metap-lp .m-blive{
  background:linear-gradient(135deg, rgba(255,122,58,0.16), rgba(255,122,58,0.06));
  border:1px solid rgba(255,122,58,0.45); border-radius:4px;
  padding:12px 14px; margin-bottom:16px; text-align:center;
}
.metap-lp .m-blive .lv{ font-family:'Josefin Slab',serif; font-size:0.78em; font-weight:600; letter-spacing:0.22em; color:var(--wanted-soft); display:block; margin-bottom:6px; }
.metap-lp .m-blive .lv-date{ font-family:'Noto Serif JP',serif; font-weight:500; font-size:1.08em; color:#fff; letter-spacing:0.04em; line-height:1.45; display:block; }
.metap-lp .m-blive .lv-time{ font-family:'Josefin Slab',serif; font-size:0.92em; color:var(--wanted-soft); letter-spacing:0.08em; }
.metap-lp .m-blinks{ font-size:0.95em; line-height:1.6; margin-top:auto; }
.metap-lp .m-blinks .lbl{ font-family:'Josefin Slab',serif; font-size:9px; letter-spacing:0.15em; color:var(--text-dim); display:block; margin-bottom:8px; }
.metap-lp .m-blinks a{ display:block; color:var(--blue-light); text-decoration:none; padding:4px 0; transition:color 0.2s; }
.metap-lp .m-blinks a:hover{ color:var(--blue-accent); }
.metap-lp .m-blinks a::before{ content:"› "; color:var(--text-dim); }
.metap-lp .m-books__amazon{ text-align:center; margin-top:34px; }
 
/* ===== SCHEDULE ＋ FORM ===== */
/* スケジュール＆フォーム背景：グリッド（座標）と星雲の光 */
.metap-lp .m-sf { 
  background-color: var(--bg-2); 
  background-image: 
    /* 1. 星雲のような淡い光（左上:青、右下:ゴールド、下中央:紫） */
    radial-gradient(circle at 10% 20%, rgba(74, 158, 255, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 90% 80%, rgba(245, 197, 24, 0.06) 0%, transparent 50%),
    radial-gradient(circle at 50% 100%, rgba(78, 42, 120, 0.1) 0%, transparent 60%),
    /* 2. うっすらとしたグリッド（知のマッピング・座標） */
    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 100% 100%, 40px 40px, 40px 40px; /* 光は全体、グリッドは40px四方 */
  border-top: 1px solid var(--rule); 
  border-bottom: 1px solid var(--rule); 
}
.metap-lp .m-sf__grid{ display:grid; grid-template-columns:1.5fr 1fr; gap:56px; }
 
.metap-lp .m-timeline{ margin-top:30px; border-left:1px solid var(--rule); }
.metap-lp .m-tl{ position:relative; padding:14px 0 14px 30px; border-bottom:1px solid var(--rule); display:grid; grid-template-columns:96px 1fr auto; gap:16px; align-items:baseline; }
.metap-lp .m-tl:last-child{ border-bottom:0; }
.metap-lp .m-tl::before{ content:""; position:absolute; left:-5px; top:22px; width:9px; height:9px; border-radius:50%; background:var(--text-faint); }
.metap-lp .m-tl.live::before{ background:var(--quest); box-shadow:0 0 10px rgba(74,158,255,0.7); }
.metap-lp .m-tl.event::before{ background:var(--wanted); box-shadow:0 0 10px rgba(255,122,58,0.7); }
.metap-lp .m-tl__date{ font-family:'Josefin Slab',serif; font-size:0.82em; color:var(--text-dim); letter-spacing:0.04em; }
.metap-lp .m-tl__body{ font-size:0.95em; color:var(--text-soft); letter-spacing:0.02em; }
.metap-lp .m-tl__body a{ color:var(--blue-light); text-decoration:none; border-bottom:1px solid transparent; }
.metap-lp .m-tl__body a:hover{ border-bottom-color:var(--blue-light); }
.metap-lp .m-tl__tag{ font-family:'Josefin Slab',serif; font-size:9px; letter-spacing:0.16em; margin-right:8px; }
.metap-lp .m-tl.live .m-tl__tag{ color:var(--quest); }
.metap-lp .m-tl.event .m-tl__tag{ color:var(--wanted); }
.metap-lp .m-tl.post .m-tl__tag{ color:var(--text-dim); }
.metap-lp .m-tl__ref{ font-family:'Josefin Slab',serif; font-size:0.68em; color:var(--text-faint); letter-spacing:0.08em; }
 
.metap-lp .m-form__panel{
  margin-top:30px; position:relative;
  background:linear-gradient(155deg, rgba(78,42,120,0.38), rgba(34,16,60,0.24) 75%);
  border:1px solid #5a3a8e; padding:30px 26px;
}
.metap-lp .m-form__panel .m-corner{ border-color:#a98ee6; }
.metap-lp .m-form__panel h4{ font-family:'Noto Serif JP',serif; font-weight:500; font-size:1.05em; color:#fff; margin-bottom:14px; letter-spacing:0.04em; }
.metap-lp .m-form__panel p{ font-size:0.95em; line-height:1.9; color:var(--text-soft); margin-bottom:20px; letter-spacing:0.03em; }
.metap-lp .m-form__note{ font-size:0.88em; color:var(--text-dim); line-height:1.8; margin-bottom:20px; border-left:2px solid rgba(169,142,230,0.4); padding-left:12px; }
.metap-lp .m-form__btn{ margin-top:18px; }
/* フォームの目立つ黄色ボタン */
.metap-lp .m-btn--gold{ background:#f5c518; color:#241000; box-shadow:0 4px 22px -4px rgba(245,197,24,0.55); }
.metap-lp .m-btn--gold:hover{ background:#ffd633; box-shadow:0 8px 30px -4px rgba(245,197,24,0.75); }
 
.metap-lp .m-form__add{ margin-top:26px; padding-top:22px; border-top:1px solid var(--rule); }
.metap-lp .m-form__add .lbl{ font-family:'Josefin Slab',serif; font-size:10px; letter-spacing:0.16em; color:var(--gold); margin-bottom:12px; }
.metap-lp .m-form__add .item{ font-size:0.82em; color:var(--text-soft); padding:6px 0; display:flex; gap:8px; }
.metap-lp .m-form__add .item::before{ content:"＋"; color:var(--wanted-soft); }
 
/* ==========================================================
   note シーズン0（背景画像＋半透明カバー）
   ========================================================== */
.metap-lp .m-note{
  position:relative;
  background-image:url("https://www.turetiru.com/wp-content/uploads/2026/05/metap-season0-note-bg3.webp");
  background-size:cover; background-position:center; background-attachment:fixed;
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
}
.metap-lp .m-note::before{
  content:""; position:absolute; inset:0; z-index:0;
  background-color:rgba(0,0,0,0.5);
  pointer-events:none;
}
.metap-lp .m-note .m-inner{ position:relative; z-index:1; }
.metap-lp .m-note__head{ max-width:760px; }
.metap-lp .m-note__grid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:18px; margin-top:44px; }
.metap-lp .m-ncard{
  position:relative; display:flex; flex-direction:column; text-decoration:none;
  background:linear-gradient(155deg, rgba(20,40,90,0.5), rgba(8,18,50,0.4) 75%);
  backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
  border:1px solid #1c3a6e; border-radius:6px; overflow:hidden;
  transition:transform 0.35s cubic-bezier(.2,.7,.2,1), box-shadow 0.35s, border-color 0.35s;
}
.metap-lp .m-ncard:hover{ transform:translateY(-4px); box-shadow:0 14px 38px -10px rgba(74,158,255,0.28); border-color:var(--quest); }
.metap-lp .m-ncard__tag{
  font-family:'Josefin Slab',serif; font-size:11px; font-weight:600; letter-spacing:0.18em;
  padding:16px 20px 0; color:var(--gold);
}
.metap-lp .m-ncard--mag .m-ncard__tag{ color:var(--blue-accent); }
.metap-lp .m-ncard--top .m-ncard__tag{ color:#8fd6b0; }
.metap-lp .m-ncard__body{ padding:10px 20px 22px; display:flex; flex-direction:column; flex:1; }
.metap-lp .m-ncard__title{ font-family:'Noto Serif JP',serif; font-weight:500; font-size:1.12em; line-height:1.55; color:#f1f4fb; letter-spacing:0.02em; margin-bottom:10px; }
.metap-lp .m-ncard__desc{ font-size:0.9em; line-height:1.85; color:var(--text-soft); letter-spacing:0.02em; margin-bottom:16px; }
.metap-lp .m-ncard__cta{ font-family:'Josefin Slab',serif; font-size:0.9em; letter-spacing:0.06em; color:var(--blue-light); margin-top:auto; }
.metap-lp .m-ncard__cta::after{ content:" ↗"; }
.metap-lp .m-ncard--soon{ cursor:default; opacity:0.92; }
.metap-lp .m-ncard--soon:hover{ transform:none; box-shadow:none; border-color:#1c3a6e; }
.metap-lp .m-ncard__cta--soon{ font-family:'Josefin Slab',serif; font-size:0.82em; letter-spacing:0.1em; color:var(--text-dim); margin-top:auto; border:1px solid var(--rule); border-radius:20px; padding:5px 14px; align-self:flex-start; }
.metap-lp .m-ncard__cta--soon::after{ content:""; }
.metap-lp .m-ncard__list{ list-style:none; margin:0 0 16px; padding:0; }
.metap-lp .m-ncard__list li{ font-size:0.86em; line-height:1.6; color:var(--text-soft); padding:7px 0; border-bottom:1px solid var(--rule); letter-spacing:0.02em; }
.metap-lp .m-ncard__list li:last-child{ border-bottom:0; }
.metap-lp .m-ncard__list .wk{ font-family:'Josefin Slab',serif; font-size:0.82em; color:var(--wanted-soft); margin-right:8px; letter-spacing:0.06em; }
.metap-lp .m-note__pillars{ display:flex; gap:10px; flex-wrap:wrap; margin-top:26px; }
.metap-lp .m-note__pillar{
  font-family:'Josefin Slab',serif; font-size:0.86em; letter-spacing:0.08em; color:var(--text-soft);
  border:1px solid var(--rule); border-radius:24px; padding:7px 16px;
  background:rgba(6,11,30,0.35);
}
.metap-lp .m-note__pillar b{ color:var(--blue-accent); font-weight:600; }
 
/* ===== PROFILE ＋ LINKS ===== */
.metap-lp .m-profile__grid{ display:grid; grid-template-columns:1.4fr 1fr; gap:56px; align-items:start; }
.metap-lp .m-pcard{ display:grid; grid-template-columns:84px 1fr; gap:24px; align-items:start; }
.metap-lp .m-pavatar{ width:84px; height:84px; border-radius:50%; overflow:hidden; background:linear-gradient(135deg,#0e1a3a,#1a2c55); border:1px solid var(--rule); }
.metap-lp .m-pavatar img{ width:100%; height:100%; object-fit:cover; }
.metap-lp .m-pname{ font-family:'Noto Sans JP',sans-serif; font-weight:500; font-size:0.95em; color:var(--blue-accent); margin-bottom:12px; letter-spacing:0.06em; }
.metap-lp .m-pbody{ font-size:0.95em; line-height:2; color:var(--text-soft); letter-spacing:0.02em; margin-bottom:16px; }
.metap-lp .m-plinks{ display:flex; gap:18px; flex-wrap:wrap; font-size:0.82em; }
.metap-lp .m-plinks a{ color:var(--blue-light); text-decoration:none; border-bottom:1px solid transparent; }
.metap-lp .m-plinks a:hover{ border-bottom-color:var(--blue-light); }
/* プロフィール内の書籍紹介 */
.metap-lp .m-pbook{
  display:grid; grid-template-columns:120px 1fr; gap:22px; align-items:start;
  margin-top:30px; padding-top:28px; border-top:1px solid var(--rule);
}
.metap-lp .m-pbook__cover{
  display:block; width:120px; border-radius:3px; overflow:hidden;
  border:1px solid var(--rule); box-shadow:0 8px 22px -10px rgba(0,0,0,0.7);
  background:rgba(255,255,255,0.04); padding:6px; transition:transform 0.3s, border-color 0.3s;
}
.metap-lp .m-pbook__cover:hover{ transform:translateY(-3px); border-color:var(--quest); }
.metap-lp .m-pbook__cover img{ display:block; width:100%; height:auto; border-radius:2px; }
.metap-lp .m-pbook__label{ font-family:'Josefin Slab',serif; font-size:10px; letter-spacing:0.16em; color:var(--blue-accent); display:block; margin-bottom:8px; }
.metap-lp .m-pbook__title{ font-family:'Noto Serif JP',serif; font-weight:500; font-size:1.02em; line-height:1.5; color:#f1f4fb; letter-spacing:0.02em; margin-bottom:10px; }
.metap-lp .m-pbook__title small{ font-weight:400; font-size:0.78em; color:var(--text-dim); }
.metap-lp .m-pbook__desc{ font-size:0.86em; line-height:1.9; color:var(--text-soft); letter-spacing:0.02em; }
.metap-lp .m-pbook__btns{ display:flex; gap:12px; flex-wrap:wrap; margin-top:16px; }
.metap-lp .m-pbook__btns .m-btn{ padding:10px 20px; font-size:0.86em; }
.metap-lp .m-btn--amazon{ background:#FF9900; color:#241000; box-shadow:0 4px 22px -4px rgba(255,153,0,0.5); }
.metap-lp .m-btn--amazon:hover{ background:#ffad33; box-shadow:0 8px 30px -4px rgba(255,153,0,0.7); }
 
.metap-lp .m-media{ }
.metap-lp .m-media .lbl{ font-family:'Josefin Slab',serif; font-size:11px; letter-spacing:0.2em; color:var(--blue-accent); margin-bottom:18px; }
.metap-lp .m-media__row{ display:flex; gap:14px; flex-wrap:wrap; }
/* 3:1 バナー（2列） */
.metap-lp .m-banners{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.metap-lp .m-banner{
  display:flex; flex-direction:column; text-decoration:none;
  border:1px solid var(--rule); border-radius:6px; overflow:hidden; transition:0.25s;
  background:rgba(255,255,255,0.03);
}
.metap-lp .m-banner:hover{ border-color:var(--quest); background:rgba(74,158,255,0.08); transform:translateY(-3px); }
.metap-lp .m-banner__thumb{
  width:100%; aspect-ratio:3/1; overflow:hidden;
  background:linear-gradient(135deg,#0e1a3a,#1a2c55);
  display:flex; align-items:center; justify-content:center; border-bottom:1px solid var(--rule);
}
.metap-lp .m-banner__thumb img{ width:100%; height:100%; object-fit:cover; }
.metap-lp .m-banner__thumb .ph{ font-family:'Josefin Slab',serif; font-size:11px; color:var(--text-faint); letter-spacing:0.14em; }
.metap-lp .m-banner__txt{ padding:12px 16px 14px; }
.metap-lp .m-banner__type{ display:block; font-family:'Josefin Slab',serif; font-size:10px; letter-spacing:0.16em; color:var(--blue-accent); margin-bottom:6px; }
.metap-lp .m-banner__title{ display:block; font-size:0.95em; line-height:1.5; color:var(--text-soft); letter-spacing:0.02em; }
.metap-lp .m-banner:hover .m-banner__title{ color:#fff; }
 
/* ===== FOOTER ===== */
.metap-lp .m-footer{ background:var(--bg-2); border-top:1px solid var(--rule); padding:44px 28px; }
.metap-lp .m-footer__inner{ max-width:var(--max-w); margin:0 auto; display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; }
.metap-lp .m-footer__brand{ font-family:'Cormorant Garamond',serif; font-style:italic; font-size:18px; letter-spacing:0.06em; color:#fff; }
.metap-lp .m-footer__brand span{ font-family:'Noto Sans JP'; font-size:11px; color:var(--text-dim); letter-spacing:0.1em; }
.metap-lp .m-footer__nav{ display:flex; gap:24px; flex-wrap:wrap; }
.metap-lp .m-footer__nav a{ font-size:13px; color:var(--text-soft); text-decoration:none; letter-spacing:0.04em; transition:color 0.2s; }
.metap-lp .m-footer__nav a:hover{ color:var(--blue-accent); }
.metap-lp .m-footer__copy{ font-family:'Josefin Slab',serif; font-size:11px; color:var(--text-dim); letter-spacing:0.06em; }
 
.metap-lp .m-reveal{ opacity:0; transform:translateY(22px); transition:opacity 0.8s, transform 0.8s; }
.metap-lp .m-reveal.in{ opacity:1; transform:none; }
 
/* ===== RESPONSIVE ===== */
@media (max-width:900px){
  .metap-lp .m-nav{ display:none; }
  .metap-lp .m-nav.open{
    display:flex; flex-direction:column; gap:0;
    position:absolute; top:64px; left:0; right:0;
    background:rgba(6,11,30,0.97); border-bottom:1px solid var(--rule); padding:8px 28px 16px;
  }
  .metap-lp .m-nav.open a{ padding:12px 0; border-bottom:1px solid var(--rule); }
  .metap-lp .m-back{ display:none; }
  .metap-lp .m-burger{ display:block; }
  .metap-lp .m-hero__grid{ grid-template-columns:1fr; gap:20px; }
  .metap-lp .m-constellation{ max-width:420px; margin:0 auto; opacity:0.85; }
  .metap-lp .m-about__grid{ grid-template-columns:1fr; gap:36px; }
  .metap-lp .m-books__grid{ grid-template-columns:repeat(2,1fr); }
  .metap-lp .m-sf__grid{ grid-template-columns:1fr; gap:44px; }
  .metap-lp .m-profile__grid{ grid-template-columns:1fr; gap:40px; }
  .metap-lp .m-note__grid{ grid-template-columns:1fr; }
  .metap-lp .m-gen__links{ grid-template-columns:1fr; }
  .metap-lp .m-gen { border-top-left-radius: 50% 8vw; border-top-right-radius: 50% 8vw; }
  /* モバイルでは固定背景を解除（iOS対策） */
  .metap-lp .m-books{ background-attachment:scroll; }
  .metap-lp .m-note{ background-attachment:scroll; }
}
@media (max-width:560px){
  .metap-lp .m-section{ padding:60px 20px; }
  .metap-lp .m-hero__grid{ padding:56px 20px 52px; }
  .metap-lp .m-hslider{ min-height:480px; }
  .metap-lp .m-constellation{ display:none; }
  .metap-lp .m-books__grid{ grid-template-columns:1fr; }
  .metap-lp .m-bcover{ max-width:200px; margin-left:auto; margin-right:auto; }
  .metap-lp .m-gen__stage{ padding:28px 20px 32px; }
  .metap-lp .m-tl{ grid-template-columns:1fr; gap:4px; }
  .metap-lp .m-tl__ref{ display:none; }
  .metap-lp .m-pcard{ grid-template-columns:1fr; justify-items:center; text-align:center; }
  .metap-lp .m-pbook{ grid-template-columns:1fr; justify-items:center; text-align:center; }
  .metap-lp .m-banners{ grid-template-columns:1fr; }
  .metap-lp .m-footer__inner{ flex-direction:column; text-align:center; }
}