@charset "UTF-8";

/*--------------------------------------------------------------------
=== [タブレット] ====================================
 -------------------------------------------------------------------*/

@media screen and (max-width: 1024px) {
    .gnav a { padding: 8px 10px; font-size: 13px; }
    .secTtl .en { font-size: 52px; }

    .bento { grid-template-columns: 1fr 1fr; }
    .pickMain { grid-column: 1 / 3; grid-row: auto; min-height: 480px; }
    .greetCard { grid-column: 1 / 3; }

    .rankList a, .rankList span.row { grid-template-columns: 40px 100px 1fr 36px; }
    .rankList .cmt { grid-column: 2 / 4; grid-row: 2; }
    .rankList .arrow { grid-column: 4; grid-row: 1; }

    .epGrid { grid-template-columns: repeat(3, 1fr); }
    .genre .grid { grid-template-columns: repeat(2, 1fr); }
    .bottom .grid { grid-template-columns: 1fr; }
    .layout { grid-template-columns: 1fr; }
    .side { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    .side .widget + .widget { margin-top: 0; }
    .footer .cols { grid-template-columns: 1fr 1fr; }
    .hyHero .box { padding: 0 32px 0 40px; }
    .hyHero .nm { font-size: 88px; }
    .hyProfile .grid { grid-template-columns: 1fr; gap: 24px; }
    .hyTraits .grid { grid-template-columns: 1fr 1fr; }
    .pageHead .box { grid-template-columns: 1fr; gap: 20px; }
    .pageHead h1 .en { font-size: 60px; }
    .dramaGrid, .svcRank { grid-template-columns: repeat(3, 1fr); }
    .catBlocks { grid-template-columns: repeat(2, 1fr); }
    .dramaHero .box { grid-template-columns: 1fr; padding: 16px 16px 28px; }
    .dramaHero .info { padding: 0 12px; }
    .rankBar { flex-direction: column; align-items: flex-start; }
    .contactWrap { grid-template-columns: 1fr; }
    .contactSide .pic { display: none; }
    .notFound .box { grid-template-columns: 1fr 280px; padding: 40px 40px 0; }
}

/*--------------------------------------------------------------------
=== [SP] ====================================
 -------------------------------------------------------------------*/

@media screen and (max-width: 767px) {
    .pc { display: none; }
    .sp { display: initial; }
    .inner { padding: 0 14px; }
    :root { --radius: 24px; }

    /* ヘッダー */
    .header { top: 8px; margin-top: 8px; }
    .header .inner { height: 60px; gap: 6px; margin: 0 8px; padding: 0 6px 0 10px; }
    .logo .name { font-size: 25px; }
    .logo .tagline { font-size: 8.5px; letter-spacing: .04em; }
    .searchBtn { margin-left: auto; width: 44px; height: 44px; font-size: 17px; }
    .menuBtn { display: grid; width: 44px; height: 44px; font-size: 19px; }
    .gnav {
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        right: 0;
        margin: 0;
        padding: 12px;
        border-radius: 28px;
        background: #fff;
        box-shadow: 0 16px 40px rgba(30, 28, 26, .14);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        transition: all .25s;
    }
    .gnav.is-open { opacity: 1; visibility: visible; transform: none; }
    .gnav ul { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
    .gnav a { padding: 14px; text-align: center; background: var(--bg); font-size: 14px; }

    /* 見出し */
    .sec { padding-top: 80px; }
    .secHead { flex-wrap: wrap; align-items: flex-start; margin-bottom: 24px; }
    .secTtl { gap: 10px; }
    .secTtl .num { width: 32px; height: 32px; margin-top: 4px; font-size: 12px; }
    .secTtl .en { font-size: 40px; }
    .secTtl .ja { font-size: 12px; margin-top: 8px; }
    .more { padding: 6px 6px 6px 14px; font-size: 13px; }
    .more .icon { width: 24px; height: 24px; padding: 6px; }

    .marquee { margin-top: 28px; padding: 10px 0; }
    .marquee span { font-size: 16px; gap: 18px; padding-right: 18px; }

    /* ヒーロー */
    .hero { padding-top: 20px; }
    .bento { gap: 10px; }
    .pickMain { min-height: 440px; }
    .pickMain .sticker { width: 80px; height: 80px; font-size: 12px; top: 16px; left: 16px; }
    .pickMain .body { left: 10px; right: 10px; bottom: 10px; padding: 18px; border-radius: 18px; }
    .pickMain .ttl { font-size: 18px; }
    .pickMain .excerpt { display: none; }
    .greetCard { padding: 22px 20px 20px; }
    .greetCard .hello { font-size: 22px; }
    .greetCard .hello .icon { font-size: 26px; }
    .greetCard .msg { padding-right: 76px; font-size: 13px; }
    .greetCard .face { width: 76px; right: 14px; bottom: 64px; }
    .greetCard .stat { padding: 5px 12px; font-size: 11px; }
    .pickSub { padding: 8px 8px 14px; }
    .pickSub .lbl { margin: 10px 4px 0; }
    .pickSub .ttl { margin: 4px 4px 0; font-size: 13px; }
    .pickSub .excerpt { display: none; }

    /* ランキング */
    .rankTabs {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        max-width: 100%;
        scrollbar-width: none;
    }
    .rankTabs button { flex-shrink: 0; padding: 8px 14px; font-size: 13px; }
    .rankTop3 { grid-template-columns: 1fr; gap: 10px; }
    .rankCard { display: grid; grid-template-columns: 116px 1fr; column-gap: 12px; align-items: start; padding: 10px 10px 14px; }
    .rankCard > a:first-of-type { grid-row: 1 / 3; }
    .rankCard .thumb { aspect-ratio: 1; border-radius: 16px; }
    .rankCard .thumb .ph .icon { width: 40px; height: 40px; padding: 12px; }
    .rankCard .no { font-size: 36px; padding: 2px 12px 4px 10px; border-radius: var(--radius) 0 18px 0; }
    .rankCard .no small { font-size: 14px; }
    .rankCard .ttl { margin: 8px 0 0; font-size: 16px; }
    .rankCard .meta { margin: 6px 0 0; }
    .rankCard .hiyori, .rankCard .btn { grid-column: 1 / 3; }
    .rankList { padding: 4px 14px; }
    .rankList a, .rankList span.row { grid-template-columns: 26px 80px 1fr; gap: 10px 12px; }
    .rankList .no { font-size: 24px; }
    .rankList .ttl { font-size: 14px; }
    .rankList .cmt { grid-column: 1 / 4; font-size: 12px; }
    .rankList .arrow { display: none; }

    /* 新着 */
    .epGrid { grid-template-columns: 1fr 1fr; gap: 28px 10px; }
    .epCard .thumb .epNo { left: 8px; top: 8px; font-size: 11px; padding: 2px 9px; }
    .epCard .thumb .ph .icon { width: 44px; height: 44px; padding: 13px; }
    .epCard .drama { margin-top: 10px; font-size: 11px; }
    .epCard .ttl { font-size: 14px; }
    .epCard .meta { flex-wrap: wrap; gap: 4px 8px; font-size: 11px; }

    .airing .inner { padding: 0 8px; }
    .airing .panel { padding: 40px 0 36px 18px; border-radius: 32px; }
    .airing .secHead { padding-right: 18px; }
    .airScroll { grid-auto-columns: 74%; padding-right: 18px; }
    .slideNav { display: none; }

    .feature .grid { grid-template-columns: 1fr; gap: 10px; }
    .featCard { display: grid; grid-template-columns: 112px 1fr; column-gap: 14px; padding: 10px; align-items: center; }
    .featCard .thumb { grid-row: 1 / 3; aspect-ratio: 1; border-radius: 16px; }
    .featCard .thumb .ph .icon { width: 44px; height: 44px; padding: 13px; }
    .featCard .lbl { margin: 0; font-size: 10px; align-self: end; }
    .featCard .ttl { margin: 2px 0 0; font-size: 15px; align-self: start; }
    .featCard p { display: none; }

    .genre .grid { grid-template-columns: 1fr 1fr; gap: 8px; }
    .genreTile { gap: 10px; min-height: 72px; padding: 10px 12px 10px 10px; font-size: 15px; border-radius: 20px; }
    .genreTile .ico { width: 42px; height: 42px; font-size: 18px; }
    .genreTile::after { display: none; }
    .tagCloud .tag { padding: 6px 13px; font-size: 13px; }
    .grid + .subTtl { margin-top: 32px; }
    .subTtl { flex-wrap: wrap; gap: 2px 10px; font-size: 16px; }
    .artTax { padding: 16px; }
    .artTax > div { flex-direction: column; gap: 6px; }

    .svcGrid { grid-template-columns: 1fr 1fr; gap: 8px; }
    .svcTile { min-height: 96px; padding: 18px 16px 14px; border-radius: 18px; }
    .svcTile img { height: 20px; }
    .svcTile.prime img { height: 26px; }
    .svcTile.hulu img { height: 19px; }
    .svcTile.disney img { height: 36px; margin: -6px 0 -4px; }
    .rankTabs button { height: 38px; }

    /* エピソード */
    .breadcrumb { padding-top: 20px; }
    .dramaHead { grid-template-columns: 1fr; gap: 14px; padding: 10px 10px 18px; border-radius: 28px; }
    .dramaHead > div { padding: 0 8px; }
    .dramaHead .name { font-size: 22px; }
    /* 話数ボタン：スマホは横スクロールせず、5列で折り返す */
    .epTabs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
    .epTabs a, .epTabs span { min-width: 0; height: 36px; padding: 0; font-size: 13px; }

    .layout { margin-top: 12px; gap: 16px; }
    .side { grid-template-columns: 1fr; }
    .article { padding: 28px 18px 36px; border-radius: 28px; }
    .artHead h1 { font-size: 22px; }
    .epIntro { margin-top: 36px; }
    .epIntro h2 { font-size: 18px; }
    .epIntro p { font-size: 15px; }
    .impression { margin-top: 64px; padding: 20px 18px; border-radius: 24px; }
    .impression .bust { left: auto; right: 14px; bottom: auto; top: -58px; width: 80px; }
    .impression .who { padding-right: 90px; }
    .impression p:not(.who) { margin-top: 20px; font-size: 15px; }
    .spoGate { flex-wrap: wrap; gap: 12px; padding: 18px; border-radius: 24px; }
    .spoGate .face { width: 60px; }
    .spoGate .txt { flex: 1 1 60%; }
    .spoGate .btn { width: 100%; }
    .summary3, .toc, .score, .matome, .pointBox { padding: 22px 20px; border-radius: 22px; }
    .matome { margin-top: 32px; padding-bottom: 0; }
    .matome .bust { position: static; display: block; width: 200px; margin: 8px auto 0; border-radius: 0; }
    .entry h2 { font-size: 19px; gap: 10px; margin-top: 52px; }
    .entry h2::before { font-size: 13px; padding: 0 9px; }
    .entry h3 { font-size: 16px; }
    .entry p { font-size: 15px; }
    .charaList { grid-template-columns: 1fr; }
    .score dl { grid-template-columns: 1fr; }
    .epPager { grid-template-columns: 1fr; }
    .related .secTtl .en { font-size: 34px; }
    .related .epGrid { grid-template-columns: 1fr 1fr; gap: 24px 10px; }

    .footer { margin: 80px 8px 8px; padding-top: 48px; border-radius: 28px; }
    .footer .cols { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
    .footer .cols > div:first-child { grid-column: 1 / 3; }

    /* ひよりって？ */
    .hyHero .box { grid-template-columns: 1fr; min-height: 0; padding: 32px 20px 0; border-radius: 28px; }
    .hyHero .txt { padding: 0; }
    .hyHero .nm { font-size: 64px; }
    .hyHero .role { font-size: 13px; }
    .hyHero .hiyori.big .bubble { font-size: 14px; padding: 14px 16px; }
    .hyHero .pic img { max-width: 260px; margin-top: 8px; }
    .hyProfile .intro p { font-size: 15px; }
    .hyProfile .table { padding: 4px 18px; }
    .hyProfile .table > div { grid-template-columns: 1fr; gap: 2px; padding: 12px 0; }
    .hyTraits .grid { grid-template-columns: 1fr; gap: 10px; }
    .trait { padding: 22px 20px 20px; }
    .trait h3 br { display: none; }
    .hyGenre .grid, .hyWork .grid { grid-template-columns: 1fr; gap: 10px; }
    .genreCard, .work { padding: 22px 20px; }
    .genreCard .q { font-size: 16px; }
    .qa { padding: 4px 18px; }
    .qa dt, .qa dd { padding-left: 42px; }
    .qa dt { font-size: 15px; }
    .qa dd { font-size: 14px; }
    .hyMsg .box { flex-direction: column; gap: 16px; padding: 28px 20px; border-radius: 28px; text-align: center; }
    .hyMsg .face { width: 96px; }
    .hyMsg .m { font-size: 16px; }
    .hyMsg .btns { justify-content: center; }
    .hyMsg .btn { width: 100%; }

    /* 下層ページ */
    .listSec { padding-top: 28px; }
    .pageHead .box { padding: 28px 20px; border-radius: 28px; }
    .pageHead h1 .en { font-size: 44px; }
    .pageHead.isTag h1 .en { font-size: 38px; }
    .pageHead h1 .ja { font-size: 14px; }
    .pageHead .lead { font-size: 14px; }
    .pageHead .hiyori .face { width: 48px; height: 48px; }
    .filterBar { flex-direction: column; align-items: stretch; gap: 12px; margin-bottom: 24px; }
    .chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 -14px; padding: 0 14px 4px; scrollbar-width: none; }
    .chip { flex-shrink: 0; }
    .sort { align-self: flex-start; }
    .pager { gap: 4px; margin-top: 40px; }
    .pager a, .pager span { min-width: 38px; height: 38px; font-size: 13px; }
    .dramaGrid, .dramaGrid.three, .catBlocks, .svcCards { grid-template-columns: 1fr 1fr; gap: 10px; }
    .dramaGrid .airCard .ttl { font-size: 13px; margin: 8px 4px 0; }
    .dramaGrid .airCard .svcs { margin: 6px 4px 0; }
    .dramaGrid .airCard .prog, .dramaGrid .airCard .next { margin-left: 4px; margin-right: 4px; font-size: 11px; }
    .svcRank { grid-template-columns: 1fr 1fr; gap: 20px 10px; }
    .svcRank .no { font-size: 32px; }
    .svcRank .t { font-size: 14px; }
    .rankInfo { grid-template-columns: 1fr; }
    .rankInfo .box { padding: 22px 20px; }
    .dramaHero .box { border-radius: 28px; padding: 10px 10px 24px; }
    .dramaHero .info { padding: 0 8px; }
    .dramaHero h1 { font-size: 24px; }
    .dramaHero dl > div { grid-template-columns: 64px 1fr; }
    .dramaHero .btns .btn { width: 100%; }
    .epList a { grid-template-columns: 52px 1fr 18px; gap: 8px 10px; padding: 14px 16px; }
    .epList a .d, .epList a .spoLabel { grid-column: 2; }
    .epList a .d { grid-row: 2; }
    .epList a .spoLabel { display: none; }
    .epList a .arr { grid-column: 3; grid-row: 1; }
    .epList .soon .d { display: none; }
    .kanaNav { top: 80px; gap: 2px; padding: 6px; border-radius: 22px; }
    .kanaNav a, .kanaNav span { width: 32px; height: 32px; font-size: 13px; }
    .kanaGroup { scroll-margin-top: 150px; }
    .kanaGroup h2 { font-size: 28px; }
    .dramaRow { grid-template-columns: 80px 1fr 18px; gap: 6px 12px; padding: 10px 14px 10px 10px; }
    .dramaRow .thumb { grid-row: 1 / 4; }
    .dramaRow .t { font-size: 14px; }
    .dramaRow .m, .dramaRow .p { grid-column: 2; }
    .dramaRow .arr { grid-column: 3; grid-row: 1 / 4; }
    .catBlock .hd { padding: 14px; gap: 8px; }
    .catBlock .ico { width: 36px; height: 36px; font-size: 16px; }
    .catBlock .nm { font-size: 15px; }
    .catBlock .arr { display: none; }
    .catBlock ul { padding: 4px 14px 10px; }
    .catBlock li a { font-size: 12px; }
    .catNav { justify-content: flex-start; }
    .catNav .cat { padding: 4px 12px; font-size: 13px; }
    .tagCloud.big .tag { padding: 8px 14px; font-size: 14px; }
    .relTags { flex-direction: column; align-items: flex-start; gap: 8px; }
    .svcCard { padding: 22px 18px 18px; }
    .svcCard img { height: 24px; }
    .svcCard.prime img { height: 30px; }
    .svcCard.hulu img { height: 22px; }
    .svcCard.disney img { height: 40px; margin: -6px 0 -6px; }
    .svcCard .n { font-size: 26px; }
    .svcCard .n small { display: block; margin: 4px 0 0; font-size: 11px; }
    .svcCard .d { font-size: 11px; }
    .svcCard .arr { display: none; }
    .svcNav { justify-content: flex-start; }
    .svcNav a, .svcNav span { height: 44px; padding: 0 16px; }
    .svcNav img { height: 15px; }
    .featItem { grid-template-columns: 1fr; gap: 14px; padding: 28px 0; }
    .featItem .no { left: -6px; top: 18px; width: 44px; height: 44px; font-size: 15px; }
    .featItem h2 { font-size: 19px; }
    .featItem .btn { width: 100%; }
    .searchForm input { padding: 0 12px; font-size: 15px; }
    .searchForm button { padding: 11px 16px; }
    .searchForm button span { display: none; }
    .noHit { flex-direction: column; align-items: center; padding: 24px 20px 0; text-align: center; min-height: 0; }
    .noHit img { order: 2; align-self: center; width: 110px; margin-top: 8px; }
    .noHit div { padding: 0; }
    .noHit .t { font-size: 18px; }
    .noHit p { font-size: 14px; }
    .resultTtl .en { font-size: 24px; }
    .searchResult .featGrid { grid-template-columns: 1fr; }
    .docBody { padding: 28px 20px 36px; border-radius: 28px; }
    .docBody h2 { font-size: 17px; margin-top: 36px; }
    .docBody p { font-size: 14px; }
    .docTable > div { grid-template-columns: 1fr; gap: 2px; padding: 12px 16px; }
    .formCard { padding: 28px 20px; border-radius: 28px; }
    .notFound .box { grid-template-columns: 1fr; padding: 32px 20px 0; border-radius: 28px; }
    .notFound .txt { padding-bottom: 0; }
    .notFound .code { font-size: 96px; }
    .notFound h1 { font-size: 20px; }
    .notFound .btns .btn { width: 100%; }
    .notFound .pic { width: 240px; margin: 8px auto 0; }
    .epSoon .box { grid-template-columns: 1fr; gap: 0; padding: 32px 20px 0; border-radius: 28px; }
    .epSoon .txt { padding: 0; }
    .epSoon .code { font-size: 32px; }
    .epSoon h1 { font-size: 20px; }
    .epSoon .btns .btn { width: 100%; }
    .epSoon .pic { width: 240px; margin: 16px auto 0; }
    /* 作品一覧の絞り込み */
    .filterPanel { padding: 14px; border-radius: 22px; }
    .fTop { gap: 8px; }
    .fSearch { min-width: 0; flex: 1 1 100%; }
    .fStatus { flex: 1; }
    .fStatus button { flex: 1; padding: 8px 6px; }
    .fToggle { display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border-radius: 999px; background: var(--g-ink); color: #fff; font-size: 13px; font-weight: 700; cursor: pointer; }
    .fCount:not(:empty) { display: grid; place-items: center; min-width: 20px; height: 20px; border-radius: 999px; background: var(--lemon); color: var(--ink); font-size: 11px; }
    .fBody { display: none; }
    .filterPanel.is-open .fBody { display: block; }
    .fRow { grid-template-columns: 1fr; gap: 6px; }
    .fLbl { padding-top: 0; }
    .resultBar { flex-direction: column; align-items: flex-start; margin: 24px 0 16px; }
    .noResult { flex-direction: column; align-items: center; padding: 22px 18px 0; text-align: center; }
    .noResult img { order: 2; width: 110px; }
    .noResult div { padding-bottom: 0; }
    .soonMain { padding: 12px; }
    .soonMain .box { grid-template-columns: 1fr; padding: 36px 22px 0; border-radius: 28px; }
    .soonMain .txt { padding: 0; }
    .soonMain .logo .name { font-size: 46px; }
    .soonMain .logo .tagline { display: block; font-size: 11px; }
    .soonMain .open { font-size: 18px; }
    .soonMain .hiyori .bubble { font-size: 13px; }
    .soonMain .pic { width: 240px; margin: 16px auto 0; }
}

/* グリッドの中身が長くても、画面幅より広がらないようにする */
.layout, .dramaHead, .dramaHero .box, .hero .bento, .bottom .grid, .contactWrap, .impression { min-width: 0; }
.layout > *, .dramaHead > *, .dramaHero .box > *, .bento > *, .impression > *, .rankCard > *, .featItem > *, .contactWrap > * { min-width: 0; }
@media screen and (max-width: 1024px) {
    .layout, .dramaHero .box { grid-template-columns: minmax(0, 1fr); }
}
@media screen and (max-width: 767px) {
    .dramaHead { grid-template-columns: minmax(0, 1fr); }
    .entry img, .entry figure, .entry iframe { max-width: 100%; }
    .entry p, .entry li, .artHead h1 { overflow-wrap: anywhere; }
}