@charset "UTF-8";
/* ==========================================================================
   BODY MAKE LAB — column.css（コラム側のページ。JINのテンプレートで表示するページ）
   ポータルの黒×ゴールドを、白地で長文が読みやすい誌面に置き換えたもの。
   JINのカスタマイザーCSS・追加CSS・Rich Table of Contents より後に読み込む（inc/portal/column.php）。
     body.bp-jin … コラム側のページすべて：ヘッダー・サイドバー・パンくず・フッター
     body.bp-col … コラム記事：本文
   JINが !important で指定している所だけ !important で上書きする。LP（/personal/）には読み込まない。
   ========================================================================== */

.bp-jin, .bp-col {
  --bpc-ink: #1C1916;
  --bpc-text: #34302B;
  --bpc-sub: #7A7268;
  --bpc-line: #E8E2D8;
  --bpc-line-2: #D8CFBF;
  --bpc-soft: #F7F4EE;
  --bpc-soft-2: #EFE9DE;
  --bpc-gold: #C7A86A;
  --bpc-gold-deep: #A8884B;
  --bpc-gold-hi: #E6D09A;
  --bpc-gold-ink: #85692F; /* 白地の文字・リンク用（コントラスト比 5:1） */
  --bpc-gold-grad: linear-gradient(135deg, #E6D09A 0%, #C7A86A 55%, #B08F52 100%);
  --bpc-dark: #0B0A09;
  --bpc-dark-fg: #F2EFE9;
  --bpc-dark-fg-2: #BDB6AA;
  --bpc-ff-en: "Oswald", "Helvetica Neue", Arial, sans-serif;
  --bpc-ico-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E");
  --bpc-ico-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.6-3.6'/%3E%3C/svg%3E");
}

/* ---------- 記事の頭（カテゴリー・タイトル・日付） ---------- */
.bp-col .cps-post-cat a {
  padding: 5px 12px; border: 0 !important; border-radius: 2px;
  background: var(--bpc-ink) !important; color: var(--bpc-gold-hi) !important;
  font-size: 12px; font-weight: 700; letter-spacing: .1em;
}
.bp-col .cps-post-title {
  color: var(--bpc-ink) !important; font-size: 30px; font-weight: 700 !important; line-height: 1.5; letter-spacing: .02em;
  font-feature-settings: "palt";
}
.bp-col .cps-post-date { color: var(--bpc-sub); }
.bp-col .cps-post-thumb img { border-radius: 4px; }

/* ---------- 本文 ---------- */
.bp-col .cps-post-main {
  counter-reset: bpc-h2;
  color: var(--bpc-text); font-size: 17px; font-weight: 400; line-height: 2; letter-spacing: .04em;
}
.bp-col .cps-post-main p { padding-bottom: 1.7em; font-size: 1em; font-weight: 400; line-height: 2; letter-spacing: .04em; }
/* 記事中の文字がすべて 14px で固定されているため、本文の大きさに戻す */
.bp-col .cps-post-main [style*="font-size: 14px"] { font-size: inherit !important; }
.bp-col .cps-post-main strong, .bp-col .cps-post-main b { color: var(--bpc-ink); font-weight: 700 !important; }
.bp-col .cps-post-main a:not([class]) {
  color: var(--bpc-gold-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
  transition: color .2s;
}
.bp-col .cps-post-main a:not([class]):hover { color: var(--bpc-ink); }
.bp-col .cps-post-main .marker { background: linear-gradient(transparent 62%, rgba(214, 186, 128, .45) 62%) !important; }
.bp-col .cps-post-main .marker2 { background: linear-gradient(transparent 62%, rgba(28, 25, 22, .1) 62%) !important; }
.bp-col .cps-post-main img { border-radius: 4px; }
.bp-col .cps-post-main hr { margin: 3em 0; border: 0; border-top: 1px solid var(--bpc-line); }

/* ---------- 見出し ---------- */
/* h2：章番号＋見出し。下の罫線の左端に金のアクセント */
.bp-col .cps-post-main h2 {
  position: relative; counter-increment: bpc-h2;
  margin: 3.4em 0 1.3em !important; padding: 0 0 18px !important;
  background: none !important; border: 0 !important; border-bottom: 1px solid var(--bpc-line-2) !important; border-radius: 0 !important;
  color: var(--bpc-ink) !important; font-size: 25px !important; font-weight: 700 !important; line-height: 1.55 !important; letter-spacing: .03em;
  font-feature-settings: "palt";
}
.bp-col .cps-post-main h2::before {
  content: counter(bpc-h2, decimal-leading-zero); display: block; margin-bottom: 10px;
  font: 500 15px/1 var(--bpc-ff-en); letter-spacing: .18em; color: var(--bpc-gold-deep);
}
.bp-col .cps-post-main h2::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 64px; height: 3px; background: var(--bpc-gold); }
.bp-col .cps-post-main h2 span, .bp-col .cps-post-main h2 a, .bp-col .cps-post-main h3 span, .bp-col .cps-post-main h4 span { color: inherit !important; }

/* h3：左に金の縦線 */
.bp-col .cps-post-main h3 {
  margin: 2.3em 0 1em !important; padding: 3px 0 3px 16px !important;
  background: none !important; border: 0 !important; border-left: 4px solid var(--bpc-gold) !important; border-radius: 0 !important;
  color: var(--bpc-ink) !important; font-size: 20px !important; font-weight: 700 !important; line-height: 1.6 !important; letter-spacing: .03em;
  font-feature-settings: "palt";
}
.bp-col .cps-post-main h2 + h3 { margin-top: 1.6em !important; }

/* h4：小さな金のひし形 */
.bp-col .cps-post-main h4 {
  position: relative; margin: 2.2em 0 .8em !important; padding: 0 0 0 22px !important;
  background: none !important; border: 0 !important;
  color: var(--bpc-ink) !important; font-size: 17.5px !important; font-weight: 700 !important; line-height: 1.65 !important;
}
.bp-col .cps-post-main h4::before {
  content: ""; position: absolute; left: 3px; top: .68em; width: 8px; height: 8px;
  background: var(--bpc-gold); transform: rotate(45deg);
}

/* h5：記事では「強調したい一文」に使われているので、チェック付きの帯にする */
.bp-col .cps-post-main h5 {
  position: relative; margin: 0 0 8px !important; padding: 13px 18px 13px 48px !important;
  background: var(--bpc-soft); border-radius: 4px;
  color: var(--bpc-ink) !important; font-size: 16px !important; font-weight: 700 !important; line-height: 1.75 !important; letter-spacing: .03em;
}
.bp-col .cps-post-main h5::before {
  content: ""; position: absolute; left: 18px; top: 16px; width: 18px; height: 18px; background: var(--bpc-gold-deep);
  -webkit-mask: var(--bpc-ico-check) center / contain no-repeat; mask: var(--bpc-ico-check) center / contain no-repeat;
}
.bp-col .cps-post-main h5 + :not(h5) { margin-top: 1.8em; }

/* ---------- リスト ---------- */
.bp-col .cps-post-main ul > li::before { background-color: var(--bpc-gold) !important; }
.bp-col .cps-post-main ol > li::before { background: var(--bpc-ink) !important; }
.bp-col .cps-post-main ol > li::after { color: var(--bpc-gold-hi); font-weight: 700; }
.bp-col .cps-post-main li { line-height: 1.85; }

/* ---------- 吹き出し ---------- */
.bp-col .cps-post-main .balloon-box {
  display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 18px; row-gap: 6px; align-items: start;
  margin: .6em 0 2.4em; padding: 0; overflow: visible;
}
.bp-col .cps-post-main .balloon-right { grid-template-columns: minmax(0, 1fr) 64px; }
.bp-col .cps-post-main .balloon-box .balloon-icon {
  position: static; grid-row: 1; width: 64px; height: 64px; margin: 0;
  border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px var(--bpc-line-2); overflow: hidden;
}
.bp-col .cps-post-main .balloon-box .balloon-icon img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.bp-col .cps-post-main .balloon-box .icon-name {
  position: static; grid-row: 2; width: auto; margin: 0; padding: 0;
  color: var(--bpc-ink); font-size: 12px; font-weight: 700; line-height: 1.3 !important; letter-spacing: .06em; text-align: center;
}
.bp-col .cps-post-main .balloon-box .icon-name:empty { display: none; }
.bp-col .cps-post-main .balloon-left .balloon-icon, .bp-col .cps-post-main .balloon-left .icon-name { grid-column: 1; }
.bp-col .cps-post-main .balloon-right .balloon-icon, .bp-col .cps-post-main .balloon-right .icon-name { grid-column: 2; }
.bp-col .cps-post-main .balloon-box .balloon-serif { position: relative; grid-row: 1 / span 2; float: none; margin: 0; padding: 0; }
.bp-col .cps-post-main .balloon-left .balloon-serif { grid-column: 2; }
.bp-col .cps-post-main .balloon-right .balloon-serif { grid-column: 1; }
.bp-col .cps-post-main .balloon-box .balloon-serif .balloon-content {
  padding: 18px 22px; border: 1px solid var(--bpc-line-2); border-radius: 14px; background: #fff;
  color: var(--bpc-text); font-size: 16px; line-height: 1.9; letter-spacing: .03em;
}
/* しっぽ */
.bp-col .cps-post-main .balloon-box .balloon-serif::after { content: none; }
.bp-col .cps-post-main .balloon-box .balloon-serif::before {
  content: ""; position: absolute; top: 24px; width: 12px; height: 12px;
  border: 0 solid var(--bpc-line-2); background: #fff; transform: rotate(45deg); z-index: 3;
}
.bp-col .cps-post-main .balloon-left .balloon-serif::before { left: -6px; border-width: 0 0 1px 1px; }
.bp-col .cps-post-main .balloon-right .balloon-serif::before { right: -6px; border-width: 1px 1px 0 0; }
/* HIRO：やわらかい地色の吹き出しと、金の縁取り */
.bp-col .cps-post-main .bp-hiro .balloon-serif .balloon-content { border-color: var(--bpc-soft-2); background: var(--bpc-soft-2); color: var(--bpc-ink); }
.bp-col .cps-post-main .bp-hiro .balloon-serif::before { border-color: var(--bpc-soft-2); background: var(--bpc-soft-2); }
.bp-col .cps-post-main .bp-hiro .balloon-icon { box-shadow: 0 0 0 2px var(--bpc-gold); }
.bp-col .cps-post-main .bp-hiro .icon-name::after {
  content: "TRAINER"; display: block; margin-top: 3px;
  font: 500 9px/1 var(--bpc-ff-en); letter-spacing: .18em; color: var(--bpc-gold-deep);
}

/* ---------- 目次（Rich Table of Contents） ---------- */
.bp-col #rtoc-mokuji-wrapper.rtoc-mokuji-content {
  max-width: none; margin: 2.6em 0 1em; padding: 26px 32px 22px;
  background: var(--bpc-soft) !important; border: 0 !important; border-top: 3px solid var(--bpc-ink) !important; border-radius: 0 0 6px 6px;
  font-size: 15px;
}
.bp-col #rtoc-mokuji-wrapper.rtoc-mokuji-content::before { content: none; }
.bp-col #rtoc-mokuji-wrapper #rtoc-mokuji-title {
  padding: 0 0 14px !important; border-bottom: 1px solid var(--bpc-line-2);
  color: var(--bpc-ink) !important; font: 500 15px/1.4 var(--bpc-ff-en) !important; letter-spacing: .26em !important; text-transform: uppercase;
}
.bp-col #rtoc-mokuji-wrapper #rtoc-mokuji-title.is_close { border-bottom: 0; padding-bottom: 0 !important; }
.bp-col #rtoc-mokuji-wrapper .rtoc_open_close {
  padding: 6px 12px; border: 1px solid var(--bpc-line-2); border-radius: 2px; background: #fff;
  color: var(--bpc-sub); font: 500 11px/1 var(--bpc-ff-en); letter-spacing: .14em; cursor: pointer;
}
.bp-col #rtoc-mokuji-wrapper .rtoc-mokuji.level-1 { margin: 6px 0 0; }
.bp-col #rtoc-mokuji-wrapper .rtoc-mokuji li > a { color: var(--bpc-ink) !important; text-decoration: none; transition: color .2s; }
.bp-col #rtoc-mokuji-wrapper .rtoc-mokuji li > a:hover { color: var(--bpc-gold-ink) !important; }
.bp-col #rtoc-mokuji-wrapper .level-1 > .rtoc-item { padding-top: 12px; }
.bp-col #rtoc-mokuji-wrapper .level-1 > .rtoc-item > a { font-weight: 700; line-height: 1.7; }
.bp-col #rtoc-mokuji-wrapper .decimal_ol > .rtoc-item::before { color: var(--bpc-gold-deep) !important; font: 500 15px/1 var(--bpc-ff-en) !important; letter-spacing: .06em; }
.bp-col #rtoc-mokuji-wrapper .decimal_ol > .rtoc-item::after { background-color: var(--bpc-line-2) !important; }
.bp-col #rtoc-mokuji-wrapper .level-2 > .rtoc-item { font-size: 14px; }
.bp-col #rtoc-mokuji-wrapper .level-2 > .rtoc-item > a { color: var(--bpc-text) !important; font-weight: 400; line-height: 1.7; }
.bp-col #rtoc-mokuji-wrapper .mokuji_ul.level-2 > .rtoc-item::before { top: 1.3em !important; width: 7px !important; height: 1px !important; border-radius: 0 !important; background-color: var(--bpc-gold-deep) !important; }
/* 画面の端に出る「目次へ戻る」ボタン */
.bp-col #rtoc_return a { background-color: var(--bpc-ink) !important; color: var(--bpc-gold-hi); box-shadow: 0 8px 20px -6px rgba(0, 0, 0, .35); }

