/*!
 * JAM'S FANDOM — POP の TOP（017）。見た目の正解は docs/design/top-pop-sp.html・top-pop-pc.html。
 * 値は pop-tokens.css の変数を使う。.jfp（TOP の中身）と .jf-top-pop（TOP の時の body）の中だけに効かせる。
 * 本文の書体はテーマ（SWELL）のまま。Dela Gothic One は見出しと札だけ。
 */

/* ---------------- テーマ（SWELL）の TOP 用の部品 ---------------- */
.jf-top-pop{overflow-x:hidden;background-color:var(--pop-bg);background-image:radial-gradient(var(--pop-dot) 2.5px,transparent 3px);background-size:var(--pop-dot-size) var(--pop-dot-size)}
@supports (overflow:clip){.jf-top-pop{overflow-x:clip}}
/* 本番の SWELL はフィルターが効かず記事スライダー・ピックアップバナーを出すので CSS でも隠す（v7 と同じ） */
.jf-top-pop .p-postSlider,.jf-top-pop .p-pickupBanners{display:none!important}
.jf-top-pop #sidebar,.jf-top-pop .l-content > .l-sidebar{display:none!important}
.jf-top-pop #content,.jf-top-pop .l-content{padding-top:0!important;margin-top:0!important;display:block;background:transparent}
/* 透過ヘッダーの設定でも、TOP は白いヘッダーを上に置く（v7 と同じ）。
   021: SWELL はスマホ（959px 以下）で .l-header[data-spfix="1"]{position:sticky;top:var(--swl-adminbarH)} を使う。
   relative に変えるだけだと、ログイン中（管理バーあり）は top の 46px / 32px だけヘッダーが下にずれ、上に空きができて、すぐ下の帯を覆い隠していた。top も 0 に戻す */
