@media (max-width: 900px) {
    .p-media-list {
        display: block;
        margin-bottom: 32px;
        padding: 0;
    }
    .p-media-list li {
        display: block;
        width: 100%;
        min-width: 0;
        margin: 16px 0 0 0;
        border-radius: 5px;
        box-sizing: border-box;
    }
    .p-media-list li label {
        width: 100%;
        padding: 10px 10px 10px 38px;
        font-size: 1rem;
        line-height: 28px;
        box-sizing: border-box;
    }
}
/* favoritemedia */
.p-media-list { display: flex; flex-wrap: wrap; list-style: none; margin-bottom: 40px;}
.p-media-list li { margin: 20px 20px 0 0; border: 1px #999 solid; border-radius: 5px; min-width: calc(33% - 20px); transition: background-color .4s; color: #999; background-color: #fff; decoration: none; display: flex;}
.p-media-list li:has(:checked) { color: #000; }
.p-media-list li:has(#site22:checked) { background-color: #d0d6e6; }
.p-media-list li:has(#site2:checked) { background-color: #CCD9FF; }
.p-media-list li:has(#site3:checked) { background-color: #cfdada; }
.p-media-list li:has(#site4:checked) { background-color: #FFE9CC; }
.p-media-list li:has(#site5:checked) { background-color: #dfdcdc; }
.p-media-list li:has(#site6:checked) { background-color: #B3F0D1; }
.p-media-list li:has(#site7:checked) { background-color: #FFE6E9; }
.p-media-list li:has(#site8:checked) { background-color: #FFF8CC; }
.p-media-list li:has(#site10:checked) { background-color: #CCE6CC; }
.p-media-list li:has(#site12:checked) { background-color: #cceaff; }
.p-media-list li:has(#site13:checked) { background-color: #F6BFC5; }
.p-media-list li:has(#site16:checked) { background-color: #d0d6e6; }
.p-media-list li:has(#site18:checked) { background-color: #E6F5FC; }
.p-media-list li:has(#site20:checked) { background-color: #D9F3EB; }
.p-media-list li:has(#site23:checked) { background-color: #cfd8dc; }
.p-media-list li:has(#site24:checked) { background-color: #FCDCE6; }
.p-media-list li:has(#site25:checked) { background-color: #cfd4dd; }
.p-media-list li:has(#site26:checked) { background-color: #FFF9CC; }
.p-media-list li:has(#site27:checked) { background-color: #d9d4e5; }
.p-media-list li:has(#site100:checked) { background-color: #F9DEE9; }
.p-media-list li input[type=checkbox] { visibility: hidden; appearance: none;}

.p-media-list li input[type=checkbox]::after { 
    display: inline-block; content: ' '; background-image: url(/assets/img/logo/ah.w57.png); width: 28px; height: 28px; background-size: contain; border-radius: 2px; visibility: visible; vertical-align: middle; margin: 0 10px;
    display: inline-block; content: ' '; background-image: url(/assets/img/logo/ah.w57.png); width: 28px; height: 28px; background-size: contain; border-radius: 2px; visibility: visible; vertical-align: middle; margin: 8px 10px;
}
.p-media-list li input#site22[type=checkbox]::after { background-image: url(/assets/img/logo/ipw.svg); }

.p-media-list li input#site2[type=checkbox]::after { background-image: url(/assets/img/logo/pcw.w57.png); }

.p-media-list li input#site3[type=checkbox]::after { background-image: url(/assets/img/logo/dcw.w57.png); }

.p-media-list li input#site4[type=checkbox]::after { background-image: url(/assets/img/logo/ah.w57.png); }

.p-media-list li input#site5[type=checkbox]::after { background-image: url(/assets/img/logo/avw.w57.png); }

.p-media-list li input#site7[type=checkbox]::after { background-image: url(/assets/img/logo/ktw.w57.png); }

.p-media-list li input#site6[type=checkbox]::after { background-image: url(/assets/img/logo/gmw.w57.png); }

.p-media-list li input#site8[type=checkbox]::after { background-image: url(/assets/img/logo/iw.w57.png); }

.p-media-list li input#site10[type=checkbox]::after { background-image: url(/assets/img/logo/wf.w57.png); }

.p-media-list li input#site12[type=checkbox]::after { background-image: url(/assets/img/logo/kdw.w57.png); }

.p-media-list li input#site13[type=checkbox]::after { background-image: url(/assets/img/logo/car.w57.png); }

.p-media-list li input#site16[type=checkbox]::after { background-image: url(/assets/img/logo/video.w57.png); }

.p-media-list li input#site18[type=checkbox]::after { background-image: url(/assets/img/logo/clw.w57.png); }

.p-media-list li input#site20[type=checkbox]::after { background-image: url(/assets/img/logo/trw.w57.png); }

.p-media-list li input#site23[type=checkbox]::after { background-image: url(/assets/img/logo/hbw.svg); }

.p-media-list li input#site24[type=checkbox]::after { background-image: url(/assets/img/logo/grw.svg); }

.p-media-list li input#site25[type=checkbox]::after { background-image: url(/assets/img/logo/kit.svg); }

.p-media-list li input#site26[type=checkbox]::after { background-image: url(/assets/img/logo/mgw.svg); }

.p-media-list li input#site27[type=checkbox]::after { background-image: url(/assets/img/logo/aiw.svg); }

.p-media-list li input#site100[type=checkbox]::after { background-image: url(/assets/img/logo/ntp.svg); }


.p-media-list li label { 
    display: inline-block; 
    padding: 10px 10px 10px 0px; 
    line-height: 28px; 
    width: calc(100% - 48px); 
    font-weight: var(--font-weight-bold);
    margin-left: auto;
}
.p-favoritemedia .p-section__subscription-section {
    padding: 20px 35px 60px;
}

/* トップページ「好きなメディア」カード（アイコン丸 + メディア名リンク） */
.p-mediaboard__grid{
  --avatar: 95px;
  --gap: 20px;
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.p-mediaboard__item{ display: block; }
.p-mediacard{
  display: grid;
  justify-items: center;
  gap: 10px;
  text-decoration: none;
  color: #0d3b91; /* メディア名リンク色 */
}
.p-mediacard__figure{
  width: var(--avatar);
  height: var(--avatar);
  border-radius: 50%;
  overflow: hidden;
  background: #f2f2f2;
  /* 背景が白いロゴでも境目が分かるよう薄いグレーの線を入れる */
  border: 1px solid #ddd;
  box-sizing: border-box;
  margin: 0;
}
.p-mediacard__figure img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.p-mediacard__name{
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  line-height: 1.4;
}

/* レスポンシブ：幅が足りない時は列数を自動調整 */
@media (max-width: 960px){
  .p-mediaboard__grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px){
  .p-mediaboard__grid{ --avatar: 160px; grid-template-columns: repeat(2, 1fr); }
}