/* =========================================================
 * トップページ（top-pc / top-sp）
 * ======================================================= */

/* ---------- メインビジュアル ---------- */
.hero-wrap {
	padding: 24px var(--gutter) 0;
	display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px;
}
.hero-wrap.is-wide { grid-template-columns: minmax(0, 1fr); } /* 「いま調べられていること」が空のときは、スライドを横いっぱいに */
.hero { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.hero__stage { position: relative; border-radius: 10px; overflow: hidden; height: clamp(380px, 42vw, 400px); }
.hero__slide { position: absolute; inset: 0; visibility: hidden; }
.hero__slide.is-active { visibility: visible; z-index: 1; }
/* 切り替え方：フェード（薄くなって、ふわっと現れる） */
.hero[data-effect="fade"] .hero__slide { opacity: 0; transition: opacity .9s ease, visibility 0s linear .9s; }
.hero[data-effect="fade"] .hero__slide.is-active { opacity: 1; transition: opacity .9s ease, visibility 0s; }
/* 切り替え方：スライド（横にずれる）。動きは front.js で付けます */
.hero[data-effect="slide"] .hero__slide.is-moving { visibility: visible; z-index: 1; transition: transform .7s cubic-bezier(.65, 0, .35, 1); }
@media (prefers-reduced-motion: reduce) { .hero__slide { transition: none !important; } }

/* PR枠 */
.hero-pr {
	background: linear-gradient(120deg, #fff4f2 0%, #ffe3df 100%);
	display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
}
.hero-pr__text {
	padding: clamp(18px, 2.6vw, 36px) clamp(18px, 2.8vw, 40px) clamp(18px, 2.6vw, 36px) 84px; overflow: hidden;
	display: flex; flex-direction: column; gap: 14px; justify-content: center;
}
.hero-pr__eyebrow { display: flex; gap: 8px; align-items: center; }
.hero-pr__lead { font-size: clamp(12px, 1.2vw, 14px); font-weight: 900; color: var(--red); white-space: nowrap; }
.hero-pr__title { font-size: clamp(24px, 3.1vw, 40px); font-weight: 900; line-height: 1.25; word-break: auto-phrase; }
.hero-pr__catch {
	font-size: clamp(13px, 1.3vw, 15px); line-height: 1.75; color: var(--body);
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.hero-pr__points { display: flex; gap: 8px; flex-wrap: wrap; }
.hero-pr__points span {
	background: #fff; border: 1px solid #f3c4bf; color: var(--red-ink); font-size: 12px; font-weight: 700;
	padding: 5px 10px; border-radius: 999px;
}
.hero-pr__ctas { display: flex; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.hero-pr__btn {
	background: var(--btn); color: #fff; font-weight: 900; font-size: 16px; padding: 14px 28px;
	border-radius: 999px; box-shadow: 0 4px 0 var(--btn-sh); transition: transform .1s;
}
.hero-pr__btn:hover { color: #fff; transform: translateY(-2px); }
.hero-pr__compare { align-self: center; color: var(--ink); font-weight: 700; font-size: 13px; white-space: nowrap; }
.hero-pr__banner {
	margin: 28px 28px 28px 0; border-radius: 10px; overflow: hidden;
	background: repeating-linear-gradient(135deg, #fbe1dd 0 10px, #f7d6d1 10px 20px);
	display: flex; align-items: flex-start; justify-content: flex-start; padding: 12px;
	font-family: var(--mono); font-size: 11px; color: #a8766f; position: relative;
}
.hero-pr__banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.hero-pr__banner:has(img) { background: #fff; } /* 広告バナーやロゴは切らずに全体を見せます */

/* 作品 */
.hero-work { display: flex; align-items: flex-end; }
.hero-work.noimg { background-color: #eef0f4; }
.hero-work__ph { position: absolute; top: 16px; right: 16px; font-family: var(--mono); font-size: 11px; color: #7a8090; }
.hero-work__body {
	position: relative; width: 100%; padding: 28px 32px;
	background: linear-gradient(transparent, rgba(16, 24, 48, .9) 45%); color: #fff;
	display: flex; flex-direction: column; gap: 10px;
}
.hero-work__label { align-self: flex-start; background: var(--red); font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 3px; }
.hero-work__title { font-size: clamp(22px, 2.6vw, 32px); font-weight: 900; line-height: 1.3; word-break: auto-phrase; color: #fff; }
.hero-work__title:hover { color: #fff; text-decoration: underline; }
.hero-work__catch { font-size: 15px; line-height: 1.6; }
.hero-work__ctas { display: flex; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.hero-work__btn { font-weight: 900; font-size: 14px; padding: 11px 20px; border-radius: 999px; transition: background .15s; }
.hero-work__btn--white { background: #fff; color: var(--navy); }
.hero-work__btn--white:hover { background: var(--blue-bg); color: var(--navy); }
.hero-work__btn--red { background: var(--btn); color: #fff; }
.hero-work__btn--red:hover { background: var(--btn-h); color: #fff; }

/* 看板のスライド（サイトの紹介・VOD比較・電子書籍比較・特集・新着記事） */
.hero-x { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(16px, 2.4vw, 36px); padding: clamp(22px, 2.8vw, 40px) 84px 40px; } /* 左右は両側の矢印（52px）の分を空けます */
.hero-x__text { display: flex; flex-direction: column; gap: 12px; justify-content: center; min-width: 0; }
.hero-x__eyebrow { align-self: flex-start; font-size: 12px; font-weight: 900; letter-spacing: .04em; padding: 4px 12px; border-radius: 999px; background: var(--ink); color: #fff; }
.hero-x__title { font-size: clamp(24px, 2.9vw, 38px); font-weight: 900; line-height: 1.3; word-break: auto-phrase; color: inherit; }
.hero-x__title:hover { color: inherit; text-decoration: underline; }
.hero-x__catch { font-size: 15px; line-height: 1.75; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hero-x__btn { align-self: flex-start; margin-top: 4px; font-weight: 900; font-size: 15px; padding: 13px 26px; border-radius: 999px; background: var(--navy); color: #fff; box-shadow: 0 3px 0 rgba(0, 0, 0, .18); transition: transform .15s; }
.hero-x__btn:hover { color: #fff; transform: translateY(-2px); }
.hero-x__side { display: flex; flex-direction: column; gap: 10px; justify-content: center; min-width: 0; }

.hero-x--intro { background: linear-gradient(125deg, #1f3a6e 0%, #15284d 100%); color: #fff; }
.hero-x--intro .hero-x__eyebrow { background: var(--gold); color: var(--ink); }
/* 背景：サイトのマーク（ファビコン）を右にうっすら */
.hero-x--intro::before { content: ""; position: absolute; z-index: -1; right: 48px; top: 50%; width: 300px; height: 300px; transform: translateY(-50%) rotate(-6deg); background: var(--wm) center / contain no-repeat; opacity: .1; pointer-events: none; } /* スライド（z-index: 1）の中で、背景の上・文字の下に敷きます */
/* 「いつ？」「どこで？」「何巻まで？」：ロゴと同じ文字で立体に。スライドが出るたびに1語ずつ弾んで出ます */
.hero-x__title--pop { display: flex; flex-direction: column; gap: 6px; text-decoration: none !important; }
.hero-x__lead { font-size: clamp(16px, 1.6vw, 20px); font-weight: 900; color: #c8d3ea; }
.hero-x__pops { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.hero-x__pop { font-family: 'Mochiy Pop One', var(--logo); font-size: clamp(34px, 4.3vw, 56px); line-height: 1.15; letter-spacing: .02em; color: #ffd23f; text-shadow: 2px 2px 0 #c98700, 4px 4px 0 #985400, 6px 7px 12px rgba(0, 0, 0, .45); }
.hero-x__pop:nth-child(2) { color: #fff; text-shadow: 2px 2px 0 #e0413a, 4px 4px 0 #ae2722, 6px 7px 12px rgba(0, 0, 0, .45); }
.hero-x__pop:nth-child(3) { color: #bfeaff; text-shadow: 2px 2px 0 #1f74b0, 4px 4px 0 #0a335c, 6px 7px 12px rgba(0, 0, 0, .5); }
.hero__slide.is-active .hero-x__pop { animation: hero-pop .7s cubic-bezier(.34, 1.56, .64, 1) both, hero-bob 3.2s ease-in-out infinite; animation-delay: calc(var(--d) * .18s + .15s), calc(var(--d) * .4s + 1.2s); }
@keyframes hero-pop { 0% { opacity: 0; transform: translateY(18px) scale(.4) rotate(-6deg); } 70% { opacity: 1; transform: translateY(-4px) scale(1.08) rotate(2deg); } 100% { opacity: 1; transform: none; } }
@keyframes hero-bob { 0%, 100% { transform: none; } 50% { transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .hero__slide.is-active .hero-x__pop { animation: none; } }
.hero-x--intro .hero-x__btn { background: #fff; color: var(--navy); }
.hero-x__tile { display: flex; flex-direction: column; gap: 2px; padding: 14px 18px; border-radius: 12px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); color: #fff; transition: background .15s; }
.hero-x__tile:hover { background: rgba(255, 255, 255, .18); color: #fff; }
.hero-x__tile b { font-size: 17px; font-weight: 900; }
.hero-x__tile span { font-size: 12px; color: #c8d3ea; }

.hero-x--vod { background: linear-gradient(120deg, #eef4fc 0%, #dbe7f8 100%); }
.hero-x--vod .hero-x__eyebrow { background: var(--navy); }
.hero-x--ebook { background: linear-gradient(120deg, #fff4f2 0%, #ffe3df 100%); }
.hero-x--ebook .hero-x__eyebrow { background: var(--red); }
.hero-x--ebook .hero-x__btn { background: var(--btn); box-shadow: 0 3px 0 var(--btn-sh); }
.hero-x__logos { display: grid; grid-template-columns: repeat(min(var(--n), 3), minmax(0, 1fr)); gap: 10px; }
.hero-x__logo { aspect-ratio: 16 / 9; background: #fff; border-radius: 10px; box-shadow: 0 2px 8px rgba(29, 33, 48, .08); display: flex; align-items: center; justify-content: center; padding: 10px; font-size: 13px; font-weight: 900; color: var(--ink); position: relative; overflow: hidden; }
.hero-x__logo img { width: 100%; height: 100%; object-fit: contain; }

.hero-x--feature { background: radial-gradient(circle at 92% 110%, rgba(224, 65, 58, .45) 0 220px, transparent 221px), linear-gradient(125deg, #1d2130 0%, #2c1622 100%); color: #fff; }
.hero-x--feature .hero-x__eyebrow { background: var(--red); }
.hero-x--feature .hero-x__title { font-size: clamp(28px, 3.4vw, 44px); }
.hero-x--feature .hero-x__btn { background: var(--gold); color: var(--ink); }
/* 特集に背景の画像（漫画風のバースト）があるとき：真ん中の明るいところに題を置き、漫画の色（黒・黄・赤）でそろえます */
.hero-x--feature.has-bg { background: #fffbe6; color: #111; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 22px 84px 40px; }
.hero-x--feature.has-bg::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--bg) center / cover no-repeat; }
.hero__slide.is-active.hero-x--feature.has-bg::before { animation: hero-zoom 14s ease-in-out infinite alternate; }
.hero-x--feature.has-bg .hero-x__text { display: contents; }
.hero-x--feature.has-bg .hero-x__eyebrow { order: 1; align-self: center; background: #111; color: #ffd400; font-size: 13px; transform: rotate(-3deg); }
.hero-x--feature.has-bg .hero-x__title { order: 2; }
.hero-x--feature.has-bg .hero-x__catch { display: none; } /* 作品の札を2列で6つ見せるため、説明の文は出しません（題と札で伝わります） */
.hero-x--feature.has-bg .hero-x__side { order: 4; width: 100%; }
.hero-x--feature.has-bg .hero-x__btn { order: 5; align-self: center; background: #ffd400; color: #111; border: 3px solid #111; box-shadow: 4px 4px 0 #111; }
.hero-x--feature.has-bg .hero-x__btn:hover { color: #111; }
.hero-x__title--comic { display: inline-block; font-family: 'Mochiy Pop One', var(--logo); font-size: clamp(34px, 4.6vw, 62px); line-height: 1.2; color: #e60012; -webkit-text-stroke: 7px #111; paint-order: stroke fill; text-shadow: 5px 6px 0 #111; filter: drop-shadow(2px 2px 0 #fff) drop-shadow(-2px -2px 0 #fff) drop-shadow(2px -2px 0 #fff) drop-shadow(-2px 2px 0 #fff); transform: rotate(-3deg); text-decoration: none !important; }
.hero-x__title--comic:hover { color: #e60012; }
.hero-x__num { color: #ffd400; }
.hero-x--feature.has-bg .hero-x__list { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 8px; max-height: 124px; max-width: 1000px; margin: 0 auto; overflow: hidden; padding: 0 6px 6px 0; }
.hero-x--feature.has-bg .hero-x__list a, .hero-x--feature.has-bg .hero-x__list span { grid-template-columns: auto auto; column-gap: 8px; padding: 6px 12px; border-radius: 8px; background: #fff; color: #111; border: 2.5px solid #111; box-shadow: 3px 3px 0 #111; text-align: left; }
.hero-x--feature.has-bg .hero-x__list a:hover { background: #fff3b0; color: #111; }
.hero-x--feature.has-bg .hero-x__list i { color: #e60012; }
.hero-x--feature.has-bg .hero-x__list small { color: #5d6477; }
/* 出るときの動き：題が「ドン！」と飛び込み、作品が1つずつ弾んで出ます。背景はゆっくり寄ります */
.hero__slide.is-active .hero-x__title--comic { animation: hero-punch .8s cubic-bezier(.2, 1.4, .4, 1) .1s both; }
.hero__slide.is-active.hero-x--feature.has-bg .hero-x__list li { animation: hero-pop-in .6s cubic-bezier(.34, 1.56, .64, 1); animation-delay: calc(var(--d) * .12s + .7s); }
/* 作品の札・新着記事の題は、動きが止まる端末（省電力など）でも必ず見えるように、透明から出す動きにはしません（少し弾むだけ）。2026-11-02 */
@keyframes hero-pop-in { 0% { transform: scale(.88); } 60% { transform: scale(1.06); } 100% { transform: none; } }
@keyframes hero-punch { 0% { opacity: 0; transform: scale(2.4) rotate(-12deg); } 60% { opacity: 1; transform: scale(.94) rotate(-1deg); } 80% { transform: scale(1.04) rotate(-4deg); } 100% { opacity: 1; transform: rotate(-3deg); } }
@keyframes hero-zoom { from { transform: scale(1); } to { transform: scale(1.07); } }
@media (prefers-reduced-motion: reduce) { .hero__slide.is-active .hero-x__title--comic, .hero__slide.is-active.hero-x--feature.has-bg::before, .hero__slide.is-active.hero-x--feature.has-bg .hero-x__list li { animation: none; } }
/* 新着記事に背景の画像（漫画のコラージュ）があるとき：左の明るいところに題と新しい記事、右は絵を見せます */
.hero-x--latest.has-bg { background: #fffdf5; border: 0; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); color: #111; }
.hero-x--latest.has-bg::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--bg) left center / cover no-repeat; }
.hero__slide.is-active.hero-x--latest.has-bg::before { animation: hero-zoom 14s ease-in-out infinite alternate; transform-origin: 100% 50%; }
.hero-x--latest.has-bg .hero-x__text { gap: 10px; }
.hero-x--latest.has-bg .hero-x__eyebrow { background: #111; color: #ffd400; transform: rotate(-3deg); }
.hero-x--latest.has-bg .hero-x__title--comic { color: #1f78e0; font-size: clamp(28px, 3vw, 40px); white-space: nowrap; transform: rotate(-2deg); transform-origin: left center; }
.hero-x--latest.has-bg .hero-x__title--comic:hover { color: #1f78e0; }
.hero-x--latest.has-bg .hero-x__catch { color: #111; font-size: 16px; font-weight: 900; text-shadow: 0 0 6px #fff, 0 0 3px #fff; }
.hero-x__news { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-width: 520px; }
.hero-x__news a { display: flex; gap: 10px; align-items: baseline; padding: 6px 12px; border-radius: 8px; background: #fff; border: 2px solid #111; box-shadow: 3px 3px 0 #111; color: #111; }
.hero-x__news a:hover { background: #fff3b0; color: #111; }
.hero-x__news span { flex-shrink: 0; font-family: var(--mono); font-size: 11px; font-weight: 700; color: #e60012; }
.hero-x__news b { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-x--latest.has-bg .hero-x__btn { background: #1f78e0; color: #fff; border: 3px solid #111; box-shadow: 4px 4px 0 #111; }
.hero-x--latest.has-bg .hero-x__btn:hover { color: #fff; }
.hero__slide.is-active .hero-x__news li { animation: hero-pop-in .6s cubic-bezier(.34, 1.56, .64, 1); animation-delay: calc(var(--d) * .12s + .6s); }
@media (prefers-reduced-motion: reduce) { .hero__slide.is-active .hero-x__news li, .hero__slide.is-active.hero-x--latest.has-bg::before { animation: none; } }
.hero-x__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.hero-x__list a, .hero-x__list span { display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 10px; align-items: center; padding: 8px 12px; border-radius: 10px; background: rgba(255, 255, 255, .08); color: #fff; }
.hero-x__list a:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.hero-x__list i { grid-row: span 2; font-style: normal; font-family: var(--mono); font-weight: 900; font-size: 15px; color: var(--gold); }
.hero-x__list b { font-size: 15px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-x__list small { font-size: 11px; color: #c9ccd8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.hero-x--latest { background: #fff; border: 1px solid var(--bd); }
.hero-x--latest { grid-template-columns: minmax(0, .75fr) minmax(0, 1.65fr); }
.hero-x--latest .hero-x__side { flex-direction: row; gap: 12px; align-items: stretch; }
.hero-x__post { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; color: var(--ink); }
.hero-x__post:hover { color: var(--navy); }
.hero-x__thumb { border-radius: 8px; }
.hero-x__ptitle { font-size: 14px; font-weight: 700; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hero-x__pdate { font-size: 11px; color: var(--sub); font-family: var(--mono); }

.hero__arrow {
	position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; border: 0;
	background: rgba(255, 255, 255, .92); color: var(--ink); font-size: 28px; line-height: 1; cursor: pointer;
	box-shadow: 0 3px 12px rgba(0, 0, 0, .22); z-index: 3; transition: background .15s, transform .15s;
}
.hero__arrow:hover { background: #fff; transform: translateY(-50%) scale(1.08); }
.hero__arrow--prev { left: 12px; }
.hero__arrow--next { right: 12px; }

.hero__tabs { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 8px; }
.hero__tab {
	border: 0; border-top: 3px solid var(--bd); background: none; text-align: left;
	padding: 8px 4px 0; display: flex; flex-direction: column; gap: 2px; cursor: pointer; color: var(--sub);
	font-family: inherit; min-width: 0;
}
.hero__tab:hover { border-top-color: #9aa6c0; color: var(--ink); }
.hero__tab-label { font-size: 11px; font-weight: 700; }
.hero__tab-title { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero__tab.is-active { border-top-color: var(--red); color: var(--ink); cursor: default; }
.hero__tab.is-active .hero__tab-label { color: var(--red); }

/* いま調べられていること */
.searches { border: 1px solid var(--bd); border-radius: 10px; display: flex; flex-direction: column; align-self: start; }
.searches__head { padding: 14px 16px; border-bottom: 1px solid var(--bd); display: flex; align-items: center; gap: 8px; }
.searches__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); }
.searches__title { font-weight: 900; font-size: 15px; }
.searches__row {
	padding: 11px 16px; display: flex; gap: 10px; align-items: flex-start; border-bottom: 1px solid var(--row2);
	transition: background .15s;
}
.searches__row:hover { background: var(--hover); color: var(--ink); }
.searches__rank { font-size: 15px; font-weight: 900; color: var(--navy); width: 16px; flex-shrink: 0; }
.searches__qa { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.searches__q { font-size: 13px; font-weight: 700; line-height: 1.5; }
.searches__a { font-size: 11px; color: var(--sub); }
.searches__more { padding: 12px 16px; font-size: 13px; font-weight: 700; color: var(--navy); text-align: right; }

/* ---------- 目的別ナビ ---------- */
.intents { padding: 32px var(--gutter) 0; display: flex; flex-direction: column; gap: 14px; }
.intents__head { display: flex; align-items: baseline; gap: 12px; }
.intents__head h2 { margin: 0; font-size: 20px; font-weight: 900; }
.intents__note { font-size: 13px; color: var(--sub); }
.intents__grid { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 12px; }
.intent {
	position: relative; background: var(--bg); border-radius: 12px; padding: 18px 18px 16px;
	display: flex; flex-direction: column; gap: 10px; transition: transform .15s, box-shadow .15s;
}
.intent:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(29, 33, 48, .12); }
.intent__top { display: flex; align-items: center; justify-content: space-between; }
.intent__tag { font-size: 12px; font-weight: 900; color: var(--c); letter-spacing: .06em; }
.intent__arrow {
	width: 28px; height: 28px; border-radius: 50%; background: var(--c); color: #fff;
	display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.intent__title { font-size: 18px; font-weight: 900; line-height: 1.4; color: var(--ink); }
.intent__title::after { content: ""; position: absolute; inset: 0; border-radius: 12px; }
.intent__title:hover { color: var(--ink); }
.intent__links { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 6px; }
.intent__links a { background: #fff; font-size: 12px; font-weight: 700; padding: 4px 9px; border-radius: 999px; color: var(--body); }
.intent__links a:hover { color: var(--red); }

/* ---------- 本体の並び ---------- */
.home__body { padding: 40px var(--gutter) 48px; display: flex; flex-direction: column; gap: 48px; }
.home__body > section { display: flex; flex-direction: column; gap: 16px; }

/* ---------- 最新のネタバレ・感想 ---------- */
.reads { gap: 14px !important; }
.reads .sec-h { gap: 14px; }
.reads__more { color: var(--ink); }
.reads__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 18px; }
.reads__lead { display: flex; flex-direction: column; gap: 10px; color: var(--ink); transition: transform .15s; }
.reads__lead:hover { transform: translateY(-3px); color: var(--ink); }
.reads__lead-img { border-radius: 12px; }
.reads__ep {
	position: absolute; top: 10px; right: 10px; background: var(--red); color: #fff; font-size: 12px; font-weight: 900; /* 右上に置きます（左上は、自動のアイキャッチの「最新話のネタバレ」などの字と重なるため）。2026-11-02 */
	padding: 3px 10px; border-radius: 999px; z-index: 1;
}
.reads__meta { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.reads__work { font-size: 12px; font-weight: 900; color: var(--red); }
.reads__work--s { font-size: 11px; }
.reads__date { font-size: 11px; color: var(--sub); }
.reads__lead-title { font-size: 19px; font-weight: 900; line-height: 1.5; word-break: auto-phrase; }
.reads__sum { font-size: 13px; color: var(--body); line-height: 1.75; word-break: auto-phrase; }
.reads__list { display: flex; flex-direction: column; }
.reads__row {
	display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; align-items: center;
	padding: 10px 0; border-bottom: 1px solid var(--row); color: var(--ink);
}
.reads__row:hover { background: #fafbfd; color: var(--ink); }
.reads__row-img { border-radius: 6px; }
.reads__ep-s {
	position: absolute; bottom: 4px; left: 4px; background: var(--ink); color: #fff; font-size: 10px; font-weight: 900;
	padding: 1px 6px; border-radius: 3px; z-index: 1;
}
.reads__row-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lbl-spoil--s { font-size: 9px; padding: 1px 5px; }
.reads__row-title { font-size: 14px; font-weight: 700; line-height: 1.5; word-break: auto-phrase; }

.hubchips { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.hubchips__label { font-size: 12px; font-weight: 900; color: var(--sub); white-space: nowrap; }
.hubchips__list { display: flex; gap: 8px; flex-wrap: wrap; }
.hubchips__chip {
	border: 1.5px solid var(--bd2); color: var(--ink); font-size: 12px; font-weight: 700; padding: 6px 12px;
	border-radius: 999px; white-space: nowrap;
}
.hubchips__chip:hover { border-color: var(--navy); color: var(--ink); }

/* ---------- 最新トピック ---------- */
.news { gap: 14px !important; }
.news__list { border: 1px solid var(--bd); border-radius: 10px; display: flex; flex-direction: column; overflow: hidden; }
.news__row {
	display: grid; grid-template-columns: 84px 108px minmax(0, 1fr) auto; align-items: center; gap: 14px;
	padding: 12px 18px; border-bottom: 1px solid var(--row2); transition: background .15s;
}
.news__row:last-child { border-bottom: 0; }
.news__row:hover { background: var(--hover); color: var(--ink); }
.news__date { font-family: var(--mono); font-size: 12px; color: var(--sub); }
.news__cat { font-size: 11px; font-weight: 900; padding: 4px 0; border-radius: 4px; text-align: center; }
.news__title { font-size: 14px; font-weight: 700; line-height: 1.5; }
.news__new { font-size: 11px; font-weight: 900; color: var(--red); }

/* ---------- LINE登録 ---------- */
.line-cta {
	background: var(--line-bg); border: 1px solid #bfe9cf; border-radius: 14px; padding: 22px 26px;
	display: grid !important; grid-template-columns: minmax(0, 1fr) auto 96px; gap: 24px !important; align-items: center;
	margin-top: -24px;
}
.line-cta__text { display: flex; flex-direction: column; gap: 6px; }
.line-cta__eyebrow { font-size: 12px; font-weight: 900; color: var(--line-ink); }
.line-cta__title { font-size: 19px; font-weight: 900; line-height: 1.5; }
.line-cta__note { font-size: 13px; color: var(--body); }
.line-cta__btn {
	background: var(--line); color: #fff; font-size: 15px; font-weight: 900; padding: 14px 28px; border-radius: 999px;
	box-shadow: 0 3px 0 var(--line-sh); white-space: nowrap; transition: background .15s;
}
.line-cta__btn:hover { background: var(--line-h); color: #fff; }
.line-cta__qr {
	width: 96px; height: 96px; border-radius: 8px; overflow: hidden;
	background: repeating-linear-gradient(135deg, #d6f1e0 0 5px, #c8ebd5 5px 10px);
	font-family: var(--mono); font-size: 10px; color: #3f7a56; display: flex; align-items: center; justify-content: center;
}
.line-cta__qr img { width: 100%; height: 100%; object-fit: contain; background: #fff; }

/* ---------- 放送中・放送予定 ---------- */
.season__grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 14px; }
.wcard { display: flex; flex-direction: column; gap: 6px; transition: transform .15s; }
.wcard:hover { transform: translateY(-3px); }
.wcard__link { display: flex; flex-direction: column; gap: 6px; color: var(--ink); }
.wcard__link:hover { color: var(--ink); }
.wcard__cover { border-radius: 6px; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
.wcard__day {
	position: absolute; top: 6px; left: 6px; background: #fff; color: var(--red); font-size: 10px; font-weight: 900;
	padding: 2px 6px; border-radius: 3px; z-index: 1;
}
.wcard__title { font-size: 13px; font-weight: 700; line-height: 1.4; }
.wcard__tags { display: flex; gap: 4px; }
.wcard__tag { font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 3px; }
.wcard__tag--vod { color: var(--blue); background: var(--blue-bg); }
.wcard__tag--read { color: var(--red-ink); background: var(--red-bg); }
.wcard__tag:hover { filter: brightness(.95); }

/* ---------- 人気ランキング ---------- */
.rank__pc { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 28px; }
.rank__top { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.rank__card { display: flex; flex-direction: column; gap: 8px; transition: transform .15s; }
.rank__card:hover { transform: translateY(-3px); }
.rank__card-link { display: flex; flex-direction: column; gap: 8px; color: var(--ink); }
.rank__card-link:hover { color: var(--ink); }
.rank__cover-wrap { position: relative; }
.rank__cover { border-radius: 6px; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
.rank__medal {
	position: absolute; top: -6px; left: -6px; color: #fff; font-weight: 900; font-size: 20px; width: 40px; height: 40px;
	display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 3px solid #fff; z-index: 2;
}
.rank__title { font-size: 15px; font-weight: 900; line-height: 1.4; word-break: auto-phrase; }
.rank__meta { display: flex; gap: 6px; align-items: center; }
.rank__genre { font-size: 11px; color: var(--sub); }
.rank__move { font-size: 11px; color: var(--red); font-weight: 700; }
.rank__cta {
	text-align: center; border: 1.5px solid var(--btn); color: var(--btn); font-size: 12px; font-weight: 900;
	padding: 7px; border-radius: 999px; transition: all .15s;
}
.rank__cta:hover { background: var(--btn); color: #fff; }
.rank__rest { display: flex; flex-direction: column; }
.rank__row {
	display: flex; align-items: center; gap: 12px; padding: 9px 6px; border-bottom: 1px solid var(--row);
	font-size: 14px; transition: background .15s;
}
.rank__row:hover { background: var(--hover); color: var(--ink); }
.rank__num { width: 22px; font-weight: 900; color: var(--navy); text-align: center; }
.rank__mini { width: 30px; height: 40px; aspect-ratio: auto; border-radius: 3px; flex-shrink: 0; }
.rank__row-title { font-weight: 700; flex: 1; min-width: 0; }
.rank__row-move { font-size: 11px; width: 34px; text-align: right; color: var(--red); font-weight: 700; }

/* ---------- 考察・キャラクター特集 ---------- */
.feature { gap: 14px !important; }
.feature .sec-h { gap: 14px; }
.feature__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.feature__card {
	display: flex; flex-direction: column; gap: 8px; color: var(--ink); border: 1px solid var(--bd); border-radius: 12px;
	overflow: hidden; transition: transform .15s, box-shadow .15s;
}
.feature__card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(29, 33, 48, .1); color: var(--ink); }
.feature__kind {
	position: absolute; top: 8px; left: 8px; color: #fff; font-size: 11px; font-weight: 900; padding: 2px 9px;
	border-radius: 999px; z-index: 1;
}
.feature__body { padding: 0 14px 14px; display: flex; flex-direction: column; gap: 5px; }
.feature__work { font-size: 11px; font-weight: 900; color: var(--red); }
.feature__title { font-size: 15px; font-weight: 900; line-height: 1.5; word-break: auto-phrase; }
.feature__spoil { font-size: 11px; color: var(--amber); font-weight: 700; }

/* ---------- 電子書籍アプリ ---------- */
.ebook {
	background: var(--ebook-bg); border: 1px solid #f6d3d0; border-radius: 14px; padding: 30px;
	gap: 20px !important;
}
.ebook__head { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.ebook__titles { display: flex; flex-direction: column; gap: 6px; }
.ebook__eyebrow { font-size: 13px; font-weight: 900; color: var(--red); }
.ebook__head h2 { margin: 0; font-size: 26px; font-weight: 900; }
.ebook__note { margin-left: auto; font-size: 12px; color: var(--sub); }

.etable { background: #fff; border-radius: 10px; border: 1px solid #f0dcda; overflow: hidden; }
.etable__row {
	display: grid; grid-template-columns: minmax(236px, 1.6fr) 80px minmax(0, 1.4fr) 72px 64px 140px; gap: 12px; /* 記号の列は「月額の安さ」が1行に入る幅（2026-11-02） */
	padding: 16px 18px; border-top: 1px solid #f3e6e4; align-items: center; background: #fff;
}
.etable__row.is-top { background: #fffaf0; }
.etable.is-editor .etable__row { grid-template-columns: minmax(236px, 1.6fr) minmax(0, 1.9fr) 72px 64px 140px; } /* 編集部のおすすめ順（★の列なし） */
.etable__row.is-paused, .ecard.is-paused { background: #f7f8fa; color: var(--sub); }
.etable__row.is-paused .etable__mark { color: var(--sub); }
.medal.is-paused { background: #b8bfcc; }
.etable__paused { display: inline-block; justify-self: center; font-size: 12px; font-weight: 900; color: var(--sub); background: #e9ecf1; border-radius: 999px; padding: 6px 14px; white-space: nowrap; }
.etable__paused-link { justify-self: center; font-size: 12px; font-weight: 900; color: var(--navy); border: 1.5px solid var(--bd2); border-radius: 999px; padding: 6px 14px; white-space: nowrap; background: #fff; } /* 停止の状況のレビュー記事へ */
.etable__paused-link:hover { border-color: var(--navy); color: var(--navy); }
.ecard.is-paused .etable__paused-link { align-self: flex-start; }
.etable__row--head { padding: 10px 18px; background: var(--ink); color: #fff; font-size: 12px; font-weight: 700; border-top: 0; }
.etable__row--head .c { text-align: center; }
.etable__app { display: flex; align-items: center; gap: 12px; min-width: 0; }
.medal {
	color: #fff; font-weight: 900; font-size: 13px; width: 26px; height: 26px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.etable__name-wrap { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.etable__name { font-weight: 900; font-size: 15px; white-space: nowrap; }
.etable__star { display: flex; flex-direction: column; font-size: 12px; }
.etable__score { color: var(--ink); font-weight: 900; font-size: 15px; }
.etable__point { font-size: 13px; color: var(--body); line-height: 1.6; }
.etable__mark { text-align: center; font-size: 18px; font-weight: 900; color: var(--red); }
.etable__btn { font-size: 14px; padding: 12px 8px; }

/* ---------- VOD・配信限定 ---------- */
.vodx { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px !important; }
.vodx__col { display: flex; flex-direction: column; gap: 16px; }
.vodx__col .sec-h { flex-wrap: nowrap; }
.vodx__pr { margin-left: auto; font-size: 11px; }
.vlist { display: flex; flex-direction: column; border: 1px solid var(--bd); border-radius: 10px; overflow: hidden; }
.vlist__row { display: flex; align-items: center; gap: 14px; padding: 13px 16px; border-bottom: 1px solid var(--row); }
.vlist__row:last-child { border-bottom: 0; }
.vlist__rank { font-size: 18px; font-weight: 900; color: var(--navy); width: 20px; flex-shrink: 0; }
.vlist__logo {
	width: 64px; height: 36px; border-radius: 4px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
	overflow: hidden; position: relative;
}
.vlist__logo em { font-style: normal; font-family: var(--mono); font-size: 9px; color: #7a8090; display: none; }
.vlist__logo img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.vlist__body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.vlist__name { font-weight: 900; font-size: 15px; }
.vlist__name .lbl-top { display: inline-block; margin-right: 6px; vertical-align: 2px; }
.vlist__point { font-size: 12px; color: var(--sub); }
.vlist__star { font-size: 13px; font-weight: 900; color: var(--ink); white-space: nowrap; }
.vlist__star span, .vlist__star-sp span { color: var(--star); }
.vlist__btn { font-size: 12px; padding: 8px 12px; white-space: nowrap; min-width: 116px; text-align: center; } /* 文言の長さがちがっても★の位置をそろえる */
.vodx__more { align-self: flex-end; font-size: 13px; color: var(--navy); font-weight: 700; }

.excl__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.excl__card { display: flex; flex-direction: column; gap: 6px; color: var(--ink); transition: transform .15s; }
.excl__card:hover { transform: translateY(-3px); color: var(--ink); }
.excl__img { border-radius: 6px; }
.excl__where {
	position: absolute; bottom: 6px; left: 6px; background: var(--navy); color: #fff; font-size: 10px; font-weight: 700;
	padding: 2px 6px; border-radius: 3px; z-index: 1;
}
.excl__title { font-size: 13px; font-weight: 700; line-height: 1.4; }

/* ---------- 新着記事・ジャンル ---------- */
.latest-genre { display: grid !important; grid-template-columns: minmax(0, 1fr) 360px; gap: 32px !important; }
.latest, .genres { display: flex; flex-direction: column; gap: 16px; }
.latest__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.latest__item { display: flex; gap: 12px; color: var(--ink); }
.latest__item:hover { color: var(--ink); }
.latest__img { width: 128px; flex-shrink: 0; border-radius: 6px; align-self: flex-start; } /* 題が3行になっても行の高さまで伸ばさず、16:9のまま（伸びると画像が拡大されて切れる） */
.latest__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.latest__cat { font-size: 11px; color: var(--red); font-weight: 900; }
.latest__title { font-size: 14px; font-weight: 700; line-height: 1.5; }
.latest__item:hover .latest__title { color: var(--navy); text-decoration: underline; }
.latest__date { font-size: 11px; color: var(--sub); }

.genres__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.genres__item {
	border: 1px solid var(--bd2); border-radius: 8px; padding: 12px 14px; display: flex; justify-content: space-between;
	font-size: 14px; font-weight: 700; transition: all .15s; gap: 6px;
}
.genres__item:hover { border-color: var(--navy); background: var(--hover); color: var(--ink); }
.genres__arrow { color: var(--navy); }
.genres__adult {
	border: 1px solid var(--bd2); border-radius: 8px; padding: 12px 14px; display: flex; align-items: center; gap: 10px;
	font-size: 13px; color: var(--body);
}
.genres__adult-arrow { margin-left: auto; }

/* ---------- 公式SNS ---------- */
.sns__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.sns__soon { font-size: 13px; color: var(--sub); line-height: 1.7; padding: 10px 0; flex: 1; }
.sns__card { border: 1px solid var(--bd); border-radius: 12px; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.sns__card--line { background: var(--line-bg); border-color: var(--line-bg); }
.sns__head { display: flex; align-items: center; gap: 10px; }
.sns__badge { color: #fff; font-size: 11px; font-weight: 900; padding: 3px 8px; border-radius: 4px; }
.sns__title { font-size: 15px; font-weight: 900; }
.sns__videos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sns__video { display: flex; flex-direction: column; gap: 6px; color: var(--ink); }
.sns__vthumb { border-radius: 6px; display: flex; align-items: center; justify-content: center; }
.sns__play {
	position: relative; z-index: 1; width: 30px; height: 22px; border-radius: 6px; background: rgba(224, 65, 58, .9);
	color: #fff; font-size: 10px; display: flex; align-items: center; justify-content: center;
}
.sns__vtitle { font-size: 12px; font-weight: 700; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sns__outline {
	margin-top: auto; border: 1.5px solid var(--ink); text-align: center; font-size: 13px; font-weight: 900;
	padding: 10px; border-radius: 999px; transition: all .15s;
}
.sns__outline:hover { background: var(--ink); color: #fff; }
.sns__post { background: var(--bg2); border-radius: 8px; padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.sns__xposts { display: flex; flex-direction: column; gap: 12px; }
.sns__ptext { font-size: 13px; line-height: 1.6; }
.sns__ptext:hover { color: var(--navy); }
.sns__pfoot { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.sns__ptime { font-size: 11px; color: var(--sub); }
.sns__acts { display: flex; gap: 4px; }
.sns__acts a {
	font-size: 10px; font-weight: 700; color: var(--body); background: #fff; border: 1px solid var(--bd); border-radius: 999px;
	padding: 2px 8px; white-space: nowrap;
}
.sns__acts a:hover { border-color: var(--ink); color: var(--ink); }
.sns__xtl { min-height: 120px; border-radius: 8px; overflow: hidden; }
.sns__video .thumb { cursor: pointer; }
.sns__video:hover .sns__play { background: var(--red); }

/* YouTube をこのページの上で再生する窓 */
.yt-modal {
	position: fixed; inset: 0; z-index: 100; background: rgba(16, 20, 32, .82); display: flex; align-items: center;
	justify-content: center; padding: 24px;
}
.yt-modal__box { position: relative; width: min(960px, 100%); aspect-ratio: 16 / 9; background: #000; border-radius: 10px; overflow: hidden; }
.yt-modal__box iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt-modal__close {
	position: absolute; top: -44px; right: 0; width: 40px; height: 40px; border-radius: 50%; border: 0; background: #fff;
	color: var(--ink); font-size: 20px; cursor: pointer;
}
.sns__benefit { display: flex; gap: 8px; font-size: 13px; line-height: 1.6; }
.sns__benefit span:first-child { color: var(--line-ink); font-weight: 900; }
.sns__line-btn { margin-top: auto; font-size: 14px; padding: 12px; }

/* ---------- 信頼ブロック ---------- */
.trust {
	background: var(--bg2); border-radius: 14px; padding: 28px 30px;
	display: grid !important; grid-template-columns: 260px minmax(0, 1fr); gap: 32px !important; align-items: center;
}
.trust__side { display: flex; flex-direction: column; gap: 8px; }
.trust__eyebrow { font-size: 12px; font-weight: 900; color: var(--navy); letter-spacing: .1em; }
.trust__title { font-size: 20px; font-weight: 900; line-height: 1.5; }
.trust__link { font-size: 13px; font-weight: 700; color: var(--navy); margin-top: 4px; }
.trust__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.trust__card { background: #fff; border-radius: 10px; padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.trust__no { font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--red); }
.trust__h { font-size: 15px; font-weight: 900; }
.trust__body { font-size: 13px; color: var(--body); line-height: 1.7; }

/* ---------- 少し狭いPC・タブレット ---------- */
@media (max-width: 1100px) and (min-width: 769px) {
	.season__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.rank__pc { grid-template-columns: 1fr; }
	.vodx, .latest-genre { grid-template-columns: 1fr; }
	.sns__grid { grid-template-columns: 1fr 1fr; }
	.sns__grid .sns__card:first-child { grid-column: 1 / -1; }
	.trust { grid-template-columns: 1fr; }
	.etable__row { grid-template-columns: minmax(200px, 1.6fr) 72px minmax(0, 1.2fr) 48px 48px 128px; gap: 8px; }
	.etable.is-editor .etable__row { grid-template-columns: minmax(200px, 1.6fr) minmax(0, 1.6fr) 48px 48px 128px; }
	.intents__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) and (min-width: 769px) {
	.hero-wrap { grid-template-columns: 1fr; }
	.searches { display: none; }
}

/* =========================================================
 * スマホ（top-sp）
 * ======================================================= */
@media (max-width: 768px) {
	/* メインビジュアル */
	.hero-wrap { padding: 14px 16px 0; display: block; }
	.hero { gap: 10px; }
	.hero__stage { border-radius: 12px; height: 300px; touch-action: pan-y; }
	.hero-pr {
		background: linear-gradient(150deg, #fff4f2, #ffe3df); display: flex; flex-direction: column;
	}
	.hero-pr__text { padding: 20px; gap: 10px; justify-content: flex-start; flex: 1; }
	.hero-pr__eyebrow { gap: 6px; }
	.hero-pr__eyebrow .lbl-pr { font-size: 10px; padding: 2px 6px; }
	.hero-pr__lead { font-size: 12px; }
	.hero-pr__title { font-size: 28px; line-height: 1.2; }
	.hero-pr__catch { font-size: 13px; line-height: 1.7; -webkit-line-clamp: 3; }
	.hero-pr__points { gap: 6px; }
	.hero-pr__points span { font-size: 11px; padding: 4px 8px; }
	.hero-pr__ctas { margin-top: auto; }
	.hero-pr__btn { flex: 1; text-align: center; font-size: 16px; padding: 14px; box-shadow: 0 3px 0 var(--btn-sh); }
	.hero-work__ph { top: 12px; left: 12px; right: auto; font-size: 10px; }
	.hero-work__body { padding: 18px; gap: 8px; background: linear-gradient(transparent, rgba(16, 24, 48, .9) 40%); }
	.hero-work__label { font-size: 11px; padding: 3px 8px; }
	.hero-work__title { font-size: 22px; line-height: 1.35; }
	.hero-work__catch { font-size: 13px; }
	.hero-work__ctas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
	.hero-work__btn { font-size: 13px; padding: 12px 4px; text-align: center; }
	.hero-x, .hero-x--latest { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 10px; padding: 18px 18px 16px; }
	.hero-x__text { gap: 8px; justify-content: flex-start; }
	.hero-x__eyebrow { font-size: 11px; padding: 3px 10px; }
	.hero-x__title, .hero-x--feature .hero-x__title { font-size: 22px; line-height: 1.35; }
	.hero-x__catch { font-size: 13px; line-height: 1.7; }
	.hero-x--vod .hero-x__catch, .hero-x--ebook .hero-x__catch { -webkit-line-clamp: 2; }
	.hero-x--feature .hero-x__catch, .hero-x--latest .hero-x__catch { display: none; }
	.hero-x__btn { position: absolute; left: 18px; right: 18px; bottom: 16px; text-align: center; font-size: 15px; padding: 12px; }
	.hero-x { padding-bottom: 72px; } /* ボタンは .hero__slide（position: absolute）を基準に下へ置きます */
	.hero-x--intro .hero-x__side, .hero-x--intro .hero-x__catch { display: none; }
	.hero-x--intro::before { width: 180px; height: 180px; right: 14px; top: 42%; }
	.hero-x__lead { font-size: 15px; }
	.hero-x__pops { gap: 2px 12px; }
	.hero-x__pop { font-size: 30px; }
	.hero-x--feature.has-bg { padding: 18px 14px 72px; gap: 12px; justify-content: flex-start; }
	.hero-x--latest.has-bg { grid-template-columns: minmax(0, 1fr); }
	.hero-x--latest.has-bg::before { background-position: 8% center; }
	.hero-x--latest.has-bg .hero-x__title--comic { font-size: 26px; }
	.hero-x--latest.has-bg .hero-x__catch { display: -webkit-box; font-size: 13px; -webkit-line-clamp: 2; }
	/* スマホでも新着記事の題を3本出します（説明の文の代わりに。押すとその記事へ）。2026-11-02 */
	.hero-x--latest.has-bg .hero-x__catch { display: none; }
	.hero-x__news { gap: 6px; max-width: none; }
	.hero-x__news a { padding: 6px 10px; box-shadow: 2px 2px 0 #111; background: rgba(255, 255, 255, .96); }
	.hero-x__news b { font-size: 12.5px; }
	.hero-x--feature.has-bg .hero-x__catch { display: none; }
	.hero-x__title--comic { font-size: 30px; -webkit-text-stroke: 5px #111; text-shadow: 3px 4px 0 #111; }
	.hero-x--feature.has-bg .hero-x__list { max-height: 96px; gap: 6px; }
	.hero-x--feature.has-bg .hero-x__list a, .hero-x--feature.has-bg .hero-x__list span { padding: 4px 10px; border-width: 2px; box-shadow: 2px 2px 0 #111; }
	.hero-x__logos { grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 6px; }
	.hero-x__logo { padding: 4px; border-radius: 6px; font-size: 9px; }
	.hero-x__list { gap: 4px; }
	.hero-x__list li:nth-child(n+4) { display: none; }
	.hero-x__list a, .hero-x__list span { padding: 5px 10px; grid-template-columns: 20px minmax(0, 1fr); }
	.hero-x__list i { grid-row: auto; font-size: 13px; }
	.hero-x__list b { font-size: 13px; }
	.hero-x__list small { display: none; }
	.hero-x--latest .hero-x__side { flex-direction: column; gap: 6px; justify-content: flex-start; }
	.hero-x__post { flex: none; flex-direction: row; align-items: baseline; gap: 8px; }
	.hero-x__thumb { display: none; }
	.hero-x__ptitle { order: 2; font-size: 13px; -webkit-line-clamp: 1; }
	.hero-x__pdate { order: 1; flex-shrink: 0; }

	.hero__dots { display: flex; align-items: center; justify-content: center; gap: 4px; }
	.hero__dot-arrow { width: 44px; height: 44px; border: 0; background: transparent; font-size: 18px; cursor: pointer; }
	.hero__dot { width: 6px; height: 6px; border-radius: 3px; background: #c9ceda; border: 0; padding: 0; margin: 0 2px; cursor: pointer; position: relative; }
	.hero__dot::before { content: ""; position: absolute; inset: -12px -4px; }
	.hero__dot.is-active { width: 22px; background: var(--red); margin: 0; cursor: default; }

	/* 目的別ナビ */
	.intents { padding: 8px 16px 0; gap: 10px; }
	.intents__head h2 { font-size: 18px; }
	.intents__grid { grid-template-columns: 1fr 1fr; gap: 8px; }
	.intent { padding: 14px; gap: 6px; min-height: 118px; }
	.intent:hover { transform: none; box-shadow: none; }
	.intent__tag { font-size: 10px; }
	.intent__title { font-size: 14px; line-height: 1.45; word-break: auto-phrase; text-wrap: balance; } /* 「読みた/い」「イ/ベント」のような1〜2文字だけの折り返しを防ぎます。2026-11-02 */
	.intent__arrow--sp { margin-top: auto; align-self: flex-end; width: 26px; height: 26px; font-size: 13px; }

	/* 本体：各セクションの左右に16px */
	.home__body { padding: 28px 0 0; gap: 28px; }
	.home__body > section { gap: 10px; padding: 0 16px; }
	.reads, .news, .feature { gap: 10px !important; }

	/* 最新のネタバレ・感想 */
	.reads__grid { display: flex; flex-direction: column; gap: 0; }
	.reads__lead { gap: 8px; }
	.reads__lead:hover { transform: none; }
	.reads__lead-img { border-radius: 10px; }
	.reads__ep { top: 8px; right: 8px; font-size: 11px; padding: 2px 9px; }
	.reads__work { font-size: 11px; }
	.reads__work--s { font-size: 10px; }
	.reads__lead-title { font-size: 16px; }
	.reads__list { margin-top: 2px; }
	.reads__row { grid-template-columns: 96px minmax(0, 1fr); gap: 10px; padding: 8px 0; }
	.reads__ep-s { bottom: 3px; left: 3px; font-size: 9px; padding: 1px 5px; }
	.reads__row-title { font-size: 13px; }
	.hubchips { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 4px; }
	.hubchips__list { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; gap: 6px; min-width: 0; max-width: calc(100% + 32px); } /* 横に流れる列が、親を画面より広げないように（2026-11-02） */
	.hubchips { min-width: 0; max-width: 100%; }
	.hubchips__list::-webkit-scrollbar { display: none; }
	.hubchips__chip { flex-shrink: 0; padding: 9px 12px; }

	/* 最新トピック */
	.news__list { border: 0; border-top: 1px solid var(--bd); border-radius: 0; }
	.news__row {
		display: grid; grid-template-columns: auto auto auto 1fr; grid-template-areas: "cat date new ." "title title title title";
		gap: 6px 8px; padding: 12px 0; border-bottom: 1px solid var(--row);
	}
	.news__row:last-child { border-bottom: 1px solid var(--row); }
	.news__cat { grid-area: cat; font-size: 10px; padding: 3px 8px; }
	.news__date { grid-area: date; font-size: 11px; }
	.news__new { grid-area: new; font-size: 10px; }
	.news__title { grid-area: title; font-size: 14px; line-height: 1.55; }

	/* LINE */
	.home__body > .line-cta {
		margin: -8px 16px 0; padding: 16px; display: flex !important; flex-direction: column; gap: 10px !important;
		align-items: stretch;
	}
	.line-cta__eyebrow { font-size: 11px; }
	.line-cta__title { font-size: 16px; }
	.line-cta__btn { text-align: center; padding: 14px; }

	/* 放送中・放送予定 */
	.home__body > .season { padding: 0; }
	.season .sec-h { margin: 0 16px; }
	.season__pills { padding: 0 16px; }
	.season__grid { display: flex; overflow-x: auto; scrollbar-width: none; gap: 10px; padding: 0 16px 4px; }
	.season__grid::-webkit-scrollbar { display: none; }
	.season__grid .wcard { flex-shrink: 0; width: 112px; }
	.wcard:hover { transform: none; }
	.wcard__cover { box-shadow: none; }
	.wcard__day { top: 5px; left: 5px; padding: 2px 5px; }
	.wcard__title { font-size: 12px; }
	.season__swipe { padding: 0 16px; font-size: 12px; color: var(--sub); }

	/* ランキング */
	.rank__note-sp { margin-left: auto; font-size: 11px; }
	.rank__sprow { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--row); }
	.rank__sp-medal {
		color: #fff; font-weight: 900; font-size: 13px; width: 26px; height: 26px; border-radius: 50%;
		display: flex; align-items: center; justify-content: center; flex-shrink: 0;
	}
	.rank__sp-main { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; color: var(--ink); }
	.rank__sp-main:hover { color: var(--ink); }
	.rank__sp-cover { width: 44px; height: 58px; aspect-ratio: auto; border-radius: 4px; flex-shrink: 0; }
	.rank__sp-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
	.rank__sp-title { font-size: 14px; font-weight: 700; line-height: 1.45; }
	.rank__sp-genre { font-size: 11px; color: var(--sub); }
	.rank__sp-cta {
		flex-shrink: 0; border: 1.5px solid var(--red); color: var(--red); font-size: 11px; font-weight: 900;
		padding: 8px 10px; border-radius: 999px; white-space: nowrap;
	}
	.rank__more-sp {
		border: 1.5px solid var(--navy); color: var(--navy); text-align: center; font-size: 14px; font-weight: 700;
		padding: 12px; border-radius: 999px;
	}

	/* 特集 */
	.home__body > .feature { padding: 0; }
	.feature .sec-h { margin: 0 16px; }
	.feature__grid { display: flex; overflow-x: auto; scrollbar-width: none; gap: 10px; padding: 0 16px 4px; }
	.feature__grid::-webkit-scrollbar { display: none; }
	.feature__card { flex-shrink: 0; width: 220px; gap: 6px; }
	.feature__card:hover { transform: none; box-shadow: none; }
	.feature__kind { top: 6px; left: 6px; font-size: 10px; padding: 2px 8px; }
	.feature__body { padding: 0 12px 12px; gap: 4px; }
	.feature__work { font-size: 10px; }
	.feature__title { font-size: 14px; }
	.feature__spoil { font-size: 10px; }

	/* 電子書籍アプリ */
	.home__body > .ebook {
		padding: 24px 16px; border-radius: 0; border-left: 0; border-right: 0; gap: 12px !important;
	}
	.ebook__titles { gap: 4px; }
	.ebook__head { flex-direction: column; align-items: flex-start; gap: 4px; }
	.ebook__eyebrow { font-size: 12px; }
	.ebook__head h2 { font-size: 20px; }
	.ebook__note { margin-left: 0; font-size: 11px; }
	.ecards { display: flex; flex-direction: column; gap: 12px; }
	.ecard { background: #fff; border: 1px solid #f0dcda; border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
	.ecard__top { display: flex; align-items: center; gap: 10px; }
	.svc-logo--40 { width: 40px; height: 40px; }
	.ecard__name-wrap { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
	.ecard__name { font-weight: 900; font-size: 16px; }
	.ecard__star { font-size: 12px; font-weight: 900; white-space: nowrap; display: flex; flex-direction: column; align-items: flex-end; }
	.ecard__star small { font-size: 10px; font-weight: 700; color: var(--sub); }
	.ecard__star span { color: var(--star); }
	.ecard__star b { font-weight: 900; } /* ★と数を1行に（VOD の一覧の「★4.6」とそろえる。2026-11-02） */
	.ecard__point { font-size: 13px; color: var(--body); line-height: 1.6; }
	.ecard__marks { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; font-size: 12px; }
	.ecard__marks > span { background: #fff4f2; border-radius: 6px; padding: 6px 10px; display: flex; justify-content: space-between; }
	.ecard__marks b { font-weight: 900; color: var(--red); }
	.ecard__btn { font-size: 15px; padding: 13px; }
	/* スマホは赤いボタンをまとまりごとに1つ（イチ推し）だけにし、ほかは白地に紺の線にします */
	.ecard__btn.is-sub, .vlist__btn.is-sub { background: #fff; color: var(--navy); border: 1.5px solid var(--navy); box-shadow: none; }


	/* VOD・配信限定 */
	.home__body > .vodx { display: flex !important; flex-direction: column; gap: 28px !important; padding: 0; }
	.vodx__col { gap: 10px; }
	.vodx__col--vod { padding: 0 16px; }
	.vodx__col--excl .sec-h { margin: 0 16px; }
	.vlist { border: 0; border-radius: 0; }
	.vlist__row { gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--row); }
	.vlist__row:last-child { border-bottom: 1px solid var(--row); }
	.vlist__rank { font-size: 16px; width: 18px; }
	.vlist__star-sp { font-size: 12px; font-weight: 700; }
	.vlist__point { line-height: 1.5; }
	.vlist__btn { padding: 11px 12px; min-width: 0; }
	.excl__grid { display: flex; overflow-x: auto; scrollbar-width: none; gap: 10px; padding: 0 16px 4px; }
	.excl__grid::-webkit-scrollbar { display: none; }
	.excl__card { flex-shrink: 0; width: 200px; }
	.excl__card:hover { transform: none; }
	.excl__where { bottom: 5px; left: 5px; }

	/* 新着記事・ジャンル */
	.home__body > .latest-genre { display: flex !important; flex-direction: column; gap: 28px !important; }
	.latest, .genres { gap: 10px; }
	.latest__grid { display: flex; flex-direction: column; gap: 0; }
	.latest__item { gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--row); }
	.latest__img { width: 104px; }
	.latest__body { gap: 3px; }
	.latest__cat { font-size: 10px; }
	.latest__title { font-size: 13px; }
	.genres__grid { gap: 6px; }
	.genres__item { padding: 12px; font-size: 13px; }

	/* SNS */
	.sns__h { border-left: 0; padding-left: 0; }
	.sns__tiles { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
	.sns__tiles > * {
		color: #fff; border-radius: 12px; padding: 14px 4px; display: flex; flex-direction: column; align-items: center;
		gap: 2px; font-size: 13px; font-weight: 900;
	}
	.sns__tiles > * span { font-size: 10px; font-weight: 500; }

	/* 信頼ブロック */
	.home__body > .trust { margin: 0 16px; padding: 16px; border-radius: 12px; display: block !important; }
	.trust__sp { display: flex; flex-direction: column; gap: 10px; }
	.trust__sp-title { font-size: 15px; font-weight: 900; }
	.trust__sp-row { display: flex; gap: 8px; font-size: 13px; line-height: 1.6; }
	.trust__sp-row .trust__no { padding-top: 1px; }
	.trust__sp-row b { font-weight: 900; }
	.trust__link { margin-top: 0; }

	.is-front .site-footer { margin-top: 28px; }
}