.jf-top-pop .l-header.-transparent,.jf-top-pop #header.-transparent{position:relative!important;top:0!important;background:var(--color_header_bg,#fff)!important;color:var(--color_header_text,#333)!important}
.jf-top-pop .l-header.-transparent .l-header__inner,
.jf-top-pop .l-header.-transparent .c-gnav > .menu-item > a,
.jf-top-pop .l-header.-transparent .c-iconBtn,
.jf-top-pop .l-header.-transparent .l-header__customBtn,
.jf-top-pop .l-header.-transparent .l-header__menuBtn,
.jf-top-pop .l-header.-transparent .l-header__searchBtn{color:var(--color_header_text,#333)!important}
.jf-top-pop .l-header.-transparent .c-headLogo__img.-top{display:none!important}
.jf-top-pop .l-header.-transparent .c-headLogo__img.-common{display:block!important}
.jf-top-pop .l-header.-transparent ~ .l-content,.jf-top-pop .-transparent-header #content{padding-top:0!important}
.jf-top-pop #header,.jf-top-pop .l-header{border-bottom:var(--pop-line) solid var(--pop-ink);box-shadow:none}
/* サイト全体の見た目（jf_site_skin）が off でも、POP の TOP ではロゴを札にのせる（site-skin.css と同じ決まり） */
.jf-top-pop :is(.l-header,.l-fixHeader) .c-headLogo{overflow:visible;height:auto}
.jf-top-pop :is(.l-header,.l-fixHeader) .c-headLogo__link{display:block;box-sizing:border-box;background:var(--pop-ink);border-radius:12px;padding:5px 12px 4px 10px;transform:rotate(-1.5deg);box-shadow:3px 3px 0 var(--pop-lime),3px 3px 0 2px var(--pop-ink)}
.jf-top-pop :is(.l-header,.l-fixHeader) .c-headLogo__img{height:38px!important;width:auto!important;max-width:none}
@media (min-width:960px){
  .jf-top-pop .l-header .c-headLogo__link{padding:7px 16px 5px 14px;border-radius:14px;box-shadow:4px 4px 0 var(--pop-lime),4px 4px 0 2px var(--pop-ink)}
  .jf-top-pop .l-header .c-headLogo__img{height:50px!important}
  .jf-top-pop .l-header .c-headLogo{margin-right:22px}
}

/* MV の枠: SWELL のメインビジュアル（動画）をそのまま出し、下に枠の線。スマホ 16:9・PC 21:8 */
.jf-top-pop #main_visual{border-bottom:var(--pop-line) solid var(--pop-ink);background:#0d2f23}
.jf-top-pop #main_visual .p-mainVisual__inner{height:auto!important;min-height:0!important;aspect-ratio:16/9;position:relative}
.jf-top-pop #main_visual .p-mainVisual__imgLayer{position:absolute;inset:0}
.jf-top-pop #main_visual .p-mainVisual__video,.jf-top-pop #main_visual .p-mainVisual__imgLayer img{width:100%!important;height:100%!important;max-width:none!important;object-fit:cover!important}
@media (min-width:900px){
  .jf-top-pop #main_visual .p-mainVisual__inner{aspect-ratio:21/8;max-height:560px;width:100%}
}

/* ---------------- 023: MV を青りんごのテレビに入れる ----------------
   見た目の正解は docs/design/mv-tv-sp.html・mv-tv-pc.html。帯（#jf-pop-tv）は TOP のテンプレートが hidden で出し、
   直後の script が #main_visual の前へ動かして #main_visual を画面（.jfp-tv-screen）に入れる。JS が無い時は上の「MV の枠」のまま。
   枠の箱は aspect-ratio で先に場所を取る（中身を動かす前後で下の要素がずれない）。 */
.jf-top-pop .jfp-tv{
  position:relative;overflow:hidden;box-sizing:border-box;
  background-color:var(--pop-lime);
  background-image:radial-gradient(var(--pop-tv-dot) 2.5px,transparent 3px);
  background-size:var(--pop-dot-size) var(--pop-dot-size);
  border-bottom:var(--pop-line) solid var(--pop-ink);
  /* 上は札の分（札の上の端から帯の上の端まで 8px 前後・モック v3）。900px までは、テレビが大きくなる分だけ 29px → 8px へ減らす */
  padding:clamp(8px,calc(29px - (100vw - 390px) * 21 / 510),29px) 4px 16px;
}
.jf-top-pop .jfp-tv[hidden]{display:none}
.jf-top-pop .jfp-tv *,.jf-top-pop .jfp-tv *::before,.jf-top-pop .jfp-tv *::after{box-sizing:border-box}
.jf-top-pop .jfp-tv-set{position:relative;width:100%;max-width:960px;margin:0 auto;aspect-ratio:400/286}
.jf-top-pop .jfp-tv-frame{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.jf-top-pop .jfp-tv-screen{
  position:absolute;left:3.25%;top:16.08%;width:93.5%;height:73.57%;
  border:var(--pop-line) solid var(--pop-ink);border-radius:10px;overflow:hidden;isolation:isolate;
  background-color:var(--pop-tv-screen);
  background-image:radial-gradient(var(--pop-tv-screen-dot) 2px,transparent 2.5px);
  background-size:16px 16px;
}
/* 走査線とつや（モックの 2 枚）。押せないように */
.jf-top-pop .jfp-tv-scan,.jf-top-pop .jfp-tv-gloss{position:absolute;pointer-events:none;z-index:5}
.jf-top-pop .jfp-tv-scan{inset:0;background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 4px)}
.jf-top-pop .jfp-tv-gloss{left:-10%;top:-30%;width:60%;height:80%;background:radial-gradient(closest-side,rgba(255,255,255,.14),transparent);transform:rotate(-20deg)}
/* 飾りは PC（1100px 以上）だけ */
.jf-top-pop .jfp-tv-deco{display:none;position:absolute;pointer-events:none}
.jf-top-pop .jfp-tv-apple svg{display:block}

/* 画面の中のメインビジュアル: 画面いっぱい。SWELL の -height-set の高さ（.p-mainVisual__inner{height:55vh} など）と、
   上の「MV の枠」の !important（16:9・21:8）を画面の中だけ上書きするため、height・min-height に !important を使う */
.jf-top-pop .jfp-tv-screen #main_visual{position:absolute;inset:0;z-index:1;border:0;background:transparent;margin:0}
.jf-top-pop .jfp-tv-screen #main_visual .p-mainVisual__inner{position:absolute;inset:0;height:100%!important;min-height:0!important;max-height:none;aspect-ratio:auto;width:100%}
.jf-top-pop .jfp-tv-screen #main_visual .p-mainVisual__imgLayer{position:absolute;inset:0;overflow:hidden}
.jf-top-pop .jfp-tv-screen #main_visual .p-mainVisual__video{object-position:50% 50%}
.jf-top-pop .jfp-tv-screen .jfp-tv-yt{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}

/* 文字（023 の追加変更・モック v3）: SWELL の文言（.p-mainVisual__slideTitle / __slideText）を、テレビの外の左上と右上の札にする。
   画面にも枠にも重ねない。札の下の端は枠の上の線（テレビの箱の上から 11.9%）より 4px 上。傾きの起点は札の下の端。
   札はテレビの帯の script が #main_visual から動かす（文言は SWELL の設定のまま）。画面の中の文字の箱は使わない */
.jf-top-pop .jfp-tv-screen #main_visual .p-mainVisual__textLayer{display:none}
/* 札の箱は flex（テーマの行の高さで札の下に隙間ができないよう、札の下の端 = 箱の下の端にする） */
.jf-top-pop .jfp-tv-label{position:absolute;bottom:calc(88.1% + 4px);z-index:2;pointer-events:none;margin:0;display:flex;align-items:flex-end}
.jf-top-pop .jfp-tv-label.is-l{left:3%;max-width:45%;justify-content:flex-start;transform:rotate(-3deg);transform-origin:left bottom}
.jf-top-pop .jfp-tv-label.is-r{right:3%;max-width:31%;justify-content:flex-end;text-align:right;transform:rotate(3deg);transform-origin:right bottom}
.jf-top-pop .jfp-tv-label > *{
  display:inline-block;margin:0;max-width:100%;
  font-family:var(--pop-display);font-weight:400;line-height:1.25;letter-spacing:0;
  color:var(--pop-ink);text-shadow:none;background:var(--pop-white);
  border:var(--pop-line-s) solid var(--pop-ink);border-radius:4px;box-shadow:3px 3px 0 var(--pop-ink);
  padding:3px 8px 4px;
  /* スマホ 12px → 900px で左 22px・右 20px（モックの 2 つの幅の間はなめらかに） */
  font-size:clamp(12px,calc(12px + (100vw - 390px) * 10 / 510),22px);
}
.jf-top-pop .jfp-tv-label.is-r > *{background:var(--pop-yellow);font-size:clamp(12px,calc(12px + (100vw - 390px) * 8 / 510),20px)}

@media (min-width:900px){
  /* 上は札の分（札の上の端から帯の上の端まで 20px 前後・モック v3） */
  .jf-top-pop .jfp-tv{padding:8px 40px 40px}
  .jf-top-pop .jfp-tv-screen{border-radius:16px}
  .jf-top-pop .jfp-tv-label > *{border-width:var(--pop-line);box-shadow:var(--pop-shadow-s);padding:5px 14px 7px}
}
@media (min-width:1100px){
  /* 飾りがテレビに重ならないよう、左右に 100px ずつ空ける（1240px 以上の幅でテレビは 960px） */
  .jf-top-pop .jfp-tv-set{max-width:min(960px,calc(100% - 200px))}
  .jf-top-pop .jfp-tv-deco{display:block}
  .jf-top-pop .jfp-tv-apple.is-l{left:1.5%;top:36%;width:84px;transform:rotate(-14deg)}
  .jf-top-pop .jfp-tv-apple.is-r{right:1.8%;top:34%;width:72px;transform:rotate(12deg)}
}

/* ---------------- 土台 ---------------- */
.jfp{
  color:var(--pop-ink);
  display:flex;flex-direction:column;gap:20px;
  padding:20px 0 8px;
  min-width:0;width:100%;
  font-size:14px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.jfp *,.jfp *::before,.jfp *::after{box-sizing:border-box}
.jfp [hidden]{display:none!important}
.jfp a{color:inherit;text-decoration:none}
.jfp button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;text-transform:none;letter-spacing:inherit;box-shadow:none;border-radius:0;min-height:0;width:auto;-webkit-appearance:none;appearance:none;text-align:inherit}
.jfp ul{list-style:none;margin:0;padding:0}
.jfp li{margin:0;padding:0}
.jfp li::before{content:none}
.jfp p{margin:0}
.jfp img{max-width:100%;height:auto;display:block}
.jfp svg{display:block;flex:none}
.jfp h2,.jfp h3{margin:0;padding:0;border:0;background:none;color:inherit;font-size:inherit;line-height:inherit;letter-spacing:0}
.jfp h2::before,.jfp h2::after,.jfp h3::before,.jfp h3::after{content:none}
.jfp :focus-visible{outline:3px solid var(--pop-ink);outline-offset:3px}
.jfp-vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.jfp-apple{display:block;flex:none}

/* ---------------- 1. ヘッダー帯 ---------------- */
.jfp-band{
  background:var(--pop-ink);color:var(--pop-on-ink);
  display:flex;align-items:center;gap:10px;flex-wrap:nowrap;
  min-height:44px;padding:8px 14px;box-sizing:border-box;width:100%;overflow:hidden;
  font-size:13px;font-weight:700;line-height:1.5;
}
/* メインビジュアルが無い時は中身の先頭に残る。コンテナの外まで広げる */
.jfp > .jfp-band{width:100vw;margin:-20px 0 0 calc(50% - 50vw)}
.jfp-band [hidden]{display:none!important}
.jfp-band svg{display:block;flex:none}
.jfp-band-day{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;flex:none}
.jfp-band .jfp-band-wx{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;background:none;border:0;margin:-8px 0;padding:0 2px;min-height:44px;color:inherit;font:inherit;cursor:pointer}
.jfp-band-wx-ic{opacity:.9;transition:transform .15s}
.jfp-band-wx[aria-expanded=true] .jfp-band-wx-ic{transform:rotate(180deg)}
.jfp-band-wx:focus-visible{outline:3px solid var(--pop-next);outline-offset:-3px;border-radius:8px}
/* 帯の天気を押すとひらく 1 週間の天気（帯のすぐ下・帯と同じ濃い緑の上に白い面） */
.jfp-bandpanel{background:var(--pop-ink);padding:2px 12px 12px;box-sizing:border-box;width:100%;color:var(--pop-ink)}
.jfp-bandpanel[hidden]{display:none}
.jfp > .jfp-bandpanel{width:100vw;margin-left:calc(50% - 50vw)}
.jfp-bandpanel-in{background:var(--pop-white);border-radius:var(--pop-radius-m);padding:10px 8px 8px;max-width:560px;font-size:13px;line-height:1.5}
.jfp-bandpanel .jfp-src{padding:6px 6px 0}
.jfp-bandpanel .jfp-src a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.jfp-bandpanel .jfp-apple{display:block}
@media (min-width:900px){.jfp-bandpanel{padding:2px 40px 14px}}
.jfp-next{
  display:inline-flex;align-items:center;gap:8px;flex:1 1 0;min-width:0;min-height:28px;
  font:inherit;font-weight:700;color:var(--pop-on-ink);background:none;border:0;padding:0;margin:0;cursor:pointer;text-align:left;
  -webkit-appearance:none;appearance:none;box-shadow:none;border-radius:0;
}
.jfp-next-l{background:var(--pop-next);color:var(--pop-ink);border-radius:var(--pop-pill);padding:1px 9px 2px;font-family:var(--pop-display);font-size:12px;font-weight:400;flex:none}
.jfp-next-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.jfp-next:focus-visible{outline:3px solid var(--pop-next);outline-offset:2px}
@media (hover:hover){.jfp-next:hover .jfp-next-t{text-decoration:underline}}

/* ---------------- 見出し・ボタン・札 ---------------- */
.jfp-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.jfp .jfp-h{
  display:inline-block;background:var(--pop-white);border:var(--pop-line) solid var(--pop-ink);box-shadow:var(--pop-shadow-s);
  padding:3px 12px 6px;font-family:var(--pop-display);font-size:19px;font-weight:400;line-height:1.3;transform:rotate(-2deg);
}
.jfp .jfp-btn{
  display:inline-flex;align-items:center;gap:6px;background:var(--pop-ink);color:var(--pop-on-ink-2);border-radius:var(--pop-pill);
  padding:11px 18px;font-size:14px;font-weight:700;line-height:22px;min-height:var(--pop-tap);
}
.jfp-pill{
  display:inline-block;background:var(--pop-white);color:var(--pop-ink);border:var(--pop-line-s) solid var(--pop-ink);border-radius:var(--pop-pill);
  padding:2px 10px 3px;font-family:var(--pop-display);font-size:13px;font-weight:400;white-space:nowrap;line-height:1.5;
}
/* モックは白い文字だが、#ff6fae の上の白は 2.6:1 なので濃い緑の文字にする（4.6:1） */
.jfp-pill.is-hot{background:var(--pop-hot);color:var(--pop-ink)}
.jfp-actions{margin-top:14px;display:flex;gap:10px 12px;flex-wrap:wrap;align-items:center}
.jfp-help,.jfp-note{font-size:13px;line-height:1.7;color:var(--pop-ink-2)}
.jfp .jfp-help{margin-top:12px}
.jfp .jfp-note{margin-top:6px;font-size:12px}
.jfp-help a,.jfp-src a,.jfp-credit a{text-decoration:underline;text-underline-offset:2px}
.jfp-src{font-size:11px;line-height:1.6;color:var(--pop-ink-2)}
.jfp .jfp-src{padding:6px 6px 0}
.jfp-credit{font-size:12px;line-height:1.7;color:var(--pop-ink-2);text-align:center}
.jfp .jfp-credit{padding:4px 0 12px}

/* 面のカード */
.jfp-box{border:var(--pop-line) solid var(--pop-ink);border-radius:var(--pop-radius);box-shadow:var(--pop-shadow);padding:18px;min-width:0;background:var(--pop-white)}
.jfp-box.is-yellow{background:var(--pop-yellow)}
.jfp-box.is-sky{background:var(--pop-sky)}
.jfp-box.is-pink{background:var(--pop-pink)}
.jfp-box.is-lime{background:var(--pop-lime)}
.jfp-box.jfp-sched{padding:14px}
/* 影の分だけ右と下をあける */
.jfp-sec,.jfp-entries,.jfp-two,.jfp-cols,.jfp-pg,.jfp-search{margin-right:6px}

/* ---------------- 4. 検索 ---------------- */
.jfp-search{position:relative}
.jfp-sform{display:flex;align-items:center;gap:8px;background:var(--pop-white);border:var(--pop-line) solid var(--pop-ink);border-radius:var(--pop-pill);box-shadow:var(--pop-shadow-s);padding:4px 4px 4px 14px;min-height:52px}
.jfp-sform > svg{color:var(--pop-ink)}
.jfp .jfp-sform input[type=search]{flex:1;min-width:0;border:0;background:transparent;color:var(--pop-ink);font:inherit;font-size:16px;line-height:1.5;padding:8px 0;margin:0;outline:0;box-shadow:none;height:auto;border-radius:0;-webkit-appearance:none;appearance:none}
.jfp-sform input[type=search]::placeholder{color:var(--pop-ink-2);opacity:1}
.jfp-sform:focus-within{outline:3px solid var(--pop-ink);outline-offset:3px}
.jfp .jfp-sgo{background:var(--pop-ink);color:var(--pop-on-ink-2);border-radius:var(--pop-pill);padding:0 18px;min-height:var(--pop-tap);font-size:14px;font-weight:700;flex:none}
.jfp-results{position:absolute;left:0;right:0;top:calc(100% + 10px);z-index:30;background:var(--pop-white);border:var(--pop-line) solid var(--pop-ink);border-radius:var(--pop-radius-m);box-shadow:var(--pop-shadow);padding:10px;max-height:70vh;overflow:auto;overscroll-behavior:contain}
.jfp-results .rh{font-size:12px;color:var(--pop-ink-2);padding:2px 6px 6px}
.jfp-results .kind{font-family:var(--pop-display);font-size:13px;padding:10px 6px 4px}
.jfp-results .msg{font-size:13px;color:var(--pop-ink-2);padding:6px}
.jfp-results .art,.jfp .jfp-results .drow{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:var(--pop-tap);padding:8px 6px;border-radius:var(--pop-radius-xs);text-align:left;font-size:14px;line-height:1.45}
.jfp-results .art b,.jfp-results .drow .t{font-weight:700}
.jfp-results .art small,.jfp-results .drow .s{display:block;font-size:12px;color:var(--pop-ink-2);font-weight:400;white-space:nowrap}
.jfp-results .drow > span:first-child{min-width:0}
.jfp-results .drow .due{font-size:12px;font-weight:700;white-space:nowrap;border:var(--pop-line-s) solid var(--pop-ink);border-radius:var(--pop-pill);padding:1px 8px}
.jfp-results .drow .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--c,var(--pop-ink));margin-right:6px}
.jfp-results .all{display:flex;align-items:center;min-height:var(--pop-tap);padding:8px 6px;font-size:14px;font-weight:700;text-decoration:underline;text-underline-offset:2px}
@media (hover:hover){.jfp-results .art:hover,.jfp-results .drow:hover{background:var(--pop-lime)}}

