@charset "UTF-8";
/*! Theme Name: Cocoon Child Template:   cocoon-master Version:    1.0.6 */

/************************************
 ** 子テーマ用のスタイルを書く
 ************************************/ 
/*トップページ用固定ページから表示を消す（2019.1.20）*/ 
/*フロント固定ページのタイトルを非表示*/ 
.home.page .entry-title, 
/*フロント固定ページの投稿日・更新日を非表示*/ 
.home.page .date-tags{ display: none; }

/*カテゴリページからブログカードへのリンクを非表示（2021.11.8）*/ 
.category .list { display: none; }

/*カテゴリページからページネーションを非表示（2021.11.22）*/ 
/*左から順に、次のページ、ページ番号、ページ番号間の「…」*/ 
.pagination-next, .page-numbers, page-numbers.dots { display: none; }

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

/* コメント入力欄の「メールアドレスが公開されることはありません。」を削除（2019.5.31） */ 
.comment-form-email { display:none; } 
.comment-form-url { display:none; } 
.form-allowed-tags {display:none; } 
.comment-notes {display:none; } 
.says{display:none; }


/* アフィリエイトの複数本を横スクロール（2026.5.2）  */
/*  PC・スマホ共通：常に横並び＆横スクロールにする設定  */
.affiliate-row {
  display: flex;
  flex-wrap: nowrap; /*  画面サイズに関わらず下へ折り返さず1行に強制する  */
  overflow-x: auto;  /*  画面からはみ出た部分を横スクロール可能にする  */
  gap: 15px;
  margin-bottom: 30px;
  padding-bottom: 15px; /*  スクロールバーが表示された時のための余白  */
  -webkit-overflow-scrolling: touch; /*  スマホ・タブレットでのスクロールを滑らかにする */ 
}

/* 各リンクの幅の設定  */
.affiliate-item {
  /*  縮まないように固定幅を持たせる（PCでもスマホでも同じ幅をキープ） */ 
  flex: 0 0 200px; 
  box-sizing: border-box; 
}

/* アフィリエイトリンク内の画像を歪ませないための設定 */
.affiliate-item img {
  max-width: 100%; /* 箱の幅からはみ出さないようにする */
  height: auto;    /* 縦横の比率（アスペクト比）を自動で保つ */
  object-fit: contain; /* 画像全体が綺麗に収まるようにする */
}


/* 学習チェックボタンの実装（2026.6.23）  */
/* --- 1. 各問題ページ：学習チェックボタン（丸型ボタンの復活） --- */
.status-btn {
  padding: 6px 16px;
  margin: 0 4px;
  border: 2px solid #ccc;
  border-radius: 20px; /* ここで綺麗な丸枠にしています */
  background-color: #fff;
  color: #666;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
}
/* 各ボタンの選択時（アクティブ）の色設定 */
.btn-perfect.active { background-color: #e0f2f1; border-color: #26a69a; color: #00695c; }
.btn-anxious.active { background-color: #fff8e1; border-color: #ffca28; color: #ff8f00; }
.btn-bad.active     { background-color: #ffebee; border-color: #ef5350; color: #c62828; }

/* --- 2. 目次ページ：丸枠ミニバッジ（下線・丸枠完全両立版） --- */
.toc-check {
  display: inline;
  text-decoration: underline; /* リンクテキストの下線を表示 */
}

/* 共通のアイコン基本スタイル（問題ページのボタンのミニチュア版） */
.toc-check::before {
  display: inline-block;
  font-size: 0.75em;
  font-weight: bold;
  padding: 2px 10px;
  border-radius: 12px;
  border: 2px solid #ccc;
  background-color: #fff;
  color: #666;
  white-space: nowrap;
  margin-right: 8px; /* アイコンと文字の間のすき間 */
  text-decoration: none !important; /* バッジ部分だけ下線を強制的に消す */
  line-height: 1.2;
}

/* 目次バッジ：完璧（青）の状態 */
.toc-check.perfect::before {
  content: "完璧";
  background-color: #e0f2f1;
  border-color: #26a69a;
  color: #00695c;
}

/* 目次バッジ：不安（黄）の状態 */
.toc-check.anxious::before {
  content: "不安";
  background-color: #fff8e1;
  border-color: #ffca28;
  color: #ff8f00;
}

/* 目次バッジ：ダメ（赤）の状態 */
.toc-check.bad::before {
  content: "ダメ";
  background-color: #ffebee;
  border-color: #ef5350;
  color: #c62828;
}

/* --- 3. 新機能：キャンセルボタン（グレーの枠） --- */
.btn-clear {
  background-color: #f5f5f5; border-color: #ccc; color: #666;
}
.btn-clear.active {
  background-color: #e0e0e0; border-color: #9e9e9e; color: #333;
}

/* --- 4. 新機能：目次の一括クリアボタン --- */
.bulk-clear-area {
  margin: 20px 0;
  padding: 15px;
  background-color: #f9f9f9;
  border: 1px dashed #ccc;
  border-radius: 8px;
}
.bulk-clear-btn {
  padding: 8px 20px;
  background-color: #666;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.2s;
}
.bulk-clear-btn:hover {
  background-color: #444;
}