@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Template:   cocoon-master
Version:    0.0.5
*/

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

.entry-content {
  margin-bottom: 1em;
}

/* 記事テキストの字間調整 */
/*.entry-content p {
  letter-spacing: 0.02em;
}*/

/******
.logo-text {
  padding: 10px 0;
  font-size: 1em;
}
******/

/*** H2 見出し2 
.article h2 {
  font-size: 24px;
  margin-top: 40px;
  margin-bottom: 20px;
  padding: 24px;
  border-style: solid;
  border-width: 1px;
  border-color: #6D6D6D;  
  color: #f9f9f9;
  background: #494949;
}
***/

/* サイトタイトル */
.site-name-text-link {
  color: #333;
  text-decoration: none;
  font-weight: normal;
  padding: 0 10px;
}

/* パラメータ用の表 */
.spec02 {
  text-align: center;
  margin: 1em 0;
  border: 1;
  table-layout: fixed;
}

.spec02 th {
  padding: 2px 8px;
  /* background-color: #f9f9f9; */
  font-weight: normal;
}

.spec02 td {
  padding: 2px 8px;
  /* background-color: #f9f9f9; */
}

/* amp対策のテキストカラー指定 */
.score-orange-1 {
  color:#ff9900;
}

/* サイドバーのデザイン */
.side-bar-1 {
  font-size: 14px;
}

/* 罫線のデザイン2 */
.hr-style-2 {
  margin: 8px 0;
  border: none;   
  border-top: 1px dotted #999;
}

/* テーブル 全幅 */
.table-font-11 {
  font-size: 1em;
  border-collapse: collapse;
  width: 100%;
  /* border: solid 1px; */
}

/* テーブル 全幅 中央寄せ */
.table-font-33 {
  font-size: 1em;
  border-collapse: collapse;
  text-align: center;
  width: 100%;
  /* border: solid 1px; */
}

/* テーブル ボーダー */
.wp-block-table td, .wp-block-table th {
    border: 1px solid #ccc!important;
}

.entry-content table th, .entry-content table td {
    border: 1px solid #ccc!important;
}

/* 記事冒頭 星評価表示の非表示 */
.review-rating {
  display: none;
}

/* LiteSpeed Cache 画像遅延読み込み前 */
img[data-lazyloaded] {
  opacity: 0;
}

/* LiteSpeed Cache lazyload アニメーション */
/* 初期値 opacity .5s linear 0.2s */
img.litespeed-loaded {
  -webkit-transition: opacity .2s linear;
  -moz-transition: opacity .2s linear;
  transition: opacity .2s linear;
  opacity: 1;
}

/** ここから目次関連 **/

/* サイドバーの目次ウィジェットコンテンツ位置調整 */

#pc_text-2 .toc.tnt-none.toc-center {
    padding: 0 4px;
    width: 100%;
}

.widget-sidebar .toc-content {
    padding: 0 8px;
}

/* 目次のフォントサイズ */
.toc {
  font-size: 0.95em;
}

/* ウィジェット 目次スクロールバー Android iPhone */
.toc-widget-box,
#pc_text-2 .text-pc {
    max-height: 36vh;
    overflow-y: auto;
    margin-bottom: 24px;
    position: relative;
}

.toc-widget-box::after,
#pc_text-2 .text-pc::after {
  content: "";
  position: sticky;
  bottom: 0;
  display: block;
  height: 45px;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0),
    rgba(255,255,255,1)
  );
  pointer-events: none;
}

/* スクロールバー全体 */
.toc-widget-box::-webkit-scrollbar,
#pc_text-2 .text-pc::-webkit-scrollbar {
  width: 14px;
}

/* スクロールバーのハンドル */
.toc-widget-box::-webkit-scrollbar-thumb,
#pc_text-2 .text-pc::-webkit-scrollbar-thumb {
  background: #949495;
  border-radius: 10px;
}

/* スクロールバーの背景エリア */
.toc-widget-box::-webkit-scrollbar-track,
#pc_text-2 .text-pc::-webkit-scrollbar-track {
  background: #ccc;
}

/* 目次h2アイコン */
.toc-list>li>a::before {
  font-family: "Font Awesome 5 Free";
  content: "\f058";
  font-weight: 900;
  padding-right: 5px;
}

/* 目次h3アイコン */
.toc-list>li li a::before {
  font-family: "Font Awesome 5 Free";
  content: "\f105";
  font-weight: 900;
  padding-right: 5px;
} 

/** ここまで目次関連 **/

