/* ==========================================================================
   読みやすさ改善（READABILITY_BRIEF）— 2026-10-01
   コラム・業種・3LPのページでだけ読み込む（header-service.php の wp_head() 直後）。既存CSSは編集しない。
   文言・HTMLは変えず、改行・折り返し・余白だけを整える。
   ========================================================================== */

/* ---- 4-1・4-2：タイトルのまとまり（template-parts/column-title.php が出力） ---- */
.column-title-seg { display: inline-block; max-width: 100%; }
/* 「｜」は画面に出さず、読み上げ・コピー用に残す */
.column-title-sep {
    position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---- 3-1：見出しは行の長さをそろえる ---- */
#column .column-title,
#column .column-content h2,
#column .column-content h3,
#column .column-card-title,
#column .column-related-title,
#column .column-end-cta-title,
#industry h1,
#industry .industry-content h2,
#industry .industry-content h3,
#industry .column-card-title,
main h1,
main h2,
main h3,
.lpadd-card-title,
.media-card-title,
.characteristic-card-title { text-wrap: balance; word-break: auto-phrase; overflow-wrap: anywhere; }
/* word-break: auto-phrase は Chrome / Edge で文節単位の改行になる（Safari は未対応のため balance のみ効く）。
   1つの文節が幅に入りきらない場合（例「インフルエンサーアフィリエイト」を375pxで表示）だけ、overflow-wrap: anywhere で途中で折ってはみ出しを防ぐ */

/* 記事の h1：PCで2つ目のまとまり（約24文字）が1行に収まるよう幅を広げる（従来 860px） */
#column .column-hero .visual-content { max-width: 960px; }

/* 3LP「特徴」カードの見出し：赤字部分（例「記事制作 0円‼︎」）は途中で折らない */
.characteristic-card-title .text-red { white-space: nowrap; }

/* ---- 3-2：本文は段落末の1〜2文字落ちを防ぐ ---- */
#column .column-content p,
#column .column-content li,
#column .column-faq-a p,
#column .column-content th,
#column .column-content td,
#column .column-judge p,
#industry .industry-content p,
#industry .industry-content li,
.section-lpadd p { text-wrap: pretty; }

/* ---- 3-3：表の見出しセルは折らない（SPは従来どおり .column-table-wrap で横スクロール） ---- */
#column .column-content table th { white-space: nowrap; }
/* 8文字以下の短いセル（single-column.php が表示時に .column-cell-short を付与。本文は変更しない）は折らない（V3・2026-10-02） */
#column .column-content table td.column-cell-short { white-space: nowrap; }

/* ---- 4-3：コラムカードの日付と読了時間の間に余白（column.css の span + span が <time> に当たらないため） ---- */
#column .column-card-meta time + span { margin-left: 12px; }

/* ---- SPの2列以下の表は画面幅に収める（横スクロールさせない）— 2026-10-02 ----
   column.css の SP 指定（.column-table-wrap table { min-width: 560px }）を、3列目を持たない表に限って外す。
   2列の表では短いセルの改行禁止も外す。3列以上の表は従来どおり横スクロール */
@media screen and (max-width: 767px) {
    #column .column-content .column-table-wrap table:not(:has(tr > :nth-child(3))) { min-width: 0; width: 100%; }
    #column .column-content .column-table-wrap table:not(:has(tr > :nth-child(3))) td.column-cell-short { white-space: normal; }
}

/* ---- 2026-10-02：タイトルのまとまりは改行候補（<wbr>：助詞・区切り記号の直後）でだけ折る（Safari でも語の途中で折らない）----
   幅に入りきらない場合は親の overflow-wrap: anywhere で折る */
.column-title-seg { word-break: keep-all; }

/* ---- 2026-10-02：表の金額・数値＋単位（single-column.php が .column-num で囲む）は折らない ---- */
#column .column-content table .column-num { white-space: nowrap; }

/* ---- 2026-10-02：SPの2列の表でも、1列目（項目名）の短いセルは折らない（2列目が長い表で1列目が極端に細くなるのを防ぐ） ---- */
@media screen and (max-width: 767px) {
    #column .column-content .column-table-wrap table:not(:has(tr > :nth-child(3))) td.column-cell-short:first-child { white-space: nowrap; }
}

/* ---- 2026-10-02：320px 幅の横はみ出し（FINISH_BRIEF B）。375px 以上は変えない ----
   原因1：フッターの会社情報（design.css の SP 指定 width: 335px）
   原因2：フッターのナビ（design.css の PC 用 transform / margin-left が SP でも残り、2列目がはみ出す）
   原因3：3LP「選ばれる理由」カードの本文（design.css の width: 288px） */
@media screen and (max-width: 374px) {
    .footer-new-company { width: auto; right: 20px; }
    .footer-company-address { word-break: keep-all; }
    .footer-new-nav { left: 20px; right: 20px; transform: none; margin-left: 0; gap: 16px; justify-content: space-between; }
    .benefit-card-text p { width: auto; }
}

/* ---- 2026-10-02：SP（767px 以下）のフッターナビの位置 ----
   design.css の PC 用の位置指定（transform: translateX(-50%)・margin-left）が SP でも残り、ナビが左端（20px）からずれる。
   Safari では幅の計算（gap: 24%）との組み合わせで左端が切れることがあるため、SP では外して会社情報と同じ左 20px にそろえる */
@media screen and (max-width: 767px) {
    .footer-new-nav { transform: none; margin-left: 0; }
}

/* ---- 2026-10-03：コラム一覧の紹介文（.column-lead）の改行 ----
   archive-column.php で「、」「・」と助詞（の・を・に など。直後が漢字・カタカナ・英数字の場合）の直後に改行候補（<wbr>）を入れ、その位置でだけ折る（keep-all）。行の長さは balance でそろえる。
   1つのまとまりが幅に入りきらない場合だけ overflow-wrap: anywhere で折る。全幅に適用（旧：767px 以下だけ text-wrap: pretty） */
#column .column-lead { word-break: keep-all; overflow-wrap: anywhere; text-wrap: balance; }

/* ---- 2026-10-03：目次の h2 が10個以上（番号が「10.」以上になる）の目次だけ、番号の幅を 12px 広げる ----
   column.css の番号の幅（padding-left: 1.6em）では2桁の番号が見出しの文字に重なるため。h3 も同じだけ右へずらして揃える。
   h2 が9個以下の目次は変えない */
#column .column-content .column-toc ol:has(> li:nth-child(10 of .column-toc-h2)) > li.column-toc-h2 { padding-left: calc(1.6em + 12px); }
#column .column-content .column-toc ol:has(> li:nth-child(10 of .column-toc-h2)) > li.column-toc-h3 { margin-left: calc(1.6em + 12px); }

/* ---- 2026-10-03：SPの2列の表で、最終列（2列目）の短いセルも折らない ----
   1列目が長文・2列目が短い項目名の表（例：記事9 表6「提携メディアの質」）で、Safari が語の途中で折るため。
   1列目の短いセルは上の指定（:first-child）で折らない。3列以上の表は従来どおり横スクロール */
@media screen and (max-width: 767px) {
    #column .column-content .column-table-wrap table:not(:has(tr > :nth-child(3))) td.column-cell-short:last-child { white-space: nowrap; }
}

/* ---- 2026-10-03：表の長いセル（single-column.php が表示時に <wbr> と .column-cell-wbr を付与）の改行（課題リスト5） ----
   Chrome / Edge は文節単位（auto-phrase）。auto-phrase 未対応の Safari は改行候補（<wbr>）の位置でだけ折る（keep-all）。
   1つのまとまりが幅に入りきらない場合だけ overflow-wrap: anywhere で折る */
#column .column-content table td.column-cell-wbr { word-break: auto-phrase; overflow-wrap: anywhere; }
@supports not (word-break: auto-phrase) {
    #column .column-content table td.column-cell-wbr { word-break: keep-all; }
}

/* ========================================================================
   SEO_W1_BRIEF（2026-10-05）
   ======================================================================== */

/* §2 ADアフィリエイトLPのh1：語の途中で改行させず、幅に応じて折り返す */
.visual-title .visual-title-seg { display: inline-block; }
/* 「（ADアフィリエイト）」が1行に収まる文字サイズに調整（各ブレークポイントで実測） */
@media screen and (max-width: 767px) { .visual-title-adaf { font-size: 29px; } }
@media screen and (min-width: 768px) and (max-width: 1023px) { .visual-title-adaf { font-size: 32px; } }
@media screen and (min-width: 1024px) and (max-width: 1199px) { .visual-title-adaf { font-size: 42px; } }

/* §4 3LP相互リンク：既存の関連コラムブロックの見た目を流用 */
.section-sibling-lp { padding-bottom: 0; }
.section-sibling-lp + .section-related { padding-top: 40px; }
.section-sibling-lp .lp-related-title { font-size: 28px; }
.lp-sibling-list { grid-template-columns: 1fr 1fr; }
@media screen and (max-width: 767px) {
    .section-sibling-lp + .section-related { padding-top: 24px; }
    .section-sibling-lp .lp-related-title { font-size: 20px; }
    .lp-sibling-list { grid-template-columns: 1fr; }
}

/* §5 コラム記事の監修者欄 */
.column-supervisor {
    max-width: 800px;
    margin: 0 auto 48px;
    padding: 16px 20px;
    border: 1px solid #dddddd;
    border-radius: 8px;
    background: #ffffff;
}
.column-supervisor-name {
    margin: 0 0 6px;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.6;
    color: #222222;
}
.column-supervisor-text {
    margin: 0;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 13px;
    line-height: 1.8;
    color: #555555;
}
@media screen and (max-width: 767px) {
    .column-supervisor { margin: 0 20px 32px; padding: 14px 16px; }
    .column-supervisor-name { font-size: 13px; }
    .column-supervisor-text { font-size: 12px; }
}

/* ========================================================================
   SEO_W2_BRIEF B：代表プロフィール（/profile/）
   ======================================================================== */
#profile .profile-hero { padding: 48px 20px; }
#profile .profile-hero .visual-title { font-size: 34px; }
#profile .profile-breadcrumb {
    font-family: 'Noto Sans JP', sans-serif; font-size: 13px; line-height: 1.8;
    color: #555555; margin: 0 0 16px;
}
#profile .profile-breadcrumb a { color: #222222; text-decoration: none; }
#profile .profile-breadcrumb a:hover { text-decoration: underline; }
#profile .profile-breadcrumb-sep { margin: 0 8px; color: #999999; }