/* ---------- 装飾ボックス（JINの色とりどりのボックスを、枠・地色・左線の3種類に揃える） ---------- */
.bp-col .cps-post-main :is(.simple-box1, .simple-box2, .simple-box3, .simple-box4, .simple-box5, .simple-box7, .simple-box9, .kaisetsu-box2, .kaisetsu-box4, .concept-box1, .concept-box2, .concept-box3, .concept-box4, .concept-box5, .concept-box6) {
  border: 1px solid var(--bpc-line-2) !important; border-radius: 6px; background: #fff;
}
.bp-col .cps-post-main .simple-box6 { background: var(--bpc-soft) !important; border-radius: 6px; }
.bp-col .cps-post-main .simple-box8 { border-left: 3px solid var(--bpc-gold) !important; background: var(--bpc-soft) !important; }
.bp-col .cps-post-main .simple-box8::before { content: none; }
.bp-col .cps-post-main :is(.simple-box4, .simple-box5, .simple-box7)::before { background-color: var(--bpc-ink) !important; }
.bp-col .cps-post-main :is(.concept-box1, .concept-box2, .concept-box3, .concept-box4, .concept-box5, .concept-box6)::before { color: var(--bpc-ink) !important; }
.bp-col .cps-post-main :is(.concept-box1, .concept-box3, .concept-box5, .concept-box6)::after { background-color: var(--bpc-gold) !important; }
.bp-col .cps-post-main :is(.concept-box2, .concept-box4)::after { background-color: #C98A6B !important; }
.bp-col .cps-post-main :is(.kaisetsu-box2-title, .kaisetsu-box4-title) { background-color: var(--bpc-ink) !important; color: var(--bpc-gold-hi) !important; }
.bp-col .cps-post-main .yellow-iconbox { background-color: #FBF6EA; }
.bp-col .cps-post-main .yellow--border { border-left: 2px solid var(--bpc-gold); }

/* ---------- 引用・表・関連記事カード ---------- */
.bp-col .cps-post-main blockquote {
  padding: 1.5em 1.8em .3em; border-left: 3px solid var(--bpc-line-2); border-radius: 0 6px 6px 0;
  background: var(--bpc-soft); color: var(--bpc-sub); font-size: .94em;
}
.bp-col .cps-post-main table {
  margin: 1.4em 0 2.2em; border: 0; border-top: 2px solid var(--bpc-ink);
  font-size: 15px; line-height: 1.7; letter-spacing: .02em; word-break: normal; overflow-wrap: anywhere;
}
.bp-col .cps-post-main table tr th, .bp-col .cps-post-main table tr td {
  padding: 13px 14px; border: 0; border-bottom: 1px solid var(--bpc-line); vertical-align: top; text-align: left;
}
.bp-col .cps-post-main table tr th { background: var(--bpc-soft); color: var(--bpc-ink); font-size: 14px; font-weight: 700; }
.bp-col .cps-post-main table thead th, .bp-col .cps-post-main table tr:first-child > th { background: var(--bpc-soft-2); }
.bp-col .cps-post-main .blog-card { border: 1px solid var(--bpc-line-2) !important; border-radius: 6px; background: #fff; }
.bp-col .cps-post-main .blog-card-hl-box { background-color: var(--bpc-ink) !important; }
.bp-col .cps-post-main .blog-card-title { color: var(--bpc-ink); font-weight: 700; }

/* ---------- ボタン（JINのボタンの青・緑を、ゴールドと黒に。LINEへのボタンだけLINEの緑） ---------- */
.bp-col .cps-post-main :is(.color-button01, .color-button01-big, .color-button02, .color-button02-big) a {
  border-radius: 4px !important; font-weight: 700; letter-spacing: .06em; text-decoration: none !important;
}
.bp-col .cps-post-main :is(.color-button01, .color-button01-big) a {
  background: var(--bpc-gold-grad) !important; color: #211A0C !important;
  box-shadow: 0 12px 26px -14px rgba(150, 118, 58, .8);
}
.bp-col .cps-post-main :is(.color-button02, .color-button02-big) a { background: var(--bpc-ink) !important; color: var(--bpc-gold-hi) !important; }
.bp-col .cps-post-main :is(.color-button01, .color-button01-big, .color-button02, .color-button02-big) a span { background: none !important; color: inherit !important; }
.bp-col .cps-post-main :is(.color-button01, .color-button01-big, .color-button02, .color-button02-big) a:is([href*="lin.ee"], [href*="line.me"]) {
  background: #06C755 !important; color: #fff !important; box-shadow: 0 12px 26px -14px rgba(6, 199, 85, .8);
}

/* ---------- 監修者（inc/portal/column.php が本文の冒頭と末尾に出す） ---------- */
.bp-col .cps-post-main .bp-col-sv__img { display: block; flex: none; border-radius: 50%; object-fit: cover; }
.bp-col .bp-col-sv--top {
  display: flex; align-items: center; gap: 12px; margin: 0 0 2.2em; padding: 0 0 18px; border-bottom: 1px solid var(--bpc-line);
}
.bp-col .bp-col-sv--top .bp-col-sv__img { width: 44px; height: 44px; box-shadow: 0 0 0 2px var(--bpc-gold); border: 2px solid #fff; }
.bp-col .bp-col-sv--top .bp-col-sv__txt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; font-size: 13px; line-height: 1.6; color: var(--bpc-sub); }
.bp-col .bp-col-sv--top b { color: var(--bpc-ink); font-size: 15px; }
.bp-col .bp-col-sv__label {
  padding: 2px 8px; border-radius: 2px; background: var(--bpc-ink); color: var(--bpc-gold-hi);
  font-size: 11px; font-weight: 700; letter-spacing: .12em;
}
.bp-col .bp-col-sv--box { margin: 3.6em 0 1em; border: 1px solid var(--bpc-line-2); border-top: 3px solid var(--bpc-ink); border-radius: 0 0 6px 6px; background: #fff; }
.bp-col .bp-col-sv__head {
  display: flex; align-items: baseline; gap: 12px; padding: 16px 28px; border-bottom: 1px solid var(--bpc-line);
  color: var(--bpc-ink); font-size: 14px; font-weight: 700; letter-spacing: .06em;
}
.bp-col .bp-col-sv__en { font: 500 13px/1 var(--bpc-ff-en); letter-spacing: .24em; text-transform: uppercase; color: var(--bpc-gold-deep); }
.bp-col .bp-col-sv__body { display: flex; gap: 24px; align-items: flex-start; padding: 24px 28px 26px; }
.bp-col .bp-col-sv--box .bp-col-sv__img { width: 88px; height: 88px; box-shadow: 0 0 0 2px var(--bpc-gold); border: 3px solid #fff; }
.bp-col .bp-col-sv__name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; color: var(--bpc-ink); font-size: 20px; font-weight: 700; line-height: 1.4; }
.bp-col .bp-col-sv__name span { color: var(--bpc-sub); font-size: 13px; font-weight: 500; letter-spacing: .04em; }
.bp-col .bp-col-sv__bio { margin-top: 10px; color: var(--bpc-text); font-size: 14.5px; line-height: 1.9; letter-spacing: .03em; }
.bp-col .bp-col-sv__links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.bp-col .cps-post-main .bp-col-sv__link {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1px solid var(--bpc-line-2); border-radius: 2px;
  color: var(--bpc-ink); font-size: 13px; font-weight: 700; letter-spacing: .04em; text-decoration: none; transition: border-color .2s, background-color .2s, color .2s;
}
.bp-col .cps-post-main .bp-col-sv__link:hover { border-color: var(--bpc-ink); }
.bp-col .cps-post-main .bp-col-sv__link--lp { border-color: var(--bpc-ink); background: var(--bpc-ink); color: var(--bpc-gold-hi); }
.bp-col .cps-post-main .bp-col-sv__link--lp::after { content: "→"; margin-left: 10px; color: var(--bpc-gold); }
.bp-col .cps-post-main .bp-col-sv__link--lp:hover { background: #000; color: #fff; }

/* ---------- SNSボタン（色とりどりの塗りをやめ、線のボタンに。Pocket は2025年7月にサービス終了） ---------- */
.bp-col .sns-design-type01 li.pocket { display: none !important; }
.bp-col .sns-design-type01 li a {
  background: #fff !important; border: 1px solid var(--bpc-line-2); border-radius: 2px; box-shadow: none !important;
  color: var(--bpc-ink) !important; transition: border-color .2s, background-color .2s;
}
.bp-col .sns-design-type01 li a:hover { border-color: var(--bpc-ink); background: var(--bpc-soft) !important; }
.bp-col .sns-design-type01 li a :is(i, .jic, .font-hatena) { color: var(--bpc-ink) !important; }

/* ==========================================================================
   ヘッダー（JINのヘッダーを、ポータルと同じ黒×ゴールドに。メニューの中身は column.php）
   ========================================================================== */
.bp-jin #header-box { background: var(--bpc-dark) !important; border-bottom: 1px solid rgba(199, 168, 106, .26); }
.bp-jin #header { align-items: center; }
.bp-jin #header #site-info { max-width: none; margin-right: auto; letter-spacing: 0; }
.bp-jin #site-info a {
  display: inline-flex; flex-direction: column; gap: 5px;
  color: var(--bpc-dark-fg) !important; font: 600 20px/1 var(--bpc-ff-en); letter-spacing: .2em; text-decoration: none;
}
.bp-jin #site-info a::after {
  content: "オンライン・出張パーソナル比較";
  font: 500 11px/1.2 "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif; letter-spacing: .12em; color: #958E82;
}

/* PC：ロゴ／メニュー／探すボタン／記事の検索 */
@media (min-width: 768px) {
  .bp-jin #header-box { min-height: 76px; }
  .bp-jin #header { min-height: 76px; padding: 0 clamp(20px, 3vw, 40px); }
  .bp-jin #drawernav3 ul.menu-box { flex-wrap: nowrap; align-items: center; gap: 2px; margin: 0; }
  .bp-jin #drawernav3 ul.menu-box li.menu-item a {
    height: auto; padding: 10px 14px !important; border: 0;
    color: var(--bpc-dark-fg) !important; font-size: 14px !important; font-weight: 500; line-height: 1.4; letter-spacing: .06em; white-space: nowrap;
  }
  .bp-jin #drawernav3 ul.menu-box li.menu-item a::after { left: 14px; right: 14px; bottom: 3px; width: auto; height: 1px; background: var(--bpc-gold) !important; }
  .bp-jin #drawernav3 ul.menu-box li.current-menu-item a::after { opacity: 1; transform: none; }
  .bp-jin #drawernav3 ul.menu-box li.bp-nav-cta { margin-left: 12px; }
  .bp-jin #drawernav3 ul.menu-box li.bp-nav-cta a {
    display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px !important; border-radius: 2px;
    background: var(--bpc-gold-grad); color: #211A0C !important; font-weight: 700; box-shadow: 0 12px 30px -14px rgba(199, 168, 106, .6);
    transition: transform .2s, box-shadow .2s;
  }
  .bp-jin #drawernav3 ul.menu-box li.bp-nav-cta a::before {
    content: ""; width: 15px; height: 15px; background: currentColor;
    -webkit-mask: var(--bpc-ico-search) center / contain no-repeat; mask: var(--bpc-ico-search) center / contain no-repeat;
  }
  .bp-jin #drawernav3 ul.menu-box li.bp-nav-cta a::after { content: none; }
  .bp-jin #drawernav3 ul.menu-box li.bp-nav-cta a:hover { transform: translateY(-1px); box-shadow: 0 16px 36px -14px rgba(199, 168, 106, .8); }
  .bp-jin #headmenu { align-items: center; margin: 0 0 0 10px; }
  .bp-jin #headmenu .headsns { display: none; }
  .bp-jin #headmenu .headsearch { margin: 0; color: var(--bpc-dark-fg-2) !important; }
  .bp-jin #headmenu .headsearch .search-box { height: 22px; }
  .bp-jin #headmenu .headsearch .search-box::before { top: 0; font-size: 17px; }
  .bp-jin #headmenu .headsearch .search-box:hover { color: var(--bpc-gold); }
  .bp-jin #headmenu .headsearch .search-text { top: -9px; right: -6px; border-radius: 2px; }
}
@media (min-width: 768px) and (max-width: 1100px) {
  .bp-jin #drawernav3 ul.menu-box li.menu-item:nth-child(2), .bp-jin #drawernav3 ul.menu-box li.menu-item:nth-child(3) { display: none; }
}
@media (min-width: 768px) and (max-width: 900px) {
  .bp-jin #drawernav3 ul.menu-box li.menu-item:nth-child(4) { display: none; }
  .bp-jin #site-info a::after { content: none; }
}

