@charset "UTF-8";
/* /media/（メディア・インフルエンサー向け）専用。column.css の後に読み込む。
   本文・表・FAQ・目次などの体裁は column.css と readability.css をそのまま使うため、
   テンプレートの <main> には id="column" を付けている（この2ファイルの161ルールが
   すべて #column 起点のため。複製すると二重管理になる）。
   ここにはメディア向けだけの追加分を書く。2026-10-17 */

/* 対象読者の帯（記事上） */
#column .media-audience {
    display: inline-block;
    margin: 0 0 14px;
    padding: 6px 14px;
    border-radius: 999px;
    background: #e2fffb;
    border: 1px solid #9fe8dd;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.6;
    color: #00707f;
}

/* 記事内・記事末のCTAはボタン2つ並び */
#column .media-cta-btns {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

/* 「広告主の方はこちら」の小さいテキストリンク */
#column .media-cross-link {
    margin: 18px 0 0;
    text-align: center;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 14px;
    line-height: 1.7;
}

#column .media-cross-link a {
    color: #00707f;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ハブの入口カード3つ */
#column .media-entry {
    list-style: none;
    margin: 0 0 56px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

#column .media-entry-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    min-height: 104px;
    padding: 22px 24px;
    background: #fff;
    border: 2px solid #00c2de;
    border-radius: 14px;
    font-family: 'Noto Sans JP', sans-serif;
    color: #222;
    transition: background 0.2s, color 0.2s;
}

#column .media-entry-card:hover {
    background: #00c2de;
    color: #fff;
}

#column .media-entry-card-title {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.6;
}

#column .media-entry-card-text {
    font-size: 13px;
    font-weight: 400;
    line-height: 1.7;
    color: inherit;
    opacity: 0.85;
}

/* カードのカテゴリラベル（column.css の cat-* の代わり） */
#column .column-card.cat-media .column-card-tag {
    background: #00707f;
    color: #fff;
}

@media screen and (max-width: 767px) {
    #column .media-entry {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-bottom: 36px;
    }

    #column .media-entry-card {
        min-height: 0;
        padding: 16px 18px;
    }

    #column .media-entry-card-title {
        font-size: 16px;
    }

    #column .media-audience {
        font-size: 12px;
        padding: 5px 12px;
    }

    #column .media-cta-btns {
        flex-direction: column;
    }
}

/* 語の途中で折り返させたくない箇所 */
#column .media-nw {
    white-space: nowrap;
}

/* 記事末CTAバンドは濃い青背景。その上の「広告主の方はこちら」は白にする
   （#00707f のままだと背景とのコントラストが足りない） */
#column .column-end-cta .media-cross-link a {
    color: #fff;
}