@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){
  /*必要ならばここにコードを書く*/
}
.go-to-toc-button {
    flex-direction: column;
}
.go-to-toc-button:after {
    content:'目次';
    font-size: 12px; /* 文字サイズ */
    margin-top: 2px;
}
.go-to-toc-button .fa:before {
    content: '\f0ca';
}
.go-to-toc-button {
    border-radius: 50%; /* 丸くする */
}
.go-to-toc-button {
    width: 60px; /* 横幅 */
    height: 60px; /* 高さ */
}

/* 見出しリセット */
/* 見出し2 */
.article h2 span::after {
    background: transparent;
}
.article h2{
background:none;
border-bottom:none;
}


/* 見出しカスタマイズ */
/* H1 */
.article h1{
font-weight: bold;
}
/* H2 */
.article h2{
background: #8bc7d1;/*背景色*/
font-weight: bold;
padding: 15px;
color: #fff;
}

/* H3 */
.article h3{
background:none;
font-weight: bold;
padding: 15px;
color: #333333;
}



/* H5 */
.article h5{
border-bottom:none;
padding: 0;
}

/* H6 */
.article h6{
border-bottom:none;
padding: 0;
}



/*------------------------------------
  　　SNSシェアボタン＋（ロゴのみ）
--------------------------------------*/
.button-caption { display: none; }
.sns-share-buttons a {
 border-radius: 6px; /*角の丸み*/
 height: 25px; /*ボタンの高さ*/
}
.bc-brand-color-white.sns-share a {
 border: none; /*枠線を消す*/
 box-shadow: none;
}
/*シェアボタン一列に*/
#main .sns-share a {
width: 35px; /*ボタンの幅*/
height: 35px; /*ボタンの高さ*/
margin-bottom: 0.5em; /*ボタンの下の余白*/
}
.social-icon {
font-size: 17px;
}
/*------------------------------------
  　　SNSフォローボタン＋（ロゴのみ）
--------------------------------------*/
.button-caption { display: none; }
.sns-follow-buttons a {
 border-radius: 6px; /*角の丸み*/
 height: 25px; /*ボタンの高さ*/
}
.bc-brand-color-white.sns-follow a {
 border: none; /*枠線を消す*/
 box-shadow: none;
}
/*followボタン一列に*/
#main .sns-follow a {
width: 35px; /*ボタンの幅*/
height: 35px; /*ボタンの高さ*/
margin-bottom: 0.5em; /*ボタンの下の余白*/
}
.social-icon {
font-size: 17px;
}

/*---------------------------------
親カテゴリのカスタマイズ
--------------------------------*/
.widget_categories ul li a{ 
  border-bottom: 1px dashed #CCCCCC; /* 下線の種類 */
}

.widget_categories ul li a::before{
  font-family: FontAwesome;
  content: "\f07b"; /* FontAwesomeのユニコード */
  color: #333333; /* アイコンの色 */
  padding-right: 6px;
}

.widget_categories > ul > li > a:first-child{ 
  border-top: none;
}

/*---------------------------------
子カテゴリのカスタマイズ
--------------------------------*/
.widget_categories ul li ul li a::before{
  font-family: FontAwesome;
  content: "\f114"; /* FontAwesomeのユニコード */
  color: #333333; /* アイコンの色 */
  padding-right: 6px;
}

/* H2見出しの疑似要素をリセット*/

.entry-content h2 > span::before {
    content: none;
}

/************************************
** アイキャッチ画像を記事タイトルの上に移動する
************************************/

/*記事ヘッダーの枠組み*/
.article-header {
	display: flex; /*フレックスボックスレイアウト*/
	flex-direction: column; /*ブロック要素を縦に並べる*/
}

/*アイキャッチの枠組み*/
.eye-catch-wrap {
	order: -1; /*順番*/
	overflow: hidden; /*はみ出した部分を非表示 ※IE対策*/
}

/*アイキャッチ*/
.eye-catch {
	margin-bottom: 0; /*下の余白*/
}

/************************************
** タブ見出しボックス（Cocoon 汎用ブロック）のデザインをスタイリッシュにする
************************************/

/*枠組み*/
.tab-caption-box {
	position: relative; /*要素の配置*/
	margin-top: 2em; /*上の余白*/
	margin-right: 2%; /*右の余白*/
	margin-left: 2%; /*左の余白*/
}

/*ラベル*/
.tab-caption-box-label {
	position: absolute; /*要素の配置*/
	top: 0; /*上からの距離*/
	left: 0; /*左からの距離*/
	border-radius: 0; /*丸み*/
	font-size: .833333em; /*文字の大きさ*/
}

/*コンテンツ*/
.tab-caption-box-content {
	padding: 2.2em 1.2em 1em; /*内側の余白*/
	border-width: 1px; /*線の太さ*/
	border-radius: 0; /*丸み*/
	font-size: .9375em; /*文字の大きさ*/
}

/*横幅 440px 以下に適用される*/
@media screen and (max-width: 440px){
	/*枠組み*/
	.tab-caption-box {
		margin-right: 0; /*右の余白*/
		margin-left: 0; /*左の余白*/
	}
}

/************************************
** ページをフェードイン表示する
************************************/

.body {
	animation: fadein 2s forwards; /*アニメーション指定*/
}

@keyframes fadein {
	0% {opacity: 0} /*アニメーション開始時*/
	100% {opacity: 1} /*アニメーション終了時*/
}

/*カルーセルタイトル枠マックス*/
.carousel-entry-card-title {
    max-height: 5em;
}