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

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

body{
 font-family: "Helvetica","Arial","Hiragino Kaku Gothic ProN","Hiragino Sans",YuGothic,"Yu Gothic","メイリオ",Meiryo,sans-serif !important;	
}

img{
	border:solid 2px #c0c0c0;
	box-shadow:0px 0px 3px #808080
}

.ql-img-displayed-equation{
	border:solid 0px #c0c0c0;
	box-shadow:0px 0px 0px #808080
}


::selection {
  background:#84C98B; /* Safari */
	color:
}

::-moz-selection {
  background:#84C98B; /* Firefox */
}

.header .header-in {
  min-height: 0px !important;
}

.header-container {
  background-color: #111 !important;
}

menu-header .item-label:hover {
  border-left: #28b893 solid 8px;
}

.footer {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  color: #fff !important;
  background-color: #111 !important;
}

.article h2 {
  box-shadow: 0px 0px 0px 5px #d4dfbb;
  border: dashed 2px white;
  padding: 1em;
}

/* 連番 */
/* 初期化 */
body {
  counter-reset: h2;
}

/* h2：h3カウンターをリセット */
.article h2 {
  counter-reset: h3;
}

/* h3：h4カウンターをリセット */
.article h3 {
  counter-reset: h4;
}

/* 見出し番号の表示 */
.article h2::before {
  counter-increment: h2;
  content: counter(h2) ". ";
}

.article h3::before {
  counter-increment: h3;
  content: counter(h2) "-" counter(h3) ". ";
}

.article h4::before {
  counter-increment: h4;
  content: counter(h2) "-" counter(h3) "-" counter(h4) ". ";
}

.article strong {
  background: linear-gradient(transparent 80%, #fff070 50%);
  font-weight: bold;
  color: #000;
}

.article em {
  font-style: normal;
  font-weight: bold;
  background: #FFF9C4;
}

.article ul li {
  font-weight: normal;
}

.article ul li ul li {
  font-weight: normal;
}

.article ul li ul li ul li {
  font-weight: normal;
}

.article ul {
  list-style-type: disc !important;
}

.article ul ul {
  list-style-type: circle !important;
}

.article ul ul ul {
  list-style-type: square !important;
}

.article pre {
  font-size: 13px !important;
}

.sidebar h2, .sidebar h3 {
  background-color: #111 !important;
  color: #eee;
  font-size: 16px !important;
  padding: 5px;
  border-left: #28b893 solid 5px;
}

x
.sidebar a {
  font-weight: 600;
  color: #377547 !important;
}

#content a {
  color: #377547 !important;
}

table th {
  background: #6d6d6d !important;
  color: #eee !important;
  font-size: 14px !important;
}

table td {
  background: #ddd !important;
  font-size: 14px !important;
}

table tr:nth-child(odd) td {
  background: #eee !important;
  font-size: 14px !important;
}

