/* ===== Merchant Media — 会員番組ディレクトリ（公開・MCサイト配色：白/紺/金） ===== */
:root{
  --bg:#ffffff; --bg2:#f6f8fa; --card:#ffffff; --cream:#FFF6E9; --gold-soft:#f5ebd6;
  --navy:#3f5973; --navy-d:#2e4153; --ink:#2a3340; --mut:#5b6573; --mut2:#8ba0b6;
  --gold:#cf9b3f; --gold-d:#b9842b; --line:#e6ebf0; --line2:#eef1f5;
  /* stand.fm ブランド＝オレンジ（共有ロゴ準拠）。ロゴのアクセント色 */
  --orange:#f26b1a; --orange-d:#e15e0c; --orange-l:#fb8c3d; --logo-ink:#23282e;
  /* トップバンド＝さわやかな水色寄りの青（上は水色→下はやや濃く、白文字が映える） */
  --band-l:#3aaee0; --band:#1c88c8; --band-d:#1574af;
  --font:"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP",system-ui,-apple-system,"Yu Gothic",Meiryo,sans-serif;
  --maxw:1180px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg); color:var(--ink); font-family:var(--font);
  -webkit-font-smoothing:antialiased; line-height:1.7}
a{color:inherit}
.loading{padding:80px 0; text-align:center; color:var(--mut)}
.spinner{width:30px;height:30px;margin:0 auto 12px;border:3px solid var(--line);
  border-top-color:var(--gold);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- トップバー ---------- */
.topbar{position:sticky; top:0; z-index:30; display:flex; align-items:center; justify-content:space-between;
  gap:14px; padding:10px 26px; background:rgba(255,255,255,.94); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line)}
/* ロゴ：左にマイク＋オレンジ波形アイコン／右に上段 MERCHANT CLUB・下段 stand.fm（fm がオレンジ） */
.brand{display:inline-flex; align-items:center; gap:11px; white-space:nowrap; text-decoration:none; transition:opacity .15s}
.brand:hover{opacity:.8}
/* 公式ロゴ画像（logo.png）。未配置時は onerror で下のSVGロックアップにフォールバック */
.brand-img{height:44px; width:auto; display:block}
.brand-lockup{display:inline-flex; align-items:center; gap:11px}
.brand-ico{height:40px; width:auto; flex:0 0 auto; display:block}
.brand-tw{display:flex; flex-direction:column; align-items:flex-start; line-height:1; gap:4px}
.brand-club{font-size:15px; font-weight:800; letter-spacing:.06em; color:var(--logo-ink)}
.brand-fm{font-size:22px; font-weight:900; letter-spacing:.005em; color:var(--logo-ink); line-height:.9}
.brand-fm .o{color:var(--orange)}
.reg-link{font-size:13px; color:var(--navy); font-weight:500; text-decoration:none;
  border:1px solid var(--line); border-radius:20px; padding:7px 15px; transition:.15s; white-space:nowrap}
.reg-link:hover{border-color:var(--orange); color:var(--orange-d)}

/* ---------- 見出し〜検索のオレンジ全幅帯（stand.fm ブランド色） ---------- */
.topband{background:
    radial-gradient(78% 64% at 88% -14%, rgba(255,255,255,.20), transparent 60%),
    radial-gradient(64% 80% at 2% 122%, rgba(0,0,0,.14), transparent 60%),
    linear-gradient(180deg,var(--band-l) 0%, var(--band) 100%);
  border-bottom:1px solid var(--band-d); padding-bottom:14px}

/* ---------- ヒーロー（オレンジ帯＝白文字） ---------- */
.hero{max-width:var(--maxw); margin:0 auto; padding:26px 26px 4px}
.hero .label{display:inline-block; font-size:11px; letter-spacing:.18em; color:rgba(255,255,255,.85);
  font-weight:600; margin:0 0 7px}