/* サイドバーのボックス装飾 */
.side-info-box-3 {
  border: 1px solid #ccc;
  border-radius: 4px;
  margin: 1em 0;
  line-height: 1.5;
  position: relative;
  padding: 1.6% 2.2% 2%;
}

/* サイドバーの見出し */
.sidebar h3 {
  padding: 8px 12px;
}

/* エントリーカード スニペット */
.entry-card-snippet {
  font-size: .95em; /* 0.8em */
}

/* ブログカード スニペット */
.blogcard-snippet {
  font-size: .95em; /* 0.8em */
}

/* 投稿関連記事 スニペット */
.related-entry-card-snippet {
  font-size: .95em; /* 0.8em */
}

/* プロフィールボックス 余白 */
.nwa .author-box .author-content {
  padding: 0; /* 1em */
}

/* プロフィールボックス 行ボックス高さ */
.author-box p {
  line-height: 1.5; /* 1.3 */
}

/* プロフィールボックス ボタンサイズ */
.author-box .sns-follow-buttons a.follow-button {
  font-size: 36px; /* 18px */
  width: 48px; /* 24px */
  height: 48px; /* 24px */
  margin-bottom: 6px; /* 4px */
  margin-right: 6px; /* 4px */
}

/** PC・モバイル共通 Adsense アドセンス **/
/* サイドバー追従エリア 高さ指定 */
#common_ad-4 .ad-wrap {
  min-height: 250px;
}

/* インデックスリストトップ 高さ指定 */
#common_ad-6 .ad-wrap {
  min-height: 90px;
}

/** PC Adsense アドセンス **/
/* サイドバーアドセンスの高さ指定 */
#pc_ad-2 .ad-wrap {
  min-height: 250px;
}

#pc_ad-13 .ad-wrap {
  min-height: 250px;
}

#common_ad-4 .ad-wrap {
  min-height: 250px;
}

/* サイドバー追従 アドセンス高さ指定 */
#pc_ad-12 .ad-wrap {
  min-height: 250px;
  max-height: 280px;
}

/** モバイル Adsense アドセンス **/
/* コンテンツ上部 モバイル用 */
#mobile_ad-11 .ad-wrap {
  min-height: 60px;
}

/* パンくずリストのリンクテキストカラー */
.breadcrumb a {
  text-decoration: none;
  color: #444;
}

/* ブロックエディタの画像キャプション */
.wp-block-image figcaption {
  font-size: 0.9em;
  opacity: 0.9;
}

/* クラシックエディタの画像キャプション */
.wp-caption .wp-caption-text {
  font-size: 0.9em;
}

/* Copy Anything to Clipboardのボタン位置 */
.copy-the-code-outside {
  text-align: left;
}

/* ウィジェットのランキングバナー */
.widget-blog-ranking-banner {
  display: flex;
  display: webkit-flex;
  flex-flow: row wrap;
  gap: 0 4px;
}

/* マイクロコピー テキストを左寄せ */
.micro-copy.aligncenter {
  text-align: left;
}

/* Cocoonタブブロック パッシブタブのボーダー */
.tab-label-group .tab-label {
    border-top: solid 1px;
    border-left: solid 1px;
    border-right: solid 1px;
}

/* Cocoonタブブロック コンテンツグループのボーダー */
.tab-content-group {
    border: 1px solid #bbb;
}

/* 通知エリア */
.notice-area {
    font-size: 0.9em;
}

/* 本文カテゴリー・タグ 表示 */
.cat-link, .tag-link {
    margin-top: 2px;
    font-size: 13px;
}

/* Amazonアソシエイト画像 */
.amazon-api-image {
    text-align: center;  
}

.amazon-api-image-text {
    font-size: 0.9em;
}

/* 検索ブロック ボタン幅 */
.wp-block-search__button {
    width: initial;
}

/* ボックスメニューのラベル */
.box-menu-label {
    color: #5a5a5a;
}

/*** スキンてがきノート用 ***/
/* ブロックエディター ビジュアルエディターの挙動不具合対応 H2から極端な角丸を無効化 */
/*
.editor-styles-wrapper h2.wp-block-heading,
.editor-styles-wrapper .article h2 {
    border-radius: 0 !important;
}
/*

/* H2の境界線非表示 */
/*
.article h2, .related-entry-heading, .comment-title,
.article h2:before, .article h2:after,
.related-entry-heading:before, .comment-title:before,
.related-entry-heading:after, .comment-title:after { 
    border: none;
}
*/

