﻿@charset "utf-8";

:root {
    --br-topic-width-1: 1280px;
    --br-topic-width-2: 980px;
    --br-topic-svg-tab: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22246%22%20height%3D%2251%22%20viewBox%3D%220%200%20246%2051%22%3E%3Cg%20transform%3D%22translate(-377%20-1976)%22%3E%3Cpath%20d%3D%22M230.5%2C33h-1V17.524c0-4.976-3.365-9.024-7.5-9.024H8C3.865%2C8.5.5%2C12.548.5%2C17.524V33h-1V17.524a10.945%2C10.945%2C0%2C0%2C1%2C2.46-7.056A7.856%2C7.856%2C0%2C0%2C1%2C8%2C7.5H222a7.856%2C7.856%2C0%2C0%2C1%2C6.04%2C2.968%2C10.945%2C10.945%2C0%2C0%2C1%2C2.46%2C7.056Z%22%20transform%3D%22translate(385%201968.5)%22%2F%3E%3Cpath%20d%3D%22M-409%2C58.5a7.856%2C7.856%2C0%2C0%2C1-6.04-2.968%2C10.945%2C10.945%2C0%2C0%2C1-2.46-7.056V33h1V48.476c0%2C4.976%2C3.365%2C9.024%2C7.5%2C9.024Z%22%20transform%3D%22translate(1032%201968.5)%22%2F%3E%3Cpath%20d%3D%22M15%2C58.5v-1c4.136%2C0%2C7.5-4.048%2C7.5-9.024V33h1V48.476a10.945%2C10.945%2C0%2C0%2C1-2.46%2C7.056A7.856%2C7.856%2C0%2C0%2C1%2C15%2C58.5Z%22%20transform%3D%22translate(362%201968.5)%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
}

/*-- 特集&ニュース（トピック一覧） --*/
@media screen,print {

    #br-topic-detail-list .wrap {
        max-width: var(--br-pc-width-px-2);
        padding: 0 var(--br-spacing-2);
    }

    #br-topic-detail-list .block-topic-details--pager-top {
        margin: 0 auto;
        display: flex;
        justify-content: start;
        max-width: var(--br-topic-width-1);
        margin-bottom: var(--br-spacing-2);
    }

    #br-topic-detail-list .block-topic-details--pager-bottom .lists__sort--total,
    #br-topic-detail-list .block-topic-details--pager-bottom .lists__sort--page,
    #br-topic-detail-list .block-topic-details--pager-top .paging--1,
    #br-topic-detail-list .block-topic-details--pager-top .lists__sort--page {
        display: none;
    }

    #br-topic-detail-list .block-topic-details--pager-top .br-pager-total-title {
        font-size: var(--br-fs-4);
        font-weight: var(--br-fw-bold);
        margin: 4px 4px 0 0;
    }

    #br-topic-detail-list .br-topic-items {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
        gap: var(--br-spacing-10) var(--br-spacing-2);
        margin: 0 auto;
    }

    #br-topic-detail-list .br-topic-items>* {
        width: calc((100% - var(--br-spacing-2)*3) / 4);
    }

    #br-topic-detail-list .br-topic-items .br-item-inner {
        display: flex;
        flex-direction: column;
    }

    #br-topic-detail-list .br-topic-items .br-image-wrapper {
        margin-bottom: var(--br-spacing-2);
        flex-grow: 1;
        width: 100%;
        height: auto;
        aspect-ratio: 1/1;
        position: relative;
    }

    #br-topic-detail-list .br-topic-items .br-image-wrapper .br-image {
        width: 100%;
        height: auto;
        aspect-ratio: 1/1;
        border-radius: 20px;
    }

    #br-topic-detail-list .br-topic-items .br-text-wrapper {
        display: flex;
        flex-direction: column;
        gap: var(--br-spacing-1) 0;
    }

    #br-topic-detail-list .br-title-wrapper {
        display: flex;
        align-items: stretch;
        gap: 0 var(--br-spacing-1);
    }

    #br-topic-detail-list :is(.br-comment, .br-date).br-for-news {
        font-family: var(--br-ff-header);
        font-size: var(--br-fs-2);
        line-height: var(--br-lh-2);
        font-weight: var(--br-fw-regular);
    }

    #br-topic-detail-list .br-contents-head.br-for-news {
        font-size: var(--br-fs-5);
        line-height: var(--br-lh-5);
        letter-spacing: var(--br-ls-1);
        font-weight: var(--br-fw-bold);
    }

    #br-topic-detail-list :is(.br-comment, .br-date).br-for-feature {
        font-family: var(--br-ff-header);
        font-size: var(--br-fs-3);
        line-height: var(--br-lh-3);
        font-weight: var(--br-fw-bold);
    }

    #br-topic-detail-list .br-date.br-for-feature {
        display: none;
    }

    #br-topic-detail-list .br-contents-head.br-for-feature {
        font-size: var(--br-fs-2);
        line-height: var(--br-lh-2);
        letter-spacing: var(--br-ls-1);
        font-weight: var(--br-fw-regular);
    }

    #br-topic-detail-list .br-image-wrapper:has(.br-topic-news-image-wrapper) {
        border: 1px solid var(--br-color-9);
        border-radius: 20px;
    }

    #br-topic-detail-list .br-topic-news-image-wrapper {
        position: absolute;
        top: 50%;
        left: 50%;
        translate: -50% -50%;
        display: flex;
        flex-direction: column;
        gap: var(--br-spacing-2) 0;
        align-items: center;
        justify-content: start;
    }

    #br-topic-detail-list .br-topics-image-placeholder::after {
        content: '';
        background-image: var(--br-svg-url-logo-1);
        background-repeat: no-repeat;
        background-size: contain;
        display: block;
        width: 140px;
        height: auto;
        aspect-ratio: 140 / 24.51;
    }

    #br-topic-detail-list .br-icon {
        height: 30px;
        width: auto;
        max-width: none;
    }
}

