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

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

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

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

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


/************************************
** ↓ここから追加↓
************************************/


/*******************************
** ヘッダー調整
********************************/

/* ロゴ周辺の余白調整 */
.logo-header {
padding: 20px 0px 0px 0px;
}

/*******************************
** サイドバー調整
********************************/

.sidebar h3{
  background-color: #3b3b3b;
	color: #fff;
	font-size: 17px;
  padding: 6px 5px;
  margin: 16px 0;
	text-align: center;
	border-radius: 20px;
}

/*******************************
** 1カラム表示時の幅調整
********************************/

/*PC用*/
.no-sidebar .wrap {
    width: 860px;
}
.breadcrumb.sbp-main-before, 
.breadcrumb.sbp-footer-before,
.breadcrumb.pbp-main-before,
.breadcrumb.pbp-footer-before {
    padding-left: 30px;
    padding-right: 30px;
}
/*480px以下*/
@media screen and (max-width: 480px){
    .no-sidebar .wrap {
        width: auto;
    }
    .breadcrumb.sbp-main-before, 
    .breadcrumb.sbp-footer-before,
    .breadcrumb.pbp-main-before,
    .breadcrumb.pbp-footer-before {
        padding-left: 1em;
        padding-right: 1em;
    }
}

/*******************************
** インデックス調整
********************************/

/* 記事一覧 枠削除 */
.main, .sidebar, .a-wrap {
	box-shadow: none;
	border: none;
}

/* ブログカード 枠追加 */
.blogcard-wrap, .internal-blogcard-wrap {
	border: 1px solid #e4e4e4;
}

/* カテゴリーラベル非表示 */
.entry-card .cat-label{
display: none;
}

/*******************************
** 記事内調整
********************************/

/* SP表示時のタイトル */
@media screen and (max-width: 480px){
.entry-title {
	font-size: 22px;
  padding: 0em;
	}
}

/* 目次 */
.toc {
	border: 2px solid #e3e3e3;
	font-size: 0.9em;
	padding: 1em 1.6em;
	display: table;
	border-radius: 20px;
}

/* 空のpタグ削除 */
p:empty::before{
    content: none !important;
}

/* 黄下線を太字に */
.marker-under {
	background: linear-gradient(transparent 60%, #ff9 60%);
	font-weight: bold;
}

/* 青下線を太字に */
.marker-under-blue {
	background: linear-gradient(transparent 60%, #a8dafb 60%);
	font-weight: bold;
}

/* 赤下線を太字に */
.marker-under-red {
	background: linear-gradient(transparent 60%, #ffd0d1 60%);
	font-weight: bold;
}

/* テーブル内のリストの余白調整 */
table ol,ul, .article ul {
	padding-left: 20px;
	margin-bottom: 5px;
}

/* 見出しボックス内の余白調整 */
.caption-box-content p.has-text-align-center {
	margin-bottom: 5px;
}

.caption-box-content {
	padding: 1em;
}

/* 吹き出しアイコンの枠線の色調整 */
.speech-icon img, .speech-icon amp-img {
	border: 2px solid #e9e9e9;
}


/*******************************
** 記事内調整：ボタン調整
********************************/

/* 赤ボタン色味調整 */

html .body .has-red-background-color {
    background-color: #cc3131;
}

.btn-red, .ranking-item-link a, .btn-wrap.btn-wrap-red > a {
    background-color: #cc3131;
}

/* 緑ボタン色味調整 */
html .body .has-green-background-color {
    background-color: #27b87e;
}

.btn-green, .btn-wrap.btn-wrap-green > a {
    background-color: #27b87e;
}


/*******************************
** 記事内調整：テーブル
********************************/

/* 案内ボックス（ライト）の余白調整 ※再利用ボックス用 */
.is-style-light-box, .light-box {
	padding: 0px;
}

/* テーブルの枠線設定 */
.entry-content table {
	border-collapse: separate;
	border-spacing: 0;
}

/* 見出しセルの背景色 */
.entry-content th {
	background-color: #e9e9e9;
}

/* tr,tdの背景色 */
.entry-content tr td {
	background-color: #ffffff;
}

/* 横スクロールのフォント調整 */
.scrollable-table tr {
	font-size: 0.75em;
	position: relative;
	overflow: auto;
	color: #333;
 }

/* 横スクロールの左列固定 */
.scrollable-table th {
	width:22px;
	min-width:22px;
	background-color :#fff;
	position: -webkit-sticky;
	position: sticky;
	left: 0;
	z-index: 1;
 }

.scrollable-table th:nth-child(2) {
	background-color :#fff;
	position: -webkit-sticky;
	position: sticky;
	left: 22px;
	z-index: 1;
 }

/*******************************
** 記事内調整：横スクロールテーブル用のアコーディオン調整
********************************/

/* アコーディオン内の余白調整 */
.is-style-light-box, .light-box .toggle-checkbox:checked ~ .toggle-content{
	padding: 0px;
}

/* アコーディオンボタン調整 */
.is-style-light-box, .light-box .toggle-button {
	background-color: #9c9c9c;
	color: #fff;
	border: 0;
}

.is-style-light-box, .light-box .toggle-button::before {
	color: #fff;
}

/* アコーディオン開閉後の枠線非表示 */
.is-style-light-box, .light-box .toggle-checkbox:checked ~ .toggle-content {
	border: 0;
}

/*******************************
** カルーセル カスタマイズ（※現在カルーセル非表示）
********************************/

/* 全体の影削除 */
#carousel .carousel-in{
   box-shadow: none;
}
/* カード枠線・影削除 */
#carousel .a-wrap{
   margin: 0;
   box-shadow: none;
   border: none;
}
/* 記事タイトル調整 */
#carousel .carousel-entry-card-title{
   font-size: 0.75em;
   font-weight: bold;
   color: #333;
}