/* Theme tokens */
:root{
  --primary:#1DB954;
  --secondary:#5d2e8c;
  --bg:#0f0d21;
  --card:#1a1736;
  --text:#fff;
  --muted:#b3b3b3;
  --hover:0.85;
  --neon-purple:#a020f0;
  --cyan:#00ffff;
}

html,body{
  margin:0;
  padding:0;
  font-family:'Poppins','Noto Sans JP',sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
}

.container{ width:90%; max-width:1200px; margin:0 auto; padding:0 15px; }

/* Navbar */
.navbar{
  position:fixed; top:0; left:0; width:100%;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(10px);
  z-index:1000;
}
.navbar .container{
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem 0;
}
.logo{ font-size:1.5rem; font-weight:700; color:#fff; text-decoration:none; }
.nav a{ color:var(--text); text-decoration:none; margin-left:1.5rem; font-size:.95rem; transition:color .3s; }
.nav a:hover,.nav a.active{ color:var(--primary); }

.social-links-header{ display:flex; align-items:center; gap:1rem; }
.social-links-header a{ color:#fff; font-size:1.25rem; display:inline-flex; align-items:center; line-height:1; }
.social-links-header a:hover{ color:var(--primary); }

/* HERO */
.hero{
  position:relative;
  height:100vh;
  background:url('../images/aria-hero-pc.png') center/cover no-repeat;
  display:flex; align-items:center; justify-content:flex-start;
}
.hero-overlay{
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(15,13,33,.85) 0%, rgba(15,13,33,.6) 45%, rgba(15,13,33,.3) 80%, rgba(15,13,33,.15) 100%);
  z-index:1;
  pointer-events:none; /* クリック妨害防止 */
}
.hero-content{
  position:relative; z-index:2;
  margin-left:8vw;
  max-width:640px;
  padding:1rem 2rem;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.16);
  border-radius:16px;
  box-shadow:0 10px 40px rgba(0,0,0,.35), 0 0 80px rgba(160,32,240,.15);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}
.hero-title{
  font-size:3rem; letter-spacing:.04em; margin:0 0 .25rem;
  text-shadow:0 0 22px rgba(160,32,240,.35), 0 0 12px rgba(0,255,255,.2);
}
.hero-sub{
  margin:0 0 1.25rem; color:var(--muted); font-weight:600;
}
.cta-buttons{ display:flex; flex-wrap:wrap; gap:.8rem; }
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.8rem 1.2rem; border-radius:28px; font-weight:700; text-decoration:none; color:#fff;
  transition:transform .2s ease, opacity .2s ease, box-shadow .2s ease;
  box-shadow:0 8px 20px rgba(0,0,0,.35);
}
.btn.glass{
  background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.08));
  border:1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.btn.listen{ box-shadow:0 0 24px rgba(255,0,0,.35); } /* YouTubeっぽい赤のグロー */
.btn.follow{ box-shadow:0 0 24px rgba(160,32,240,.35); }
.btn:hover{ transform:translateY(-2px); opacity:var(--hover); }

/* Latest Release */
.feature-release{
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: center;
  overflow: clip;
  background: #0f0d21;
}
.feature-release .feature-bg{
  position: absolute; inset: 0;
  background: url('../images/section-latest-pc.png') center/cover no-repeat;
  filter: saturate(1.05) contrast(1.02);
  z-index: 0;
  pointer-events:none;
}
.feature-release::before{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(
    90deg,
    rgba(15,13,33,.85) 0%,
    rgba(15,13,33,.65) 30%,
    rgba(15,13,33,.45) 55%,
    rgba(15,13,33,.30) 70%,
    rgba(15,13,33,.20) 100%
  );
  z-index: 1;
  pointer-events:none;
}
.feature-grid{
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  align-items: center;
  gap: 3rem;
  padding-top: 6rem;
  padding-bottom: 4rem;
}
.feature-copy{
  max-width: 640px;
  padding: 1.5rem 1.8rem;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 16px;
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 40px rgba(0,0,0,.35), 0 0 80px rgba(160,32,240,.18);
}
.feature-title{
  margin: 0 0 .25rem;
  font-size: 2.2rem;
  letter-spacing: .02em;
  text-shadow: 0 0 20px rgba(160,32,240,.28), 0 0 10px rgba(0,255,255,.18);
}
.feature-lead{ margin: .25rem 0 1.25rem; color: var(--muted); }
.feature-embed{ margin-top: 1.25rem; border-radius: 12px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,.45); }
.feature-embed, .feature-embed iframe{ position:relative; z-index:3; pointer-events:auto; }