/*-- 特集&ニュース（トピック一覧） TAB化--*/
/*
@media screen,print {

    #br-topic-detail-list .block-topic-details--pager-top .lists__sort--total>* {
        font-size: var(--br-fs-4);
        font-weight: var(--br-fw-bold);
        margin: 0;
    }

    #br-topic-detail-list .block-topic-details--pager-top .lists__sort--total .num {
        font-family: var(--br-ff-number);
        font-size: var(--br-fs-7);
        font-weight: var(--br-fw-extra-bold);
        line-height: 1;
        letter-spacing: var(--br-ls-1);
        margin: 0;
        color: transparent;
    }

    #br-topic-detail-list .block-topic-details--pager-top .lists__sort--total .num.br-js-inited {
        color: var(--br-color-1)
    }

    #br-topic-detail-list #br-topic-tab {
        margin-bottom: var(--br-spacing-5);
        position: relative;
    }

    #br-topic-detail-list #br-topic-tab::before {
        content: '';
        width: 200dvw;
        position: absolute;
        bottom: 0;
        left: -100vw;
        height: 1px;
        background-color: var(--br-color-1);
        display: block;
    }

    #br-topic-detail-list #br-topic-tab .br-topic-tab-items.uk-tab {
        margin: 0;
        flex-wrap: nowrap;
    }

    #br-topic-detail-list #br-topic-tab .br-topic-tab-items>* {
        padding: 0;
        height: 50px;
        position: relative;
        width: 230px;
    }

    #br-topic-detail-list #br-topic-tab .br-topic-tab-items::before {
        display: none;
    }

    #br-topic-detail-list #br-topic-tab .br-topic-tab-items>* a {
        width: 100%;
        font-size: var(--br-fs-3);
        font-weight: var(--br-fw-bold);
        color: var(--br-color-1);
        height: 100%;
        border: none;
        text-decoration: none;
        padding: 0;
    }

    #br-topic-detail-list #br-topic-tab .br-topic-tab-items>* a:hover {
        text-decoration: none;
    }

    #br-topic-detail-list #br-topic-tab .br-topic-tab-items>*.uk-active::after {
        content: '';
        background-image: var(--br-topic-svg-tab);
        background-size: contain;
        background-repeat: no-repeat;
        width: 100%;
        height: auto;
        aspect-ratio: 246 / 51;
        position: absolute;
        bottom: 0;
        left: 0;
        display: block;
    }

    #br-topic-detail:has(.br-topic-tab-items>*.uk-active[data-br-topic-type="news"]) .br-topic-item[data-br-topic-type="feature"],
    #br-topic-detail:has(.br-topic-tab-items>*.uk-active[data-br-topic-type="feature"]) .br-topic-item[data-br-topic-type="news"] {
        display: none;
    }

    #br-topic-detail-list #br-topic-tab .br-topic-tab-items>*.uk-active a {
        background-color: transparent;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #br-topic-detail-list #br-topic-tab .br-topic-tab-items>*.uk-active a::after {
        content: '';
        height: 4px;
        position: absolute;
        bottom: -1px;
        width: 100%;
        display: block;
        background-color: #fff;
    }

}*/

