@charset "utf-8";

/* ===== レイアウト ===== */
.column-layout {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

.column-main {
    flex: 1 1 auto;
    min-width: 0;
}

.column-side {
    flex: 0 0 280px;
}

/* ===== カテゴリタブ ===== */
.column-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 32px;
    padding: 0;
    list-style: none;
}

.column-tabs li a {
    display: block;
    padding: 8px 16px;
    border: 1px solid #ccc;
    border-radius: 20px;
    font-size: 14px;
    text-decoration: none;
}

.column-tabs li.active a {
    background: #3e65aa;
    border-color: #3e65aa;
    color: #fff;
}

/* ===== カードグリッド ===== */
.column-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
}

.column-card_link {
    display: block;
    height: 100%;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    overflow: hidden;
    color: inherit;
    transition: box-shadow .2s;
}

/*
 * utility.css の a:link { text-decoration: underline }（詳細度 0,1,1）に
 * .column-card_link（0,1,0）だけでは負けて下線が出てしまう。
 * :link / :visited を明示して詳細度で勝たせる。
 */
.column-card_link:link,
.column-card_link:visited {
    text-decoration: none;
}

.column-card_link:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
}

.column-card_thumb {
    aspect-ratio: 16 / 9;
    background: #f2f2f2;
}

.column-card_thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.column-card_body {
    padding: 16px;
}

.column-card_cat {
    display: inline-block;
    margin-bottom: 8px;
    padding: 2px 10px;
    border-radius: 3px;
    background: #6ac6c9;
    color: #fff;
    font-size: 12px;
}

.column-card_title {
    margin: 0 0 8px;
    font-size: 18px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.column-card_date {
    margin: 0;
    color: #888;
    font-size: 13px;
}

/* ===== サイドカラム（Phase 1 は枠のみ） ===== */
.column-side_block {
    margin-bottom: 24px;
    padding: 16px;
    border: 1px dashed #ccc;
    border-radius: 8px;
    min-height: 160px;
}

.column-side_label {
    margin: 0;
    font-weight: bold;
    font-size: 15px;
}

/* ===== 詳細ページ ===== */
.column-detail_meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    margin-bottom: 16px;
    font-size: 14px;
    color: #666;
}

.column-detail_thumb {
    margin-bottom: 32px;
}

/*
 * アイキャッチの表示幅。
 *
 * 入稿画像の実サイズは表示サイズに影響しない。the_post_thumbnail('large')
 * が返す画像を、ここで指定した幅まで縮めて中央に置いている。
 * 本文カラムは 780px（.container 1100 − .column-side 280 − gap 40）あるが、
 * 全幅だと記事の顔として大きすぎるという指摘があり 680px に制限した
 * （依頼主提示の赤枠の実測値、2026-09-02）。
 *
 * 記事ごとに大きさを変えたい場合は width: 100% を width: auto に変えると
 * 「680px を上限に、入稿画像の実サイズで表示」に切り替わる。ただし記事に
 * よって顔の大きさが揃わなくなるため、既定では一律にしている。
 */
.column-detail_thumb img {
    width: 100%;
    max-width: 680px;
    height: auto;
    display: block;
    margin: 0 auto;
}

/*
 * 記事詳細のタイトル帯の見出し。
 * テーマの .ttl_page h1 と同じ見た目を h1 以外の要素で再現する。
 * 記事タイトルを h1 として使うため、帯側では h1 を使えない。
 */
.single-column .ttl_page_label {
    margin: 0;
    padding-top: 150px;
    font-family: "IBM Plex Sans JP", sans-serif;
    font-size: 45px;
    font-weight: 500;
    color: #fff;
}

/*
 * ===== 記事本文のタイポグラフィ =====
 * default.css のグローバルリセット（h1-h6 の font-size:100%/font-weight:normal、
 * li の list-style:none、全要素の margin/padding:0、body の line-height:1）を
 * 打ち返す。既存ページも各ページ用 CSS で同じことをしている。
 * これが無いと h2 と h3 が区別できず、段落が全部くっつき、
 * 箇条書きが箇条書きに見えない。
 */