#profile .profile-section { background: #ffffff; padding: 64px 0 80px; }
#profile .profile-container { max-width: 800px; margin: 0 auto; padding: 0 40px; }
#profile .profile-content p {
    font-family: 'Noto Sans JP', sans-serif; font-size: 16px; line-height: 2;
    color: #222222; margin: 0 0 24px;
}
#profile .profile-content .profile-name { font-size: 22px; font-weight: 700; margin-bottom: 4px; }
#profile .profile-content .profile-role { font-size: 15px; color: #555555; margin-bottom: 32px; }
#profile .profile-subtitle {
    font-family: 'Noto Sans JP', sans-serif; font-weight: 600; font-size: 22px;
    line-height: 1.5; color: #222222; margin: 48px 0 20px;
    padding-left: 14px; border-left: 4px solid #33c8b2;
}
#profile .profile-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
#profile .profile-list li { margin: 0; }
#profile .profile-list a {
    display: block; background: #ffffff; border: 1px solid #dddddd; border-radius: 10px;
    padding: 16px 44px 16px 18px; position: relative;
    font-family: 'Noto Sans JP', sans-serif; font-weight: 600; font-size: 16px; line-height: 1.7;
    color: #222222; text-decoration: none; transition: box-shadow .2s ease, transform .2s ease;
}
#profile .profile-list a::after {
    content: '→'; position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
    color: #33c8b2; font-weight: 600;
}
#profile .profile-list a:hover { box-shadow: 0 6px 16px rgba(0,0,0,.12); transform: translateY(-2px); }
#profile .profile-list-columns li { position: relative; }
#profile .profile-date {
    display: block; margin-top: 4px; font-size: 12px; color: #777777;
    font-family: 'Noto Sans JP', sans-serif;
}
#profile .profile-list-columns a { padding-bottom: 12px; }
#profile .profile-list-columns .profile-date { margin: 0 0 0 18px; padding-bottom: 4px; }
#profile .profile-more { margin: 24px 0 0; font-size: 15px; }
#profile .profile-more a { color: #0071bd; }
@media screen and (max-width: 767px) {
    #profile .profile-hero { padding: 36px 20px; }
    #profile .profile-hero .visual-title { font-size: 26px; }
    #profile .profile-container { padding: 0 20px; }
    #profile .profile-section { padding: 40px 0 56px; }
    #profile .profile-content p { font-size: 15px; }
    #profile .profile-content .profile-name { font-size: 19px; }
    #profile .profile-content .profile-role { font-size: 14px; }
    #profile .profile-subtitle { font-size: 19px; margin: 36px 0 16px; }
    #profile .profile-list a { font-size: 15px; padding: 14px 38px 14px 14px; }
    #profile .profile-list-columns .profile-date { margin-left: 14px; }
}