/*-- トピック（ニュース）個別ページ --*/
@media screen,print {

    body.page-topic .pane-contents .wrap {
        max-width: none;
    }

    body.page-topic .pane-contents .wrap,
    body.page-topic .pane-contents .news__detail__content p {
        margin: 0;
        font-size: var(--br-fs-3);
        line-height: calc(32 / 15);
        letter-spacing: var(--br-ls-1);
    }

    body.page-topic .pane-contents .br-topic-cm-header .br-top-block {
        display: flex;
        gap: 0 var(--br-spacing-2);
        align-items: center;
        justify-content: center;
        margin: var(--br-spacing-1) auto;
    }

    body.page-topic .pane-contents .br-topic-cm-header .br-top-block .br-date,
    body.page-topic .pane-contents .br-topic-cm-header .br-top-block .br-category {
        font-size: var(--br-fs-3);
        line-height: var(--br-lh-3);
        letter-spacing: var(--br-ls-1);
        font-weight: var(--br-fw-regular);
        margin: 0;
    }

    body.page-topic .pane-contents .news__detail {
        margin: var(--br-spacing-10) auto 0;
        padding: 0;
        width: var(--br-topic-width-2);
    }

    body.page-topic .pane-contents .news__detail .br-h1 {
        font-family: var(--br-ff-header);
        font-size: var(--br-fs-9);
        line-height: var(--br-lh-9);
        letter-spacing: var(--br-ls-5);
        font-weight: var(--br-fw-medium);
        margin: 0 auto var(--br-spacing-10);
        text-align: center;
    }

    body.page-topic .pane-contents .news__detail .br-h2 {
        font-family: var(--br-ff-header);
        font-size: var(--br-fs-8);
        line-height: var(--br-lh-8);
        letter-spacing: var(--br-ls-5);
        font-weight: var(--br-fw-medium);
        margin: 0 auto var(--br-spacing-3);
        text-align: left;
    }

    body.page-topic .pane-contents .news__detail__content .br-topic-cm-note,
    body.page-topic .pane-contents .br-topic-cm-note {
        color: var(--br-color-10);
        font-size: var(--br-fs-2);
        line-height: calc(24 / 13);
        letter-spacing: 0;
        font-weight: var(--br-fw-regular);
    }

    body.page-topic .pane-contents .news__detail__content {
        max-width: var(--br-topic-width-2);
        padding: 0;
        margin: 0 auto;
    }

    body.page-topic .pane-contents .br-topic-cm-section+.br-topic-cm-section {
        margin-top: var(--br-spacing-10);
    }

    body.page-topic .pane-contents .news__detail--return {
        margin: calc(var(--br-spacing-1) * 12) auto 0;
        width: fit-content;
    }

    body.page-topic .pane-contents .news__detail--return a {
        border: 1px solid var(--br-color-14);
        min-width: 400px;
        font-size: var(--br-fs-4);
        line-height: var(--br-lh-4);
        letter-spacing: var(--br-ls-2);
        font-weight: var(--br-fw-medium);
        border-radius: 50px;
        min-height: 56px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    body.page-topic .pane-contents .news__detail--return a:hover {
        text-decoration: none;
    }

    body.page-topic .pane-contents .news__detail .br-topic-icon-items {
        display: flex;
        flex-wrap: wrap;
        gap: var(--br-spacing-1) var(--br-spacing-1);
        align-items: center;
        justify-content: start;
        margin: var(--br-spacing-2) 0;
        display: none;
    }

    body.page-topic .pane-contents .news__detail .br-topic-icon-items>* {
        width: auto;
        margin: 0;
        padding: 0 4px;
    }

    body.page-topic .pane-contents .news__detail .br-topic-icon-items>img {
        padding: 0;
    }
}

/*-- トピック詳細：左画像 右本文 --*/
@media screen,print {

    body.page-topic .br-topic-cm-image-text-block {
        width: var(--br-page-width-1);
        margin: 0 auto;
    }

    body.page-topic .br-topic-cm-image-text-block .br-header {
        font-family: var(--br-ff-header);
        font-size: var(--br-fs-8);
        line-height: calc(38 / 26);
        letter-spacing: var(--br-ls-5);
        font-weight: var(--br-fw-medium);
        margin-bottom: var(--br-spacing-3);
    }

    body.page-topic .br-topic-cm-image-text-block .br-items {
        display: flex;
        align-items: stretch;
        gap: var(--br-spacing-2) var(--br-spacing-2);
        flex-wrap: wrap;
    }

    body.page-topic .br-topic-cm-image-text-block .br-items>.br-item {
        width: 100%;
        display: flex;
        gap: 0 0;
        align-items: stretch;
    }

    body.page-topic .br-topic-cm-image-text-block .br-item>* {
        width: 50%;
        flex-shrink: 0;
    }

    body.page-topic .br-topic-cm-image-text-block .br-image-wrapper img {
        width: 100%;
        height: auto;
        aspect-ratio: auto
    }

    body.page-topic .br-topic-cm-image-text-block .br-text-wrapper {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-left: var(--br-spacing-10);
    }

    body.page-topic .pane-contents .news__detail__content p.br-text,
    body.page-topic .br-topic-cm-image-text-block .br-text-wrapper .br-text {
        font-size: var(--br-fs-3);
        line-height: calc(32 / 15);
        letter-spacing: var(--br-ls-1);
        font-weight: var(--br-fw-regular);

    }

    body.page-topic .pane-contents .news__detail__content p.br-note,
    body.page-topic .br-topic-cm-image-text-block .br-text-wrapper .br-note {
        font-size: var(--br-fs-2);
        line-height: calc(24 / 13);
        font-weight: var(--br-fw-regular);
        color: var(--br-color-10);
    }
}