/* Sections */
.features{ padding:4rem 0; background:var(--card); }
.features h2{ text-align:center; margin-bottom:2rem; font-size:2rem; }
.cards{ display:flex; flex-wrap:wrap; gap:1.5rem; justify-content:center; }
.card{
  background:#221f44; border-radius:12px; padding:2rem; flex:1 1 280px; max-width:350px;
  box-shadow:0 6px 20px rgba(0,0,0,.25); transition:transform .3s;
}
.card:hover{ transform:translateY(-5px); }
.card h3{ margin:0 0 .75rem; font-size:1.3rem; color:#ff9fff; }
.card p{ font-size:.95rem; color:var(--muted); }

.music{ padding:4rem 0; background:var(--bg); text-align:center; }
.music h2{ margin-bottom:1rem; font-size:2rem; }
.music p{ margin-bottom:2rem; color:var(--muted); }
.stream-links{ display:flex; flex-wrap:wrap; justify-content:center; gap:1rem; }
.stream-link{
  display:inline-flex; align-items:center; gap:.5rem; padding:.6rem 1rem; border-radius:30px; font-weight:700;
  text-decoration:none; color:#fff; transition:transform .2s, opacity .2s; box-shadow:0 4px 10px rgba(0,0,0,.3);
}
.stream-link:hover{ transform:translateY(-2px); opacity:var(--hover); }
.stream-link.spotify{ background:#1DB954; }
.stream-link.apple{ background:#A3AAAE; }
.stream-link.amazon{ background:#FF9900; }
.stream-link.youtube{ background:#FF0000; }

/* タブ切替 */
.player-tabs{ display:flex; gap:.5rem; flex-wrap:wrap; justify-content:center; }
.player-tabs .tab{
  appearance:none; border:none; cursor:pointer;
  padding:.55rem .9rem; border-radius:999px; font-weight:700;
  background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.08));
  border:1px solid rgba(255,255,255,.22); color:#fff;
  transition:transform .15s ease, opacity .15s ease;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.player-tabs .tab:hover{ transform:translateY(-1px); opacity:.9; }
.player-tabs .tab.active{ box-shadow:0 0 18px rgba(160,32,240,.35); }

/* パネル表示制御 */
.pane{ display:none; }
.pane.active{ display:block; }

.blog-teaser{ padding:4rem 0; background:var(--card); text-align:center; }
.blog-teaser h2{ font-size:2rem; margin-bottom:.5rem; }
.blog-teaser p{ margin-bottom:2rem; color:var(--muted); }
.teaser-posts{ display:flex; flex-wrap:wrap; gap:1.5rem; justify-content:center; }
.teaser-post{
  background:#221f44; border-radius:12px; padding:1.5rem; flex:1 1 280px; max-width:350px; text-align:left;
  box-shadow:0 6px 20px rgba(0,0,0,.25); display:flex; flex-direction:column;
}
.teaser-post h4{ margin:.2rem 0 .5rem; font-size:1.2rem; color:#ff9fff; }
.teaser-post p{ flex-grow:1; font-size:.95rem; color:var(--muted); }
.read-more{ align-self:flex-start; margin-top:1rem; color:#ff9fff; text-decoration:none; font-weight:700; }
.read-more:hover{ color:#ffd1ff; }
.blog-button-container{ margin-top:2rem; }

.footer{ background:#0c0a1f; padding:2rem 0; text-align:center; }
.footer p{ margin:0; color:var(--muted); }
.footer .social-links{ margin-top:1rem; }
.footer .social-links a{ color:var(--muted); margin:0 .5rem; font-size:1.2rem; transition:color .3s; }
.footer .social-links a:hover{ color:#ff9fff; }

/* Responsive */
@media (max-width:1200px){
  .hero-content{ margin-left:6vw; }
}
@media (max-width:900px){
  .nav a{ margin-left:1rem; }
  .social-links-header{ gap:.75rem; }
  .hero-title{ font-size:2.6rem; }
}
@media (max-width:768px){
  .hero{
    align-items:flex-end;
    background-position:center top;
  }
  .hero-content{
    margin:0 auto 12vh;
    max-width:92%;
  }
  .hero-title{ font-size:2.2rem; }
  .hero-sub{ font-size:1rem; }
  .cards,.teaser-posts{ flex-direction:column; align-items:center; }
  .feature-grid{ grid-template-columns:1fr; }
  .feature-release{ min-height:70vh; }
}
/* ===== Story Section ===== */
.story{
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  overflow: clip;
  background:#0f0d21; /* フォールバック */
}

/* 背景画像（2枚目） */
.story .story-bg{
  position: absolute; inset: 0;
  background: url('../images/story-pc-01.png') center right/cover no-repeat;
  z-index: 0;
  pointer-events: none;
}

/* 左側を少し暗くしてテキスト可読性UP（右に人物が来る前提） */
.story::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(
    90deg,
    rgba(15,13,33,.88) 0%,
    rgba(15,13,33,.72) 25%,
    rgba(15,13,33,.45) 55%,
    rgba(15,13,33,.22) 78%,
    rgba(15,13,33,.12) 100%
  );
  z-index:1;
  pointer-events:none;
}

.story-grid{
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: 1.05fr .95fr; /* 左=テキスト、右=余白/背景 */
  gap: 3rem;
  width:100%;
  padding: 6rem 0 4rem; /* ナビ固定分の余白 */
}

.story-copy{
  max-width: 720px;
  padding: 1.6rem 2rem;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 16px;
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 40px rgba(0,0,0,.35), 0 0 80px rgba(160,32,240,.18);
}

.story-title{
  margin: 0 0 .4rem;
  font-size: 2.2rem;
  letter-spacing: .02em;
  text-shadow: 0 0 20px rgba(160,32,240,.28), 0 0 10px rgba(0,255,255,.18);
}
.story-lead{
  margin:.3rem 0 1.2rem;
  color: var(--muted);
}

.story-points{
  list-style: none; margin:0; padding:0; display:grid; gap: .9rem;
}
.story-points li{
  background: rgba(15,13,33,.35);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  padding: .9rem 1rem;
}
.story-points h3{
  margin:.1rem 0 .25rem; font-size:1.06rem; color:#ff9fff;
}
.story-points p{
  margin:0; color:var(--muted); font-size:.96rem;
}

.story-cta{ margin-top: 1.2rem; display:flex; gap:.8rem; flex-wrap:wrap; }
.story-cta .btn.listen{ box-shadow:0 0 24px rgba(255,0,0,.35); }
.story-cta .btn.follow{ box-shadow:0 0 24px rgba(160,32,240,.35); }

/* Responsive */
@media (max-width: 1100px){
  .story-grid{ grid-template-columns: 1fr; }
  .story .story-bg{
    background-position: center top;
  }
  .story::before{
    background: linear-gradient(
      180deg,
      rgba(15,13,33,.88) 0%,
      rgba(15,13,33,.55) 45%,
      rgba(15,13,33,.18) 100%
    );
  }
}
@media (max-width: 768px){
  .story{ min-height: 70vh; }
  .story-title{ font-size:1.8rem; }
}
/* ===== About / Features – BEST ===== */
.features{ padding:4rem 0; background:var(--card); }
#about-title{ text-align:left; }

.about-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; margin-bottom:1.25rem;
}
.about-badges{ list-style:none; display:flex; gap:.5rem; margin:0; padding:0; flex-wrap:wrap; }
.about-badges li{
  font-size:.8rem; padding:.25rem .6rem; border-radius:999px; color:#fff;
  background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.08));
  border:1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}

.cards{ display:flex; flex-wrap:wrap; gap:1.25rem; justify-content:center; }
.card{
  background:#221f44; border-radius:14px; padding:1.6rem; flex:1 1 280px; max-width:360px;
  box-shadow:0 6px 20px rgba(0,0,0,.25);
  transition:transform .25s, box-shadow .25s, filter .25s;
  border:1px solid rgba(255,255,255,.08);
}
.card:hover{
  transform:translateY(-6px);
  box-shadow:0 10px 26px rgba(0,0,0,.35), 0 0 30px rgba(160,32,240,.25);
  filter:saturate(1.05);
}
.card h3{ margin:0 0 .5rem; font-size:1.15rem; color:#ff9fff; }
.card p{ margin:0 0 .8rem; color:var(--muted); font-size:.95rem; }

.mini-timeline{ display:flex; gap:.5rem; flex-wrap:wrap; }
.mini-timeline span{
  font-size:.75rem; padding:.2rem .5rem; border-radius:999px; color:#fff;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
}

.about-proof{
  margin-top:1.25rem; text-align:center; color:var(--muted); font-size:.92rem;
  opacity:.9;
}
.about-proof .dot{
  display:inline-block; width:.5rem; height:.5rem; border-radius:50%;
  background: radial-gradient(circle, #a020f0, #00ffff);
  box-shadow:0 0 12px rgba(160,32,240,.45), 0 0 12px rgba(0,255,255,.3) inset;
  margin-right:.5rem; vertical-align:middle;
}

/* responsive */
@media (max-width: 900px){
  .about-head{ flex-direction:column; align-items:flex-start; }
}
.about-catch{
  margin:.4rem 0 1rem;
  font-size:1rem;
  color:var(--muted);
  line-height:1.4;
}
/* ===== Social Section ===== */
.social{
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: center;
  overflow: clip;
  background:#0f0d21;
}
.social .social-bg{
  position:absolute; inset:0;
  background: url('../images/social-pc-01.png') center right/cover no-repeat;
  z-index:0; pointer-events:none;
}
/* 左側の可読性を上げるグラデ */
.social::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background: linear-gradient(90deg,
    rgba(15,13,33,.9) 0%,
    rgba(15,13,33,.72) 30%,
    rgba(15,13,33,.45) 55%,
    rgba(15,13,33,.20) 85%,
    rgba(15,13,33,.12) 100%);
}
.social-grid{
  position:relative; z-index:2;
  display:grid; grid-template-columns: 1.05fr .95fr;
  gap:3rem; width:100%; padding:6rem 0 4rem;
}
.social-copy{
  max-width:720px; padding:1.6rem 2rem;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.18);
  border-radius:16px; backdrop-filter:blur(8px);
  box-shadow:0 10px 40px rgba(0,0,0,.35), 0 0 80px rgba(160,32,240,.18);
}
.social-title{ margin:0 0 .35rem; font-size:2.1rem; letter-spacing:.02em;
  text-shadow:0 0 20px rgba(160,32,240,.28), 0 0 10px rgba(0,255,255,.18); }
.social-lead{ margin:.25rem 0 1rem; color:var(--muted); }

.social-cards{
  display:grid; grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap:.75rem; margin-top:.5rem;
}
.s-card{
  display:flex; align-items:center; gap:.8rem; text-decoration:none; color:#fff;
  padding:.9rem 1rem; border-radius:14px;
  background: rgba(15,13,33,.35);
  border:1px solid rgba(255,255,255,.14);
  transition: transform .2s, box-shadow .2s, background .2s;
}
.s-card i{ font-size:1.3rem; }
.s-card div span{ display:block; color:var(--muted); font-size:.9rem; }
.s-card:hover{
  transform: translateY(-2px);
  box-shadow:0 8px 24px rgba(0,0,0,.35), 0 0 22px rgba(160,32,240,.22);
  background: rgba(255,255,255,.07);
}

/* 各サービスのニュアンス色（控えめの発光） */
.s-card.yt { box-shadow: 0 0 18px rgba(255,0,0,.22) inset; }
.s-card.x { box-shadow: 0 0 18px rgba(255,255,255,.18) inset; }
.s-card.ig { box-shadow: 0 0 18px rgba(193,53,132,.22) inset; }
.s-card.tiktok { box-shadow: 0 0 18px rgba(0,242,234,.22) inset; }

.social-cta{ margin-top:1.1rem; display:flex; gap:.8rem; flex-wrap:wrap; }
.social-cta .btn.listen{ box-shadow:0 0 24px rgba(255,0,0,.35); }
.social-cta .btn.follow{ box-shadow:0 0 24px rgba(160,32,240,.35); }

/* Responsive */
@media (max-width:1100px){
  .social-grid{ grid-template-columns:1fr; }
  .social .social-bg{ background-position:center top; }
  .social::before{
    background: linear-gradient(180deg,
      rgba(15,13,33,.9) 0%,
      rgba(15,13,33,.55) 45%,
      rgba(15,13,33,.18) 100%);
  }
}
@media (max-width:768px){
  .social{ min-height:70vh; }
  .social-cards{ grid-template-columns: 1fr; }
  .social-title{ font-size:1.8rem; }
}
:root{ --footer-h: 88px; }   /* フッター高さを調整 */

body {
  padding-bottom: var(--footer-h); /* フッター分だけ余白確保 */
}

.footer {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: var(--footer-h);
  z-index: 1000;
  background: #0c0a1f; 
  display: flex; align-items: center; justify-content: center;
}
/* ===== Revert to normal footer flow ===== */

/* 1) 以前の fixed/sticky 由来を無効化 */
:root { --footer-h: initial; }
html, body { height: auto !important; }
body {
  /* sticky/fixed対策で付けたものを消す */
  display: block !important;
  flex-direction: initial !important;
  min-height: auto !important;
  padding-bottom: 0 !important;
}

/* 2) フッターは通常フローで表示（SNSの直下に来る） */
.footer{
  position: static !important;   /* fixed/absolute を打ち消し */
  margin-top: 0 !important;
  height: auto !important;
  bottom: auto !important;
  left: auto !important; right: auto !important;
  z-index: 0 !important;
  padding: 24px 0;               /* お好みで */
  background: #0c0a1f;           /* 既存テーマ色に合わせてOK */
}

/* 3) SNSの余白が大きすぎる場合は縮める */
.social{
  min-height: auto !important;   /* 以前の 88vh/100vh を無効化 */
  padding-bottom: 2rem;          /* 余白は控えめに */
}
/* Blog teaserの空白を最小限に（出す場合） */
.blog-teaser { padding: 2.5rem 0; } /* デフォルトの4remが広いなら調整 */

/* 念のため：フッターは通常フローに */
.footer{ position: static; margin-top: 0; height: auto; }

/* 念のため：以前のfixed用の下余白を無効化 */
body{ padding-bottom: 0; }

/* SNSセクションは高さをコンテンツ依存に */
.social{ min-height: auto; }
/* ==== Blog Section ==== */
.blog {
  padding: 80px 20px;
  background: #0f0d21;
  color: #fff;
  text-align: center;
}

.blog h2 {
  font-size: 2.5rem;
  margin-bottom: 10px;
}

.blog p {
  font-size: 1.1rem;
  margin-bottom: 40px;
  color: #ccc;
}

/* 特集記事 */
.blog-feature {
  margin-bottom: 50px;
  position: relative;
}

.blog-feature img {
  width: 100%;
  border-radius: 16px;
  object-fit: cover;
  max-height: 400px;
}

.feature-link {
  text-decoration: none;
  color: inherit;
  display: block;
  position: relative;
}

.feature-content {
  position: absolute;
  bottom: 20px;
  left: 20px;
  text-align: left;
  background: rgba(0,0,0,0.6);
  padding: 20px;
  border-radius: 12px;
}

.feature-content h3 {
  font-size: 1.8rem;
  margin-bottom: 10px;
}

.feature-content p {
  margin-bottom: 10px;
}

.feature-content .btn {
  background: #7b5cff;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: bold;
}

/* 最新記事カード */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.blog-card {
  background: #1a1633;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.blog-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.blog-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.5);
}

.card-content {
  padding: 15px;
  text-align: left;
}

.card-content h4 {
  margin-bottom: 8px;
  font-size: 1.2rem;
  color: #fff;
}

.card-content p {
  color: #aaa;
  font-size: 0.95rem;
}
/* ===== Blog page ===== */
.page-blog .navbar{ background: rgba(15,13,33,.85); }

/* Hero */
.blog-hero{
  position: relative; overflow: hidden;
  padding: 6rem 0 3rem;
  background: radial-gradient(1200px 400px at 10% -20%, rgba(160,32,240,.35), transparent),
              radial-gradient(1000px 360px at 90% 0%, rgba(0,255,255,.25), transparent),
              #0f0d21;
}
.blog-hero .lead{ color: var(--muted); margin:.3rem 0 1rem; }
.blog-hero .blog-hero-actions{ display:flex; gap:.6rem; flex-wrap:wrap; }

/* Layout */
.blog-layout{
  display: grid; grid-template-columns: minmax(0, 1.1fr) 360px;
  gap: 1.5rem; padding: 2rem 0 3rem;
}
@media (max-width: 1024px){
  .blog-layout{ grid-template-columns: 1fr; }
}

/* Posts */
.post{ background:#221f44; border:1px solid rgba(255,255,255,.12); border-radius:16px;
  box-shadow:0 6px 18px rgba(0,0,0,.25); overflow:hidden; }
.post .thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.post .content{ padding:1rem 1.1rem 1.1rem; }
.post .meta{ display:flex; gap:.6rem; align-items:center; color:var(--muted); font-size:.9rem; }
.post .meta .badge{
  display:inline-block; padding:.16rem .5rem; border-radius:999px; font-size:.75rem; color:#fff;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
}
.post h2, .post h3{ margin:.35rem 0 .35rem; }
.post .excerpt{ color:var(--muted); margin:0 0 .6rem; }
.post .readmore{ color:#fff; text-decoration:none; font-weight:700; }
.post .readmore i{ margin-left:.25rem; }

/* Feature */
.post.feature{
  display:grid; grid-template-columns: 1.1fr 1fr; gap:1rem; align-items:stretch;
}
.post.feature .thumb{ height:100%; }
.post.feature .thumb img{ height:100%; min-height:260px; }
@media (max-width: 900px){
  .post.feature{ grid-template-columns: 1fr; }
}

/* Card */
.post.card{ display:grid; grid-template-columns: 280px 1fr; gap:1rem; }
.post.card .thumb{ height:100%; min-height:180px; }
@media (max-width:700px){
  .post.card{ grid-template-columns: 1fr; }
  .post.card .thumb{ min-height:180px; }
}

/* Pager */
.pager{ display:flex; gap:.5rem; justify-content:center; align-items:center; margin-top:1rem; }
.pager a, .pager span{
  padding:.45rem .8rem; border-radius:999px; border:1px solid rgba(255,255,255,.16);
  background:#221f44; color:#fff; text-decoration:none;
}
.pager .disabled{ opacity:.45; pointer-events:none; }

/* Sidebar */
.blog-side{ display:flex; flex-direction:column; gap:1rem; }
.glassy{
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.18);
  border-radius:16px; backdrop-filter:blur(8px); padding:1rem;
}
.glassy h4{ margin:.1rem 0 .6rem; }
.chips{ list-style:none; margin:0; padding:0; display:flex; gap:.4rem; flex-wrap:wrap; }
.chip{
  appearance:none; border:none; cursor:pointer; color:#fff;
  padding:.35rem .7rem; border-radius:999px; font-weight:700;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
}
.chip.active{ box-shadow:0 0 18px rgba(160,32,240,.35); }
.mini-list{ list-style:none; margin:0; padding:0; display:grid; gap:.45rem; }
.mini-list a{ text-decoration:none; color:#fff; display:flex; gap:.5rem; align-items:center; }
.mini-list span{ width:1.4rem; text-align:center; }
.follow-row{ display:flex; gap:.5rem; }
.sbtn{ width:40px; height:40px; display:grid; place-items:center; border-radius:10px; color:#fff; text-decoration:none; background:#221f44; border:1px solid rgba(255,255,255,.12); }
.sbtn.yt{ box-shadow:0 0 16px rgba(255,0,0,.25) inset; }
.sbtn.x{ box-shadow:0 0 16px rgba(255,255,255,.18) inset; }
.sbtn.ig{ box-shadow:0 0 16px rgba(193,53,132,.25) inset; }

/* ==== Blog page polished ==== */
.page-blog .navbar{ background: rgba(15,13,33,.85); }

.blog-hero{
  padding: 6rem 0 3rem;
  background:
    radial-gradient(1200px 480px at 10% -10%, rgba(160,32,240,.35), transparent),
    radial-gradient(1000px 420px at 95% -20%, rgba(0,255,255,.28), transparent),
    #0f0d21;
}
.blog-hero .lead{ color: var(--muted); margin:.3rem 0 0; }

/* layout */
.blog-wrap{ display:grid; gap:1.25rem; padding:2rem 0 3rem; }

/* common post */
.post{
  background:#221f44;
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  box-shadow:0 8px 26px rgba(0,0,0,.28);
  overflow:hidden;
}
.post .thumb{ position:relative; display:block; }
.post .thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.thumb-fallback{
  height:220px;
  background:
    linear-gradient(120deg, rgba(160,32,240,.22), rgba(0,255,255,.18)),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}
.post .content{ padding:1rem 1.2rem 1.25rem; }
.post .meta{ display:flex; gap:.6rem; align-items:center; color:var(--muted); font-size:.9rem; }
.post .badge{
  display:inline-block; padding:.18rem .55rem; border-radius:999px; font-size:.75rem; color:#fff;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
}
.post h2, .post h3{ margin:.4rem 0 .4rem; }
.post .excerpt{ color:var(--muted); margin:0 0 .7rem; }
.post .readmore{ color:#fff; text-decoration:none; font-weight:700; }
.post .btn.ghost{
  display:inline-block; text-decoration:none; color:#fff; font-weight:700;
  padding:.5rem .9rem; border-radius:10px;
  background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.18);
  transition:transform .15s;
}
.post .btn.ghost:hover{ transform:translateY(-2px); }

/* feature */
.post.feature{ display:grid; grid-template-columns: 1.1fr 1fr; gap:1rem; }
.post.feature .thumb{ min-height:260px; }
@media (max-width: 900px){ .post.feature{ grid-template-columns:1fr; } }

/* grid */
.post-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:1rem; }
.post.card .thumb .thumb-fallback{ height:180px; }
.post.card:hover{ transform: translateY(-3px); transition: transform .2s, box-shadow .2s; box-shadow:0 12px 30px rgba(0,0,0,.35); }
@media (max-width: 1024px){ .post-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){ .post-grid{ grid-template-columns: 1fr; } }
/* ブログカード共通 */
.blog-card {
  display: flex;
  flex-direction: column;   /* 縦並び */
  justify-content: space-between;
  padding: 1rem;
  border-radius: 1rem;
  background: linear-gradient(135deg, #1c1c3c, #2a2a55);
  color: #fff;
  overflow: hidden;
}

.blog-card img {
  width: 100%;
  height: 160px;            /* 高さ統一 */
  object-fit: cover;
  border-radius: 0.75rem;
  margin-bottom: 0.75rem;
}

/* カード内テキスト */
.blog-card h3 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* タイトルは2行で切る */
  -webkit-box-orient: vertical;
}

.blog-card p {
  font-size: 0.85rem;
  line-height: 1.4;
  color: #ccc;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 本文は3行で切る */
  -webkit-box-orient: vertical;
}

/* カテゴリタグ */
.blog-card .tag {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: rgba(0,0,0,0.6);
  padding: 0.2rem 0.5rem;
  border-radius: 0.5rem;
  font-size: 0.7rem;
}
/* ===== Blog 可読性・レイアウト安定パッチ ===== */

/* 1) ページの最大幅をきっちり設定（広すぎ対策） */
.container,
.blog-wrap.container,
.page-blog .navbar .container,
.blog-hero .container {
  max-width: 1120px; /* お好みで 1040〜1200 */
  margin-inline: auto;
  padding-inline: 16px;
}

/* 2) 文字のコントラストとレンダリングを安定化 */
.page-blog {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* 3) 見出し・本文のサイズを画面幅に応じてclamp（デカ画面で巨大化しすぎない） */
.blog-hero h1 { font-size: clamp(24px, 2.2vw, 36px); }
.blog-hero .lead { font-size: clamp(14px, 1.2vw, 18px); }

.post h2 { font-size: clamp(18px, 1.6vw, 26px); }
.post h3 { font-size: clamp(16px, 1.3vw, 22px); }
.post .excerpt,
.post .content { font-size: clamp(14px, 1.05vw, 16.5px); line-height: 1.55; }

/* 4) 行の長さ（measure）を制御：一行が長すぎると“潰れて”見える */
.post .content { max-width: 68ch; }           /* 本文は68字程度で折り返す */
.post.feature .content { max-width: 60ch; }   /* 特集は少し短めで締まる */

/* 5) テキストの折返しを賢く */
.post h2 a, .post h3 a {
  text-wrap: balance;  /* 見出しの改行を綺麗に */
}
.post .excerpt {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* 本文プレビューは3行で切る */
}

/* 6) グリッドが広い画面で伸びすぎないよう列幅を下限指定 */
.post-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(280px, 1fr)); /* 1カラムの最小幅を確保 */
  gap: 16px;
}

/* 7) カード内のサムネ高さを固定して比率崩れを防止 */
.post.card .thumb .thumb-fallback { height: 180px; }
.post.card .thumb img { height: 180px; object-fit: cover; }

/* 8) 特集の左右バランス：テキストが横に広がり過ぎないように */
.post.feature {
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 0.8fr);
  align-items: stretch;
}
@media (max-width: 1024px){
  .post.feature { grid-template-columns: 1fr; }
  .post .content { max-width: none; } /* タブレット以下は幅制限を解除 */
}

/* 9) 画像がギラついて文字が霞む場合の軽い影（必要ならコメントアウト） */
.post .content h2, .post .content h3 {
  text-shadow: 0 0 1px rgba(0,0,0,.15);
}

/* 10) ほんの少しだけ文字を締めて、にじみ軽減（日本語は0〜0.02em程度が無難） */
.post .content, .blog-hero, .post h2, .post h3 {
  letter-spacing: 0.01em;
}
/* ==== BLOG: カードの縦潰れ・縦書き化対策（強制一列） ==== */

/* カードは常に「画像→テキスト」の1カラムにする */
.post.card{
  display: grid !important;
  grid-template-columns: 1fr !important;
}

/* 画像はカードの先頭に全幅で配置、一定の高さでトリミング */
.post.card .thumb{
  grid-column: 1 / -1;
}
.post.card .thumb img,
.post.card .thumb .thumb-fallback{
  width: 100%;
  height: 180px;          /* お好みで 160–220px */
  object-fit: cover;
}

/* テキスト側は幅制限を外す（「max-width: 68ch」などを無効化） */
.post.card .content{
  max-width: none !important;
}

/* 念のため “横書き” を明示（どこかで継承されていた時の保険） */
.post.card .content,
.post.card .content *{
  writing-mode: horizontal-tb;
  text-orientation: mixed;
  white-space: normal;
}

/* グリッドの各列幅を確保：広い画面でも極細列が生まれないように */
.post-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(300px, 1fr)); /* 列の最小幅を明示 */
  gap: 16px;
}
@media (max-width: 1024px){
  .post-grid{ grid-template-columns: repeat(2, minmax(280px, 1fr)); }
}
@media (max-width: 640px){
  .post-grid{ grid-template-columns: 1fr; }
}

/* 見出し・本文は行数で切って整える（任意） */
.post.card h3{
  margin: .35rem 0 .25rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.post.card .excerpt{
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
/* ブログ背景 */
body.page-blog {
  background: url("/assets/images/blog-bg.png") no-repeat center center fixed;
  background-size: cover;
  background-attachment: fixed;
  color: #fff;
}

/* 読みやすさ用のオーバーレイ */
body.page-blog::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(10, 10, 30, 0.6); /* 濃紺の透明レイヤー */
  z-index: -1;
}
/* ブログカード全体 */
.blog-card {
  background: rgba(15, 15, 35, 0.8);  /* 半透明の濃紺で背景を透かす */
  backdrop-filter: blur(8px);          /* 背景をぼかしてガラス風 */
  -webkit-backdrop-filter: blur(8px);  /* Safari対策 */
  border-radius: 16px;                 /* 角丸を大きめに */
  box-shadow: 0 4px 12px rgba(0,0,0,0.4); /* カードに浮遊感 */
  color: #fff;                         /* 文字は白基調 */
}

/* タイトルや本文の文字にシャドウ追加 */
.blog-card h2,
.blog-card p,
.blog-card span {
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6); /* 読みやすさUP */
}
.blog-card a {
  color: #4fd1ff;  /* 明るいシアンで未来感 */
  font-weight: 600;
  text-decoration: none;
}

.blog-card a:hover {
  color: #76e0ff;  /* ホバーでさらに輝く水色 */
  text-decoration: underline;
}
.blog-card h3,
.blog-card p,
.blog-hero h1,
.blog-hero p {
  color: #f0f0f0; /* 柔らかい白で読みやすい */
}

.blog-card a,
.post .readmore,
.post .btn {
  color: #4fd1ff; /* シアンで未来感をプラス */
  font-weight: 600;
  text-decoration: none;
}

.blog-card a:hover,
.post .readmore:hover,
.post .btn:hover {
  color: #ffffff; /* ホバーで純白にしてアクセント */
  text-decoration: underline;
}
/* 見出しの色を白系に統一 */
body.page-blog h1,
body.page-blog h2,
body.page-blog h3 {
  color: #f0f0f0 !important;
}

/* タイトルリンクならさらに強制 */
body.page-blog h2 a,
body.page-blog h3 a {
  color: #f0f0f0 !important;
  text-decoration: none;
}
/* ===== Article Hero: 背景画像＋文字オーバーレイ ===== */
.article-hero.hero-cover {
  position: relative;
  isolation: isolate;            /* オーバーレイの重なり順を安全に */
  min-height: clamp(46vh, 56vh, 64vh);
  display: flex;
  align-items: flex-end;         /* 文字を下寄せ（雑誌っぽく） */
  padding: clamp(48px, 8vw, 80px) 0;
  color: #fff;
  overflow: hidden;
}

/* 背景画像 */
.article-hero.hero-cover::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 80% at 70% 20%, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.25) 60%, rgba(0,0,0,0.5) 100%),
    var(--hero) center / cover no-repeat;
  z-index: -2;
  transform: translateZ(0);
}

