/* ==================== 基本設定 ==================== */
:root{
  --pink:#ff5fa2; --bg:#fff7fb; --card:#fff; --ink:#1f1f1f; --muted:#666;
  --radius:14px; --shadow:0 10px 24px rgba(0,0,0,.08);
}
*{ box-sizing:border-box; }
html,body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Noto Sans JP",system-ui,sans-serif; line-height:1.75;
}
a{ text-decoration:none; color:inherit; }

/* ==================== Header ==================== */
.header{
  position:sticky; top:0; z-index:50; background:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
}
.header .inner{
  max-width:1100px; margin:auto;
  padding:10px max(16px, env(safe-area-inset-right))
          10px max(16px, env(safe-area-inset-left));
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}

/* ロゴ（自然なサイズ） */

.logo {
  font-size: 24px;
  font-weight: 900;
  color: #ff5fa2;
  text-shadow: 0 2px 4px rgba(255,95,162,0.2);
  background: linear-gradient(90deg, #ff9ecf, #ff5fa2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

/* PCナビ */
.nav{ display:flex; gap:22px; white-space:nowrap; }
.nav a{ font-weight:700; }
.nav a:hover{ color:var(--pink); }

/* ==================== ハンバーガー（メニュー文字あり） ==================== */
.hamburger{
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  background:linear-gradient(90deg,#ff9ecf,#ff5fa2);
  color:#fff; border:none; border-radius:999px;
  padding:10px 18px; font-weight:700; letter-spacing:.3px;
  box-shadow:0 4px 12px rgba(255,95,162,.25);
  transition:opacity .2s ease, transform .2s ease;
  position:fixed; top:12px; right:14px; z-index:1001;
  backdrop-filter:blur(8px);
}
.hamburger:hover{ opacity:.9; transform:translateY(-1px); }

/* 三本線（.bars 推奨／旧HTMLの aria-hidden 対応） */
.hamburger .bars,
.hamburger > span[aria-hidden="true"]{
  position:relative; display:block; width:24px; height:3px;
  background:#fff; border-radius:2px;
}
.hamburger .bars::before,
.hamburger .bars::after,
.hamburger > span[aria-hidden="true"]::before,
.hamburger > span[aria-hidden="true"]::after{
  content:""; position:absolute; left:0; width:24px; height:3px;
  background:#fff; border-radius:2px;
}
.hamburger .bars::before,
.hamburger > span[aria-hidden="true"]::before{ top:-7px; }
.hamburger .bars::after,
.hamburger > span[aria-hidden="true"]::after{ top:7px; }

/* 「メニュー」ラベル */
.hamburger .label{
  margin-left:8px; font-weight:800; font-size:14px; line-height:1;
}

/* 開いた時の×表示 */
.hamburger[aria-expanded="true"] .bars,
.hamburger[aria-expanded="true"] > span[aria-hidden="true"]{ background:transparent; }
.hamburger[aria-expanded="true"] .bars::before,
.hamburger[aria-expanded="true"] > span[aria-hidden="true"]::before{
  transform:rotate(45deg); top:0;
}
.hamburger[aria-expanded="true"] .bars::after,
.hamburger[aria-expanded="true"] > span[aria-hidden="true"]::after{
  transform:rotate(-45deg); top:0;
}

/* 擬似要素でのテキストは使わない */
.hamburger::after{ content:none !important; }

/* ==================== モバイルドロワー ==================== */
.nav-panel{
  display:none; position:fixed; top:64px; right:12px;
  width:78vw; max-width:320px; background:#fff; border-radius:14px;
  box-shadow:0 12px 32px rgba(0,0,0,.14);
  padding:14px; gap:12px; flex-direction:column; z-index:9999;
}
.nav-panel a{ padding:10px 6px; font-weight:700; }
.nav-panel.is-open{ display:flex; }

/* ==================== Layout / Components ==================== */
.container{ max-width:1100px; margin:auto; padding:24px 16px; }
.section-title{
  font-size:24px; font-weight:900; color:var(--pink);
  margin:0 0 18px; text-align:center;
}
.card{ background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px; }
.grid{ display:grid; gap:18px; }
.cols-2{ grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }

/* ==================== Hero ==================== */
.hero{
  padding:36px 16px;
  background:linear-gradient(180deg,#ffe1ef 0%,#fff 100%);
  text-align:center;
}
.hero h1{
  margin:0 0 6px;
  font-size:clamp(22px,5vw,38px);
  font-weight:900; color:var(--pink);
}
.hero p{ margin:0; color:var(--muted); }

/* ==================== Buttons ==================== */
.btn{
  display:inline-block; padding:10px 16px; border-radius:999px;
  background:var(--pink); color:#fff; font-weight:700;
  transition:opacity .2s ease, transform .2s ease;
}
.btn.sub{ background:#fff; color:var(--pink); border:2px solid var(--pink); }
.btn:hover{ opacity:.95; transform:translateY(-1px); }

/* ==================== Characters ==================== */
.char-card{ transition:transform .2s ease, box-shadow .2s ease; }
@media(hover:hover){
  .char-card:hover{ transform:translateY(-4px); box-shadow:0 12px 28px rgba(255,95,162,.25); }
}
.char-img{
  display:block; margin:0 auto 10px; width:auto; max-width:260px; height:auto;
  border-radius:12px; box-shadow:0 4px 12px rgba(0,0,0,.08);
}
@media(max-width:600px){ .char-img{ max-width:200px; } }

/* ==================== Video ==================== */
.vgrid{ display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.vbox{ position:relative; padding-top:56.25%; border-radius:12px; overflow:hidden; box-shadow:var(--shadow); }
.vbox iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* ==================== Footer ==================== */
.footer{
  background:#111; color:#fff; text-align:center;
  padding:22px 12px; margin-top:12px; font-size:14px;
}
.footer a{ color:var(--pink); }

/* ==================== レスポンシブ切替 ==================== */
@media (max-width:899.98px){
  .nav{ display:none; }
  .hamburger{ display:inline-flex; }
}
@media (min-width:900px){
  .nav{ display:flex; }
  .hamburger, .nav-panel{ display:none !important; }
}

/* === ロゴ/ヒーロー強制縮小（スマホ） ================== */
@media (max-width:768px){
  /* ヒーロー見出しを小さく */
  .hero h1{
    font-size:clamp(20px, 6.5vw, 28px) !important;
    line-height:1.15 !important;
    margin:16px 0 10px !important;
    text-align:center !important;
  }
  /* 画像ロゴ用の保険 */
  .hero img, .site-logo img{
    max-width:72vw !important; height:auto !important;
    display:block !important; margin:16px auto 12px !important;
  }
}


/* === ロゴが大きすぎる場合の強制リサイズ設定 === */
.hero img,
.hero .logo img,
.logo img {
  max-width: clamp(40px, 40vw, 240px) !important; /* スマホでは小さく、PCでは適度に */
  height: auto !important;
  display: block !important;
  margin: 20px auto 10px !important;
}

/* ヒーロー全体の余白を調整（上に詰める） */
.hero {
  padding-top: 30px !important;
  padding-bottom: 20px !important;
}

/* ヒーロータイトル（もし文字もある場合） */
.hero h1 {
  font-size: clamp(20px, 6vw, 28px) !important;
  margin: 10px 0 !important;
}