@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.18
*/

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

/* ======================================
** サイドバー目次 スクロール追従（スティッキー）設定
** ====================================== */
/* 一般訪問者向け（管理バーなし） */
#sidebar-scroll {
  top: 20px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}

/* 管理者向け（管理バーあり: 32px） */
.admin-bar #sidebar-scroll {
  top: calc(32px + 20px);
  max-height: calc(100vh - 32px - 40px);
}

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

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

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


/************************************
** サイドバー目次の追従を有効にする
** （bodyのoverflow-x:hiddenがposition:stickyを
**   無効化していたため、clipに変更）
************************************/
body {
  overflow-x: clip !important;
}


/************************************
** スマホ：ブログタイトル周りの余白を狭く
** （文字の大きさはそのまま、余白のみ調整）
************************************/
@media screen and (max-width: 834px){
  #header .logo-header{ padding-top: 8px !important; }
  #header .site-name-text{ line-height: 1.15 !important; }
  #header .tagline{ margin-bottom: 6px !important; }
  #header .site-name{ margin-bottom: 0 !important; }
}


/************************************
** 表の型（不登校びより標準）2026-08-02
** 使い方：表ブロックの「追加CSSクラス」に hb-table と入れる
** 色を変えたいときは、この中の色コードだけ直せば全部の表が変わる
** ※.entry-content を付けないこと。付けると編集画面に当たらない
************************************/
figure.hb-table{
  border-radius: 10px !important;
  overflow: hidden !important;
  border: 1px solid #F0E6C4 !important;
  margin: 1.4em 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}
