/* ====== Cinema Theme Base ====== */
:root{
  --ink:#f8f8f8;
  --bg:#141218;
  --card:#1e1b23;
  --muted:#b6b6c1;
  --acc:#e11d48;
  --gold:#ffc857;
  --velvet:#2a0f14;
  --radius:16px;
  --shadow:0 10px 28px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"M PLUS Rounded 1c",system-ui,Segoe UI,Arial,sans-serif;
}

/* Utils */
.wrap{max-width:1200px;margin:0 auto;padding:18px}
.row{display:flex;align-items:center}
.between{justify-content:space-between}

/* ===== Header ===== */
.cinema-header{
  position:sticky;top:0;z-index:50;
  background:linear-gradient(180deg,#1a141b 0,#241d28 100%);
  border-bottom:2px solid #3a2c44;
  box-shadow:0 8px 18px rgba(0,0,0,.35);
  height:100px;              /* ← ヘッダー全体の高さを70pxに固定 */
}

.header-inner{
  height:100px;              /* ← 内部ラッパも高さ70pxに揃える */
  padding:0 18px;           /* ← 上下paddingを0に */
  display:flex;
  align-items:center;
  justify-content:space-between;
}

/* ロゴ 70px */
.brand-logo-box{
  width:auto;
  height:70px;              /* ← 150pxから70pxに修正 */
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.brand-logo.brand-logo--raw{
  height:70px;              /* ← 150pxから70pxに修正 */
  width:auto;
  object-fit:contain;
  display:block;
}

/* メニューアイコン 70px */
.menu-link{
  display:inline-grid;
  place-items:center;
  width:70px;
  height:70px;
}
.menu-icon{
  width:70px;
  height:70px;
  object-fit:contain;
  border-radius:50%;
  transition:filter .18s, transform .18s;
}

.menu-link:hover .menu-icon{
  filter:brightness(1.08) drop-shadow(0 0 10px rgba(255,200,87,.9));
  transform:translateY(-1px);
}

.marquee-lights{
  height:10px;width:100%;
  background:
    repeating-linear-gradient(90deg,transparent 0 22px,rgba(0,0,0,.25) 22px 24px),
    radial-gradient(circle at 6px 50%, var(--gold) 0 4px, #0000 4px),
    radial-gradient(circle at 30px 50%, var(--gold) 0 4px, #0000 4px);
  background-size:24px 100%,24px 100%,24px 100%;
  background-repeat:repeat-x;
  filter:drop-shadow(0 4px 6px rgba(0,0,0,.45));
}

/* ===== Hero ===== */
.hero{
  background:linear-gradient(180deg, rgba(42,15,20,.85) 0, rgba(20,18,24,.8) 60%, rgba(20,18,24,1) 100%);
  border-bottom:2px solid #3a2c44;
}
.hero-inner{display:grid;gap:22px;align-items:center}
@media(min-width:900px){ .hero-inner{grid-template-columns:1.1fr .9fr} }

.kicker{color:var(--gold);letter-spacing:.2em;font-weight:700;margin:0 0 8px}
.catch{font-size:34px;line-height:1.25;font-weight:900;margin:0 0 10px}
.catch span{color:var(--gold)}
.sub{color:var(--muted);margin:0 0 14px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}
.btn{border:0;cursor:pointer;border-radius:14px;text-decoration:none;display:inline-block}
.btn-lg{padding:12px 18px;font-size:16px}
.acc{background:var(--acc);color:#fff;box-shadow:var(--shadow)}
.ghost{background:transparent;color:var(--ink);border:1px solid #6c5c79}
.ghost:hover{background:#2b2332}

.hero-visual{position:relative}
.hero-visual img{display:block;width:100%;border-radius:16px;box-shadow:var(--shadow)}
.film-edge{
  position:absolute;left:-10px;right:-10px;bottom:-10px;height:26px;
  background:
   linear-gradient(#0000 6px,#000 6px 20px,#0000 20px),
   repeating-linear-gradient(90deg,#0000 0 36px,#bdbdbd 36px 52px,#0000 52px 70px);
  border-radius:0 0 16px 16px;opacity:.9
}

/* ===== How it works ===== */
.how{background:url('../images/how_bk.png') center/cover no-repeat;position:relative}
.how::before{content:"";position:absolute;inset:0;background:rgba(20,18,24,.35)}
.how .how-grid{position:relative;display:grid;gap:20px;grid-template-columns:1fr 320px}
@media(max-width:980px){ .how .how-grid{grid-template-columns:1fr} }

.sec-title{text-align:center;margin:28px 0 14px}
.sec-title.right{text-align:left}
.sec-title span{
  display:inline-block;background:#2d2433;border:1px solid #4a3a55;
  padding:6px 14px;border-radius:999px;box-shadow:0 6px 14px rgba(0,0,0,.25)
}

.step-grid{list-style:none;margin:0;padding:0;display:grid;gap:14px}
@media(min-width:900px){ .step-grid{grid-template-columns:repeat(3,1fr)} }
.step{
  background:rgba(30,27,35,.65); /* ← 半透明で背景を見せる */
  border-radius:16px;padding:16px;border:1px solid rgba(58,44,68,.65);
  box-shadow:var(--shadow);min-height:140px;color:#f3eee6
}
.step .num{
  width:34px;height:34px;border-radius:50%;display:inline-grid;place-items:center;
  background:var(--gold);color:#2a0f14;font-weight:800;margin-bottom:6px
}

/* ===== Likes Ranking ===== */
.likes-aside{
  background:rgba(30,27,35,.7);
  border:1px solid rgba(58,44,68,.65);
  border-radius:16px;padding:12px 12px 6px;
  box-shadow:var(--shadow);align-self:start
}
.likes-list{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:10px}
.likes-list li{display:grid;grid-template-columns:36px 1fr auto;align-items:center;gap:8px}
.likes-list .rank{
  width:32px;height:32px;border-radius:50%;display:inline-grid;place-items:center;
  background:var(--gold);color:#2a0f14;font-weight:900
}
.likes-list .user{font-weight:700}
.likes-list .likes{color:#ff98ae}

/* ===== Cards / Carousels ===== */
.carousel-section{margin-top:26px}
.carousel{position:relative}
.track{
  display:flex;gap:16px;overflow-x:auto;scroll-behavior:smooth;
  scrollbar-width:none;padding:4px 44px; /* 矢印分の余白 */
}
.track::-webkit-scrollbar{display:none}

/* ← ここを修正：汎用 .card ではなく “トラック直下のカードだけ” に最小幅を付与 */
.carousel .track > .card{
  min-width:calc((100% - 16px*2 - 44px*2)/3); /* 3枚見える幅に調整 */
}

/* 汎用カードの見た目はそのまま維持（min-widthは付けない） */
.card{
  background:var(--card);
  border-radius:16px;
  border:1px solid #3a2c44;
  box-shadow:var(--shadow);
  overflow:hidden;
}

.card .thumb{width:100%;height:140px;object-fit:cover;display:block}
.card .body{padding:12px}
.card h4{margin:4px 0 6px}
.muted{color:var(--muted);font-size:13px}

.car-btn{
  position:absolute;top:50%;transform:translateY(-50%);
  width:38px;height:38px;border-radius:50%;border:0;cursor:pointer;
  background:#2d2433;color:#fff;box-shadow:0 8px 20px rgba(0,0,0,.35);
  display:grid;place-items:center;font-size:18px;
}
.car-btn.prev{left:4px}
.car-btn.next{right:4px}
.car-btn:hover{background:#3a2f43}


/* ===== Footer ===== */
.cinema-footer{border-top:2px solid #3a2c44;background:#1a141b;color:#cfcfe8;text-align:center}
.cinema-footer .wrap{padding:20px}

/* 既存のフッターがあれば上書きでOK */
.cinema-footer{
  border-top:2px solid #3a2c44;
  background:#1a141b;
  color:#cfcfe8;
}
.cinema-footer .wrap{
  padding:20px 18px;
}

/* フッターメニュー */
.footer-nav{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;            /* スマホで折り返し */
  margin:0 0 10px;
  padding:0;
}
.footer-nav a{
  color:var(--muted);
  text-decoration:none;
  font-size:14px;
  padding:6px 10px;
  border-radius:8px;
  border:1px solid transparent;
  transition:color .15s ease, background .15s ease, border-color .15s ease;
}
.footer-nav a:hover{
  color:#fff;
  background:#2d2433;
  border-color:#4a3a55;
}

/* コピーライト */
.copy{
  text-align:center;
  color:#bcbcc9;
  font-size:13px;
  margin:0;
}


/* ===== Mobile（スマホはテキストリンク） ===== */
.hamburger{
  display:none;
  font-size:16px;
  letter-spacing:.15em;
  padding:8px 12px;
  color:#fff;
  background:#312636;
  border:1px solid #4a3a55;
  border-radius:10px;
  cursor:pointer;
}
.mobile-menu{
  display:none;
  flex-direction:column;
  gap:10px;
  padding:10px 18px 14px;
  background:#1a141b;
  border-top:1px solid #3a2c44;
}
.mobile-menu a{
  color:#f8f8f8;
  text-decoration:none;
  padding:8px 10px;
  border-radius:8px;
  background:#2d2433;
  border:1px solid #4a3a55;
}
.mobile-menu.open{ display:flex; }

@media(max-width:768px){
  /* 画像メニューは非表示、ハンバーガー＋テキストメニューに */
  .cinema-menu{ display:none; }
  .hamburger{ display:block; }
}

/* ======== Home（トップ）サイズ調整の上書き ======== */

/* デフォルト3枚見え・広い画面で4枚見え・狭い画面で2→1枚見え */
.carousel .track > .card{
  /* 既存は3枚表示ベース。カードを少しだけ細くする */
  min-width: calc((100% - 16px*2 - 44px*2)/3);
}
@media (min-width: 1200px){
  .carousel .track > .card{
    /* 1200px以上は4枚見え */
    min-width: calc((100% - 16px*3 - 44px*2)/4);
  }
}
@media (max-width: 960px){
  .carousel .track > .card{
    /* タブレットは2枚見え */
    min-width: calc((100% - 16px*1 - 44px*2)/2);
  }
}
@media (max-width: 520px){
  .carousel .track > .card{
    /* スマホは1枚見え（左右の矢印分の余白を除く） */
    min-width: calc(100% - 44px*2);
  }
}

/* ミニステージ（画像が大きく見えすぎないよう高さを詰める） */
.thumb-stage .stage{ height: 150px; }
@media (max-width: 960px){ .thumb-stage .stage{ height: 140px; } }
@media (max-width: 520px){ .thumb-stage .stage{ height: 125px; } }

/* キャラクターの見切れ・拡大感を抑える（entries_list と同様の比率に寄せる） */
.carousel .pose-full{ height: 68%; margin-bottom: 0; }
.carousel .pose-up  { height: 112%; margin-bottom: -16%; }

/* 再生ボタンもやや小さめに */
.play-btn{
  width: 52px;
  height: 52px;
  font-size: 22px; /* 疑似要素の▶サイズ */
}

/* 吹き出しの高さを少しだけコンパクトに */
.dialogue-box-card{ height: 6.6em; }

/* ===== Home: カルーセルを 3 並び + スクロール可 ===== */

/* 横並び＆スクロール */
.carousel .track{
  display: flex;
  gap: 16px;
  overflow-x: auto;           /* ← 横スクロールを有効化（❮ ❯も効く） */
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding: 6px 0;
}
.carousel .track::-webkit-scrollbar{ display:none; } /* スクロールバー非表示(任意) */

/* カード幅：PC=3枚、タブレット=2枚、スマホ=1枚（矢印と一致） */
.carousel .track > .card{
  flex: 0 0 auto;
  min-width: calc((100% - 16px*2 - 44px*2)/3);  /* 3枚見え（左右44pxは矢印分の余白） */
}
@media (min-width: 1200px){
  /* 1200px以上でも 3枚のまま（ワンシーン要件） */
  .carousel .track > .card{ min-width: calc((100% - 16px*2 - 44px*2)/3); }
}
@media (max-width: 960px){
  .carousel .track > .card{ min-width: calc((100% - 16px*1 - 44px*2)/2); }
}
@media (max-width: 520px){
  .carousel .track > .card{ min-width: calc(100% - 44px*2); }
}

/* 矢印ボタンの無効化見た目（端で淡色） */
.carousel .car-btn.disabled{
  opacity: .35;
  pointer-events: none;
}

/* ===== Carousel arrows: 左右とも必ず表示できるように ===== */
.carousel{ position: relative; }

.carousel .car-btn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  border: 0; border-radius: 50%;
  background: rgba(0,0,0,.55);
  color: #fff; font-size: 20px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 3;
  transition: background .2s ease;
}
.carousel .car-btn:hover{ background: rgba(0,0,0,.8); }
.carousel .car-btn.prev{ left: 0; }
.carousel .car-btn.next{ right: 0; }
.carousel .car-btn.disabled{ opacity: .35; pointer-events: none; }

/* 横スクロールは有効のまま */
.carousel .track{
  display: flex; gap: 16px;
  overflow-x: auto; scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding: 6px 0;
}

/* 3並び：他セクションと同じカード幅計算（左右44pxの矢印分を差し引き） */
.carousel .track > .card{
  flex: 0 0 auto;
  min-width: calc((100% - 16px*2 - 44px*2)/3);
}
@media (max-width: 960px){
  .carousel .track > .card{ min-width: calc((100% - 16px*1 - 44px*2)/2); }
}
@media (max-width: 520px){
  .carousel .track > .card{ min-width: calc(100% - 44px*2); }
}

/* === 広告行（人気のアニメ作品のタイトル上） === */
.ad-row.ads-three{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 10px 0 14px; /* タイトルとの余白 */
  align-items: start;
}
.ad-row .ad-slot{
  background: transparent; /* バナー自体の背景を尊重 */
  display: block;
  min-height: 60px;          /* CLS対策の最低高さ（必要に応じ調整） */
  text-align: center;        /* バナー中央揃え */
  overflow: hidden;
}

/* 〜1024px：2カラム */
@media (max-width: 1024px){
  .ad-row.ads-three{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 〜767px：1カラム（スマホ縦並び） */
@media (max-width: 767px){
  .ad-row.ads-three{
    grid-template-columns: 1fr;
  }
  .ad-row .ad-slot{
    margin: 0 auto; /* 幅が狭いバナーでも中央に */
  }
}