/* SEO_W2_BRIEF E-2：本文「まとめ」直前の関連記事ブロック */
#column .column-content .column-inline-related {
    margin: 48px 0; padding: 20px 24px;
    background: #f7fbfc; border: 1px solid #dfeaec; border-radius: 12px;
}
#column .column-content .column-inline-related-title {
    margin: 0 0 12px; font-family: 'Noto Sans JP', sans-serif;
    font-weight: 600; font-size: 15px; color: #222222;
}
#column .column-content .column-inline-related ul { list-style: none; margin: 0; padding: 0; }
#column .column-content .column-inline-related li { margin: 0 0 8px; padding-left: 20px; position: relative; }
#column .column-content .column-inline-related li:last-child { margin-bottom: 0; }
#column .column-content .column-inline-related li::before {
    content: '→'; position: absolute; left: 0; top: 0; color: #33c8b2; font-weight: 600;
}
#column .column-content .column-inline-related a {
    font-size: 15px; line-height: 1.8; color: #0071bd; text-decoration: none;
}
#column .column-content .column-inline-related a:hover { text-decoration: underline; }
@media screen and (max-width: 767px) {
    #column .column-content .column-inline-related { margin: 36px 0; padding: 16px 18px; }
    #column .column-content .column-inline-related a { font-size: 14px; }
}

