@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}


/* ============================================================
   植毛チョイス カスタム
   アイキャッチ画像内にカテゴリ名を描き込んでいるため、
   テーマ側のカテゴリラベル（.cat-label）は非表示にする
   ============================================================ */
.entry-card-thumb .cat-label,
.related-entry-card-thumb .cat-label,
.card-thumb .cat-label,
.widget-entry-card-thumb .cat-label,
.carousel-entry-card-thumb .cat-label,
.eye-catch .cat-label {
  display: none !important;
}

/* 記事本文に挿入した写真 */
#content .photo img {
  border-radius: 0;
}


/* 追従CTAバー（モバイル） */
#sc-fixcta{position:fixed;left:0;right:0;bottom:0;z-index:9998;display:flex;align-items:stretch;background:rgba(255,255,255,.97);border-top:1px solid #e2e0da;box-shadow:0 -3px 14px rgba(0,0,0,.12);padding:8px 8px 10px;transform:translateY(120%);transition:transform .28s ease;}
#sc-fixcta.on{transform:translateY(0);}
#sc-fixcta a{flex:1;display:block;text-align:center;text-decoration:none;background:linear-gradient(135deg,#0f6b63,#12867b);color:#fff;border-radius:8px;padding:11px 8px;box-shadow:0 3px 0 #0a4a44;}
#sc-fixcta a .t{display:block;font-size:14px;font-weight:800;line-height:1.4;}
#sc-fixcta a .s{display:block;font-size:10px;opacity:.85;font-weight:600;margin-top:2px;}
#sc-fixcta .x{flex:0 0 34px;margin-left:6px;background:#efeee9;border:1px solid #e2e0da;border-radius:8px;color:#5d6570;font-size:16px;line-height:1;cursor:pointer;}
@media screen and (min-width:835px){#sc-fixcta{display:none !important;}}


/* ============================================================
   スマホ最適化（全記事共通・記事HTMLのスコープCSSを上書き）
   前提：読者の大半はスマートフォン
   ============================================================ */

/* --- 1. 日本語の折り返しと禁則処理 -------------------------- */
[id^="article-"],
[id^="article-"] * {
  word-break: normal !important;   /* 「3,000株」が「3,」「000株」に割れるのを防ぐ */
  overflow-wrap: anywhere;         /* 長いURL・英数字だけ安全に折り返す */
  line-break: strict;              /* 行頭に 、。」っ が来ないようにする */
}

/* --- 2. 本文タイポグラフィ --------------------------------- */
[id^="article-"] .wrap { max-width: 560px; }

[id^="article-"] .bt {
  font-size: 16px !important;
  line-height: 2.0 !important;
  letter-spacing: 0.02em;
  margin-bottom: 22px !important;
}
[id^="article-"] .bt b,
[id^="article-"] .bt strong {
  font-weight: 800;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;   /* 折り返してもマーカーが途切れない */
}

/* --- 3. 見出し --------------------------------------------- */
[id^="article-"] h2 {
  font-size: 21px !important;
  line-height: 1.55 !important;
  margin-top: 8px;
}
[id^="article-"] h3 {
  font-size: 17.5px !important;
  line-height: 1.6 !important;
}
[id^="article-"] .sec { padding-left: 16px; padding-right: 16px; }

/* --- 4. 表：文字を縮めず、横スクロールさせる ----------------- */
[id^="article-"] .sc-scroll-hint {
  font-size: 11.5px;
  color: #8b929b;
  margin: 14px 0 -8px;
  text-align: right;
  letter-spacing: .04em;
}
[id^="article-"] .tbl {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;   /* iOSの「戻る」ジェスチャ誤爆を防ぐ */
  border-radius: 8px;
  /* 右端に影を出して「まだ続きがある」ことを示す（JS不要） */
  background:
    linear-gradient(90deg, #f5f4f0 30%, rgba(245,244,240,0)) left  / 24px 100% no-repeat local,
    linear-gradient(90deg, rgba(245,244,240,0), #f5f4f0 70%) right / 24px 100% no-repeat local,
    radial-gradient(farthest-side at 0    50%, rgba(0,0,0,.14), rgba(0,0,0,0)) left  / 10px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.14), rgba(0,0,0,0)) right / 10px 100% no-repeat scroll;
}
[id^="article-"] .tbl table { min-width: 520px; }
[id^="article-"] .tbl th,
[id^="article-"] .tbl td {
  font-size: 13.5px !important;     /* Cocoonの0.8em(12.8px)まで潰れるのを防ぐ */
  padding: 10px 9px !important;
  line-height: 1.65 !important;
  white-space: nowrap;
}
[id^="article-"] .tbl td.l {        /* 1列目（クリニック名など）を固定 */
  position: sticky;
  left: 0;
  z-index: 2;
  background: #fbfaf8 !important;   /* 透けるので背景色は必須 */
  box-shadow: 2px 0 0 rgba(0,0,0,.07);
  white-space: normal;
  min-width: 6.5em;
}

/* --- 5. ハイライトボックス --------------------------------- */
[id^="article-"] .box {
  font-size: 14.5px !important;
  line-height: 1.95 !important;
  padding: 15px 15px !important;
  border-radius: 8px;
}
[id^="article-"] .box .bh { font-size: 14px !important; margin-bottom: 7px !important; }

/* --- 6. 目次：タップ領域を確保 ------------------------------ */
[id^="article-"] .toc a {
  font-size: 14.5px !important;
  padding: 7px 0;
  line-height: 1.7 !important;
}

/* --- 7. FAQ：タップ領域を確保 ------------------------------- */
[id^="article-"] .q .qh {
  font-size: 14.5px !important;
  padding: 15px 40px 15px 15px !important;
  line-height: 1.75 !important;
}
[id^="article-"] .q .qa { font-size: 14px !important; line-height: 2.0 !important; }

/* --- 8. 結論ボックス・関連記事 ------------------------------ */
[id^="article-"] .concl li { font-size: 14.5px !important; line-height: 1.95 !important; }
[id^="article-"] .rel a .rh { font-size: 14.5px !important; }
[id^="article-"] .rel a .rd { font-size: 12.5px !important; line-height: 1.8 !important; }

/* --- 9. 図版のキャプション --------------------------------- */
[id^="article-"] .cap { font-size: 12.5px !important; line-height: 1.85 !important; }

/* --- 10. 読了プログレスバー（対応ブラウザのみ・害なし） ------ */
#sc-progress {
  position: fixed; top: 0; left: 0;
  width: 100%; height: 3px;
  background: linear-gradient(90deg,#0f6b63,#c2703a);
  transform: scaleX(0);
  transform-origin: 0 50%;
  z-index: 10000;
  will-change: transform;
}

/* --- 11. スマホ用 追従目次ボタン ---------------------------- */
#sc-toc-fab {
  position: fixed;
  right: 14px;
  bottom: 86px;               /* 追従CTAバーの上に置く */
  z-index: 9997;
  background: rgba(10,74,68,.94);
  color: #fff;
  border: 0;
  border-radius: 24px;
  padding: 11px 16px;
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 4px 14px rgba(0,0,0,.28);
  cursor: pointer;
  display: none;
}
#sc-toc-sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 9999;
  background: #fff;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -6px 26px rgba(0,0,0,.25);
  max-height: 72vh;
  overflow-y: auto;
  padding: 16px 18px 26px;
  transform: translateY(110%);
  transition: transform .28s ease;
}
#sc-toc-sheet.open { transform: translateY(0); }
#sc-toc-sheet .sheet-h {
  font-size: 14px; font-weight: 800; color: #0a4a44;
  margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center;
}
#sc-toc-sheet .sheet-h span { font-size: 20px; color: #8b929b; }
#sc-toc-sheet a {
  display: block;
  padding: 11px 4px;
  border-bottom: 1px dotted #e2e0da;
  color: #20242b;
  text-decoration: none;
  font-size: 14.5px;
  line-height: 1.6;
}
#sc-toc-backdrop {
  position: fixed; inset: 0; z-index: 9998;
  background: rgba(0,0,0,.4);
  display: none;
}

