@charset "UTF-8";

/*ーーーーーーーーーーーーーーーーーー
subscription
ーーーーーーーーーーーーーーーーーー*/
/* ID:126 トップページのヘッダーとFV間のマージン解消 */
.p-subscription{
    margin: 0;
    padding: 0;
    a{
        display: block;
        padding: 12px;
        text-align: center;
        font-size: clamp(0.813rem, 0.781rem + 0.13vw, 0.938rem);
        background-color: var(--bg-color);
    }
}

.p-subscription__text{
    display: inline;
}

.p-subscription__cta{
    display: inline-block;
    margin-left: clamp(0.5rem, 0.373rem + 0.52vw, 1rem);

    &::after {
        background: url("../images/arrow-b.svg") no-repeat center center / contain;
        right: -18px;
        top: clamp(0.625rem, 0.593rem + 0.13vw, 0.75rem);
    }
}

@media (max-width: 1024px) {
    .p-subscription a {
        padding-left: 24px;
        padding-right: 24px;
        text-align: left;
    }
}


/*ーーーーーーーーーーーーーーーーーー
FV
ーーーーーーーーーーーーーーーーーー*/
.p-fv__inner{
    background: var(--accent-color-black);
}

.p-fv {
    .swiper-pagination {
        font-size: 11px;
        line-height: 1.5;
        color: var(--text6-color);
        text-align: left;
        padding: 0 8px;
    }
}

.p-fv__pagerLinkWrap {
    position: absolute;
    bottom: 16px;
    right: 16px;
    z-index: 2;
    display: flex;
    gap: 8px;
}

.p-fv__pagerLink {
    width: 40px;
    height: 40px;

    &::after {
        content: '';
        display: block;
        width: 100%;
        height: 100%;
        background: no-repeat center / contain;
    }
}

.p-fv__pagerLink--prev {    
    &::after {
        background-image: url(../images/button-l-b.svg);
    }
}

.p-fv__pagerLink--next {
    &::after {
        background-image: url(../images/button-r-b.svg);
    }
}

.p-fv__progress {
    width: 50%;
    height: 4px;
    position: absolute;
    overflow: hidden;
    bottom: 0;
    left: 0;
    z-index: 2;
}

.p-fv__progressBar {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--accent-color-yellow);
    transform-origin: left;
    transform: scaleX(0);
}

.p-fv__flex{
    display: flex;
    /* 2026-05-16: max-width 1440px による .p-fv__inner の左右余白 (黒) が
       電子書籍 slide のベージュ thumb の右側に「黒帯」として見える事象を抑止。
       画面幅一杯まで広げて inner の余白を発生させない。
       高さは元の 480px 固定 (= width 拡大で img aspect-ratio から高さが伸びるのを防ぐ)。 */
    width: 100%;
    max-width: none;
    min-height: 480px;
    max-height: 480px;
    margin-inline: auto;

}

.p-fv__body,
.p-fv__thumb{
    flex-basis: 50%;
}

.p-fv__thumb{
    /* 2026-05-16: 電子書籍などの縦長画像が cover で上下切れていた問題を解消。
       表示エリア (flex-basis: 50%, aspect-ratio: 3/2) は維持し、object-fit のみ
       contain に変更。画像のオリジナル比率が保たれ、空きスペースは背景色で表示。
       2026-05-17: 内部 <a> がインライン要素のため <img height:100%> が container
       高さを参照できず、本番で電子書籍サムネが見切れていた。<a> を block + 100%
       で展開して img の height:100% を正しく機能させる。 */
    background: var(--accent-color-black);
    a{
        display: block;
        width: 100%;
        height: 100%;
    }
    img{
        object-fit: contain;
        width: 100%;
        height: 100%;
        aspect-ratio: 3 / 2;
    }
}

/* 2026-05-16: 電子書籍 (article_type=5) の slide は thumb 背景をベージュに。
   黒地より書影が見やすく、デザイントーンを合わせる。 */
.p-fv__thumb--ebook {
    background: var(--bg-color);
}