/* 下からのグラデで文字を読みやすく */
.article-hero.hero-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(8, 10, 22, 0.85) 0%,
    rgba(8, 10, 22, 0.55) 35%,
    rgba(8, 10, 22, 0.15) 70%,
    rgba(8, 10, 22, 0.00) 100%
  );
  z-index: -1;
}

/* テキストラップ */
.article-hero .hero-text {
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 28px);
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
}

/* タイトル・サブコピー */
.article-hero .hero-text h1 {
  font-size: clamp(22px, 3.2vw, 40px);
  line-height: 1.25;
  margin: 8px 0 10px;
  color: #fff;
}
.article-hero .hero-text .sub {
  font-size: clamp(14px, 1.25vw, 18px);
  line-height: 1.75;
  max-width: 80ch;
  color: #eef1ff;
}

/* メタ */
.article-hero .meta {
  opacity: 0.95;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  font-size: 14px;
}
.article-hero .badge {
  background: rgba(79, 209, 255, 0.18);
  color: #bfeeff;
  border: 1px solid rgba(79,209,255,0.35);
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: .02em;
}

/* DIGITAL ANGEL アクセント */
.article-hero .tagline {
  margin-top: 14px;
  font-size: clamp(12px, 1vw, 14px);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #dff7ff;
  display: inline-flex;
  gap: .5em;
  align-items: center;
  background: rgba(79,209,255,0.12);
  border: 1px solid rgba(79,209,255,0.35);
  padding: 6px 10px;
  border-radius: 999px;
}
.article-hero .tagline span {
  opacity: .85;
  letter-spacing: .12em;
}