/* SEO_W2_BRIEF F-1：特徴セクションの補足リスト */
.characteristic-points {
    list-style: none; margin: 32px auto 0; padding: 0; max-width: 900px;
    display: grid; gap: 10px;
}
.characteristic-points li {
    position: relative; margin: 0; padding: 14px 18px 14px 44px;
    background: #ffffff; border: 1px solid #dddddd; border-radius: 12px;
    font-family: 'Noto Sans JP', sans-serif; font-size: 16px; line-height: 1.7; color: #222222;
}
.characteristic-points li::before {
    content: '✓'; position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
    color: #33c8b2; font-weight: 700;
}

/* SEO_W2_BRIEF F-2：ファーストビュー直下の実績の帯 */
.lp-stats { background: #ffffff; padding: 20px 20px 0; }
.lp-stats-list {
    list-style: none; margin: 0 auto; padding: 0; max-width: 1040px;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
.lp-stats-item {
    margin: 0; padding: 18px 16px; text-align: center;
    background: #e2fffb; border-radius: 16px;
    font-family: 'Noto Sans JP', sans-serif; font-weight: 700; font-size: 17px;
    line-height: 1.5; color: #222222;
}
@media screen and (max-width: 767px) {
    .lp-stats { padding: 16px 20px 0; }
    .lp-stats-list { grid-template-columns: 1fr; gap: 8px; }
    .lp-stats-item { padding: 12px 14px; font-size: 14px; }
}

/* SEO_W2_BRIEF D：ピラーページへ戻る導線 */
#column .column-guide-back { max-width: 800px; margin: 0 auto; padding: 0 20px 40px; }
#column .column-guide-back p { margin: 0; font-family: 'Noto Sans JP', sans-serif; font-size: 15px; line-height: 1.8; }
#column .column-guide-back a {
    display: inline-block; color: #0071bd; text-decoration: none;
    padding: 10px 0; position: relative; padding-left: 20px;
}
#column .column-guide-back a::before { content: '←'; position: absolute; left: 0; top: 10px; color: #33c8b2; font-weight: 600; }
#column .column-guide-back a:hover { text-decoration: underline; }
@media screen and (max-width: 767px) {
    #column .column-guide-back { padding: 0 20px 32px; }
    #column .column-guide-back p { font-size: 14px; }
}