.p-fv__body{
    background: var(--accent-color-black);
    padding: clamp(2.5rem, 2.118rem + 1.57vw, 4rem) clamp(1.5rem, 0.863rem + 2.61vw, 4rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

.p-fv__meta {
    display: flex;
    justify-content: space-between;
}

.p-fv__category{
    color: var(--accent-color-yellow);
}

.p-fv__title{
    color: var(--white-color);
    font-size: clamp(1.375rem, 1.216rem + 0.65vw, 2rem);
    margin-top: 20px;
}

.p-fv__lead{
    color: var(--text2-color);
    margin-top: 20px;
    /* ID:352 リード文を最大2行に制限。全スライドの高さを揃え、カルーセル矢印の上下位置を固定する */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.p-fv__authorWrap {
    margin-top: 20px;

    & .p-fv__authorIcon{
        width: 24px;
        height: 24px;
        aspect-ratio: 1/1;
    }
}

.p-fv__authorName{
    font-size: 15px;
    color: var(--text2-color);
}

.p-fv__pager{
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
    position: absolute;
    bottom: 16px;
    right: 16px;
}


@media screen and (max-width: 1024px) {
    .p-fv {
        .swiper-container {
            padding-bottom: 0;
        }

        .swiper-button-prev {
            display: block;
            right: 72px;
            bottom: 40px;
            left: unset!important;
        }

        .swiper-button-next {
            display: block;
            right: 24px!important;
            bottom: 40px;
            left: unset;
        }
    }    

    .p-fv__progress {
        width: 100%;
    }

    .p-fv__flex{
        flex-direction: column-reverse;
        /* 2026-05-16: SP は thumb と body の縦並びで合計高さが大きくなるため、
           PC 用に追加した max-height: 480px の制限を解除。 */
        max-height: none;
        min-height: 0;
    }

    .p-fv__body {
        padding-bottom: 104px;
    }

    .p-fv__lead{
        display: none;
    }

    .p-fv__title{
        margin-top: 16px;
    }
}


/*ーーーーーーーーーーーーーーーーーー
animation
ーーーーーーーーーーーーーーーーーー*/
.p-animation{
    overflow-x: hidden;
}

.p-animation__slider--l{
    .swiper-wrapper {
        transition-timing-function: linear;
    }
}

.p-animation__slider--r{
    margin-top: -1px;

    .swiper-wrapper {
        transition-timing-function: linear;
    }
}

.p-animation__listItem{
    width: fit-content;

    a{
        font-size: 28px;
        border: 1px solid var(--text-color);
        border-left: none;
        padding: 15px 24px;
        display: block;
        background: var(--white-color);
        max-height: 71px;
        white-space: nowrap;
    }
}

/* (5/12 復元 + 案 B 実装) PC/SP で別データセットを切り替える。
   - PC: --pc を表示、--sp-only を非表示 (2 行)
   - SP: --sp-only を表示、--pc を非表示 (3 行)
   3 行目用に追加した 2 つ目の --l も連続して margin-top: -1px で繋ぐ。
   旧 --sp クラスは互換のため display:none で維持。 */
.p-animation__slider--sp-only{
    display: none;
}
.p-animation__slider--sp{
    display: none;
}
.p-animation__slider--pc.p-animation__slider--r{
    margin-top: -1px;
}
@media screen and (max-width: 576px){
    .p-animation__listItem a{
        padding: 12px 16px;
        max-height: 55px;
        font-size: 22px;
    }
    .p-animation__slider--pc{
        display: none;
    }
    .p-animation__slider--sp-only{
        display: block;
    }
    .p-animation__slider--sp-only + .p-animation__slider--sp-only{
        margin-top: -1px;
    }
}

/* 各アイテムは左枠を前のアイテムの右枠に依存しているため、
   先頭アイテムだけは自前で左枠を描画する。
   (旧: クローン複製で繋がっていたため不要だった) */
.p-animation__listItem:first-child a{
    border-left: 1px solid var(--text-color);
}

@media screen and (max-width: 576px) {
    .p-animation__listItem {
        a {
            padding: 12px 16px;
            max-height: 55px;
            font-size: 22px;
        }
    }
}

/*ーーーーーーーーーーーーーーーーーー
banner
ーーーーーーーーーーーーーーーーーー*/
.p-banner{
    padding: 24px 0;
}

.p-banner__inner{
    display: flex;
    gap: 40px;
}

.p-banner__item{
    display: flex;
    align-items: center;
    gap: 20px;
    flex: 1;
    padding: 0 20px 0 0;
    background: #fdf6ea;
    color: inherit;
    text-decoration: none;
    overflow: hidden;
    transition: opacity .2s;
}

.p-banner__item:hover{
    opacity: .8;
}

.p-banner__thumb{
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.p-banner__thumb img{
    width: 80px;
    height: 80px;
    display: block;
}

.p-banner__thumb--weekly{
    background: var(--accent-color-teal, #1F7B82);
}

.p-banner__thumb--weekly img{
    width: 47px;
    height: 66px;
}

.p-banner__copy{
    flex: 0 0 282px;
    font-family: "MFW-PIshiiGothicStdN-M", sans-serif;
    font-weight: 500;
    font-size: 15px;
    line-height: 1.5;
    letter-spacing: 0.04em;
    color: #181818;
    -webkit-text-stroke: 0.2px currentColor;
    margin: 0;
}

.p-banner__nowrap{
    white-space: nowrap;
}

.p-banner__cta{
    font-family: "MFW-PIshiiGothicStdN-M", sans-serif;
    font-weight: 500;
    -webkit-text-stroke: 0.2px currentColor;
    color: var(--accent-color-teal, #1F7B82);
    font-size: 14px;
    line-height: 24px;
    height: 24px;
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: auto;
    box-sizing: border-box;
}

.p-banner__cta.c-arrow::after{
    background: url("../images/arrow-teal.svg") no-repeat center center / contain;
    position: static;
    transform: none;
    margin-left: 8px;
    vertical-align: middle;
}

@media screen and (max-width: 1024px) {
    .p-banner__inner{
        flex-direction: column;
        gap: 12px;
    }

    .p-banner__item{
        width: 100%;
        padding: 0 16px 0 0;
        gap: 14px;
    }

    .p-banner__copy{
        flex: 1 1 auto;
        font-size: 13px;
    }

    .p-banner__ctaText{
        display: none;
    }

    .p-banner__cta{
        width: auto;
        padding-right: 12px;
    }
}


/*ーーーーーーーーーーーーーーーーーー
新着
ーーーーーーーーーーーーーーーーーー*/
.p-latest{
    padding: var(--pd80);
}

.p-latest__listFlex{
    display: flex;
    justify-content: space-between;
    margin-top: clamp(1.5rem, 1.245rem + 1.05vw, 2.5rem);
}

.p-latest__listWrap{
    flex-basis: calc((100% - 40px) - clamp(21.375rem, 20.029rem + 5.52vw, 25rem));
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(324px, 1fr));
    gap: 40px;
}

/* card */
.p-latestCard__thumb{
    aspect-ratio: 3 / 2;
    box-shadow: var(--box-shadow);

    img{
        object-fit: cover;
    }
}

/* 2026-05-16: 動画/音声サムネは /media/ ページと同じパターンに統一。
   画像全体を 80% 範囲に contain で表示、周囲はブラー背景 (::before) が見える。
   旧 .p-latestCard__thumb img の cover が動画/音声でも適用されて画像の四隅が
   切れていた問題への対応。 */
.p-latestCard__thumb.c-audio-s img,
.p-latestCard__thumb.c-movie-s img,
.p-latestCard__thumb.c-audio img,
.p-latestCard__thumb.c-movie img {
    width: 80% !important;
    height: auto !important;
    max-width: 80% !important;
    max-height: 80% !important;
    object-fit: contain !important;
}

.p-latestCard__meta{
    margin-top: 16px;
}

.p-latestCard__title{
    font-size: 20px;
    line-height: 1.4;
    margin-top: 12px;
}

.p-latestCard__excerpt{
    margin-top: 12px;
    color: var(--text3-color);
    display: -webkit-box;
    overflow: hidden;
    white-space: normal;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.p-latestCard__authorWrap{
    margin-top: 12px;
    font-size: 13px;
}

.p-latestCard__authorName__feature {
    &::before {
        content: ' | ';
    }
}

.p-latestCard__date{
    margin-top: 12px;
    color: var(--text3-color);
}

/* sub card */
.p-latest__listSubWrap{
    flex-basis: clamp(21.375rem, 20.029rem + 5.52vw, 25rem);
}

.p-latest__listSubItem{
    border-top: 1px solid var(--border-color);
    padding: 8px 0;

    & .p-latestCard__flex{
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }

    & .p-latestCard__thumb{
        flex-basis: clamp(7.5rem, 6.863rem + 2.61vw, 10rem);
        aspect-ratio: 3 / 2;

        img{
            object-fit: cover;
        }
    }

    & .p-latestCard__body{
        flex-basis: calc((100% - 16px) - clamp(7.5rem, 6.863rem + 2.61vw, 10rem));
    }

    & .p-latestCard__meta{
        margin-top: auto;
    }
    
    & .p-latestCard__title{
        font-size: 15px;
    }

    & .p-latestCard__title{
        margin-top: 8px;
    }
}

.p-latest__listSubItem:first-child{
    border-top: none;
}

.p-latest__headingLink--sp{
    margin-top: 24px;
    display: none;
}


@media screen and (max-width: 1024px) {
    .p-latest__headingLink{
        display: none;
    }

    .p-latest__headingLink--sp{
        display: block;
    }

    .p-latest__listFlex{
        flex-direction: column;
    }

    .p-latest__listSubWrap{
        margin-top: 24px;
    }
}


/*ーーーーーーーーーーーーーーーーーー
オリジナル特集
ーーーーーーーーーーーーーーーーーー*/
.p-original{
   background: var(--accent-color-black); 
}

.p-original__inner{
    display: flex;
    min-height: 720px;
    max-width: 1440px;
    margin-inline: auto;
}

.p-original__body, .p-original__thumb {
    flex-basis: 50%;
}

.p-original__body{
    background: var(--accent-color-black);
    padding: clamp(2.5rem, 2.118rem + 1.57vw, 4rem) clamp(1.5rem, 0.863rem + 2.61vw, 4rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.p-original__thumb{
    img {
        object-fit: cover;
        height: 100%;
        aspect-ratio: 1 / 1;
    }
}

.p-original__label{
    color: var(--accent-color-yellow);
}

.p-original__title{
    font-size: clamp(1.375rem, 1.088rem + 1.18vw, 2.5rem);
    line-height: 1.4;
    color: var(--white-color);
    margin-top: 16px;
}

.p-original__lead{
    color: var(--text2-color);
    margin-top: 16px;
    font-size: 17px;
    display: -webkit-box;
    overflow: hidden;
    white-space: normal;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.p-original__link{
    background: var(--accent-color-yellow);
    margin-top: 34px;
}

/* list */
.p-original__listWrap{
    margin-top: 34px;
}

.p-original__listItem{
    &:not(:first-child){
        border-top: 1px solid var(--feature-episode-rule-color, var(--text3-color));
    }
}

.p-originalEpisode__link{
    display: block;
    padding: 12px clamp(1.5rem, 1.373rem + 0.52vw, 2rem) 12px 0;
}

.p-originalEpisode__vol{
    color: var(--text4-color);
}

.p-originalEpisode__title span{
    color: var(--text5-color);
    margin-top: 8px;
    line-height: 1.4;
    border-bottom: 1px solid transparent;
}

@media screen and (max-width: 1024px) {
    .p-original__inner{
        flex-direction: column;
    }

    .p-original__label,
    .p-original__title,
    .p-original__link{
        text-align: center;
    }

    .p-original__lead{
        display: none;
    }
}


/*ーーーーーーーーーーーーーーーーーー
注目の特集
ーーーーーーーーーーーーーーーーーー*/
.p-attention{
    background: var(--bg-color);
    padding: var(--pd80);
    overflow: hidden;
}

.p-attention__listWrap.swiper-wrapper {
    margin-top: 32px;
}

.p-attention__listItem{
    background: var(--white-color);
    width: calc((100% - 60px) / 4);
    height: auto;
    box-shadow: var(--box-shadow);
    margin-bottom: 4px;
}

.p-attentionCard__featureLink {
    display: block;
}

.p-attentionCard__thumb{
    aspect-ratio: 3 / 2;
    position: relative;

    img{
        height: 100%;
        object-fit: cover;
    }

    &::after {
        content: '';
        display: block;
        width: 100%;
        height: 76px;
        background: linear-gradient(to top, var(--accent-color-black), transparent);
        position: absolute;
        bottom: 0;
        left: 0;
    }
}

.p-attentionCard__heading {
    background: var(--accent-color-black);
    padding: 16px 24px;
}

.p-attentionCard__label {
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 2px;
    color: var(--accent-color-yellow);
}

.p-attentionCard__label--yellow {
    color: var(--accent-color-yellow);
}

.p-attentionCard__label--teal {
    color: #86C9CB;
}

.p-attentionCard__label--red {
    color: var(--accent-color-red);
}

.p-attentionCard__label--purple {
    color: var(--accent-color-purple);
}

.p-attentionCard__label--orange {
    color: var(--accent-color-orange);
}

.p-attentionCard__label--blue {
    color: var(--accent-color-blue);
}

.p-attentionCard__title{
    line-height: 1.6;
    color: #fff;
    display: -webkit-box;
    overflow: hidden;
    white-space: normal;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;

    span {
        border-bottom: 1px solid transparent;
        transition: border-bottom-color 0.3s ease-in-out;
    }
}

.p-attentionCard__body{
    padding: 24px;
}

.p-attentionCard__vol{
    color: var(--text6-color);
}

.p-attentionCard__lead{
    font-size: 17px;
    margin-top: 4px;
    display: -webkit-box;
    overflow: hidden;
    white-space: normal;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    font-family: "MFW-PIshiiGothicStdN-M", sans-serif;
    font-weight: 500;

    span {
        border-bottom: 1px solid transparent;
        transition: border-bottom-color 0.3s ease-in-out;
    }
}

.p-attention__pager{
    display: none;
}

.p-attentionCard__featureLink:hover .p-attentionCard__title span {
    border-bottom-color: #fff;
}

.p-attentionCard__articleLink:hover .p-attentionCard__lead span {
    border-bottom-color: var(--text-color);
}


@media screen and (max-width: 1024px) {
    .p-attention{
        .swiper {
            overflow: visible;
        }
    }

    .p-attention__listWrap.swiper-wrapper {
        margin-top: 24px;
    }

    .p-attention__pager{
        display: none;
    }

    .p-attention__listItem {
        width: 305px;
    }
}

/*ーーーーーーーーーーーーーーーーーー
連載
ーーーーーーーーーーーーーーーーーー*/
.p-serial{
    padding: var(--pd80);
}

/* card */
.p-serial__listWrap.swiper-wrapper{
    margin-top: 32px;
}

.p-serial__listItem{
    width: calc((100% - 60px) / 4);
    height: auto;
}

/* ID:426 連載一覧カードのサムネは正方形固定 (3:2 画像でも cover で埋める) */
/* ID:5/11 (伊藤) 国際+Foresight の連載サムネに赤い座布団は不要。
   .c-thumbTrimmingNg--m の赤背景 (#B4372B) は画像不在時の代替表示として
   ebook など他用途で使われているが、連載は正方形サムネを 1:1 で表示するので
   背景色は本来見えない。!important 付与の object-fit:cover で覆い切れない
   余白部分にも赤が見えないよう、連載カード限定で背景を透明化する。 */
.p-serialCard__thumb{
    aspect-ratio: 1 / 1 !important;
    overflow: hidden;
    width: 100%;
    box-shadow: var(--box-shadow);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 1px 2px -1px rgba(0, 0, 0, 0.06), 0 2px 4px 0 rgba(0, 0, 0, 0.04);

    img{
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block;
    }
}
.p-serialCard__thumb.c-thumbTrimmingNg--m{
    background: transparent;
}
.p-serialCard__thumbWrap {
    width: 100%;
    aspect-ratio: 1 / 1;
}
.p-serialCard__thumbWrap > a {
    display: block;
    width: 100%;
    height: 100%;
}

/* heading */
.p-serialCard__heading{
    padding-bottom: 16px;
}

.p-serialCard__title{
    margin-top: 16px;
    font-size: 20px;
    /* ID:160/429 hover 下線は animation.css の text-decoration で一本化。
       span への border-bottom は併用で2本下線になるため削除。 */
}

/* ID:428 著者テキストをアイコンに対して上下中央に揃える */
.p-serialCard__authorWrap{
    margin-top: 4px;
}
.p-serialCard__author.c-author,
.p-serialCard__authorWrap .c-author {
    align-items: center;
}
.p-serialCard__authorName.c-authorName,
.p-serialCard__authorWrap .c-authorName {
    align-self: center;
    line-height: 1.5;
}

.p-serialCard__meta {
    display: flex;
    align-items: center;
    color: var(--text3-color);
    font-size: 13px;
    margin: 16px -8px 0;

    p{
        padding: 0 8px;
        border-right: 1px solid var(--text3-color);
        line-height: 1;

        &:last-child{
            border-right: none;
        }
    }
}

.p-serialCard a:hover {
    .p-serialCard__thumb {
        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12),0 1px 2px -1px rgba(0, 0, 0, 0.12),0 2px 4px 0 rgba(0, 0, 0, 0.08);
    }
    /* ID:160/429 hover 下線は animation.css の text-decoration で一本化。
       title span への border-color は併用で2本下線になるため削除。 */
}

/* episode */
.p-serialEpisode{
    border-bottom: 1px solid var(--border-color);
    border-top: 1px solid var(--border-color);
}

.p-serialEpisode__link {
    display: block;
    padding: 12px clamp(1.5rem, 1.373rem + 0.52vw, 2rem) 12px 0;
}

.p-serialEpisode__label{
    font-size: 13px;
    color: var(--text3-color);
}

.p-serialEpisode__title{
    margin-top: 4px;
}

/* cta */
.p-serialCard__cta{
    padding-top: 16px;
}

.p-serialCard__ctaLink{
    color: var(--accent-color-teal);
    border-bottom: 1px solid transparent;
    font-family: "MFW-PIshiiGothicStdN-M", sans-serif;
    font-weight: 500;

    &::after {
        background: url("../images/arrow-teal.svg") no-repeat center center / contain;
        position: initial;
        transform: none;
        right: 0;
        vertical-align: middle;
        margin-left: 10px;
        margin-bottom: 2px;
    }
}

@media (max-width: 1024px) {
    .p-serial {
        overflow: hidden;
    
        .swiper {
            overflow: visible;
        }
    }
}


/*ーーーーーーーーーーーーーーーーーー
よくメモされている記事,おすすめの動画
ーーーーーーーーーーーーーーーーーー*/
.p-memo,.p-movie,.p-ebookSub{
    padding: var(--pd80);
    background: var(--bg-color);
    overflow: hidden;
}

/* card */
.p-memo__listWrap.swiper-wrapper,
.p-movie__listWrap.swiper-wrapper,
.p-ebookSub__listWrap.swiper-wrapper{
    margin-top: 32px;
}

.p-memo__listItem,
.p-movie__listItem,
.p-ebookSub__listItem{
    width: calc((100% - 60px) / 4);
    background: var(--white-color);
    box-shadow: var(--box-shadow);
    margin-bottom: 4px;
}

.p-memo__listItem,
.p-movie__listItem{
    display: flex;
}

.p-memoCard,
.p-movieCard{
    width: 100%;
}

.p-memoCard > a,
.p-movieCard > a{
    display: flex;
    flex-direction: column;
    height: 100%;
}

.p-memo__headingLink {
    font-size: 13px;
    margin-left: 28px;
    position: relative;

    &::before {
        content: '';
        display: block;
        width: 24px;
        aspect-ratio: 1/1;
        background: url(../images/icon-memo-teal.svg) no-repeat center / contain;
        position: absolute;
        top: 50%;
        left: -28px;
        transform: translateY(-50%);
    }
}

.p-memo.is-second .p-memo__headingLink {
    margin-left: 0;
    /* `.p-memo__headingLink` の 13px override をリセットし、
       他の「すべて見る」(c-headingLink-teal) と同じサイズに揃える。 */
    font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
}

.p-memo.is-second .p-memo__headingLink::before,
.p-memo.is-second .p-memo__headingLink::after {
    /* No.326 おすすめの記事 (bottom-carousels.html.twig) の鉛筆アイコンを完全に隠す。
       高優先度のため content も明示的に none、size も 0 にしてレイアウト影響もなくす。 */
    display: none !important;
    content: none !important;
    width: 0;
    height: 0;
    background: none;
}

.p-memoCard__body{
    /* ID:370/416/417 サムネイル内テキストの上下余白を詰める (24px → 12px)。
       min-height は撤去し、コンテンツ高に応じて自然に縮む。タイトルと筆者の間／
       筆者と画像の間が広く空く問題を解消。 */
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
}

.p-memoCard__title{
    font-size: 17px;
    /* ID:370 タイトル上の余白を詰める */
    margin-top: 12px;
    line-height: 1.4;
    min-height: 48px;
    display: -webkit-box;
    overflow: hidden;
    white-space: normal;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.p-memoCard__footer{
    /* ID:370/416/417 タイトルと筆者の余白／筆者と画像の余白を狭める。
       margin-top: auto を撤去し、上下方向に伸びる空白を防止。 */
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding-top: 8px;
}

.p-memoCard__savedCount {
    flex: none;
}

.p-memoCard__authorWrap,
.p-movieCard__authorWrap{
    max-height: 44px;
    overflow: hidden;
}

.p-memoCard__thumb,
.p-movieCard__thumb,
.p-ebookSubCard__thumb{
    aspect-ratio: 3 / 2;

    img{
        object-fit: cover;
    }
}

.p-ebookSubCard__thumb{
    aspect-ratio: 1 / 1;
}

.p-memo__pager,
.p-movie__pager,
.p-ebookSub__pager{
    display: none;
}

/* おすすめ電子書籍: PC時はカルーセルボタン非表示、SP時のみ表示 */
.p-ebookSub .swiper-button-prev,
.p-ebookSub .swiper-button-next {
    display: none;
}

@media screen and (max-width: 1024px) {
    .p-ebookSub .swiper-button-prev,
    .p-ebookSub .swiper-button-next {
        display: flex;
    }
}

.p-movie__listItem,
.p-ebookSub__listItem{
    background: none;
    box-shadow: none;
}

.p-movieCard__body{
    display: flex;
    flex-direction: column;
    height: 100%;
}

.p-movieCard__title,
.p-ebookSubCard__title{
    margin-top: 16px;
    font-size: 17px;
}

.p-movieCard__title{
    line-height: 1.4;
    min-height: 48px;
    display: -webkit-box;
    overflow: hidden;
    white-space: normal;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.p-movieCard__footer{
    margin-top: auto;
    padding-top: 8px;
    min-height: 52px;
}

.p-ebookSubCard__authorName{
    margin-top: 8px;
    color: var(--text3-color);
}


@media screen and (max-width: 1024px) {
    .p-memo,
    .p-movie,
    .p-ebookSub{
        .swiper {
            overflow: visible;
        }
    }

    .p-memo__pager,
    .p-movie__pager,
    .p-ebookSub__pager{
        display: none;
    }

    .p-ebookSub__listItem{
        width: 160px;
    }

    .p-memo__listItem,
    .p-movie__listItem,
    .p-ebookSub__listItem {
        width: 305px;
    }

    .p-memo__heading {
        align-items: flex-end;
    }

    .p-memo__headingLink {
        margin-bottom: 12px;
    }
}


/*ーーーーーーーーーーーーーーーーーー
documentary
ーーーーーーーーーーーーーーーーーー*/
.p-documentary{
    background: var(--accent-color-black);
}
.p-documentary__inner{
    display: flex;
    min-height: 720px;
    max-width: 1440px;
    margin-inline: auto;
}

.p-documentary__body, .p-documentary__thumb{
    flex-basis: 50%;
}

.p-documentary__thumb {
    img {
        object-fit: cover;
        height: 100%;
        aspect-ratio: 1 / 1;
    }
}

.p-documentary__body{
    background: var(--accent-color-black);
    padding: clamp(3rem, 2.745rem + 1.05vw, 4rem) clamp(1.5rem, 0.863rem + 2.61vw, 4rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.p-documentary__label{
    color: var(--accent-color-yellow);
    font-size: 17px;
}

.p-documentary__title {
    color: var(--white-color);
    font-size: clamp(1.375rem, 1.088rem + 1.18vw, 2.5rem);
    margin-top: 16px;
}

.p-documentary__lead{
    color: var(--text2-color);
    margin-top: 16px;
    font-size: 17px;
    display: -webkit-box;
    overflow: hidden;
    white-space: normal;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.p-documentary__authorWrap {
    margin-top: 20px;

    & .p-documentary__authorIcon{
        width: 24px;
        height: 24px;
        aspect-ratio: 1/1;
    }
}

.p-documentary__authorName{
    font-size: 15px;
    color: var(--text2-color);
}

.p-documentary__actions{
    margin-top: 32px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.p-documentary__linkWrap{
    margin-left: 16px;
}

.p-documentary__link{
    &:not(:first-child){
        margin-left: -5px;
    }
}

@media screen and (max-width: 1024px){
    .p-documentary__inner{
        flex-direction: column-reverse;
        /* ID:369 SP では PC の min-height: 720px を解除しないと、
           thumb 高さ 390 + body 高さ ~241 の合計より min-height が大きく
           余分な空白 (89px 程度) が thumb の上に visible space として
           残ってしまう。 SP は内容に応じて自然に縮ませる。 */
        min-height: 0;
    }

    /* ID:369 SP TOP ドキュメンタリー サムネイル上の余白を詰める */
    .p-documentary__thumb {
        margin-top: 0;
    }
    .p-documentary__body {
        padding-top: 24px;
    }

    .p-documentary__lead{
        display: none;
    }

    .p-documentary__label,
    .p-documentary__title{
        text-align: center;
    }

    .p-documentary__authorWrap{
        justify-content: center;
    }

    .p-documentary__actions {
        flex-direction: column;
    }

    .p-documentary__linkWrap{
        margin-left: 0;
        width: 100%;
        margin-top: 12px;
    }

    .p-documentary__link {
        &:not(:first-child) {
            border-left: none;
            border-top: 1px solid var(--accent-color-yellow);
        }
    }

    .p-documentary__link {
        &:not(:first-child) {
            margin-left: 0;
            border-left: 1px solid var(--accent-color-yellow);
            border-top: none;
        }
    }
}

/*ーーーーーーーーーーーーーーーーーー
インサイト
ーーーーーーーーーーーーーーーーーー*/
.p-insight {
    padding: var(--pd80);

    & .c-metaCategory{
        color: var(--accent-color-red);
    
        &::before {
            background-color: var(--accent-color-red);
        }
    }
}

.p-insight__heading{
    text-align: center;
}

.p-insight__headingText{
    margin-top: 16px;
}

.p-insight__flex {
    display: flex;
    margin-top: clamp(1.5rem, 1.245rem + 1.05vw, 2.5rem);
    min-height: 428px;
}

.p-insight__thumb,
.p-insight__body{
    flex-basis: 50%;
}

.p-insight__thumb {
    img {
        object-fit: cover;
        height: 100%;
        aspect-ratio: 3 / 2;
    }
}

.p-insight__body {
    background: var(--bg-color);
    padding: clamp(2rem, 1.49rem + 2.09vw, 4rem) clamp(1.5rem, 0.863rem + 2.61vw, 4rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.p-insight__title{
    font-size: clamp(1.375rem, 1.216rem + 0.65vw, 2rem);
    margin-top: 20px;
    /* ID:594 PC 版で 2 行以上になる場合は 1 行で "..." 表記。
       SP は line-clamp 解除でデザイン崩れ防止。 */
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    span{
        border-bottom: 1px solid transparent;
    }
}
@media (max-width: 767px){
    .p-insight__title{
        -webkit-line-clamp: initial;
        display: block;
        overflow: visible;
    }
}

.p-insight__lead{
    margin-top: 20px;
    color: var(--text3-color);
    display: -webkit-box;
    overflow: hidden;
    white-space: normal;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.p-insight__authorWrap{
    margin-top: 20px;
}

.p-insight__authorName{
    font-size: 15px;
}


/* list card */
.p-insightCard__flex {
    display: flex;
    justify-content: space-between;
}

.p-insight__listWrap{
    margin-top: 40px;
}


.p-insightCard__thumb{
    flex-basis: clamp(7.875rem, 6.059rem + 7.45vw, 15rem);
    border-bottom: 1px solid var(--white-color);
    aspect-ratio: 3 / 2;

    img {
        height: 100%;
        object-fit: cover;
    }
}

.p-insightCard__body{
    flex-basis: calc(100% - clamp(7.875rem, 6.059rem + 7.45vw, 15rem) - clamp(1rem, 0.873rem + 0.52vw, 1.5rem));
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(0.5rem, 0.373rem + 0.52vw, 1rem);
    border-bottom: 1px solid var(--border-color);
}

/* ID:232 インサイト一覧のフォントを明朝体に */
/* ID:594 PC 版で 2 行以上になる場合は 1 行で "..." 表記 (一覧カード) */
.p-insightCard__title{
    font-size: 32px;
    line-height: 1.4;
    font-family: "MFW-PIshiiMinchoStdN-M", "Hiragino Mincho ProN", "YuMincho", serif;
    /* ID:594 PC 版で 2 行以上になる場合は 1 行で "..." 表記 (一覧カード) */
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    /* ID:160/429 hover 下線は animation.css の text-decoration で一本化。
       span への border-bottom は併用で2本下線になるため削除。 */
}
@media (max-width: 767px){
    .p-insightCard__title{
        -webkit-line-clamp: initial;
        display: block;
        overflow: visible;
    }
}

.p-insight__linkWrap{
    margin-top: 40px;
}

.p-insight__link{
    margin-inline: auto;
    border: 1px solid var(--accent-color-red);
    color: var(--accent-color-red);
}

/* ID:160/429 .p-insightCard a:hover による span border-color は
   animation.css text-decoration と併用で2本下線になるため削除。 */

@media screen and (max-width: 1024px) {
    .p-insight__flex{
        flex-direction: column;
    }

    .p-insight__title {
        margin-top: 16px;
    }

    .p-insight__lead {
        margin-top: 16px;
    }

    .p-insight__listItem{
        padding: 24px 0;
        border-bottom: 1px solid var(--border-color);

        &:last-child{
            border-bottom: none;
        }
    }

    .p-insightCard__body{
        border: none;
    }

    .p-insightCard__flex{
        align-items: flex-start;
    }

    .p-insightCard__title{
        font-size: 15px;
    }

    .p-insight__authorName{
        font-size: 13px;
    }
}

/*ーーーーーーーーーーーーーーーーーー
今月の5読
ーーーーーーーーーーーーーーーーーー*/
.p-monthlyReads {
    padding: var(--pd80);
    padding-top: 40px;
    overflow: hidden;
}

.p-monthlyReads__headingText{
    margin-top: 16px;
}

.p-monthlyReads__heading{
    text-align: center;
}

.p-monthlyReads__body{
    background: var(--bg-color);
    padding: 40px 0;
    margin-top: 40px;
}

.p-monthlyReads__bodyTitle{
    text-align: center;
    font-size: clamp(1.25rem, 1.123rem + 0.52vw, 1.75rem);
}

.p-monthlyReads__listWrap {
    margin: 40px -70px 0;
}

.p-monthlyReadsCard__body{
    background: var(--white-color);
    text-align: center;
    display: none;
    border: 1px solid var(--border-color);
    box-shadow: var(--box-shadow);
}

.p-monthlyReadsCard__thumb{
    aspect-ratio: 213 / 320;
    padding: 40px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    position: relative;
    overflow: hidden;

    /* ID:586 (5/11 長井藍) SPトップで書影 (縦長) が横にはみ出す問題を解消。
       img に幅・高さの上限と object-fit を明示し、padding 内に必ず収める。
       base.css の global `img { width: 100% }` に勝てるよう !important。 */
    img{
        border: 2px solid var(--white-color);
        max-width: 100% !important;
        max-height: 100% !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
        position: relative;
        z-index: 1;
    }
}

/* Monthly Reads 動画/音声カード: 既存のカラーフレーム (nth-child 設定) を維持し、
   左下に再生/音声アイコンのみを追加。ブラー背景はカラーフレームを覆ってしまうため
   採用しない (filter:blur の halo が inset を超えて広がる)。 */
.p-monthlyReadsCard__thumb--media::after {
    content: "";
    position: absolute;
    /* 3:2 アスペクトの画像が padding (40 20) 領域に contain で配置される前提:
       画像高 ≈ (card幅 - 40px) × 2/3、上下の余白 ≈ (240 - 画像高) / 2。
       カードのアスペクトは 213/320 で透過的にスケールするため、bottom は % で指定。
       画像の白枠の内側左下 +8px パディング。 */
    bottom: calc(34% + 4px);
    left: 28px;
    width: 32px;
    aspect-ratio: 1 / 1;
    z-index: 2;
}
.p-monthlyReadsCard__thumb--mediaMovie::after {
    background: url("../images/movie-button.svg") no-repeat center center / contain;
}
.p-monthlyReadsCard__thumb--mediaAudio::after {
    background: url("../images/audio-button.svg") no-repeat center center / contain;
}

/* 音声サムネのボックスを動画と同じ 3:2 (173×115) に固定し、画像コンテンツも
   白枠内いっぱいに表示する (object-fit: cover で 3:2 にクロップ)。
   見た目のサイズ (白枠) は動画と一致するため、アイコン位置の上書きは不要。 */
.p-monthlyReadsCard__thumb--mediaAudio img {
    aspect-ratio: 3 / 2 !important;
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
}

.p-monthlyReads__listItem {
    width: 371px;
    margin: 0 16px;
    transition: width .5s ease;

    a {
        pointer-events: none;
    }

    &:nth-child(5n + 1) {
        .p-monthlyReadsCard__thumb {
            background: var(--accent-color-teal);
        }
    }

    &:nth-child(5n + 2) {
        .p-monthlyReadsCard__thumb {
            background: var(--accent-color-purple);
        }
    }

    &:nth-child(5n + 3) {
        .p-monthlyReadsCard__thumb {
            background: var(--accent-color-orange);
        }
    }

    &:nth-child(5n + 4) {
        .p-monthlyReadsCard__thumb {
            background: var(--accent-color-blue);
        }
    }

    &:nth-child(5n) {
        .p-monthlyReadsCard__thumb {
            background: var(--accent-color-yellow);
        }
    }

    &.is-center {
        position: relative;
        z-index: 2;

        .p-monthlyReadsCard {
            transform: scale(1);
        }

        a {
            pointer-events: all;
        }

        & .p-monthlyReadsCard__thumb{
            margin: 0 25.5px;
            aspect-ratio: 2 / 3;
            padding: 52px 32px;
        }

        /* 電子書籍 (article_type=5) 限定: 書影は object-fit:contain で
           縦中央配置だと下に色枠の隙間が残るため、下寄せ + padding-bottom を
           body の margin-top: -54px と一致させて書影と説明文を密着させる。 */
        & .p-monthlyReadsCard__thumb--ebook{
            justify-content: flex-end;
            padding-bottom: 54px;
        }

        /* 動画/音声アイコン: 既定 left:28px は default 状態の padding-left:20
           前提だが、is-center は padding-left:32 にスケールアップするので
           アイコンが画像の白枠より左にはみ出る。padding-left + 8px に揃える。 */
        & .p-monthlyReadsCard__thumb--media::after{
            left: 40px;
        }

        & .p-monthlyReadsCard__body{
            display: block;
            /* 2026-05-16: 旧 margin-top: -54px は thumb の padding-bottom: 54px と
               組合せて書影下部に body をかぶせる「密着」設計だったが、書影下部が
               body の白背景に隠れて見切れる問題があるため重なりを撤回。 */
            margin-top: 0;
            position: relative;
            z-index: 2;
            background: var(--white-color);
        }
    }

    &.is-far-left {
        .p-monthlyReadsCard {
            transform: translateX(237px) scale(0.574);
        }
    }

    &.is-left {
        .p-monthlyReadsCard {
            transform: translateX(79px) scale(0.574);
        }
    }

    &.is-right {
        .p-monthlyReadsCard {
            transform: translateX(-79px) scale(0.574);
        }
    }

    &.is-far-right {
        .p-monthlyReadsCard {
            transform: translateX(-237px) scale(0.574);
        }
    }
}

.p-monthlyReadsCard {
  transform: scale(0.574); /* 213/371 */
  transform-origin: center center;
  transition: transform 300ms ease;
}

.p-monthlyReadsCard__body{
    padding: 24px;
}

.p-monthlyReadsCard__title{
    font-size: 20px;
}

.p-monthlyReadsCard__authorName{
    margin-top: 16px;
    color: var(--text3-color);
}

.p-monthlyReads__link{
    margin-inline: auto;
    margin-top: 40px;
    border: 1px solid var(--accent-color-black);
    color: var(--accent-color-black);
}


.embla {
  overflow: hidden;
  margin-left: -35.5px;
  margin-right: -35.5px;
}

.embla__container {
  display: flex;
}

.embla__slide {
  flex: 0 0 auto;
}

@media (max-width: 1423px) {
    .embla {
        margin-left: -2.5vw;
        margin-right: -2.5vw;
    }

    .p-monthlyReads__listItem {
        width: 25.7vw;
        margin: 0 1.1vw;

        &.is-center {
            .p-monthlyReadsCard__thumb {
                padding: 42px 26px;
            }

            /* padding-left:26 + 8px inset */
            .p-monthlyReadsCard__thumb--media::after {
                left: 34px;
            }
        }

        &.is-far-left {
            .p-monthlyReadsCard {
                transform: translateX(16.4vw) scale(0.574);
            }
        }

        &.is-left {
            .p-monthlyReadsCard {
                transform: translateX(5.4vw) scale(0.574);
            }
        }

        &.is-right {
            .p-monthlyReadsCard {
                transform: translateX(-5.4vw) scale(0.574);
            }
        }

        &.is-far-right {
            .p-monthlyReadsCard {
                transform: translateX(-16.4vw) scale(0.574);
            }
        }
    }
}

@media (max-width: 1024px) {
    .embla {
        margin-left: -5vw;
        margin-right: -5vw;
    }

    .p-monthlyReads__listWrap {
        margin-top: 32px;
    }

    .p-monthlyReads__listItem {
        width: 213px;
        margin: 0 13px;
        padding-top: 50px;

        .p-monthlyReadsCard {
            transform-origin: top center;
        }

        &.is-center {
            padding-top: 0;

            .p-monthlyReadsCard__thumb {
                margin-left: 0;
                margin-right: 0;
            }

            & .p-monthlyReadsCard__body {
                padding: 24px 16px;
                margin-left: -40px;
                margin-right: -40px;
                margin-top: 0;
            }
        }

        &.is-far-left {
            .p-monthlyReadsCard {
                transform: translateX(99px) scale(0.685);
            }
        }

        &.is-left {
            .p-monthlyReadsCard {
                transform: translateX(33px) scale(0.685);
            }
        }

        &.is-right {
            .p-monthlyReadsCard {
                transform: translateX(-33px) scale(0.685);
            }
        }

        &.is-far-right {
            .p-monthlyReadsCard {
                transform: translateX(-99px) scale(0.685);
            }
        }
    }

    .p-monthlyReadsCard__title {
        font-size: 17px;
    }

    .p-monthlyReadsCard__authorName {
        font-size: 13px;
    }

    .p-monthlyReads__link {
        width: 90%;
    }
}


/*ーーーーーーーーーーーーーーーーーー
国際 + Foresight
ーーーーーーーーーーーーーーーーーー*/
.p-foresight{
    padding: var(--pd80);
    background: var(--bg-color);
}

.p-foresight__listWrap.swiper-wrapper{
    margin-top: 32px;
}

.p-foresight__listItem{
    background: var(--white-color);
    width: calc((100% - 60px) / 4);
    box-shadow: var(--box-shadow);
    margin-bottom: 4px;
}

.p-foresightCard__body {
    padding: 24px;
}

.p-foresightCard__title {
    margin-top: 16px;

    /* ID:160/429/592 hover 時 2 本下線になる事象を解消。
       text-decoration (animation.css の :not(.c-featureLinkTitle) 系) と
       本ファイル下方の border-bottom が両方発火していたため、
       span 内 border-bottom を削除して text-decoration に一本化する。 */
}

.p-foresightCard__category.c-metaCategory{
    color: var(--accent-color-blue);

    &::before {
        background-color: var(--accent-color-blue);
    }
}

.p-foresightCard__authorWrap{
    margin-top: 24px;
}

.p-foresightCard__thumb{
    background: url("../images/default-foresight.jpg") no-repeat center center / contain;
    aspect-ratio: 3 / 2;
    display: flex;
    align-items: center;
    justify-content: center;

    img{
        object-fit: cover;
        border: 2px solid var(--white-color);
        max-width: 80%;
        max-height: 80%;
        width: auto;
        height: auto;
    }
}


/* Foresight 動画/音声カード: 青枠デザインを維持しつつ、画像の背後にブラーレイヤーを
   配置 + 左下に再生アイコン。共通の c-movie-s/c-audio-s は p-foresightCard__thumb の
   背景画像 (青) や img 白枠を破壊してしまうため、Foresight 専用クラスでスコープを切る。 */
.p-foresightCard__thumb--media {
    position: relative;
    overflow: hidden;
}
.p-foresightCard__thumb--media::before {
    content: '';
    position: absolute;
    inset: 10%;
    background: var(--bg) center/cover no-repeat;
    filter: blur(16px) brightness(0.85);
    z-index: 0;
}
.p-foresightCard__thumb--media img {
    position: relative;
    z-index: 1;
}
.p-foresightCard__thumb--media::after {
    content: "";
    position: absolute;
    /* 画像 (max-width/max-height: 80%) の白枠の内側に配置するため、
       コンテナ縁から 10% (画像外側余白) + 8px (画像内パディング) オフセット。 */
    bottom: calc(10% + 8px);
    left: calc(10% + 8px);
    width: 32px;
    aspect-ratio: 1 / 1;
    z-index: 2;
}
.p-foresightCard__thumb--mediaMovie::after {
    background: url("../images/movie-button.svg") no-repeat center center / contain;
}
.p-foresightCard__thumb--mediaAudio::after {
    background: url("../images/audio-button.svg") no-repeat center center / contain;
}


.p-foresight{
    & .swiper-button-next {
        &::after{
            background: url("../images/button-r-bl.svg") no-repeat center center / contain;
        }
    }

    & .swiper-button-prev {
        &::after{
            background: url("../images/button-l-bl.svg") no-repeat center center / contain;
        }
    }
}

/* ID:160/429/592 2 本下線解消のため p-foresightCard__title の
   hover 時 border-color ルールを削除。hover 下線は text-decoration 経由で
   animation.css 側が引く (.p-foresightCard__title:not(.c-featureLinkTitle))。
   ※ もとは .p-insightCard a:hover .p-foresightCard__title span でも border-color
   を当てるコピペ起源のルールが残っていた。 */

@media screen and (max-width: 1024px) {
    .p-foresight {
        overflow: hidden;
        
        .swiper {
            overflow: visible;
        }

        .swiper-scrollbar.swiper-scrollbar-horizontal {
            background: rgba(48, 92, 137, 0.18);
        }

        .swiper-scrollbar-drag {
            background: var(--accent-color-blue);
        }
    }

    .p-foresight__listItem {
        width: 305px;
    }
}



/*ーーーーーーーーーーーーーーーーーー
動画・音声
ーーーーーーーーーーーーーーーーーー*/
/* 共通 */
.p-media,
.p-ebook{
    padding: var(--pd80);
    overflow-x: clip;
}

.p-media__inner,
.p-ebook__inner{
    display: flex;
    justify-content: flex-start;
    gap: 40px; 
}

.p-media__heading,
.p-ebook__heading{
    flex: 0 0 290px;
    position: relative;
}

.p-media__headingText,
.p-ebook__headingText{
    font-size: 17px;
    margin-top: clamp(0.75rem, 0.304rem + 1.83vw, 2.5rem);
}

.p-media__listContainer,
.p-ebook__listContainer{
    flex: 1 1 auto;
    min-width: 0;
    margin-right: calc(50% - 50vw);
}

.p-media__headingNav,
.p-ebook__headingNav{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 40px;
}

.p-media__pager,
.p-ebook__pager {
    display: flex;
    align-items: center;
    gap: 4px;
}

.p-media__pagerLink,
.p-ebook__pagerLink{
    width: 40px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.p-media__link,
.p-ebook__link{
    color: var(--accent-color-teal);
    border: 1px solid transparent;
    font-family: "MFW-PIshiiGothicStdN-M", sans-serif;
    font-weight: 500;
}

.p-media__pagerLink.swiper-button-disabled,
.p-ebook__pagerLink.swiper-button-disabled{
    opacity: .4;
    box-shadow: none;
    cursor: default;
}

/* card */
.p-mediaCard__title,
.p-ebookCard__title{
    font-size: 17px;
    margin-top: 16px;
    font-family: "MFW-PIshiiGothicStdN-M", sans-serif;
    font-weight: 500;
}

.p-mediaCard__authorWrap,
.p-ebookCard__authorWrap{
    margin-top: 8px;
}

/* media */
.p-media__listItem {
    width: 480px;
}

.p-mediaCard__thumb{
    aspect-ratio: 3 / 2;
    box-shadow: var(--box-shadow);

    img {
        height: 100%;
        object-fit: cover;
    }
}

.p-mediaCard__thumb.c-audio,
.p-mediaCard__thumb.c-movie {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.p-mediaCard__thumb.c-audio img {
    /* 2026-05-16: 動画と同じパターンに統一。aspect-ratio 1:1 強制を撤回し
       画像の元アスペクト比を維持、80% 範囲に contain で全体表示。 */
    width: 80% !important;
    height: auto !important;
    max-width: 80% !important;
    max-height: 80% !important;
    object-fit: contain !important;
    position: relative;
    z-index: 1;
}

.p-mediaCard__thumb.c-movie img {
    aspect-ratio: 16 / 9;
    width: 80% !important;
    height: auto !important;
    max-width: 80% !important;
    max-height: 80% !important;
    /* 2026-05-16: cover → contain。16:9 画像の四隅 (タイトル等) が切れる問題対応。 */
    object-fit: contain !important;
    position: relative;
    z-index: 1;
}

/* ebook */
.p-ebook{
    padding-top: 40px;
}

.p-ebook__listItem{
    width: fit-content;
    min-width: 0;
}

.p-ebookCard {
    width: fit-content;
    min-width: 0;
}

.p-ebookCard a {
    display: block;
    width: fit-content;
    min-width: 0;
}

.p-ebookCard__title,
.p-ebookCard__authorWrap {
    width: 0;
    min-width: 100%;
}

.p-ebookCard__thumb{
    box-shadow: var(--box-shadow);
    img{
        aspect-ratio: initial;
        object-fit: contain;
        height: 270px;
        width: auto;
        max-width: 100%;
        display: block;
    }
}


@media screen and (max-width: 1024px) {
    .p-media {
        overflow: hidden;
        padding-bottom: 32px;
    }

    .p-ebook {
        overflow: hidden;
        padding-top: 32px;
    }

    .p-media__inner, .p-ebook__inner {
        display: block;
    }

    .p-media__headingText,
    .p-ebook__headingText {
        font-size: 15px;
    }

    .p-media__listContainer, .p-ebook__listContainer{
        margin-top: 24px;
        margin-right: 0;

        .swiper {
            overflow: visible;
        }
    }

    .p-media__link, .p-ebook__link{
        position: absolute;
        top: 10px;
        right: 0;
    }

    .p-media__headingNav,
    .p-ebook__headingNav {
        margin-top: 0;
    }
    
    .p-media__pager,
    .p-ebook__pager {
        display: none;
    }

    .p-media__listItem {
        width: 240px;
    }

    .p-mediaCard__thumb{
        &.c-audio {
            img {
                max-width: calc(100% - 32px);
                max-height: calc(100% - 32px);
            }

            &::after {
                width: 36px;
                left: 8px;
                bottom: 8px;
            }
        }

        &.c-movie {
            img {
                max-width: calc(100% - 48px);
                max-height: calc(100% - 52px);
            }

            &::after {
                width: 36px;
                left: 8px;
                bottom: 8px;
            }
        }
    }

    .p-ebookCard__thumb{
        img {
            height: 219px;
        }

        &.c-audio {
            &::after {
                width: 36px;
                left: 8px;
                bottom: 8px;
            }
        }

        &.c-movie {
            &::after {
                width: 36px;
                left: 8px;
                bottom: 8px;
            }
        }
    }
}


/*ーーーーーーーーーーーーーーーーーー
筆者
ーーーーーーーーーーーーーーーーーー*/
/* ID:183 */
.p-author{
    padding-top: 40px;
    padding-bottom: 56px;
    background: var(--bg-color);
}

.p-author__heading{
    text-align: center;
}

.p-author__listWrap {
  display: flex;
  gap: 68px;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  padding: 24px 0;
}

.p-author__listWrap::before,
.p-author__listWrap::after {
  content: "";
  display: block;
  margin: auto;
  width: 1px; 
}

.p-author__listWrap > * {
  flex: 0 0 64px;
}

.p-author__listItem {
    position: relative;
}

.p-author__name{
    text-align: center;
    margin-top: 12px;
    margin-right: -15px;
    margin-left: -15px;
}

.p-author__icon{
    /* No.4 横長・縦長の画像でも正円になるよう明示的に幅と高さを指定 */
    width: 64px;
    height: 64px;
    box-sizing: content-box;
    border-radius: 99vw;
    border: 2px solid var(--accent-color-teal);
    padding: 2px;
    aspect-ratio: 1/1;
    object-fit: cover;
}

.p-author__link {
    position: absolute;
    bottom: -24px;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    font-size: 13px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 7px;
    transition: .5s;
    color: var(--accent-color-teal);
    white-space: nowrap;
    font-family: "MFW-PIshiiGothicStdN-M", sans-serif;
    font-weight: 500;

    &::after {
        content: '';
        display: block;
        width: 5px;
        aspect-ratio: 1/2;
        background: url(../images/arrow-teal.svg) no-repeat center / contain;
    }
}

.p-author__listItem a:hover {
    .p-author__link {
        opacity: 1;
    }
}

@media screen and (max-width: 1024px) {
    .p-author {
        padding-top: 48px;
    }

    .p-author__listWrap {
        gap: 44px;
    }

    .p-author__link {
        display: none;
    }
}


/*ーーーーーーーーーーーーーーーーーー
ランキング
ーーーーーーーーーーーーーーーーーー*/
.p-ranking{
    padding: var(--pd80);
}

.p-rankingCard a{
    display: flex;
    align-items: flex-start;
    gap: 24px;
}

.p-rankingCard__rank{
    flex-basis: 40px;
}

.p-rankingCard__heading{
    flex-basis: calc(100% - 180px);
    display: flex;
    gap: 24px;
}

.p-rankingCard__rankText{
    font-size: 28px;
    color: var(--accent-color-teal);
    text-align: center;
    border: 1px solid var(--accent-color-teal);
}

.p-rankingCard__thumb{
    flex-basis: 180px;
    aspect-ratio: 3 / 2;
    box-shadow: var(--box-shadow);
}

.p-rankingCard__body{
    flex-basis: calc(100% - 40px);
}

.p-ranking__listWrap{
    margin-top: 40px;
}

.p-ranking__listItem{
    padding: 12px 0;
    position: relative;

    &:not(:last-child) {
        &::after {
            content: '';
            display: block;
            width: calc(100% - 64px);
            height: 1px;
            background: var(--border-color);
            position: absolute;
            top: 100%;
            right: 0;
        }
    }
}

.p-rankingCard__title{
    font-size: 17px;
    margin-top: 12px;
    width: fit-content;
}

.p-rankingCard__authorWrap{
    margin-top: 12px;
}

/* ID:160 hover 下線は c-titleLink:hover (animation.css) で一本化。
   span ベースの border-bottom は併用で2本下線になるため削除。 */

.p-ranking__headingLink--sp {
    border: 1px solid var(--accent-color-teal);
    color: var(--accent-color-teal);
    margin-top: 24px;
    display: none;
}

@media screen and (max-width: 1024px) {
    .p-ranking__headingLink{
        display: none;
    }

    .p-rankingCard a,
    .p-ranking__headingLink--sp{
        display: block;
    }

    .p-rankingCard__thumb{
        margin-top: 24px;
        width: calc(100% - (40px + 24px));
        margin-left: auto;
        margin-right: 0;
    }

    .p-ranking__listItem{
        padding: 20px 0;
    }
}

/*ーーーーーーーーーーーーーーーーーー
法人プラン特典
ーーーーーーーーーーーーーーーーーー*/
.p-plan{
    padding: var(--pd80);
    padding-top: 40px;
}

.p-plan__inner{
    display: flex;
    height: 427px;
    box-shadow: var(--box-shadow);
}

.p-plan__body,
.p-plan__thumb{
    flex-basis: 50%;
    
}

.p-plan__thumb{
    img {
        object-fit: cover;
        height: 100%;
        aspect-ratio: 1 / 1;
    }
}

.p-plan__body{
    background: var(--accent-color-black);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 48px clamp(1.5rem, 1.118rem + 1.57vw, 3rem);
}

.p-plan__title{
    color: var(--white-color);
    font-size: clamp(1.75rem, 1.559rem + 0.78vw, 2.5rem);
}

.p-plan__text{
    color: var(--text5-color);
    margin-top: 24px;
}

.p-plan__link{
    background: var(--white-color);
    margin-top: 24px;
}

@media screen and (max-width: 1024px) {
    .p-plan__inner {
        flex-direction: column-reverse;
        height: auto;
    }
    .p-plan__thumb img {
        aspect-ratio: auto;
        width: 100%;
        height: auto;
    }
}



/*ーーーーーーーーーーーーーーーーーー
お知らせ
ーーーーーーーーーーーーーーーーーー*/
.p-news{
    padding: var(--pd80);
    background: var(--bg-color);
    /* ID:374 左右の装飾ラインが切れないように左右だけ visible */
    overflow: hidden;
    position: relative;
}
/* ID:374 お知らせエリアの左右ライン */
.p-news::before,
.p-news::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 40px;
    height: 1px;
    background: var(--border-color);
    transform: translateY(-50%);
}
.p-news::before { left: 0; }
.p-news::after  { right: 0; }
@media (max-width: 1024px) {
    .p-news::before,
    .p-news::after { display: none; }
}

.p-news .swiper{
    overflow: clip;
    overflow-clip-margin: 8px;
}

.p-news__listWrap.swiper-wrapper{
    margin-top: 32px;
}

.p-news__listItem{
    width: calc((100% - 60px) / 4);
    background: var(--white-color);
    box-shadow: var(--box-shadow);
    margin-bottom: 4px;
}

.p-newsCard__body{
    padding: 24px;
}

.p-newsCard__title{
    margin-top: 16px;
    font-size: 17px;
    line-height: 1.4;
}

.p-newsCard__thumb {
    /* ID:415 お知らせパネルの背景色を赤系→オレンジに変更 */
    background: var(--accent-color-orange);
    aspect-ratio: 3 / 2;
    display: flex;
    align-items: center;
    justify-content: center;

    img {
        object-fit: cover;
        border: 2px solid var(--white-color);
        max-width: 80%;
        max-height: 80%;
        width: auto;
        height: auto;
    }
}

.p-newsCard__thumb--red {
    /* ID:415 同上 */
    background: var(--accent-color-orange);
}

.p-newsCard__thumb--purple {
    background: #5C3A88;
}

.p-news__pager{
    display: none;
}


@media screen and (max-width: 1024px) {
    .p-news{
        .swiper {
            overflow: visible;
        }

        .swiper-scrollbar.swiper-scrollbar-horizontal {
            background: var(--accent-color-teal-bg);
        }

        .swiper-scrollbar-drag {
            background: var(--accent-color-teal);
        }
    }

    .p-news__pager{
        display: none;
    }

    .p-news__listItem {
        width: 305px;
    }
}


/*ーーーーーーーーーーーーーーーーーー
カテゴリー
ーーーーーーーーーーーーーーーーーー*/
.p-category{
    padding: var(--pd80);
}

.p-category__listWrap{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: clamp(3rem, 2.49rem + 2.09vw, 5rem) 40px;
}

.p-categoryCard__body{
    margin-top: 16px;
}

.p-categoryCard__listItem{
    position: relative;
    padding: 16px 0;
    border-bottom: 1px solid var(--border-color);

    &:first-child{
        padding-top: 0;

        & .p-categoryCard__flex{
            margin-top: 16px;
        }
    }

    &:not(:first-child){
        & .p-categoryCard__listTitle{
            font-size: 15px;
            line-height: 1.4;
        }
    }

    &:last-child{
        border-bottom: none;
    }
}

.p-categoryCard__title{
    font-size: 22px;

    &::after {
        width: 8px;
        position: absolute;
        top: 60%;
        transform: translateY(-60%);
        right: -24px;
    }
}

.p-categoryCard__thumb {
    aspect-ratio: 3 / 2;
}
.p-categoryCard__thumb img{
    box-shadow: var(--box-shadow);
}

.p-categoryCard__listTitle{
    font-size: 17px;
}

.p-categoryCard__listFlex {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    align-items: flex-end;
}



@media screen and (max-width: 1024px) {
    .p-categoryCard__listItem{
        &:first-child{
            a{
                display: flex;
                flex-direction: row-reverse;
                gap: 16px;
                /* #529-① (柚山 5/15) タイトルが長い時に動画サムネ (c-movie-s) の
                   背景ブラーが flex 親の align-items: stretch によって縦に
                   伸びる問題を解消。flex-start で固定高さに揃える。 */
                align-items: flex-start;
            }

            & .p-categoryCard__flex{
                margin-top: 0;
                flex-basis: calc(100% - 120px - 16px);
                /* No.13 ラベル (FREE/NEW) が画像にかぶるのを防ぐため、テキスト領域内で
                   レイアウトが完結するように min-width: 0 + overflow:hidden を付与 */
                min-width: 0;
                overflow: hidden;
            }

            /* No.13 FREE/NEW badges を thumb と被らないよう author 列の下に折り返す */
            & .p-categoryCard__listFlex {
                flex-wrap: wrap;
                gap: 4px;
                row-gap: 6px;
            }

            & .p-categoryCard__badgeList {
                /* author 列と並ぶ位置にしつつ、image 端に重ならないよう右マージン確保 */
                margin-left: auto;
            }
        }
    }

    .p-categoryCard__thumb{
        flex-basis: 120px;
        /* #529-① 縦伸び防止: 高さも明示 (120 / 3 * 2 = 80px for 3:2 aspect) */
        height: 80px;
        flex-shrink: 0;
        align-self: flex-start;
    }
}

/* ID:368 SPでタイトルとコンテンツ間の余白を 24px に統一 */
@media screen and (max-width: 1024px) {
    .p-serial__listWrap.swiper-wrapper,
    .p-memo__listWrap.swiper-wrapper,
    .p-foresight__listWrap.swiper-wrapper,
    .p-news__listWrap.swiper-wrapper,
    .p-ranking__listWrap {
        margin-top: 24px;
    }
}