/* モバイル最適化 */
@media (max-width: 640px){
  .article-hero.hero-cover {
    align-items: flex-end;
    min-height: 52vh;
  }
  .article-hero .hero-text .sub { max-width: none; }
}
/* === Blog Feature Thumb: 画像を枠いっぱいに === */
.post .thumb {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background: linear-gradient(135deg, #30244f 0%, #1d2843 100%); /* 画像未読込時の下地 */
}
.post .thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 16 / 9;          /* ← 帯が出ないよう固定比率に */
}

/* Feature レイアウトの安全マージン（崩れ防止） */
.post.feature {
  display: grid;
  grid-template-columns: minmax(280px, 48%) 1fr;
  gap: clamp(20px, 3vw, 32px);
  align-items: center;
}
@media (max-width: 980px){
  .post.feature { grid-template-columns: 1fr; }
}
/* Popular posts grid */
.popular-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: clamp(16px, 2.5vw, 28px);
  margin-top: 1rem;
}
@media (max-width: 980px){
  .popular-grid{ grid-template-columns: 1fr; }
}

/* Card skeleton while loading */
.card-skeleton{
  border-radius: 18px;
  background: linear-gradient(135deg,#33254f 0%, #1b2540 100%);
  height: 260px;
  position: relative;
  overflow: hidden;
}
.card-skeleton::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);
  transform: translateX(-100%);
  animation: shimmer 1.2s infinite;
}
@keyframes shimmer{ to{ transform: translateX(100%);} }

