/* ==========================================================================
   美肌道 JOURNAL｜content.css（記事・一覧・共通パーツ）
   共通パーツは bh- で始まるクラスで装飾しています（ナレッジ⑦ 5章）。
   ========================================================================== */

/* ---------- 1. レイアウト ---------- */
.bh-main{display:block;}
.bh-wrap{max-width:760px;margin:0 auto;padding:0 20px;}
.bh-wide{max-width:1140px;margin:0 auto;padding:0 20px;}
.bh-article{padding:24px 0 64px;}
.bh-page{padding:24px 0 80px;}
.screen-reader-text{position:absolute !important;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);border:0;white-space:nowrap;}

/* ---------- 2. パンくず・タイトル周り ---------- */
.bh-breadcrumb{margin:0 0 20px;font-size:12px;line-height:1.7;color:#8a93ad;}
.bh-breadcrumb a{color:#8a93ad;}
.bh-breadcrumb a:hover{color:var(--bd-blue);opacity:1;}
.bh-article-cat{margin:0 0 12px;}
.bh-article-cat a{display:inline-block;padding:3px 12px;font-size:12px;letter-spacing:.06em;
  color:var(--bd-blue);border:1px solid var(--bd-line);border-radius:var(--bd-radius-btn);}
.bh-article-title{margin:0 0 20px;font-family:var(--bd-serif);font-size:30px;font-weight:600;
  line-height:1.55;letter-spacing:.02em;color:var(--bd-text);overflow-wrap:anywhere;}

.bh-byline{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 20px;
  padding:14px 0;border-top:1px solid #eceff6;border-bottom:1px solid #eceff6;}
.bh-byline-sv{display:inline-flex;align-items:center;gap:10px;font-size:13px;color:var(--bd-text);}
.bh-byline-sv img{width:40px;height:40px;border-radius:50%;object-fit:cover;background:var(--bd-ice);}
.bh-byline-title{font-size:12px;color:#8a93ad;}
.bh-byline-dates{display:flex;flex-wrap:wrap;gap:4px 14px;margin:0;font-size:12px;color:#8a93ad;}
.bh-operator{margin:12px 0 0;font-size:12px;line-height:1.7;color:#8a93ad;}
.bh-adnote{display:inline-block;margin:10px 0 0;padding:4px 10px;font-size:12px;color:#666;
  background:var(--bd-gray-bg);border-radius:var(--bd-radius-btn);}
.bh-article-thumb{margin:24px 0 0;}
.bh-article-thumb img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:4px;}

/* ---------- 3. 本文 ---------- */
.bh-content{margin-top:32px;font-size:16px;line-height:1.95;letter-spacing:.02em;color:#333;}
.bh-content :where(p, div, li, td, th, dd){word-break:normal;overflow-wrap:anywhere;}
.bh-content > *{margin-top:0;margin-bottom:0;}
.bh-content > * + *{margin-top:1.4em;}
.bh-content > h2{margin-top:2.8em;}
.bh-content > h3{margin-top:2.2em;}
.bh-content h2{position:relative;padding:0 0 14px;font-family:var(--bd-serif);font-size:24px;font-weight:600;
  line-height:1.55;color:var(--bd-text);border-bottom:1px solid #e3e7f2;scroll-margin-top:100px;}
.bh-content h2:after{content:"";position:absolute;left:0;bottom:-1px;width:56px;height:2px;background:var(--bd-blue);}
.bh-content h3{padding-left:14px;font-size:19px;font-weight:600;line-height:1.6;
  border-left:3px solid var(--bd-blue);scroll-margin-top:100px;}
.bh-content h4{font-size:17px;font-weight:600;}
.bh-content a{color:var(--bd-blue);text-decoration:underline;text-underline-offset:3px;}
.bh-content strong, .bh-content b{font-weight:700;}
.bh-content ul{list-style:disc;padding-left:1.4em;}
.bh-content ol{list-style:decimal;padding-left:1.6em;}
.bh-content li + li{margin-top:.4em;}
.bh-content li > ul, .bh-content li > ol{margin-top:.4em;}
.bh-content .wp-block-table{overflow-x:auto;}
.bh-content table{width:100%;border-collapse:collapse;font-size:14px;line-height:1.75;}
.bh-content th, .bh-content td{padding:10px 12px;text-align:left;vertical-align:top;border:1px solid #e3e7f2;}
.bh-content thead th, .bh-content thead td{font-weight:600;background:var(--bd-tint);}
.bh-content figcaption{margin-top:8px;font-size:12px;color:#8a93ad;}
.bh-content img{height:auto;border-radius:4px;}
.bh-content blockquote{padding:16px 20px;background:#f7f8fb;border-left:3px solid #c3cadb;}
.bh-content hr{border:0;border-top:1px solid #e3e7f2;}

/* 囲み系パーツの中の余白 */
.bh-content :is(.bh-answer, .bh-caution, .bh-doctor, .bh-room, .bh-faq) > *{margin-top:0;margin-bottom:0;}
.bh-content :is(.bh-answer, .bh-caution, .bh-doctor, .bh-room, .bh-faq) > * + *{margin-top:.7em;}

/* ---------- 4. 目次（テーマが自動挿入） ---------- */
.bh-toc{padding:20px 24px;background:var(--bd-tint);border:1px solid var(--bd-line);border-radius:4px;}
.bh-toc-title{margin:0 0 8px;font-size:14px;font-weight:600;letter-spacing:.12em;color:var(--bd-navy);}
.bh-content .bh-toc ol{list-style:none;padding:0;counter-reset:bh-toc;}
.bh-toc li{position:relative;padding-left:2.2em;font-size:14.5px;line-height:1.7;counter-increment:bh-toc;}
.bh-toc li:before{content:counter(bh-toc, decimal-leading-zero);position:absolute;left:0;top:.15em;
  font-size:12px;font-weight:600;color:var(--bd-blue);}
.bh-content .bh-toc a{color:var(--bd-text);text-decoration:none;}
.bh-content .bh-toc a:hover{color:var(--bd-blue);opacity:1;}

/* ---------- 5. 共通パーツ ---------- */
/* 結論ボックス */
.bh-answer{padding:22px 24px;background:#fff;border:1px solid var(--bd-blue);border-radius:4px;}
.bh-answer-title{font-size:14px;font-weight:700;letter-spacing:.1em;color:var(--bd-blue);}

/* 成分プロフィール表 */
.bh-content .bh-profile td:first-child{width:34%;font-weight:600;color:var(--bd-navy);background:var(--bd-tint);}

/* 医師コメント枠（顔写真はCSSで表示） */
.bh-doctor{position:relative;margin-left:84px;padding:16px 20px;background:var(--bd-ice);border-radius:6px;}
.bh-doctor:before{content:"";position:absolute;left:-84px;top:0;width:64px;height:64px;border-radius:50%;
  background:#fff url(../img/kutsuki-ritsuko-200.webp) center/cover no-repeat;border:1px solid var(--bd-line);}
.bh-doctor:after{content:"";position:absolute;left:-8px;top:24px;border-style:solid;border-width:8px 8px 8px 0;
  border-color:transparent var(--bd-ice) transparent transparent;}
.bh-doctor-name{font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--bd-blue);}

/* 注意ボックス */
.bh-caution{padding:18px 22px;background:#fff7f2;border:1px solid #f6d3c2;border-radius:4px;}
.bh-caution-title{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:700;color:var(--bd-orange);}
.bh-caution-title:before{content:"!";display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  width:20px;height:20px;font-size:13px;line-height:1;color:#fff;background:var(--bd-orange);border-radius:50%;}

/* 関連アイテム枠（[bh_items]） */
.bh-items{display:grid;gap:12px;}
.bh-item{display:grid;grid-template-columns:96px 1fr;gap:18px;align-items:center;padding:16px;
  background:#fff;border:1px solid #e6e8f0;border-radius:4px;}
.bh-item-img img{display:block;width:96px;height:96px;object-fit:contain;background:var(--bd-tint);border-radius:4px;}
.bh-item-cat{display:inline-block;padding:3px 8px;font-size:10px;font-weight:600;letter-spacing:.06em;line-height:1.3;
  color:#fff;background:var(--bd-cat-advanced);border-radius:3px;}
.bh-item--basic .bh-item-cat{background:var(--bd-cat-basic);}
.bh-item--unique .bh-item-cat{background:var(--bd-cat-unique);}
.bh-item-name{margin-top:6px !important;font-family:var(--bd-serif);font-size:17px;font-weight:600;line-height:1.5;}
.bh-items .bh-item-name a{color:var(--bd-text);text-decoration:none;}
.bh-item-lead{margin-top:4px !important;font-size:14px;line-height:1.8;color:#555;}
.bh-item-links{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:10px !important;}
.bh-items .bh-item-btn{display:inline-block;padding:8px 18px;font-size:13px;font-weight:600;color:#fff;
  text-decoration:none;background:var(--bd-blue);border-radius:var(--bd-radius-btn);}
.bh-items .bh-item-sub{font-size:13px;}
.bh-item-body > *{margin:0;}

/* 他社品リンク（楽天ROOM） */
.bh-room{position:relative;padding:18px 22px;border:1px solid #e6e8f0;border-radius:4px;}
.bh-room:before{content:"PR";position:absolute;top:-9px;left:16px;padding:0 8px;font-size:11px;
  letter-spacing:.08em;line-height:18px;color:#8a93ad;background:#fff;border:1px solid #e6e8f0;border-radius:3px;}
.bh-room-name{font-size:16px;font-weight:600;}
.bh-room-facts{font-size:14px;color:#555;}
.bh-content .bh-room-link a{display:inline-block;padding:8px 18px;font-size:13px;color:var(--bd-text);
  text-decoration:none;border:1px solid #c3cadb;border-radius:var(--bd-radius-btn);}

/* FAQ */
.bh-faq{padding:4px 0;}
.bh-content .bh-faq h3{padding-left:0;font-size:17px;border-left:0;}
.bh-faq h3:before{content:"Q";margin-right:10px;font-family:var(--bd-serif);color:var(--bd-blue);}

/* ---------- 6. 記事末 ---------- */
/* 監修者ボックス */
.bh-sv-box{margin-top:56px;padding:24px;background:#fff;border:1px solid #e6e8f0;border-radius:4px;}
.bh-sv-label{margin:0 0 14px;font-size:12px;letter-spacing:.12em;color:#8a93ad;}
.bh-sv-inner{display:grid;grid-template-columns:96px 1fr;gap:20px;align-items:start;}
.bh-sv-inner img{width:96px;height:96px;border-radius:50%;object-fit:cover;background:var(--bd-ice);}
.bh-sv-name{margin:0;font-family:var(--bd-serif);font-size:20px;font-weight:600;}
.bh-sv-title{margin:4px 0 0;font-size:13px;color:#666;}
.bh-sv-bio{margin:10px 0 0;font-size:14px;line-height:1.85;word-break:normal;}
.bh-sv-link{display:inline-block;margin-top:12px;font-size:13px;color:var(--bd-blue);}
.bh-sv-link:after{content:" →";}

/* 美肌道とはボックス（ECのCTAと同じ配色） */
.bh-brand-box{padding:56px 20px;background:var(--bd-navy);}
.bh-brand-box-inner{max-width:680px;margin:0 auto;text-align:center;}
.bh-brand-box-eyebrow{margin:0 0 10px;font-size:12px;font-weight:600;letter-spacing:.24em;color:var(--bd-gold);}
.bh-brand-box-title{margin:0 0 18px;font-family:var(--bd-serif);font-size:24px;font-weight:600;color:#fff;}
.bh-brand-box-text{margin:0;font-size:14.5px;line-height:2;text-align:left;color:rgba(255,255,255,.88);word-break:normal;}
.bh-brand-box-btn{display:inline-block;margin-top:26px;padding:14px 40px;font-size:15px;font-weight:600;
  color:#fff;background:var(--bd-orange);border-radius:var(--bd-radius-btn);}
.bh-brand-box-btn:hover{color:#fff;opacity:.85;}

/* 関連記事 */
.bh-related{padding:56px 0 72px;}

/* ---------- 7. 記事カード・一覧 ---------- */
.bh-section{padding-top:48px;}
.bh-home .bh-section:last-child, .bh-archive{padding-bottom:80px;}
.bh-section-title{margin:0 0 24px;font-family:var(--bd-serif);font-size:22px;font-weight:600;line-height:1.5;}
.bh-section-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:24px;}
.bh-section-head .bh-section-title{margin:0;}
.bh-section-more{flex-shrink:0;font-size:13px;color:var(--bd-blue);}
.bh-section-more:after{content:" →";}

.bh-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 28px;}
.bh-card-link{display:block;color:inherit;}
.bh-card-link:hover{opacity:1;}
.bh-card-link:hover .bh-card-title{color:var(--bd-blue);}
.bh-card-thumb{aspect-ratio:16/9;overflow:hidden;background:var(--bd-ice);border-radius:4px;}
.bh-card-thumb img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .3s;}
.bh-card-link:hover .bh-card-thumb img{transform:scale(1.03);}
.bh-card-noimg{display:flex;align-items:center;justify-content:center;width:100%;height:100%;
  background:linear-gradient(135deg,#f3f6fc 0%,#e4eaf8 100%);}
.bh-card-noimg span{font-family:var(--bd-serif);font-size:17px;letter-spacing:.12em;color:var(--bd-navy);}
.bh-card-body{padding-top:12px;}
.bh-card-cat{margin:0;font-size:11.5px;letter-spacing:.06em;color:var(--bd-blue);}
.bh-card-title{margin:4px 0 0;font-size:15.5px;font-weight:600;line-height:1.65;overflow-wrap:anywhere;transition:color .2s;}
.bh-card-date{margin:6px 0 0;font-size:12px;color:#8a93ad;}

.bh-home-intro{padding:56px 0 8px;text-align:center;}
.bh-eyebrow{margin:0 0 10px;font-size:12px;font-weight:600;letter-spacing:.3em;color:var(--bd-blue);}
.bh-home-title{margin:0;font-family:var(--bd-serif);font-size:32px;font-weight:600;letter-spacing:.04em;}
.bh-home-lead{max-width:560px;margin:14px auto 0;font-size:15px;line-height:1.9;color:#555;word-break:normal;}
.bh-page-head{padding:24px 0 8px;}
.bh-page-title{margin:0;font-family:var(--bd-serif);font-size:28px;font-weight:600;line-height:1.5;}
.bh-page-desc{max-width:760px;margin-top:12px;font-size:14.5px;line-height:1.9;color:#555;}
.bh-archive .bh-cards{margin-top:32px;}
.bh-empty{padding:24px 0;font-size:14px;color:#8a93ad;}

.bh-pagination .nav-links{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:48px;}
.bh-pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;
  padding:0 12px;font-size:14px;border:1px solid #e3e7f2;border-radius:var(--bd-radius-btn);}
.bh-pagination .page-numbers.current{color:#fff;background:var(--bd-blue);border-color:var(--bd-blue);}
.bh-pagination .page-numbers.dots{border:0;}

.bh-404{padding:72px 20px 96px;text-align:center;}
.bh-404-text{margin:16px 0 0;font-size:15px;color:#555;word-break:normal;}
.bh-404-cats{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:28px 0 0;}
.bh-404-cats a{display:inline-block;padding:8px 16px;font-size:13px;border:1px solid var(--bd-line);border-radius:var(--bd-radius-btn);}
.bh-404-home{display:inline-block;margin-top:28px;font-size:14px;color:var(--bd-blue);}

/* ---------- 8. レスポンシブ ---------- */
@media (max-width:900px){
  .bh-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px;}
}
@media (max-width:767px){
  .bh-article-title{font-size:23px;}
  .bh-content{font-size:15.5px;}
  .bh-content h2{font-size:20px;scroll-margin-top:76px;}
  .bh-content h3{font-size:17px;scroll-margin-top:76px;}
  .bh-toc{padding:16px 18px;}
  .bh-doctor{margin-left:64px;padding:14px 16px;}
  .bh-doctor:before{left:-64px;width:50px;height:50px;}
  .bh-doctor:after{top:18px;}
  .bh-item{grid-template-columns:72px 1fr;gap:14px;padding:14px;}
  .bh-item-img img{width:72px;height:72px;}
  .bh-sv-box{padding:20px;}
  .bh-sv-inner{grid-template-columns:72px 1fr;gap:16px;}
  .bh-sv-inner img{width:72px;height:72px;}
  .bh-brand-box{padding:44px 20px;}
  .bh-brand-box-title{font-size:21px;}
  .bh-home-intro{padding-top:40px;}
  .bh-home-title{font-size:26px;}
  .bh-page-title{font-size:23px;}
  .bh-section-title{font-size:19px;}
  /* スマホのカードは横並び（画像を左に） */
  .bh-cards{grid-template-columns:1fr;gap:20px;}
  .bh-card-link{display:grid;grid-template-columns:128px 1fr;gap:14px;align-items:start;}
  .bh-card-body{padding-top:0;}
  .bh-card-title{font-size:14.5px;}
  .bh-card-noimg span{font-size:12px;letter-spacing:.06em;}
}