figure.hb-table table{
  width: 100% !important;
  margin: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  border: none !important;
}
figure.hb-table thead{ border-bottom: none !important; }
figure.hb-table th,
figure.hb-table td{
  padding: 11px 13px !important;
  border: none !important;
  border-bottom: 1px solid #F0E6C4 !important;
  text-align: left !important;
  vertical-align: middle !important;
  line-height: 1.6 !important;
  background: #FFFDF3 !important;
  color: #333333 !important;
}
figure.hb-table td + td,
figure.hb-table th + th,
figure.hb-table th + td{ border-left: 1px solid #F0E6C4 !important; }
figure.hb-table thead th{
  background: #FBC861 !important;
  color: #333333 !important;
  font-weight: 700 !important;
  border-bottom: 2px solid #E8B347 !important;
  border-left-color: #E8B347 !important;
}
figure.hb-table tbody th,
figure.hb-table tbody td:first-child{
  background: #FFF9DF !important;
  font-weight: 700 !important;
}
figure.hb-table tbody tr:last-child th,
figure.hb-table tbody tr:last-child td{ border-bottom: none !important; }
@media screen and (max-width: 834px){
  figure.hb-table th,
  figure.hb-table td{ padding: 9px 10px !important; }
}

/************************************
** 表の型・その2「行で色」 hb-table hb-row
** 数字を見比べる表（料金・比較）に使う。
** 行がずれて読み違えるのを防ぐのが目的。
** 項目を1つ探して読む表（基本情報・機能一覧）は
** hb-table だけ（項目列に色）を使うこと。
************************************/
figure.hb-table.hb-row tbody th,
figure.hb-table.hb-row tbody td:first-child{
  font-weight: 400 !important;
}
figure.hb-table.hb-row tbody tr:nth-child(odd) th,
figure.hb-table.hb-row tbody tr:nth-child(odd) td{ background: #FFF9DF !important; }
figure.hb-table.hb-row tbody tr:nth-child(even) th,
figure.hb-table.hb-row tbody tr:nth-child(even) td{ background: #FFFDF3 !important; }


/************************************
** 手順の型 hb-steps（2026-08-05）
** 使い方：表ブロックの「追加CSSクラス」に hb-steps と入れる
** 1列目に番号＋見出し、2列目に説明を書く
************************************/
figure.hb-steps{
  background: #FFFDF3 !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 18px 20px !important;
  margin: 1.4em 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: visible !important;
}
figure.hb-steps table{
  width: 100% !important;
  margin: 0 !important;
  border: none !important;
  border-collapse: collapse !important;
  background: transparent !important;
}
figure.hb-steps thead{ display: none !important; }
figure.hb-steps tr{ background: transparent !important; }
figure.hb-steps td{
  display: block !important;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  color: #6A859C !important;
  line-height: 1.6 !important;
}
figure.hb-steps tbody tr{
  display: block !important;
  padding: 12px 0 !important;
  border-bottom: 1px dashed #EADFC0 !important;
}
figure.hb-steps tbody tr:first-child{ padding-top: 0 !important; }
figure.hb-steps tbody tr:last-child{ border-bottom: none !important; padding-bottom: 0 !important; }
figure.hb-steps td:first-child{
  font-weight: 700 !important;
  font-size: 16px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 4px !important;
}
figure.hb-steps td:last-child{
  padding-left: 34px !important;
  font-size: 13px !important;
}
figure.hb-steps .hb-num{
  flex: 0 0 auto;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: #FBC861;
  color: #5C4206;
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
@media screen and (max-width: 834px){
  figure.hb-steps{ padding: 14px 15px !important; }
  figure.hb-steps td:first-child{ font-size: 15px !important; }
  figure.hb-steps td:last-child{ padding-left: 32px !important; font-size: 13px !important; }
}


/************************************
** 手順の見出し hb-step-head（2026-08-05）
** H3を使わずに「STEP◯」を見出しのように見せる（目次を短くするため）
** 使い方：段落ブロックの「追加CSSクラス」に hb-step-head を入れ、
**         本文の先頭に <span class="hb-step">1</span> を置く
************************************/
.entry-content p.hb-step-head,
p.hb-step-head{
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #6A859C !important;
  margin: 2em 0 0.6em !important;
}
p.hb-step-head .hb-step{
  flex: 0 0 auto;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: #FBC861;
  color: #5C4206;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-weight: 700;
}
p.hb-step-head .hb-step::before{
  content: "STEP";
  font-size: 9px;
  letter-spacing: 0.06em;
  opacity: 0.9;
  margin-bottom: 2px;
}
p.hb-step-head .hb-step-num{ font-size: 18px; }
@media screen and (max-width: 834px){
  p.hb-step-head{ font-size: 16px !important; gap: 10px !important; }
  p.hb-step-head .hb-step{ width: 40px; height: 40px; }
  p.hb-step-head .hb-step-num{ font-size: 16px; }
}


/* ===== 見出しの区別（H2＝濃い黄／H3＝薄い黄）2026-08-05 ===== */
/* 編集画面にも効かせるため .editor-styles-wrapper を併記する */
.entry-content h2,
.editor-styles-wrapper h2{
  background: #FBC861 !important;
  color: #333333 !important;
  border-left: none !important;
  border-bottom: none !important;
  border-radius: 0 !important;
  padding: 18px 20px !important;
  background-image: linear-gradient(#FBC861 4px, #FFFFFF 4px, #FFFFFF 6px, #FBC861 6px, #FBC861 calc(100% - 6px), #FFFFFF calc(100% - 6px), #FFFFFF calc(100% - 4px), #FBC861 calc(100% - 4px)) !important;
}
.entry-content h3,
.editor-styles-wrapper h3{
  background: #FFF9DF !important;
  color: #333333 !important;
  border-left: 6px solid #FBC861 !important;
  border-bottom: none !important;
  border-radius: 0 !important;
  padding: 10px 16px !important;
}


/* ===== タブ見出しボックスの色を表・見出しにそろえる 2026-08-05 ===== */
/* Cocoon既定は「#FFD900に白文字」でコントラスト1.4。ほぼ読めないので黒文字にする */
/* 黄色を指定した箱と、色を指定していない箱（グレーになる）だけが対象。赤・青などを選んだ箱はそのまま */
.entry-content .tab-caption-box.has-yellow-border-color > .tab-caption-box-label,
.entry-content .tab-caption-box:not(.has-border-color) > .tab-caption-box-label,
.editor-styles-wrapper .tab-caption-box.has-yellow-border-color > .tab-caption-box-label,
.editor-styles-wrapper .tab-caption-box:not(.has-border-color) > .tab-caption-box-label{
  background: #FBC861 !important;
  color: #333333 !important;
}
.entry-content .tab-caption-box.has-yellow-border-color > .tab-caption-box-content,
.entry-content .tab-caption-box:not(.has-border-color) > .tab-caption-box-content,
.editor-styles-wrapper .tab-caption-box.has-yellow-border-color > .tab-caption-box-content,
.editor-styles-wrapper .tab-caption-box:not(.has-border-color) > .tab-caption-box-content{
  border-color: #FBC861 !important;
  background: #FFFDF3 !important;
}