/* ====== FV HERO styles ====== */
:root{
  --fv-red:#ff1744; --fv-yellow:#ffd100; --fv-blue:#00c4ff;
  --fv-ink:#111; --fv-white:#fff;
}

.fv-hero{
  position:relative; isolation:isolate; overflow:hidden;
  padding:110px 0 48px;
  color:var(--fv-ink);
  background:#fff; /* ベースは白 */
}

/* --- アメコミ背景（レイヤー合成） --- */
.fv-bg{
  position:absolute; inset:0; z-index:-2;
  /* スターバースト＋スピードラインの多層グラデーション */
  background:
    /* スピードライン（右上→左下） */
    repeating-linear-gradient(-22deg,
      transparent 0 18px, rgba(0,0,0,.05) 18px 19px),
    /* 放射バースト（左側から） */
    repeating-conic-gradient(from -10deg at 22% 30%,
      rgba(255,23,68,.9) 0 10deg, transparent 10deg 20deg),
    /* 反対色のバーストを重ねる */
    repeating-conic-gradient(from 0deg at 22% 30%,
      rgba(0,196,255,.6) 0 8deg, transparent 8deg 16deg),
    /* イエローの面で全体を明るく */
    radial-gradient(1200px 600px at 70% -20%, #fff0 60%, #fff 61%),
    linear-gradient(135deg,#fffdf5 0%, #fff3c1 45%, #ffe9ee 100%);
  filter:saturate(1.1);
}
/* ベンデイドット（半透明の大粒ドット） */
.fv-dots{
  position:absolute; inset:0; z-index:-1; mix-blend-mode:multiply; opacity:.6;
  background-image:
    radial-gradient(rgba(0,0,0,.10) 1.4px, transparent 1.4px),
    radial-gradient(rgba(0,0,0,.07) 1.4px, transparent 1.4px);
  background-size: 14px 14px, 18px 18px;
  background-position: 0 0, 6px 6px;
}

/* ====== Calm Comic BG / No-Red Overrides ====== */

/* 背景は白〜淡いブルー／グリーンのグラデで落ち着かせる */
.fv-hero{
  background: linear-gradient(135deg,#f7f9fc 0%, #eef6ff 40%, #f5fbf7 100%);
}

/* バースト＆スピードラインは低彩度のクール色で薄く */
.fv-bg{
  background:
    /* スピードライン */
    repeating-linear-gradient(-22deg,
      transparent 0 18px, rgba(0,0,0,.03) 18px 19px),
    /* クールトーンのスターバースト（青／ティール系） */
    repeating-conic-gradient(from -10deg at 22% 30%,
      rgba(0,146,255,.22) 0 10deg, transparent 10deg 20deg),
    repeating-conic-gradient(from 0deg at 22% 30%,
      rgba(0,204,153,.18) 0 8deg, transparent 8deg 16deg),
    radial-gradient(1200px 600px at 70% -20%, #fff0 60%, #fff 61%);
  filter:saturate(1);
}

/* ドットも薄めに */
.fv-dots{ opacity:.35; }

/* 赤系のテキスト色を廃止（見出しの前置きラベル） */
.fv-kicker{ color:#0a6; }

/* 主要ボタンの赤グラデをブルーに変更（アクセントは維持） */
.fv-btn.primary{
  color:#fff;
  background:linear-gradient(180deg,#2b7bff,#1b4fb8);
}

/* そのほか赤みの強い要素があれば個別で無彩色/クール系に */
.fv-badge{ border-color:#222; }


/* レイアウト */
.fv-wrap{
  max-width:1100px; margin:0 auto; padding:0 20px;
  display:grid; grid-template-columns:1.1fr 1fr; gap:min(4vw,32px); align-items:center;
}
@media (max-width: 900px){
  .fv-wrap{ grid-template-columns:1fr; gap:24px; }
}

/* テキスト側 */
.fv-kicker{ font-weight:700; letter-spacing:.12em; color:#c00; margin:0 0 6px; }
.fv-title{ font-size: clamp(28px, 5vw, 48px); line-height:1.55; margin:0 0 12px; }
.fv-title span{
  position:relative; z-index:0; padding:0 .25em; border-radius:.25em;
  background: linear-gradient(90deg,#fff 0 25%, #ffe77a 60%, #fff 100%);
  box-shadow:0 .15em 0 #00000015 inset;
}

.fv-chips{
  display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 20px; padding:0; list-style:none;
}
.fv-chips li{
  background:#fff; border:2px solid var(--fv-ink); border-radius:999px;
  padding:6px 12px; font-weight:700; box-shadow:4px 4px 0 #0003;
}

.fv-ctas{ display:flex; flex-wrap:wrap; gap:12px; }
.fv-btn{
  display:inline-block; font-weight:800; text-decoration:none; border:2px solid var(--fv-ink);
  padding:12px 18px; border-radius:14px; transform:translateY(0); transition:.15s ease;
  box-shadow:4px 4px 0 #0003;
}
.fv-btn:hover{ transform:translateY(-2px) scale(1.02); }
.fv-btn.primary{ color:#fff; background:linear-gradient(180deg,#ff3b3b,#c30000); }
.fv-btn.secondary{ background:#ffd84d; }
.fv-btn.ghost{ background:#fff; }

.fv-trust{ margin-top:12px; display:flex; gap:8px; flex-wrap:wrap; }
.fv-badge{ font-size:.85rem; background:#fff; border:1.5px solid #000; padding:6px 10px; border-radius:10px; }

/* 右のビジュアル：アメコミ“コマ”風パネル */
.fv-visual{ position:relative; min-height:320px; }
.fv-scene{
  width:min(680px, 100%); display:block; margin:0 auto;
  border:10px solid var(--fv-ink); border-radius:18px;
  box-shadow:12px 12px 0 rgba(0,0,0,.25), 0 24px 32px rgba(0,0,0,.25);
  transform: rotate(-1.2deg);
  background:#fff;
}

/* スクロール促し */
.fv-scroll{
  position:absolute; left:50%; bottom:10px; transform:translateX(-50%);
  font-size:.75rem; letter-spacing:.2em; color:#000; text-decoration:none;
}
.fv-scroll::after{
  content:""; display:block; width:2px; height:32px; margin:6px auto 0;
  background:#000; animation:fv-scroll 1.2s infinite;
}
@keyframes fv-scroll{ 0%{opacity:.2; transform:scaleY(.5)} 50%{opacity:1; transform:scaleY(1)} 100%{opacity:.2; transform:scaleY(.5)} }

/* モバイル固定CTA */
.fv-sticky-cta{ position:fixed; inset:auto 12px 12px 12px; z-index:50; display:none; }
@media (max-width: 780px){ .fv-sticky-cta{ display:block; } }

/* アニメ控えめ設定 */
@media (prefers-reduced-motion: reduce){
  .fv-scroll::after{ animation:none !important }
}

/* === SP only: FVの上余白をいったんゼロ化 === */
@media (max-width: 900px){
  .fv-hero{ padding-top: 0 !important; margin-top: 0 !important; }
  .fv-wrap{ align-items: flex-start !important; }
  .fv-copy, .fv-kicker, .fv-title{ margin-top: 0 !important; }
}

/* ===== SP only: 「もっと見る」ボタンを中央揃え＋下余白 ===== */
@media (max-width: 900px){
  /* 想定されるクラスをまとめて上書き（どれかに該当すればOK） */
  a.more-bottom, .more-bottom,
  a.more, .more, .more-link, button.more, .btn-more {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    /* 中央寄せ */
    margin: 16px auto 36px !important;
    /* 親がflex/gridでも中央へ */
    place-self: center !important;
    align-self: center !important;
    justify-self: center !important;
    float: none !important;
    position: static !important;
  }
}


/* ランキングの行を横並びに */
.rank-list{margin:0;padding:0;list-style:none}
.rank-list li{display:flex;align-items:center;gap:.6rem;padding:.5rem .75rem;border-bottom:1px solid #eee}
.rank-no{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:#111;color:#fff;font-weight:700;flex:0 0 22px}
.rank-name{flex:1 1 auto;display:inline-flex;align-items:center;gap:.4rem;
  background:none;border:0;padding:0;margin:0;cursor:pointer;
  text-decoration:underline;text-underline-offset:2px;font:inherit;color:inherit}
.rank-val{white-space:nowrap;color:#555}

/* モーダル（簡易） */
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.4);display:none;align-items:center;justify-content:center;z-index:1000}
.modal-bg.show{display:flex}
.modal{background:#fff;border-radius:12px;max-width:880px;width:92%;max-height:80vh;overflow:auto;box-shadow:0 10px 40px rgba(0,0,0,.25)}
.modal-head{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid #eee}
.modal-body{padding:12px 16px}
.works-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.work-item{border:1px solid #eee;border-radius:10px;padding:10px;background:#fff}
.work-item .title{font-weight:700;margin-bottom:4px}
.work-item .meta{font-size:12px;color:#666;margin-bottom:6px}
.work-item a{display:inline-block;margin-top:6px}
.btn{border:1px solid #ddd;background:#fff;border-radius:8px;padding:6px 10px;cursor:pointer}
.btn.primary{background:#111;color:#fff;border-color:#111}



  /* ===== HEROの高さと固定ヘッダーずれ対策 ===== */
/* ===== HERO 高さ調整（スマホ：実高さ / PC：最適化） ===== */
:root{
  --vh: 1vh;           /* 端末実高さ（JSで上書き・前回入れていればそのままでOK） */
  --header-offset: 0px;/* 固定ヘッダー分（JSで上書き・前回と同様） */
}

.fv-hero{
  /* モバイルは実高さ、ヘッダー分オフセット */
  min-height: 100dvh;
  min-height: calc(var(--vh) * 100);
  padding-top: var(--header-offset);
  scroll-margin-top: var(--header-offset);
}

/* PCでは長くなりすぎないようにクランプ（調整可） */
@media (min-width: 1024px){
  .fv-hero{
    min-height: clamp(400px, 50vh, 480px);
    padding-top: var(--header-offset);
  }
  .fv-hero .fv-wrap{ align-items: center; }
}

/* ===== 動画カード：幅100%で前回と同じ高さ（16:9）に固定 ===== */
   /* ここを 4/3 や 1/1 に変えれば比率変更可 */



/* 中身を常にピッタリに（YTのinline styleも強制上書き） */
.work-card .video-box iframe,
.work-card .video-box video,
.work-card .video-box > div[id^="ytp-"]{
  position: absolute; inset: 0;
  width: 100% !important;
  height: 100% !important;
}