/* ---------------- 5. 新着記事 ---------------- */
.jfp-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.jfp-card{display:flex;flex-direction:column;gap:8px;min-width:0}
.jfp-thumb{position:relative;display:block;aspect-ratio:16/10;border-radius:var(--pop-radius-s);background:var(--pop-white);border:var(--pop-line) solid var(--pop-ink);box-shadow:var(--pop-shadow-s);overflow:hidden}
.jfp .jfp-thumb img{width:100%;height:100%;object-fit:cover}
.jfp-tag{position:absolute;left:8px;top:8px;max-width:calc(100% - 16px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:var(--pop-yellow);color:var(--pop-ink);border:var(--pop-line-s) solid var(--pop-ink);border-radius:var(--pop-pill);padding:0 8px 1px;font-size:11px;font-weight:700;line-height:1.6}
.jfp-card-t{font-size:14px;font-weight:700;line-height:1.45;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.jfp-card-d{font-size:12px;color:var(--pop-ink-2)}
@media (hover:hover){.jfp-card:hover .jfp-card-t{text-decoration:underline;text-underline-offset:2px}}

/* ---------------- 6. 入口 ---------------- */
.jfp-entries{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px}
.jfp-entry{
  position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:56px;padding:6px 8px;border:var(--pop-line) solid var(--pop-ink);border-radius:var(--pop-radius-m);box-shadow:var(--pop-shadow-s);
  font-family:var(--pop-display);font-size:15px;line-height:1.3;color:var(--pop-ink);background:var(--pop-white);
}
.jfp-entry.is-yellow{background:var(--pop-yellow)}
.jfp-entry.is-pink{background:var(--pop-pink)}
.jfp-entry.is-sky{background:var(--pop-sky)}
.jfp-entry.is-lime{background:var(--pop-lime)}
/* 画像つきのボタン: 画像を面いっぱいに置き、名前は白い札にのせる */
.jfp-entry.has-img{min-height:96px;align-items:flex-end;justify-content:flex-start;padding:8px}
.jfp .jfp-entry.has-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.jfp-entry.has-img span{position:relative;background:var(--pop-white);border:var(--pop-line-s) solid var(--pop-ink);border-radius:var(--pop-pill);padding:1px 10px 2px;font-size:13px}

/* ---------------- 7. 今日のミセス ---------------- */
.jfp-two{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-items:start}
.jfp-date{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.jfp-date-md{font-family:var(--pop-display);font-size:40px;line-height:1.05}
.jfp-date-dow{font-size:18px;font-weight:900}
.jfp-wx{margin-top:14px}
.jfp .jfp-wx-btn{
  width:100%;display:flex;align-items:center;gap:10px;min-height:56px;padding:10px 12px;
  background:var(--pop-white);border:var(--pop-line) solid var(--pop-ink);border-radius:var(--pop-radius-m);text-align:left;
}
.jfp-wx-txt{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0}
.jfp-wx-l1{font-size:13px;font-weight:700}
.jfp-wx-l2{font-size:12px;color:var(--pop-ink-2)}
.jfp-wx-btn[aria-expanded=true] .jfp-ic{transform:rotate(180deg)}
.jfp-wx-panel{margin-top:10px;background:var(--pop-white);border:var(--pop-line) solid var(--pop-ink);border-radius:var(--pop-radius-m);padding:10px 8px 8px}
.jfp-pref{display:flex;align-items:center;gap:10px;padding:0 6px 8px;font-size:13px;font-weight:900}
.jfp .jfp-pref select,.jfp-bandpanel .jfp-pref select{flex:1;min-width:0;max-width:240px;min-height:var(--pop-tap);font:inherit;font-size:16px;font-weight:700;color:var(--pop-ink);background-color:var(--pop-white);border:var(--pop-line-s) solid var(--pop-ink);border-radius:var(--pop-radius-xs);padding:0 10px;margin:0;box-shadow:none}

/* 1 週間の天気の表（今日のミセス・次のライブ会場で共通） */
.jfp-wxt{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px}
.jfp-wxd{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 2px;border-radius:var(--pop-radius-xs);min-width:0}
.jfp-wxd.is-live{background:var(--pop-yellow)}
.jfp-wxd-d{font-size:12px;font-weight:700;white-space:nowrap}
.jfp-wxd.is-sat .jfp-wxd-d{color:var(--pop-sat)}
.jfp-wxd.is-sun .jfp-wxd-d{color:var(--pop-sun)}
.jfp-wxd-w{font-size:12px;font-weight:700;line-height:1.3;white-space:nowrap}
.jfp-wxd-max{font-size:12px;font-weight:700}
.jfp-wxd-min,.jfp-wxd-pop{font-size:11px;color:var(--pop-ink-2)}
.jfp-wxd-mark{font-size:10px;font-weight:900;height:13px;line-height:13px}
.jfp-wxd .jfp-none{width:26px;height:29px;display:flex;align-items:center;justify-content:center;color:var(--pop-ink-2)}

/* ---------------- 8. 次のライブ会場 ---------------- */
.jfp-live-name{font-family:var(--pop-display);font-size:24px;font-weight:400;line-height:1.3}
.jfp-live-when{margin-top:6px;font-size:14px;font-weight:700;line-height:1.6}
.jfp-live-time{font-size:14px;line-height:1.6}
.jfp-live-wx{margin-top:14px;background:var(--pop-white);border:var(--pop-line) solid var(--pop-ink);border-radius:var(--pop-radius-m);padding:10px 8px 8px}
.jfp-live-wx-h{display:flex;justify-content:space-between;align-items:center;padding:0 6px 6px;font-size:13px;font-weight:900}

/* ---------------- 9. スケジュール（たたむ） ---------------- */
.jfp-cols{display:flex;flex-direction:column;gap:20px}
.jfp-col-main,.jfp-col-side{min-width:0;display:flex;flex-direction:column;gap:20px}
.jfp-cal-t{font-family:var(--pop-display);font-size:18px;line-height:1.4;margin-bottom:8px}
.jfp-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px}
.jfp-dow{text-align:center;font-size:12px;font-weight:700;color:var(--pop-ink-2);padding:2px 0}
.jfp-dow.is-sat{color:var(--pop-sat)}
.jfp-dow.is-sun{color:var(--pop-sun)}
.jfp .jfp-cell{
  display:flex;flex-direction:column;gap:2px;align-items:center;min-height:66px;padding:4px 0;min-width:0;width:100%;
  border-radius:var(--pop-radius-xs);background:var(--pop-white);border:var(--pop-line-s) solid var(--pop-ink);
}
.jfp-cal[data-view=month] .jfp-cell{min-height:56px}
.jfp .jfp-cell.is-live{background:var(--pop-yellow)}
.jfp .jfp-cell.is-out{background:transparent;border-color:transparent}
.jfp .jfp-cell[aria-pressed=true]{box-shadow:inset 0 0 0 2px var(--pop-ink)}
.jfp-num{height:28px;min-width:28px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700}
.jfp-cell.is-sat .jfp-num{color:var(--pop-sat)}
.jfp-cell.is-sun .jfp-num{color:var(--pop-sun)}
.jfp-cell.is-out .jfp-num{color:var(--pop-ink-3)}
.jfp-cell.is-today .jfp-num{width:28px;border-radius:50%;background:var(--pop-ink);color:var(--pop-on-ink);font-weight:900}
.jfp-marks{display:flex;align-items:center;justify-content:center;gap:3px;height:22px;min-width:0}
.jfp-dot{width:7px;height:7px;border-radius:50%;background:var(--c,var(--pop-ink));display:block;flex:none}
.jfp-more{font-size:10px;font-weight:700;line-height:1}
.jfp-names{display:none}
.jfp .cat-live{--c:var(--pop-c-live)}
.jfp .cat-release{--c:var(--pop-c-release)}
.jfp .cat-stream{--c:var(--pop-c-stream)}
.jfp .cat-media{--c:var(--pop-c-media)}
.jfp .cat-magazine{--c:var(--pop-c-magazine)}
.jfp .cat-goods{--c:var(--pop-c-goods)}
.jfp .cat-entry{--c:var(--pop-c-entry)}
.jfp-legend{margin-top:12px;display:flex;gap:6px 14px;flex-wrap:wrap}
.jfp-key{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--pop-ink-2)}
.jfp-key .jfp-dot{width:8px;height:8px}
.jfp-daylist{margin-top:10px}
.jfp .jfp-daylist-t{font-size:13px;font-weight:900;margin:0 0 6px;padding:0 2px}
.jfp .jfp-list{background:var(--pop-white);border:var(--pop-line) solid var(--pop-ink);border-radius:var(--pop-radius-s);padding:4px 12px}
.jfp .jfp-item{display:flex;align-items:center;gap:10px;width:100%;min-height:var(--pop-tap);padding:8px 0;text-align:left}
.jfp-list li + li{border-top:var(--pop-line-s) dotted var(--pop-ink)}
.jfp-item-tm{font-size:15px;font-weight:900;width:48px;flex:none;white-space:nowrap}
.jfp-item-tm.is-ad{font-size:12px}
.jfp-item-t{flex:1;min-width:0;font-size:14px;font-weight:700;line-height:1.4}
.jfp-item-c{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--pop-ink-2);white-space:nowrap}
.jfp-empty{font-size:13px;color:var(--pop-ink-2);padding:10px 0;min-height:var(--pop-tap);display:flex;align-items:center}
.jfp .jfp-toggle{
  display:inline-flex;align-items:center;gap:6px;min-height:46px;padding:0 18px;
  border:var(--pop-line) solid var(--pop-ink);background:var(--pop-white);color:var(--pop-ink);border-radius:var(--pop-pill);box-shadow:var(--pop-shadow-s);
  font-size:14px;font-weight:700;
}
.jfp-toggle[aria-expanded=true] .jfp-ic{transform:rotate(180deg)}