/* スマホ：ロゴを中央、左に記事の検索、右にメニュー。下に横スクロールのメニュー */
@media (max-width: 767px) {
  .bp-jin #header-box { min-height: 0; padding: 0; }
  .bp-jin #header { height: 60px; margin: 0; }
  .bp-jin #header #site-info { max-width: 72%; margin: 0 auto; text-align: center; }
  .bp-jin #site-info a { align-items: center; gap: 4px; font-size: 17px; letter-spacing: .16em; }
  .bp-jin #site-info a::after { font-size: 9.5px; letter-spacing: .1em; }
  .bp-jin .cps-icon-bar { background-color: var(--bpc-dark-fg) !important; }
  .bp-jin .headsearch.jin-sp-design { color: var(--bpc-dark-fg-2) !important; }
  .bp-jin .headsearch.jin-sp-design .search-box::before { top: 18px; }
  .bp-jin .headsearch.jin-sp-design .search-text { top: 13px; border-radius: 2px; }
  .bp-jin .cps-sp-menu-bar { padding: 0 6px; background: #121010 !important; border-bottom: 1px solid rgba(199, 168, 106, .26); scrollbar-width: none; }
  .bp-jin .cps-sp-menu-bar::-webkit-scrollbar { display: none; }
  .bp-jin .cps-sp-menu-bar ul li a {
    margin: 0; padding: 12px 10px; border: 0 !important;
    color: var(--bpc-dark-fg-2) !important; font-size: 12.5px; font-weight: 500; letter-spacing: .04em;
  }
  .bp-jin .cps-sp-menu-bar ul .current-menu-item a { color: var(--bpc-gold-hi) !important; box-shadow: inset 0 -2px 0 var(--bpc-gold); }
  .bp-jin .sp-menu-box { background: var(--bpc-dark) !important; }
  .bp-jin .sp-menu-box .sp-menu-title { color: var(--bpc-gold); font-family: var(--bpc-ff-en); letter-spacing: .3em; }
  .bp-jin .sp-menu-box .menu-box li a { padding: 16px 4px; border-bottom: 1px solid rgba(242, 239, 233, .1); color: var(--bpc-dark-fg) !important; font-size: 15px !important; font-weight: 500; letter-spacing: .04em; }
  .bp-jin .sp-menu-box .menu-box li.bp-nav-cta { display: none; }
}

/* ==========================================================================
   記事の枠・PR表記・関連記事
   ========================================================================== */
@media (min-width: 768px) {
  .bp-jin .article_style1 .cps-post-box { box-shadow: none; border: 1px solid var(--bpc-line); border-radius: 4px; padding: 32px 36px; }
}
/* ステマ規制の表記（JIN：外観 › カスタマイズ › ステマ規制への対応設定） */
.bp-jin .c--labeling-act { display: flex; align-items: center; gap: 10px; margin: 0 0 2em; padding: 10px 14px; border: 0 !important; border-radius: 4px; background: var(--bpc-soft) !important; }
.bp-jin .c--labeling-act::before {
  content: "PR"; flex: none; padding: 3px 7px; border-radius: 2px; background: var(--bpc-ink); color: var(--bpc-gold-hi);
  font: 600 10px/1 var(--bpc-ff-en); letter-spacing: .12em;
}
.bp-jin .a--labeling-act { color: var(--bpc-sub) !important; font-size: 12.5px; line-height: 1.6; letter-spacing: .03em; }

/* ==========================================================================
   サイドバー（先頭の監修者と比較ポータルの案内は column.php が出す）
   ========================================================================== */
.bp-jin #sidebar .widget { margin: 0 0 44px; padding: 0 !important; border-radius: 0; background: none; box-shadow: none; font-size: 14px; }
.bp-jin #sidebar .widgettitle {
  position: relative; margin: 0 0 4px; padding: 0 0 12px; border-bottom: 1px solid var(--bpc-line-2) !important;
  color: var(--bpc-ink); font-size: 15px; font-weight: 700; letter-spacing: .06em;
}
.bp-jin #sidebar .widgettitle::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 32px; height: 2px; background: var(--bpc-gold); }
/* 最近の投稿 */
.bp-jin #sidebar .widget_recent_entries ul li { border-bottom: 1px solid var(--bpc-line); }
.bp-jin #sidebar .widget_recent_entries ul li a {
  padding: 14px 0 14px 18px; color: var(--bpc-ink); font-size: 14px; font-weight: 500; line-height: 1.75; letter-spacing: .03em; transition: color .2s;
}
.bp-jin #sidebar .widget_recent_entries ul li a::before { content: ""; top: 1.65em; left: 1px; width: 8px; height: 1px; padding: 0; background: var(--bpc-gold-deep); }
.bp-jin #sidebar .widget_recent_entries ul li a:hover { color: var(--bpc-gold-ink); }
/* カテゴリー：タグ状に並べる */
.bp-jin #sidebar .widget_categories ul { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 12px; }
.bp-jin #sidebar .widget_categories ul li { border: 0; }
.bp-jin #sidebar .widget_categories ul li a {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px !important; border: 1px solid var(--bpc-line-2); border-radius: 999px;
  color: var(--bpc-ink); font-size: 13px; font-weight: 500; line-height: 1.4; transition: background-color .2s, border-color .2s, color .2s;
}
.bp-jin #sidebar .widget_categories ul li a::before { content: none; }
.bp-jin #sidebar .widget_categories ul li a:hover { border-color: var(--bpc-ink); background: var(--bpc-ink); color: #fff; }
.bp-jin #sidebar .widget_categories .count { position: static; min-width: 0; padding: 0; border: 0; background: none; color: inherit; font-size: 11px; opacity: .6; }
/* 検索 */
.bp-jin #sidebar .widget_search .search-box { height: 48px; }
.bp-jin #sidebar .widget_search .search-box input[type=search] { height: 48px; padding: 0 48px 0 16px; border: 1px solid var(--bpc-line-2); border-radius: 2px; font-size: 14px; }
.bp-jin #sidebar .widget_search .search-box input[type=search]:focus { border-color: var(--bpc-gold); box-shadow: 0 0 0 3px rgba(199, 168, 106, .18); }
.bp-jin #sidebar .widget_search .search-box input[type=submit] { right: 0; width: 48px; height: 48px; color: var(--bpc-ink); }
.bp-jin #sidebar .wp-block-search__label { display: none; }
.bp-jin #sidebar .wp-block-search__input { height: 48px; padding: 0 14px; border: 1px solid var(--bpc-line-2); border-radius: 2px; }
.bp-jin #sidebar .wp-block-search__button { margin-left: 8px; border: 0; border-radius: 2px; background: var(--bpc-ink); color: #fff; }
/* ブロックのウィジェット（最新の投稿・カテゴリー・アーカイブ）を使った場合も、同じ見た目に */
.bp-jin #sidebar .widget :is(h2, h3).wp-block-heading { position: relative; margin: 0 0 4px; padding: 0 0 12px; border-bottom: 1px solid var(--bpc-line-2); color: var(--bpc-ink); font-size: 15px; font-weight: 700; letter-spacing: .06em; }
.bp-jin #sidebar :is(.wp-block-latest-posts, .wp-block-archives, .wp-block-categories) li { padding: 12px 0; border-bottom: 1px solid var(--bpc-line); font-size: 14px; line-height: 1.7; }
.bp-jin #sidebar :is(.wp-block-latest-posts, .wp-block-archives, .wp-block-categories) a { color: var(--bpc-ink); }