.hero h1{font-size:25px; font-weight:600; letter-spacing:.05em; margin:0; color:#fff}
.hero p{font-size:14px; color:rgba(255,255,255,.92); margin:8px 0 0; letter-spacing:.02em; font-weight:500}
.hero p .fm{font-weight:700}

/* ---------- フィルタバー（オレンジ帯上＝白チップ・active は紺） ---------- */
.filters{max-width:var(--maxw); margin:0 auto; padding:16px 26px 2px}
.frow{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:9px}
.flabel{font-size:13px; color:#fff; font-weight:700; letter-spacing:.04em; min-width:48px}
.chip{font-size:12.5px; color:var(--mut); background:#fff; border:1px solid rgba(255,255,255,.6);
  border-radius:20px; padding:6px 14px; cursor:pointer; transition:.15s; white-space:nowrap; font-weight:600}
.chip:hover{color:var(--navy-d); border-color:#fff}
.chip.on{background:var(--navy-d); color:#fff; border-color:var(--navy-d)}
.searchwrap{position:relative; margin-top:14px; max-width:380px}
.searchwrap svg{position:absolute; left:14px; top:50%; transform:translateY(-50%);
  width:17px; height:17px; color:var(--mut2)}
.searchwrap input{width:100%; background:#fff; border:1px solid rgba(255,255,255,.6); border-radius:24px;
  color:var(--ink); font-size:16px; font-family:inherit; padding:11px 16px 11px 40px; outline:none; transition:.15s;
  box-shadow:0 2px 8px rgba(0,0,0,.08)}
.searchwrap input:focus{border-color:#fff; box-shadow:0 0 0 3px rgba(255,255,255,.45)}

/* ---------- 一覧本体（単一グリッド） ---------- */
.rows{max-width:var(--maxw); margin:0 auto; padding:22px 0 0}
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:20px; padding:18px 26px 22px}

/* ---------- 注目カード（ピックアップ） ---------- */
.feature{display:flex; gap:0; background:linear-gradient(135deg,#ffffff 0%,#fff6e6 100%);
  border:1px solid #f0e2c6; border-radius:18px; overflow:hidden; cursor:pointer;
  margin:4px 26px 10px; box-shadow:0 12px 32px rgba(46,65,83,.13); transition:transform .18s, box-shadow .18s, border-color .18s}
.feature:hover{transform:translateY(-3px); border-color:var(--gold); box-shadow:0 18px 40px rgba(46,65,83,.16)}
.feat-sep{height:1px; background:var(--line); margin:0 26px 20px}
.feat-thumb{position:relative; width:230px; flex:0 0 auto; align-self:stretch; min-height:210px; background:#eef1f5; overflow:hidden}
.feat-thumb img{width:100%; height:100%; object-fit:cover; display:block}
.feat-thumb.noimg{display:grid; place-items:center; background:linear-gradient(145deg,#fbf3e2,#f5ebd6); color:var(--gold-d)}
.feat-thumb .pills{right:11px; bottom:11px}
.feat-body{flex:1; min-width:0; padding:22px 26px; display:flex; flex-direction:column; gap:9px; justify-content:center}
.feat-tag{align-self:flex-start; font-size:11px; letter-spacing:.12em; font-weight:600; color:#fff;
  background:#d6433f; padding:4px 12px; border-radius:20px}
/* スポットライト画像の右上に重ねる「最新の更新」タグ */
.feat-tag-img{position:absolute; right:12px; top:12px; z-index:2; box-shadow:0 1px 4px rgba(0,0,0,.25)}
.feat-title{font-size:21px; font-weight:600; color:var(--navy-d); margin:0; letter-spacing:.02em; line-height:1.35}
.feat-meta{font-size:13px; color:var(--mut2); display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.feat-meta .br{color:var(--navy); font-weight:500}
.feat-go{align-self:flex-start; font-size:13px; color:var(--gold-d); font-weight:600; margin-top:2px}
.feature .card-latest{background:transparent; border-top:none; margin:2px 0 0; padding:0}
@media (max-width:760px){
  .feature{flex-direction:column; margin:4px 16px 16px}
  .feat-thumb{width:100%; min-height:0; aspect-ratio:1/1}
  .feat-body{padding:16px 18px 18px}
  .feat-title{font-size:18px}
}

/* ---------- 番組カード ---------- */
.card{background:var(--card); border:1px solid var(--line); border-radius:13px; overflow:hidden; cursor:pointer; display:flex; flex-direction:column;
  box-shadow:0 1px 2px rgba(46,65,83,.04); transition:transform .18s ease, border-color .18s, box-shadow .18s}
.card:hover{transform:translateY(-4px); border-color:var(--gold); box-shadow:0 14px 30px rgba(46,65,83,.13); z-index:5}
.thumb{position:relative; aspect-ratio:1/1; background:#eef1f5; overflow:hidden}
.thumb img{width:100%; height:100%; object-fit:cover; display:block}
.thumb.noimg{display:flex; align-items:center; justify-content:center;
  background:linear-gradient(145deg,#fbf3e2,#f5ebd6); color:var(--gold-d); font-size:30px}
.thumb::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.03) 0%,transparent 26%,transparent 64%,rgba(0,0,0,.34) 100%)}
.badge{position:absolute; left:9px; top:9px; z-index:2; font-size:10.5px; font-weight:500; color:#fff;
  padding:3px 9px; border-radius:6px; letter-spacing:.02em}
.pills{position:absolute; right:9px; bottom:9px; z-index:2; display:flex; gap:5px; align-items:center}
.pill{display:inline-flex; align-items:center; gap:4px;
  font-size:10px; font-weight:500; padding:3px 9px; border-radius:20px; letter-spacing:.04em}
.pill.live{background:rgba(214,71,71,.95); color:#fff}
.pill.rec{background:rgba(255,255,255,.94); color:var(--gold-d); border:1px solid rgba(207,155,63,.5)}
.dot{width:5px; height:5px; border-radius:50%; background:#fff; animation:blink 1.4s infinite}
@keyframes blink{50%{opacity:.3}}
.card-hover{position:absolute; inset:0; z-index:3; opacity:0; transition:opacity .2s;
  background:rgba(46,65,83,.32); display:grid; place-items:center}
.card:hover .card-hover{opacity:1}
.card-hover .ply{width:46px; height:46px; border-radius:50%; background:rgba(255,255,255,.96);
  display:grid; place-items:center; color:var(--navy-d); transform:scale(.85); transition:transform .2s}
.card:hover .card-hover .ply{transform:scale(1)}
.card-body{padding:11px 13px 14px; flex:1 1 auto; display:flex; flex-direction:column}
.card-title{font-size:14.5px; font-weight:600; line-height:1.4; margin:0 0 4px; color:var(--navy-d);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:41px}
.card-cast{font-size:12px; color:var(--mut); line-height:1.4;
  display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden}
/* 配信者（顔アイコン＋名前・最大2名） */
.cast{display:flex; flex-wrap:wrap; gap:6px 12px; align-items:center}
.cast-p{display:inline-flex; align-items:center; gap:6px; min-width:0}
.cast-av{width:26px; height:26px; border-radius:50%; object-fit:cover; flex:0 0 auto; background:#eef1f5; border:1.5px solid #fff; box-shadow:0 0 0 1px var(--line), 0 1px 2px rgba(46,65,83,.14)}
.cast-av.noimg{display:grid; place-items:center; font-size:11px; font-weight:500; color:var(--gold-d); background:linear-gradient(145deg,#fbf3e2,#f5ebd6)}
.cast-nm{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.card-cast.cast{font-size:12.5px; color:var(--ink); font-weight:500; -webkit-line-clamp:none; display:flex}
.modal-cast.cast{margin:0}
.modal-cast.cast .cast-av{width:34px; height:34px}
.modal-cast.cast .cast-nm{font-size:13.5px; color:var(--navy-d)}
.card-foot{font-size:12px; color:var(--mut2); margin-top:4px; margin-bottom:7px; display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.card-foot .br{color:var(--navy); font-weight:500}
.brsep{color:var(--mut2); margin:0 1px}
.role-badge{display:inline-flex; align-items:center; margin-left:5px; font-size:9.5px; font-weight:600; color:#fff; background:var(--gold-d); padding:1px 7px; border-radius:7px; letter-spacing:.02em; vertical-align:middle; white-space:nowrap}
/* 役職マークの格付け: 支部代表＝金グラデ＋★（最上位）／事務局長＝紺／事務参事＝淡色 */
.role-rep{background:linear-gradient(135deg,#e6bd58 0%,#c2882a 100%); box-shadow:0 1px 3px rgba(185,132,43,.5), inset 0 1px 0 rgba(255,255,255,.35)}
.role-rep::before{content:"\2605"; margin-right:3px; font-size:9px; line-height:1}
.role-chief{background:var(--navy); box-shadow:0 1px 2px rgba(46,65,83,.3)}
.role-councilor{background:#f3ead7; color:var(--gold-d); box-shadow:inset 0 0 0 1px #e6d4ab}
.modal-cast .role-badge{font-size:10.5px; padding:2px 8px; margin-left:6px}
.card-latest{margin:auto -13px -14px -13px; padding:10px 13px 12px; background:var(--bg2); border-top:1px solid var(--line); color:var(--mut);
  display:flex; flex-direction:column; align-items:flex-start; gap:5px; line-height:1.4}
.card-latest .upd{background:var(--navy); color:#fff; font-weight:600; font-size:10.5px;
  padding:2px 10px; border-radius:11px; letter-spacing:.02em}
.card-latest .upd b{color:#ffd884; font-weight:700; margin-left:3px}
.card-latest .et{font-size:13px; color:var(--mut); line-height:1.45; min-height:38px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.empty{grid-column:1/-1; text-align:center; color:var(--mut); font-size:14px; padding:50px 0}

/* ---------- 活動カウンター（青帯内・白文字） ---------- */
.counters{display:flex; flex-wrap:wrap; gap:8px; margin-top:15px}
.counters .ct{font-size:12.5px; color:#fff; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.3);
  border-radius:20px; padding:5px 13px; letter-spacing:.02em}
.counters .ct b{font-weight:800; margin-right:3px; font-size:14px}
.counters .ct.hot{background:rgba(255,255,255,.96); color:var(--band-d); border-color:#fff; font-weight:600}
.counters .ct.hot b{color:#e15e0c}

/* ---------- セクション見出し ---------- */
.sec-h{padding:0 26px; margin:0; font-size:15px; font-weight:700; color:var(--navy-d); letter-spacing:.04em;
  display:flex; align-items:center; gap:9px}
.sec-h::before{content:""; width:4px; height:16px; border-radius:2px; background:var(--band)}
.sec-grid{margin:28px 0 14px}

/* ---------- 新着エピソードフィード（最近の更新） ---------- */
.feed{margin:26px 0 0}
.feed .sec-h{margin-bottom:13px}
.ep-feed{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding:0 26px}
.ep-item{display:flex; gap:12px; align-items:center; background:var(--card); border:1px solid var(--line);
  border-radius:12px; padding:10px 12px; cursor:pointer; transition:border-color .15s, box-shadow .15s, transform .15s}
.ep-item:hover{border-color:var(--band); box-shadow:0 8px 20px rgba(46,65,83,.1); transform:translateY(-2px)}
.ep-th{width:52px; height:52px; flex:0 0 auto; border-radius:9px; object-fit:cover; background:#eef1f5; display:block}
.ep-th.noimg{display:grid; place-items:center; color:var(--mut2)}
.ep-tx{min-width:0; flex:1}
.ep-meta{display:flex; align-items:center; gap:8px; margin-bottom:3px}
.ep-prog{font-size:11.5px; color:var(--navy); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0}
.ep-date{font-size:11px; color:var(--mut); flex:0 0 auto; white-space:nowrap}
.ep-date.fresh{color:#e15e0c; font-weight:700}
.ep-title{font-size:13.5px; color:var(--navy-d); line-height:1.4;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}

/* ---------- 所属の活気メーター ---------- */
.meter{margin:28px 0 0; padding:0 26px}
.meter .sec-h{padding:0; margin-bottom:13px}
.meter-row{display:flex; align-items:center; gap:12px; padding:6px 0}
.meter-name{flex:0 0 96px; font-size:12.5px; color:var(--navy-d); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.meter-track{flex:1; height:10px; background:var(--bg2); border:1px solid var(--line2); border-radius:6px; overflow:hidden}
.meter-bar{height:100%; border-radius:6px; background:linear-gradient(90deg,var(--band-l),var(--band))}
.meter-val{flex:0 0 auto; font-size:11.5px; color:var(--mut); white-space:nowrap}
.meter-val em{font-style:normal; color:#e15e0c; font-weight:700; margin-left:7px}

/* ---------- NEW バッジ ＋ 今週更新マーカー ---------- */
.badge-new{position:absolute; left:9px; top:9px; z-index:2; font-size:10px; font-weight:800; letter-spacing:.06em;
  color:#fff; background:var(--navy-d); padding:2px 8px; border-radius:7px; box-shadow:0 1px 3px rgba(0,0,0,.22)}
/* 🔥 今週更新マーカーをサムネ右上に重ねる（スマホで画像だけ見えても更新が伝わる） */
.badge-fresh{position:absolute; right:9px; top:9px; z-index:2; display:inline-flex; align-items:center; gap:2px;
  font-size:10.5px; font-weight:700; color:#fff; background:#e15e0c; padding:2px 8px; border-radius:7px; box-shadow:0 1px 3px rgba(0,0,0,.26)}
.card-latest.fresh .upd{background:#e15e0c}

/* ---------- 詳細モーダル ---------- */
.modal{position:fixed; inset:0; z-index:60; display:none; align-items:center; justify-content:center;
  padding:20px; background:rgba(46,65,83,.5); backdrop-filter:blur(3px)}
.modal.open{display:flex}
.modal-box{position:relative; background:#fff; border:1px solid var(--line); border-radius:16px; max-width:540px; width:100%;
  max-height:92vh; overflow:auto; box-shadow:0 24px 60px rgba(46,65,83,.28)}
.modal-close{position:absolute; right:12px; top:12px; z-index:2; width:32px; height:32px; border-radius:50%;
  background:var(--bg2); border:1px solid var(--line); color:var(--mut); cursor:pointer; display:grid; place-items:center; font-size:18px; line-height:1}
.modal-close:hover{background:#eceff3; color:var(--navy-d)}
.modal-body{padding:22px 22px 24px}
.modal-head{display:flex; gap:14px; align-items:flex-start; margin:0 0 16px; padding-right:30px}
.modal-thumb{width:104px; height:104px; flex:0 0 auto; border-radius:12px; overflow:hidden; background:#eef1f5}
.modal-thumb img{width:100%; height:100%; object-fit:cover; display:block}
.modal-thumb.noimg{display:grid; place-items:center; background:linear-gradient(145deg,#fbf3e2,#f5ebd6); color:var(--gold-d)}
.mh-text{flex:1; min-width:0}
.modal-badges{display:flex; gap:8px; flex-wrap:wrap; margin:0 0 9px}
.modal-badges span{font-size:11.5px; font-weight:500; padding:4px 11px; border-radius:18px}
.mb-media{color:#fff}
.mb-rec{background:var(--cream); color:var(--gold-d); border:1px solid var(--gold-soft)}
.mb-live{background:rgba(214,71,71,.12); color:#c0403f; border:1px solid rgba(214,71,71,.35)}
.mb-branch{background:var(--bg2); color:var(--navy)}
.modal-title{font-size:18px; font-weight:500; letter-spacing:.03em; margin:0 0 4px; color:var(--navy-d); line-height:1.4}
.modal-cast{font-size:13px; color:var(--mut); margin:0}
.modal-desc{font-size:14px; color:var(--ink); line-height:1.9; margin:0 0 16px; white-space:pre-wrap}
.modal-meta{font-size:13px; color:var(--mut); margin:0 0 14px; display:flex; align-items:center; gap:8px}
.modal-latest{background:var(--bg2); border:1px solid var(--line); border-radius:12px; padding:12px 14px; margin:0 0 18px}
.modal-latest .ml-h{display:block; font-size:11px; font-weight:500; color:var(--gold-d); letter-spacing:.04em; margin-bottom:5px}
.modal-latest .ml-t{display:block; font-size:14.5px; color:var(--navy-d); text-decoration:none; line-height:1.55; transition:.15s}
.modal-latest .ml-t:hover{color:var(--gold-d); text-decoration:underline}
.modal-latest .ml-d{display:inline-block; margin-top:5px; font-size:12.5px; color:var(--mut)}
.modal-link{display:inline-flex; align-items:center; gap:8px; background:var(--navy); color:#fff;
  font-size:14px; font-weight:500; padding:12px 22px; border-radius:26px; text-decoration:none; transition:.15s}
.modal-link:hover{background:var(--navy-d)}

/* ---------- フッター（軽い注記） ---------- */
.foot{text-align:center; padding:16px 26px 36px; font-size:12px; color:var(--mut); border-top:1px solid var(--line2)}

/* ---------- マーチャントクラブ情報（濃グレー帯・白文字） ---------- */
.mc-footer{background:#2b3036; color:#fff; padding:30px 22px 34px; text-align:center}
.mc-foot-inner{max-width:680px; margin:0 auto}
/* ロゴは白抜き版を透過のまま置く。白い角丸の板に載せると、紺の帯の中で
   そこだけ切り抜いたように浮いて見える。英字ロゴに合わせて字間を広めに取る。 */
.mc-foot-brand{ display:inline-flex; align-items:center; gap:11px;
  font-size:16px; font-weight:600; letter-spacing:.16em; color:#fff; }
.mc-foot-logo{ width:30px; height:30px; object-fit:contain; }
.mc-foot-desc{font-size:12px; color:rgba(255,255,255,.72); margin:9px auto 16px; line-height:1.75}

/* 講義・懇親会の写真をゆっくり流す帯（帯いっぱいの全幅）。

   【なぜ .mc-foot-inner の外に置くか】
   全幅にするのに width:100vw を使うと、縦スクロールバーのある環境で 100vw が
   バーの幅を含むため、横スクロールバーが出る。よくある不具合。
   680px の枠の外に出し、帯の左右padding(22px)を負のmarginで打ち消すだけにすれば
   ビューポート単位を一切使わずに端まで届く。

   【gap を使わないこと】
   translateX(-50%) で1ユニット分ちょうど動かしてループさせる。
   gap を使うとトラック幅が 2N・w + (2N-1)・g となり、その半分は
   1ユニットの送り幅 N・(w+g) より gap の半分だけ短い。1周ごとに数px飛ぶ。
   最後のタイルにも margin-right を付けて幅を揃える。

   【1ユニット=20枚にしてある理由】
   全幅にすると「1ユニットが画面幅より広い」ことが必要になる（狭いと隙間が出る）。
   10枚=2520pxでは2560pxのディスプレイで足りない。10枚を2回=5040pxにして、
   現実的などの画面でも隙間が出ないようにしている。 */
/* 既定は隠す。mc-band の loader が写真を入れたときだけ mcb-on が付いて出る。
   こうしないと、写真が0枚のときや配信元に届かないときに、
   空の帯が余白だけ残って「壊れている」ように見える。 */
.mc-photos{ display:none; position:relative; overflow:hidden; margin:0 -22px 18px; }
.mc-photos.mcb-on{ display:block; }
.mc-photos::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, #2b3036 0%, rgba(43,48,54,0) 10%,
                                    rgba(43,48,54,0) 90%, #2b3036 100%); }
.mc-photo-track{ display:flex; width:max-content; will-change:transform;
  animation:mcPhotoStrip 168s linear infinite; }
.mc-photo-track img{ flex:0 0 auto; width:112px; height:112px; margin-right:10px;
  object-fit:cover; border-radius:9px; background:rgba(255,255,255,.06); display:block; }

@keyframes mcPhotoStrip{ to{ transform:translateX(-50%) } }

/* ホバーで止める。(hover:hover) で囲わないと、タッチ端末で指が触れただけで
   止まってしまい「固まった」ように見える */
@media (hover:hover){
  .mc-photos:hover .mc-photo-track{ animation-play-state:paused }
}
@media (max-width:760px){
  /* 1ユニット=20枚×140px=2800px、20px/秒 */
  .mc-photo-track{ animation-duration:140s }
  .mc-photo-track img{ width:96px; height:96px; margin-right:8px; border-radius:8px }
}
@media (prefers-reduced-motion:reduce){
  .mc-photo-track{ animation:none }
}
.mc-foot-link{display:inline-block; color:#fff; font-size:13px; font-weight:500; text-decoration:none;
  border:1px solid rgba(255,255,255,.45); border-radius:999px; padding:9px 22px; transition:background .15s, border-color .15s}
.mc-foot-link:hover{background:rgba(255,255,255,.13); border-color:rgba(255,255,255,.7)}
.mc-foot-copy{font-size:10.5px; color:rgba(255,255,255,.45); margin-top:16px}

@media (max-width:760px){
  .topbar{padding:9px 16px}
  .brand-img{height:36px}
  .brand-ico{height:34px} .brand-club{font-size:13px} .brand-fm{font-size:18px}
  .brand-fm::before,.brand-fm::after{width:10px}
  .hero{padding:22px 16px 4px} .hero h1{font-size:21px}
  .filters{padding:14px 16px 2px}
  .grid{padding:16px 16px 26px; gap:14px; grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .card:hover{transform:none; box-shadow:0 1px 2px rgba(46,65,83,.04)}
  .card-hover{display:none}
  .sec-h{padding-left:16px; padding-right:16px}
  .ep-feed{grid-template-columns:minmax(0,1fr); padding-left:16px; padding-right:16px}
  .meter{padding-left:16px; padding-right:16px}
  .meter-name{flex-basis:72px}
}

/* PR枠。中身は mc-band から loader が入れる。空のときは要素ごと hidden。
   セレクタは .mc-footer 配下に閉じておく（ページ本体のスタイルを汚さない） */
.mc-footer .mc-pr{ margin:20px auto 0; padding:16px 18px; max-width:520px; text-align:center;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16); border-radius:12px; }
.mc-footer .mc-pr-img{ display:block; width:100%; height:auto; border-radius:8px; margin:0 0 12px; }
.mc-footer .mc-pr-h{ margin:0 0 6px; font-size:13.5px; font-weight:600; color:#fff; }
.mc-footer .mc-pr-b{ margin:0 0 12px; font-size:11.5px; line-height:1.85; color:rgba(255,255,255,.7); }
.mc-footer .mc-pr-a{ display:inline-block; background:#e8782e; color:#fff; text-decoration:none;
  border-radius:9px; padding:9px 20px; font-size:13px; font-weight:600; }
.mc-footer .mc-pr-a:hover{ background:#cf6315; }