/* PC表示サイドバーの目次調整 */
/*
#pc_text-2 .toc.tnt-disc.toc-center.tnt-disc.border-element {
    padding-left: 4px;
    padding-right: 4px;
    width: 100%;
}
*/


/************************************
** SNS ボタンをまとめて小さくする
************************************/

/*トップシェアボタンの枠組み*/
/**
.sns-share.ss-top .sns-share-buttons {
	justify-content: flex-end; /*右に寄せる*/
}
**/

/*ボトムシェア・フォローボタンの枠組み*/
.sns-share.ss-bottom .sns-share-buttons,
.sns-follow.sf-bottom .sns-follow-buttons,
.sns-follow.sf-widget .sns-follow-buttons {
	justify-content: center; /*中央に寄せる*/
	flex-wrap: wrap; /*折り返す*/
}

/*シェア・フォローボタンのリンク*/
.sns-share.ss-top .sns-buttons a,
.sns-share.ss-bottom .sns-buttons a,
.sns-follow.sf-bottom .sns-buttons a,
.sns-follow.sf-widget .sns-buttons a {
	width: 48px; /*横幅*/
	height: 32px; /*高さ*/
	margin-right: 4px; /*右側の余白*/
	margin-left: 4px; /*左側の余白*/
	border-radius: 3px; /*丸み*/
}

/*シェアボタンのアイコン*/
.sns-share.ss-top .sns-buttons a .social-icon,
.sns-share.ss-bottom .sns-buttons a .social-icon {
	font-size: 20px; /*アイコンの大きさ*/
}

/*フォローボタンのアイコン*/
.sns-follow.sf-bottom .sns-follow-buttons .follow-button,
.sns-follow.sf-widget .sns-follow-buttons .follow-button {
	font-size: 20px; /*アイコンの大きさ*/
}

/*シェアボタンのキャプション*/
.sns-share.ss-top .sns-buttons a .button-caption,
.sns-share.ss-bottom .sns-buttons a .button-caption {
	display: none; /*非表示*/
}

/*シェア・フォローボタンのシェア数*/
.sns-share.ss-top .sns-buttons a .share-count,
.sns-share.ss-bottom .sns-buttons a .share-count,
.sns-follow.sf-bottom .sns-buttons a .follow-count,
.sns-follow.sf-widget .sns-buttons a .follow-count {
	right: 1px; /*右側からの距離*/
	bottom: 0; /*下側からの距離*/
	font-size: 10px; /*文字の大きさ*/
}

/* コメント一覧 */
#comment-area .comment-list .depth-1 {
	border: 1px solid var(--cocoon-basic-border-color);
	border-left: 2px solid #9ea1a3;
	margin-bottom: 1em;
	padding: .6em;
	border-radius: 6px;
}

/* ロゴテキスト */
.logo-text {
	padding: 4px 0 6px;
}

/* ウィジェット インデックスリストミドル */
#common_ad-5 {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 0.2em;
  margin-bottom: 0;
  box-sizing: border-box;
}

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

/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
  
  /* SNS メインカラムトップシェアボタン非表示 */
  .ss-top {
    display: none;
  }
}

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

  /* エントリーカード スニペット */
  .entry-card-snippet {
    font-size: 16px; /* 14px */
  }

  /* ブログカード タイトル */
  .blogcard-title {
    font-size: 17px; /* 0.9em */
  }

  /* ブログカード スニペット */
  .blogcard-snippet {
    font-size: 16px; /* 12px */
  }

  /* 投稿関連記事 スニペット */
  .related-entry-card-snippet {
    font-size: 16px; /* 14px */
  }

  /* CTAボックス メッセージ */
  .cta-box {
    font-size: .95em; /* .8em */
  }

}

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

  /* エントリーカード スニペット */
  .entry-card-snippet {
    font-size: 15px; /* 13px */
  }

  /* ブログカード タイトル */
  .blogcard-title {
    font-size: 16px; /* 0.9em */
  }

  /* ブログカード スニペット */
  .blogcard-snippet {
    font-size: 15px; /* 0.74em */
  }

  /* 関連記事 スニペット */
  .related-entry-card-snippet {
    font-size: 15px; /* 13px */
  }

  /* CTAボックス メッセージ */
  .cta-box {
    font-size: .95em; /* .8em */
  }

  /* プロフィールボックス 名前文字サイズ */
  .author-box .author-name {
    font-size: 17px; /* .9em; */
  }

  /* プロフィールボックス 概要文字サイズ */
  .author-box .author-description {
    font-size: 16px; /* .9em; */
  }

  /* 記事タイトル */
  .entry-title {
	padding: 0;
 }

}