/* 目次全体デザイン */
.toc{
    background:#fafffa; /* 目次全体の背景色を変える場合はここを変更 */
    border:none;
    display:block;
    border-top:5px solid;
    border-top-color:#839b5c;
    box-shadow: 0 2px 2px rgba(0,0,0,0.2);
    padding: 20px 25px;
}
/* 目次の文字指定 */
.toc-title {
    text-align:left;
    margin: 0 20px 20px -10px;
    padding-left: -20px;
    font-size: 23px;
    font-weight: 700;
    color: #839b5c; /* 目次の文字色を変える場合はここを変更 */
}
/* 目次のアイコン設定 */
.toc-title:before {
    top: 0;
    left: -45px;
    width: 50px;
    height: 50px;
    font-family: FontAwesome;
    content : "\f0ca"; /* アイコンを変える場合はここを変更 */
    font-size:20px;
    margin-right:5px;
    color:#FFF; /* アイコンの色を変える場合はここを変更 */
    background-color:#839b5c; /* アイコンの背景色を変える場合はここを変更 */
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    padding:14px;
}
/* 目次のデザインカスタマイズ */
.toc-content ol {
    padding: 0 0.5em;
    position: relative;
}
.toc-content ol li {
    line-height: 1.5;
    padding: 0.7em 0 0.5em 1.4em;
    border-bottom: dashed 1px silver;
    list-style-type: none!important;
}
/* 目次の各節の先頭にあるアイコンを設定 */
.toc-content ol li:before {
    font-family: FontAwesome;
    content: "\f138"; /* アイコンを変える場合はここを変更 */
    position: absolute;
    left : 0.5em;
    color: #839b5c; /* 色を変える場合はここを変更 */
}
.toc-content ol li:last-of-type {
    border-bottom: none;
}
.toc-content .toc-list li {
    font-weight:700; /* h2のみ太文字に */
}
.toc-content .toc-list li li {
    font-weight:normal; /* h3以降の文字サイズを普通に */
}

    .toggle-box {
      margin: 1em 0;
      border: 1px solid #ccc;
      border-radius: 8px;
      padding: 1em;
      background-color: #f9f9f9;
    }

    .toggle-box input[type="checkbox"] {
      display: none;
    }

    .toggle-box label {
      display: inline-block;
      cursor: pointer;
      font-weight: bold;
      color: #007acc;
      margin-bottom: 0.5em;
    }

    .toggle-box .content {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease;
    }

    .toggle-box input[type="checkbox"]:checked ~ .content {
      max-height: 500px; /* 適宜調整 */
    }

.warning-box {
  position: relative;
  padding: 36px 20px 20px 20px; /* 上に余白を追加してラベルと本文が重ならないように */
  border: 2px solid #f57c00; /* 濃いオレンジの枠線 */
  background-color: #fff8e1; /* 薄い背景色で注意感を演出 */
  border-radius: 8px;
}

/* 左上の「注意⚠️」ラベル */
.warning-box::before {
  content: "⚠️ 注意";
  position: absolute;
  top: 0;
  left: 0;
  background-color: #f57c00;
  color: white;
  font-weight: bold;
  padding: 6px 12px;
  border-bottom-right-radius: 6px;
  font-size: 14px;
}

.info-box {
  position: relative;
  padding: 36px 20px 20px 20px; /* ラベル分の余白を上に追加 */
  border: 2px solid #2196f3; /* 明るめの青 */
  background-color: #e3f2fd; /* 薄い水色背景で優しい印象 */
  border-radius: 8px;
  font-family: sans-serif;
  line-height: 1.6;
}

/* 左上の「ヒント」ラベル */
.info-box::before {
  content: "💡 ヒント";
  position: absolute;
  top: 0;
  left: 0;
  background-color: #2196f3; /* 青色ベース */
  color: white;
  font-weight: bold;
  padding: 6px 12px;
  border-bottom-right-radius: 6px;
  font-size: 14px;
}

.information-box {
  position: relative;
  padding: 40px 20px 20px 20px; /* ラベルの高さ分余白を確保 */
  border: 2px solid #1976d2;
  background-color: #e8f0fe;
  border-radius: 8px;
  font-family: sans-serif;
  line-height: 1.6;
}

/* ラベル用のコンテナ */
.information-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  background-color: #1976d2;
  color: white;
  font-weight: bold;
  padding: 6px 12px;
  border-bottom-right-radius: 6px;
  font-size: 14px;
}

/* アイコンとテキストを分けて表示 */
.information-box::before::after {
  content: "ℹ️ 情報";
  display: inline-block;
  line-height: 1;
}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/


/*1023px以下*/

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


/*834px以下*/

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


/*480px以下*/

@media screen and (max-width: 480px) {
  /*必要ならばここにコードを書く*/
  .article h3, .article h4 {
    width: 70%;
  }
  .article img {
    max-width: 100%;
    height: auto;
}


}