/* =========================================================
   基本の色（ここを変えるとサイト全体の配色が変わります）
   ========================================================= */
:root {
  --header: #2b2f33;
  --bg: #ffffff;
  --text: #212529;
  --muted: #6c757d;
  --line: #e5e7eb;
  --accent: #00aff0;          /* myfans風の水色 */
  --accent-dark: #0090c7;
  --cta: #ff4f8b;             /* アフィリエイトボタン */
  --gold: #e6b422; --silver: #9aa3ab; --bronze: #c47a3a;
  --radius: 6px;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
html.no-scroll { overflow: hidden; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Segoe UI", Roboto, "Noto Sans JP", Meiryo, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}
a { color: inherit; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; padding: 0; }
svg { width: 1em; height: 1em; display: block; }
[hidden] { display: none !important; }

/* ---------- ヘッダー ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  height: 54px; background: var(--header);
  display: flex; align-items: center; justify-content: center;
  transition: transform .25s;
}
.site-brand { text-align: center; line-height: 1.15; }
.site-title { margin: 0; font-size: 20px; letter-spacing: .12em; font-weight: 700; }
.site-sub { margin: 2px 0 0; font-size: 10px; color: #adb5bd; letter-spacing: .04em; }
.site-title a { color: #fff; text-decoration: none; }
.menu-btn { position: absolute; right: 8px; top: 0; height: 54px; width: 44px; color: #fff; font-size: 22px; display: grid; place-items: center; }

/* ---------- 本文 ---------- */
.container { max-width: 1140px; margin: 0 auto; padding: 0 12px 40px; }
.page-head { text-align: center; padding: 22px 0 6px; }
.page-title { margin: 0; font-size: 22px; font-weight: 700; }
.page-sub { margin: 6px 0 0; font-size: 12px; color: var(--muted); }
.period-tabs { display: inline-flex; gap: 6px; margin-top: 14px; flex-wrap: wrap; justify-content: center; }
.period-tabs a {
  font-size: 13px; padding: 4px 14px; border-radius: 999px; border: 1px solid var(--line);
  text-decoration: none; color: var(--muted);
}
.period-tabs a.active { background: var(--header); border-color: var(--header); color: #fff; }
.notice { font-size: 12px; color: var(--text); margin: 14px 0 16px; line-height: 1.7; }
.notice a { color: #dc3545; }
.empty { text-align: center; color: var(--muted); padding: 40px 0; }

/* ---------- Masonry グリッド ---------- */
.grid { display: flex; gap: 6px; align-items: flex-start; }
.grid-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.sentinel { height: 1px; }

.card { position: relative; border-radius: var(--radius); overflow: hidden; background: #e9ecef; }
.card .thumb { display: block; position: relative; width: 100%; }
.card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card .thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.45), transparent 35%); pointer-events: none; }
@media (hover: hover) {
  .card .thumb:hover img { filter: brightness(1.08); }
}
.x-link {
  position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 5px;
  background: #000; color: #fff; display: grid; place-items: center; font-size: 15px; z-index: 2;
}
.fav {
  position: absolute; left: 6px; bottom: 6px; z-index: 2;
  background: rgba(0,0,0,.55); color: #fff; font-size: 11px; padding: 3px 8px; border-radius: 4px;
  display: flex; align-items: center; gap: 3px;
}
.fav svg { font-size: 11px; }
.fav.on { background: #f5b301; color: #111; }
.likes {
  position: absolute; right: 6px; bottom: 6px; z-index: 2;
  background: rgba(255,255,255,.88); color: #2f8f4e; font-size: 11px; font-weight: 700;
  padding: 3px 6px; border-radius: 4px; display: flex; align-items: center; gap: 4px;
}
.dur {
  position: absolute; left: 6px; top: 6px; z-index: 2; background: rgba(0,0,0,.6); color: #fff;
  font-size: 11px; padding: 1px 6px; border-radius: 4px;
}
.rank {
  position: absolute; left: 0; top: 0; z-index: 3; min-width: 30px; height: 30px; padding: 0 6px;
  background: rgba(0,0,0,.72); color: #fff; font-weight: 800; font-size: 15px;
  display: grid; place-items: center; border-bottom-right-radius: var(--radius);
}
.rank ~ .dur { top: 36px; }
.rank.r1 { background: var(--gold); } .rank.r2 { background: var(--silver); } .rank.r3 { background: var(--bronze); }

.ad-card a { display: block; position: relative; }
.ad-label { position: absolute; top: 6px; left: 6px; background: #ffd400; color: #000; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 3px; }
.ad-text { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 8px 8px; background: linear-gradient(transparent, rgba(0,0,0,.75)); color: #fff; font-size: 12px; }

/* ---------- フッター ---------- */
.site-footer { background: var(--header); color: #adb5bd; text-align: center; font-size: 12px; padding: 24px 12px 90px; }
.footer-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 8px; }
.footer-links a { color: #fff; text-decoration: none; }

/* ---------- メニュー（タブレット・スマホ） ---------- */
.menu-pop { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,.5); display: none; align-items: flex-start; justify-content: center; padding: 60px 16px; }
.menu-pop.open { display: flex; animation: fade .2s; }
.menu-panel { background: #fff; width: 100%; max-width: 420px; border-radius: 10px; overflow: hidden; max-height: calc(100dvh - 140px); overflow-y: auto; }
.menu-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; font-weight: 700; border-bottom: 1px solid var(--line); }
.menu-head button { font-size: 20px; }
.menu-panel a { display: flex; align-items: center; gap: 10px; padding: 12px 16px; text-decoration: none; border-bottom: 1px solid var(--line); font-size: 15px; }
.menu-panel a i { font-size: 18px; color: var(--muted); }
.menu-panel a:last-child { border-bottom: 0; }
@keyframes fade { from { opacity: 0; } }

@media (max-width: 768px) {
  .container { padding: 0 6px 40px; }
  .notice { font-size: 11px; padding: 0 4px; }
  .grid, .grid-col { gap: 4px; }
  .page-title { font-size: 19px; }
}

/* ---------- プレイヤー（PC） ---------- */
.player { position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,.88); display: flex; align-items: center; justify-content: center; padding: 20px; }
.player-inner { position: relative; display: flex; gap: 20px; max-width: 1000px; width: 100%; max-height: 100%; align-items: stretch; }
.player-video { flex: 1 1 auto; background: #000; border-radius: 8px; overflow: hidden; display: grid; place-items: center; min-width: 0; }
.player-video video { width: 100%; max-height: calc(100vh - 40px); display: block; }
.player-info { flex: 0 0 280px; color: #fff; display: flex; flex-direction: column; gap: 12px; padding-top: 30px; }
.pi-author { display: flex; gap: 10px; align-items: center; }
.pi-author img { width: 44px; height: 44px; border-radius: 50%; }
.pi-author b { display: block; font-size: 15px; }
.pi-author span { font-size: 13px; color: #adb5bd; }
.pi-title { margin: 0; font-size: 15px; }
.pi-tags { margin: 0; color: #7fd3ff; font-size: 13px; }
.pi-meta { margin: 0; color: #adb5bd; font-size: 12px; display: flex; align-items: center; gap: 4px; }
.pi-x { color: #fff; font-size: 13px; display: flex; align-items: center; gap: 6px; opacity: .8; }
.player-close { position: absolute; top: -6px; right: 0; color: #fff; font-size: 26px; z-index: 2; }
.player-nav { position: fixed; top: 50%; transform: translateY(-50%); color: #fff; font-size: 34px; width: 54px; height: 54px; border-radius: 50%; background: rgba(255,255,255,.12); display: grid; place-items: center; }
.player-nav.prev { left: 14px; } .player-nav.next { right: 14px; }
@media (max-width: 900px) {
  .player-inner { flex-direction: column; overflow-y: auto; }
  .player-info { flex: none; padding-top: 0; }
  .player-video video { max-height: 65vh; }
  .player-nav { display: none; }
}

.cta {
  display: block; text-align: center; text-decoration: none; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--cta), #ff7a59); padding: 12px 14px; border-radius: 999px; font-size: 14px;
  box-shadow: 0 4px 14px rgba(255,79,139,.35);
}

/* ---------- 年齢確認 ---------- */
.age-gate { position: fixed; inset: 0; z-index: 1000; background: rgba(20,22,25,.96); display: grid; place-items: center; padding: 16px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.age-box { background: #fff; color: var(--text); border-radius: 14px; padding: 28px 22px; max-width: 380px; width: 100%; text-align: center; }
.age-mark { width: 58px; height: 58px; margin: 0 auto 8px; border-radius: 50%; border: 4px solid #dc3545; color: #dc3545; font-weight: 800; font-size: 22px; display: grid; place-items: center; }
.age-box h2 { margin: 0 0 8px; font-size: 20px; }
.age-box p { font-size: 13px; color: var(--muted); margin: 0 0 18px; }
.age-yes { display: block; width: 100%; background: var(--accent); color: #fff; font-weight: 700; padding: 13px; border-radius: 999px; }
.age-no { display: inline-block; margin-top: 12px; font-size: 13px; color: var(--muted); }

/* ---------- お問い合わせページ ---------- */
.doc { max-width: 720px; margin: 0 auto; padding: 24px 16px 60px; font-size: 14px; }
.doc h1, .doc h2 { font-size: 20px; text-align: center; }
.doc h3 { font-size: 16px; border-left: 4px solid var(--accent); padding-left: 8px; margin-top: 28px; }
.doc .mail-box { background: #f8f9fa; border: 1px solid var(--line); padding: 14px; border-radius: 8px; text-align: center; font-size: 16px; }

/* =========================================================
   フィード（TikTok風）
   ========================================================= */
html.feed-page, html.feed-page body { height: 100%; background: #000; overflow: hidden; overscroll-behavior: none; }
.feed-wrap { position: relative; max-width: 480px; margin: 0 auto; background: #000; }
.feed {
  height: 100vh; height: 100dvh; overflow-y: auto; scroll-snap-type: y mandatory;
  scrollbar-width: none; position: relative; background: #000;
}
.feed::-webkit-scrollbar { display: none; }
.slide {
  position: relative; height: 100vh; height: 100dvh; scroll-snap-align: start; scroll-snap-stop: always;
  overflow: hidden; display: grid; place-items: center; color: #fff;
}
.slide-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(28px) brightness(.45); transform: scale(1.2); }
.slide-video { position: relative; width: 100%; height: 100%; object-fit: contain; z-index: 1; }
.slide-pause { position: absolute; z-index: 2; font-size: 64px; color: rgba(255,255,255,.85); display: none; filter: drop-shadow(0 2px 8px rgba(0,0,0,.5)); cursor: pointer; }
.slide.paused .slide-pause { display: block; }
.slide-error { position: absolute; z-index: 3; background: rgba(0,0,0,.75); padding: 14px 18px; border-radius: 10px; font-size: 13px; text-align: center; margin: 0 30px; }
.slide-error a { display: block; color: #7fd3ff; margin-top: 6px; }

.side-actions {
  position: absolute; right: 8px; bottom: calc(150px + env(safe-area-inset-bottom)); z-index: 4;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.sa-avatar { width: 46px; height: 46px; border-radius: 50%; border: 2px solid #fff; overflow: hidden; background: #000; display: grid; place-items: center; font-size: 20px; color: #fff; }
.sa-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sa-btn { display: flex; flex-direction: column; align-items: center; gap: 3px; color: #fff; text-decoration: none; font-size: 11px; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.sa-btn i { width: 44px; height: 44px; border-radius: 50%; background: rgba(0,0,0,.35); display: grid; place-items: center; font-size: 22px; }
.sa-fav.on i { color: #ff3d6e; }
.sa-static { cursor: default; }

.slide-info {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  padding: 60px 74px calc(18px + env(safe-area-inset-bottom)) 14px;
  background: linear-gradient(transparent, rgba(0,0,0,.7));
}
.slide-info p { margin: 0 0 4px; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.si-author { font-weight: 700; font-size: 15px; }
.si-title { font-size: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.si-tags { font-size: 13px; color: #9fe0ff; }
.fs-rank { display: inline-block; background: var(--gold); color: #111; font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 4px; margin-bottom: 6px; }
.cta-feed { margin-top: 10px; margin-right: -60px; }
.slide-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.2); z-index: 5; }
.slide-progress i { display: block; height: 100%; width: 0; background: #fff; }

.slide-ad .ad-main { position: relative; z-index: 1; width: 86%; }
.slide-ad .ad-main img { width: 100%; border-radius: 12px; display: block; }

.feed-top {
  position: absolute; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(8px + env(safe-area-inset-top)) 8px 8px; background: linear-gradient(rgba(0,0,0,.5), transparent);
}
.ft-btn { width: 40px; height: 40px; display: grid; place-items: center; color: #fff; font-size: 22px; text-decoration: none; }
.ft-tabs { display: flex; gap: 12px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.ft-tabs::-webkit-scrollbar { display: none; }
.ft-tabs a { flex: none; color: rgba(255,255,255,.65); text-decoration: none; font-weight: 700; font-size: 14px; padding: 4px 0; border-bottom: 2px solid transparent; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.ft-tabs a.active { color: #fff; border-bottom-color: #fff; }

.sound-hint {
  position: absolute; top: calc(64px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 20;
  background: rgba(0,0,0,.6); color: #fff; font-size: 13px; padding: 7px 14px; border-radius: 999px;
  display: flex; align-items: center; gap: 6px; cursor: pointer;
}
.toast { position: absolute; left: 50%; bottom: 40%; transform: translateX(-50%); z-index: 30; background: rgba(0,0,0,.8); color: #fff; padding: 10px 18px; border-radius: 8px; font-size: 13px; }
.feed-empty { color: #fff; height: 100%; display: flex; flex-direction: column; gap: 12px; align-items: center; justify-content: center; }
.feed-empty a { color: #7fd3ff; }

/* スマホ・タブレットではヘッダーを出さず全画面 */
@media (max-width: 1023px) {
  html.feed-page .site-header { display: none; }
}
/* タブレットはスマホ画面風に中央表示 */
@media (min-width: 769px) and (max-width: 1023px) {
  html.feed-page body { background: #111; }
  .feed-wrap { border-left: 1px solid #222; border-right: 1px solid #222; }
}
/* PCはヘッダー・サイドバーを残し、メイン欄に縦長のフィードを表示 */
@media (min-width: 1024px) {
  html.feed-page, html.feed-page body { background: var(--bg); }
  .feed-main { min-width: 0; padding: 12px 0; }
  .feed-wrap {
    --feed-h: calc(100dvh - 54px - 24px);
    width: min(100%, calc(var(--feed-h) * 9 / 16)); min-width: 340px;
    border-radius: 16px; overflow: hidden; box-shadow: 0 8px 30px rgba(0,0,0,.18);
  }
  .feed, .slide { height: calc(100vh - 54px - 24px); height: var(--feed-h); }
  .feed-top { padding-top: 8px; }
}

/* ---------- お気に入りページ：引き継ぎ・おすすめ設定 ---------- */
.my-tools { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-bottom: 16px; }
.tool-box { border: 1px solid var(--line); border-radius: 10px; padding: 14px; background: #f8f9fa; font-size: 13px; }
.tool-box h3 { margin: 0 0 4px; font-size: 14px; }
.tool-box p { margin: 0 0 10px; color: var(--muted); font-size: 12px; }
.tool-box .btns { display: flex; gap: 6px; flex-wrap: wrap; }
.tool-box button { background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; font-size: 13px; }
.tool-box button.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }
.tool-box button.danger { color: #dc3545; }
.tool-box textarea { width: 100%; margin-top: 8px; font: 12px/1.4 ui-monospace, Menlo, monospace; padding: 8px; border: 1px solid var(--line); border-radius: 6px; resize: vertical; min-height: 60px; word-break: break-all; }
.tool-box .tool-msg { margin: 8px 0 0; color: var(--accent-dark); font-size: 12px; }
.tool-box .tool-msg.err { color: #dc3545; }

/* =========================================================
   レイアウト：PCはサイドバー、タブレット・スマホは下部ナビ
   ========================================================= */
:root { --nav-h: 58px; --side-w: 232px; }
.sidebar { display: none; }
.bottom-nav { display: none; }

/* ---------- 検索フォーム・タグ ---------- */
.search-form { display: flex; align-items: center; background: #f1f3f5; border: 1px solid var(--line); border-radius: 999px; padding: 0 4px 0 14px; }
.search-form:focus-within { border-color: var(--accent); background: #fff; }
.search-form input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 16px; padding: 9px 0; outline: none; }
.search-form input::-webkit-search-cancel-button { cursor: pointer; }
.search-form button { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 18px; color: var(--muted); }
.search-panel { max-width: 560px; margin: 16px auto 0; text-align: left; }
.search-panel .tag-list { margin-top: 12px; justify-content: center; }
.tag-list { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; padding: 4px 10px; border-radius: 999px; background: #eef7fc; color: var(--accent-dark); text-decoration: none; border: 1px solid #d6eef9; }
.tag-chip small { color: var(--muted); font-size: 10px; }
.tag-chip.active, .tag-chip:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.tag-chip.active small, .tag-chip:hover small { color: #e6f7ff; }
.muted { color: var(--muted); font-size: 12px; }
.pi-tags a { color: inherit; text-decoration: none; }
.si-tags a { color: inherit; text-decoration: none; }

/* ---------- PC：サイドバー ---------- */
@media (min-width: 1024px) {
  .menu-btn { display: none; }
  .layout { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); gap: 24px; max-width: 1400px; margin: 0 auto; padding: 0 20px; }
  .layout > .container, .layout > .doc { max-width: none; padding-left: 0; padding-right: 0; margin: 0; }
  .layout > .doc { max-width: 760px; }
  .sidebar {
    display: flex; flex-direction: column; gap: 18px;
    position: sticky; top: 54px; align-self: start;
    max-height: calc(100vh - 54px); overflow-y: auto; padding: 18px 4px 24px 0;
    scrollbar-width: thin;
  }
  .side-nav { display: flex; flex-direction: column; gap: 2px; }
  .side-link { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 10px; text-decoration: none; font-size: 14px; color: var(--text); }
  .side-link i { font-size: 19px; color: var(--muted); }
  .side-link:hover { background: #f1f3f5; }
  .side-link.active { background: #e6f6fd; color: var(--accent-dark); font-weight: 700; }
  .side-link.active i { color: var(--accent-dark); }
  .side-link-sub { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px 0 6px 38px; }
  .side-link-sub a { font-size: 12px; padding: 3px 8px; border-radius: 999px; text-decoration: none; color: var(--muted); border: 1px solid var(--line); }
  .side-link-sub a.active { background: var(--header); border-color: var(--header); color: #fff; }
  .side-sec h4 { margin: 0 0 8px; font-size: 12px; color: var(--muted); font-weight: 600; padding-left: 4px; }
  .side-foot { margin: 0; font-size: 11px; color: var(--muted); padding-left: 4px; }
  .site-footer { padding-bottom: 24px; }
  /* サイドバーがあるときはページ上部の注意書きを左寄せ */
  .page-head { padding-top: 18px; }
}

/* ---------- タブレット・スマホ：下部固定ナビ ---------- */
@media (max-width: 1023px) {
  .site-header.hide { transform: translateY(-100%); }
  html.has-bottom-nav body { padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom)); }
  .site-footer { padding-bottom: 24px; }
  .bottom-nav {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    height: calc(var(--nav-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
    background: rgba(255,255,255,.96); border-top: 1px solid var(--line);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  }
  .bottom-nav a {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    text-decoration: none; color: #8a9097; font-size: 10px; -webkit-tap-highlight-color: transparent;
  }
  .bottom-nav a i { font-size: 23px; }
  .bottom-nav a.active { color: var(--text); font-weight: 700; }
  .bottom-nav a.active i { color: var(--accent-dark); }
  .bottom-nav .bn-center i {
    width: 46px; height: 32px; border-radius: 10px; display: grid; place-items: center; font-size: 20px;
    background: linear-gradient(135deg, var(--cta), var(--accent)); color: #fff !important;
  }
  .bottom-nav .bn-center span { margin-top: 1px; }
  /* フィード画面では黒い下部ナビ */
  .bottom-nav.dark { background: #000; border-top-color: #222; }
  .bottom-nav.dark a { color: #8a8a8a; }
  .bottom-nav.dark a.active { color: #fff; }
  .bottom-nav.dark a.active i { color: #fff; }

  /* フィードは下部ナビの分だけ高さを詰める */
  html.feed-page.has-bottom-nav body { padding-bottom: 0; }
  html.feed-page.has-bottom-nav .feed,
  html.feed-page.has-bottom-nav .slide { height: calc(100vh - var(--nav-h) - env(safe-area-inset-bottom)); height: calc(100dvh - var(--nav-h) - env(safe-area-inset-bottom)); }
  html.feed-page.has-bottom-nav .slide-info { padding-bottom: 14px; }
  html.feed-page.has-bottom-nav .side-actions { bottom: 140px; }
}

/* ---------- フィード：読み込み中のくるくる ---------- */
.slide-spinner { position: absolute; z-index: 2; width: 46px; height: 46px; border-radius: 50%; border: 3px solid rgba(255,255,255,.25); border-top-color: #fff; animation: spin .8s linear infinite; display: none; pointer-events: none; }
.slide.loading .slide-spinner { display: block; }
.slide.loading.paused .slide-spinner { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* =========================================================
   静的ページ（動画・クリエイター・タグ）とトップのリンク一覧
   ========================================================= */
.crumbs { font-size: 12px; color: var(--muted); padding: 12px 0 4px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.crumbs a { color: var(--muted); }
.sp-sec { margin: 26px 0; }
.sp-sec h2, .home-links h2 { font-size: 16px; margin: 0 0 10px; padding-left: 8px; border-left: 4px solid var(--accent); }
.static-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.static-grid .card .thumb img { position: absolute; inset: 0; }

/* 動画ページ */
.vpage { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 8px; }
.vp-player { background: #000; border-radius: 10px; overflow: hidden; display: grid; place-items: center; }
.vp-player video { width: 100%; max-height: 78vh; display: block; }
.vp-info { display: flex; flex-direction: column; gap: 12px; }
.vp-title { font-size: 20px; margin: 0; line-height: 1.4; }
.vp-meta { margin: 0; font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 4px; }
.vp-author { display: flex; align-items: center; gap: 10px; text-decoration: none; padding: 8px; border: 1px solid var(--line); border-radius: 10px; }
.vp-author img { width: 44px; height: 44px; border-radius: 50%; }
.vp-author b { display: block; font-size: 15px; }
.vp-author small { color: var(--accent-dark); font-size: 12px; }
.vp-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.vp-actions > * { flex: 1; text-align: center; padding: 10px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-size: 13px; text-decoration: none; }
.vp-fav.on { background: #f5b301; border-color: #f5b301; color: #111; font-weight: 700; }
.vp-about h2 { font-size: 15px; margin: 6px 0; }
.vp-about p { margin: 0 0 8px; font-size: 14px; }
.vp-comment { background: #fff8e1; border-radius: 8px; padding: 10px 12px; font-size: 14px; }
.vp-text { margin: 0; padding: 12px 14px; background: #f8f9fa; border-left: 3px solid var(--line); border-radius: 6px; font-size: 13px; white-space: pre-wrap; color: #444; }
.vp-text cite { display: block; margin-top: 8px; font-style: normal; font-size: 12px; }
@media (min-width: 900px) {
  .vpage { grid-template-columns: minmax(0, 1.25fr) minmax(280px, 1fr); align-items: start; }
}

/* クリエイターページ */
.ch-head { display: flex; align-items: center; gap: 14px; margin: 10px 0 12px; }
.ch-avatar { width: 72px; height: 72px; border-radius: 50%; flex: none; }
.ch-head h1 { font-size: 20px; margin: 0; line-height: 1.4; }
.ch-stats { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.ch-body { display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.ch-body > p { margin: 0; }
.ch-links { font-size: 13px; }

/* トップページのリンク一覧（検索エンジン・回遊用） */
.home-links { margin: 36px 0 10px; display: flex; flex-direction: column; gap: 12px; }
.home-links h2 { margin-top: 12px; }
.creator-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.creator-list a { display: flex; align-items: center; gap: 8px; padding: 8px; border: 1px solid var(--line); border-radius: 10px; text-decoration: none; font-size: 13px; min-width: 0; }
.creator-list img { width: 36px; height: 36px; border-radius: 50%; flex: none; }
.creator-list span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.creator-list small { display: block; color: var(--muted); font-size: 11px; }
.text-list { list-style: none; margin: 0; padding: 0; columns: 2 280px; column-gap: 24px; font-size: 13px; }
.text-list li { break-inside: avoid; padding: 5px 0; border-bottom: 1px dashed var(--line); display: flex; gap: 8px; justify-content: space-between; }
.text-list a { text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-list span { color: var(--muted); flex: none; font-size: 11px; }
.pi-links { display: flex; gap: 14px; font-size: 13px; }
.pi-links a { color: #9fe0ff; }
.si-author a { color: inherit; text-decoration: none; }

/* ---------- 保存ボタン ---------- */
.pi-save { display: flex; align-items: center; justify-content: center; gap: 8px; color: #fff; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; padding: 10px 14px; font-size: 14px; }
.pi-save svg { font-size: 17px; }
.saving { opacity: .75; }
.pi-save.ready, .vp-save.ready { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }
.sa-save.ready i { background: var(--accent); }

/* ---------- 「myfansからの転載なし」の表示 ---------- */
.trust-badge { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 2px 4px; margin: 12px auto 0; font-size: 12px; font-weight: 700; color: #1e7a46; background: #e9f7ef; border: 1px solid #c3e8d1; border-radius: 999px; padding: 5px 14px; }
.trust-badge b { color: #1e7a46; }
.trust-badge span { color: #9cc9ad; }
.footer-note { max-width: 760px; margin: 0 auto 10px; font-size: 11px; line-height: 1.7; color: #adb5bd; }

/* 一覧の上の説明：普段は1行、タップで開く */
details.notice { text-align: center; margin: 4px 0 16px; }
details.notice > summary { list-style: none; cursor: pointer; margin: 0 auto; }
details.notice > summary::-webkit-details-marker { display: none; }
details.notice > summary em { font-style: normal; font-weight: 400; color: #1e7a46; text-decoration: underline; margin-left: 6px; }
details.notice[open] > summary em { display: none; }
details.notice > p { text-align: left; margin: 10px 0 0; padding: 12px 14px; background: #f8f9fa; border: 1px solid var(--line); border-radius: 10px; font-size: 12px; line-height: 1.8; }

/* ---------- 広告表示（ステマ規制への対応） ---------- */
.pr-bar { margin: 0; padding: 4px 12px; text-align: center; font-size: 11px; color: #6c757d; background: #f1f3f5; border-bottom: 1px solid var(--line); }
.cta::before { content: "PR"; display: inline-block; margin-right: 8px; padding: 0 6px; border-radius: 4px; background: rgba(255,255,255,.28); font-size: 11px; line-height: 18px; vertical-align: 1px; }
/* スマホのフィードは全画面なので帯は出さず、ボタンの「PR」で表示する */
@media (max-width: 1023px) { html.feed-page .pr-bar { display: none; } }