@charset "UTF-8";

/* ヘッダー ーーーーーーーーーーーーー*/
.l-header__navItem a{
  transition: border-bottom-color 0.15s ease-in-out;
}

.p-subscription a{
    transition: background-color 0.15s ease-in-out;
}

/* FV下テキスト ーーーーーーーーーーーーー*/
.p-animation__listItem a{
  transition: background-color .3s ease-in-out;
}

/* カードレイアウト ーーーーーーーーーーーーー*/
.c-cardAnimation a,.c-cardAnimationTitle span,
.p-serialCard > a,.p-serialCard__thumb,.p-serialCard__title span{
    transition: 0.15s ease-in-out;
}

/* 特集 ーーーーーーーーーーーーー*/
.c-featureLink,
.c-featureLinkTitle span,
.p-originalEpisode__link,
.p-originalEpisode__title span,
.p-insight__title span,
.p-insightCard__title span,
.p-foresightCard__title span{
    transition: border-bottom-color 0.15s ease-in-out;
}

/* link ーーーーーーーーーーーーー*/
.c-headingLink-teal,
.c-headingLink-blue,
.p-serialCard__ctaLink,
.p-media__link,
.p-ebook__link,
.c-titleLink{
    transition: border-bottom-color 0.15s ease-in-out;
}

/* button ーーーーーーーーーーーーー*/
.c-buttonOutline-yellow,
.c-buttonOutline-teal,
.c-buttonOutline-red,
.c-buttonOutline-blue,
.c-buttonOutline-black,
.c-buttonFill-yellow,
.c-buttonFill-white,
.c-buttonFill-teal,
.c-buttonFill-red,
.c-buttonFill-blue,
.c-buttonFill-black{
    transition: 0.15s ease-in-out;
}

/* other ーーーーーーーーーーーーー*/
.p-memberPlan__link{
    transition: opacity 0.15s ease-in-out;
}