@media screen and (min-width: 835px) {
  #sc-toc-fab, #sc-toc-sheet, #sc-toc-backdrop { display: none !important; }
}


/* ==== トップ固定ページ（id 1671）をサイト型に ==== */
.page-id-1671 .entry-title,
.page-id-1671 .date-tags,
.page-id-1671 .post-date,
.page-id-1671 .post-update,
.page-id-1671 .sns-share,
.page-id-1671 .sns-follow,
.page-id-1671 .author-box,
.page-id-1671 .breadcrumb,
.page-id-1671 .footer-breadcrumb-mobile,
.page-id-1671 #sidebar,
.page-id-1671 .pad,
.page-id-1671 .entry-card-wrap{display:none !important;}
.page-id-1671 #main{width:100% !important;max-width:100% !important;float:none !important;}
.page-id-1671 #main-in,
.page-id-1671 .main-in{max-width:100% !important;}
.page-id-1671 .content,
.page-id-1671 #content{max-width:100% !important;width:100% !important;}
.page-id-1671 .article,
.page-id-1671 .entry-content{margin:0 !important;padding:0 !important;}
.page-id-1671 #content .article{border:0;box-shadow:none;background:transparent;}


/* トップ固定ページ カード内spanを縦並びに強制 */
#sc-top .cat .num,#sc-top .cat .nm,#sc-top .cat .ds,#sc-top .cat .go,#sc-top .card .h,#sc-top .card .d,#sc-top .simbar .t,#sc-top .simbar .s{display:block !important;}