.bp-jin #sidebar .bp-side { padding: 26px 24px !important; }
.bp-jin .bp-side__en { font: 500 12px/1 var(--bpc-ff-en); letter-spacing: .26em; text-transform: uppercase; color: var(--bpc-gold-deep); }
/* 監修者 */
.bp-jin #sidebar .bp-side-sv { border: 1px solid var(--bpc-line-2); border-top: 3px solid var(--bpc-ink); border-radius: 0 0 6px 6px; text-align: center; }
.bp-jin .bp-side-sv__img { display: block; width: 76px; height: 76px; margin: 16px auto 12px; border: 3px solid #fff; border-radius: 50%; box-shadow: 0 0 0 2px var(--bpc-gold); object-fit: cover; }
.bp-jin .bp-side-sv__name { color: var(--bpc-ink); font-size: 18px; font-weight: 700; letter-spacing: .06em; }
.bp-jin .bp-side-sv__role { margin-top: 2px; color: var(--bpc-sub); font-size: 12px; }
.bp-jin .bp-side-sv__bio { margin: 14px 0 0; color: var(--bpc-text); font-size: 13px; line-height: 1.85; text-align: left; letter-spacing: .02em; }
.bp-jin #sidebar .bp-side-sv__link { display: inline-block; margin-top: 14px; padding-bottom: 2px; border-bottom: 1px solid var(--bpc-gold); color: var(--bpc-ink); font-size: 13px; font-weight: 700; }
.bp-jin #sidebar .bp-side-sv__link::after { content: "→"; margin-left: 8px; color: var(--bpc-gold-deep); }
/* 比較ポータルへの案内 */
.bp-jin #sidebar .bp-side-portal { position: relative; overflow: hidden; border-radius: 6px; background: var(--bpc-dark); color: var(--bpc-dark-fg); }
.bp-jin #sidebar .bp-side-portal::after {
  content: "BML"; position: absolute; right: -8px; bottom: -26px; pointer-events: none;
  font: 600 112px/1 var(--bpc-ff-en); letter-spacing: .02em; color: rgba(199, 168, 106, .07);
}
.bp-jin .bp-side-portal .bp-side__en { color: var(--bpc-gold); }
.bp-jin .bp-side-portal__title { margin-top: 12px; color: var(--bpc-dark-fg); font-size: 18px; font-weight: 700; line-height: 1.55; letter-spacing: .03em; }
.bp-jin .bp-side-portal__txt { margin: 10px 0 0; color: var(--bpc-dark-fg-2); font-size: 13px; line-height: 1.85; }
.bp-jin .bp-side-portal__count { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(242, 239, 233, .12); color: var(--bpc-dark-fg-2); font-size: 12px; }
.bp-jin .bp-side-portal__count b { margin-right: 6px; color: var(--bpc-gold-hi); font: 600 28px/1 var(--bpc-ff-en); }
.bp-jin #sidebar .bp-side-portal__btn {
  position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; min-height: 48px; margin-top: 16px; border-radius: 2px;
  background: var(--bpc-gold-grad); color: #211A0C; font-size: 14px; font-weight: 700; letter-spacing: .06em; transition: transform .2s;
}
.bp-jin #sidebar .bp-side-portal__btn:hover { transform: translateY(-1px); }
.bp-jin .bp-side-portal__links { position: relative; z-index: 1; display: flex; justify-content: center; gap: 20px; margin-top: 16px; }
.bp-jin #sidebar .bp-side-portal__links a { padding-bottom: 2px; border-bottom: 1px solid rgba(199, 168, 106, .45); color: var(--bpc-dark-fg-2); font-size: 12.5px; }
.bp-jin #sidebar .bp-side-portal__links a:hover { color: var(--bpc-gold-hi); }