/* ---------------- 10. 締切が近いもの ---------------- */
.jfp .jfp-duelist{display:flex;flex-direction:column;gap:8px}
.jfp .jfp-dueitem{display:flex;align-items:center;gap:12px;width:100%;min-height:var(--pop-tap);padding:12px;border-radius:var(--pop-radius-s);background:var(--pop-white);border:var(--pop-line) solid var(--pop-ink);text-align:left}
.jfp-dueitem-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.jfp-dueitem-t{font-size:14px;font-weight:700;line-height:1.4}
.jfp-dueitem-s{font-size:12px;color:var(--pop-ink-2)}
.jfp-duelist .jfp-empty{background:var(--pop-white);border:var(--pop-line) solid var(--pop-ink);border-radius:var(--pop-radius-s);padding:12px}

/* ---------------- 11. 茶番と共犯 いまの空気 ---------------- */
.jfp-airbar{display:flex;height:26px;border-radius:var(--pop-pill);overflow:hidden;border:var(--pop-line) solid var(--pop-ink);background:var(--pop-white)}
.jfp-airbar span{display:block;height:100%}
.jfp-air .is-pos{background:var(--pop-air-pos)}
.jfp-air .is-neg{background:var(--pop-air-neg)}
.jfp-air .is-meta{background:var(--pop-air-meta)}
.jfp-airkey{margin-top:10px;display:flex;gap:6px 16px;flex-wrap:wrap}
.jfp-airkey span{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700}
.jfp-airkey i{width:10px;height:10px;border-radius:50%;display:block;flex:none}