.column-detail_title {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.5;
    margin: 0 0 24px;
}

.column-detail_body {
    line-height: 1.8;
}

.column-detail_body h2 {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.4;
    margin: 48px 0 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid #3e65aa;
}

.column-detail_body h3 {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.5;
    margin: 32px 0 12px;
}

.column-detail_body h4 {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.6;
    margin: 24px 0 8px;
}

.column-detail_body p {
    margin: 0 0 1.5em;
}

.column-detail_body ul {
    list-style: disc;
    padding-left: 1.5em;
    margin: 0 0 1.5em;
}

.column-detail_body ol {
    list-style: decimal;
    padding-left: 1.5em;
    margin: 0 0 1.5em;
}

/* li { list-style: none } を打ち返すため li にも明示指定が要る */
.column-detail_body li {
    list-style: inherit;
    margin-bottom: .5em;
}

.column-detail_body a {
    color: #3e65aa;
}

.column-detail_body blockquote {
    margin: 0 0 1.5em;
    padding: 16px 20px;
    border-left: 4px solid #ddd;
    background: #f7f7f7;
}

.column-detail_body strong {
    font-weight: 700;
}

.column-detail_body img {
    max-width: 100%;
    height: auto;
}

.column-detail_body table {
    width: 100%;
    border-collapse: collapse;
    margin: 24px 0;
}

.column-detail_body th,
.column-detail_body td {
    border: 1px solid #ddd;
    padding: 10px 12px;
}

/*
 * ===== 記事末のタグ =====
 * 見た目は .column-tabs のピルを踏襲しつつ、一段小さく・弱い色にしている。
 * 直後に CTA ボタンが来るため、同じ強さだと押しどころが分からなくなる。
 *
 * リンク色の指定に :link, :visited を付けているのは、utility.css の
 * `a:link`（詳細度 0,1,1）に負けないため。`.column-tags_link` 単体は
 * 0,1,0 で負ける。カードのリンクで同じ問題を踏んでいる。
 */
.column-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 32px;
    padding: 0;
    list-style: none;
}

.column-tags_item {
    margin: 0;
}

.column-tags_link:link,
.column-tags_link:visited {
    display: block;
    padding: 5px 14px;
    border: 1px solid #e5e5e5;
    border-radius: 20px;
    background: #f7f7f7;
    color: #666;
    font-size: 13px;
    text-decoration: none;
}

.column-tags_link:hover {
    border-color: #3e65aa;
    color: #3e65aa;
}

/*
 * ===== FAQ アコーディオン =====
 * 開閉に JS を使わず details/summary を使う。既定の三角マーカーを消して
 * 自前の ＋／− を ::after で置く。連続する .column-faq は罫線で
 * 繋げて 1 つの群に見せる。
 */
.column-faq {
    border: 1px solid #e5e5e5;
    border-top: none;
}

.column-faq:first-of-type {
    border-top: 1px solid #e5e5e5;
    border-radius: 8px 8px 0 0;
    overflow: hidden;
}

.column-faq:last-of-type {
    border-radius: 0 0 8px 8px;
    overflow: hidden;
}

.column-faq_q {
    position: relative;
    padding: 16px 48px 16px 20px;
    font-weight: 700;
    line-height: 1.6;
    cursor: pointer;
    list-style: none;
}

.column-faq_q::-webkit-details-marker {
    display: none;
}

.column-faq_q::after {
    content: "+";
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    color: #3e65aa;
}

.column-faq[open] .column-faq_q::after {
    content: "\2212";
}

.column-faq_a {
    padding: 0 20px 20px;
    line-height: 1.8;
}

.column-faq_a p {
    margin: 0 0 1.5em;
}

.column-faq_a p:last-child {
    margin-bottom: 0;
}