/* ==========================================================================
   パンくず・フッター
   ========================================================================== */
.bp-jin #breadcrumb ul { box-sizing: border-box; }
.bp-jin #breadcrumb::after { background: var(--bpc-soft) !important; opacity: 1 !important; }
.bp-jin #breadcrumb ul li, .bp-jin #breadcrumb ul li a { color: var(--bpc-sub) !important; }
.bp-jin footer { background: var(--bpc-dark) !important; border-top: 1px solid rgba(199, 168, 106, .26); }
.bp-jin .footer-inner a, .bp-jin #copyright { color: var(--bpc-dark-fg-2) !important; }

/* ---------- スマホ ---------- */
@media (max-width: 767px) {
  .bp-col .cps-post-title { font-size: 23px; line-height: 1.55; }
  .bp-col .cps-post-main { font-size: 16px; line-height: 1.95; }
  .bp-col .cps-post-main p { line-height: 1.95; padding-bottom: 1.6em; }
  .bp-col .cps-post-main h2 { margin-top: 2.8em !important; font-size: 21px !important; padding-bottom: 14px !important; }
  .bp-col .cps-post-main h2::before { font-size: 13px; margin-bottom: 8px; }
  .bp-col .cps-post-main h3 { font-size: 18px !important; padding-left: 13px !important; }
  .bp-col .cps-post-main h4 { font-size: 16.5px !important; }
  .bp-col .cps-post-main h5 { font-size: 15px !important; padding: 12px 14px 12px 42px !important; }
  .bp-col .cps-post-main h5::before { left: 15px; top: 15px; width: 16px; height: 16px; }
  .bp-col .cps-post-main .balloon-box { grid-template-columns: 52px minmax(0, 1fr); column-gap: 14px; }
  .bp-col .cps-post-main .balloon-right { grid-template-columns: minmax(0, 1fr) 52px; }
  .bp-col .cps-post-main .balloon-box .balloon-icon { width: 52px; height: 52px; }
  .bp-col .cps-post-main .balloon-box .icon-name { font-size: 11px; }
  .bp-col .cps-post-main .balloon-box .balloon-serif .balloon-content { padding: 14px 16px; font-size: 15px; line-height: 1.85; }
  .bp-col .cps-post-main .balloon-box .balloon-serif::before { top: 18px; }
  .bp-col #rtoc-mokuji-wrapper.rtoc-mokuji-content { padding: 20px 18px 16px; font-size: 14.5px; }
  .bp-col .cps-post-main table { font-size: 13.5px; }
  .bp-col .cps-post-main :is(.color-button01-big, .color-button02-big) { width: 100% !important; }
  .bp-col .cps-post-main table tr th, .bp-col .cps-post-main table tr td { padding: 10px; }
  .bp-col .bp-col-sv__head { padding: 14px 18px; }
  .bp-col .bp-col-sv__body { flex-direction: column; gap: 16px; padding: 20px 18px 22px; }
  .bp-col .bp-col-sv--box .bp-col-sv__img { width: 72px; height: 72px; }
  .bp-col .bp-col-sv__links { flex-direction: column; }
  .bp-col .cps-post-main .bp-col-sv__link { justify-content: center; }
  .bp-col #sidebar .bp-side-sv { display: none; } /* 記事の末尾に監修者ボックスがあるため */
  .bp-jin #sidebar .widget { margin-bottom: 36px; }
}