@media (any-hover: hover) {
    /* ID:160/437/439 重複下線を解消するため、span ベース hover を全廃し、
       text-decoration ベースに一本化（下のブロック参照）。 */
    .l-header__navItem a:hover {
        border-bottom-color: var(--text-color);
    }

    .p-subscription a:hover{
        background-color: color-mix(in srgb, var(--bg-color) 84%, #171719 16%);
    }

    .p-animation__listItem.c-hoverTeal a:hover{
        background-color: var(--accent-color-teal);
        color: var(--white-color);
    }

    .p-animation__listItem.c-hoverYellow a:hover{
        background-color: var(--accent-color-yellow);
    }

    .p-animation__listItem.c-hoverRed a:hover{
        background-color: var(--accent-color-red);
        color: var(--white-color);
    }

    .p-animation__listItem.c-hoverNavy a:hover{
        background-color: var(--accent-color-blue);
        color: var(--white-color);
    }

    .p-animation__listItem.c-hoverPurple a:hover{
        background-color: var(--accent-color-purple);
        color: var(--white-color);
    }

    .p-animation__listItem.c-hoverOrange a:hover{
        background-color: var(--accent-color-orange);
        color: var(--white-color);
    }

    .c-featureLink:hover .c-featureLinkTitle span,
    .p-originalEpisode__link:hover .p-originalEpisode__title span {
        border-bottom-color: var(--white-color);
    }

    /* インサイトは明るい背景上のため、テキスト色で hover 下線を表示 */
    .p-insight .c-featureLink:hover .c-featureLinkTitle span {
        border-bottom-color: var(--text-color);
    }

    .p-serialCard > a:hover .p-serialCard__thumb{
        box-shadow:var(--box-shadow-animation);
    }


    /* link ーーーーーーーーーーーーー*/
    /* ID:429 (5/7差戻) hover 時の下線が出ない問題への対応。
       border-bottom-color のみでは default が transparent から色変するだけで、
       他 CSS で border-bottom 自体が消されると下線が出ない。
       border shorthand で太さ・スタイル・色を明示し、確実に下線を表示する。 */
    .c-headingLink-teal:hover,
    .p-serialCard__ctaLink:hover,
    .p-media__link:hover,
    .p-ebook__link:hover{
        border-bottom: 1px solid var(--accent-color-teal);
    }

    .c-headingLink-blue:hover,
    .p-international__section--series .p-serialCard__ctaLink:hover{
        border-bottom: 1px solid var(--accent-color-blue);
    }

    /* ID:382/384/386/392/429/437/439/444 — リスト系ページのタイトルに hover 下線を追加。
       既存 c-articleCard では <span> 下線パターンが適用されているが、
       p-insight / p-documentary / p-internationalCategory / p-weekly-shinchoCard /
       p-serialCard / p-seriesListCard / p-mediaCard / p-author など
       一覧カード系の <h3> 直下テキストには hover 効果が無かった。
       text-decoration を使って <span> 不要で全カードに統一適用する。*/
    /* ID:160/382/384/386/392/429/437/439/444 — 一覧カードのタイトル hover 下線を text-decoration で統一。
       <span> 不要、c-titleLink (border-bottom) との併用も避ける（2本下線になるため）。
       c-cardAnimationTitle はトップ各セクションで使われる共通クラスで、これを text-decoration の対象に
       入れることで p-newsCard/p-latestCard/p-ebookCard/p-memoCard/p-categoryCard__listTitle/p-serialEpisode を一括カバー。

       ID:160 (5/8 再差戻) c-featureLinkTitle (TOP「ドキュメンタリー」「インサイト」/
       カテゴリ最上部の大きいタイトル) は span 内で border-bottom を hover 表示する
       既存実装と重なって 2 本下線になっていたため、:not(.c-featureLinkTitle) で限定。 */
    .p-insight__title:not(.c-featureLinkTitle),
    .p-documentary__title:not(.c-featureLinkTitle),
    .p-internationalCategory__title:not(.c-featureLinkTitle),
    .p-weekly-shinchoCard__title:not(.c-featureLinkTitle),
    .p-serialCard__title:not(.c-featureLinkTitle),
    .p-seriesListCard__title:not(.c-featureLinkTitle),
    .p-mediaCard__title:not(.c-featureLinkTitle),
    .p-author__name:not(.c-featureLinkTitle),
    .p-authorPage__name:not(.c-featureLinkTitle),
    .p-foresightCard__title:not(.c-featureLinkTitle),
    .p-insightCard__title:not(.c-featureLinkTitle),
    .p-latestCard__title:not(.c-featureLinkTitle),
    .p-series-other .p-attentionCard__title:not(.c-featureLinkTitle),
    .c-cardAnimationTitle:not(.c-featureLinkTitle) {
        text-decoration: underline 1px transparent;
        text-underline-offset: 4px;
        transition: text-decoration-color 0.15s ease-in-out;
    }
    a:hover .p-insight__title:not(.c-featureLinkTitle),
    a:hover .p-documentary__title:not(.c-featureLinkTitle),
    a:hover .p-internationalCategory__title:not(.c-featureLinkTitle),
    a:hover .p-weekly-shinchoCard__title:not(.c-featureLinkTitle),
    a:hover .p-serialCard__title:not(.c-featureLinkTitle),
    a:hover .p-seriesListCard__title:not(.c-featureLinkTitle),
    a:hover .p-mediaCard__title:not(.c-featureLinkTitle),
    a:hover .p-author__name:not(.c-featureLinkTitle),
    a:hover .p-authorPage__name:not(.c-featureLinkTitle),
    a:hover .p-foresightCard__title:not(.c-featureLinkTitle),
    a:hover .p-insightCard__title:not(.c-featureLinkTitle),
    a:hover .p-latestCard__title:not(.c-featureLinkTitle),
    .p-series-other a:hover .p-attentionCard__title:not(.c-featureLinkTitle),
    a:hover .c-cardAnimationTitle:not(.c-featureLinkTitle) {
        text-decoration-color: currentColor;
    }
    /* ID:160 連載カードの「連載を見る」CTA は border-bottom (teal) のみで一本化。
       text-decoration を併用すると2本下線になるため削除。 */

    .c-titleLink:hover{
        border-bottom-color: var(--text-color);
    }

    /* button ーーーーーーーーーーーーー*/
    /* outline */
    .c-buttonOutline-yellow:hover{
        border-color: color-mix(in srgb, var(--accent-color-yellow) 84%, #171719 16%);
        color: color-mix(in srgb, var(--accent-color-yellow) 84%, #171719 16%);
    }

    .c-buttonOutline-teal:hover{
        border-color: color-mix(in srgb, var(--accent-color-teal) 84%, #171719 16%);
        color: color-mix(in srgb, var(--accent-color-teal) 84%, #171719 16%);
    }

    .c-buttonOutline-red:hover{
        border-color: color-mix(in srgb, var(--accent-color-red) 84%, #171719 16%);
        color: color-mix(in srgb, var(--accent-color-red) 84%, #171719 16%);
    }

    .c-buttonOutline-blue:hover{
        border-color: color-mix(in srgb, var(--accent-color-blue) 84%, #171719 16%);
        color: color-mix(in srgb, var(--accent-color-blue) 84%, #171719 16%);
    }

    .c-buttonOutline-black:hover{
        border-color: color-mix(in srgb, var(--accent-color-black) 84%, #FFFFFF 16%);
        color: color-mix(in srgb, var(--accent-color-black) 84%, #FFFFFF 16%);
    }

    /* Fill */
    .c-buttonFill-yellow:hover{
        background-color: color-mix(in srgb, var(--accent-color-yellow) 84%, #171719 16%);
    }

    .c-buttonFill-white:hover{
        background-color: color-mix(in srgb, var(--white-color) 84%, #171719 16%);
    }

    .c-buttonFill-teal:hover{
        background-color: color-mix(in srgb, var(--accent-color-teal) 84%, #171719 16%);
    }

    .c-buttonFill-red:hover{
        background-color: color-mix(in srgb, var(--accent-color-red) 84%, #171719 16%);
    }

    .c-buttonFill-blue:hover{
        background-color: color-mix(in srgb, var(--accent-color-blue) 84%, #171719 16%);
    }

    .c-buttonFill-black:hover{
        background-color: color-mix(in srgb, var(--accent-color-black) 84%, #FFFFFF 16%);
    }

    .p-memberPlan__link:hover{
        opacity: 0.8;
    }
}