/* Popular card */
.p-card{
  display:block;
  border-radius: 18px;
  overflow:hidden;
  background: rgba(14,16,32,.65);
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  backdrop-filter: blur(6px);
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.p-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0,0,0,.35);
  background: rgba(14,16,32,.75);
}
.p-card .thumb{ aspect-ratio: 16 / 9; overflow:hidden; background:#1c2543;}
.p-card .thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

.p-card .content{ padding: 14px 16px 18px; }
.p-card .meta{
  display:flex; gap:.5rem; align-items:center;
  font-size:.85rem; color: var(--muted, #9fb0d1);
}
.p-card .badge{
  display:inline-block; font-size:.75rem;
  padding:.25rem .5rem; border-radius:999px;
  background: rgba(129, 140, 248, .18);
  color:#cfd8ff;
}
.p-card h3{
  margin:.4rem 0 .35rem;
  font-size: clamp(1.05rem, 1.2vw + .6rem, 1.25rem);
  line-height:1.35;
}
.p-card .excerpt{
  color: var(--muted, #a9b3d2);
  font-size: .95rem;
}

/* CTA */
.blog-cta{ margin-top: 1.25rem; text-align:center; }
/* ==== BLOG: 見やすさちょい足し ===================================== */

/* 画像の読みやすさ向上（下から薄いグラデを敷く） */
.blog-card .thumb { position: relative; overflow: hidden; }
.blog-card .thumb::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(to top, rgba(8,8,20,.55) 0%, rgba(8,8,20,0) 60%);
  border-radius: inherit;
  pointer-events:none;
}

/* 画像が無い時のフォールバック（既にあれば不要） */
.blog-card .thumb .thumb-fallback{
  background: radial-gradient(120% 120% at 10% 10%, #5d2a86 0%, #1a2340 60%, #101425 100%);
  width: 100%; height: 100%; border-radius: inherit;
}
/* BLOG: 画像オーバーレイで文字の視認性UP */
.blog-card .thumb,
.post.feature .thumb,
.post.card .thumb { position: relative; overflow: hidden; border-radius: inherit; }
.blog-card .thumb::after,
.post.feature .thumb::after,
.post.card .thumb::after {
  content:""; position:absolute; inset:0;
  background: linear-gradient(to top, rgba(8,8,20,.55) 0%, rgba(8,8,20,0) 60%);
  pointer-events:none;
}
.thumb-fallback{
  width:100%; height:100%;
  background: radial-gradient(120% 120% at 10% 10%, #5d2a86 0%, #1a2340 60%, #101425 100%);
  border-radius:inherit;
}
/* 画像オーバーレイで文字の視認性UP（Blog/Feature/Card共通） */
.blog-card .thumb,
.post.feature .thumb,
.post.card .thumb { position: relative; overflow: hidden; border-radius: inherit; }
.blog-card .thumb::after,
.post.feature .thumb::after,
.post.card .thumb::after {
  content:""; position:absolute; inset:0;
  background: linear-gradient(to top, rgba(8,8,20,.55) 0%, rgba(8,8,20,0) 60%);
  pointer-events:none; /* クリック妨害を防ぐ */
}
.thumb-fallback{
  width:100%; height:100%;
  background: radial-gradient(120% 120% at 10% 10%, #5d2a86 0%, #1a2340 60%, #101425 100%);
  border-radius:inherit;
}

/* 人気カードグリッド(トップ) */
.popular-grid{
  display:grid; gap:clamp(16px,2.5vw,28px);
  grid-template-columns: repeat(3, minmax(0,1fr));
}
@media (max-width: 980px){ .popular-grid{ grid-template-columns: 1fr; } }
.card-skeleton{
  border-radius:18px; background: linear-gradient(135deg,#33254f 0%, #1b2540 100%);
  height:260px; position:relative; overflow:hidden;
}
.card-skeleton::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);
  transform: translateX(-100%); animation: shimmer 1.2s infinite;
}
@keyframes shimmer{ to{ transform: translateX(100%);} }
// main.js — cleaned & mobile-ready
// Adds dynamic interactions for the ARIA website

document.addEventListener('DOMContentLoaded', () => {
  const navbar = document.querySelector('.navbar');
  const navLinks = document.querySelectorAll('.nav a');

  // Change navbar background on scroll
  window.addEventListener('scroll', () => {
    if (window.scrollY > 50) {
      navbar.style.background = 'rgba(15, 13, 33, 0.9)';
    } else {
      navbar.style.background = 'rgba(0, 0, 0, 0.6)';
    }
  });

  // Smooth scroll for anchor links
  navLinks.forEach(link => {
    link.addEventListener('click', (e) => {
      const href = link.getAttribute('href');
      if (href && href.startsWith('#')) {
        e.preventDefault();
        const target = document.querySelector(href);
        if (target) target.scrollIntoView({ behavior: 'smooth' });
      }
    });
  });

  // ===== Mobile drawer menu =====
  const drawer = document.getElementById('mobileMenu');
  const openBtn = document.querySelector('.menu-toggle');
  const closeBtn = document.querySelector('.menu-close');

  function openDrawer(){
    drawer.hidden = false;
    document.body.style.overflow = 'hidden';
    openBtn?.setAttribute('aria-expanded', 'true');
  }
  function closeDrawer(){
    drawer.hidden = true;
    document.body.style.overflow = '';
    openBtn?.setAttribute('aria-expanded', 'false');
  }
  openBtn?.addEventListener('click', openDrawer);
  closeBtn?.addEventListener('click', closeDrawer);
  drawer?.addEventListener('click', (e)=>{
    if(e.target === drawer) closeDrawer(); // click outside to close
  });
  window.addEventListener('keydown', (e)=>{ if(e.key === 'Escape') closeDrawer(); });

  // ===== Player tabs =====
  const tabs = document.querySelectorAll('.player-tabs .tab');
  const panes = document.querySelectorAll('.feature-embed .pane');
  tabs.forEach(btn => {
    btn.addEventListener('click', () => {
      tabs.forEach(t => t.classList.remove('active'));
      btn.classList.add('active');
      const target = document.querySelector(btn.dataset.target);
      panes.forEach(p => p.classList.remove('active'));
      target?.classList.add('active');
    });
  });
});

// ===== Popular posts loader (single source of truth) =====
(async () => {
  const root = document.querySelector('#popular-posts');
  if (!root) return;
  try {
    const res = await fetch('/blog/posts.json', { cache: 'no-store' });
    if (!res.ok) throw new Error('posts.json not found');
    const posts = await res.json();

    posts.sort((a, b) => {
      const va = Number(a.views || 0), vb = Number(b.views || 0);
      if (vb !== va) return vb - va;
      return new Date(b.date) - new Date(a.date);
    });

    const top = posts.slice(0, 3);
    root.innerHTML = top.map(p => {
      const href = p.url || `/blog/${p.slug}/`;
      const cover = p.cover || '/assets/images/blog-intro.png';
      const date  = p.date ? new Date(p.date).toLocaleDateString('ja-JP') : '';
      const badge = (p.tags && p.tags[0]) ? p.tags[0] : 'Blog';
      return `
        <a class="p-card" href="${href}">
          <div class="thumb">
            <img src="${cover}" alt="${p.title || ''}" loading="lazy">
          </div>
          <div class="content">
            <div class="meta"><span class="badge">${badge}</span>${date ? `<time>${date}</time>`:''}</div>
            <h3>${p.title || ''}</h3>
            <p class="excerpt">${p.excerpt || ''}</p>
          </div>
        </a>`;
    }).join('');
  } catch (e) {
    root.innerHTML = `
      <a class="p-card" href="/blog/">
        <div class="thumb"><img src="/assets/images/blog-intro.png" alt="Blog"></div>
        <div class="content">
          <div class="meta"><span class="badge">Blog</span></div>
          <h3>ブログへ</h3>
          <p class="excerpt">最新の記事を一覧でチェック。</p>
        </div>
      </a>`;
  }
})();
/* ヘッダーの基本レイアウト */
.navbar { position: sticky; top:0; z-index:3000; }
.navbar .container{ display:flex; align-items:center; gap:12px; }
.navbar .logo{ font-weight:700; }
.navbar .nav{ margin-left:auto; display:flex; gap:20px; white-space:nowrap; } /* ← これで「ブログ」が2段にならない */
.social-links-header{ margin-left:8px; }

/* ハンバーガーの見た目 */
.menu-toggle{
  display:none; /* PCで非表示 */
  width:40px; height:40px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.08);
  color:#fff; align-items:center; justify-content:center;
}

/* モバイル時：ナビとSNSを消し、ハンバーガーを表示（強制） */
@media (max-width: 900px){
  .navbar .nav, .navbar .social-links-header{ display:none !important; }
  .navbar .menu-toggle{ display:inline-flex !important; }
}

/* ===== ドロワー（はみ出し・ずれ防止の堅牢版） ===== */
.nav-drawer{
  position:fixed; inset:0; z-index:3200;
  display:grid; grid-template-columns:min(86vw,320px) 1fr;
  opacity:0; pointer-events:none; transition:opacity .2s ease;
  background:rgba(8,10,22,.55); backdrop-filter:blur(6px);
}
.nav-drawer.is-open{ opacity:1; pointer-events:auto; }
.nav-drawer__inner{
  height:100%; background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border-right:1px solid rgba(255,255,255,.16); box-shadow:0 10px 40px rgba(0,0,0,.45);
  padding:16px 18px; transform:translateX(-100%); transition:transform .25s ease;
}
.nav-drawer.is-open .nav-drawer__inner{ transform:translateX(0); }
/* PCではナビとSNSを強制表示、ハンバーガーは隠す */
@media (min-width: 901px){
  .navbar .nav, .navbar .social-links-header{ display:flex !important; }
  .navbar .nav{ gap:20px; white-space:nowrap; }
  .menu-toggle{ display:none !important; }
}
/* 既存のスタイルがある場合は、そのまま使い続けてOK。
   下記は“上書きしても破綻しない”最小プレースホルダです。 */

   :root {
    --bg: #0b0f1a;
    --fg: #ffffff;
    --muted: #cbd5e1;
    --glass: rgba(255,255,255,.08);
    --glass-bd: rgba(255,255,255,.16);
  }
  
  html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:Poppins,'Noto Sans JP',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';}
  a{color:inherit;text-decoration:none}
  .container{max-width:1100px;margin:0 auto;padding:24px}
  .hero{display:grid;place-items:center;text-align:center;padding:72px 16px;position:relative}
  .hero-title{font-size:56px;margin:0 0 8px}
  .hero-sub{opacity:.85;margin:0 0 20px}
  .btn{display:inline-flex;align-items:center;gap:.5em;padding:10px 14px;border-radius:12px;border:1px solid var(--glass-bd)}
  .btn.glass{background:var(--glass)}
  .row{display:flex;flex-wrap:wrap;gap:10px}
  .feature-grid,.story-grid,.social-grid{display:block}
  .stream-link{display:inline-flex;align-items:center;gap:.5em;padding:8px 12px;border-radius:10px;border:1px solid var(--glass-bd);background:var(--glass)}
  .popular-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
  .card-skeleton{height:140px;background:linear-gradient(90deg,rgba(255,255,255,.06),rgba(255,255,255,.02),rgba(255,255,255,.06));border-radius:14px}
  .footer{border-top:1px solid var(--glass-bd);margin-top:48px}
  .social-links{display:flex;gap:12px}
  @media (max-width:900px){
    .popular-grid{grid-template-columns:1fr}
    .hero-title{font-size:40px}
  }