@charset "utf-8";
/*
Theme Name: SWELL CHILD
Theme URI: https://swell-theme.com/
Description: SWELL の子テーマです。BM PLUS株式会社 コラム用にカスタマイズしています。
Template: swell
Author: LOOS WEB STUDIO / customized for BM PLUS
Version: 1.1.0
*/

/* ============================================================
   BM PLUS株式会社 — コラム（WordPress）専用スタイル
   共通スタイルは静的サイトの /css/style.css を読み込んでいます。
   このファイルには、コラム側にだけ必要な追加分を書いています。
   ============================================================ */

/* --- 記事カード（一覧）をリンク要素として成立させる --- */
.col-card{display:flex;flex-direction:column;height:100%}
.col-card .col-body{flex:1}

/* --- 一覧のサムネイル --- */
.col-thumb{display:block;margin:-32px -28px 20px;aspect-ratio:16/9;overflow:hidden;background:var(--off)}
.col-thumb img{width:100%;height:100%;object-fit:cover}

/* --- パンくず --- */
.crumb{padding:22px 0 0;font-size:12px;color:var(--mid);font-weight:300}
.crumb ol{display:flex;flex-wrap:wrap;gap:8px;list-style:none}
.crumb li::after{content:'/';margin-left:8px;color:var(--pale)}
.crumb li:last-child::after{content:''}
.crumb a{transition:color .22s}
.crumb a:hover{color:var(--or)}
.crumb .crumb-current{color:var(--pale)}

/* --- 記事本文 --- */
.entry{max-width:820px}
.entry>*{margin-bottom:18px}
.entry h2{font-size:21px;font-weight:700;margin:44px 0 16px;padding-left:12px;border-left:3px solid var(--or);line-height:1.5}
.entry h3{font-size:17px;font-weight:700;margin:34px 0 12px;line-height:1.55}
.entry h4{font-size:15.5px;font-weight:700;margin:26px 0 10px}
.entry p{font-size:15px;line-height:2;color:var(--ink)}
.entry a{color:var(--or);text-decoration:underline;text-underline-offset:3px}
.entry ul{list-style:disc;padding-left:1.4em}
.entry ol{list-style:decimal;padding-left:1.5em}
.entry li{font-size:15px;line-height:1.95;margin-bottom:6px}
.entry img,.entry figure img{border-radius:4px}
.entry figure{margin:26px 0}
.entry figcaption{font-size:12.5px;color:var(--mid);margin-top:8px;text-align:center}
.entry blockquote{border-left:3px solid var(--line);padding:6px 0 6px 20px;color:var(--mid);font-weight:300}
.entry table{width:100%;border-collapse:collapse;font-size:14.5px}
.entry th,.entry td{border:1px solid var(--line);padding:11px 14px;text-align:left;vertical-align:top;line-height:1.8}
.entry th{background:var(--off);font-weight:500}
.entry code{background:var(--off);padding:2px 6px;border-radius:3px;font-size:13px}
.entry hr{border:none;border-top:1px solid var(--line);margin:38px 0}

/* --- 記事メタ --- */
.entry-meta{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;margin-top:20px;font-size:12px;color:var(--mid);font-weight:300}
.entry-cat{font-family:var(--hv);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:var(--or);padding:5px 11px;border-radius:4px}
.entry-thumb{margin:0 0 38px;border-radius:4px;overflow:hidden}
.entry-thumb img{width:100%;height:auto}

/* --- 関連記事 --- */
.rel-title{font-family:var(--hv);font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--pale);margin-bottom:28px;display:block}

/* --- ページネーション --- */
.pager{display:flex;justify-content:center;gap:8px;margin-top:48px;flex-wrap:wrap}
.pager .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding:0 12px;border:1px solid var(--line);font-family:var(--hv);font-size:13px;font-weight:700;color:var(--ink);transition:border-color .22s,color .22s}
.pager .page-numbers:hover{border-color:var(--or);color:var(--or)}
.pager .page-numbers.current{background:var(--or);border-color:var(--or);color:#fff}

/* --- カテゴリ絞り込み --- */
.cat-filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:36px}
.cat-filter a{font-size:12.5px;font-weight:500;padding:8px 16px;border:1px solid var(--line);border-radius:999px;color:var(--mid);transition:border-color .22s,color .22s}
.cat-filter a:hover,.cat-filter a.on{border-color:var(--or);color:var(--or)}

/* --- 記事なし --- */
.no-post{padding:56px 0;text-align:center;color:var(--mid);font-weight:300}

@media(max-width:768px){
  .entry h2{font-size:18.5px}
  .entry h3{font-size:16px}
  .col-thumb{margin:-32px -28px 18px}
}


/* --- 管理バー表示時（ログイン中）にヘッダーが隠れないようにする --- */
body.admin-bar .accent-bar{top:32px}
body.admin-bar .hd{top:35px}
body.admin-bar .mob{top:95px}
@media screen and (max-width:782px){
  body.admin-bar .accent-bar{top:46px}
  body.admin-bar .hd{top:49px}
  body.admin-bar .mob{top:109px}
}

/* --- パンくずと見出しの間隔 --- */
.crumb{margin-bottom:20px}

/* --- 目次 --- */
.p-toc{display:none!important}
.bmp-toc{background:var(--off);border:1px solid var(--line);border-radius:4px;padding:26px 28px;margin:0 0 40px}
.bmp-toc-ttl{font-family:var(--hv);font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--or);display:block;margin-bottom:16px}
.bmp-toc ol{list-style:none;padding:0;margin:0}
.bmp-toc li{font-size:14px;line-height:1.7;margin-bottom:9px}
.bmp-toc li:last-child{margin-bottom:0}
.bmp-toc li.lv3{padding-left:1.4em;font-size:13px;color:var(--mid)}
.bmp-toc a{transition:color .22s}
.bmp-toc a:hover{color:var(--or)}
.entry h2,.entry h3{scroll-margin-top:88px}

.bmp-toc a{color:var(--ink);text-decoration:none}
.bmp-toc li.lv3 a{color:var(--mid)}
.bmp-toc a:hover{color:var(--or)}