/* ===== 関連記事 ===== */
.column-related {
    margin-top: 50px;
}

.column-related_title {
    margin: 0 0 24px;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.5;
}

.column-related_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* ===== CTA 出し分け ===== */
.column-cta_banner {
    margin-top: 50px;
    text-align: center;
}

.column-cta_banner img {
    max-width: 100%;
    height: auto;
    display: inline-block;
}

.cm-btn.column-cta {
    gap: 20px;
    flex-wrap: wrap;
}

/* ===== スマートフォン ===== */
@media screen and (max-width: 767px) {
    .single-column .ttl_page_label {
        padding-top: 100px;
        font-size: 24px;
    }

    .column-layout {
        display: block;
    }

    .column-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .column-side {
        margin-top: 40px;
    }

    .column-detail_title {
        font-size: 24px;
    }

    .column-detail_body h2 {
        font-size: 20px;
        margin: 36px 0 12px;
    }

    .column-detail_body h3 {
        font-size: 18px;
        margin: 24px 0 10px;
    }

    .column-related_grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

/*
 * ===== SNS シェア =====
 * アイコンはインライン SVG（currentColor で色を継ぐ）。
 * 外部の SDK やアイコンフォントは読み込まない。
 */
.column-share {
    margin: 48px 0;
    text-align: center;
}

.column-share_label {
    margin: 0 0 16px;
    font-size: 14px;
    font-weight: 700;
    color: #666;
}

.column-share_list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.column-share_btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 4px;
    color: #fff;
    font-size: 14px;
    line-height: 1;
    transition: opacity .2s;
}

/* utility.css の a:link に詳細度で勝たせる */
.column-share_btn:link,
.column-share_btn:visited {
    color: #fff;
    text-decoration: none;
}

.column-share_btn:hover {
    opacity: .8;
}

.column-share_btn.is-x {
    background: #000;
}

.column-share_btn.is-facebook {
    background: #1877f2;
}

.column-share_btn.is-hatena {
    background: #00a4de;
}

.column-share_icon {
    width: 16px;
    height: 16px;
    fill: currentColor;
    flex-shrink: 0;
}

@media screen and (max-width: 767px) {
    .column-share {
        margin: 32px 0;
    }

    .column-share_btn {
        padding: 10px 14px;
        font-size: 13px;
    }
}

/*
 * CTA の下余白。
 * 記事終盤の CTA は直後に製品紹介ブロックが続くため、余白が無いと
 * ボタンとブロックが密着する。記事末の CTA は後続の .column-share が
 * 同じ 48px の上余白を持つが、隣接マージンは相殺されるため二重にならない。
 */
.column-main .column-cta {
    margin-bottom: 48px;
}

@media screen and (max-width: 767px) {
    .column-main .column-cta {
        margin-bottom: 32px;
    }
}

/*
 * ===== サイドカラムの中身 =====
 * Phase 1 では点線の空枠だったものを実装に置き換えた。
 * default.css の li { list-style: none } はここでは打ち返さず、
 * 番号を ::before で自前に描いている（幅の狭いカラムで
 * ブラウザ既定のマーカー位置だと収まりが悪いため）。
 */
.column-side_block {
    margin-bottom: 24px;
    padding: 20px;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
}

.column-side_label {
    margin: 0 0 16px;
    font-size: 15px;
    font-weight: 700;
}

.column-pop {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: sd-pop;
}

.column-pop_item {
    counter-increment: sd-pop;
}

.column-pop_item + .column-pop_item {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #eee;
}

.column-pop_link {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    position: relative;
}

.column-pop_link:link,
.column-pop_link:visited {
    color: inherit;
    text-decoration: none;
}

.column-pop_link:hover .column-pop_title {
    color: #3e65aa;
}

.column-pop_thumb {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    border-radius: 4px;
    overflow: hidden;
    background: #f2f2f2;
    position: relative;
}

