@charset "UTF-8";

/*ーーーーーーーーーーーーーーーーーー
特集　導入
ーーーーーーーーーーーーーーーーーー*/
.p-articleIntro{
    background: var(--feature-section-bg, var(--accent-color-black));
    padding: 40px clamp(1.5rem, 1.245rem + 1.05vw, 2.5rem);
}

.p-articleIntro__label,
.p-articleIntro__vol,
.p-articleIntro__title,
.p-articleIntro__date{
    text-align: center;
}

.p-articleIntro__label{
    font-size: 20px;
    color: var(--feature-cta-bg, var(--accent-color-yellow));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.p-articleIntro__vol{
    font-size: 20px;
    color: var(--feature-episode-sub, var(--text2-color));
    margin-top: 20px;
}

.p-articleIntro__title{
    color: var(--feature-text-color, var(--white-color));
    font-size: clamp(1.5rem, 1.245rem + 1.05vw, 2.5rem);
    margin-top: 16px;
    /* リッチ記事/特集記事の見出しは 900px で折り返す (本文 h2/h3 と揃える)。
       text-align:center が上書きで効いているため margin auto で box を中央寄せ。 */
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.p-articleIntro__authorWrap,
.p-articleSimpleIntro__authorWrap,
.p-articleEbookIntro__authorWrap,
.p-articleMovieIntro__authorWrap,
.p-articleAudioIntro__authorWrap{
    justify-content: center;
    gap: 12px clamp(1rem, 0.873rem + 0.52vw, 1.5rem);
    margin-top: 32px;

    & .c-author{
        align-items: center;
    }

    & .c-authorIcon{
        width: 32px;
        aspect-ratio: 1/1;
        height: auto;
    }

    & .c-authorName{
        font-size: 15px;
        color: var(--text-color);
    }

    & .p-articleIntro__authorName,
    .p-articleSimpleIntro__authorName{
        font-size: 15px;
        color: var(--feature-text-color, var(--white-color));
    }
}

/* ID:595 リッチ記事公開日のフォント色が背景の濃色とかぶって読めない問題を解消。
   --feature-episode-title (特集ごとに上書きされる) が未定義時に var(--text5-color)
   (#000) を引いていたため、黒地に黒文字となっていた。フォールバックを
   var(--feature-text-color, var(--white-color)) に変更してタイトルと同じ
   コントラスト基準で表示する。 */
.p-articleIntro__date{
    color: var(--feature-episode-title, var(--feature-text-color, var(--white-color)));
    margin-top: 20px;
}

/* ID:594 (5/13 柚山再差戻) リッチ版コンテキスト (背景 #171719) では
   特集設定の --feature-episode-title (#181818 等の暗色) が引かれて黒地に黒に
   なるケースがあるため、リッチ版のみ --feature-text-color (白系) で強制上書き。 */
.p-articleContantRich .p-articleIntro__date,
.p-articleIntro.p-articleIntro--rich .p-articleIntro__date {
    color: var(--feature-text-color, var(--white-color));
}

/* icon */
.p-articleIntro__iconListWrap,
.p-articleIntro__iconListItem--keep a,
.p-articleIntro__iconFlex,
.p-articleIntro__iconPenWrap
 {
    display: flex;
    color: var(--feature-text-color, var(--white-color));
    align-items: center;
}

.p-articleIntro__iconFlex{
    justify-content: space-between;
    margin-top: 40px;
    width: min(620px,100%);
    margin-inline: auto;
}

.p-articleIntro__episodeWrap{
    width: min(620px,100%);
    margin-inline: auto;
}

.p-articleIntro__iconListWrap{
    border: 1px solid var(--feature-text-color, var(--white-color));
}

.p-articleIntro__iconListItem,
.p-articleAuthor__iconListItem{
    padding: 8px;

    &:not(:first-child){
        border-left: 1px solid var(--feature-text-color, var(--white-color));
    }
}

.p-articleIntro__iconListItem--keep a{
    & .text{
        flex: none;
        margin-left: 4px;
    }
}

/* pen */
.p-articleIntro__iconPenWrap{
    & .add{
        margin-left: 4px;
        line-height: 1;
    }
}

.p-articleIntro__iconPen{
    width: 24px;
}

/* 特集 */
.p-articleIntro__episodeWrap{
    background: var(--feature-episode-bg, var(--bg-color));
    margin-top: 40px;
    padding: 24px clamp(1.5rem, 1.118rem + 1.57vw, 3rem);
}

.p-articleSimpleIntro .p-articleIntro__episodeCardBadge.c-badgeItem--newB{
    background: var(--accent-color-black);
    border-color: var(--accent-color-black);
    color: var(--white-color);
}

.p-articleSimpleIntro .p-articleIntro__episodeCardBadge.c-badgeItem--freeB{
    background: var(--white-color);
    border-color: var(--accent-color-black);
    color: var(--accent-color-black);
}

.p-articleIntro__episodeHeading{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.p-articleIntro__episodeLink{
    color: var(--feature-episode-sub, var(--text2-color));
    font-size: 13px;
    padding-right: 16px;

    &::after{
        width: 7px;
        background: currentColor;
        -webkit-mask: url("../images/arrow.svg") no-repeat center center / contain;
        mask: url("../images/arrow.svg") no-repeat center center / contain;
    }
}

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

.p-articleIntro__episodeListItem{
    /* ID:466 Vol 上の罫線間を広め、下の罫線間を狭め、最後 Vol にも罫線を残す */
    border-bottom: 1px solid var(--feature-episode-rule-color, var(--feature-episode-sub, var(--text3-color)));
}

.p-articleIntro__episodeTitle{
    font-size: 20px;
    color: var(--feature-episode-title, var(--white-color));
}

.p-articleIntro__episodeCardLink {
    display: flex;
    gap: 10px;
    align-items: center;
    /* ID:466 Vol と上の罫線の間を広げ、下の罫線との間を狭め */
    padding: 16px 24px 8px 0;

    /* ID:377/381 NEW/FREE バッジを chevron の直前（右側）に配置。
       meta を margin-right:auto で左寄せ、バッジ→chevron が右側に固定表示される。 */
    & .p-articleIntro__episodeCardMeta {
        margin-right: auto;
    }

    &::after{
        background: var(--feature-episode-sub, var(--text4-color));
        -webkit-mask: url("../images/arrow.svg") no-repeat center center / contain;
        mask: url("../images/arrow.svg") no-repeat center center / contain;
    }
}

.p-articleIntro__episodeCardLink.is-current{
    cursor: default;
}

.p-articleIntro__episodeCardTitle{
    color: var(--feature-episode-title, var(--text5-color));
    margin-top: 4px;
}

/* ID:259/381 特集目次の動画/音声記事はタイトルの末尾（後ろ）にメディア種別アイコン。
   旧: ::before でタイトル前に表示 → 設計差戻のため ::after でタイトル後ろに変更。 */
.p-articleIntro__episodeCardTitle--movie::after,
.p-articleIntro__episodeCardTitle--audio::after{
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-left: 6px;
    vertical-align: -3px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.p-articleIntro__episodeCardTitle--movie::after{
    background-image: url("../images/movie-button-simple.svg");
    background-color: var(--feature-episode-sub, var(--text6-color));
    border-radius: 50%;
}
.p-articleIntro__episodeCardTitle--audio::after{
    background-image: url("../images/audio-button.svg");
}

.p-articleIntro__episodeCardVol{
    color: var(--feature-episode-sub, var(--text2-color));
    font-size: 13px;
}

.p-articleIntro__episodeClose,
.p-articleIntro__episodeTop{
    color: var(--feature-episode-sub, var(--text2-color));
    text-align: center;
}

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

.p-articleIntro__episodeClose,
.p-articleIntro__episodeTop{
    a,
    button{
        &::after{
            background: currentColor;
            -webkit-mask: url("../images/arrow.svg") no-repeat center center / contain;
            mask: url("../images/arrow.svg") no-repeat center center / contain;
        }
    }
}

.p-articleIntro__episodeClose{
    /* 既定 (展開時 = 「閉じる」状態) は通常の余白。
       折りたたみ時のみフェード末尾の上に重ねるため、後段の媒体クエリで
       負の margin-top に上書きする。 */
    margin-top: 16px;
    position: relative;
    z-index: 2;
    /* 「特集トップへ」(.p-articleIntro__episodeLink) と揃えて 13px。 */
    font-size: 13px;

    a,
    button{
        &::after{
            left: -20px;
            right: auto;
            /* ID:381 「閉じる」状態（展開済）はシェブロン上向き */
            transform: translateY(-50%) rotate(-90deg);
        }
    }
}

/* ID:381 「もっと見る」状態はシェブロン下向き。
   a タグ系は is-closed (article_common.js)、button[data-episode-toggle] は is-collapsed
   (article.js) を初期/折りたたみ状態として持つ。どちらの状態でも矢印は下向きにする。 */
.p-articleIntro__episodeWrap.is-closed .p-articleIntro__episodeClose a::after,
.p-articleIntro__episodeWrap.is-closed .p-articleIntro__episodeClose button::after,
.p-articleIntro__episodeWrap.is-collapsed .p-articleIntro__episodeClose a::after,
.p-articleIntro__episodeWrap.is-collapsed .p-articleIntro__episodeClose button::after{
    transform: translateY(-50%) rotate(90deg);
}

.p-articleIntro__episodeToggle{
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.p-articleIntro__episodeWrap.is-closed .p-articleIntro__episodeListWrap{
    display: none;
}


/* ID:257/258 PCで4件超・SPで3件超を初期非表示（is-collapsed状態） */
.p-articleIntro__episodeWrap.is-collapsed [data-ep-hide-pc]{
    display: none;
}
@media (max-width: 1024px){
    .p-articleIntro__episodeWrap.is-collapsed [data-ep-hide-sp]{
        display: none;
    }
    /* SPで4件目以降もis-collapsed時は隠す（data-ep-hide-pcがsp範囲外でも） */
    .p-articleIntro__episodeWrap.is-collapsed [data-ep-hide-pc]:not([data-ep-hide-sp]){
        display: none;
    }
}

/* 表示時に末尾 2 件をフェードアウトして「続きあり」を視覚的に示唆する。
   - PC (>1024px): 4 件表示。3 件目を 0.55、4 件目を 0.3 に。
   - SP (≤1024px): 3 件表示。2 件目を 0.55、3 件目を 0.3 に。
   is-collapsed が外れた展開時は不透明度を戻す。 */
@media (min-width: 1025px){
    .p-articleIntro__episodeWrap.is-collapsed:has([data-ep-hide-pc]) .p-articleIntro__episodeListItem:nth-child(3){
        opacity: 0.5;
    }
    .p-articleIntro__episodeWrap.is-collapsed:has([data-ep-hide-pc]) .p-articleIntro__episodeListItem:nth-child(4){
        opacity: 0.15;
    }
    /* PC は 4件目テキストに被らないよう margin を浅め (-8px) に */
    .p-articleIntro__episodeWrap.is-collapsed:has([data-ep-hide-pc]) .p-articleIntro__episodeClose{
        margin-top: -8px;
    }
}
@media (max-width: 1024px){
    .p-articleIntro__episodeWrap.is-collapsed:has([data-ep-hide-sp]) .p-articleIntro__episodeListItem:nth-child(2){
        opacity: 0.5;
    }
    .p-articleIntro__episodeWrap.is-collapsed:has([data-ep-hide-sp]) .p-articleIntro__episodeListItem:nth-child(3){
        opacity: 0.15;
    }
    /* SP はフェード末尾 (3件目) の上に重ねて配置 */
    .p-articleIntro__episodeWrap.is-collapsed:has([data-ep-hide-sp]) .p-articleIntro__episodeClose{
        margin-top: -40px;
    }
}

/* PC で 4 件以下の時は隠すものがないので「もっと見る」は SP 専用表示 */
@media (min-width: 1025px){
    .p-articleIntro__episodeClose--sp-only{
        display: none;
    }
}

/* content */
.p-articleContantSimple,
.p-articleContantEbook{
    & .c-contentAuthorIconFlex{
        padding-top: 16px;
        border-top: 1px solid var(--border-color);
    }
}

.p-articleContantRich--noLead{
    /* ID:526 リッチ版でリード未入力の時も黒い導入帯と本文の間隔を確保。
       (5/8 柚山差戻) 初版 128px は「空きすぎ」指摘のため 80px に縮小。 */
    padding-top: 80px;
}

.p-articleContantRich--noLead > :first-child{
    margin-top: 0 !important;
}

/*ーーーーーーーーーーーーーーーーーー
マイノート
ーーーーーーーーーーーーーーーーーー*/
.p-articleMynote{
    border-top: 1px solid var(--border-color);
    padding: clamp(3rem, 2.49rem + 2.09vw, 5rem) 0;
}

.p-articleMynote__heading{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

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

.p-articleMynote__link{
    color: var(--feature-cta-bg, var(--accent-color-teal));
    padding-right: 15px;

    &::after {
        background: currentColor;
        -webkit-mask: url("../images/arrow.svg") no-repeat center center / contain;
        mask: url("../images/arrow.svg") no-repeat center center / contain;
    }
}

.p-articleMynote__body {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-top: 40px;
}

.p-articleMynote__body--img{
    flex-basis: 28px;
}

.p-articleMynote__body--content {
    flex-basis: calc(100% - 28px);
    border: 1px solid var(--border-color);
    padding: 12px;
    resize: none;

    &::placeholder{
        color: var(--text6-color);
    }
}


/*ーーーーーーーーーーーーーーーーーー
前の記事　/　次の記事
ーーーーーーーーーーーーーーーーーー*/
.p-articleOther{
    border-top: 1px solid var(--border-color);
    padding: clamp(2.5rem, 1.863rem + 2.61vw, 5rem) 0;
}

.p-articleOther__flexWrap,
.p-articleOtherCard__body,
.p-articleOtherCard__flexWrap{
    display: flex;
    align-items: center;
}

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

.p-articleOtherCard__body{
    gap: 16px;
    margin-top: 24px;
}

.p-articleOtherCard{
    flex-basis: 50%;

    &:only-child{
        padding-right: 0;
        border-right: none;
    }

    &:first-child:not(:only-child){
        padding-right: 40px;
        border-right: 1px solid var(--border-color);
    }

    &:nth-child(2){
        padding-left: 40px;
    }
}

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

.p-articleOtherCard__img{
    flex-basis: 120px;
}

.p-articleOtherCard__textWrap{
    flex-basis: calc(100% - 120px);
}

.p-articleOtherCard__flexWrap{
    justify-content: space-between;
}

.p-articleOtherCard__textWrap--vol{
    color: var(--feature-episode-sub, var(--text6-color));
    font-size: 13px;
}

.p-articleOtherCard__textWrap--title{
    margin-top: 8px;
}

.p-articleOtherCard__name{
    margin-top: 8px;
    font-size: 13px;
}

.p-article__link{
    border: 1px solid var(--feature-cta-bg, var(--accent-color-teal));
    padding: 12px 40px 12px 16px;
    color: var(--feature-cta-bg, var(--accent-color-teal));
    margin-inline: auto;
    margin-top: 40px;

    & .c-arrow {
        &::after {
            background: currentColor;
            -webkit-mask: url("../images/arrow.svg") no-repeat center center / contain;
            mask: url("../images/arrow.svg") no-repeat center center / contain;
            right: -20px;
        }
    }
}

/* メッセージ */
.p-articleMassage__inner{
    background: var(--feature-cta-bg, var(--accent-color-teal));
    padding: clamp(1.5rem, 1.245rem + 1.05vw, 2.5rem);
    color: var(--feature-cta-text, var(--white-color));
}

.p-articleMassage__title{
    font-size: clamp(1.5rem, 1.373rem + 0.52vw, 2rem);
    text-align: center;
}

.p-articleMassage__text{
    margin-top: 16px;
    text-align: center;
}

.p-articleMassage__cta{
    margin-top: 32px;
    font-family: "MFW-PIshiiGothicStdN-M";
}

.p-articleMassage__linkL {
    width: 100%;
    display: inline-block;
    text-align: center;
    background: var(--white-color);
    color: var(--text-color);
    padding: 16px;
}

.p-articleMassage__ctaFlex {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
}

.p-articleMassage__linkS {
    display: inline-block;
    flex-basis: 50%;
    text-align: center;
    background: none;
    border: 1px solid currentColor;
    color: inherit;
    padding: 12px 10px;
}

.p-articleMassage__linkText{
    margin-top: 32px;
    text-align: center;
    a{
        border-bottom: 1px solid currentColor;
    }
}

/* SNS */
.p-articleSns{
    padding-top: 48px;
    padding-bottom: 80px;
}

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

.p-articleSns__listWrap {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    border: 1px solid var(--text-color);
    margin-top: 20px;
}

.p-articleSns__listItem{
    text-align: center;
    padding: clamp(1rem, 0.873rem + 0.52vw, 1.5rem);

    &:not(:first-child){
        border-left: 1px solid var(--text-color);
    }
    
    img{
        width: 24px;
    }
}


/*ーーーーーーーーーーーーーーーーーー
シンプル版
ーーーーーーーーーーーーーーーーーー*/
/* ID:183 ヘッダーと本文の間のマージンを縮小 */
/* ID:388 ヘッダーとカテゴリ名間のスペース確保 (40 → 64px) */
.p-articleSimpleIntro{
    padding-top: 64px;
    padding-bottom: 32px;
}

.p-articleSimpleIntro__label{
    color: var(--feature-cta-bg, var(--accent-color-teal));
    font-size: 15px;
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.p-articleSimpleIntro__vol{
    color: var(--feature-episode-sub, var(--text6-color));
    font-size: 13px;
    margin-top: 8px;
}

.p-articleSimpleIntro__label + .p-articleSimpleIntro__cate,
.p-articleSimpleIntro__vol + .p-articleSimpleIntro__cate{
    margin-top: 16px;
}

.p-articleSimpleIntro__cate{
    color: var(--feature-cta-bg, var(--accent-color-teal));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.p-articleSimpleIntro__title{
    font-size: 28px;
    margin-top: 16px;
}

.p-articleSimpleIntro__authorWrap {
    justify-content: flex-start;
    & .p-articleSimpleIntro__authorName {
        color: var(--text-color);
    }
}

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

.p-articleSimpleIntro__imgWrap{
    /* ID:393 罫線・アクションボタン列からヒーロー画像までの余白をデザインに合わせる */
    margin-top: 24px;
    background: transparent;
}

.p-articleSimpleIntro__imgWrap img{
    display: block;
    width: 100%;
}

.p-articleSimpleIntro__imgWrap figcaption{
    background: transparent !important;
    color: var(--text3-color);
    font-family: "MFW-PIshiiGothicStdN-R", "A P-SK IshiiGothic StdN", sans-serif;
    font-size: 13px;
    font-weight: 400;
    font-style: normal;
    line-height: 1.6;
    margin-top: 8px;
    padding: 0 !important;
}


/*ーーーーーーーーーーーーーーーーーー
電子書籍版
ーーーーーーーーーーーーーーーーーー*/
/* ID:183 ヘッダーと本文の間のマージンを縮小 */
/* ID:420 動画記事 カテゴリ名とヘッダー間の余白を広げる (40 → 64px) */
.p-articleEbookIntro,
.p-articleMovieIntro,
.p-articleAudioIntro{
    padding-top: 64px;
    padding-bottom: 32px;
}

.p-articleEbookIntro__cate,
.p-articleMovieIntro__cate,
.p-articleAudioIntro__cate{
    color: var(--accent-color-teal);
}

/* ID:421 動画記事のカテゴリ名をMウェイトにする */
.p-articleMovieIntro__cate{
    font-family: "MFW-PIshiiGothicStdN-M", "A P-SK IshiiGothic StdN", sans-serif;
    font-weight: 500;
}

.p-articleEbookIntro__title,
.p-articleMovieIntro__title,
.p-articleAudioIntro__title{
    font-size: 28px;
    margin-top: 16px;
}

.p-articleEbookIntro__authorWrap,
.p-articleMovieIntro__authorWrap,
.p-articleAudioIntro__authorWrap{
    justify-content: flex-start;
}

.p-articleEbookIntro__date,
.p-articleMovieIntro__date,
.p-articleAudioIntro__date{
    margin-top: 16px;
}


/* ID:114 動画記事の動画と本文の間に余白追加（FV動画 + 本文埋め込み動画の両方） */
.p-videoPaywallWrap{
    margin-bottom: 48px;
}

/* ID:255 動画記事 FV サムネに再生▶アイコンを中央オーバーレイ */
.p-videoPaywallWrap__thumb{
    position: relative;
    cursor: pointer;
}
/* ID:423 動画矢印ボタン 三層構造 → 一層シンプルに。
   旧 movie-button.svg は 白円+ストローク+三角 の3層構造だったため、
   三角のみのシンプルな movie-button-simple.svg に置換。
   ボタンの "外殻" は CSS の半透明黒背景 + border-radius 50% のみで構成。 */
.p-videoPaywallWrap__playIcon{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 72px;
    height: 72px;
    transform: translate(-50%, -50%);
    background: rgba(23, 23, 25, 0.55) url("../images/movie-button-simple.svg") no-repeat center / 28px;
    border-radius: 50%;
    border: none;
    box-shadow: none;
    pointer-events: none;
}
@media (max-width: 768px){
    .p-videoPaywallWrap__playIcon{
        width: 56px;
        height: 56px;
        background-size: 24px;
    }
}

/* ID:268 / ID:494 動画詳細 YouTube/Vimeo/ULIZA iframe を 16:9 で全幅表示 (画面いっぱいに広がる対策) */
.p-articleContantMovie iframe,
.p-articleContantMovie .field--name-field-media-oembed-video iframe,
.p-articleContantMovie .uliza-player,
.p-articleContantMovie [class*="uliza"],
.p-articleContantMovie [data-uliza],
[data-media-content] iframe,
[data-media-content] .uliza-player{
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    display: block;
}

/* uliza が動的に追加するプラグインスクリプト (panorama / dash1 等) は
   機能スクリプトのみで描画要素ではないが、上記 [class*="uliza"] セレクタが
   <script class="ulizahtml5_PLUGIN_JS ..."> にもマッチして
   display:block + aspect-ratio:16/9 が当たり、動画上部に大きな空領域を
   取ってしまう問題があるため、明示的に非表示を強制する。
   div wrapper 側のレイアウト指定はそのまま維持する。 */
script.ulizahtml5_PLUGIN_JS {
    display: none !important;
}

/* 本文内に埋め込まれた動画メディアと前後の本文の余白 */
.text-content article.media--type-remote-video,
.text-content article.media--type-video,
.text-content article.media--type-video-embed,
.text-content .field--name-field-media-video-embed,
.field--name-body article.media--type-remote-video,
.field--name-body article.media--type-video,
.field--name-body article.media--type-video-embed,
.field--name-body .field--name-field-media-video-embed,
.text-content .drupal-media,
.field--name-body .drupal-media{
    margin-top: 32px;
    margin-bottom: 32px;
}

.text-content .drupal-media,
.field--name-body .drupal-media{
    float: none !important;
    margin-left: auto;
    margin-right: auto;
}

/* 本文に CKEditor / drupal-media で挿入された figure / figcaption は、
   Olivero embedded-media.css のデフォルト
   (figure: グレー背景 + display:table、figcaption: italic + グレー背景 + caption-side:bottom)
   が当たって、写真の周りに余計なグレー枠とキャプションのイタリック装飾が生じる。
   shinchosha 既存の .c-contentFigre と同じ簡素デザイン
   (背景なし・写真直下にプレーン体でキャプション) に揃える。
   .p-articleContant .c-contentFigre 系 (specificity 0,2,0) は引き続き優先される。

   レイアウト方針:
   - figure 自身を中身 (画像 wrapper .c-contentFigre) の幅にロックして center 寄せ
   - figure 内部の .c-contentFigre は figure 内で margin リセット (左端固定)
   - figcaption は figure 幅 = 画像幅で左揃え。CKEditor で画像サイズを変更すると
     画像 wrapper 幅が変わり、それに連動して figure 幅 → figcaption 幅も追従する。 */
/* figure は中身に合わせた幅で center 寄せ、figcaption は figure 内で block 表示。
   .memo-p (画像 wrapper) の `padding-left: 20px` は memo ホバー縦線
   (box-shadow inset 4px 0 0) の表示スペースとして必要なため維持し、
   代わりに直後の figcaption にも同じ左マージンを付与して
   画像と figcaption の左端を揃える。
   画像 wrapper (.c-contentFigre) の `margin: 40px 0` (base.css) が
   そのままだと画像とキャプションの間に隙間が出るため、内部 wrapper の
   margin は 0 にし、本文との縦余白は figure 自身に 40px の margin で持たせる。 */
.text-content figure,
.field--name-body figure {
    background: transparent !important;
    display: block;
    margin: 40px auto;
    width: fit-content;
    max-width: 100%;
    padding: 0 !important;
}
.text-content figure > .c-contentFigre,
.field--name-body figure > .c-contentFigre {
    margin: 0 !important;
}
.text-content figcaption,
.field--name-body figcaption {
    background: transparent !important;
    /* キャプションは本文より薄いグレー (#828282) で控えめに表示。
       スクリーンショット参照: 写真の説明として小さく薄く配置するパターン */
    color: var(--text6-color, #828282);
    font-family: inherit;
    font-style: normal;
    /* 本文 15px に対しキャプションは 11px で明確に区別。視覚的に控えめな注釈 */
    font-size: 11px;
    line-height: 1.6;
    padding: 0 !important;
    margin: 0 !important;
    display: block;
    text-align: start;
}
/* memo-p の padding-left:20px ぶんを figcaption 側にも margin で揃える。 */
.text-content figure > .c-contentFigre.memo-p + figcaption,
.field--name-body figure > .c-contentFigre.memo-p + figcaption {
    margin-inline-start: 20px !important;
}

.p-articleContantEbook,
.p-articleContantMovie,
.p-articleContantAudio{
    margin-top: 40px;

    & .c-contentAuthorIconListWrap2{
        width: max-content;
        margin-top: 40px;
    }
}

.p-articleContantMovie--mediaHead{
    margin-top: 0;
}

.p-articleContantMovie--mediaHead > .c-contentAuthorIconFlex:first-child{
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

.p-articleContantMovie--mediaHead .p-videoPaywallWrap{
    margin-top: 24px;
    margin-bottom: 48px;
}

.p-articleContantMovie--mediaHead [data-media-content]{
    margin-top: 24px;
    margin-bottom: 48px;
}

.p-articleContantMovie--mediaHead [data-media-content]:empty{
    margin-top: 0;
    margin-bottom: 0;
}

.p-ebookSubCard__thumb.c-thumbTrimmingNg--m {
    background: var(--white-color);
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 4px rgba(0, 0, 0, .04), 0 1px -2px -1px rgba(0, 0, 0, .06);
}

.p-article__thumbWrap {
    position: relative;
    overflow: hidden;
}
.p-article__thumb img {
    width: 100%;
    /* ID:409 ヒーロー写真の縦横比をシンプル版/リッチ版で統一 (3:1 → デザイン準拠) */
    aspect-ratio: 3 / 1;
    object-fit: cover;
    display: block;
}
/* ID:409 シンプル版のヒーロー画像比率もリッチ版と統一 */
.p-articleSimpleIntro__thumb img,
.p-articleSimple .p-article__thumb img {
    aspect-ratio: 3 / 1;
    -o-object-fit: cover;
       object-fit: cover;
    width: 100%;
}

.p-article__thumbCaption {
    position: absolute;
    right: 0;
    bottom: 0;
    min-height: 28px;
    line-height: 28px;
    padding: 0 12px;
    background: rgba(23, 23, 25, 0.4);
    color: #fff;
    font-size: 12px;
    font-style: normal;
    max-width: 100%;
}

/* 電子書籍詳細ページ: 紹介文1（見出し風） */
.p-articleEbook__heading {
    font-family: "MFW-PIshiiGothicStdN-M", "A P-SK IshiiGothic StdN", sans-serif;
    font-weight: 500;
    font-size: 24px;
    line-height: 1.4;
    margin-bottom: 16px;
}

.p-articleEbook__unpublishDate {
    margin: 0;
    font-size: 14px;
    color: var(--text3-color, #666);
}

/* 電子書籍詳細ページ */
.p-articleEbook__divider {
    width: 620px;
    max-width: 100%;
    height: 0;
    border: none;
    border-top: 1px solid #E1E1E1;
    margin: 0;
    margin-bottom: 24px;
}

/* 電子書籍詳細ページ: ペイウォールコンテナ（破線の下） */
.p-articleEbook__paywallContainer {
    margin-top: 24px;
}

/* 電子書籍詳細ページ: ボタン中央配置 */
.p-articleContantEbook .c-content2columnBetween {
    display: flex;
    justify-content: center;
    align-items: center;
}
.p-articleContantEbook .c-contentTealButton {
    display: block;
    margin: 0 auto;
    text-align: center;
}

/* ID:336 「電子書籍を読む」ボタンと「配信終了日」を本文末尾で並列配置。
   c-content2columnBetween の space-between レイアウトに合わせて左右両端配置に統一。 */
.p-articleEbook__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin: 0 auto 24px;
    max-width: 620px;
}
/* p-articleContant スコープ内で .p-articleContantEbook .c-contentTealButton {margin: 0 auto}
   が効いており、flex item の auto margin がボタンを中央に押しやってしまう。
   セレクタ優先度を上げて確実に左端配置になるよう margin: 0 + margin-right: auto を強制する。 */
.p-articleContant .p-articleEbook__actions .c-contentTealButton,
.p-articleContantEbook .p-articleEbook__actions .c-contentTealButton {
    margin: 0;
    margin-right: auto;
    white-space: nowrap;
}
@media screen and (max-width: 1024px) {
    /* SP では「電子書籍を読む」ボタンと配信終了日を左寄せにする。
       親の .p-articleContantEbook .c-content2columnBetween { align-items: center }
       (specificity 0,2,0) が PC・SP 共通で当たるため、SP 側はそれより
       強いセレクタ (0,3,0) で上書きする必要がある。 */
    .p-articleContantEbook .c-content2columnBetween.p-articleEbook__actions {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }
}

@media screen and (max-width: 1024px){
    /* ID:131 リッチ版FV画像 PCは3:1ワイドバナー、SP/タブレットは3:2に切り替え
       (旧: min-height:390px固定で1:1的なクロップになっていた) */
    .p-article__thumb img{
        aspect-ratio: 3 / 2;
        min-height: 0;
        object-fit: cover;
    }

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

    .p-articleOtherCard {
        &:first-child {
            padding-right: 0;
            border-right: none;
            padding-bottom: 20px;
            border-bottom: 1px solid var(--border-color);
        }

        &:nth-child(2) {
            padding-left: 0;
            padding-top: 20px;
        }
    }

    .p-articleContantSimple, .p-articleContantEbook, .p-articleContantRich{
        & .c-contentAuthorIconFlex2{
            flex-direction: column;
            padding-top: 40px;

            & .c-contentAuthorIconListWrap{
                margin-top: 40px;
            }
        }
    }

    
}



@media screen and (max-width: 768px){
    .p-articleIntro__authorWrap.c-authorWrap{
        flex-direction: column;
        align-items: flex-start;
    }

    .p-articleIntro__date{
        text-align: start;
    }
}



/*ーーーーーーーーーーーーーーーーーー
下部　記事一覧
ーーーーーーーーーーーーーーーーーー*/
.l-subMain{
    & .is-first{
        padding-bottom: 40px;
    }

    & .is-second,.is-third{
        padding: 40px 0; 
    }

    & .is-last{
        padding-top: 40px;
    }
}

/* ID:144 記事本文のフォントサイズを明示指定（本番とdev環境の差異解消） */
/* ID:671 font-size 15px→17px / line-height 2→1.5 (Figma仕様に合わせて修正) */
.p-articleContant .field--name-body,
.p-articleContant .text-content {
    font-family: "MFW-PIshiiGothicStdN-R", "Noto Sans JP", sans-serif;
    font-size: 17px;
    line-height: 1.5;
}

/* ID:499 記事本文はゴシック、本文内見出しは明朝に統一 */
.p-articleContant .field--name-body h2,
.p-articleContant .field--name-body h3,
.p-articleContant .text-content h2,
.p-articleContant .text-content h3 {
    font-family: "MFW-PKawaraMinchoProN-M", "Zen Old Mincho", "Hiragino Mincho ProN", "YuMincho", serif;
    font-weight: 500;
    font-size: 24px;
    letter-spacing: 0;
    line-height: 1.4;
    margin: 40px 0;
}

/* ID:412 SP 記事下の各セクション (おすすめ記事/注目特集/おすすめ動画/お知らせ) のスクロールバーとの距離を統一 */
@media (max-width: 1024px) {
    .p-attention,
    .p-ebookSub,
    .p-memo,
    .p-movie,
    .p-news {
        padding-bottom: 32px;
    }
    .p-attention .swiper-scrollbar,
    .p-ebookSub .swiper-scrollbar,
    .p-memo .swiper-scrollbar,
    .p-movie .swiper-scrollbar,
    .p-news .swiper-scrollbar {
        margin-top: 24px;
    }
}

/* ID:348 リッチ版 見出し max-width 900px。
   旧セレクタ `.p-articleRich` は実テンプレートに存在しないため未適用だった。
   実クラス名 `.p-articleContantRich` (本文 wrapper) に修正。 */
.p-articleContantRich .text-content h2,
.p-articleContantRich .text-content h3,
.p-articleContantRich .field--name-body h2,
.p-articleContantRich .field--name-body h3 {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

/* ID:422 動画とブックマーク・SNSボタンの間に余白。
   実テンプレートは <p-articleContantMovie> 内に
   <c-contentAuthorIconFlex>（SNS）→ <p-videoPaywallWrap>（動画）の順なので、
   SNS の下、動画の上に余白を入れる。 */
.p-articleContantMovie .c-contentAuthorIconFlex + .p-videoPaywallWrap,
.p-articleContantMovie .c-contentAuthorIconFlex {
    margin-bottom: 32px;
}
.p-articleContantMovie .p-videoPaywallWrap {
    margin-top: 32px;
}

/* ID:424 プランパネル下罫線の余白を筆者パネル罫線と揃える */
.p-articleMember + hr,
.p-articleMember,
.p-articlePlan {
    margin-bottom: 80px;
}
.p-articlePlan + hr {
    margin-top: 0;
}

/* ID:313 YouTube 埋め込み動画用「YouTubeで観る」ボタン (本文末)。
   電子書籍 (.p-articleEbook__actions) と同じレイアウト: 左にティールボタン、
   右に配信終了日。SP は縦積み。デザイン仕様: ボタン 144x56 / #1F7B82 / #fff。 */
.p-articleMovie__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    /* ID:424 (差戻 5/7) プランパネル↓罫線↑筆者エリア の上下余白を揃える。
       c-contentFooter の padding-top は clamp(2.5rem, 1.863rem + 2.61vw, 5rem)
       (PC 1440px で約 76px) のため、margin-bottom を同じ clamp に合わせて
       罫線を上下対称に。margin-top は本文との既存余白 (32px) を維持。 */
    margin: 32px 0 clamp(2.5rem, 1.863rem + 2.61vw, 5rem);
}
.p-articleMovie__actions .p-articleMovie__youtubeLink {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 144px;
    height: 56px;
    background: var(--accent-color-teal);
    color: var(--white-color);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: opacity 0.15s ease-in-out;
    margin: 0;
    white-space: nowrap;
}
.p-articleMovie__actions .p-articleMovie__youtubeLink:hover {
    opacity: 0.85;
    color: var(--white-color);
}
.p-articleMovie__unpublishDate {
    margin: 0;
    font-size: 14px;
    color: var(--text3-color, #666);
}
@media screen and (max-width: 1024px) {
    .p-articleMovie__actions {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }
    .p-articleMovie__actions .p-articleMovie__youtubeLink {
        width: 100%;
    }
}

/* ID:494 ULIZA 動画 wrapper を 1280px 以下、16:9 比率で表示 (画面いっぱい対策) */
.p-articleContantMovie .uliza-player,
.p-articleContantMovie [data-uliza-player],
.field--name-body .uliza-player {
    max-width: 1280px;
    width: 100%;
    margin: 16px auto;
    aspect-ratio: 16 / 9;
    height: auto !important;
}
.p-articleContantMovie .uliza-player iframe,
.field--name-body .uliza-player iframe {
    width: 100%;
    height: 100%;
}