/* ---------------- 12. フォトギャラリー（部品は v7 と同じ。枠だけ POP） ---------------- */
.jfp-pgtabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.jfp .jfp-pgtabs button{min-height:var(--pop-tap);padding:0 16px;border:var(--pop-line-s) solid var(--pop-ink);border-radius:var(--pop-pill);background:var(--pop-white);font-size:14px;font-weight:700}
.jfp .jfp-pgtabs button[aria-selected=true]{background:var(--pop-ink);color:var(--pop-on-ink-2)}
.jfp-bento{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.jfp-bento.is-loading{opacity:.5}
.jfp-bento .tile{position:relative;display:block;overflow:hidden;aspect-ratio:1/1;border:var(--pop-line) solid var(--pop-ink);border-radius:var(--pop-radius-s);background:var(--pop-lime);color:#fff}
.jfp-bento .tile.big{grid-column:1/-1;aspect-ratio:16/10}
.jfp-bento .ph2{position:absolute;inset:0;display:block}
.jfp .jfp-bento .ph2 img{width:100%;height:100%;object-fit:cover}
.jfp-bento .tile::after{content:"";position:absolute;left:0;right:0;bottom:0;height:60%;background:linear-gradient(180deg,rgba(13,47,35,0),rgba(13,47,35,.88));pointer-events:none}
.jfp-bento .mem{position:absolute;left:8px;top:8px;z-index:1;background:var(--pop-white);color:var(--pop-ink);border:var(--pop-line-s) solid var(--pop-ink);border-radius:var(--pop-pill);padding:0 8px 1px;font-size:11px;font-weight:700;line-height:1.6}
.jfp-bento .nw{position:absolute;right:8px;top:8px;z-index:1;background:var(--pop-hot);color:var(--pop-ink);border:var(--pop-line-s) solid var(--pop-ink);border-radius:var(--pop-pill);padding:0 8px 1px;font-family:var(--pop-display);font-size:11px;line-height:1.6}
.jfp-bento .cap{position:absolute;left:10px;right:10px;bottom:8px;z-index:1;display:flex;flex-direction:column;gap:2px}
.jfp-bento .cap b{font-size:13px;line-height:1.4;font-weight:700;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.jfp-bento .cap small{font-size:11px}
.jfp-bento .pg-none{grid-column:1/-1;font-size:13px;color:var(--pop-ink-2);padding:12px 0}

/* ---------------- タブレット（600px 以上） ---------------- */
@media (min-width:600px){
  .jfp-cards{grid-template-columns:repeat(4,minmax(0,1fr))}
  .jfp-entries{grid-template-columns:repeat(3,minmax(0,1fr))}
  .jfp-two{grid-template-columns:repeat(2,minmax(0,1fr))}
  .jfp-two.is-one{grid-template-columns:minmax(0,1fr)}
  .jfp-bento{grid-template-columns:repeat(4,minmax(0,1fr))}
  .jfp-bento .tile.big{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
}

/* ---------------- PC（900px 以上） ---------------- */
@media (min-width:900px){
  .jfp{gap:28px;padding:32px 0 12px}
  .jfp-band{padding:8px 40px;gap:18px}
  .jfp > .jfp-band{margin-top:-32px}
  .jfp-cards{gap:20px}
  .jfp-entries{grid-template-columns:repeat(var(--n,5),minmax(0,1fr));gap:14px}
  .jfp-two{gap:28px}
  .jfp-date-md{font-size:46px}
  .jfp-live-name{font-size:26px}
  .jfp-cols{flex-direction:row;gap:28px;align-items:flex-start}
  .jfp-col-main{flex:2;gap:28px}
  .jfp-col-side{flex:1;gap:28px}
  .jfp-box.jfp-sched{padding:18px}
  .jfp-grid{gap:6px}
  /* マスの中に短い名前も出す */
  .jfp .jfp-cell{min-height:92px;align-items:flex-start;padding:6px}
  .jfp-cal[data-view=month] .jfp-cell{min-height:80px}
  .jfp-marks{display:none}
  .jfp-names{display:flex;flex-direction:column;gap:3px;width:100%;min-width:0}
  .jfp-name{display:flex;align-items:center;gap:4px;font-size:11px;font-weight:700;line-height:1.3;min-width:0;text-align:left}
  .jfp-name > span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
  .jfp-bento{gap:14px}
}

/* ---------------- 動きを減らす ---------------- */
.jfp-ic{transition:transform .15s ease}
@media (hover:hover){
  .jfp .jfp-btn,.jfp .jfp-toggle,.jfp-entry,.jfp-thumb{transition:transform .12s ease,box-shadow .12s ease}
  .jfp .jfp-toggle:hover,.jfp-entry:hover,.jfp-card:hover .jfp-thumb{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--pop-ink)}
  .jfp .jfp-btn:hover{transform:translateY(-1px)}
}
@media (prefers-reduced-motion:reduce){
  .jfp *,.jfp *::before,.jfp *::after,.jfp-band *{transition:none!important;animation:none!important}
  .jfp .jfp-toggle:hover,.jfp-entry:hover,.jfp-card:hover .jfp-thumb,.jfp .jfp-btn:hover{transform:none}
}

/* ---------------- 027: 年末年始の特集への入口（黄緑のネオン） ---------------- */
.jfp .jfp-ye{
  display:flex;align-items:center;gap:10px;min-height:96px;padding:14px 12px;margin-right:6px;text-decoration:none;
  background-color:#082117;background-image:radial-gradient(rgba(255,255,255,.85) 1.5px,transparent 2px);background-size:28px 28px;
  border:3px solid #d6ff6b;border-radius:var(--pop-radius);
  box-shadow:0 0 14px #8fdc1a,5px 5px 0 var(--pop-ink);color:#fff;
}
.jfp-ye-art{flex:none;display:flex}
.jfp-ye-art svg{display:block}
.jfp-ye-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.jfp-ye-k{align-self:flex-start;font-family:var(--pop-display);font-size:12px;color:var(--pop-ink);background:#ffd85e;border-radius:var(--pop-pill);padding:2px 10px}
.jfp-ye-t{font-family:var(--pop-display);font-size:18px;line-height:1.3;color:#d6ff6b;text-shadow:0 0 1px #0a2a12,0 0 9px rgba(155,226,26,.75),0 0 20px rgba(111,196,0,.5)}
.jfp-ye-t > span{display:inline-block}
.jfp-ye-s{font-size:12px;font-weight:700;line-height:1.5;color:#fff}
.jfp .jfp-ye:hover .jfp-ye-t{text-decoration:underline;text-underline-offset:3px}
@media (max-width:379px){.jfp-ye-art.is-r{display:none}}
@media (min-width:900px){.jfp .jfp-ye{padding:16px 24px;gap:18px}.jfp-ye-t{font-size:24px}.jfp-ye-s{font-size:13px}}