:root{
  --brand:#ff6aa7;
  --brand-2:#ffd1e6;
  --text:#212121;
  --muted:#666;
  --bg:#ffffff;
  --panel:#fff7fb;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,'Noto Sans JP',sans-serif;color:var(--text);background:var(--bg)}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1120px;margin-inline:auto;padding:0 20px}
header.nav{position:sticky;top:0;z-index:30;background:linear-gradient(90deg,var(--brand),#ffa3cb);color:#fff;border-bottom:1px solid rgba(0,0,0,.05)}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.brand{display:flex;align-items:center;gap:10px;font-weight:800}
.brand-badge{width:36px;height:36px;border-radius:12px;background:#fff;color:var(--brand);display:grid;place-items:center}
nav.menu{display:flex;gap:min(6vw,28px)}
nav.menu a{color:#fff;opacity:.95}
nav.menu a:hover{opacity:1}
.hero{background:linear-gradient(180deg,var(--panel),#fff);}
.hero-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center;padding:38px 0 20px}
.kicker{color:#ff3f98;font-weight:700;letter-spacing:.08em}
h1{font-size:clamp(28px,4.4vw,52px);line-height:1.1;margin:8px 0 10px}
.lead{color:var(--muted);font-size:clamp(15px,2.2vw,18px)}
.kv{
  aspect-ratio:16/9;
  border-radius:18px;
  background:#eee url('../img/hero.png') center/cover no-repeat;
  border:none;
}
.section{padding:40px 0}
.section h2{font-size:clamp(22px,3.2vw,32px);margin:0 0 6px;color:#ff3f98}
.section p.lead{color:var(--muted);margin:0 0 16px}
.grid{display:grid;gap:16px}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.card{background:#fff;border:1px solid #ffe0f0;border-radius:16px;padding:16px}
.card .ph{background:#fef1f7;border:2px dashed #ffd1e6;border-radius:12px;height:160px;display:grid;place-items:center;color:#ff72ad}
.video-wrap{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;border:1px solid #ffe0f0;background:#000}
.video-wrap iframe,.video-wrap video{position:absolute;inset:0;width:100%;height:100%}
.socials{display:flex;flex-wrap:wrap;gap:12px}
.icon-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;border:1px solid #ffd1e6;background:#fff}
.icon-btn img{width:18px;height:18px}
footer{padding:28px 0;color:var(--muted);border-top:1px solid #ffe0f0}
@media (max-width: 900px){
  nav.menu{display:none}
  .hero-inner{grid-template-columns:1fr}
  .grid.cols-3{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .grid.cols-3{grid-template-columns:1fr}
}
/* === EPISODES YouTubeボタン中央配置 === */
.episodes-youtube.center {
  display: flex;
  justify-content: center;   /* ボタンを中央に */
  margin-top: 28px;
}

.icon-btn.large {
  font-size: 18px;
  padding: 14px 28px;
  background: #ff3f98;
  color: #fff;
  border: none;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  box-shadow: 0 3px 10px rgba(255, 63, 152, 0.25);
  transition: all 0.2s ease;
}

.icon-btn.large img {
  width: 26px;
  height: 26px;
}

.icon-btn.large:hover {
  background: #ff6aa7;
  transform: translateY(-2px);
}

/* === SOCIALセクションは左寄せ固定 === */
.socials.sub-social {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;  /* ← 左寄せに固定 */
  gap: 12px;
  opacity: 0.9;
  margin-top: 12px;
}

.socials.sub-social .icon-btn {
  border-color: #ffe6f2;
  background: #fff;
  opacity: 0.95;
}

.socials.sub-social .icon-btn:hover {
  opacity: 1;
}

/* 9:16 の縦動画枠（YouTube Shorts向け） */
.vertical-video{
  position:relative;
  aspect-ratio:9/16;
  border-radius:16px;
  overflow:hidden;
  border:1px solid #ffe0f0;
  background:#000;
}
.vertical-video iframe{position:absolute;inset:0;width:100%;height:100%}

/* ▼ footerの調整（styles.cssかページ内<style>に追記） */
.footer-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  font-size: 14px;
}

.footer-left .home-link {
  color: var(--muted);
  font-size: 14px;
  opacity: 0.7;
  text-decoration: none;
  transition: opacity 0.2s;
}

.footer-left .home-link:hover {
  opacity: 1;
  text-decoration: underline;
}