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

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

/* 20240129 ソース 長い行の折り返し ここから */
.wp-block-code code {
    white-space: pre !important;
}
/* 20240129 ソース 長い行の折り返し ここまで */

/* 20240129 ソース 行番号を消す ここから */
/* 'nocode' を追加CSSクラスに記載する */
.is-code-row-number-enable pre.nocode::before {
	content: ""; /* 行番号を消す */
}
.is-code-row-number-enable pre.nocode {
	padding: .5em; /* 余白設定 */
}
/* 20240129 ソース 行番号を消す ここまで */

/* 20240223 LSCache + grayish 表示不具合修正 ここから */
/* スライドサイドバーの中身を表示させる */
.no-mobile-sidebar .sidebar {
    display: block;
}
/* トップページのホームボタンが中央に寄るのを防止する */
/* 20240426 Cocoon Ver.2.7.3.1, grayish Ver.1.0.12 で解消した為コメント */
/* .has-logo-button .menu-button {
    width: 70px;
} */
/* この二つの対策で LiteSpeed Cache プラグインの UCSS 生成できる */
/* 20240223 LSCache + grayish 表示不具合修正 ここまで */

/* 20240313 スクロールヒントを表示する ここから */
/* /cocoon-master/plugins/scroll-hint-master/css/scroll-hint.css を
 *  CSS 除外するのに加えて、grayish スキンでは下記も必要 */
/* スクロールヒント  for table */
.skin-grayish .scroll-hint-icon {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: var(--skin-grayish-cat-back);
  width: 100px;
  height: 100px;
  border-radius: 99%;
  top: calc(50% - 30px);
  left: unset;
  right: 20px;
}

.skin-grayish .scroll-hint-icon:before,
.skin-grayish .scroll-hint-icon:after {
  display: none;
}

.skin-grayish .scroll-hint-text {
  color: var(--white);
  margin-top: 0;
}
/* 20240313 スクロールヒントを表示する ここまで */

/* 20240326 PC 表示時の左側に sns-share 表示 ここから */
/* mainが見える間 表示 */
.skin-grayish .article-header .sns-share[data-scroldisp=on] {
  opacity: 1;
  visibility: visible;
}

/* mainが見えない時 非表示 */
.skin-grayish .article-header .sns-share[data-scroldisp=off] {
  opacity: 0;
  visibility: hidden;
}
/* 20240326 PC 表示時の左側に sns-share 表示 ここまで */

/* 20250131 タブブロックの表示修正 ここから */
/*   20250131 修正完了
 *    CSS側 : is-active を再設定 (元は cocoon-master の style.css で定義)
 *    JS側  : tab-frontend.js を "JS除外" と "JS Deferred / Delayed 除く" の両方に入れる
 */
.tab-label-group .tab-label.is-active {
  background-color: var(--cocoon-tab-label-active-color); /* #404453; */ 
  color: var(--cocoon-white-color);  /* #fff; */
}
.tab-content-group .tab-content.is-active {
    display: block;
}
/* 20250131 タブブロックの表示修正 ここまで */


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

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

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