.column-pop_thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 順位はサムネイル左上に重ねる */
.column-pop_thumb::after {
    content: counter(sd-pop);
    position: absolute;
    top: 0;
    left: 0;
    min-width: 18px;
    padding: 0 4px;
    background: #3e65aa;
    color: #fff;
    font-size: 11px;
    line-height: 18px;
    text-align: center;
    border-radius: 4px 0 4px 0;
}

.column-pop_body {
    min-width: 0;
}

.column-pop_title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    font-size: 13px;
    line-height: 1.5;
    transition: color .2s;
}

.column-pop_date {
    display: block;
    margin-top: 4px;
    color: #888;
    font-size: 11px;
}

/*
 * 資料DL枠の見出し。
 *
 * 「編集部おすすめ」と同じ .column-side_label を使っているが、
 * こちらは 26 文字の文章で 280px 幅では 3 行になる。ラベルの既定値
 * （15px / line-height 既定）のままだと行が詰まって読みにくいので、
 * 少しだけ小さくして行間を開けている。
 */
.column-side_dl_lead {
    font-size: 14px;
    line-height: 1.6;
}

.column-side_dl_text {
    margin: 0 0 12px;
    font-size: 13px;
    line-height: 1.7;
    color: #555;
}

.column-side_dl_btn {
    display: block;
    padding: 10px;
    border-radius: 4px;
    background: #3caed8;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
}

.column-side_dl_btn:link,
.column-side_dl_btn:visited {
    color: #fff;
    text-decoration: none;
}

.column-side_dl_btn:hover {
    opacity: .85;
}

/* ===== 資料DL枠のスクロール追従（PC のみ） ===== */
/*
 * 記事を読み進めても資料DLボタンが視界に残るようにする（2026-09-02 依頼）。
 *
 * position: sticky を足すだけでは動かない。次の 3 つが揃って初めて効く。
 *
 * 1. #wrapper の overflow: hidden（base.css）
 *    overflow: hidden はスクロールコンテナを作るため、その内側の sticky は
 *    ビューポートではなく #wrapper を基準にしてしまう。#wrapper 自体は
 *    スクロールしないので、結果として追従がまったく起きない。
 *    overflow: clip はクリップだけを行いスクロールコンテナを作らないので、
 *    横はみ出しを隠すという本来の役割を保ったまま sticky を有効にできる。
 *    影響範囲を絞るためコラム詳細だけに当てている。
 *
 * 2. .column-layout の align-items
 *    sticky が動ける範囲は親（.column-side）の高さまで。既定の flex-start
 *    ではサイドは中身の高さ（約 650px）しかなく、記事の途中で追従が止まって
 *    そのまま流れていく。stretch にしてサイドを本文と同じ高さに伸ばす。
 *    サイドの枠線・背景は中の .column-side_block が持っているので、
 *    伸ばしても見た目は変わらない。
 *
 * 3. top のオフセット
 *    スクロールすると #cm-header に .fixed が付いて固定ヘッダーになる
 *    （base.css の #cm-header.fixed）。高さは約 100px なので、top: 0 だと
 *    ヘッダーの下に潜り込む。100px + 余白 20px を取っている。
 *
 * サイドカラム全体ではなく資料DL枠だけを sticky にしているのは、
 * 編集部おすすめ（最大 5 件・サムネ付き）と合わせると 600px を超え、
 * 画面高 768px のノート PC ではボタンが画面外に出てしまうため。
 *
 * スマートフォンは 1 カラムでサイドが記事の下に回る（下の SP 用指定）ため
 * 対象外。SP でも常時表示したい場合は画面下部固定バーなど別の実装が要る。
 */
@media print, screen and (min-width: 768px) {
    .single-column #wrapper {
        overflow: clip;
    }

    .single-column .column-layout {
        align-items: stretch;
    }

    .single-column .column-side_dl {
        position: sticky;
        top: 120px;
    }
}