/* === sc-sticky-header v1 === */
#header-container{position:-webkit-sticky;position:sticky;top:0;z-index:9990;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.08)}
.admin-bar #header-container{top:32px}
@media screen and (max-width:782px){.admin-bar #header-container{top:46px}}
html{scroll-padding-top:80px}
#navi ul .sim-cta a{background:#2f5d8a;color:#fff !important;font-weight:700;border-radius:5px}
#navi ul .sim-cta a:hover{background:#24476a;color:#fff !important}
.sim-cta a::before{content:"▶ "}

/* === sc-sticky compact === */
#header-container .logo-header{padding:10px 0 !important}
#header-container .logo-header,#header-container .logo-header a{font-size:17px !important;line-height:1.35 !important}
#navi .navi-in>ul>li>a{height:44px !important}
#navi ul .sim-cta a{border-radius:0}
@media screen and (max-width:834px){#header-container{box-shadow:0 2px 8px rgba(0,0,0,.1)}}

/* === sc-sticky final === */
#header-in .tagline{display:none !important}
#header-container .logo-header{padding:8px 0 !important}
html{scroll-padding-top:106px}

/* === sc-logo v1 === */
#header-container .logo-header a{display:inline-block;background:url(https://shokumou-choice.com/wp-content/uploads/2026/07/shokumou-choice-logo.png) no-repeat left center;background-size:contain;width:238px;height:40px;font-size:0 !important;line-height:40px !important;color:transparent !important;vertical-align:middle}
#header-container .logo-header{padding:8px 0 !important}
@media screen and (max-width:600px){#header-container .logo-header a{width:184px;height:33px}}

/* === sc-home-eyecatch-hide === */
.page-id-1671 .eye-catch-wrap,.page-id-1671 header.article-header .eye-catch{display:none !important}

/* === sc-sim-hero-fix === */
.page-id-1329 .hero h2,.page-id-1329 .hero h2 *{background:transparent !important;color:#ffffff !important;border:0 !important;box-shadow:none !important;padding:0 !important}
.page-id-1329 .hero em{background:transparent !important;color:#ffd9a8 !important;font-style:normal}
.page-id-1329 .hero h2::before,.page-id-1329 .hero h2::after{display:none !important}

/* === sc-foot-h2-fix === */
[id^="article-"] .foot h2{background:transparent !important;background-color:transparent !important;border:0 !important;box-shadow:none !important;padding:0 0 8px !important;color:#fff !important}
[id^="article-"] .foot h2::before,[id^="article-"] .foot h2::after{display:none !important}

/* === sc-article-width === */
[id^="article-"] .wrap{max-width:none !important;margin-left:0 !important;margin-right:0 !important}

/* SC-CONTRAST-FIX */
.box.blue,.box.blue b,.box.blue strong,.has-blue-color{color:#0d6ba5 !important;}
.box.red,.box.red b,.box.red strong,.has-red-color{color:#c8002c !important;}
.sc-scroll-hint{color:#5f6670 !important;}
/* /SC-CONTRAST-FIX */

/* SC-MOBILEBAR-FIX */
.mobile-menu-buttons .navi-menu-button{display:none !important;}
/* /SC-MOBILEBAR-FIX */