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

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

/* ======================================
** サイドバー目次 スクロール追従（スティッキー）設定
** ====================================== */
/* 一般訪問者向け（管理バーなし） */
#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: #FFFFFF !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: #FFD900 !important;
  color: #333333 !important;
  font-weight: 700 !important;
  border-bottom: 2px solid #EAC500 !important;
  border-left-color: #EAC500 !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: #FFFFFF !important; }